Menu Vertical em CSS

Um dos exercícios mais praticados com meus alunos no curso de webdesign é a construção de menus em CSS. Além de trabalhar com vários elementos das folhas de estilo é uma ótima oportunidade de compreendermos melhor a Box Model.
No post de hoje vou ensinar a fazer um menu vertical simples utilizando apenas HTML e CSS.
O motivo de tocar em um tema tão batido como esse é devido aos inúmeros erros que venho vendo em alguns códigos por ai. Na maioria das vezes, são duplicações de informações, declarações sem sentido ou no lugar errado como indicar o width ou o height em todas a variáveis. São erros que deixam o código pesado e podem levar a novas "gambiaras" caso queiram acrescentar algo novo no código como uma imagem rollover.
Para se criar um menu, seja ele vertical ou horizontal, o indicado é utilizar listas não ordenadas, a conhecida <ul>, pois apresenta grande flexibilidade e versatilidade para estilização.
O primeiro passo é criar uma div que emglobe nosso menu e com um id para ser referenciado no CSS, no caso vou utilizar o id="menu". Depois crie uma lista não ordenada com cinco elementos (podem ser quantos elementos você quiser). Veja o código:

<div id="menulateral">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">A Empresa</a></li>
<li><a href="#">ProdutoA</a></li>
<li><a href="#">ProdutoB</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>:

Veja o resultado.

- Vamos configurar a largura do menu através da regra width: 150px; que deve ser aplicada tanto na div #menu quanto em #menu ul;
- Vamos retirar os "bullets", que são aqueles marcadores laterais, as bolinhas laterais, através da regra list-style:none; aplicada em #menu li;
- Vamos zerar a margin e o padding que por padrão apresentão valores diferentes dependendo do navegador através das regras margin:0; e padding:0; aplicadas em #menu ul;
- Vamos acrescentar um pequeno espaçamento embaixo de cada <li> para que facilite a vizualição através da regra margin-bottom: 2px; aplicado no elemento #menul li;
- É importante resaltar que essas regras devem ser associadas exatamento aos respectivos elementos para não gerar sobrecarga de código desnecessário, como por exemplo aplicar a definição width: 150px; no elemento #menu li;

#menu {
width: 150px;
}

#menu ul {
width: 150px;
padding: 0px;
margin: 0px;
}

#menu li {
list-style: none;
margin-bottom: 2px;
}

Veja o resultado.

Agora vamos estilizar os links e seus estados.
- Vamos definir a altura de cada elemento através da regra heigth: 25px; e dar uma espaçamento na lateral esquerda através da regra padding: 0 0 0 10px; aplicando ambas no elemento #menu a;
- Vamos acrescentar a regra display: block; no elemento #menu li com a finalidade de fazer com que a troca da cor do fundo seja na extensão toda do elemento <li>;
- As outras regras eu acredito que a maioria já esteja familiarizado como a troca da cor de fundo através do estado "hover" do link;

#menu a {
display: block;
text-decoration: none;
background: #FF9933;
color: #FFFFFF;
height: 25px;
padding: 0 0 0 10px;
}

#menu a:visited {
}

#menu a:hover {
background: #669933;
}

Veja o resultado.

Conclusão:
Utiliza-se o mínimo possível de regras nos elementos <ul> e <li> e prioriza-se a estilização no link. Assim você terá um código limpo, compacto e compatível com os navegadores.
No próximo post irei explicar como fazer um menu horizontal.
Grande abraço a todos e até o próximo post.

Como configurar os registros MX para Google Apps

Foi depois de procurar muito sobre "como configurar os registros MX para Google Apps" e não obter nenhuma resposta satisfatória que resolvi escrever este post. Na verdade encontrei vários sites falando sobre o assunto, mas alguns faltavam dados e outros acabavam me confundindo com tanta informação inútil.
Este post é um mini tutorial de como de como configurar os registros MX para o Google Apps. Se você nunca ouviu falar em Google Apps essas informações não serão úteis para você.
1° Passo: Exclua todo e qualquer registro MX que já exista no seu servidor. Através do link "Edit MX Entry" faça as exclusões.
2° Passo: Agora vamos acrescentar os registros MX que o Google Apps necessita, que são:

Aqui os dados em html para falicitar o colar/copiar:
ASPMX.L.GOOGLE.COM. 10
ALT1.ASPMX.L.GOOGLE.COM. 20
ALT2.ASPMX.L.GOOGLE.COM. 20
ASPMX2.GOOGLEMAIL.COM. 30
ASPMX3.GOOGLEMAIL.COM. 30
ASPMX4.GOOGLEMAIL.COM. 30
ASPMX5.GOOGLEMAIL.COM. 30
Atenção: Você deve incluir os dados como no exemplo abaixo.
- Peça para incluir novas entradas e escreva no primeiro input o domínio do seu site sem "www" e com ponto no final (seu-site.com.br.).
- O TTL é um número padrão; deixe o valor 14400.
- No próximo quadro selecione o tipo MX.
- Após escolher o tipo MX, se abrirão duas entradas: "Priority" e "Hostname or IP".
- Acrescente o primeiro Hostname e sua respectiva prioridade (10 - ASPMX.L.GOOGLE.COM.)
- Repita o processo até acrescentar todos os dados. Veja como deve ficar (clique na imagem para ampliar):

Depois é so mandar salvar e as alterações estarão finalizadas.
Um grande abraço a todos e até o próximo post.

Frames e Google: uma relação nada amistosa

Recentemente criei um site para um cliente que fez a seguinte exigência: que tocasse uma lista de músicas de fundo enquanto o usuário navegasse.
Nos meus projetos em flash, já cansei de usar músicas com um ótimo resultado. Mas nesse caso, o site era em html. Entretanto pensei que não haveria maiores dificuldades para fazer isso no html e comecei a trabalhar. No início acreditava que precisaria apenas implantar o player do windows media player com um lista que tudo estaria resolvido, mas percebi que quando fosse mudar de página a música recomeçaria.
Dois dias pesquisando uma solução e encontrei um exemplo de site que utilizava um sistema de frames para tocar as benditas das músicas. O site dividia a página em dois frames: em um ele colocava o site propriamente dito e em outro um player em flash. Mesmo clicando em qualquer link do frame conteúdo o frame do player continuava tocando ininterrupto. Voilá! Havia encontrado a solução! Eu nunca havia utilizado frames antes, mas decidi copiar a idéia para meu projeto, haja visto que não havia encontrado uma saída melhor.
Três meses depois, minha cliente me liga nervosa dizendo que ninguém encontrava o site dela no Google. Fiz uma pesquisa detalhada e realmente e o site não estava sendo posicionado em nenhuma das palavras chaves. Como nunca havia enfrentado essa reclamação antes, instrui minha cliente a ficar calma e coloquei a culpa no Google, dizendo que as vezes ele podia demorar com o posicionamento.
Passados mais 2 meses, o site não estava nem entre os cem primeiros resultados para as palavras chaves principais. Foi então que resolvi agir e descobrir porque aquilo estava acontecendo. Foi ai que caiu a ficha que talvez fossem os frames que estivessem provocando essa dor de cabeça. E foi pesquisando no próprio Google que minhas suposições foram confirmadas: os frames realmente estavam atrapalhando o posicionamento do site.
Resultado: retirei os frames e coloquei o player numa página a parte que se abre a pedido do usuário atravé de um link no menu. Agora resta saber em quanto tempo o site vai ser listado.
Ficou a lição: Google e Frames não se misturam.
Quem sabe no futuro o tão poderoso site de buscas poça entender melhor os quase esquecidos frames.

Atualização: esse post foi escrito dia 2 de agosto e no dia 8 de agosto o site já estava listado na 3° posição da primeira página. Por mais de quatro meses o site não esteve listado nem entre os 100 primeiros resultados e depois de seis dias já estava na 3° posição. Se tinha alguma dúvida quanto as consequências dos frames quanto a otimização de pesquisa, agora não tenho mais. Grande abraço a todos!