mercredi 9 juin 2010

HTML 5 et CSS - Astuce pour coder plus vite

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">
     <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>
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,

À 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>
<html lang="ru-RU">
    <head>
        <title>title</title>
        <meta charset="UTF-8">
    </head>
    <body>

    </body>
</html>
Et de nombreux autres. Référez-vous à la cheat sheet pour voir tous les raccourcis.

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 pourrez voir toutes les options installées dans le menu Tools / Options, sous l'onglet Editor / Code Templates / HTML (de la liste déroulante). D'autres se trouveront sous l'onglet Macros. C'est ici que vous pourrez changer les templates, par exemple pour remplacer l'attribut lang ru-RU pour fr-FR (à moins que ça soit dans vos habitudes de coder pour des biolérussiens).

Vous pouvez aussi voir la vidéo où j'ai trouvé cette astuce.
à

Aucun commentaire:

Publier un commentaire