Zen Coding, un éditeur de code HTML CSS qui crée les balises pour vous

Si vous faites un peu (ou beaucoup) d’intégration et de développement web, et que le duo HTML CSS n’a plus de secret pour vous, vous utilisez déjà certainement un éditeur de code avec auto-complétion, qui suggère, corrige la syntaxe et ferme les bonnes balises à votre place, entre autres. Je ne sais pas si vous

Si vous faites un peu (ou beaucoup) d’intégration et de développement web, et que le duo HTML CSS n’a plus de secret pour vous, vous utilisez déjà certainement un éditeur de code avec auto-complétion, qui suggère, corrige la syntaxe et ferme les bonnes balises à votre place, entre autres.

codehtml

Je ne sais pas si vous connaissez Zen Coding, mais cet éditeur sous stéroïdes mérite que l’on y jette un coup d’œil : mieux qu’un éditeur classique, il permet de déployer très rapidement des lignes de code HTML à partir d’abréviations inspirées des sélecteurs CSS.

Ainsi avec cette simple abréviation :

div#page>div.logo+ul#navigation>li*5>a

vous obtiendrez le bloc ci-dessous :

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Cet exemple vous laisse entrevoir la puissance de la chose, et son intérêt en termes de productivité. Le point négatif étant que vous aurez à apprendre une nouvelle syntaxe avant d’utiliser Zen Code au mieux de ses possibilités, soit un temps à investir qui ne sera pas toujours facile à trouver dans une journée déjà bien chargée d’intégrateur HTML.

Pour vous accompagner dans cet apprentissage (qui ne devrait cependant pas être très long), Smashing Magazine avait publié il y a quelque temps un didacticiel complet comme eux seuls savent en faire qui devrait vous aider à vite intégrer la syntaxe Zen Coding.

Zen Code est disponible sous forme d’extension pour les principaux éditeurs de code, y compris me NotePad Windows ou encore Dreamweaver.

Vous allez coder avec un turbo dans le clavier.


24 commentaires

  1. Simplement génial!

    Et les codes pour générer le HTML sont quasiment tous issus des opérateurs CSS, qu’un intégrateur connait forcément (normalement).

    Après c’est juste une question d’habitude pour gagner très vite du temps!

    Je ne me suis pas encore trop penché sur le cas du CSS, mais c’est pas mal pour transformer du CSS écrit en langage SMS en vrai CSS! =)

  2. Pingback: Zen Coding, un éditeur de code HTML CSS qui crée les balises pour vous « Quoi de 9 ?

  3. Pingback: Zen Coding : rédiger son HTML bien plus efficacement | LoïcG

Commenter

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Presse-Citron 2005 - 2018 | A propos | Contact | Site hébergé par Cognix Systems | Informations sur les cookies