segunda-feira, 4 de julho de 2011

Aprendendo e desenvolvendo em HTML5

Hoje eu vou falar rapidamente do futuro da WEB, futuro da web? Sim estou falando do HTML5




HTML5 (Hypertext Markup Language, versão 5) é a quinta versão da linguagem HTML. Esta nova versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da WEB, trazendo novas funcionalidades como semântica e acessibilidade, com novos recursos antes só possíveis por meio de outras tecnologias, e trazendo uma importante disseminação dentre todos os novos navegadores de internet, tornando-o mais universal.



Novos elementos

Vários novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento 
 com foco na semântica; outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens. Os principais elementos dessa nova versão são:



quarta-feira, 29 de junho de 2011

SELETORES JQUERY

Olá amigos! Hoje vou sair um pouco do desenvolvimento com ZEND FRAMEWORK para outro assunto muito importante que é o desenvolvimento FRONT END, mais propriamente vou ensinar a utilizar a maior biblioteca js(javascript) do mundo o JQUERY e para começar bem com ele vou explicar em diversas postagens vários metodos do JQUERY.


(LOGO JQUERY COM SLOGAN 'ESCREVA MENOS, FAÇA MAIS)




Mas o que é de fato o JQUERY?

 Bem jQuery é uma Biblioteca JavaScript que simplifica percorrer documentos HTML, manipulação de eventos, animação e interações Ajax para desenvolvimento web rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript.  



Caso vc tenha dúvida acesse o site para entender melhor! Para entender bem esses posts vc precisa entender um pouco sobre HTML e JAVASCRIPT.


MÃOS A OBRA
Hoje vou explicar basicamente como percorrer nosso elemento DOM a fim de selecionar um elemento para posteriormente fazer algo com ele...


Antes de tentar fazer qualquer coisa com o jquery vc precisa primeiro baixar a biblioteca, no nosso caso vamos apenas chamar direto do google, antes do head faça:


(TIRE OS ESPAÇOS)



< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">< / script >




Imaginemos um html escrito dessa maneira(não vou escrever a página inteira mas apenas oq eu vou explicar):




< ul >
 < li > ITEM 1 < / li>
 < li > ITEM 2 < / li>
< / ul >



Eu quero selecionar apenar o item 2 e ocultar ele como eu faria? Preciso percorrer o HTML


< scrip >
  $('li:eq(1)').hide();
< / script >



O que foi feito aqui em cima é bemm simples, apenas utilizamos o seletor personalizado de índice que é o :eq() ... entramos com o jquery $() depois falamos que queremos um li e nele usamos o eq posição 1 (o jquery percorre o DOM como um array e ja que começa do zero estamos selecionando o segundo li 'ITEM 2' e depois disso utilizando o metodo .hide(); ou seja quando vc abrir essa página a lista 2 some. Pode parecer totalmente simples (e é) mas o intuito aqui é vc entender a possibilidade desses seletores, com isso vc faz muita coisa como por exemplo "a partir do evento clique eu oculto parte do menu ou aquela opção..." isso ja depende da sua necessidade mesmo!

Espero ter ajudado...



  



terça-feira, 28 de junho de 2011

Enviando e-mail com ZEND FRAMEWORK


Mais um post sobre ZEND FRAMEWORK e dessa vez será algo bem simples mas muito util que é enviar e-mail com zend framework.
Para isso vamos utilizar a classe Zend_Mail


Como foi dito em outras postagens vc precisa conhecer o funcionamento do zend para enviar o e-mail dessa forma ok? Vou partir tambem do principio que vc sabe em que controller irá colocar o envio do e-mail o intuito aqui é ensinar como fazer isso.


Zend_Mail provê um conjunto de características gerais para compor e enviar mensagens, tanto de texto quanto mensagens de correio eletrônico multipart, em conformidade com MIME.


O correio pode ser enviado via Zend_Mail_Transport_Smtp ou Zend_Mail_Transport_Sendmail (lembra-se do mail do php? padrão)


Vamos para de falar e colocar na prática uma mensagem de e-mail simples, vou enviar para meu amigo que tem o e-mail 'amigo@gmail.com'
do meu e-mail paulo.gomes@profpv.com veja que simples o uso dos metodos:


###########################################
//chamando o zend mail
require_once 'Zend/Mail.php';


//criando objeto $email
$email = new Zend_Mail();
$email->setBodyText('Mensagem aqui, ou seja todo o texto, ou amigo');
$email->setFrom('paulo.gomes@profpv.com', 'Eu mesmo o PV');
$email->addTo('amigo@gmail.com', 'Nome do amigo');
$email->setSubject('Assunto do e-mail');
//disparando e-mail
$email->send();
###########################################

Simples e rápido mas a classe não se limita a isso, é bem mais completa e assim que puder eu coloco algo sobre ela.


Uma dica final, se vc quer adicionar cópia oculta e etc o nome do metodo é intuitivo addCc() esse adiciona com cópi
e addBcc() adiciona com cópia oculta.


Espero ter ajudado e até a próxima.

segunda-feira, 27 de junho de 2011

Upload de vários arquivos com zend framework e jquery



Esse post é dedicado a você que precisa fazer upload multiplo de arquivo com zend, para isso alguns detalhes antes...

Entender o que vamos fazer...
Vc que precisa fazer upload multiplo com zend framework sua solução esta aqui, e o que é melhor ainda não vamos criar diversos inputs mas sim utilizar o nosso grande amigo JQUERY para organizar esse FRONTEND e com um único input vamos inserir todos os arquivos que nos interessar...

O que vc precisa saber para entender o tutorial...
Enteder MVC é essencial, e um pouco do funcionamento do ZEND FRAMEWORK é interessante, mas se vc utilizar outro framework como CODEIGNITER, CAKE,SYMPHONY ou YII irá entender perfeitamente tudo que irei explicar aqui.

Mãos a 'OBRA'...

Uma vez que o importante aqui é entender como montar esse multiplo upload com ZEND então vamos separar duas partes apenas do MVC que são o CONTROLLER (onde vamos montar a lógica do negócio)  e a VIEW (onde vamos receber os arquivos pelo usuário).

Vamos usar 3 arquivos somente
No Controller
IndexController.php

E na View (INDEX)
index.phtml e envia.phtml

Vamos começar pelo FRONTEND ou seja, pelo JQUERY...

Para inserir vários arquivos em um unico input utilizamos o plugin do JQUERY Multifile.

Carregue esses arquivos na view:
 Carregando js
  1. <?php
  2.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.js');
  3.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.MetaData.js');
  4.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.MultiFile.js');
  5. ?>

OBSERVAÇÃO: Preste atenção na chamada, eu coloquei os arquivos la na min ha public dentro do diretório js que eu mesmo criei, essa chamada deve ficar clara, é bem simples para você que esta acostumado mas vc que costuma chamar arquivos js e folhas de estilo procure lêr algo sobre o assunto pois a estrutura de diretório do zend é diferente.


Vamos para o simples html de upload da imagem:

  formulario de envio
  1. <form name="fotos" action="/index/envia" method="POST" enctype="multipart/form-data">
  2. <input type="file" name="foto[]"  class="multi" accept="jpeg|jpg|png|gif" maxlength="20" />
  3.         <button name="enviar" >enviar </button>
  4. </form>

Vc que esta acostumado com isso é simples mas vamos explicar:


Criamos o formulario mandando para a enviaAction do controller q vamos criar em breve...
Montamos o input colocando como nome um tipo array "
foto[]" e inserindo a classe "multi" (isso é necessário para chamar o multifle)
Ainda colocamos o parametro accept e quais formatos vamos aceitar o | serve para separar, por fim o maxlength que define a quantidade de arquivos que vamos aceitar, nesse caso aceito apenas 20 arquivos.
Percebem a velocidade q fizemos algo que alem de visualmente legal é bem funcional?
Bem, terminando o front end vamos abrir o arquivo IndexController.php

Vamos criar a action q ja falei 2 vezes acima... a tal da enviaAction:
public function enviaAction(){ 
}

...dentro dela vamos receber o arquivo utilizando a classe Zend_File_Transfer_Adapter_Http

ACTION PARA SUBIR ARQUIVO
  1.     public function enviaAction() {
  2.         /* Instancia Zend_File_Transfer_Adapter_Http */
  3.         $upload = new Zend_File_Transfer_Adapter_Http();
  4.         /* Destino do arquivo */
  5.         $upload->setDestination('temp/');
  6.         /* Pega info dos files */
  7.         $files = $upload->getFileInfo();
  8.         /* Faz laço dos files */
  9.         foreach ($files as $file => $info) {
  10.             /* Verifica se é valido */
  11.             if ($upload->isValid($file)) {
  12.                 /* Sobe */
  13.                 $upload->receive($file);
  14.             }
  15.         }

Vou explicar apenas o foreach pois os comentários estão bem intuitvos...
utilizamos o metodo getFileInfo(); da classe chamada, com ele transformamos nosso objeto $files em um array de dados e após esse array é só jogar no foreach perguntar se é valido e utilizar o método receive inserindo o indice que é o arquivo propriamente dito.

Mas e ai pv pq vc criou o envia.phtml na view? 
Resposta: A para exibir alguma mensagem do tipo "Arquivo enviado com sucesso" o correto era fazer o teste no controller e passar para a view um resultado tipo assim 
$this->view->result = $resultadocontroller....


Espero ter ajudado, vou arrumar meu esquema de cod pq escrever aqui fica maio bizarro hehehe...


Qualquer dúvida estamos ai =]

sábado, 18 de junho de 2011

Listas de definição, Dl, dt, dd

Estou reestruturando um código de um website aqui da empresa e para uma determinada tarefa eu achei melhor usar uma estrutura de listas de definição. Logo pensei: “putz, será que todo mundo sabe como e por que utilizar uma lista de definição?“. Então resolvi postar aqui no blog este artigo.
Bom, para iniciar o post, como o próprio nome diz, elas listas servem para construirem definições de termos. Na sua estrutura são usadas 3 tags: dl (definition list), dt (definition term) e dd (definition description), da seguinte forma:

dl
dt /dt
dd /dd
/dl

A tag dl é o container. Dentro da tag dt, você deve colocar o termo a ser definido. Já dentro da tag dd você deve colocar a descrição do termo.
Espero ter ajudado em mais este conceito. Até mais

Fonte: Fabricio cota 

segunda-feira, 23 de maio de 2011

Ckeditor no zend framework, php, fckeditor

Olá!
Hoje vou explicar de forma simples como se usa o CKeditor no zend framework.

Para quem não sabe o CKeditor (antigo FCKeditor) é uma classe para editor de texto escrita em diversas linguagens.


Antes de mais nada baixe a classe ai no proprio site deles: http://ckeditor.com/download




Depois de baixar, descompacte e insira ela na sua pasta public...

no meu caso coloquei assim: nomedoprojeto\public_html\js\ckeditor
ou seja, dentro da public, e dentro da js eu inseri a pasta toda do ckeditor.


Precisamos antes de mais nada ir na view que vamos utilizar a classe e inserir o js, a minha view é a de noticias então adicionei na views/scripts/noticias/index.phtml

Eu chamo o js dessa forma:

< ? php

  //chamando ckeditor o js
  $this->headScript()->appendFile($this->baseUrl().'/js/ckeditor/ckeditor.js');
?  >

Percebam que pego o baseUrl + o diretório após o public...

Agora vamos criar um Helper para o CKeditor, vc não sabe o que são os helpers do ZEND?
Resumidamente o Helper é uma classe auxiliar para a view, imagina um caso na qual você precisa executar funções complexas na view como o de organizar a data, vc não faria isso na view certo? E se precisa utilizar 'n' vezes? E logicamente não faria no controller pq é ação expecifica para visão, sendo assim usamos os Helpers, q são classes que chamamos sem precisar carregar na view, basta criar uma pasta 'helpers' dentro da pasta views ao lado da scripts =]

Quer uma explicação mais detalhada? Documentação do ZEND


Então vamos la, criando esse diretório: /view/helpers vamos criar uma página php dentro dela chamada  SetupEditor.php (de o nome que vc quiser)

Dentro desse helper criado vamos adicionar:


class Zend_View_Helper_SetupEditor {

    f u n c t i o n setupEditor( $ textareaId ) {
        return "< script type=\"text/javascript\">
    CKEDITOR .replace ( '" . $textareaId . "' );
        < / script >";
    }
}
 
 
O que estamos fazendo é simples, apenas criando uma
 função que recebe o id do text area e retornamos 
ele com o script do ckeditor, isso poderia ser feito
 na view mas e se você precisa fazer várias vezes, 
não é melhor criar um helper?
 
 
 
Agora vamos voltar a nossa view e adicionar um text 
area: 
 
< textarea name="not_texto" id="not_texto"< 
/ textarea> 


depois de adicionar o textarea vamos apenas utilizar o 
helper com o mesmo nome do textarea assim:

 echo $this->setupEditor( 'not_texto' ); ?>

E PRONTO, vejam que não usei o zend form então no 
controller
eu receberia o dado pelo getParam mais o menos assim:

$request = $this->getRequest();
$noticia = $request->getParam('not_texto');

simples não é?!

Fala sério esse Helper é uma mão na RODAAAA xD
Vejam que não utilizamos a classe php do CKeditor 
mas sim a de JS.
Acho que é mais simples, uma vez q isso é FRONTEND.

Espero ter ajudado.


Baseado no tutorial do site norte americano Harikt

@pv_fusion

 
 

sábado, 14 de maio de 2011

O que é JSON?


Que estamos evoluindo mais rápido que a velocidade dos carros da F1 todo mundo sabe, mas e como acompanhar? Será que tudo que aparece de novo é realmente importante aprender?
A resposta para isso é simples: 'DEPENDE'...
Depende?
Sim, depende do seu segmento...

Mas como nesse caso eu abordo desenvolvimento de aplicações para a WEB então eu ja deixo claro o segmento do JSON... (DESENVOLVIMENTO DE SOFTWARE)...



Mas afinal o que significa JSON?

JSON é um acrônimo para "JavaScript Object Notation", é um formato leve para intercâmbio de dados computacionais. JSON é um subconjunto da notação de objeto de JavaScript, mas seu uso não requer Javascript exclusivamente.

A simplicidade de JSON tem resultado em seu uso difundido, especialmente como uma alternativa para XML em AJAX. Uma das vantagens reivindicadas de JSON sobre XML como um formato para intercâmbio de dados neste contexto, é o fato de ser muito mais fácil escrever um analisador JSON.
Em JavaScript mesmo, JSON pode ser analisado trivialmente usando a função eval(). Isto foi importante para a aceitação de JSON dentro da comunidade AJAX devido a presença deste recurso de JavaScript em todos os navegadores web atuais.

Na prática, os argumentos a respeito da facilidade de desenvolvimento e desempenho do analisador são raramente relevados devido aos interesses de segurança no uso de eval() e a crescente integração de processamento XML nos navegadores web modernos. Por esta razão JSON é tipicamente usado em ambientes onde o tamanho do fluxo de dados entre o cliente e o servidor é de supra importância (daí seu uso por Google, Yahoo, etc., os quais servem milhões de usuários), onde a fonte dos dados pode ser explicitamente confiável, e onde a perda dos recursos de processamento XSLT no lado cliente para manipulação de dados ou geração da interface, não é uma consideração.

Enquanto JSON é frequentemente posicionado "em confronto" com XML, não é incomum ver tanto JSON como XML sendo usados na mesma aplicação. Por exemplo, uma aplicação no lado cliente a qual integra dados do Google Maps com dados atmosféricos através de SOAP, requer suporte para ambos formatos de dados.

Existe um crescente suporte para JSON através do uso de pequenos pacotes de terceiros. A lista de linguagens suportadas incluem ActionScript, C/C++, C#, Delphi, ColdFusion, Java, JavaScript, Objective CAML, Perl, PHP, ASP 3.0, Python, Rebol, Ruby, Lua e Harbour.

Um exemplo de objeto JSON:


{ "Aluno" : [         
 { "nome": "João", "nota": [ 8, 9, 7 ]  },         
{ "nome": "Maria", "nota": [ 8, 10, 7 ] },         
{ "nome": "Pedro", "nota": [ 10, 10, 9 ] }      
] }


Espera ai pv.... esse tal JSON é um array? Basicamente isso amigo! 
Mas com ele conseguimos "conversar" com outras linguagens...  Veja uma comparação de XML e Json 
 
OBJETO JSON 
{"menu": {   
"id": "file",   
"value": "File",  
 "popup": {     
"menuitem": [       
{"value": "New", "onclick": "CreateNewDoc()"},      
 {"value": "Open", "onclick": "OpenDoc()"},       
{"value": "Close", "onclick": "CloseDoc()"}     ]   } }}

Mesmo exemplo só que em XML
< menu id="file" value="File" >
  < popup >
    < menuitem value="New" onclick="CreateNewDoc()" / >
    < menuitem value="Open" onclick="OpenDoc()" / >
     
  < / popup >
< / menu >
Percebeu a limpeza?  Valeu!