Uma brincadeira que recebi do meu amigo finlandês Sami Koivu.
Sem rodar o código Java abaixo, você consegue adivinhar qual será o resultado?
Quem acertar vai pro Hall of Fame.
for(long b=0x50296daf316474b0L;b>0;b>>=4){System.out.print("cy kiatosheurd ll".substring((int)(b%16),(int)((b%16)+1+b%2)));}
No meu último post sobre o jQuery: “Selecionando tudo com o JQuery” eu falei sobre como selecionar elementos em uma página e se você deu uma lida nele com certeza você já sabe o que precisa fazer para tal.
E dependendo do seu objetivo, a melhor hora para selecionar seu elementos e tratá-los é depois que a sua página está carregada. Isto quer dizer, depois que todas as tags e seus respectivos ids, classes, atributos… já foram lidos pelo browser e estão prontos para serem manipulados.
O jQuery sabe exatamente quando esse momento chega, tanto é que ele disponibiliza um evento para nós:
$(document).ready(function() { // seu código aqui });
Já que o próprio jQuery tem esse tratamento para o evento para tratar quando página está carregada podemos deixar de lado coisa como:
<body onload="function(){/* seu código aqui */}">
ou
window.load="function(){ /* seu código aqui */ };
Até porque cada vez que você utiliza o método fornecido pelo jQuery o seu tratamento é adicionado à um determinado evento sem se sobrepor sobre os outros tratamentos.
Um exemplo básico do que você pode fazer com essa nova função que você aprendeu junto com os seletores.
Vamos imaginar que você tem uma página com vários links, e você quer instruir seus usuários que alguns links abrem em uma nova janela. A maneira que vamos fazer isso é por adicionar no atributo title dos respectivos links o texto “[abre em uma nova janela]“.
O código que temos no body é
<a id="lnkGoogle" title="Link para o Google.com.br" href="http://www.google.com.br" target="_blank">Google</a> <a id="lnkJQuery" title="Link para o JQuery.com" href="http://jquery.com/" target="_blank">JQuery</a>
E no head nós precisamos informar ao JQuery o que ele precisa fazer quando o documento estiver carregado.
$(document).ready(function() { $('a[target$=blank]').each(function(i) { $(this).attr("title", $(this).attr("title") + " [abre em uma nova janela]"); }); });
Deu pra entender claramente o que aconteceu aqui, né? Mas tivemos algumas coisas novas: o each(…) e o $(this).attr(…) .
O each(…) pode ser utilizado de várias formas, a forma que utilizamos aqui foi algo como dizer:
“Caro each(…) eu pedi para o seu pai o JQuery buscar na página todos os links cujo o atributo target termine com os caracteres “blank”. Quero que você pegue cada um desses itens selecionados e execute o código $(this).attr(”title”, $(this).attr(”title”) + ” [abre em uma nova janela]“);“
E o sábio each(…) entendeu perfeitamente o que precisa fazer. E nesse caso usou o $(this) para cumprir sua tarefa. O $(this) se refere ao elemento da vez dentro do loop.
Usamos o attr(”nome-do-atributo”) para pegar um atributo do elemento e attr(”nome-do-atributo”,”novo-valor-para-o-atributo“) para definir um novo valor para ele.
Simples assim.
Nesse fim de semana, passeando pelo Youtube, encontrei um curso de Metodologia de Programação ministrado pelo Professor Mehran Sahami do Departamento de Ciências da Computação da Universidade de Stanford (A mesma Universidade onde Sergey Brin e Larry Page estudaram - para quem não sabe eles são os sócios fundadores do Google).
O curso tem um total de 28 aulas, com uma duração em média de 50 minutos cada, mas o professor é tão descontraído que o tempo passa e você nem percebe. Ele utiliza o Java como linguagem de programação e nele você irá aprender os princípios da engenharia de software como orientação a objetos, encapsulamento, abstração, testes, etc.
O link para as aulas é: Course | Programming Methodology (em inglês e totalmente gratuito).
Cada dia que passa eu me torno mais fã do jQuery e eu incentivo fortemente o seu uso.
Por isso resolvi escrever sobre a maravilha dos seletores em jQuery.
Uma das formas de utilizar esses seletores é muito similar aos seletores CSS. Já expliquei um pouco sobre isso aqui.
Para fazer isso basta colocar o nome da tag como parâmetro.
Por exemplo a linha abaixo esconde todas as imagens que tem na página:
$('img').hide(); //esconde todos os elementos img
É muito similar ao modo como você define um estilo para um determinado Id. Você só precisa colocar o (#) seguido do nome do Id:
$('#meuID').hide(); //esconde o elemento que tenha o id meuID
O código abaixo seleciona e esconde todos os elementos que possuam uma determinada classe css. Você precisa colocar um ponto (.) seguido do nome da classe.
$('.minhaClasse').hide(); //esconde todos os elementos que tenham a classe css minhaClasse
Vamos supor que você quer selecionar todos os elementos que tenham um certo atributo definido. Como fazer?
Basta colocar como parâmetro o nome do atributo entre colchetes ([]).
A linha abaixo mostra como esconder ou mostrar os elementos que tenham o atributo title:
$('[title]').hide(); // ESCONDE todos os elemento da página que tenham o atributo title definido $('[title]').show(); // MOSTRA todos os elemento da página que tenham o atributo title definido
No caso acima é selecionado todos os elementos que possuem o atributo title preenchido. Não importando qual é seu conteúdo.
Se por exemplo você quiser saber todas as imagens que tenham o atributo width igual a 240 (largura de 240 px).
$('[width=240]'); // Seleciona todos os elementos que tenham a largura de 240 px
Podemos combinar o que aprendemos até agora.
Por exemplo se utilizarmos a linha acima ($(’[width=240]‘);) pode ser que venha selecionado um outro elemento que não seja imagem.
Mas como queremos apenas as IMAGENS, basta adicionar a tag img no parâmetro passado para o jQuery. Fica assim:
$('img[width=240]'); // Seleciona todas IMAGENS que tenham a largura de 240 px
Você pode também selecionar as imagens que tenha a largura DIFERENTE de 240 pixels por colocar uma negação (!):
$('img[width!=240]').hide(); // Seleciona todas IMAGENS que tenham a largura DIFERENTE de 240 px
E se você precisar selecionar todos os links da sua página que apontam para um determinado site.
É o jQuery faz isso para você!
Para isso precisamos usar (^) que indica que queremos todos os elementos que tenham um determinado atributo inciando com tal sequência de caracteres:
$('a[href^=http://www.meusite.com.br]'); // Seleciona todos os LINKS cujo o atributo HREF iniciam com http://www.meusite.com.br
E é claro que você também pode selecionar elemento que terminem com determinado conjunto de caracteres. Como por exemplo pegar todos as imagens JPGs ou links para PDFs. Bastando colocar o ($) no lugar do (^):
$('img[src$=jpg]'); // Seleciona todas as IMAGENS com extenção JPG $('a[href$=pdf]'); // Seleciona todos os links para PDFs
Caso seu objetivo seja selecionar todos os elementos que possuam um determinado conjunto de caracteres idependente se eles estão no inicio ou no final basta utilizar o (*):
$('a[href*=www]'); // Seleciona todos os links para que contenham os caracteres <em>www</em> no atributo href
Agora que você já sabe tudo isso sobre seletores do jQuery você precisa saber que também pode combiná-los.
Como por exemplo selecionar todas as IMAGENS que possuam “foto” no atributo alt e que tenham os caracteres “flickr.com” no atributo src.
$("img[alt*=foto]img[src*=flickr]");
Outra grande ajuda é se você quer selecionar os elementos que estão vazios:
$(':empty'); // Seleciona todos os elementos que estão vazios: DIVs, TDs, SPANs, INPUTs, etc. Se está vazio o jQuery encontra-o. $('p:empty'); // Ou você pode ser mais específico e selecionar apenas os parágrafos vazios.
Ou então selecionar todos os elementos que possuam dentro dele um outro elemento. Por exemplo parágrafo (p)
$(':has(p)') // Seleciona todos os elementos que tenham elementos dentro dele. $('p:has(img)'); // Ou selecionar apenas os parágrafos que contenham imagens.
Suponhamos que você tenha precise esconder selecionar todos as DIVs que contenham a palavra “terra”. A forma mais simples de fazer tal coisa é:
$("div:contains('terra')").hide(); // Esconde todos os DIVs que contenham a palavra "terra".
$("img:visible").hide(); // Seleciona todas os IMAGENS VISÍVEIS e esconde-as. $("img:hide").show(); // Seleciona todas os IMAGENS ESCONDIDAS e mostra-as. $("p:eq(0)").hide(); // Seleciona e esconde o primeiro parágrafo que encontrar. $("p.minhaClasse[img]"); // Seleciona os parágrafos que contenham a classe minhaClasse e uma imagem dentro dele.
Você pode aprender mais sobre os seletores lendo a documentação do jQuery sobre seletores.
E agora que você já sabe bastante sobre eles, em breve vou explicar o que você pode fazer com os elementos selecionados.
Browsers é um tema bastante discutido entre os desenvolvedores web, e também é motivo de grandes dores de cabeça.
A intenção é apenas fazer uma pequena introdução nesse post e nos próximos entrarei em mais detalhes.
Existem vários browsers na internet. E seria meio irracional você testar um website em todos eles. Então por isso mantenha seu foco nos browsers mais utilizados:
Estatística com base em: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Como muitos sabem a Microsoft nunca deu muita importância em seguir padrões. Por exemplo tente abrir um documento gerado pelo Word XP no Word 2003. Não funciona.
Por isso eu recomendo fortemente você a sempre testar seu website nos browsers da Microsoft. Raramente a sua página irá funcionar 100%.
A boa notícia é que segundo blog oficial do IE8 a versão 8 do browser será muito mais compatível com os padrões definidos pela w3c.
Conheço duas ferramentas que facilitam bastante a nossa vida de denvolvedor quando a assunto é testar páginas nos IEs. Onde você escolhe qual é a engine do IE que você quer utilizar, conheço dois programas que fazem isso:
Na minha humilde opnião este é o melhor browser do mundo! Atualmente está na versão 3.0.6. Acho que é o mais utlizado pelos desenvolvedores, mas infelizmente a web não é feita apenas de desenvolvedores, senão o nosso problema com browsers estava resolvido.
Normalmente não tenho problemas com ele quanto a testes de CSS ou Javascript e quase que sempre dispensa o uso de hacks.
Se você se preocupa em desenvolver seu front-end seguindo os padrões definidos pela wc3 dificilmente você terá problemas com o Opera. Pois o Opera foi o primeiro navegador a atingir a marca dos 100/100 no teste acid3.
Abaixo tem uma lista com alguns itens básicos que você precisa observar:
Estou apenas falando de um teste básico e superficial, que é muito menos abrangente do que um teste da aplicação.
O uso de hacks é desaconselhado, mas muitas vezes necessário para que uma página seja exibida corretamente nos mais diversos browsers.
Abaixo você poderá ver uma lista com exemplos de hacks para cada tipo de browser.
/* Opera */ html:first-child #opera { display: block; } /* IE 7 */ html > body #ie7 { *display: block; } /* IE 6 */ body #ie6 { _display: block; } /* Firefox 1 - 2 */ body:empty #firefox12 { display: block; } /* Firefox */ @-moz-document url-prefix() { #firefox { display: block; } } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } /* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block; } }
Veja aqui um exemplo funcionando.
Uma dica que encontrei aqui no blog The Spanner sobre como identificar o browser do usuário de forma rápida e simples.
//Firefox FF=/a/[-1]=='a' //Firefox 3 FF3=(function x(){})[-5]=='x' //Firefox 2 FF2=(function x(){})[-6]=='x' //IE IE='\v'=='v' //Safari Saf=/a/.__proto__=='//' //Chrome Chr=/source/.test((/a/.toString+'')) //Opera Op=/^function \(/.test([].sort)
Coloque isso tudo junto e temos:
B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown'
Veja aqui uma página com esse código funcionando.
Quando entrei na área de desenvolvimento web (front-end) não era necessário saber muita coisa. Eu precisava apenas conhecer o FrontPage e colocar (horríveis) gifs animados nas páginas.
Era tudo muito feio e amador (dá uma olhada no Terra de 10 anos atrás) mas não achávamos isso, achávamos tudo lindo pois era tudo muito novo.
Mas hoje a cena é diferente. Os horríveis frames já faleceram e foram sucedidos pelo AJAX. As tags font e tabelas foram substituídas por CSS. Os CGIs deram lugar aos Ruby-on-rails, Phps, Asp.nets, etc. E a interatividade com o usuário virou lei.
E é humanamente impossível saber de todas as novidades que acontecem. Só mesmo os servidores do Google conseguem armazenar tanta informação.
Enfim, muita coisa mudou. Hoje temos um excesso de informação, excesso de pessoas, de sites, blogs, e para você conseguir se destacar ou simplesmente ser notado está cada vez mais difícil. Todos querem falar mas ninguém quer ouvir.
Quando antes era necessário apenas saber usar tabelas e inserir gifs animados nas páginas hoje é necessário saber mais. Para o desenvolvedor web termos como Tabless, CSS, Jquery, Prototype, Interação, Cross-browser entre outros precisam fazer parte de seu vocabulário.
E é esse o objetivo desse blog, deixar o leitor mais próximo dessa realidade que é a Internet hoje.
Essa foi só uma (extremamente) pequena apresentação sobre a evolução da Internet nos últimos anos.
No próximo post vou falar um pouco sobre browsers.