rodrigoaguas.com » Web

Tutorial básico de JQuery

Rodrigo Aguas — Sat, 01 May 2010 12:30:18 +0000

O JQuery é uma biblioteca Javascript que simplifica extremamente a utilização de ajax, animações, tratamento de eventos e manipulação de elementos html em sites. A forma como se utiliza JQuery é um pouco diferente do que estamos acostumados no Javascript, mas essa mudança trouxe uma simplicidade incrível e compensa qualquer esforço necessário em seu aprendizado.

Uma instrução JQuery é composta por um seletor e um conjunto de operações a serem executadas nos elementos encontrados baseando-se no seletor. O seletor segue uma sintaxe muito parecida com a do CSS, acrescentando a esta alguns recursos. As operações disponíveis são tão variadas que é difícil conhecer todas, alguns exemplos são: acrescentar classe, alterar valor de atributo, replicar elemento, esvaziar conteúdo de um elemento, remover elementos da página, aplicar animações (como fade in e fade out), fazer requisições ajax, etc, etc, etc… Uma lista completa da API pode ser encontrada na documentação do JQuery. O trecho de código abaixo não é funcional, tem como objetivo apenas ilustrar as explicações dadas.

1	$( SELETOR ).operacao();

A palavra SELETOR está representando uma expressão utilizada para encontrar o conjunto de elementos da página que receberão a operação em questão. Ainda ilustrativamente, é comum o uso abaixo, quando são utilizadas diversas operações em um mesmo conjunto de elementos selecionados.

1	$( SELETOR ).operacao1().operacao2().operacao3();

Antes de colocar as mão na massa é necessário importar o arquivo do JQuery colocando o seguinte código no elemento head da sua página:

1	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Nosso primeiro exemplo não é muito interessante, mas explicará uma prática necessária na maioria dos códigos JQuery, e, como não poderia deixar de ser, será o famoso “Hello World”.

1
2
3

$(document).ready( function() {
window.alert("Ola Mundo!");
});

Você deve estar se perguntando que raios de Hello World complicado é esse e lhe dou razão, mas logo logo ficará mais claro. O que anteriormente chamei de seletor é sempre passado como parametro da função $, nesse caso estamos passando ‘document’, ou seja o elemento selecionado é o documento html. A operação utilizada é a ‘ready’, que serve para definir uma função a ser executada quando o documento está pronto (acabou de ser carregado, processado e exibido pelo navegador). Então, passamos como parametro da operação ‘ready’ uma função que exibirá uma janela alert. Os códigos JQuery a serem executados quando a página for carregada devem estar sempre dentro dessa função no código anterior, ou seja:

1
2
3

$(document).ready( function() {
// Código a ser executado na carga da página aqui!
});

Agora estamos prontos para exemplos mais interessantes! No próximo exemplo colocaremos uma tabela com as cores de fundo das linhas alternadas, nos basearemos no seguinte trecho de código html:

1
2
3
4
5
6
7

<table id="listrada">
<tr><td>Nome:</td><td>Joãozinho</td><\tr>
<tr><td>Idade:</td><td>10</td><\tr>
<tr><td>Sexo:</td><td>Masculino</td><\tr>
<tr><td>Pai:</td><td>Desconhecido</td><\tr>
<tr><td>Mae:</td><td>Maria</td><\tr>
</table>

A lógica que utilizaremos é selecionar primeiro os filhos do elemento identificado por ‘listrada’ que estejam nas posições pares e definir uma cor de fundo azul para eles:

1	$("#listrada>*:even").css("background-color", "#0000FF");

Em seguida selecionamos os filhos do elemento identificado por ‘listrada’ que estejam nas posições impares e definimos uma cor de fundo verde para os mesmos:

1	$("#listrada>*:odd").css("background-color", "#00FF00");

Como não podemos esquecer do nosso primeiro exemplo, a versão final do código para a tabela listrada fica assim:

1
2
3
4

$(document).ready( function() {
$("#listrada>*:even").css("background-color", "#0000FF");
$("#listrada>*:odd").css("background-color", "#00FF00");
});

Se preferirmos não colocar estilo diretamente no Javascript, podemos definir estilos no css para as linhas usando classes e alterar o nosso código da seguinte maneira:

1
2
3
4

$(document).ready( function() {
$("#listrada>*:even").addClass("linhaAzul");
$("#listrada>*:odd").addClass("linhaVerde");
});

O próximo exemplo aprofunda as explicações sobre manipulação de eventos dos elementos. Colocaremos em todos os links de uma página qualquer uma janela alert sendo exibida ao usuário quando o mesmo clica sobre o link.

1
2
3
4
5

$(document).ready( function() {
$("a").click( function() {
window.alert("Atenção: você está saindo do site rodrigoaguas.com.");
});
});

O seletor desse exemplo é bem simples, pesquisa por qualquer elemento A do documento html. Então, adiciona aos eventos onclick de todos os elementos selecionados uma chamada para a função que exibe a janela alert. Agora vamos melhorar o nosso código para impedir que a ação padrão do evento seja executada, para isso acrescentaremos um parametro à nossa função para receber um objeto que representa o evento.

1
2
3
4
5
6

$(document).ready( function() {
$("a").click( function(evento) {
window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
evento.preventDefault();
});
});

Depois de ser impedido de sair do site, queremos que o nosso usuário fique impedido de clicar novamente no link, para isso faremos uma animação de Fade Out no link clicado e ele deixará de ser exibido. Precisaremos utilizar o seletor ‘this’ que representa o elemento onde o evento foi disparado.

1
2
3
4
5
6
7

$(document).ready( function() {
$("a").click( function(evento) {
window.alert("Atenção: você está tentando sair do site rodrigoaguas.com, mas não vai conseguir.");
$(this).fadeOut();
evento.preventDefault();
});
});

Nesse tutorial foram tratados os aspectos básicos do JQuery como importação do arquivo da biblioteca, seletores, alteração de estilo, acrescentar classes, manipulação de eventos e animações. Tratarei de Ajax posteriormente em outro tutorial. Abraços!

Explorar nichos na web? Será?

Rodrigo Aguas — Thu, 15 May 2008 02:47:50 +0000

O Google tempos atrás vem inserindo (lentamente) uma nova versão do Gmail, aos poucos os usuários foram recebendo o acesso à ela. Uma das justificativas desse método é que caso algum problema seja encontrado, não terá atingido todos os usuários do serviço, não queimando a imagem da empresa e nem nos prejudicando. Muito interessante.

Mas eu não sei se o Google ainda não percebeu ou está ignorando que essa nova versão do Gmail TRAVA o Firefox a todo momento. Seria isso uma falha da Mozilla no desenvolvimento do Firefox? A culpa já foi até posta no Firebug (o próprio Gmail lhe avisa), mas mesmo com o Firebug desabilitado o problema continua.

Mas calma! Basta clicar em “Versão Mais Antiga” e utilizaremos o velho e bom Gmail! Mas não se empolgue, essa configuração não fica salva no computador, então toda vez que formos ler emails teremos que clicar no “Versão Mais Antiga”. Provavelmente, o Google não deixará tal versão disponível por muito tempo aos usuários, só espero que até lá resolvam o problema do Firefox.

Além disso, os usuários do ainda popular Internet Explorer 6 estão também excluídos da utilização dessa recente atualização. Será que os computadores deles não aguentariam o processamento necessário? É.. acho que o meu também não deve estar aguentando…

Sendo o Google a empresa símbolo da “Web 2.0″, estaria ela dando um passo atrás e focando nas grandes massas? A minoria que fique com o Gmail 1.0 mesmo!

Presente da Nielsen Norman Group: guia de acessibilidade

Rodrigo Aguas — Wed, 09 Jan 2008 01:32:50 +0000

A Nielsen Norman Group está disponibilizando gratuitamente um relatório sobre acessibilidade na Web denominado “Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities”. O download do mesmo está disponível por tempo indeterminado como presente de final de ano. Nele existe um guia de boas práticas abordando muitos aspectos interessantes da acessibilidade, além de falar das tecnologias assistivas, leitores de telas e etc. Aproveitem enquanto é free!

As melhores extensões do Firefox para desenvolvedores Web

Rodrigo Aguas — Sat, 01 Dec 2007 21:30:21 +0000

Nesse artigo indicarei as melhores extensões (ao meu ver) do Firefox para ajudar o trabalho dos desenvolvedores de sites.

Acho muito boa essa abertura que a Mozilla dá aos usuários para desenvolverem novas funcionalidades para o Firefox. O navegador sai ganhando com a conquista de mais usuários e a fidelização dos usuários de certos nichos que as extensões propiciam funcionalidades não aplicáveis a um browser feito para atender o grande público.

Na página de extensões da Mozilla existe uma quantidade enorme de extensões e exatamente por isso resolvi fazer essa seleção das melhores. Então, vamos lá…

A lista abaixo está em ordem alfabética, não há relação alguma com minhas preferências.

ColorZilla

Adiciona uma ferramenta “conta-gotas” na barra de status do Firefox, com ela você descobre o código da cor no ponto em que você apontar o mouse no site.

CSSViewer

Mostra as regras de CSS aplicadas a um determinado elemento que você aponte com o mouse. Muito útil quando você identifica um comportamento estranho e precisa descobrir o que está ocasionando-o ou por questões de aprendizado para entender como foi feito um certo efeito.

Firebug

Essa é uma extensão com funcionalidades que eu não consigo entender muito bem, mas uma única que eu entendo me é extremamente útil, o debugger de Javascript. Um ícone na barra de status do Firefox lhe mostra se ocorreu algum erro no Javascript e lhe mostra onde, lhe permitindo ir direto ao erro.

Fireftp

Tem algo mais necessário do que um cliente ftp para quem trabalho com web? Acho que só conhecimento mesmo (filosofei ahuhuahua). Então, adiciona um cliente ftp ao seu Firefox com controle de contas e tudo mais que nós precisamos. Tah bom… eu prefiro o Filezilla que está sempre no meu pendrive, mas muita gente não troca o Fireftp por nada, então seria injusto não citá-lo.

HTML Validator

Faz a validação do HTML dos sites que são acessados, mostrando warnings e erros, se existirem, acompanhados de explicação e sugestões de como solucionar o problema. Existem nele 3 métodos de validação, o mais rigido é o “Serial” e aos que forem mais flexíveis aconselho o “Tidy”.

IE Tab

Permite que o Firefox exiba sites utilizando a engine de renderização do Internet Explorer, servindo para testar a renderização de CSS no IE sem sair do Firefox. Não funciona no linux, já que não pode haver um Internet Explorer instalado.

JSView

Acrescenta ao menu e à barra de status opções para visualização dos arquivos Javascript e CSS externos, abrindo-os no visualizador de código-fonte do firefox.

LinkChecker

Sendo sincero, nunca utilizei, mas acho a idéia interessante e bastante útil, principalmente naqueles momentos em que você desenvolve algumas páginas correndo e quer ter certeza que não esqueceu de nenhuma. Ah.. a proposta da extensão é verificar os links de uma página atrás de possíveis links quebrados.

MeasureIt

Clicando no ícone que ele acrescenta na barra de status do seu firefox, esta extensão lhe permite medir (em pixels) uma área retangular do site selecionada pelo mouse, lhe informando a largura e a altura separadamente.

Page Validator

Aos que pensaram que estou colocando duas extensões com o mesmo fim, não, isso vai acontecer logo abaixo, mas nesse caso a HTML Validator não funciona exatamente igual a essa. A primeira faz a validação no seu próprio computador, enquanto esta encaminha uma requisição ao validador da W3C, que pode acusar alguns erros antes não acusados.

Save as Image ou o ScreenGrab!

Basicamente servem para gerar arquivos com a screenshot do site que você estiver acessando. Utilizo para guardar layouts que eu ache interessantes em minha galeria. Infelizmente, eles não se dão muito bem com Flash. Eu não gosto de Flash mesmo. =)

Web Developer

Por irônia do destino, esta extensão está em último, mas como dizem que quem ri por último, ri melhor… poisé. Minha vida não seria a mesma sem essa extensão. hahuhuhuhua. Ela adiciona uma barra de ferramentas ao Firefox com diversas funcionalidades (muitas mesmo). Então, só vou listar algumas: desabilitar java, javascript, bloqueador de pop-ups, cache, redirecionamentos, CSS e imagens, limpar cookies e visualizá-los, escolher Media Type do CSS que será carregado, exibir borda, IDs e diversas outras informações nos elementos da página e redimensionar a janela do Firefox para certas resoluções.

É isso pessoal, espero que esse artigo lhes seja útil e quem tiver outras sugestões é só comentar. Agora com as férias (nem tão férias assim) chegando, acho que terei mais tempo de escrever. Abraços!

Excluídos do Google Analytics

Rodrigo Aguas — Sat, 13 Oct 2007 19:36:44 +0000

Há tempos atrás, eu e um amigo estavamos voltando da faculdade e ele me perguntou com ar irônico: “Por que o Google Analytics não diz se os usuários tinham Javascript habilitado?”. Sem pensar muito, respondi que não sabia e ele riu. Explicando: o Google Analytics usa o Javascript para ser invocado, não é possível um visitante ser “detectado” por ele sem ter o Javascript habilitado. Depois me pareceu óbvio, mas nunca havia pensado nisso.

Falando um pouco sobre o Google Analytics para os que não conhecem. Ele é um serviço gratuito oferecido, obviamente, pela Google que permite ter diversas informações e relatórios sobre os visitantes do seu site. Essas informações incluem desde a quantidade de visitas diárias até a resolução de tela ou qual versão do Java (Java mesmo, não Javascript! hehe) estava instalado na máquina dos seus leitores. Para a grande maioria acredito até que tanta informação seja inútil, pois muitos daqueles dados não influenciarão em nada no dia-a-dia do site.

Mas voltando ao javascript e Google Analytics, pensei em mais consequências dessa “exclusão virtual” e identifiquei algumas. Se o Analytics precisa do Javascript, é fácil perceber que qualquer acesso a conteúdos estáticos no seu servidor não estará nas estatísticas. Tudo bem, não faz sentido querer saber quantas pessoas acessaram o arquivo de CSS de um site, mas se o site disponibiliza arquivos para download, há muito interesse em saber quantas pessoas estão baixando tais arquivos. Outro problema que eu percebi seria nos acessos aos feeds RSS do site que, cada vez mais populares, não seriam contabilizados pois são arquivos xml.

Não imagino nenhuma solução que resolva o problema continuando a usar o Google Analytics, só pensei em soluções alternativas usando Content-Type e um sistema próprio para coletar os dados e criar as estatísticas. Mas deixarei esse assunto para um artigo futuro.

Será que é possível resolver o problema usando ainda o Google Analytics? Se você tiver alguma idéia, compartilhe nos comentários. Abraços!

Plugin Viddler para Wordpress e atitude

Rodrigo Aguas — Tue, 09 Oct 2007 23:42:08 +0000

Um aspecto interessante da “blogosfera” é a iniciativa dos blogueiros. O Claudio fez um plugin para o Viddler baseado no Wordpress Video Plugin. Eu nem mesmo conhecia o Viddler, mas o que achei interessante foi a atitude de não se acomodar não encontrando um plugin compatível e fazer o seu próprio plugin. Essas iniciativas que me incentivam a também tentar contribuir para a comunidade, seja escrevendo, seja fazendo a tradução do wordpress para o português.

Um incomum post pequeno. Abraços!

Tradução do Wordpress e Plugin para evitar spam

Rodrigo Aguas — Tue, 04 Sep 2007 23:10:48 +0000

Apesar de ainda não ser necessário aqui no meu blog, pois não recebo spam, estou indicando esse plugin para evitar spam nos comentários do wordpress que é muito interessante. Diferentemente de outros plugins que utilizam uma técnica chamada captcha, este faz perguntas muito simples de serem respondidas por pessoas, mas não por máquinas. O que isso tem de bom? Vou explicar. O captcha utilizado nos outros plugins são letras distorcidas misturadas com ruídos (pontos e traços aleatórios) em uma imagem e o usuário tem que identificar quais letras estão ali, mas para cegos isso é impossível. Surgiu então uma solução parecido mas que era por aúdio, algo não muito comum e pouco prático. Esse que indiquei resolve o problema de maneira extremamente simples fazendo perguntas do tipo “Quanto é 1+2?”.

Em breve, publicarei mais uma versão dos arquivos traduzidos do Wordpress. Enquanto isso, continuo disponibilizando a primeira tradução e se precisar de orientação leia o tópico em que a divulguei.

Evolução da Web, mas nada de Web 2.0

Rodrigo Aguas — Mon, 03 Sep 2007 23:32:35 +0000

Foi lançada uma nova versão da Globo.com. Calma! Não estou dizendo que isso que é a evolução da web, mas esse lançamento mostra uma tendência, o uso de resoluções de tela maiores na grande massa de internautas. Um site desse porte tem um público bastante diversificado e essa nova versão já foi feita considerando que o usuário utilize a resolução de tela em 1024×768 pixels. Para que os “excluídos” não fiquem em uma situação ruim ao navegar no site, o conteúdo da última coluna da direita, que fica estratégicamente posicionada na faixa entre 800 e 1024 pixels de largura, não é de grande importância.

A escolha de qual resolução seu novo site terá deve ser feita levando em consideração o seu público e nisso quem pode lhe ajudar é o Google Analytics. Já existem muitos outros sites que levam em consideração resoluções maiores que os 800×600 convencionais e isso tende a crescer cada vez mais. Assim como um dia existiram os feitos para serem exibidos em 640×480, ou você acha que “Melhor visualizado em 800×600″ existe a toa? Provavelmente o primeiro site da microsoft (abaixo) nem se preocupava com isso ainda.

E como podem ver, esse blog perdeu seu visual padrão do Wordpress e ganhou um layout parecido com o do resto do site, ainda em 800×600 mas já é alguma coisa. Não está concluído, mas a falta de tempo impera e como podem perceber há tempos não publicava nada. Até a próxima!

Nada de música de fundo em site

Rodrigo Aguas — Sat, 18 Aug 2007 14:40:44 +0000

Não é o meu intuito fazer uma coleção de links interessantes aqui, para isso existe o del.icio.us, mas alguns assuntos interessantes abordados em outros blogs me estimulam a indicá-los a leitura pois mostram pontos de vista parecidos com o meu.

Dessa vez foi sobre colocar música de fundo em sites, o que pode ser um GRANDE inconveniente para o usuário. Atualmente, ouvir músicas deve ser a atividade mais popular entre os internautas, principalmente os jovens e esses sites fazem com que o usuário tenha que pausar a música que está ouvindo ou procurar no site pelo botão de “stop” (o que nem sempre é possível achar). Outro ponto a ser avaliado é o tempo de carregamento do site, que será extremamente prejudicado, mesmo que depois o usuário queira parar a música inconveniente. Por último, ao acessar a maioria dos sites as pessoas esperam uma resposta visual e não auditiva, essa surpresa pode ser positiva, mas também pode causar o sentimento oposto. Digo a maioria porque ao acessar a rádio web do Lg (olha a propaganda!) as pessoas já não esperam a mesma coisa.

Então, se a música for necessária no site, faça de forma a minimizar os incômodos para o usuário, colocando-a por padrão em modo desligado e indicando-lhe a possibilidade de ligá-la. Até!

Mídia tradicional demonstra incômodo pelo crescimento dos blogs

Rodrigo Aguas — Tue, 14 Aug 2007 22:03:10 +0000

O vídeo abaixo faz parte da campanha publicitária do jornal Estadão atacando a credibilidade das informações divulgadas em blogs. Obviamente, existe muita besteira escrita por blogueiros, mas a generalização feita pelo jornal foi uma das maiores, não digna de um jornal de respeito. Uma melhor análise e outras imagens da campanha podem ser encontradas no artigo do Revolução Etc tratando da credibilidade dos blogs.