Hoje se espalhou pelo twitter a notícia do novo plugin que visa otimizar o tempo na codificação XHTML e CSS. O plugin Zen Coding, desenvolvido por Sergey Chikuyonok do Smashing Magazine.

A idéia base do plugin é trabalhar com a sintaxe do css para criar os elementos do XHTML. Após a digitação da combinação de elementos é necessário apenas prescionar (ctrl + ,) que a expressão transforma-se em tags. Na prática você escreveria:

div#nav>ul>li*2>a

Que resultaria em:

<div id="nav">
   <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
   </ul>
</div>

Testando o plugin  deu para perceber que quem tem um bom conhecimento de DOM sentirá uma facilidade maior em trabalhar com o plugin, devido a lógica de ‘arvore’ que ele utiliza para criar os elementos.

É tudo muito simples, veja a demostração do poder do Zen Coding:

Além do vídeo o Smashing disponibilizou um demo onde ao prescionar  “Ctrl + ,“ você tem uma previsão de como o plugin funciona.

Lista de possíveis propriedades e seus resultados.

• (div, p) -> Nome do elemento;
• (div#sidebar, a#logo) -> Elemento mais id;
• (h1.vcard, p.entry.left) -> Emento mais classe ou combinações de classes;
• (div#header>h1>a) -> Indicando o elemento filho;
• (div#header+div#content+div#footer) -> Elementos irmãos;
• (ul#nav>li*5>a) -> Multiplicando elementos;
• (ul#nav>li.item-$*5) -> Numerando os itens;

Editores suportados

O Zen Coding foi produzido em JavaScript e Python para rodar na maior quantidade possível de plataformas. Porém alguns editores, como o TextMate, tem suporte apenas a função de expandir os termos abreviados (que pra mim já é muita coisa).

Os editores que tem suporte a todas funcionalidades do plugin são: Aptana(para Windowns), TEA for Coda e TEA for Espresso (para Mac).

O objetivo deste post é demonstrar um resumo do que é possível com esse maravilhoso plugin. Você pode se aprofundar no assunto visitando o post original. Lá você verá que existem outras funcionalidades inclusive a de acrescentar seus próprios trechos de códigos no arquivo fonte do plugin.

Espero que seja proveitoso para todos os leitores assim como esta sendo para mim. No próximo post explicarei como instalar o Zen no Aptana.

Cada projeto exige diversas funcionalidades, algumas mais fáceis e outras mais complicadas de implementar. Há muita coisa boa na web, porém às vezes faltam coisas que são fundamentais na maioria dos projetos.

Em diversos sites precisei de um bom plugin jquery para controlar o tamanho das fontes e não consegui encontrar. Foi a partir dessa necessidade que decidi desenvolver  o plugin Font Size, que visa facilitar os desenvolvedores na tarefa de implementar esse controle. Vejamos como utilizá-lo.

Veja o demo.

Para a implementação do plugin precisaremos dos scripts: cookie e o fonSize + biblioteca jQuery.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script><!-- Requerido caso queira guardar no cookie -->
<script type="text/javascript" src="font_size.js"></script>

O parâmetro principal deve ser a div onde ficarão guardados os links de controle. Em nosso exemplo usaremos a div#font_size.

$(document).ready(function() {
   $("#font_size").fontSize();
});

No XHTML declare apenas a div vazia que o script se encarrega de incluir os links.

<div id="font_size"></div>

Podemos customizar as funcionalidades do nosso plugin. Observe as opções.

• alvo podemos declarar um ou mais alvos separados por virgula. Em nosso exemplo utilizamos a div#content. Caso o alvo não seja declarado todo documento sofre a alteração no tamanho da fonte.
• tipoPaiLink informa se os links devem estar dentro de uma lista <ul> ou dentro de um <p>. Os parâmetros podem ser: ‘ul’ ou ‘p’.
• setCookie quando declarado true deixa salvo a ultima ação do usuário, de modo que quando houver uma nova visita o tamanho da última ação será mantido. Caso não queira usar a função de cookie declare como false (nesse caso não será mais necessário o script cookie.js).
• variacoes tem quantidade 7 declarado como padrão, onde 4 é o tamanho declarado como 100% no CSS. Caso aumente a quantidade de variações lembre-se de declarar todas as classes no CSS. Observe que a classe padrão separa igualmente o número de variações para mais e para menos. Por exemplo se eu declaro variacoes: 11 a  classe padrão detectada pelo script será a 6 sendo 5 variações de aumento e 5 variações de diminuição.

Veja agora como nosso script ficou com o acréscimo dos parâmetros.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script&gt;
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#font_size").fontSize({
    alvo: '#content', //Alvo(s) da atuação do script
    tipoPaiLink: 'ul', //Guardando os links de controle em uma <ul>
    setCookie: true,//Ativando opção de cookie
    variacoes: 7 //7 variações (3 para mais e 3 para menos)
  });
});
</script>

No CSS podemos customizar o quanto vai mudar a cada nova ação. No exemplo eu utilizei medidas em porcentagem, mas você pode usar outras medidas de acordo com a sua necessidade.

.tam1 p, .tam1 li { font-size: 80%}
.tam2 p, .tam2 li { font-size: 90%}
.tam3 p, .tam3 li { font-size: 95%}
.tam4 p, .tam4 li { font-size: 100%} /* tamanho padrão */
.tam5 p, .tam5 li { font-size: 105%}
.tam6 p, .tam6 li { font-size: 110%}
.tam7 p, .tam7 li { font-size: 120%}

Para estilizar os links de controle utilize as classes .mais e .menos. No exemplo criei um estilo simples.

#font_size ul { float: right; }
#font_size ul li { float: left; margin-right: 3px}
#font_size a {
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  background: #ccc;
  color: #4F4F4F
}

O que há de novo ?

• Opção de declarar aonde o script vai atuar. O desenvolvedor declara um ou mais alvos que sofrerão a alteração no tamanho da fonte.
• Gera via DOM um xhtml limpo. Com uma simples classe no alvo o fontSize controla o tamanho de seus textos descendentes.
• Dispõe da opção de salvar em cookie. Diminuindo a tarefa do usuário de esta sempre clicando para adaptar ao melhor tamanho a cada nova visita. Uma vez adaptado o cookie já guardará a informação e em uma nova visita tudo estará na mesma configuração.
• Por trabalhar com a biblioteca jQuery é completamente Cross-browser. Testado em FireFox 3+, Internet Explorer 6+, Chrome, Opera e Safari.

Faça o download do Plugin Font Size 1.0.