Web Design Curitiba | Web Designer | Websites | Sistemas Web | Portfólio - Portfólio | Designer | XHTML | CSS | Tableless | Web Standards

Introdução

Hoje falarei um pouco mais sobre o jQuery tecnologia emergente que facilita a utilização de Ajax em páginas Web.

jQuery é um framework para ajudar os desenvolvedores a se concentrarem na lógica dos sistemas da web e não nos problemas de incompatibilidade dos navegadores atuais.

Seu lema é escrever menos e fazer mais.

Ele possui plugins adicionais que vão desde efeitos visuais na página da web até controle de dados via ajax.

Uma função escrita em Javascript puro tem uma diminuição nótavel quando reescrita com este framework.

Principais funcionalidades

• Resolução da incompatibilidade entre os navegadores.
• Redução de código.
• Reusabilidade do código através de plug-ins.
• Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores.
• Trabalha com AJAX e DOM.
• Implementação segura de recursos do CSS1, CSS2 e CSS3.

Sua aplicação eficiente consiste em separar as funções do javascript da marcação XHMTL através um arquivo externo aplicando as funções no id, classe ou tag do elemento desejado.

Abaixo listarei alguns exemplos de sua utilização:

Exemplo 1:

Aplicação incorreta:

<a onclick="funcao()" href="#">Enviar</a>

Observe que a função javascript foi inserida no evento “onclick” diretamente no XHTML, esta prática não é recomendada pois mistura funções com a marcação XHTML dificultando assim futuras manutenções e atualizações.

Aplicação correta:

XHTML:

<a href="pagina.html" class="enviar">Enviar</a>

Arquivo JavaScript externo:

$('a.enviar').click(function(){
	alert('Voce clicou no link a com a classe "enviar"');
});

Exemplo 2:

Aplicação incorreta:

<script language="javascript">
var data = new Date();
if(data.getHours() < 12)
	document.write('Bom dia !');
else
	document.write('Boa Tarde!');
</script>

Aplicação correta:

XHTML:

<p title="Mensagem">Bom dia!</p>

Arquivo JavaScript externo:

var data = new Date();
if(data.getHours() >= 12)
{
	var saudacao = $('p[title="Mensagem"]');
	saudacao.text('Bom dia!');
}
else
{
	saudacao.text('Boa Tarde!');
}

Exemplo 3:

Marcação terrível:

<table>
    <tr>
        <td onclick="funcao();">Primeira Opção</td>
        <td>Descrição da primeira opção.</td>
    </tr>
    <tr>
        <td onclick="funcao();">Segunda Opção</td>
        <td>Descrição da segunda opção.</td>
    </tr>
</table>

Marcação incorreta:

<dl>
    <dt onclick="funcao();">Primeira Opção</dt>
    <dd>Descrição da primeira opção.</dd>
    <dt onclick="funcao();">Segunda Opção</dt>
    <dd>Descrição da segunda opção.</dd>
</dl>

Marcação correta:

<dl id="lista">
    <dt>Primeira Opção</dt>
    <dd>Descrição da primeira opção.</dd>
    <dt>Segunda Opção</dt>
    <dd>Descrição da segunda opção.</dd>
</dl>

Arquivo JavaScript externo:

$(document).ready(function()
{
	$('dt[title^="P"]').click(function() {
		alert('Clicou no Primeiro item!');
	}
	$('dt[title^="S"]').click(function() {
		alert('Clicou no Segundo item!');
	}
});

Conclusão:

Com jQuery as possibilidades de um Designer conseguir um bom resultado sem programar muito são bem maiores.

Abaixo listo alguns sites e tutoriais onde você poderá encontrar maiores informações:

Sobre jQuery:

• jQuery Web Site: How jQuery Works
• Tutoriais sobre jQuery do site oficial.
• 51 Tutoriais e Exemplos de jQuery
• Easy As Pie: Unobtrusive JavaScript
• Seven Rules of Unobtrusive JavaScript
• Learning jQuery
• Visual jQuery
• Tutoriais de jQuery para Designers
• jQuery for Designers: learn how easy it is to apply web interaction using jQuery.
• 15 dias de jQuery
• 15 Resources To Get You Started With jQuery From Scratch
• The Seven Rules Of Pragmatic Progressive Enhancement
• The Behaviour Layer Slides Great slide notes giving a quick rundown on unobtrusive Javascripting.
• Unobtrusive JavaScript with jQuery

Leitura recomendada: Marcação Semântica

• Definição de Semântica Wikipedia
• Quem se preocupa com a Marcação Semântica?
• Web Standards, não necessariamente tem a ver com marcação correta!
• Especificação dos Seletores em CSS3

Obrigado, até a próxima