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 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.
Voir tous les articles de Eric
24 commentaires pour "Zen Coding, un éditeur de code HTML CSS qui crée les balises pour vous"
1
Ju le 7 mai 2010 à 16:15
Je l’utilise depuis quelques temps, c’est vrai que c’est plutôt efficace
2
Alexandre B le 7 mai 2010 à 16:17
Tout simplement génial !
Je viens de tester sur Notepad++, il va de paire avec le plugin FTP_Synchronize
3
keo le 7 mai 2010 à 16:19
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 le 7 mai 2010 à 16:21
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-c.....ElementsEn
CSS -> http://code.google.com/p/zen-c.....opertiesEn
Voila !
5
A.rnaud le 7 mai 2010 à 16:26
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 le 7 mai 2010 à 16:51
Sur PsPad, c’est simplement génial.
Ajouté en 2 minutes, testé en 1 minute !
Merci pour ce lien !
7
ski-man le 7 mai 2010 à 17:29
Le plugin Notepad++ c’est dla balle
8
Matt le 7 mai 2010 à 17:29
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 le 7 mai 2010 à 20:29
whahh bluffant zencode, ca donne envie de s’y mettre, et je vais m’y mettre! marre de mon dreamweaver !
10
Maxime le 8 mai 2010 à 00:01
Zen Coding + Espresso, c’est simple ergonomique et rapide. Un vrai plaisir pour les intégrateurs !
11
yahoo le 8 mai 2010 à 14:56
C’est un petit peu compliqué tout ça pour moi…mais ça a l’air sympa
12
Batouta le 8 mai 2010 à 15:48
Excellent mais pas facile à lire si le code html est long …..
13
AM le 9 mai 2010 à 00:44
La meilleur façon de coder avoir 10 doigts notepad bouhh le reste.
14
Calo le 9 mai 2010 à 11:48
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
Chibani le 10 mai 2010 à 14:06
Merci pour cette belle découverte Eric
J’ai installé et pris goût à ce petit plugin (sous Eclipse)
16
JC le 10 mai 2010 à 15:58
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.
17
frequeradio le 11 mai 2010 à 09:52
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
18
Videos+de+catch le 11 mai 2010 à 21:03
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
19
stefff le 14 mai 2010 à 08:57
Vraiment bien comme editeur de code.
On peut gagner réellement du temps avec ce soft.
Merci pour le partage.
20
Lionel le 23 juin 2010 à 14:09
Bonjour,
J’aurais une question. Cet éditeur compose t-il un code valide aux normes W3C ?
amicalement
21
Identitools le 19 juillet 2010 à 03:43
É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 !
22
vermathio le 15 décembre 2010 à 17:45
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é