TidBits

O famoso framework de Javascript tem diversas opções para manipular elementos DOM mas mesmo para aqueles quem tem mais experiência em jQuery, é dificil dizer a diferença entre after e insertAfter, entre wrap, wrapAll e wrapInner, etc.

Para poder visualizar bem o que faz cada método, o site Cody Lindley fez uma página com demonstração de todos os métodos.

Vale a pena pelo menos dar uma olhada.

[]s

Talvez o último Quiz que eu crio (alguém tem outra sugestão?), mas esse aqui, pra quem não conhece bem o framework, da pra aprender bastante respondendo as questões.

E pra quem ainda não fez, também tem o Quiz de Javascript , o Quiz de CSS e o Quiz de XHTML .

Deixem comentários falando o que acharam do Quiz.

[]s

Ultimamente tenho visto scrips interessantes em javascript simulando aquele efeito muito comum no flash o qual chamamos de parallax.

No dhteumeuleu, no CSSLab e no Stephband tem exemplos bem legais e bem complexos dessa técnica.

E essa semana, fazendo um freela, precisei criar algo nesse estilo. E acabei criando um script BEM SIMPLES que simula core do efeito.

Veja o exemplo abaixo e passe o mouse em cima:

Vou explicar como fiz:

O HTML:

<div id="container">
	<div id="conteudo">
		<img src="_images/parallax.jpg" alt="Parallax"/>
	</div>
</div>

O CSS:

	#container { width: 460px; height: 304px; position: relative; overflow:hidden; }
	#conteudo { position: absolute; left:0; top:0; }

E o javascript (usando jQuery):

$(document).ready(function(){
	if($('#conteudo').width()>$('#container').width()){
		var pos_x = $('#conteudo').offset().left;
		var container = $('#container').width();
		var conteudo = $('#conteudo').width();
		var diferenca = conteudo - container;
		var metade = - parseInt(diferenca / 2);
		$('#container').mousemove(function(e){
			x = e.pageX - pos_x;
			porcentagemX = parseInt(x / container * 100);
			left = parseInt(0 - (diferenca  / 100 * porcentagemX ));
			$('#conteudo').css('left',left);
		});
		$('#conteudo').animate({ 'left':metade },1000);
	}
});

Vou explicar basicamente o que o script faz, linha a linha.

1 - Faz com que a função seja executada quando terminar de carregar a página;

2 - Verifica se a área do conteúdo é maior do que a do container pra poder aplicar o efeito;

4 a 8 - Declara variáveis com os valores dos elementos;

10 - Escreve uma função que será executada toda que passar o mouse em cima do elemento “container”;

11 e 12 - Obtem a posicao do mouse (em porcentagem) em relação a div “container”, elemplo, se o mouse tiver bem no meio do container, a posicao é de 50%, mas se o mouse tiver bem na direita do container então a posição será próxima a 100%;

13 e 14 - Com a porcentagem obtida, é só posicionar o left do conteudo. O conteúdo não precisa ser uma imagem, pode ter quaisquer elementos dentro.

17 - Para o usuário perceber o efeito, é legal centralizar o conteúdo, usando o animate do jQuery já mostra o movimento.

Apesar do exemplo bobo aqui nesse post, esse script da liberdade pra fazer efeitos mais complexos. È mais facil trabalhar em cima dessa base do que usar um plugin de jQuery com mil opções.

Pra quem achou legal, pode fazer o download do exemplo completo.

Teste seus conhecimentos em JavaScript respondendo o quiz. Todas as perguntas e respostas estão em português.

Não deixe de comentar quantos pontos você fez e o que achou das perguntas.

E pra quem ainda não fez, também tem o Quiz de CSS , o Quiz de XHTML e o Quiz de jQuery .

[]s

Eu sempre fico impressionado com as scripts do dhteumeuleu . Tanto pelo bom trabalho, quanto pela criatividade. E recentemente ele fez (ou eles fizeram?) mais um projeto bem legal, trata-se de uma animação de texto em javascript chamada de “mistakes”. Deem uma olhada abaixo:

No exemplo original, o texto fica dentro de um textarea, mas facilmente dá pra alterar isso, deixar do jeito que você quiser, dentro de um <h1> por exemplo, assim o código fica acessível pra search engines e pra quem não tem javascript.

Quem gostou, pode fazer o download do exemplo original ou então acessar o site do dhteumeuleu . Quem puder contribuir com paypal no site dele, o cara merece. =)

O seu browser estar apresentando seu site corretamente não significa que seu código esta correto e também não significa que vai funcionar em mais 40 browsers que são usados atualmente. Programar a interface de um site é bem diferente do que programar numa linguagem server side onde, se você esquecer um “;” ou não fechar um if, seu código nem roda. Programando no lado do cliente, diversos erros de html são “consertados” pela maioria dos browsers. Ou seja, você esquece de fechar uma tag, ou coloca um <h1> dentro de um <a> no seu browser e aparece tudo ok, mas é errado.

Ok, mesmo que o site seja testado no Firefox, ie6, ie7, Safari, Chrome e Opera, quem garante que os navegadores Netscape 6.0, Ant Galio 3.1, Blaze 6.0 ou o Playstation 3 5.0 vão interpretar corretamente também?

E é por isso que devemos validar o código. Existem diversas ferramentas para validação de código.

A mais importante delas, creio que é o HTML validator, uma extensão de firefox. Além de válidar seu (x)html, ele diz o que está errado e como consertar o que é ótimo pra quem está começando a programar interface.

Para validar CSS, a melhor opção é o CSS validator da W3C. Infelizmente não existe (ou não conheço) nenhuma opção desktop. Mas mesmo assim, vale a pena utilizar.

Já o link-checker é um validador de links que analisa seu site e procura por links quebrados, muito útil. A análise é BEM completa, e demora muito tempo, afinal ele checa tudo. Analisando a home do TidBits ele demorou 286 segundos e checou mais de 200 arquivos.

Outras ferramentas como o firebug, ajudam bastante na codificação, principalmente pra detectar erros de JavaScript. E finalmente, para garantir a acessibilidade do seu site, existe diversas opções, duas em português: o Da Silva e o ASES desenvolvido pelo governo eletrônico.