As imagens no nosso site são fundamental para o design da nossa Home, grande parte dos sites em tableless utiliza poucas imagens, explorando mais os recursos do XHTML criando sites com um design não muito agradável, uma vez um programador me disse: “Michel você cria layouts que não olha o lado do cara que irá estruturá-lo em tableless”.
A estrutura em tableless de um site realmente é trabalhosa, mais afetar o nosso design para criar uma estrutura fácil é o mesmo que retroceder o serviço e perder o foco totalmente. O que mais me chamou a atenção na época quando estava aprendendo tableless era criar um layout lindo sem nada ficar de fora, você já imaginou um menu em imagem e ter que transformá-lo em texto devido a acessibilidade web??
Com conhecimento de CSS é possível inserir imagens no XHTML só que no código fonte ser texto, veja o exemplo do meu site www.michelferreira.com , o meu menu é todo texto só que eu puxo as imagens através do CSS, com um pouco de inteligência e criatividade é possível criar páginas semânticas com imagens, vamos ver alguns exemplos do que se encontra na web atualmente:
<img src=”meucliente.jpg” alt=”foto”/>
<img src=”meucliente.jpg” alt=””/>
Eu não aconselho usar imagens em menus, sempre quando o fizer utilize o CSS para puxar as imagens, pois os sites de busca não conseguem ler o que está escrito no JPG, o ideal é utilizar a tag ALT para escrever o que tem na imagem por exemplo, no nosso menu está escrito SERVIÇOS especifique na tag ALT a palavra SERVIÇOS.
O atributo ALT foi criado para especificar o que contém na imagem, não negligencie deixando vazio ou até mesmo escrevendo qualquer coisa, especifique, pois imagine o seu site com todas as imagens desabilitadas? Os programas para deficientes visuais entendem somente o texto da página, já imaginou o seu site não ter nada específico no atributo ALT? O atributo ALT é essencial na acessibilidade do nosso documento. O spider só entende texto e não consegue entender o que está escrito no JPG, vamos dizer que você esteja incluindo um JPG que esteja escrito: “Desenvolvimento de sites” o atributo alt deverá ficar:
<img src=”nome_imagem.jpg” alt=”desenvolvimento de sites”/>
No exemplo acima você está indicando que aquela imagem corresponde a palavra desenvolvimento de sites.
No exemplo acima você está indicando que aquela imagem corresponde a palavra desenvolvimento de sites.
IMAGENS ATRAVÉS DO CSS
É muito simples chamar uma imagem pelo CSS veja o exemplo:
<a href=”index.htm” title=”Home” id=”genesis” accesskey=”0″> Página principal</a>
No exemplo acima repare que não existe a TAG , mais na verdade eu puxei uma imagem pelo CSS, vamos verificar o CSS:
#genesis{
background-image:url(../imagens/menu_title.jpg);
width:83px;
height:24px;
display:block;
text-indent:-8000em;
}
Repare que a imagem está como um plano de fundo e o texto está com -8000em, isso significa se puxar no XHTML o ID genesis o texto não ficará visível pois ele está em uma resolução de -8000em, nem mesmo se você estivesse usando 2 monitores você iria conseguir ver o texto. Assim só ficou visível a nossa imagem e com o menu totalmente em texto.
CRIANDO O MENU DO SITE
O menu é a principal parte do site, pois através dele sairá a grande maioria da navegação do site, por isso toda atenção na estrutura do menu do site veja esse exemplo:
<ul>
<li><a href=”index.htm” title=”Home” id=”genesis” accesskey=”0″> Página principal (Alt + 0)</a></li>
<li><a href=”desenvolvimentodesites/michelferreira.htm” id=”perfil” accesskey=”1″ title=”Michel Ferreira”> Michel Ferreira (Alt + 1)</a></li>
<li><a href=”desenvolvimentodesites/portfolio.htm” id=”portfolio” accesskey=”2″ title=”Portfólio Michel Ferreira”> Portfolio Michel Ferreira (Alt + 2)</a></li>
<li><a href=”desenvolvimentodesites/midia.htm” id=”midia” accesskey=”3″ title=”Michel Ferreira na mídia”> Michel Ferreira na mídia (Alt + 3)</a></li>
<li><a href=”desenvolvimentodesites/siteacessivel.htm” id=”padroes” accesskey=”4″ title=”Padrões W3C”> Padrões w3c (Alt + 4)</a></li>
<li><a href=”desenvolvimentodesites/seo.htm” id=”artigos” accesskey=”5″ title=”SEO”> Aprenda SEO (Alt + 5)</a></li>
<li><a href=”desenvolvimentodesites/site_mobile.htm” id=”mobile” accesskey=”6″ title=”Mobile”> Sites para celular (Alt + 6)</a></li>
<li><a href=”desenvolvimentodesites/contato.htm” id=”contato” accesskey=”7″ title=”Contato”> Contato (Alt + 0)</a></li>
<li><img src=”desenvolvimentodesites/imagens/menu_07.jpg” alt=”menu”/></li>
<li><a href=”http://www.michelferreira.com/teste/rss.xml” id=”rss” title=”Assine meu RSS”>RSS Michel ferreira</a></li>
</ul>
Sempre inicie o seu menu com a tag <ul></ul> responsável por definir o início e o fim de uma lista, a tag <li></li> é responsável por definir um elemento dentro da lista. Sempre coloque cada link dentro de uma <li></li>.
O atributo ACCESSKEY nada mais é do que a possibilidade de acessar o link sem o mouse, somente usando as teclas especificadas, fundamental para deficientes visuais, no meu documento teclando Alt + 0, é acessado a página principal do site, Alt + 1 o meu perfil, Alt + 2 o meu portfólio.
Cada link do seu menu deverá ter essas especificações, o quanto mais acessível melhor, você talvez até esteja falando que o seu site não é para deficientes visuais, e essas normas não são necessárias, lhe digo que o Google tem a visão de um cego, um cego que possui vários amigos, não obedecer esse requisito no seu menu poderá trazer muitos acessos a menos.
*CONTEÚDO RETIRADO DO MANUAL WEBMARKETING, DESENVOLVIDO POR MICHEL FERREIRA
http://www.michelferreira.com/desenvolvimentodesites/web-marketing.htm
Recent Comments