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.


Nos dernières vidéos

24 commentaires

  1. Une syntaxe à prendre en main au début mais peut s’avérer d’une aide précieuse en terme de gain de temps. En plus, possibilité de l’intégrer dans nos IDE préférés (NetBeans pour moi ^^)

  2. Le pseudo code utilisé est quasiment de la syntaxe CSS.
    Donc pas vraiment de nouvelle syntaxe à apprendre.

    Je vais regarder s’il existe une version pour e-texteditor.

  3. 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! =)

  4. Pas mal du tout, je viens de le tester également. Au début, la syntaxe surprend mais en fin de compte on s’y fait assez vite. C’est plus une question de logique qu’autre chose 🙂

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

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

  7. Énorme ce logiciel ! J’ai encore malgré tout un petit faible pour « texter » (vu sur le site de « lifehacker ») mais je pense qu’avec un temps d’adaptation je ne vais plus me passer de Zen-coding. Merci encore pour la news ! 🙂

  8. Zuste une autre connerie. La prochaine étape : faire utiliser cet éditeur par un androïd, ça libérerait du temps de cerveau disponible pour faire de la poésie et se libérer de la possession de ces outils démoniaques. le bonjour de ton ami le citron insubordonné

Répondre