Gustavo Ribeiro - Tableless, Acessibilidade e SEO

SEO Cheat Sheet

Mais uma Cheat Sheet para guardarmos na pendrive e consultar sempre que possível.

Continuar lendo…

Criando Formulários Acessíveis

Falar sobre formulários acessíveis se tornou meio difícil por ser um assunto que cada um poderá interpretar de uma maneira diferente. Alguns dizem que o correto é criarmos o formulário utilizando listas desordenadas (ul), outros já falam que o correto seria utilizarmos parágrafos (p). Utilizar <p> ou <ul>? Escolha um e seja feliz.

Para que um formulário seja realmente acessível, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:

• form: cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
• fieldset: utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
• legend: define um nome para cada fieldset criado
• label: define um “label” para um determinado controle.
• input, checkbox e radiobutton: elementos de um form.

Continuar lendo…

CSS Cheat Sheet

Mais uma Cheat Sheet para nós, desenvolvedores, consultarmos quando esquecermos de algum atributo/propriedade no CSS.

Continuar lendo…

Formulário utilizando “Label” e o atributo “For”

Quem nunca ficou irado ao ter que preencher um formulário e só conseguir clicar em cima da bolinha - radio button - de cada opção para fazer sua escolha? Sim, isso realmente irrita. Para isso que existe o atributo “for” para os nossos form label. Ok, o que seria esse tal de “for”.

Quando criamos um formulário temos que ficar atentos a, no mínimo, três tags fundamentais para a marcação correta do form, são elas: <form>, <label> e a nossa famosa <input>.

• <form> - indicará o início e fim do nosso formulário;
• <label> - irá conter todo o respectivo texto de cada campo do formulário;
• <input> - nosso formulário em si (campo texto, radio buttons etc).

Continuar lendo…

Layout fluido de 3 colunas com CSS

Antes de mais nada - já é até automatico para mim - iremos zerar todos os elementos possíveis do html para que possamos obter o mínimo de diferença entre os diversos browsers existentes.

Para os que ainda não sabem para que serve, ou nunca ouviu falar sobre CSS Reset, vale a pena ler o post da amiga Cléo Morgause.

Então vamos ao que interessa:

* {margin:0;padding:0} /* CSS Reset */

Próximo passo é criarmos as nossas div’s na seguinte ordem: esquerda / direita / centro.

Continuar lendo…