gustavoribeiro.com

Gerenciamento

Todos os dias, uma formiga chegava cedinho ao escritório e pegava duro no trabalho. A formiga era produtiva e feliz.
O gerente marimbondo estranhou a formiga trabalhar sem supervisão. Se ela era produtiva sem supervisão, seria ainda mais se fosse supervisionada.

E colocou uma barata, que preparava belíssimos relatórios e tinha muita experiência, como supervisora. A primeira preocupação da barata foi a de padronizar o horário de entrada e saída da formiga.

Logo, a barata precisou de uma secretária para ajudar a preparar os relatórios e contratou também uma aranha para organizar os arquivos e controlar as ligações telefônicas.

O marimbondo ficou encantado com os relatórios da barata e pediu também gráficos com indicadores e análise das tendências que eram mostradas em reuniões.

A barata, então, contratou uma mosca, e comprou um computador com impressora colorida. Logo, a formiga produtiva e feliz, começou a se lamentar de toda aquela movimentação de papéis e reuniões!

O marimbondo concluiu que era o momento de criar a função de gestor para a área onde a formiga produtiva e feliz, trabalhava. O cargo foi dado a uma cigarra, que mandou colocar carpete no seu escritório e comprar uma cadeira especial.

A nova gestora cigarra logo precisou de um computador e de uma assistente (sua assistente na empresa anterior) para ajudá-la a preparar um plano estratégico de melhorias e um controle do orçamento para a área onde trabalhava a formiga, que já não cantarolava mais e cada dia se tornava mais chateada.

A cigarra, então, convenceu o gerente marimbondo, que era preciso fazer um estudo de clima. Mas, o marimbondo, ao rever as cifras, se deu conta de que a unidade na qual a formiga trabalhava já não rendia como antes e contratou a coruja, uma prestigiada consultora, muito famosa, para que fizesse um diagnóstico da situação. A coruja permaneceu três meses nos escritórios e emitiu um volumoso relatório, com vários volumes que concluía : Há muita gente nesta empresa!!

E adivinha quem o marimbondo mandou demitir? A formiga, claro, porque ela andava muito desmotivada e aborrecida.

CSS Sprite – Menu rollover com imagem

Hoje irei falar sobre como criar menu rollover com imagem. Menus rollover são menus que alternam o estilo ao passarmos o mouse sobre o objeto, um mouseover da vida.

Antigamente – e ainda bato de frente com isso hoje em dia – esses menus eram criados utilizando javascript e, pelo menos, dois arquivos de imagem – uma para o menu ativo e outra quando ativado o mouseover. Um problema que muito me incomoda com essa maneira de se criar menus é o fato de, quando passamos o mouse por cima no objeto ele sumir com a imagem de fundo enquanto carrega a nova imagem.

Com todas as possibilidades que o CSS nos dá, isso muda muito. Primeiro que, não precisamos mais do javascript para ativar a troca de imagem e tão pouco de duas imagens. Vamos a explicação.

Vamos começar pela imagem que iremos utilizar no menu. Criaremos, no mesmo arquivo de imagem, os dois estilos para nosso menu conforme imagem abaixo:

Percebemos que, da metade para cima, temos a parte que aparecerá logo que carregarmos nossa página e, na metade de baixo, a parte que aparecerá quando passarmos o mouse sobre o menu. Ok Gustavo, mas como faremos isso? Simples! Primeiro criaremos nosso menu com listas desordenadas:

<ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="quemSomos.htm">Quem Somos</a></li>
    <li><a href="contato.htm">Contato</a></li>
</ul>

A mágica esta toda no CSS, vejamos:

a {display:block;width:100px;height:18px;background:url('bgMenu.gif') no-repeat}
a:hover {background-position:0 -18px} /* ao passar o mouse no menu, deslocar
                                         o fundo em -18px para o topo */

Veja o exemplo!