Apprenez à être un maître zen du balisage

Le balisage, ou balisage, fait référence aux langages de balisage ou de balisage tels qu'ils sont HTML et CSS, et nous savons tous à quel point il est pénible d'ouvrir et de fermer les étiquettes une par une pour créer un modèle Web ...

Bien sûr, il existe des solutions pour cela, l'une d'entre elles est l'auto-complétion avec des IDE comme Dreamweaver mierda Griffon bleu ennuyeux si vous ne lui achetez pas de plugins o Komodo Modifier très lourd… Le fait est que les IDE ou les éditeurs de code trop chargés d'options finissent souvent par gêner le travail de manière inimaginable; tel est le cas de Dreamweaver qui vous remplit de code poubelle ce que vous générez graphiquement et qui est lourd, cher et laid. Griffon bleu c'est surtout ennuyeux parce que c'est gratuit, gratuit, mais la moitié des options sont réservées aux utilisateurs payants ... ce n'est pas amusant. Et enfin nous avons Komodo-modifier, ce qui est plutôt bon, puissant et plein d'options mais c'est lourd (100 Mo au ralenti) et sa mise en place est fastidieuse.

La meilleure arme d'un développeur Web ou d'un concepteur Web n'est pas l'IDE dans le style d'un char de guerre avec mille armes en plus, c'est un simple éditeur de texte, quelques plugins et la possibilité de taper comme un malade ... à cela ajouter la magie de Codage Zen et ils auront entre les doigts le meilleur outil de marquage jamais créé (au moins pour moi).

Mais ... qu'est-ce que c'est que Codage Zen?

Simple, c'est un plugin spécial qui sert de couche d'abstraction déroulante pour HTML et CSS créés dans javascript et disponible pour de nombreux éditeurs les plus connus (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverEtc).

Aha, je ne comprends toujours pas une sacrée idée de ce que vous dites ...

Je vous montre donc avec un exemple simple; Vous vous souvenez de l'abstraction déroulante? Eh bien, changez-le en rétrécissement, imaginez que vous pouvez prendre une ligne de code HTML / CSS réduite en une seule ligne et la déplier comme un rideau ou la replier ... Vous voulez voir comment? Vous devez simplement vous assurer que vous disposez de deux éléments pour le faire fonctionner:

Avoir Codage Zen installé dans votre éditeur.
Connaissez les commandes et la syntaxe pour l'utiliser.

OK, doigts sur le code:

html>head+body

Vous voyez cette ligne de code? Et bien c'est la syntaxe du HTML, c'est simple:

Vous mettez d'abord le nom de la balise (html), puis vous indiquez quelles balises vont être à l'intérieur de cette balise (>) et ensuite le nom des balises qui vont à l'intérieur de cette balise (tête et corps). Le signe '+' indique que la tête et le corps sont deux étiquettes différentes et que ni l'un ni l'autre n'est contenu dans l'autre, c'est comme dire «ensemble mais pas mélangé«… Ensuite, voyons ce que cette ligne de code génère en appuyant sur les touches magiques (dans mon cas CTRL + E):

Exactement, 4 lignes de code en une seule, qui apparaissent comme par magie lorsque vous appuyez sur la bonne combinaison de touches… et il peut y en avoir beaucoup plus; par exemple:

html>head+body>ul#lista_ordenada>li.listilla*5

Même syntaxe, mais nous ajoutons autre chose… si vous connaissez du CSS, vous vous rendrez compte que nous ajoutons un identifiant, des classes et quelque chose que vous ne saviez sûrement pas; multiplicateurs… c'est quoi tout ça!? Putain, vous me confondez!

Calmez-vous, c'est assez simple, nous avons dit ce qui précède qu'à l'intérieur du corps entrez une balise «ul», rien d'étrange, j'ai expliqué cela ci-dessus, puis, nous attribuons un identifiant, que si vous connaissez CSS vous comprendrez que ceux-ci sont identifiés avec le signe '#', et à l'intérieur de cette liste non ordonnée (ul) nous ajoutons cinq étiquettes avec la classe (classe) listilla, je l'explique brièvement. En fait c'est très simple, '#' indique que c'est un ID, puis 'li.listilla' dit qu'il faut créer un label «li» avec la classe listilla «li class = listilla» et ensuite, on dit «répète ces cinq dernières fois«. Ce qui nous donne en conséquence:

Douze lignes de code écrites sur une seule ligne et en beaucoup moins de temps 😉

Et cela peut aussi être fait avec CSS, même si je ne vais pas allonger l'article en montrant l'évidence (ci-dessous je vais vous passer toute une liste de triches pour Codage Zen).

Je dois souligner que cela ne fonctionne pas pour faire un cent mille lignes en une, oh non, cela a une limite et un moyen d'être utilisé. Si par exemple nous voulons faire quelque chose comme ceci:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

Ce qui en théorie devrait nous donner cela (regardez la ligne en surbrillance dans la dernière image):

Cela nous donnera ceci:

Ce qui montre que vous ne pouvez pas faire de magie avec ça non plus; N'oubliez pas qu'un maître Zen du code doit être précis et rapide, et faire des choses mal faites prend de la vitesse et du temps, donc, la bonne technique pour écrire rapidement et avec Codage Zen serait ceci:

html>head>body>ul#lista_ordenada>li.listilla*5

Vous développez et à l'intérieur de la balise head:

title+meta

Ce qui vous donnerait le bon code:

Bien que le Codage Zen Il a beaucoup plus de choses à vous montrer et peut-être avoir à écrire une autre ligne de commande à l'intérieur de head n'est pas le meilleur, alors nous utilisons une autre commande, «développer avec une abréviation" dans mon cas ctrl + alt + e cela ouvrira une petite barre où nous pourrons écrire du code Zen et voir comment il apparaît en temps réel. Attention, je ne recommande pas d'écrire tout avec ceci mais d'écrire dans les structures déjà créées, c'est-à-dire de créer d'abord les grandes structures et ensuite de les détailler avec cette option.

Et il existe une multitude de commandes super cool dans le Codage Zen, le fait est que vous les étudiez une fois que vous les avez installés et que vous apprenez à les utiliser; Avec ce plugin, vous n'aurez pas besoin de saisie semi-automatique ou d'extraits de code pour css ou html, en fait, avec cela, vous vous rendrez compte que ces options sont une perte de temps totale dans ces deux langages de programmation 😉

Et pour ceux qui sont intéressés, voici le CheatSheet officiel du Codage Zen, vous pouvez le voir au format ODF o PDF juste ICI


20 commentaires, laissez le vôtre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués avec *

*

*

  1. Responsable des données: Miguel Ángel Gatón
  2. Finalité des données: Contrôle du SPAM, gestion des commentaires.
  3. Légitimation: votre consentement
  4. Communication des données: Les données ne seront pas communiquées à des tiers sauf obligation légale.
  5. Stockage des données: base de données hébergée par Occentus Networks (EU)
  6. Droits: à tout moment, vous pouvez limiter, récupérer et supprimer vos informations.

  1.   mafun dit

    Je trouve ça super intéressant!

    Je vais l'essayer à coup sûr!

  2.   mafun dit

    Une question, la forme "tête> corps" ne devrait-elle pas créer un corps à l'intérieur de la tête? Pour obtenir ce que nous voulons, ne devrions-nous pas mettre «tête + corps»?

    Si je suis confus, je suis désolé!

    merci

    1.    nano dit

      Oui, tout nom de balise précédé d'un ">" indique qu'il entre dans le tag précédemment nommé; dans ce cas, comme vous le dites, head> body indique que le corps irait à l'intérieur de la tête, ce que nous savons est incorrect.

      Et oui, la tête plus le corps est comme la concaténation, vous lui dites qu'ils vont dans une autre balise mais qu'aucun d'eux ne va dans l'autre, dans ce cas html> tête + corps

  3.   assurer dit


    amen

  4.   103 dit

    Très, très bien, personnellement, je préfère utiliser des éditeurs de texte brut pour ce genre de chose et Zen Coding car c'est le meilleur que j'ai vu pour HTML.

    J'ai vraiment aimé ceci: html: xt et pour ceux qui veulent anticiper htlm: 5

  5.   auroszx dit

    Hmm, eh bien je n'ai jamais vraiment utilisé de programmes de type Dreamweaver, je dois essayer ce Zen Coding ...

    PS: Ce fond d'écran que vous avez… est-ce par hasard celui que j'ai réalisé?

    1.    nano dit

      Oui mais celui-là DesdeLinux

  6.   Ézael dit

    Très bien, j'ai toujours aimé les éditeurs de texte légers, celui que j'utilise maintenant est Geany et voyant qu'il est soutenu pour la théière magique m'encourage sûrement à l'essayer

  7.   Lupin III dit

    Eh bien, la programmation n'est pas mon truc, ce qui m'a époustouflé a été le bureau, qu'utilisez-vous, gnome 3 ou unity, qu'est-ce que c'est? C'est très très cool, voyons si je laisse le mien similaire
    Si cela ne vous dérange pas de me répondre, je vous en serais très reconnaissant 😀
    PS: oui, je suis de Windows, c'est ce que l'Université a xD

    1.    nano dit

      Unité, avec le thème élémentaire et abaissé l'opacité du panneau.

      1.    Néomito dit

        Je travaille aussi avec Windows, permettez-moi de vous féliciter pour votre bureau est très cool.

  8.   JaszAndré dit

    L'article est très intéressant ... Je le vois très utile. Au fait, l'installation du plugin Zen Coding pour Gedit m'a un peu surpris et c'est que vous devez télécharger le package approprié pour Gedit3. Dans le site officiel de codage Zen, les liens du plugin pour Gedit sont proposés, mais il est obsolète car c'est pour Gedit 2 ce qui rend impossible son utilisation dans la version actuelle Gedit3 selon les instructions d'installation.

    Les plugins Gedit écrits pour la version 2 ne fonctionnent pas dans la nouvelle version 3, car elle utilise GTK3, tandis que Gedit2 utilise GTK2. Pour utiliser un plugin dans Gedit3, vous devez prendre en compte les éléments suivants:

    Nouveau répertoire: ~ / .local / share / gedit / plugins
    L'extension .gedit-plugin doit être renommée .plugin
    Ouvrez le fichier et modifiez l'en-tête [Gedit Plugin] et changez-le en [Plugin]
    Modifiez également IAge = 2 pour IAge = 3

    Ceux qui utilisent Gedit3 peuvent télécharger le plugin Zen Coding à partir du lien ci-dessous:

    https://github.com/mtrovo/zen-coding-gedit3

    J'espère que cela vous sera utile.
    Salutations.

    1.    retour dit

      MERCI, j'ai eu exactement ce problème !!

    2.    alex-m7 dit

      Excellent tu as donné le problème que j'avais! GRAX!

  9.   Élynx dit

    Très utile, bien que pour cette édition en html ou tout autre langage orienté web et autres je préfère BlueFish ou Aptana Studio.

    Salutations!

    1.    nano dit

      Bluefish échoue dans plusieurs domaines, comme la possibilité de personnaliser les raccourcis clavier et d'autres choses, et qu'à ce jour, je ne peux pas faire les citations automatiquement, ce qui me permet de me sortir de beaucoup de problèmes pour avoir oublié plus tard d'en fermer quelques-uns.

      Aptana, ça craint pour moi, il est simplement écrit en Java et a des dépendances qui mettent en danger mon système ... sans oublier que pour moi (comprenez très bien, POUR MOI) Java = merde.

  10.   v3on dit

    Je l'utilise depuis longtemps, recommandé!

  11.   Rafael dit

    Bonjour, article exelene ...
    Je ne veux pas me sentir comme un maître Zen :-), mais l'extension que vous proposez:

    html> tête> titre + méta + corps> ul # liste_ordonnée> li.listilla * 5
    (qui ne se développe pas)

    cela peut être fait correctement avec des parenthèses pour grouper, quelque chose comme ceci:

    html> (tête> titre + méta) + (corps> ul # liste_ordonnée> li.listilla * 5)
    cela se développe comme prévu

    salutations

  12.   Felipe dit

    ce plugin a été abandonné et a été remplacé par emmet (http://emmet.io/)

  13.   Ulises dit

    Quelqu'un sait-il comment je l'installe dans Archlinux pour Kate? Je vous remercie.