jQuery Plugin: Before/After (Antes e Depois)

Recentemente no twitter oficial do jQuery apareceu um link de um plugin muito interessante, no qual com duas imagens você pode obter o efeito do “Antes e Depois” em uma foto.

jQuery - Introdução

Olá a todos os leitores do Strict Web Standards. Já faz um tempo que não escrevo nada devido a falta de tempo, mas a partir de hoje pretendo escrever uma série de tutoriais sobre esta incrível biblioteca de JavaScript que é o jQuery.

Centralizando Layout com CSS

Em css, o método mais utilizado para centralizar um layout, é o das margens.

Suponha que você tenha um container e queira centralizalo na tela do navegador. Você poderia ajustar diversos valores para margens esquerda ou direita até centraliza-lo, mas isso fica meio complicado quando você não sabe a resolucão do usuário. Então existe a necessidade de um método que o faça automaticamente.

Recomendação de Livros para Web Design

Quando o assunto é Web Design não faltam sites na web sobre o assunto, mas eu sempre defendo a idéia de que nenhum site é tão bom como um livro, afinal um livro além de ter conteúdo mais confiável possui todas as informações muito bem organizadas. Se você quer se tornar um bom Web Designer livros não devem faltar no seu curriculo.

Hoje vou fazer algumas recomendações de bons livros para o pessoal da web. Todos os livros que listo abaixo já li e recomendo todos, portanto incluirei apenas a descrição dos mesmos. São livros sobre CSS, XHTML, JavaScript, PHP, Ajax, MySql e também sobre design.

Solução para o Flicker Bug

Certo tempo atras eu havia postado no fórum do Imasters uma dúvida relacionada com menus css no Internet Explorer 6, que ocorria sempre que tinhamos uma imagem definida como plano de fundo no evento a:hover, e ocorria um bug que a imagem sumia e levava alguns segundos para reaparecer, isso vocês podem reparar acontece em qualquer site no IE6 onde existam imagens de fundo em eventos :hover.

Leitores de Tela, Exemplo/Discussão

Todos aqui já devem ter ouvido falar dos leitores de tela.

Mas alguem já testou algum para ver como é?

Recentemente estava pesquisando sobre isso e testei dois, um chamado JAWS que serve para maioria dos softwares no Windows e também um outro que é uma extenção do Firefox chamada Fire Vox.

Inserindo Flash Corretamente no XHTML

Quem se preocupa com padrões com certeza já se deparou com o problema de colocar um flash que válida na página e/ou com texto alternativo caso o usuário não tenha o flash instalado.

Na internet podemos encontrar códigos como este:

function putFlash(x, y, file){
document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+x+"' height='"+y+"'>");
document.write("<param name='movie' value='"+file+"' />");
document.write("<param name='quality' value='best' />");
document.write("<param name='wmode' value='transparent' />");
document.write("<embed src='"+file+"' wmode='transparent' quality='best' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='"+x+"' height='"+y+"'></embed>");
document.write("</object>");
}

Funciona bem até o momento que o usuário tenha o javascript ativo no seu navegador, caso não tenha ou não tenha o flash nada sera exibido.

Bug da margem duplica no Internet Explorer 6

Este talvez seja um dos bugs mais conhecidos pelos desenvolvedores, e é também o mais fácil de ser corrigido.

Ele ocorre quando temos elementos flutuando dentro de um container.

Veja o exemplo:

XHTML:

<div id="container">
<div id="coluna1"></div>
</div>

CSS:
obs: as bordas foram adicionadas apenas para facilitar a vizualização dos elementos.

#container{
width:600px;
height:300px;
border:1px solid #000;
}

#coluna1{
float:left;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Nesse exemplo temos uma div com id container que contem outra div com id coluna1, a div coluna1 esta flutuado a esquerda dentro da div container, sendo que a div coluna1 também esta com margem esquerda de 20px. Bom, pelo menos deveria ter 20px, pois se executarmos o código no IE6 notaremos que na verdade a div esta distanciada em 40px.

Então, em resumo esse bug sempre ocorre no IE6 quando definimos uma margem do mesmo lado do float, como margin-left e float-left ou margin-right e float-right.

Visualização no IE6

Visualização no Firefox

Porque isso ocorre?

Provavelmente o programador da Microsoft não era muito bom de matemática. Mas brincadeiras de lado o fato de esse bug ocorrer é desconhecido, assim como a maioria dos bugs do IE.

Para corrigilo é simples, basta adicionar a propriedade display:inline na div coluna1 e as margens funcionarão normalmento no IE6.

Ficando assim o CSS da div coluna1:

#coluna1{
float:left;
display:inline;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Livro jQuery do Maujor

Quem desenvolve para web certamente já leu ao menos algum livro sobre web design, e os leitores da categoria provavelmente conhecem o Maujor (Maurício Samy Silva),  que alem de ser um grande nome na comunidade de web standards mantem o site www.maujor.com e é autor de ótimos livros da área, entre eles o mais novo jQuery - A Biblioteca do programador javascript, ainda não terminei de ler o livro mas até o momento estou considerando um bom investimento.

Para quem não conhece jQuery é uma biblioteca javascript utilizada por desenvolvedores web para obtenção de efeitos em páginas com códigos extremamente simplificados.

Algo que com JavaScript puro fariamos:

document.getElementById("id").style.color = "#000";

com jQuery fica apenas:

$('#id').css('color', '#000');

e por ai vai (ficando cada vez mais simples).

Bom, recomendo a todos este livro, pois além de ser uma boa leitura é o único sobre o assunto no nosso idioma (pt-br).

O único contra do livro é que não aborda manipulação de dados no lado servidor.

site do livro: www.livrojquery.com.br

Problemas com floats - Desobstruindo floats

Vamos ver aqui como resolver o seguinte problema: floats obstruidos.

O que é isso?

Quando temos um ou mais elementos flutuantes dentro de um container alguns navegadores não conseguem distinguir mais a altura dos elementos flutuantes fazendo com que o container se contrai-a.

Veja o exemplo na figura abaixo:

A div1 é container da div2 e div3 que estão flutuando, note que a div1 se contraiu ficando menor que a div2 ou div3.

O código que resultaria isso seria algo assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

Para resolver esse problema podemos criar uma div abaixo da ultima div que flutua e colocar nela o estilo clear:both, ficando assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div class="clear"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

.clear{
clear:both;
}

Na visualização:

E pronto, problema resolvido.

É muito comum iniciantes em layouts com css terem esse problema que geralmete pode ser resolvido sem marcação extra adicionando o clear:both no rodape da página.