Canvas foi uma tecnolgia criada pela apple e incorporada primeiramente ao motor de renderização webkit (safari), mas tarde foi inserida no Gecko e no Opera e padronizada pelo WHATWG.

Introdução:

Antes de mais nada quero esclarecer que esse post é um tutorial, para pessoas que querem aprender o canvas rápidamente…. caso você queira entender a fundo como funciona de uma olhada nos seguintes links:

• http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
• http://dev.w3.org/html5/spec/Overview.html#the-canvas-element

para começar, antes de tudo devemos iniciar a tag <canvas> exemplo:

<canvas id="c1" width="500" height="500">
Aqui dentro você pode colocar qualquer coisa que vai aparecer caso o navegador não tenha suporte ao elemento canvas.
</canvas>

O elemento canvas tem 2 atributos para definir o tamanho (width e height) e 1 atributo para identificação (id), somente.

Desenhando:

A primeira coisa a se fazer é obter a referência ao objeto, e tentar instânciar o objeto CanvasRenderingContext2D

<canvas id='ex' width='250' height='250'>
      inicia o html
</canvas>

<script language='javascript'>
 // Pega a referência ao elemento canvas do html
 var canvas = document.getElementById("ex");

 // Pega o objeto CanvasRenderingContext2D
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)"; // cor de preenchimento
 ctx.fillRect(10, 10, 55, 50); // desenha um retângulo

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; // cor de preenchimento
 ctx.fillRect (30, 30, 55, 50); // desenha outro retângulo
</script>

demonstração deste exemplo

No nosso exemplo a cima a variável ctx contém uma referência para o objeto CanvasRenderingContext2D onde contém as propriedades e métodos responsáveis pela mágica. Na linha 12 inserimos uma cor de preenchimento, as cores utilizadas devem seguir o padrão CSS ou CanvasGradient e CanvasPattern.

Esse é o princípio básico de canvas:

1. Declare as tags <canvas>, de preferência adicione o atributo ID
2. Obtenha a referência ao canvas, nesse caso utilizamos o o ‘document.getElementById()‘
3. Obter uma referência ao Context, no nosso caso o ‘2D Context‘, terceiros podem desenvolver outros Context, como o moz-3d e agora o WebGL, falaremos do WebGL mais tarde.

Retângulos

Atualmente temos 3 funções para desenha retângulos:

• fillRect(x, y, width, height) : Desenha um retângulo com preenchimento
• strokeRect(x, y, width, height) : Desenha retângulo, mas da cor somente às bordas
• clearRect(x, y, width, height) : Limpa uma área inserindo um retângulo transparente

 var canvas = document.getElementById("ex");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect(10, 10, 40, 40);

 ctx.strokeStyle = "rgb(0, 0,255)";
 ctx.strokeRect(60, 10, 40, 40);

 ctx.clearRect(30, 15, 50, 30);

demonstração deste exemplo.

Formas complexas

O Context2D só tem retângulos como formas primitivas, para criar diferentes formas devemos utilizar Paths (caminhos), as funções de Path são:

• void beginPath() : Reseta o Path atual
• void closePath() : Marca o atual Path como fechado.
• void moveTo(in float x, in float y) : Cria um novo subPath do ponto fornecido
• void lineTo(in float x, in float y) : Adiciona ao Path atual um novo ponto, conectando-o com o ponto anterior através de uma linha reta.
• void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y) : Adiciona um ponto ao atual Path, conectando-o com o ponto anterior através de uma curva quadratic Bézier com o ponto de controle passada.
• void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y) : Adiciona um ponto ao atual Path, conectando-o com o ponto anterior através de um cubic Bézier com os pontos de controle fornecidos.
• void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius) : Adiciona um ponto ao atual Path, conectando-o com o ponto anterior através de uma linha reta, então adiciona um segundo ponto ao atual Path, conectando-o com o anterior por um arc cujo as propriedades são descritas pelos argumentos passados.Lança um exception INDEX_SIZE_ERR se o radiano é negativo
• void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise) : Adiciona um ponto ao subPath de tal forma que o arc descreve uma circuferência de um circulo descrito pelos argumentos passados, o ponto se inicia com o start angle e finaliza ao end angle, vai na direção dada e é adicionado ao atual Path conectando-o com o ponto anterior em uma linha reta.Lança uma exception INDEX_SIZE_ERR se o radiano é negativo.
• void rect(in float x, in float y, in float w, in float h) : Adiciona um novo subPath fechado ao atual Path, representando um retângulo.
• void fill() : Preenche o subPath com o atual fill style.
• void stroke() : Strokes o subPath com o atual stroke style. (não consegui traduzir a palavra stroke)
• void clip() : Adiciona outras restrições a região de recorte para o caminho dado.
• boolean isPointInPath(in float x, in float y) : Retorna true se o ponto dado está dentro do atual Path.

você não precisa gravar todas elas, ao menos por enquanto, vamos ao mais básico, desenhar uma reta:

	 ctx.beginPath();
	 ctx.moveTo(10, 10);
	 ctx.lineTo(240, 10);
	 ctx.closePath();

	 ctx.stroke();

demonstração deste exemplo

1. a primeira coisa que fazemos é iniciar um novo Path com o método beginPath()
2. movemos a ‘ponta da caneta’ para uma determinada coordenada dentro do canvas com o moveTo()
3. utilizamos o método lineTo() que vai desenha uma linha reta do último ponto declarado, no nosso caso com moveTo() até o x e y nele passado como parâmetro
4. em seguida fechamos o nosso Path atual com o closePath() (ou não, depende da sua finalidade, nesse caso não é necessário mas é uma boa prática fechar o Path)
5. e por último precisamos dar cor a nossa reta, utilizamos o método stroke().

OBS: Os termos utilizados acima são representativos para melhor aprendizado, para saber mais sobre como o Path API funciona leia a especificação do W3C.

Exemplo de um triângulo:

	 ctx.strokeStyle = 'rgb(255, 0, 0)';
	 ctx.fillStyle = 'rgb(0, 200, 255)';

	 ctx.beginPath();
	 ctx.moveTo(10, 125);
	 ctx.lineTo(125, 20);
	 ctx.lineTo(240, 125);
	 ctx.closePath();

	 ctx.stroke();
	 ctx.fill();

demonstração deste exemplo

Linhas Curvas

• void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
• void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);

Temos essas duas funções no Context2D para fazer linhas curvas, a diferença entre elas é o ponto de curva, enquanto no quadraticCurveTo() temos somente 1 ponto base para a curva no bezierCurveTo() temos 2 pontos. O gráfico que melhor demonstra essas funções, segue abaixo, fonte mozilla developer (onde também tem um excelente tutorial, apenas em inglês).

• quadraticCurveTo() : recebe duas coordenadas como parâmetros, a primeira coordenada (cpx, cpy) é demonstrado com o ponto vermelho na imagem ao lado, e a segunda coordenada (x, y) é o ponto final da reta, demonstrado como pontos azuis, onde um ponto azul é o começo do Path declarado com o moveTo() por exemplo, e o outro ponto azul é o final do Path passado pelos parâmetros x e y da função quadraticCurveTo().
• bezierCurveTo() : recebe 3 coordenadas como parâmetro, as coordenadas cp1x, cp1y, cp2x e cp2y são as coordenadas dos dois pontos vermelhos demonstrados na imagem ao lado. A terceira coordenada (x, y) é o fim da reta demonstrado com qualquer um dos pontos azuis da imagem ao lado.

Essas duas funções requerem uma atenção na aprendizagem, porque você só vai aprender a manipular elas praticando, segue exemplo de utilização delas abaixo (com linhas guias em vermelho):

	 ctx.strokeStyle = 'rgb(0, 0, 0)';
	 ctx.fillStyle = 'rgb(225, 225, 255)';

	 ctx.beginPath();
	 ctx.moveTo(10, 145);
	 ctx.quadraticCurveTo(75, 10, 145, 145);
	 ctx.closePath();
	 ctx.stroke();
	 ctx.fill();

demonstração desse exemplo

	 // curve path 1
	 var cp1x = 20;
	 var cp1y = 50;

	 // curve path 2
	 var cp2x = 220;
	 var cp2y = 200;

	 // end path
	 var endx = 125;
	 var endy = 240;

	 ctx.beginPath();
	 ctx.moveTo(125, 10);
	 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endx, endy);
	 ctx.stroke();

demonstração desse exemplo

Arcos e Circulos

para desenha arcos e circulos nós utilizamos o seguinte método:

• arc(x, y, radius, startAngle, endAngle, anticlockwise)

Este método faz parte do conjunto de API Path, temos 6 parâmetros que por si só já são auto descritivos, segue um exemplo de utilização abaixo:

	for (var i = 1; i < 5; i++) {

		var x = i * 50;
		var y = 50;
		var radius = 20;
		var startAngle = 0;
		var endAngle = (Math.PI * i) / 2;
		var anticlockwise = false;

		context.beginPath();
		context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
		context.stroke();
	}

demonstração desse exemplo

Referências / Observações:

além dos links colocados durante o post vou citar mais uma excelente referência que é o site da developper.apple.com onde você encontra em uma unica página todos as funções do context 2D, uma excelente referência de funções.

Se você quiser se aprofundar, mergulhe de cabeça porque isso é só o começo tem muita coisa além disso, além é claro do WebGL, um lugar onde eu recomendo a leitura sobre canvas, WebGL e outros é no mozilla developer.

WebGL é o context 3D baseado no OpenGL ES, e que, vale ressaltar que o Firefox 4 já vem com WebGL Experimental nativo, porém não ativo como default, é preciso ativa-lo (ao menos na versão beta do navegador):

1. Digite ‘about:config‘ na URL do navegador
2. procure por ‘webgl‘
3. de dois cliques em “enabled_for_all_sites” para ativar.

O rascunho da especificação você encontra aqui e uma demonstração do webGL aqui.

exemplo w3c Context2D

Boa Sorte!

Ele e o  <a href=”http://plugins.jquery.com/files/jquery.bestupper.min.js.txt”>Bestupper </a>.

Usando:

Importando jQuery e Bestupper:

<script src="jquery.min.js" type="text/javascript">  </script>
<script src="jquery.bestupper.min.js"  type="text/javascript"> </script>
<

Adicionando a funcao no head da pagina:

<script type="text/javascript">
$(document).ready(function() {
$('.bestupper').bestupper({
ln: 'tr'
});
});
</script>

e adicionar o class=”bestupper”, nos elementos que voce deseja =D

<input type="text" id="txtInput"class="bestupper" / >

A tempos temos aquele PDF do ECMA-262 mas é um PDF gigante, pouco objetivo, apesar de ser excelente, é muito extenso.

Procurando hoje, achei o DEVGuru http://www.devguru.com/technologies/javascript/home.asp, e era justamente isso que eu precisava.

Segue abaixo uma lista compilada das referências:

Main Index

Objects

Eventhandler

Functions

Statements

Constants

• Main Index
• Infinity
• NaN
• undefined
• null

Operators

Bem.. decidi criar um…

Características

• Pesquisa por conteúdo em determinada data
• Pesquisa por conteúdo a partir de uma data
• Pesquisa por conteúdo até uma determinada data
• Pesquisa por conteúdo em um range de data
• Configurações dos Content Type pesquisáveis
• Configuração da quantidade de itens por página no resultado

Todo List

• Este módulo só pode ser utilizado no MySQL, porque utilizei funções específicas de tal banco de dados.
• Fazer o módulo trabalhar com timestamp, para torná-lo independente de banco de dados.
• Adicionar suporte para o usuário escolher o tipo de data, americano ou brasileiro.
• Adicionar máscara aos campos de data.
• Adicionar configuração dos vocabulários pesquisáveis na interface de configuração

Download

searchbydate-6.x-1.0.tar.gz

ScreenShots

No meu caso eu andei precisando estudar sobre PostgreSQL (por sinal um excelente banco de dados) com PHP. Isso foi o mais fácil, agora tenho que estudar o famoso CMS/CMF Drupal, excelente por sinal.

O que isso tem a ver com esse post? Com um ambiente rodando PostgreSQL + PHP + Drupal só faltava uma coisa… o servidor SMTP! É isso mesmo, exemplo: após um usuário ser cadastrado no Drupal é enviado um e-mail de confirmação para ele, mas como isso seria enviado se meu ambiente de teste no windows não tem um servidor MTA sendmail disponível (Linux faz muita falta).

Com algumas pesquisas na internet encontrei a solução ideal! existe um tal de de sendmail criado por Byron Jones (http://www.glob.com.au) que na verdade envia e-mail autenticando em um servidor externo.. simples assim, sem precisar criar um servidor SMTP local (porque eu já havia tentado criar no IIS com windows 7 mas o IIS desse windows não tem MTA)!

A configuração é simples e a instalação é rápida:

1. Faça o download aqui do sendmail.zip
2. Coloque ele em algum lugar, exemplo “C:\sendmail\”
3. Abra o arquivo sendmail.ini e edite-o conforme suas necessidades, nesse exemplo eu configurei para utilizar o smtp do Gmail:

   ; configuration for fake sendmail
   
   ; if this file doesn't exist, sendmail.exe will look for the settings in
   ; the registry, under HKLM\Software\Sendmail
   
   [sendmail]
   
   ; you must change mail.mydomain.com to your smtp server,
   ; or to IIS's "pickup" directory.  (generally C:\Inetpub\mailroot\Pickup)
   ; emails delivered via IIS's pickup directory cause sendmail to
   ; run quicker, but you won't get error messages back to the calling
   ; application.
   
   smtp_server=smtp.gmail.com
   
   ; smtp port (normally 25)
   
   smtp_port=587
   
   ; the default domain for this server will be read from the registry
   ; this will be appended to email addresses when one isn't provided
   ; if you want to override the value in the registry, uncomment and modify
   
   default_domain=domain.com
   
   ; log smtp errors to error.log (defaults to same directory as sendmail.exe)
   ; uncomment to enable logging
   
   error_logfile=error.log
   
   ; create debug log as debug.log (defaults to same directory as sendmail.exe)
   ; uncomment to enable debugging
   
   ;debug_logfile=debug.log
   
   ; if your smtp server requires authentication, modify the following two lines
   
   auth_username=alexsantos.linux@gmail.com
   auth_password=123456
   
   ; if your smtp server uses pop3 before smtp authentication, modify the
   ; following three lines
   
   pop3_server=
   pop3_username=
   pop3_password=
   
   ; to force the sender to always be the following email address, uncomment and
   ; populate with a valid email address.  this will only affect the "MAIL FROM"
   ; command, it won't modify the "From: " header of the message content
   
   force_sender=alexsantos.linux@gmail.com
   
   ; sendmail will use your hostname and your default_domain in the ehlo/helo
   ; smtp greeting.  you can manually set the ehlo/helo name if required
   
   ;hostname=
   

4. Agora edite seu arquivo php.ini e altere a sessão “mail function”, coloque o caminho do binário em sendmail_path, ignore a observação acima da linha dizendo que essa linha é somente para ambiente Unix, segue um exemplo de configuração abaixo:

   [mail function]
   ; For Win32 only.
   ; SMTP=localhost
   ; smtp_port=25
   
   ; For Win32 only.
   ; sendmail_from = me@example.com
   ; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
   sendmail_path = "C:\sendmail\sendmail.exe -t"
   ; Force the addition of the specified parameters to be passed as extra parameters
   ; to the sendmail binary. These parameters will always replace the value of
   ; the 5th parameter to mail(), even in safe mode.
   ; mail.force_extra_parameters =
   

5. Reinicie seu servidor apache e pronto!

Abraços…….

Hoje precisei fazer um DatePicker funcionar dentro de um Dialog do JQuery UI.

O problema é que quando você faz isso.. o DatePicker fica atrás da janela de diálogo e a documentação do JQuery não comenta nada sobre isso (pelo menos eu não achei).

Esse problema é facilmente resolvido adicionando o seguinte código no seu CSS:

#ui-datepicker-div
{
    z-index: 1003;
}

Pronto! Boa Sorte!

——————————————————————–

Edit:

aproveitando o mesmo post para dar mais uma dica sobre o DatePicker, vamos deixar ele em português brasil:

    // CONFIGURAÇÃO DO DATEPICKER DO JQUERYUI PARA PT-BR
    $.datepicker.setDefaults({dateFormat: 'dd/mm/yy',
                              dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
                              dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
                              dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
                              monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro', 'Outubro','Novembro','Dezembro'],
                              monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set', 'Out','Nov','Dez'],
                              nextText: 'Próximo',
                              prevText: 'Anterior'
                             });

O que é JSON?

JSON ou JavaScript Object Notation é um formato de texto para serialização de estrutura de dados. Ela é derivada de objetos literais do Javascript, como definido  no ECMAScript Programming Language Standard, Third Edition [ECMA].

JSON pode representar quatro tipos primitivos (strings, números, valores booleans e valores nulos) e dois tipos estruturados (objetos e arrays).

- Bem isso é o que diz a especificação “RCF 4627 application/json”

Um exemplo de JSON é:

{"id_categoria":"2","tipo":"PRODUTOS","titulo":"COLECOES","descricao":"MACIO TESTE"}

Se você ainda não está familiarizado com a estrutura do JSON recomendo fortemente a dar uma passada no site oficial

Bem.. vamos esclarecer algumas coisas.

• Quando utilizar JSON?
  Digamos que você tenha um código Ajax que faz uma requisição com parâmetros via POST ou GET para uma página externa, e essa página externa retorna dados dos quais você tem que tratar. Esse é um bom lugar para os dados serem retornados com JSON
• O cabeçalho da resposta da página externa precisa retonar o MIME do tipo “Content-type: application/json”  (não é obrigatório mas é bom seguir a regulamentação)
• O JSON é suportado por diversas linguagens, como PHP, C#, C, Lua, JavaScript é claro e diversas outras.
• JSON utiliza UTF-8 (somente e pronto. Nada de iso-8859 e etc. assim como no ajax)

Qual o objetivo desse post?

O meu objetivo aqui é mostrar como você pode recuperar dados JSON de uma fonte externa e usa-los no seu script com JQuery.

Normalmente, você tem uma linguagem dinâmica que busca dados no banco de dados ou seja lá o que for e retorna os dados em JSON.

Você com seu lindo script Ajax quer retornar esses dados e mostrar para o usuário sem precisar recarregar a página.

Para isso vamos supor que uma página PHP retorne o seguinte JSON.

{"id_categoria":"2","tipo":"PRODUTOS","titulo":"COLECOES","descricao":"MACIO TESTE"}

Aqui temos, um objeto JSON com 4 membros:

• Membro “id_categoria” com o valor “2″
• Membro “tipo” com o valor “PRODUTOS”
• Membro “titulo” com o valor “COLECOES”
• Membro “descricao” com valor “MACIO TESTE”

Não vou retratar aqui como o PHP ou o C# retorna dados JSON, mas dê uma olhada em “LINKS” no final da página, para mais informações.

Agora vamos usar o método $.getJSON() do JQuery para manipular os dados, a sintax é:

jQuery.getJSON( url, [data], [callback] )

• URL -> A url que vai ser requisitada (obrigatório)
• [data] -> dados a serem enviados via POST (opcional)
• [callback] -> Função que vai ser executada quando os dados forem carregados com sucesso (opcional)

Supondo que temos 3 INPUT do tipo TEXT e queremos colocar esses dados dentro deles, as IDs desses INPUT são respectivamente:

1. id_categoriaUdt
2. tipoUdt
3. tituloUdt
4. descricaoUdt

A página a ser requisitada se chama categoria.php:

$.getJSON("../actions/admin/categoria.php", function(json){
            $('#tipoUdt').val(json.tipo);
            $('#tituloUdt').val(json.titulo);
            $('#descricaoUdt').val(json.descricao);
            } // fim do callback
); // fim do .getJSON()

Simples assim.

pronto, você pode manipular o resultado de retorno, nesse caso “json” como um objeto javascript.

val() é também um método JQuery, utilizado nesse caso para atribuir um valor ao INPUT do nosso FORM HTML

Este foi um exemplo muito simples, apenas uma introdução a como manipular objetos JSON com JavaScript (JQuery).

Boa Sorte!

- Links

• Página Oficial do JSON -> json.org
• Documentação do $.getJSON() -> docs.jquery.com
• Usando JSONRequest -> json.org
• Função eval() do JavaScript -> w3schools.com
• Usando JSON com PHP -> php.net
• Usando JSON com C# -> msdn.microsoft.com
  Ou procure no Object Browser do Visual Studio

Minha supresa foi que o StarUML dá suporte a gerar código de classes através de uma Template.

1. Faça o download da Template aqui: PHP_5_Code_Generator.zip
2. Agora descompate o arquivo no diretório: “C:\Program Files\StarUML\modules\staruml-generator\templates”

Apenas isso, para gerar o código de uma classe UML vá em:

• “Tools” > “StarUML Generator“

Surgirá a janela do “StarUML Generator” escolha a Template do PHP, escolha o lugar que será criado as classes e finalize.

Boa Sorte.

Até que eu descobri que existe extensões para o Dreamweaver do JQuery UI!!!

De cara fiz o download:

É rápido, produtivo e funcional!

Para fazer o download (grátis) acesse http://www.adobe.com/cfusion/exchange/ e faça uma busca por JQuery.

Após instalados com o Adobe Extension Manager você terá eles disponíveis na sua paleta do Dreamweaver.

Basta clicar no item que ele será colocado dentro do documento atual.

Você também pode customizar seu widget mechendo nos arquivos CSS ou na estrutura do código.

Todo widget do JQuery UI tem no local das propriedades um link para a documentação, que é muito bem explicada tornando extremamente fácil e produtivo modificar as propriedades dos objetos via código.

Na maioria das vezes você só altera as propriedades do objeto em uma única linha e pronto.

VEJA EXEMPLO

Links:

• http://www.adobe.com/cfusion/exchange/
• http://jqueryui.com/

Reflexão

Ultimamente venho com algumas dúvidas sobre meu trabalho… sempre programei em PHP, agora comecei a utilizar também C#, mas pra Web ainda não confio muito na plataforma da Microsoft e continuo utilizando em muitos projetos o PHP.

A dúvida é: Continuo com PHP ou vou para Ruby on Rails?

Apesar de ser tudo mais simples em Ruby on Rails, quem já programa em PHP mudar de linguagem (Ruby) e  aprender um framework (Rails) do zero via ter muito trabalho pela frente… ter que estudar toda uma nova sintaxe, uma nova maneira de programar e aprender um framework novo, e ainda cho que Ruby on Rails pode ser apenas uma onda.

Então decidi continuar no PHP, que é extremamente poderoso, e aceito no mercado. Porém quero começar a usar algum framework para aprimorar meus conhecimentos e aumentar minha produtividade.

Sem saber por onde começar, usei o Pai! (Google) e achei um excelente site que fala dos mais atuais frameworks para php

http://www.phpframeworks.com/

Excelente! E no rank dos 10 Frameworks mais “quentes” estava o CodeIgniter, comecei até a estudar ele, achei uma maravilha! Mas o projeto ainda não está muito maduro, partindo para o segundo lugar vi um do qual sempre ouvi falar, Zend Framework!

É… a primeira vista não muito com a cara dele não, achei tudo muito confuso (ainda mas pra quem é novo nesse mundo de frameworks) mas acabei, por diversos motivos, adotando ele. Não irei falar todos, mas o que mais me empurrou foi o fato dele ser completíssimo e ter uma empresa de nome por trás.

A curva de aprendizado é grande, até você se acostumar com novos conceitos e ver que aquilo tudo é poderoso você bate um pouco a cabeça.

Eu não conseguia entender que eu poderia ser produtivo usando MVC onde eu tinha que estudar milhões de coisas enquanto poderia simplesmente fazer minha velha organização de pastas e arquivos por classe, criando minhas próprias classes de abstração.

Mas pra que cria isso tudo sempre se já existe algo feito pra você? Essa é uma boa pergunta (e o markting dos frameworks)… e a resposta pode simplesmente ser: Porque ter que estudar classes criadas pelos outros enquanto você pode criar as suas ser minimalista e ter o resultado semelhante?

Porém… uma coisa é certa, o framework te da Poder e depois de um tempo bastante produtividade!

Você estuda um monte de coisas (é gostoso estudar coisas novas), das quais você nunca iria imaginar que já existiriam prontas e que além disso tudo, aquilo realmente serve pra você! Você começa a perceber que é mais fácil e rápido, ler a documentação do Zend_Feed do que criar uma classe para cuidar de RSS no seu site.

Mas como aprender a usar Zend Framework?

No começo foi chato… a comunidade brasileira ainda é relativamente pequena, e não temos nenhuma documentação em português, e quando você encontra algo relativo na internet é sobre uma versão do Zend totalmente obsoleta.

Por onde Começar?

• Quick Start -> http://framework.zend.com/docs/quickstart
  É um tutorial bastante explicativo e objetivo sobre o framework, mas deixa muitas dúvidas e embola um pouco a cabeça. Como uma coisa que chamam de simples parece ser tão complexo?
• O segundo passo é uma dica minha: Comece a ler o “Guia de Referência do Programador”…
  Documentação Oficial (Em inglês): http://framework.zend.com/manual/en/
  Documentação pt-BR: http://diariodecodigos.info/zendptbr/
• Agora para aonde vamos?
  Eu particularmente estou estudando os componentes principais sobre o MVC e o que gerencia o Aplicativo, acho que é interessante dominar esses componentes, o restante são apenas componentes que você vai utilizar para agilizar seu trabalho a realizar determinadas tarefas:
• Componentes Principais:
  • 1. Introdução Zend Framework
  • 4. Zend_Application
  • 9. Zend_Config
  • 12. Zend_Controller
  • 19. Zend_Exception
  • 25. Zend_Http
  • 28. Zend_Layout
  • 47. Zend_Server
  • 55. Zend_Tool_Framework
  • 56. Zend_Tool_Project
  • 58. Zend_Uri
  • 60. Zend_Version
  • 61. Zend_View

  Acho que conhecendo eles você já consegue manipular todo o projeto e o ambiente MVC do seu aplicativo de maneira bastante satisfatória.

• Componentes Interessantes:

  • 2. Zend_ACL
  • 5. Zend_Auth
  • 6. Zend_Cache
  • 7. Zend_Captcha
  • 13. Zend_Currency
  • 14. Zend_Date
  • 15. Zend_Db
  • 16. Zend_Debug
  • 19. Zend_Exception
  • 20. Zend_Feed
  • 21. Zend_File
  • 23. Zend_Form
  • 31. Zend_Locale
  • 32. Zend_Log
  • 33. Zend_Mail
  • 37. Zend_Navigation
  • 38. Zend_OpenID
  • 40. Zend_OpenID
  • 42. Zend_Queue
  • 45. Zend_Rest
  • 46. Zend_Search_Lucene
  • 48. Zend_Service
    • 48.2 Zend_Service_Akismet
    • 48.3 Zend_Service_Amazon
    • 48.4 Zend_Service_Amazon_Ec2
    • 48.17 Zend_Audioscrobbler
    • 48.3 Zend_Service_Amazon
    • 48.18 Zend_Service_Delicious
    • 48.19 Zend_Service_Flickr
    • 48.28 Zend_Service_Twitter
    • 48.29 Zend_Service_Yahoo
  • 49. Zend_Session
  • 50. Zend_Soap
  • 51. Zend_Tag
  • 52. Zend_Test
  • 53. Zend_Text
  • 54. Zend_TimeSync
  • 57. Zend_Translate
  • 59. Zend_Validate
  • 65. ZendX_JQuery
• Última Dica
  Faça o download da documentação do API (http://framework.zend.com/docs/api)vai ser bastante útil.
  Também temos exemplos na Documentação (http://framework.zend.com/manual/en/) vá em direção ao rodapé da pagina e clique em “List of Exemples”.

Áh… também existe um detalhe muito importante! Caso você não queira usar o Framework por inteiro, pode utilizar somente o recurso que desejado, porque todos esses componentes não passam de bibliotecas, basta copiar as classes para seu projeto, ler a documentação e ser feliz!

Bons Estudos.