domingo, 26 de julho de 2009
sábado, 25 de julho de 2009
Brasil - pattern de renda
sexta-feira, 24 de julho de 2009
Usando pattern
terça-feira, 21 de julho de 2009
Pattern
segunda-feira, 20 de julho de 2009
domingo, 19 de julho de 2009
quarta-feira, 8 de julho de 2009
Acessibilidade – Uma questão de ser humano
Mesmo que façamos um site, ou blog, como amadores, por diversão ou qualquer outro motivo, é muito importante lembrarmos que muita gente não consegue ter acesso a grande parte do conteúdo na web. Na hora de se fazer um site é sempre bom lembrar das pessoas com problemas ou mesmo pequenas deficiências de visão, auditivas ou motoras. Lembrar das crianças, idosos e pessoas que estão começando a navegar, geralmente elas não manuseiam o mouse com facilidade e se sentem perdidas nesse novo ambiente da internete.
Além disso, alguns cuidados melhoram o site para todos, pois somos seres humanos e não máquinas. Mesmo os mais experientes dos internautas gostam de algumas comodidades.
Mas como podemos melhorar o nosso site para todos???
Aqui vão algumas dicas bem fáceis:
IMAGENS
Sempre use o “alt”.
Pessoas com alguma ou total deficiência de visão, usarão programas para ler a tela (). Tais programas irão descrever a imagem lendo o que estiver no “alt”.
Exemplo: Num site onde vou usar uma imagem como logo. Como fica o código:
Mas e se a imagem for somente um enfeite?
Mesmo assim use o “alt”. Sempre use o “alt” !!! rs
Só que nesse caso use o alt sem nada escrito.
Se o leitor de tela encontrar uma imagem sem alt, ele informará que encontrou uma imagem, mas a pessoa vai ficar na curiosidade, pois não saberá de q era a imagem.
Se o leitor de tela encontrar uma imagem com o alt vazio, ele não informará nada.
AUDIOS e VÍDEOS
Sempre disponibilize um conteúdo escrito.
Por exemplo, no caso de uma música, coloque a letra da música ou um link para a mesma.
No caso de um vídeo, sempre prefira os legendados.
Mesmo se o vídeo for em português??? Isso mesmo! Lembre-se dos surdos. Podemos colocar o vídeo que desejamos e próximo a ele um link alternativo para um vídeo em português com legenda em português. Ou colocar um texto com o conteúdo do áudio.
FORMULÁRIOS
Sempre use o elemento <label>
O label “une”, “associa” um texto a um campo de formulário. Ex:
No caso de um cego usando um leitor de tela, esse “E-mail” será lido como o texto referente a esse campo de formulário.
Assessibilidade é bom para todos!!! Até para os mais comuns e experientes internautas!
Isso fica muito claro nos casos de checkbox e de radiobuton. É bem mais cômodo poder clicar em qualquer parte do texto referente ao campo,do que ficar restrito a pequena área desses campos. Lembre-se das pessoas com deficiência motora, ou das que estão começando e não possuem muita “intimidade” com o mouse.
Exemplo:
Perceba a diferença clicando nos textos abaixo:
FOQUE
Cegos e pessoas com dificuldade motora não usam o mouse!
Teste seu site. Deixe seu mouse de lado e navegue usando o teclado, com tab, shift-tab e return.
Use “focus” no seu arquvo CSS
Exemplo:
Assim, sempre que seu link ou formulário estiver selecionado, uma alteração será percebida facilitando a navegação até dos usuários mais experientes.
SEJA CLARO
Cegos navegam de link em link usando a tecla tab. Assim ele vai chegar em links do tipo: “saiba mais” e “clique aqui” sem passar pela leitura do texto anterior ao link.
Nesses casos use o atributo title para descrever o link.
Exemplo:
Além disso, alguns cuidados melhoram o site para todos, pois somos seres humanos e não máquinas. Mesmo os mais experientes dos internautas gostam de algumas comodidades.
Mas como podemos melhorar o nosso site para todos???
Aqui vão algumas dicas bem fáceis:
IMAGENS
Sempre use o “alt”.
Pessoas com alguma ou total deficiência de visão, usarão programas para ler a tela (). Tais programas irão descrever a imagem lendo o que estiver no “alt”.
Exemplo: Num site onde vou usar uma imagem como logo. Como fica o código:
<img src="caminho/da_imagem.jpg" alt="Descrição da imagem, nesse exemplo: Logotipo da empresa" />
Mas e se a imagem for somente um enfeite?
Mesmo assim use o “alt”. Sempre use o “alt” !!! rs
Só que nesse caso use o alt sem nada escrito.
<img src="caminho/da_imagem.jpg" alt="" />
Se o leitor de tela encontrar uma imagem sem alt, ele informará que encontrou uma imagem, mas a pessoa vai ficar na curiosidade, pois não saberá de q era a imagem.
Se o leitor de tela encontrar uma imagem com o alt vazio, ele não informará nada.
AUDIOS e VÍDEOS
Sempre disponibilize um conteúdo escrito.
Por exemplo, no caso de uma música, coloque a letra da música ou um link para a mesma.
No caso de um vídeo, sempre prefira os legendados.
Mesmo se o vídeo for em português??? Isso mesmo! Lembre-se dos surdos. Podemos colocar o vídeo que desejamos e próximo a ele um link alternativo para um vídeo em português com legenda em português. Ou colocar um texto com o conteúdo do áudio.
FORMULÁRIOS
Sempre use o elemento <label>
O label “une”, “associa” um texto a um campo de formulário. Ex:
<label>E-mail
<input type="text" name="email" id="email" />
</label>
No caso de um cego usando um leitor de tela, esse “E-mail” será lido como o texto referente a esse campo de formulário.
Assessibilidade é bom para todos!!! Até para os mais comuns e experientes internautas!
Isso fica muito claro nos casos de checkbox e de radiobuton. É bem mais cômodo poder clicar em qualquer parte do texto referente ao campo,do que ficar restrito a pequena área desses campos. Lembre-se das pessoas com deficiência motora, ou das que estão começando e não possuem muita “intimidade” com o mouse.
Exemplo:
<label>
<input type="checkbox" name="marcar" id="id" /> Sim eu quero melhorar a acessibilidade do meu site!
</label>
Perceba a diferença clicando nos textos abaixo:
FOQUE
Cegos e pessoas com dificuldade motora não usam o mouse!
Teste seu site. Deixe seu mouse de lado e navegue usando o teclado, com tab, shift-tab e return.
Use “focus” no seu arquvo CSS
Exemplo:
a:focus {outline:#333 dashed 1px;}
input, textarea {
border:#666 solid 1px;
background:#EEE;}
input:focus, textarea:focus {background-color:#ddd; border:#666 1px inset;}
Assim, sempre que seu link ou formulário estiver selecionado, uma alteração será percebida facilitando a navegação até dos usuários mais experientes.
SEJA CLARO
Cegos navegam de link em link usando a tecla tab. Assim ele vai chegar em links do tipo: “saiba mais” e “clique aqui” sem passar pela leitura do texto anterior ao link.
Nesses casos use o atributo title para descrever o link.
Exemplo:
<a href="noticia356.html" title="Título da notícia">Saiba mais</a>
terça-feira, 7 de julho de 2009
Patterns - Um bom fundo pode transformar seu layout
Na criação do layout, as vezes nos concentramos no conteúdo, nas cores, no Logo,... Mas, não raro, o que faz a grande diferença e passa profissionalismo são mesmo os detalhes. O fundo, menosprezado por alguns, pode ser o grande diferencial, o que "fechará com chave de ouro" o seu layout.
Uma solução simples e bela, não só para o fundo, mas para certas áreas de um layout é o uso de patterns.
Uma busca simples na internete por pattern traz uma variedade incrivel de possibilidades.
Existem alguns sites dedicados a isso, como por exemplo:
http://patterns.ava7.com/
http://www.patternhead.com/
E outros espalhados por ai, como por exemplo esses no deviantArt:
Madeira, Metal, Cutie, Retro Grunge
, That's My Dad e Summer Pattern Pack, dentre outros.
Uma solução simples e bela, não só para o fundo, mas para certas áreas de um layout é o uso de patterns.
Uma busca simples na internete por pattern traz uma variedade incrivel de possibilidades.
Existem alguns sites dedicados a isso, como por exemplo:
http://patterns.ava7.com/
http://www.patternhead.com/
E outros espalhados por ai, como por exemplo esses no deviantArt:
Madeira, Metal, Cutie, Retro Grunge
, That's My Dad e Summer Pattern Pack, dentre outros.
Assinar:
Postagens (Atom)