Foto de formatura

Brasil - pattern de renda

As populares rendas brasileiras invadem o photoshop. Que por sua vez, invade as rendas com os seus efeitos, transformando totalmente as patterns.

As populares rendas brasileiras invadem o photoshop. Que por sua vez, invade as rendas com os seus efeitos, transformando totalmente as patterns.

Usando pattern

Uma pattern pode gerar visuais muito diferentes. Mudando apenas a opacidade da parttern e o seu tamanho, já se consegue uma grande variedade de resultados. Gradientes, alterações de cores e inversões também podem dar ótimos resultados.

Pattern

A primeira é a aplicação simples da pattern. As outras 4 tonalidades acima foram conseguidas usando a opacidade da pattern abaixo em 40%.As cores dos retangulos nos quais foram aplicados a pattern foram: #480101 , #0e0246 , #330144 e #693b0e.

Enegrecendo

Mãe

Imagem comemorativa


Imagem original:

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:

<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:

Com label – Pode clicar aqui no texto

Sem label – Só pode clicar no checkbox

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>

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.