Ricardo Zein - Tecnologia, Biologia, Bioinformática

http://www.youtube.com/watch?v=3gNEGckyIHs

Este vídeo foi feito para Oxfam GB como parte do YouTube Cannes Young Lions Ad Contest.

La vamos nós. Mais sobre manipulação do DOM. Na verdade sobre como selecionar os elementos. No post de número 5 falamos sobre hasClass e vimos como é útil para verificar a existência de uma classe. Agora continuaremos a série com eq.

eq()

Vamos supor que nós tenhamos 3 listas distintas. Mas que nós queiramos destacar sempre o terceiro item de cada uma dessas listas. Não há a necessidade de atribuir uma classe. É possível escolher o terceiro elemento de cada lista através do seguinte código que explicarei em seguida. Só para constar, “eq” está para “equal” que está para “igual”. =)

jQuery("ul").each( function(index){
	jQuery("ul:eq("+index+") li:eq(2)").css("font-weight","bold");
	}
);

Você pode visualizar o exemplo também.

Vamos, linha por linha:

1. jQuery("ul").each( function(index){

   Nesta linha dizemos para o jQuery percorrer todas as listas (<ul>) presentes na página. Também configuramos a variável index, que marcará o indice (0, 1, 2, 3, …).

2. jQuery("ul:eq("+index+") li:eq(2)").css("font-weight","bold");

   Em ‘ul:eq("+index+")‘ dizemos para verificar a primeira lista, depois a segunda, depois a terceira e assim por diante. A variável index tem um valor numérico sendo que 0 (zero) representa a primeira interação.

   Logo em seguida dizemos para selecionar sempre a terceira <li> com o “li:eq(2)“. E finalmente executo uma formatação css, neste caso um negrito, porém poderia ser qualquer outra coisa.

Existem modos diferentes de se fazer o que acabei de explicar. Não vem ao caso, pois estou explicando apenas a funcionalidade.

Se for utilizar isso nos seus códigos, copie do exemplo, ok? Abraços!

Antes de mais nada, não sou publicitário tampouco designer. Vivo de tecnologia, tanto para o meu sustento quanto para a minha diversão. Não ser publicitario nem designer, no entanto, não me impossibilita analisar a Internet no Brasil e seus caminhos, claro. Especialmente por trabalhar com estes profissionais em diversas empresas pelas quais já passei. Algumas preocupações que tenho passam pelo pensamento de alguns profissionais de que inovação na Internet tem relação direta com movimento, motion. O trabalho de pensar nas idéias, do quanto determinada aplicação ou determinado site é realmente útil muitas vezes não passa pela cabeça. Há uma preocupação com o comportamento de transições entre telas, se vai ou não haver reload entre páginas e assim vai. A disposição do conteúdo, idéias novas em termos de interatividade entre pessoas (leia-se mídias sociais), usabilidade e acessibilidade do conteúdo parecem ficar abaixo de questões estéticas. As vezes alguns parecem encarar a Internet como um grande CD-ROM.

Não entra na minha cabeça como se pode pensar em sites Flash nessa altura do campeonato. Entendo que muitas coisas são interessantes quando feitas com Flash, porém me parece um pensamento do final dos anos 90 do século passado quando tinhamos sites Flash pesadíssimos com introduções animadas e efeitos sonoros e visuais em excesso. Esse tipo de pensamento me preocupa muito, pois não vejo futuro algum nisso. Estou generalizando, pois há muita gente que pensa diferente. Que pensa em funcionalidade mas também em forma. Muitas vezes ainda temos que encarar preconceito do HTML, o que me parece no mínimo um absurdo. Me pergunto se essas pessoas usam o Google, Twitter, Facebook, se leem blogs, se assinam feeds RSS e assim vai.

Não quero passar um olhar ressentido, mas sim indignado. Esses profissionais deveriam estudar tecnologia. Sim designers e publicitários deveriam estudar tecnologia para poder criar algo interessante na web brasileira. De outro modo ficaremos na era dos hotsites Flash para sempre. Onde está a inovação? Onde está a tão falada criatividade brasileira. Estou vendo muito pouco disso, infelizmente. Vou continuar, claro. Sempre temos que tentar expor as ideias que achamos corretas.

Vou dar alguns exemplos de como a engine de seletores CSS do jQuery é ao mesmo tempo poderosa e simples. Vale citar que a partir da versão 1.3 da biblioteca contamos com uma engine nova chamada Sizzle que é aberta para outras bibliotecas adotarem. Sizzle é mais rápida e eficaz que outras engines. É possível que programadores que utilizam Mootools não concordem, mas minha opinião é essa mesma. =) Vamos ao exemplo de hoje. Let’s code.

hasClass()

Checa se determinado elemento tem ou não determinada classe. Com essa informação você pode atribuir um comportamento, um estilo ou o que quer que seja.

Um exemplo pode ser uma lista que em apenas uma <li> há uma classe chamada destaque, porém em alguns casos ela aparece e em outros não. Poderíamos selecioná-la da seguinte maneira:

jQuery("li").mouseover(function(){
	if(jQuery(this).hasClass("destaque")){
		jQuery(this).fadeOut("slow").fadeIn("slow");
	}
});

Na primeira linha digo que quando passar com o mouse por cima de uma <li> que tenha a classe destaque deve dar um fade out e depois um fada in, ou se piscar. Veja funcionando.

Abraços a todos!

Felizmente 2008 foi um ano muito bom para mim. Meu filho Marcelo nasceu, estou com um bom emprego na agência Hello Interactive e estudando para obter uma certificação paga pela empresa.

Atualmente estou programando interfaces (XHTML, CSS e JavaScript, basicamente). Muitas vezes pode ser um trabalho enfadonho, cansativo e também pouco valorizado. Você sofre com os designers que preferem projetar outros tipos de interface para web. Entenda isso por interfaces animadas, Flash. Argh. Paciência, você tem que saber lidar com tudo isso e estudar para se destacar e para melhorar a dinâmica de trabalho na sua empresa.

Este ano, se tudo der certo, me transformarei em um profissional Google na empresa. Ou seja, alguém responsável por tudo o que diz repeito às tecnologias providas ou relacionadas ao Google. AdWords, Maps, Open Social e assim vai. Para isso começarei pela certificação que mencionei acima. A GAP, Google Advertiving Professional. Mas tenho um roteiro de estudos a seguir, caso alguém se interesse:

• AdWords: preciso estudar para passar na certificação! (http://www.google.com/adwords/learningcenter/)
• API
  • AdWords - http://code.google.com/intl/pt-BR/apis/adwords/
  • Open Social - http://code.google.com/intl/pt-BR/apis/opensocial/
  • Google Maps - http://code.google.com/intl/pt-BR/apis/maps/
  • Android - http://code.google.com/intl/pt-BR/android/
• Java, JavaScript, Python, XML, XSLT, XHTML e CSS.

Muitas coisas não vou precisar estudar, como JavaScript, XML, XSLT, XHTML, etc. Mas Python e Java, por exemplo, será necessário. Ja conheço superficialmente algumas das APIs acima também. São muitas as APIs essas são apenas algumas que selecionei para começar.

Bom, vou postando as novidades. Se você tem alguma sugestão é só falar.

Abraços e feliz 2009!

O blog anda às moscas, eu sei. Mas minha paixão pela tecnologia e pela vida não! Em 2009 teremos mais conteúdo, mais relevância e mais sucesso (exclamação =D).

Meu desejo é sincero. Uma vida boa, honesta e de superação. Superação.

Um ótimo natal e ótimo ano novo. Nos vemos em 2009 com mais jQuery, mais bioinformática, mais ciência!!

Abraços para todos! HO HO HO!