Codage HTML simplifié grâce au codage Zen

click fraud protection

Codage Zen est l'un des meilleurs assistants de codage HTML jamais créés. Au début déroutant et peut-être un peu difficile à contourner, mais une fois que vous aurez compris, rien ne pourra battre la facilité qu'il apportera à la vie d'un codeur.

Zen Coding est essentiellement un ensemble de plugins qui peuvent fonctionner avec une grande variété d'éditeurs de texte (Notepad ++, Coda, Espresso, Aptana, Komodo, etc., pour n'en nommer que quelques-uns). Leur spécialité est d'étendre les abréviations en structures HTML complètes, de la manière la plus intelligente et la plus incroyable.

image

La structure HTML montrée dans la capture d'écran est entièrement gracieuseté de quelques lignes, développées par Zen Coding lui-même. Comme visible dans la capture d'écran, le plugin se présente comme un menu dans la barre d'outils principale lorsqu'il est intégré à Notepad ++. Cela peut changer d'éditeur en éditeur.

Venant à un bref aperçu de la façon dont cela fonctionne, voyons comment ce premier bloc HTML a été créé dans la capture d'écran ci-dessus. La commande utilisée est indiquée ci-dessous.

instagram viewer
ZEN

Cette syntaxe simple guide ainsi. L'expansion commence par une balise «div», et tout ce qui suit le # identifiera l '«id» de la balise précédente. Le> montre comment les balises enfants vont remonter à partir de quelle balise, qui dans ce cas sont «table», «tr», «td» etc. Le multiplicateur par 5 indique que la balise précédente doit être répétée autant de fois. Enfin, la balise de lien hypertexte est également associée à une «classe», spécifiée par l’utilisation de la période. Par conséquent, cette syntaxe se traduit par ceci:

ZEN2

Les possibilités avec Zen Coding sont énormes. Cette seule commande que j'ai abordée ci-dessus, ne se rapproche même pas du début. Apporter une petite variation à votre syntaxe peut invoquer beaucoup de variété dans votre sortie HTML. Prenez par exemple la syntaxe et la sortie HTML ci-dessous.

ZEN

Ici, je viens d'utiliser les marqueurs + pour ajouter plusieurs balises du même type, et même utilisé des multiplicateurs entre les deux.

Couvrir toutes les fonctionnalités de Zen Coding dépasse l'approche de cette revue, c'est pourquoi nous vous invitons à explorer le plugin. Le codage zen peut devenir la bouée de sauvetage pour tout codeur HTML, artiste CSS, etc., et peut même attirer ceux qui veulent simplement l'expérimenter. Vous aurez du mal à trouver quelqu'un qui a quelque chose de mal avec Zen Coding, ils sont vraiment si bons.

Sur le lien de téléchargement fourni ci-dessous, il y a quelques captures d'écran qui permettent un aperçu des fonctionnalités offertes. Vérifiez-les.

Les plugins Zen Coding sont disponibles pour plusieurs éditeurs de texte multiplateforme.

Télécharger Zen Coding

watch instagram story