Web – Escrevendo HTML de um jeito semântico

Dica dada pelo Rodrigo Ghedin do MeioBit.

Uma das coisas quem mais me agrada na codificação é entender o que estou escrevendo. A programação natural é ainda o sonho de muitos pesquisadores e profissionais da área. Escrever algo que você e o computador entendam da mesma forma é algo que levaria a produtividade na área de desenvolvimento de sistemas a um patamar interessante. Teoricamente não seria preciso mais de programadores, mas sim pessoas com boas idéias.

Deixando a viagem de lado, o que a dica do post do Rodrigo mostra é um plugin Zen Coding para editores HTML que permite escrever HTML de uma forma interessante.  Por exemplo (o clássico), digitar o seguinte texto:

div#header>img.logo[alt=image]+ul#nav>li*2>a:link

Produziria o seguinte HTML:

<div id="header">
    <img src="" alt="image" class="logo"/>
    <ul id="nav">
        <li>
            <a href="http://"></a>
        </li>
	<li>
            <a href="http://"></a>
        </li>
    </ul>
</div>

Interessante não? Para os amantes de tables, se quisesse criar uma tabela com 5 linhas e 10 colunas, bastaria digitar o seguinte snippet:

table>tbody>tr*5>td*10

Só não vou colocar o resultado aqui pois além de óbvio, ele ficaria grande demais. É possível customizar os ids, fazendo-os incrementais. Chamei o texto acima de snippet pois é exatamente o conceito utilizado. Obviamente existe uma combinação mais inteligente para gerar o resultado proposto.

O site oficial do plugin é:

http://code.google.com/p/zen-coding/

Um vídeo bem bacana da demonstração do plugin funcionando pode ser visto abaixo:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Há versões para várias IDEs. Desenvolvedores Web, uni-vos!

O post oficial da dica está no seguinte endereço:

http://meiobit.com/65450/zen-coding-html