Zen coding, ecrire du html, css plus rapidement

Last modified by mediacrea on Sun, November 21, 2010 09:46
Source|Old Revisions  |  Back To Group

Zen coding est un plugin qui s’ajoute à un IDE ou un traitement de texte, et permet d’accélérer la saisie dans une forme similaire au CSS

Ajoutez une ligne :

 div#page>div.logo+ul#navigation>li*5>a

et transformez la en appuyant sur un raccourci clavier :

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

Vous obtenez votre code développé à partir d’une stucture similaire aux déclaration “css”.

Zen coding supporte officiellement quelques éditeurs majeurs :

  • aptana/eclipse/zend/
  • textmate
  • espresso
  • komodo edit
  • notepad++
  • Pspad

and des application tierces :

  • Dreamweaver (Windows, Mac)
  • Sublime Text (Windows)
  • UltraEdit (Windows)
  • TopStyle (Windows)
  • GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin
  • BBEdit/TextWrangler (Mac) — external download
  • Visual Studio (Windows) — external download
  • EmEditor (Windows) — external download
  • Sakura Editor (Windows) — external download
  • NetBeans (crossplatform)
  • ntelliJ IDEA/WebStorm/PHPStorm (crossplatform)
  • Emacs (crossplatform)
  • Vim (crossplatform)
  • ReSharper plugin for Visual Studio

Vous pouvez trouver plus d’infos concernant “zen coding” :

http://code.google.com/p/zen-coding/Code Text

Pour ceux disposant d’un IDE basé sur éclipse :

Dans votre IDE, aller dans : - help > Install new software - Dans le champ “work with”, ajouter cette adresse : http://zen-coding.ru/eclipse/updates/ - cochez “zen coding” - Confirmez les boites de dialogues et acceptez les condition d’utilisation - relancez l’IDE

Vous avez maintenant un nouveau menu “zen coding” et votre editeur est prêt a interpréter votre code avec les touches de raccourci défini (pomme+E par défaut sur mac)




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs