Ronildo Costa - Joomla - CSS - Tecnologia - Profissional de Joomla

Esse é um problema clássico que todos nós desenvolvedores já passamos.

Já cruzei com mil soluções para o problema, porém esse final de semana precisei de algo e nas minhas pesquisas encontrei uma solução que funcionou perfeitamente, melhor do que quaquer uma que já tenha usado.

O Problema

Como vemos na imagem acima, o rodapé do site seguindo uma estrutura normal de HTML ficaria logo após a div do conteúdo.

A Solução

Como vemos na imagem acima, esse é o resultado final que queremos.

O código HTML

<div class="tudo">
   <div class="topo"></div>
   <div class="conteudo"></div>
   <div class="rodape"></div>
</div>

O código CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.tudo {
   min-height:100%;
   position:relative;
}
.topo {
   background:#ff0;
   padding:10px;
}
.conteudo {
   padding:10px;
   padding-bottom:60px;   /* Mesma Altura do Rodapé */
}
.rodape {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Mesma Altura do Rodapé */
   background:#6cf;
}

Por que essa é a melhor solução?

• Funciona em praticamente todos os browsers (menos em IE 6, existe solução mas não vou nem postar )
• CSS 100% válido e sem Hacks
• Sem javascript

Veja um exemplo em funcionamento.

Créditos para a solução!

Para quem não conheçe, hoje eu gostaria de falar do LESS CSS.

Less é um projeto criado para facilitar a escrita do CSS, seria muito bom se o W3C incluisse alguma das funcionalidades que o LESS proporciona, mas enfim, vou tentar mostrar de uma forma prática como ele pode ajudar no desenvolvimento, os pontos fortes e os fracos.

Esse é o site do projeto: http://www.lesscss.org infelizmente não temos documentação em português, eu entrei em contato com o desenvolvedor para ver se seria possível traduzir, vamos aguardar o que ele tem a dizer.

Para que usar uma nova forma?

Eu diria que para agilizar o desenvolvimento e o entendimento de código. O LESS não altera a forma do CSS, apenas facilita como se escreve.

Sintaxe

// Código escrito em LESS

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

/* Código gerado em CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

O quadro acima, mostra como usar variáveis, porém isso é apenas uma forma de como o LESS nos ajuda no desenvolvimento, existem várias outras vantagens!

Pontos Fracos

Um dos pontos fracos que eu vejo para o uso, é a baixo suporte para a sintaxe. Para desenvolvimento de código eu utilizo o Coda nativamente ele não tem suporte para LESS (espero que no próximo release), porém já desenvolveram um plugin que acrescenta a sintaxe do LESS ao Coda.

Outro ponto fraco do LESS, é que se você utilizar ele compilando-o por javascript e o usuário tiver o javascript desabilitado, o site ficará sem css, a não ser que você faça algum if pra saber qual arquivo será enviado para o client.

Pontos Fortes

A rápida adoção, o LESS vem sendo muito utilizado ultimamente, principalmente pela comunidade Ruby on Rails.

Como é algo muito fácil de se aprender vale a pena gastar algumas poucas horas estudandos novas tecnologias.

Para quem quiser testar uma forma bem fácil de começar é utilizando um compilador: http://incident57.com/less/ (existe pra MAC e Windows)

Hoje olhando os meus feed, no blog do Pedro Rogério (http://www.pinceladasdaweb.com.br/blog/) encontrei um post muito legal, da apresentação do Luiz Tanure.

A apresentação da dicas muito importantes, a maioria delas eu já conhecia, algumas outras não, mas é sempre bom estarmos revisando nossos conhecimentos.

Antes que alguém pergunte, a apresentação foi feita, utilizando o software da prezi.com que aliás é muito bom.

Você sabe o que é CSS Sprite??
Se a sua resposta for não, leia esse texto: http://pt.spritegen.website-performance.org/section/what-are-css-sprites

Agora, se você já sabe, ou acabou de aprender, vou apresentar o site: http://spriteme.org/

O que essa belezura faz pra nós?
Cria todas as imagens do seu site em um único arquivo (conceito de CSS Sprite) e ainda gera o CSS pra você, claro você só vai precisar configurar o caminho das imagens.

E como isso funciona?

Muito fácil e simples:

• Entre no site indicado acima (http://spriteme.org/)
• Onde está escrito "SpriteMe", clique com o botão direito e adicione o link ao seu bookmark
• Entre no site que você quiser (pode ser até esse mesmo que você está lendo)
• Vá no seu bookmark e clique no favorite Sprite Me
• Uma tela, se abrirá onde você pode ver o css e a imagem gerada
• Algumas imagens não podem aplicar na regra do sprite, e o script diz por que elas não podem

Fácil e indolor né??

Amo essas ferramentas que nos auxiliam no trabalho.

Mesmo, apoiando totalmente a morte do IE 6 pros clientes a história é diferente não podemos deixar de testar nossos humildes websites nesse maldito browser, até por que ele não quer nem saber, só quer que funcione.

Bom, esses dias estava trabalhando num projeto e um amigo que estavamos trabalhando junto não gostou da idéia de usarmos png com transparência nas imagens por problemas com o IE, eu disse que conhecia uma solução que funcionava, ele ficou meio desconfiado no começo (por já ter testado tanta coisa que não funcionava direito, eu também já testei muita coisa que não funciona) mas depois que testou gostou muito e viu que realmente funcionava.

Bom como ele é uma pessoa que tem um conhecimento muito bom de CSS e não conhecia esse script, acredito que muito mais pessoas como ele não conhece, por isso resolvi divulgar aqui no blog.

A solução é muito simples e eficaz.

<!--[if IE 6]>
<script src="/blog/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript
/DD_belatedPNG.js" type="text/javascript"></script>
<script>
  /* Exemplo de utilizacao */
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Basicamente esse é o código que você vai precisar colocar no seu template entre as tags head.
Nesta linha (DD_belatedPNG.fix('.png_bg');), você coloca todos os elementos do HTML que você quer que seja afetado. Por exemplo onde tá .png_bg, você pode colocar div ou p, então tudo que for div ou paragráfo, o script vai interferir nas imagens para funcionar o truque.

Nesta linha que vou colocar o código abaixo é o caminho para onde arquivo está, no caso eu coloquei o arquivo dentro de uma pasta chamada "javascript" dentro da pasta do meu template.

<script src="/blog/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript
/DD_belatedPNG.js" type="text/javascript"></script>

O site do desenvolvedor e onde você pode fazer o download do arquivo é este aqui: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Só vale ressaltar que eu encontrei essa dica no blog: http://www.pinceladasdaweb.com.br/blog/ que aliás é um excelente blog para quem gosta de CSS e afins.

Se você também tem os hábitos de começar os projetos do zero (não totalmente do zero ), essa dica é bem legal.

Encontrei esse site que disponibiliza alguns grids de CSS para ajudar no desenvolvimento. Ele não faz muita coisa, mas o que faz ajuda muito.

Para utilizar só entrar no template que quiser e exibir o código fonte e copiar tudo ou salvar página.