Strict Web Standards

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.

Criando um Menu CSS com listas

Uma das coisas que os iniciantes em CSS tem certa dificuldade é em criar menus CSS, mas isso como veremos é uma uma das coisa mais simples de se fazer.

Menus CSS são tão belos como menus em flash, e melhor, são mais acessiveis, amigaveis e ajudam os mecânismos de busca como por exemplo o google.

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.

PNG Transparente no Internet Explorer 6 e 5 (solução definitiva)

Bom, acho que hoje é o dia mais feliz desse ano pra mim e creio que sera para muitos de vocês também, fiquei tão feliz em encontrar isso que quis compartilhar com vocês!

Recentemente aqui na agencia, me apresentaram uns layouts bem complicados de se montar, envolvendo transparencias que só eram possiveis com PNG transparente.

Imagine ter que criar um layout onde o background é uma mistura de degrade com textura e o conteúdo possui uma dropshadow em degrade e transparente (isso mesmo a sombra é um degrade com transparencia), são varios pesadelos juntos. Ai tive que correr atrás!!

Tem a solução tradicional que muitos devem conhecer:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagem.png');

Mas esta tem várias complicações de implementação.

Firebug, Web Developer Toolbar e MeasureIt Add-ons

Todo usuário de firefox sabe que ele é o navegador mais personalizavel da atualidade, graças aos seus add-ons podemos adicionar varias funcionalidades extras ao navegador, e felizmente para nós web designers ele tem algumas ferramentas bem úteis.