A nova linguagem HTML5 prevê reformulação no atributo accesskey. Uma delas é: “todos os elementos HTML podem receber o atributo accesskey“. Apesar dos navegadores atuais não aplicarem tudo que a documentação do W3c sugere, ainda sim podemos usar para incrementar a acessibilidade das nossas páginas web.

Você já parou para pensar que seus visitantes podem ter algum tipo de deficiência ou mobilidade reduzida e podem ter dificuldades de controlar o mouse para clicar em links, campos de formulários, etc. E uma navegação utilizando a tecla tab pode acabar sendo um processo bem lento para dar foco em um link…

A especificação da HTML5 recomenda que a combinação de teclas para acionar o atributo accesskey seja ctrl + alt + tecla e que o valor do atributo accesskey seja case sensitive, ou seja, sensível ao tamanho da letra. Porém os navegadores não implementam essa recomendação, a maioria dos navegadores usam a tecla alt + tecla e/ou shift + alt + tecla

A maioria dos navegadores não suporta duplicar o atributo accesskey. Por exemplo, uma página não pode ter dois atalhos com accesskey = "N". A maioria dos irá ignorar um dos atalhos. Alguns navegadores vão ignorar a primeira accesskey, e outros navegadores ignoram a segunda instância. O navegador que aceita accesskey duplicado é o Internet Explorer.

Exemplo atributo accesskey

<nav>
    <p>
        <a href="http://www.google.com.br" accesskey="G">Google</a>
        <a href="http://www.yahoo.com" accesskey="Y">Yahoo</a>
        <a href="http://www.facebook.com" accesskey="F">Facebook</a>
    </p>
</nav>

Na HTML5 o atributo accesskey pode conter uma série de atalhos, separados por espaços. Uma finalidade para isso é de assegurar que um atalho de teclado esteja disponível para dispositivos moveis também, aqueles que só possuem teclado com números. Assim é possível acrescentar um valor numérico no atributo accesskey além da letra, bastando o usuário digitar esse número para dar o foco no elemento. Veja a seguir que definimos a letra “s”, e em seguida, separado por um espaço, o número “0″.

<form action="/search">
 <label>Search: <input type="search" name="q" accesskey="s 0"></label>
 <input type="submit">
</form>

Você deve estar se perguntando, mas como meus usuários vão saber que inseri teclas de atalhos para meus elementos HTML. Raramente um usuário saberá que você atribuiu teclas de atalhos para os elementos. Para minimizar essa dificuldade você pode colocar um texto informando seus visitantes ou exibir para o usuário ao lado do elemento a tecla de atalho. Abaixo um CSS que insere ao lado do elemento a tecla de atalho escolhida para o elemento.

a[accesskey]:after, button[accesskey]:after, input[accesskey]:after,
label[accesskey]:after, legend[accesskey]:after, textarea[accesskey]:after {
	margin-left: 0.3em;
	content: "[" attr(accesskey) "]";
	}

Um site que implementa o uso desse atributo é o Acesso Digital. Esse site foi desenvolvido para oferecer total acessibilidade aos seus visitantes. Excelente para um bom exemplo de acessibilidade na Web.

Compatibilidade entre navegadores

O atributo accesskey é suportado em todos os principais navegadores em suas últimas versões, com exceção do navegador Opera que ainda não implementa tal funcionalidade.

Firefox usa a combinação de teclas shift + alt + tecla, já o Chrome shift + alt + tecla ou apenas alt+tecla.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

Fiz esse artigo reunindo sites inspiradores usando HTML5 e CSS3, exemplos brilhantes e para lá de criativos que demonstram o potencial dessas duas tecnologias, e claro, a habilidade e criatividade dos desenvolvedores. Esse post também serve como uma grande fonte de inspiração para você aplicar em seus projetos.

Apesar da linguagem HTML5 ainda não estar totalmente finalizada, há muitos projetos de sites utilizando essa linguagem, que promete revolucionar o modo que os desenvolvedores criam seus sites. Com a presença do HTML5 podemos eliminar a necessidades de plugins de terceiros, permite uma codificação mais semântica e limpa, entre outras vantagens.

Suporte para CSS3 está crescendo rapidamente, os principais navegadores já estão interpretando regras CSS3 (novos seletores, propriedades, etc).

1. Bent the Bodyguard

2. Bounty Bev

3. Digital Hands

4. Get Satisfaction

5. I am Jamie

6. Icaro Ferracini

7. Ivan Asetiawan

8. Matt Hewnsara

9. Mula Design

10. Nike Better World

11. Robedwards

12. Seamco

13. Vision 18

14. Walo

15. Web For Freaks

16. Readiness

17. Clearideaz

18. Scratch Radio

19. nzfestival

20. OK Cool

21. Zoocha

22. Portfolio Rui Molar’s

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• Validação de formulário com HTML5
• Como criar um layout de 3 colunas com CSS
• 50 ações incríveis para turbinar seu Photoshop
• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas

HTML5 evoluiu bastante e tem uma série de novidades entre elementos e atributos para formulários. Nesse artigo mostro um pouco sobre validação dos campos de um formulário. Acredito que em um futuro próximo os desenvolvedores não precisaram escrever o código de validação de formulário em JavaScript, por exemplo, já que os navegadores serão capazes de fazer tudo isso para nós.

Atributo required

Utilizamos esse atributo para informar ao navegador que um elemento do formulário é de preenchimento obrigatório, ou seja, o usuário não consegue enviar o formulário se não preencher o campo com o atributo required. Seu uso é exclusivo com os elementos input, select e textarea.

Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.

    <form method="post" action="">
    <label for="nome">Nome: </label><input id="nome" type=text required name=nome>
    <input type=submit value="OK">
    </form>

Abaixo mostro as mensagens de alerta nos seguintes navegadores: Google Chrome, Firefox e Opera. Perceba que cada fabricante estiliza a mensagem de forma diferente.

type=”email”

Atributo type de um input com a opção igual a email significa definir o campo para receber um endereço de e-mail válido. A forma de validação não verifica se o e-mail digitado realmente existe, mas sim se o formato está correto. Exemplo de um formato de email aceito: teste@teste.com.

<form method="post" action="">
    <label for="email">E-mail: </label><input id="email" type=email required name=email>
    <input type=submit value="OK">
    </form>

Alerta para o usuário caso não seja digitado nada no campo input.

Alerta para o usuário caso não seja digitado um formato de e-mail no campo input.

Um recurso CSS3 pode ser usando para identificar se o elemento do formulário recebeu ou não um dado válido. Esse recurso é o pseudoclasse :valid e :invalid

Assim que o usuário digitar um dado válido, o navegador altera o pseudoclasse de :invalid para :valid. No exemplo abaixo o campo inicia com uma cor de fundo avermelhada, assim que o usuário digitar um formato de e-mail o campo é alterado para verde.

Veja o CSS:

    #email:valid {background:#006600;color:#fff }
    #email:invalid {background:#990000; color:#fff}

type=”url”

Um campo input com type igual a url recebe apenas url’s no seu formato correto, ou seja, http://www.site.com, http://www.site.com.br etc.

    <form method="post" action="">
    <label for="site">Site: </label><input id="email" type=url required name=site>
    <input type=submit value="OK">
    </form>

Mensagem de alerta do navegador Chrome ao digitarmos uma url em um formato inválido.

pattern = “Expressão”

Com uso do atributo pattern você pode exigir que o usuário digite valores em um padrão feito com expressão regular, ou seja, o que for digitado no compo input deverá satisfazer a expressão regular criada pelo desenvolvedor.

Explicarei o atribudo criando uma expressão para entrada de um número de telefone. O valor inserido no campo de input deverá iniciar com (xx) logo terá um espaço em branco com uma sequência de quatro dígitos, um traço, e para terminar mais uma sequência de quatro dígitos, ficando assim: (xx) xxxx-xxxx.

Abaixo o código para criar a condição descrita acima.

<form>
   <label>Telefone: <input required name="tel" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
  </form>

\([0-9]{2}\) usuário deve digitar dois números de 0 até 9 entre parênteses.

[\s][0-9]{4}-[0-9]{4} um espaço e duas sequência de números divididas por um traço.

Em HTML5 há um valor para o atributo type que é o tel. Ao utilizar esse valor não há máscara de formatação ou validação, já que não há um padrão para números de telefones. Ele serve apenas para informar que o valor do campo é um número de telefone.

Abaixo outro exemplo utilizando o atributo pattern, agora validando CEP

<form>
   <label>CEP: <input required name="cep" pattern="[0-9]{5}-[0-9]{3}"></label> (xx) xxxx-xxxx
   <input type=submit value=Enviar>
</form>

novalidate=”novalidate”

Quando presente dentro do elemento form, especifica que os elementos do formulário não devem ser validados quando submetidos mesmo que tenham em seu type atributos iguais a email, url, etc.

<form action=" " novalidate="novalidate">
  <label>nome: <input name="nome" required></label>
  <label>email: <input name="email" type="email" required></label>
  <input type="submit" name="action" value="Enviar">
</form>

No exemplo acima mesmo que o usuário clique no botão enviar sem preencher os campos com required o formulário será submetido. Isso porque passamos o valor novalidate="novalidate".

Compatibilidade entre navegadores

Pelos testes que fiz a validação funcionou perfeitamente nos navegadores Chrome, Opera e Firefox em suas últimas versões. Navegadores como Safari e Internet Explorer não foram capazes de reconhecer tais elementos da HTML5.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como usar o elemento SECTION do HTML5
• Como criar um layout de 3 colunas com CSS
• Como usar o elemento NAV do HTML5

<div class="container">
	<div class="box"><div class="cover_pan"></div>
</div>

Aplicamos no elemento marcado com a class box uma imagem de fundo (404.png). Ela funcionará como uma máscara.

body {color: #fff; margin: 0;background: url(img/texture.png) repeat;}
.container {width: 960px;margin:50px auto; text-align: center; font: 13px/22px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #000;}
.box {
	background: url(img/404.png) no-repeat 0 0;
	border-bottom: 5px solid #000;
	height: 343px;
	margin-bottom: 25px;
 	padding-bottom: 50px;
}

O código CSS abaixo é responsável por fazer grande parte da animação. Definimos a imagem que será rolada no fundo, nesse caso a imagem covers.jpg, definimos o tempo da animação e que a mesma será de forma contínua, ficará em um loop infinito.

.cover_pan{
	background: #fff url(img/covers.jpg) repeat 1055px bottom;
	height: 343px;
	margin-left:1px;
	overflow: hidden;
	position: relative;
	width:99.5%;
	z-index: -1;

	-moz-animation-name: pan;
	-moz-animation-duration:40s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;

	-webkit-animation-name: pan;
	-webkit-animation-duration:40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

Esta é uma das implementações mais simples do código que você terá que aplicar. Estamos deslizando a posição de fundo. Cover_pan da direita para a esquerda.

@-moz-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

@-webkit-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

Você pode baixar arquivos usados neste tutorial para estudar.
Artigo Original.
Me siga no Twitter: @kadunew
Forte abraço!

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• Suporte dos navegadores para propriedades CSS3
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS

BraUp

Artigo escrito por Renan Dequêch Ferreira.

Olá pessoal, nesta quarta-feira eu vou apresentar uma novidade que vocês devem achar interessante, é o BraUp.com. O BraUp.com é uma ferramenta gratuita para Web Designers, criada para melhorar a forma como se apresentam layouts ao cliente.

Funciona assim: você faz upload do layout e manda o link para o cliente. Ele acessa e a vê o layout direto no navegador. Essa forma acaba ficando mais eficiente porque o cliente tem a visão clara de como o layout vai ficar na tela, não precisa fazer download do arquivo e pode enviar o link para outras pessoas.

Acesse o site BraUp e comece agora mesmo a enviar seus layouts.

É bastante simples e funciona com um só botão.
Espero que gostem!

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS
• A importância do HTML semântico
• Mais de 600 Brushes com efeito de luz para Photoshop

Ao longo do tempo algumas convenções práticas têm sido desenvolvidas para ajudar a melhorar a usabilidade dos sites em geral, durante a sua concepção e construção. Este resumo de dez crimes de usabilidade destaca alguns dos erros mais comuns entre Web Designers e fornece uma solução alternativa para ajudar a melhorar a usabilidade do seu site.

O site line25 fez uma lista tempos atrás de 10 Crimes de usabilidade que você não deve cometer, achei interessante e resolvi divulgá-las aqui no blog com algumas adaptações.

Não associar label à campos de formulários

Associando label em formulários

Usando o atributo for permite que o usuário clique no rótulo para selecionar os campos de entrada apropriado dentro de um formulário HTML. Isto é especialmente importante para caixas e campos de rádio, dando assim uma maior área clicável para o usuário.

Dessa forma o usuário pode clicar diretamente no campo do formulário (por exemplo, botão de rádio e checkbox) ou na palavra (label) para marcar esse elemento. Isso tem também um grande peso para a acessibilidade em formulários.

Um logotipo que não linka para a página inicial

Logo com link para página inicial

Linkar o logotipo de um site para a página inicial se tornou prática comum, e agora é natural para a maioria dos internautas clicarem sobre o logotipo para voltar a página inicial do site. Também vale a pena mencionar o logotipo deve aparecer na parte superior esquerda. Todo site deve ter um link que leve seu visitante a a página de entrada do site, no caso a página inicial. Isso já é um requisito básico de usabilidade em web sites.

Não destacar os links visitados

Destacar os links visitados

É uma boa prática destacar os links que o usuário já visitou no seu site, principalmente em sites com grande conteúdo onde o seu visitante visitará uma grande quantidade de links. Creio que epenas em sites desse tipo deve ser empregada a técnica.

Destacando os links visitados fica evidente para o usuário as páginas que ele já visitou. Para fazer isso não precisamos de uma regra CSS avançada, porém ela é muitas vezes esquecida pelos desenvolvedores de sites. Não esqueça, sempre mostre aos seus visitantes por onde ele já passou.

Não destacar campos ativos

Elementos ativo em formulários HTML

Você pode usar o seletor focus em vários elementos HTML, mas é super útil quando usado em inputs e textareas de formulários para indicar que o campo está ativo. Utilizando CSS você pode estilizar facilmente esses elementos com uma cor de fundo diferente, uma borda com uma espessura maior, etc.

Imagem sem descrição alt e title

Atributos alt e title

Muitos não sabem a Importância do atributo alt e title. Utilizar o atributo alt no elemento img do HTML não é só bom para a usabilidade quanto também para a acessibilidade e ainda para a otimização de imagens. Lembre-se sempre de adicionar um atributo alt descritivos para suas imagens.

Imagens que tem por finalidade montar seu layout não há necessidade de por esse atributo, até porque as imagens que são inseridas no site com intuito de design devem ser inseridas via CSS, nesse caso não tem como descrevê-las no atributo alt.

Outro atributo importante é o atributo title, ele pode ser usando em links de imagens do tipo ícone, através dele podemos ter uma descrição desse link. Um exemplo é um ícone de um envelope, o title poderia ser “e-mail”.

Imagem de fundo, sem uma cor de fundo

Cor fundo nas imagens

É comum a utilização de imagens de fundo por trás do texto, mas vale a pena lembrar que se as imagens estão desativadas pelo usuário ou simplesmente não carregam, é necessário que haja um tom semelhante na forma de uma cor de fundo para evitar que o texto se torne ilegível. Um exemplo é você ter uma imagem escura de fundo e um texto branco sobre a imagem. Caso essa imagem não seja carregada pelo navegador seria interessante ter uma cor escura no fundo desse elemento, pois assim o visitante do seu site conseguirá ler o conteúdo sem problemas.

Textos longos no conteúdo

Conteúdo longo

Não há nada mais desanimador do que entrar em uma página onde há textos extremamente gigantes, sem títulos, subtítulos e imagens.

Divida o seu conteúdo com imagens, títulos e seções claras para facilitar a leitura do seu visitante. Praticamente ninguém lê textos desse tipo na Web. Saiba como escrever para web, isso é fundamental.

Sublinhar textos que não são links

Texto sublinhado

Todo mundo sabe que o texto que está sublinhado, e está em uma cor diferente é muito provável que seja um link. Não vá confundir as pessoas que visitam seu site colocando texto sublinhado onde não seja link.

Se quer destacar algo, chamar a atenção para uma determinada palavra, tente usar o negrito (strong), é bem melhor.

Utilização de textos justificados

texto justificado

Esta é outra dica que está indo um pouco mais para o lado da acessibilidade, mas também é um ponto importante a considerar. Texto justificado pode gerar alguns problemas de legibilidade, particularmente para os usuários disléxicos (lêem com dificuldade) que podem não conseguir identificar as palavras e letras corretamente, devido ao espaçamento desigual dos parágrafos justificados. Prefira textos alinhados à esquerda a textos justificados.

Não utilizar espaçamentos entre linhas

Espaçamento entre linhas

Utilizando a propriedade line-height do CSS conseguimos criar um espaçamento entre as linhas em um parágrafo, com isso a facilidade de leitura aumenta. Seguido entro em sites onde as linhas estão muito próximas, em terminar de ler uma linha encontro um pouco de dificuldade em ir para a próxima. Textos com espaçamentos adequados são lidos mais rapidamente dos que não tem espaçamento.

Não usar uma navegação breadcrumbs – migalhas de pão

Crie uma navegação secundária, migalhas de pão

As migalhas de pão são utilizadas para mostrar o caminho da página inicial até a página que o visitante está no exato momento. Isso funciona como um esquema de navegação secundária. Você deve usar as migalhas de pão sempre que um site tiver uma hierarquia muito profunda de páginas.

O link original do artigo pode ser conferido em 10 Usability Crimes You Really Shouldn’t Commit

Me siga no Twitter: @kadunew

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS
• A importância do HTML semântico
• Mais de 600 Brushes com efeito de luz para Photoshop

Ferramentas para web designers

Hoje em dia existem muitas ferramentas para Web Designers que podem facilmente serem encontradas na internet. Muitas dessas ferramentas servem para realizar tarefas com facilidade e rapidez. Cada desenvolvedor tem sua lista de ferramentas, hoje vou mostrar algumas das ferramentas que uso no meu dia a dia.

Confira algumas dessas ferramentas abaixo, algumas delas vão melhorar sua produtividade durante seu trabalho.

Typetester

Aplicativo para fazer a compação de fontes. As fontes disponíveis são as mais comununs, entre elas, arial, verdana, Georgia. Além de trocar de fonte você pode escolher tamanho, cores e outras configurações…

typetester comparador de fontes

Icon Finder

O uso de ícones em trabalhos impressos e em sites estão cada vez maior. Para achar seus ícones nada melhor que um buscador de icones.

Site de busca de Icones

Rounded Corner

Esse aplicativo gera um código HTML e CSS para simular uma div com cantos arredondados utilizando imagens. O aplicativo vai criar quatro arquivos de imagem, os htmls necessários e o código CSS para colocar cantos arredondados em torno do seu conteúdo. Essa técnica já se encontra ultrapassada uma vez que podemos fazer uso das propriedades CSS3 para tal finalidade.

Rounded Corner

Vecteezy

Obtenha gratuitamente gráficos vetoriais.

Vecteezy gráficos vetoriais

Photoshop Brushes

Pincéis (Brushes) photoshop é uma ótima maneira de acrescentar um toque de beleza e profissionalismo em seus trabalhos. Para pesquisar os pincéis você pode utilizar a opção de filtro e também a opção de versões do aplicativo.

Site com diversos Brushes para photoshop

CSS3 Made Simple

CSS3 Generator - Gerador css3

A grande maioria dos navegadores hoje em dia já tem suporte às propriedades CSS3. Pensando nisso o site CSS3 Generator desenvolveu um aplicativo online capaz de gerar as principais propriedades CSS3 sem a necessidade do desenvolvedor, ou Web Designer saber essas propriedades.

Para usar a ferramenta você seleciona um tipo de efeito que você está tentando criar a partir de uma lista drop-down, modifica algumas configurações e obtém um bloco de código CSS para copiar. Os efeitos incluem cantos arredondados, sombras, gradientes, etc.

Galeria de Inspiração para Web Designer

Uma situação muito comum principalmente para quem trabalha com Design é a falta de criatividade para desenhar seus layouts, ilustrações, etc. Quem já não ficou por horas em frente ao Photoshop com a página branca, sem saber que cor usar, que desenho fazer… Nessas situações é interessante dar uma olhada em “galerias de inspirações para Web Design”, que nada mais são que uma coleção de trabalhos. Esses tipos de sites têm sido extremamente influentes na escolha de Layouts para os projetos dos Designers.

Galeria de Inspiração para Web Designers

Galeria de Inspiração de CSS

Quem trabalha com Internet sabe o poder das CSS. Esse site reúne uma coleção de sites onde o destaque fica por parte das famosas folhas de estilos, o site também pode ser usado como uma fonte de inspiração para desenhar seus layouts.

CSS drive - Galeria css

Me siga no Twitter: @kadunew

Isso vai interessar você também

• 10 ferramentas para verificar a velocidade de abertura do seu site
• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS
• A importância do HTML semântico

O que é erro 404?

Abaixo uma breve descrição sobre o erro 404:

Exemplos de páginas 404 personalizadas

1. Jackfig

2. Jhuskisson

3. Slonky

4. Frye / Wiles

5. Apadeloup

6. Blizzard

7. Black Moon Design

8. Deaxon

9. impactideas

10. duoh

11. Heinz

12. MailChimp

13. The Web Motel

14. Shelfworthy

15. Leap Anywhere

16. deviantART

17. Cuoma Design Studios

18. Rockettheme

19. Ferdaze

20. ClubPenguin

Me siga no Twitter: @kadunew

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• Como criar um layout de 3 colunas com CSS
• A importância do HTML semântico
• Mais de 600 Brushes com efeito de luz para Photoshop

Tutorial demonstrando como criar um Layout CSS com 3 colunas.

Existem dois tipos principais de layouts com CSS: largura fixa e de largura variável (conhecido também como, layout líquido ou layout fluido), esse último o site se ajusta ao tamanho da janela do navegador do usuário. Outra coisa que se pode fazer é deixar a coluna do conteúdo como uma largura variável e as colunas ao lado fixa. Nesse artigo vou mostrar como criar um layout fixo de 3 colunas.

Um usuário com uma resolução menor do que a largura do layout verá uma barra de rolagem na horizontal do seu navegador. Se a resolução do monitor for maior que a largura definida no layout aparecerá espaços vazios na tela. Neste caso é interessante que o desenvolvedor centralize o layout, para os espaços vazios aparecerem nos dois lados do site.

Vale lembrar também que, usando CSS para formatar as suas páginas, no lugar de tabelas, fica muito mais prático para alterar o layout do seu site, alteramos apenas pelo arquivo CSS, além disso, seu site irá carregar mais rápido.

Layout de três colunas é muito comum, já que permite deixar a navegação à esquerda, o conteúdo no meio, e a publicidade, links, logos… à direita.

Estrutura do HTML para três colunas

<div id="geral">
    <div id="cabecalho"></div>
    <div id="principal">
        <div id="conteudo-1"></div>
        <div id="conteudo-2">
            <div id="conteudo-2-1"></div>
            <div id="conteudo-2-2"></div>
        </div>
    </div>
    <div id="rodape"></div>
</div>

Acima temos a marcação necessária para a criação das três colunas. Repare que criamos uma div chamada de conteudo-2 que serve como um box para englobar as divs conteudo-2-1 e conteudo-2-2. A seguir detalhes da estrutura HTML usada.

Resultado da nossa marcação HTML

Agora dê uma olhada em como o navegador renderiza o documento sem estilos, apenas com nossa marcação HTML. Para facilitar a visualização inseri um pouco de conteúdo dentro das colunas.

Definindo a largura e cores de fundo das colunas

Agora vamos adicionar um pouco de CSS básico para tornar mais fácil o entendimento do que estamos fazendo. A seguir deixamos uma largura fixa igual a 960px e centralizamos horizontalmente o layout. Coloquei também algumas cores de fundo para facilitar a montagem do layout com 3 colunas.

body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#geral {
    width:960px;
    margin:0 auto;
    background:#ddd;
}
#cabecalho {
    background:#fdd;
}
# conteudo-1 {
    background:#bfb;
}
#conteudo-2-1 {
    background:#ddf;
}
#conteudo-2-2 {
    background:#dff;
}
#rodape {
    background:#ff9;
}

Veja como ficou nosso layout depois de definir a largura da div #geral. Todos os elementos são empilhados verticalmente em uma única coluna.

Criando as duas primeiras colunas

Para começar a criar as colunas, vamos definir a largura das divs #conteudo-1 e #conteudo-2 e flutuá-las em direções opostas, ou seja, uma para esquerda e outra para a direita.

#conteudo-1 {
    float:left;
    width:240px;
    background:#bfb;
}
#conteudo-2 {
    float:right;
    width:720px;
}

Veja como está funcionando nosso layout de 3 colunas.
O rodapé parece estranho, nesta fase, mas isso será corrigido mais tarde.

Deixando as colunas lado a lado

Para deixar os elementos #conteudo-2-1 e #conteudo-2-2 em colunas, tudo o que precisamos fazer é repetir o que fizemos antes, ou seja, dar as larguras aos elementos utilizando float em direções opostas, veja o código abaixo.

#conteudo-2-1 {
    float:left;
    width:480px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    width:240px;
    background:#dff;
}

Temos agora as três colunas que queríamos, #conteudo-1 para a esquerda, #conteudo-2-1 no meio, e #conteudo-2-2 para a direita.

Arrumando o rodapé, colocando o rodapé no seu lugar

A div do #rodape é exibida atualmente abaixo do #conteudo-1 , que não é onde queremos que fique. Existem diferentes formas de empurrá-la abaixo das três colunas, mas a maneira mais simples é usar clear: both.

Essa propriedade do CSS diz que não podemos ter elementos flutuando a esquerda e nem a direita desse elemento, no caso a div #rodape.

#rodape {
    clear:both;/*posicionando o rodape abaixo das outras divs*/
    background:#ff9;
}

Organizando os elementos do layout

Para tornar a página de demonstração final melhor de ser visualizada vamos dar uns espaçamentos utilizando a propriedade padding do CSS. Veja como ficou a folha de estilos. Atenção para as modificações feitas na largura (propriedade width:) das divs #conteudo-1 e #conteudo-2-2. Diminuímos a largura porque colocamos um espaçamento, caso não tivéssemos diminuído a largura desses elementos o layout “quebraria” (as colunas não ficariam uma ao lado da outra). Uma outra solução seria aumentar a largura da div #geral.

#cabecalho {
    padding:10px;
    background:#fdd;
}
# conteudo-1 {
    float:left;
     /* diminuimos a largura para não quebrar o layout.
      * valor antigo 220
      */
    width:210px;
    padding:10px;
    background:#bfb;
}
#conteudo-2-1 {
    float:left;
    width:460px;
    padding:10px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    /*diminuimos a largura para não quebrar o layout
    * valor antigo 220
    */
    width:200px;
    padding:10px;
    background:#dff;
}
#rodape {
    clear:both;
    padding:10px;
    background:#ff9;
}

Confira o resultado final do layout com 3 colunas.

Fique por dentro de todas atualizações aqui do site: Twitter: @kadunew
Abraço e até a próxima!

Isso vai interessar você também

• 22 web sites desenvolvidos com HTML5 e CSS3
• HTML5 – Acessibilidade com o Atributo accesskey
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramentas CSS3 online para Web Designers
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Mostrar legenda ao passar o mouse sobre imagens

Por que devo USAR o HTML semântico?

Você poderia simplesmente dizer: “porque é a coisa certa para a web“, mas os benefícios vão muito além disso. Por exemplo, torna mais fácil para os leitores de tela interpretar as informações de um web site para os usuários com deficiência visual.

SEO e HTML semântico são amigos próximos. O objetivo do SEO é ajudar os motores de busca entender melhor sobre o que se trata o conteúdo de uma página e classificá-la melhor. Um robô de busca basicamente tem capacidades ainda menores do que um leitor de tela.

Não devemos, por exemplo, utilizar as tags p nunca deve ser utilizada para aplicar espaço a uma página web. Este elemento do HTML deve ser utilizado unicamente para indicar (marcar) parágrafos.

Estrutura das página

Uma página consiste em um título, um ou mais subtítulos e conteúdo. Este conteúdo pode conter parágrafos, listas, citações, imagens e tabelas. Todos estes tipos de informação têm sua própria marca, que são os elementos HTML.

Separar apresentação do conteúdo

As tags HTML nunca devem ser usadas para aplicar a apresentação, tais como: cor da fonte, tamanho da fonte, alinhamento e por aí vai… Isso tudo é trabalho das CSS (Cascading Style Sheets). A algum tempo escrevi sobre Elementos HTML em desuso onde cito vários elementos que foram descontinuados.

Títulos (cabeçalhos) h1 até h6

Um bom documento tem títulos e subtítulos. Estas posições variam em importância, iniciando por H1 (título mais relevante da página) até H6 (título menos importante da página). Não lembro de ter visto em um site escrito de forma semântica o uso dos elementos H5 e H6, no máximo o uso até o nível H4.

Seguindo uma semântica rigorosa, sugiro que você deva ter apenas um H1 por página. Vejo muitos sites utilizando o elemento H1 para marcar o nome do site. Provavelmente no seu site cada página terá um assunto especifico, neste caso escolha por marcar o título do assunto como sendo o título principal da página, ou seja, marcar com H1.

Para otimização de uma página é fundamental que a palavra-chave da página esteja dentro do elemento H1 e ainda em outras posições da página como links, parágrafos, etc.

Imagens

Imagens são usadas de todas as formas dentro de documentos, e você deve aplicar a semântica adequada para elas. O atributo alt deve ser usado se a imagem acrescenta significado ao documento. Este deve descrever o que a imagem está mostrando.

Se você estiver usando imagens para substituir o texto, certifique-se que você esteja usando um texto também em seu HTML. Para isso use CSS. Você tem que fazer isso porque tanto as pessoas com deficiências visuais e motores de busca não podem ler o texto em suas imagens. Para aplicar este método deixo o mesmo texto que está escrito na imagem no meu HTML. No CSS escondo o texto usando text-indent com um valor negativo (Exemplo -1000px). Tenha cuidado, usando esta técnica você corre o risco de ser punido pelos buscadores.

Abreviaturas e siglas

Sempre que usar uma sigla em seus textos ou artigos utilize o abbr para descrever o significado de tal sigla. Isso é bom para a densidade de palavras-chave também!

Tabelas

Tabelas não devem ser usadas para estruturação de layouts, apenas para dados tabulares. Caso você monte seu site utilizando tabelas, o usuário que acessar seu site com um leitor de telas terá uma enorme dificuldade em entender o conteúdo fornecido por você. Abaixo algumas dicas para utilização de tabelas.

Devo utilizar Frames?

Muito simples: NÃO USE. Motores de Busca e principalmente leitores de telas tem certa dificuldade em trabalhar com página desse tipo.

Conclusão

Usando html semântico para marcar suas páginas, você pode criar páginas que são mais acessíveis, tanto para as pessoas com deficiência, bem como aos motores de busca. Marcação semântica ajuda os motores de busca determinar qual é a relevância do conteúdo de uma página.

Quer ter um site acessível aos motores de busca e acima de tudo aos leitores de tela? Use o HTML semântico sempre.

Referência
Semantic HTML and Search Engine Optimization e semantic-html.

Isso vai interessar você também

• HTML5 – Acessibilidade com o Atributo accesskey
• 22 web sites desenvolvidos com HTML5 e CSS3
• Validação de formulário com HTML5
• Página de erro 404 animada com CSS
• Ferramenta para Upload de layouts
• 10 Crimes de usabilidade que você não deve cometer
• Ferramentas online para Web Designers
• 20 exemplos de páginas de erro 404 criativas
• Como criar um layout de 3 colunas com CSS
• Mais de 600 Brushes com efeito de luz para Photoshop