Jonas Martinez – Web Developer

Já faz um bom tempo tenho trabalhado com o Zend Framework para aplicações PHP e o jQuery para JavaScript, esses dois frameworks simplismente permitiram que eu tenha uma produtividade muito maior e também noto em fóruns muitas pessoas novatas começando com programação e não fazem a mínima idéia de Design Patterns, Framework, UML etc etc…

Hoje vou explicar o que é um Framework, vamos lá!

Imagine que você tem um projeto de um blog, bom naturalmente você precisa de conexão com banco de dados, inserções, alterações, remoções e listagens….

Basicamente você pode pensar “Crio uma classe de conexão com o banco de dados, outra classe com os elemntos como posts, comentários e ta tudo certo!”

Até ai, tudo bem, um simples blog resolve dessa forma mesmo, mas agora imagine que você precisa fazer um sistema de imobiliária, você poderia utilizar a classe de conexão com o banco certo? Pois bem, agora imagine uma infinidade de recursos que você precisa ter, como feeds, categorias, formulários e pra ajudar, vários desenvolvedores, como faria?

Você pode pensar, “Opa! Só fazer uma bibliotera com vários recursos e usá-los!” mas e se eu te disser, esse projeto tem que ser extensivel e flexivel, você realmente saberá fazer?

Para resolver esse tipo de problema, existem os Design Patterns, que são Padrões de Projeto, usados para resolver problemas comuns em todos os projetos. São práticas eficientes e testadas ao longo de anos, que com o tempo acabam se fundindo criando outros nomes e outras técnicas, cada uma tem sua vantagem e vale lembrar que um bom projeto tem vários padrões trabalhando juntos para proporcionar uma arquitetura extremamente dinâmica, extensivel, flexivel e de fácil manutenção.

Mas e os Frameworks?
Bom, um framework nada mais é do que uma arquitetura “padrão” que fornece várias ferramentas comuns a todo tipo de projeto, utilizam os mais variados tipos de padrões de projeto para proporcionar um ambiente de desenvolvimento extremamente produtivo.

Muitos confundem Framework com Biblioteca de Classes, não é assim!

Bibliotecas são apenas bibliotecas, fornecem vários recursos independentes que as vezes fica dificil interagirem entre si, já um Framework, além de fornecer vários recursos como biblioteca, proporciona todo um ambiente padronizado, que, uma vez seguido de acordo fica sendo extremamente produtivo com o re-uso de muitos trechos de código, evitando torrar a cabeça a cada projeto.

A maioria dos Frameworks trabalham com um padrão principal, o MVC (Model View Controller) que tem como base trabalhar com Modelo Lógico – Visualização – Controle, ou seja, separa claramente o Design do Conteúdo e Lógica.

Sendo assim, você terá um ambiente para fazer a visualização do projeto, outro para a lógica do projeto e outra para o controle do projeto, onde o Controle junta a Lógica e a Visualização.

Além do padrão principal, também aplica os mais variados padrões para casos especificos, um exemplo clássico é o Banco de Dados, geralmente utilizado no padrão Singleton.

As vantagens de se usar um Framework são:

• Padronização de processos
• Uso constante das boas práticas de desenvolvimento
• Enorme gama de recursos disponiveis
• Re-uso de código
• Flexibilidade e Extensibilidade dos projetos
• Fácil manutenção
• Produtividade

Porém para se chegar a um nível satisfatório do bom uso de um Framework precisamos:

• Conhecer a fundo a linguagem que utilizamos
• Dominar Orientação a Objeto (uma vez que OO é uma técnica de programação muito eficiênte e em evidência a anos)
• Conhecer os padrões de projetos
• Usar boas práticas de desenvolvimento (comentar, encapsular, fechado para alteração mas aberto para extensão etc)
• Estudar o Framework e entender sua essência.

Estes tópicos eu elaborei baseado na experiência que tenho, caso discorde faça seu comentário que será bem vindo!
Quando digo conhecer a linguagem a fundo, é que não adianta querer usurfruir do Framework sem saber realmente o que ele fornece, conhecendo a linguagem a fundo você saberá quando usar as ferramentas do Framework, evitando uma dúvida do tipo “essa função é do framework ou da linguagem?” ou “posso fazer isso nativamente ou reinvento a roda?”.

Já dominar orientação a objeto, creio ser necessário para criar projetos concisos e flexiveis, aproveitando o re-uso e a fácil manutenção além da extensão.

Ao conhecermos os padrões de projetos abrimos nossa mente para soluções “mágicas”, ou seja, treinamos nossa cabeça para pensar corretamente nas mais variadas situações.
Utilizando as boas práticas, permitimos que nosso código seja de fácil compreensão por outros desenvolvedores e também para nós mesmos, afinal, é dificil lembrar exatamente milhares de linhas de código… E finalmente, estudando o Framework, sabemos o que ele realmente faz e não faz, facilitando o entrosamento de nosso conhecimento de padrões de projetos e OO, tornando um projeto maravilhoso.

Querem um bom exemplo de Framework e Projeto Maravilhoso? Bom no mundo PHP, linguagem para web muito utilizada, temos o Zend Framework como ótimo exemplo e o Magento, projeto e-commerce com uma arquitetura excepcional, feita com Zend Framework.

Para mais informações acesse:

• Padrões de Projeto – http://pt.wikipedia.org/wiki/Padr%C3%B5es_de_projeto_de_software
• Framework – http://pt.wikipedia.org/wiki/Framework
• Zend Framework – http://framework.zend.com
• Magento E-commerce – http://www.magentocommerce.com

Bom to caindo de sono, por enquanto é isso! qualquer dúvida deixe seu comentário! abraços!

Algumas pessoas me pediram para explicar como funciona o Ajax com o jQuery, então vou explicar!

Para quem não sabe, Ajax nada mais é do que uma técnica que utiliza um componente do browser para requisições dinâmicas.

Com a popularização, para muitos, Ajax é uma linguagem, o que de fato não é verdade.

Ajax tem esse nome pois significa Asynchronous Javascript And XML.

Bom  vamos ao que interessa!

Existem 2 (na verdade vários) métodos de se fazer uma requisição em Ajax pelo jQuery, por GET e POST.

A mais comum é GET pois é mais simples e prático, muito comum para poucos parâmetros.

Vou explicar como utilizar Ajax com jQuery com as funções $.get, $.post e $.load

Vamos supor que você deseja carregar uma página html em um div quando o usuário clicar em um botão, como ficaria?

Vejamos:

1
2
3
4
5
6
7

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.get('pagina.html', function(data) { //chamada em Ajax para o método GET
            $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv
        });
    });
});

Desta forma, carregando o conteúdo de pagina.html no div #idDoDiv.

Vamos melhorar esse código adicionando variáveis a ele, tornando dinâmico nosso carregamento, para isso passamos um objeto JavaScript no segundo parâmetro. Para quem não conhece, um objeto “anônimo” no JavaScript é bem simples, basta usar { variavel: ‘valor’ }, para mais de um { varivel1: ‘valor1′, variavel2: ‘valor2′ }

1
2
3
4
5
6
7

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.get('pagina.html', { nome:'Jonas', sobrenome:'Martinez' }, function(data) { //chamada em Ajax para o método GET
            $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv
        });
    });
});

Desta forma, ficará assim ‘pagina.html?nome=Jonas&sobrenome=Martinez’

Bem simples não?
Uma das vantagens do jQuery é que você pode carregar não só conteúdo HTML, mas tbm conteudo JSON, XML e até mesmo JavaScript!
Isso cria uma gama de possibilidades enormes, vamos imaginar que queremos utilizar um request JSON.

1
2
3
4
5
6
7

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.get('pagina.html', { nome:'Jonas', sobrenome:'Martinez' }, function(data) { //chamada em Ajax para o método GET
            $('#idDoDiv').html(data.variavel); //insere o valor da variavel 'variavel' de data no div #idDoDiv
        }, 'json');
    });
});

Também podemos usar funções dedicadas para esses request, que seriam $.getScript e $.getJSON.

Vamos ao método POST?
Muito simples também, o que muda é o nome da função e que o post retorna um status sobre a requisição. Utilizado muito quando precisamos enviar muitos dados como formulários por exemplo. No caso do POST a função de callback recebe 2 parâmetros, um é o dado em si e o outro é o status do request.

Vejamos:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $.post('pagina.php', { nome:'Jonas', sobrenome:'Martinez' }, function(data, textStatus) { //chamada em Ajax para o método POST
            if (textStatus == 'success') { //verifica se o status está tudo ok!
               $('#idDoDiv').html(data); //insere o valor de data no div #idDoDiv
            } else {
                alert('Erro no request!'); //mostra erro caso não tenha sido bem sucedido
            }
        });
    });
});

Também podemos usar modos especificos de carregamento além do padrão HTML, assim como no GET podemos colocar como ultimo parâmetro da função os valores, json, jsonp, xml, html, text e script, porém não temos funções especificas para isso como $.getJSON().

Existe ainda a função “load” que facilita mais ainda! Confira!

1
2
3
4
5

$(document).ready(function (){ //diz ao jQuery executar as instruções quando carregar a página
    $('#idBotao').click(function(){ //configura o evento 'click' do #idBotao
        $('#idDoDiv').load("pagina.html"); //chamada em Ajax
    });
});

Simples!

Segue em anexo um exemplo do ajax em GET. Qualquer dúvida deixe seu comentário!

Anexo: jquery_ajax.zip

Atenção: dúvida não é “faça pra mim”

Buenas! Estive um pouco ocupado e não atualizo a muito tempo… bom voltei e hoje vou mostrar como iniciar com o jquery, você já sabe para o que serve e agora vai aprender como usar… uma mão na roda!

O principio básico como já dito, esta no ‘$’, que seria como ‘document.getElementById’ porém claro com muitas vantagens.

Um dos pontos primordiais do jQuery é você “bindar” ou seja, setar ações nos objetos da página no momento que ela carrega.

Consideramos que já baixamos o jQuery, colocamos na pasta ‘js’, renomeamos para jquery.js e já temos a tag de inclusão do jquery na página que seria:

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

Vamos imaginar que queremos disparar um alert quando passamos o mouse por cima de uma imagem, para isso fariamos:

<script type="text/javascript">
$('#idDaImagem').mouseover(function(){
    alert('Passou o mouse pela imagem!');
});
</script>

Como você pode ver, é muito simples! Porém o ideal é utilizar todos os “binds” (associação de funções a objetos/eventos) logo depois do carregamento da página, isso evita de setar o comando antes do objeto existir no contexto DOM do browser, ou seja, antes do objeto ter sido criado.

Para isso, é muito comum vermos os dois comandos abaixo, que indicam ao jQuery o que fazer quando a página já foi carregada:

$(document).ready(function() {
    //funções, comandos etc
});

e

$().ready(function() {
    //funções, comandos etc
});

Particularmente prefiro o primeiro modo, com o document pois indica o objeto a ser tratado.

Como você já reparou, o jQuery trabalha muito com uma técnica chamada de “closures” ou ainda “funções anonimas” que são funções sem nome usadas principalmente para callbacks, que são funções de retorno, que aplicados ao conceito acima, fica assim (em português ;p)

Quando ‘document’ estiver pronto, execute o callback

No nosso caso o callback é:

function() {
    //funções, comandos etc
}

Ou seja, muitos dos parametros do jQuery são closures.
Um exemplo mais didático, vamos mostrar um alerta de “Página carregada” quando a página carregar, ficaria:

$(document).ready(function() {
    alert('Página carregada!');
});

Bom por enquanto é só! Confira os inúmeros comandos na página oficial do jQuery em http://docs.jquery.com/Main_Page

Qualquer dúvida mande seu comentário!

Atenção: dúvida não é “faça pra mim”