Página de erro 404 personalizada

Hoje será algo bem básico e simples, como  criar uma página de erro 404 usando o .htaccess.

404-errado

Normalmente as páginas de erros dos navegadores são bem sem graça.

A página 404 (página não encontrada) pode (e deve) ser usada para se comunicar com os visitantes de forma mais simpática.

1º passo – crie uma página html do jeito que você ache legal.

A minha ficou assim:

pagina 404

2º passo – se na raiz do seu site não existir um arquivo .htaccess crie um  (basta abrir o bloco de notas e criar um arquivo sem nome, mas com a extensão .htaccess)

3º passo – coloque esse código nele e salve :
ErrorDocument 404 /nome-da-pagina-que-voce-criou.html

4º passo – Não tem, já está pronto. Fácil, né?

 

Até a próxima.

Foi útil? Divulgue.Tweet about this on TwitterShare on FacebookShare on Google+Email this to someone

Leia Mais

Acessibilidade Web: Custo ou Benefício?

Este texto sobre Acessibilidade Web foi escrito em 30 novembro 2010 e ainda continua atual (infelizmente)… >=(

A expressão “acessibilidade”, presente em diversas áreas de atividade, tem também na informática um importante significado.
Não é fácil avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar:

1. Incapacidade de ver, ouvir e interpretar certos tipos de informação;

2. Dificuldade visual para ler ou compreender textos.;

3. Incapacidade para usar o teclado ou o mouse, ou não dispor deles;

4. Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet;

5. Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito;

6. Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos habituais, ou por voz ou sistema operacional menos difundido.

Nós, desenvolvedores, temos por obrigação modificar essa realidade. Não estou discutindo aqui o uso ou não de um “alt” bem feito, mas seguir parâmetros e normas que possibilitem tornar isso uma regra e não exceção.

Afinal, se por um lado se abrem oportunidades de acesso para mais gente, isso quer dizer que mais gente (leia-se consumidores em potencial) terá oportunidade de interagir com as informações e oportunidades disponíveis.

Vejam o vídeo abaixo, realmente impactante:

De volta, apesar de trabalhar com web já há algum tempo achava que a necessidade de pensarmos em padrões de acessibilidade seria uma realidade, mas não agora e sim em alguns anos. A merda é que nos esquecemos que essa necessidade é real e atual. Quantas pessoas estão por ai, frustradas, por não terem a oportunidade de interagir com a web como eu ou você?
Pensem nisso…

Foi útil? Divulgue.Tweet about this on TwitterShare on FacebookShare on Google+Email this to someone

Leia Mais

HTML/CSS -Como fazer uma “etiqueta” para seu site ou blog

Etiqueta no website/blog

Há alguns dias estava teclando com o Bruno Palermo (um amigo  game designer) sobre algo que fosse simples de implementar (apenas com HTML/CSS) e  ao mesmo tempo desse um efeito bonito nas páginas, então ele teve a idéia das “etiquetas”. A coisa é tão simples que você se pergunta como não pensou nisso antes. O segredo está em deixar uma imagem fixa na lateral com um z-index alto para que se sobreponha sobre todo o conteúdo do site. Como o meu logo (também idéia do Bruno) que fica aqui na lateral direita do blog. Bora lá…

No CSS:

#etiqueta {    
position: fixed;    
top: 250px;    
width: 40px;/*largura na imagem*/    
z-index: 100;    
right: 2px;}

No HTML
<p>
<br />
<div id="etiqueta">
<img alt="" title="" src="endereco da sua imagem"/>
</div>
<br />
</p>

Não é fácil?
Eu coloque imediatamente após a tag, mas não faz diferença pois o z-index mais alto que todo o conteúdo garante que ele não interfira com nada (claro que você deve garantir que ele não fique em cima de textos etc)
Até a próxima…

Foi útil? Divulgue.Tweet about this on TwitterShare on FacebookShare on Google+Email this to someone

Leia Mais