Connect with us

Internet

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

Il y a

le

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

24 Commentaires

  1. Ju

    7 mai 2010 at 16 h 15 min

    Je l’utilise depuis quelques temps, c’est vrai que c’est plutôt efficace 🙂

  2. Alexandre B

    7 mai 2010 at 16 h 17 min

    Tout simplement génial !
    Je viens de tester sur Notepad++, il va de paire avec le plugin FTP_Synchronize

  3. keo

    7 mai 2010 at 16 h 19 min

    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 ^^)

  4. Johan

    7 mai 2010 at 16 h 21 min

    Ca fait un bout de temps que j’utilise ZenCoding sur Mac avec Espresso, mais je viens de découvrir qu’il existe un plugin pour NotePad++ sur Windows…

    Par contre un petit lien vers les différents alias existants aurait été pertinent…
    HTTP -> http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
    CSS -> http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

    Voila !

  5. A.rnaud

    7 mai 2010 at 16 h 26 min

    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.

  6. camillejg

    7 mai 2010 at 16 h 51 min

    Sur PsPad, c’est simplement génial.
    Ajouté en 2 minutes, testé en 1 minute !
    Merci pour ce lien !

  7. ski-man

    7 mai 2010 at 17 h 29 min

    Le plugin Notepad++ c’est dla balle 🙂

  8. Matt

    7 mai 2010 at 17 h 29 min

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

  9. Yoppla

    7 mai 2010 at 20 h 29 min

    whahh bluffant zencode, ca donne envie de s’y mettre, et je vais m’y mettre! marre de mon dreamweaver !

  10. Maxime

    8 mai 2010 at 0 h 01 min

    Zen Coding + Espresso, c’est simple ergonomique et rapide. Un vrai plaisir pour les intégrateurs !

  11. yahoo

    8 mai 2010 at 14 h 56 min

    C’est un petit peu compliqué tout ça pour moi…mais ça a l’air sympa 🙂

  12. Batouta

    8 mai 2010 at 15 h 48 min

    Excellent mais pas facile à lire si le code html est long …..

  13. AM

    9 mai 2010 at 0 h 44 min

    La meilleur façon de coder avoir 10 doigts notepad bouhh le reste.

  14. Calo

    9 mai 2010 at 11 h 48 min

    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 🙂

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

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

  17. Chibani

    10 mai 2010 at 14 h 06 min

    Merci pour cette belle découverte Eric 🙂
    J’ai installé et pris goût à ce petit plugin (sous Eclipse)

  18. JC

    10 mai 2010 at 15 h 58 min

    Sympa comme outil … Même en DTD HTML 4.0 ça facile pas mal la frappe… Et le plugin Ultra-Edit c’est vraiment le top.

  19. frequeradio

    11 mai 2010 at 9 h 52 min

    Ah ouais ? Quand on a l’habitude du html et css je pensais pas que l’on perdait autant de temps….
    mais si tlm aime je vais ptre tester

  20. Videos+de+catch

    11 mai 2010 at 21 h 03 min

    Excellent!! Il faut sans doute développer toute la journée pour pouvoir tirer pleinement partie de cet éditeur mais l’idée ma plaît 🙂

  21. stefff

    14 mai 2010 at 8 h 57 min

    Vraiment bien comme editeur de code.
    On peut gagner réellement du temps avec ce soft.

    Merci pour le partage.

  22. Lionel

    23 juin 2010 at 14 h 09 min

    Bonjour,

    J’aurais une question. Cet éditeur compose t-il un code valide aux normes W3C ?

    amicalement

  23. Identitools

    19 juillet 2010 at 3 h 43 min

    É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 ! 🙂

  24. vermathio

    15 décembre 2010 at 17 h 45 min

    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é

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Dernières news

Les bons plans

Les tests