mercredi 9 juin 2010
Je vais partager avec vous un truc que je viens de voir dans un tutoriel vidéo et que je vais installer dès demain sur mon éditeur Netbeans au travail. Le projet Zen Coding sur Google Code propose une nouvelle façon d'écrire rapidement du code HTML et CSS selon les spécifications HTML 5.
Selon leur démonstration, après avoir installé leur package, si on inscrit cette ligne et qu'on appuie sur la touche TAB :
div#page>div.logo+ul#navigation>li*5>a
Ce sera automatiquement transformé en ce code HTML :
<div id="page">Vraiment cool hein ! Donc si votre éditeur est Aptana/Eclipse, Komodo, Notepad++, ils sont officiellement supportés. Du côté de Netbeans 6.8, la compatibilité est actuellement de base pour le HTML (vérifiez la liste des autres éditeurs compatibles sur le site, il y en a beaucoup d'autres dont Dreamweaver). Donc l'exemple ci-dessus ne fonctionne pas encore mais ça viendra et ce sera certainement un plugin prometteur pour les développeurs,
<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>
À la base, on pourra quand même utiliser certains raccourcis comme ceux-ci :
script TAB
<script type="text/javascript"></script>input TAB
<input type="type" id="name" name="name" value="value" />form TAB
<form action="action" method="method"></form>html:5 TAB (essayez aussi html:4s pour le HTML 5 strict)
<!DOCTYPE HTML>Et de nombreux autres. Référez-vous à la cheat sheet pour voir tous les raccourcis.
<html lang="ru-RU">
<head>
<title>title</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Installation sur Netbeans 6.8
- Rendez-vous sur la page du projet
- Téléchargez la version la plus récente pour votre éditeur (par exemple NetBeans.Zen.HTML.1.2.zip)
- Vous allez obtenir un petit fichier de 8 Kb
- Dans Netbeans, allez dans Tools / Options
- Sous l'onglet General, cliquez sur le bouton Import (en bas à gauche de la fenêtre)
- Sélectionnez le fichier zip sur votre poste
- Vous verrez une fenêtre avec les options disponibles. Cochez All pour installer les macros et les gabarits de code
- Faites OK et redémarrez l'IDE
Vous pouvez aussi voir la vidéo où j'ai trouvé cette astuce.
