Aprèn a ser un mestre Zen de l'markup

El markup o marcat, es refereix als llenguatges de marques o etiquetatge com ho són HTML i CSS, I tots sabem el dolorós que és tot això de caminar obrint i tancant etiquetes una per una per poder crear alguna plantilla web ...

És clar que hi ha solucions per això, una d'elles és l'autocompletat amb IDE 's com Dreamweaver merda Grifó blau enutjós si no li compres connectors o Komodo edit bé pesat... la qüestió és que, els IDE 'so editors de codi massa carregats d'opcions acaben moltes vegades entorpint la feina de maneres inimaginables; tal és el cas de Dreamweaver que t'omple de codi escombraries el que generis gràficament i és pesat, car i lleig. Grifó blau és mes que tot enutjós perquè és lliure, gratuït, però la meitat de les opcions estan reservades als usuaris pagaments ... això no és divertit. I finalment tenim a Komodo-edit, Que és bastant bo, potent i ple d'opcions però és pesat (100MB en iddle) i configurar-és empipador.

La millor arma d'un desenvolupador web o d'un dissenyador web no són els IDE 'sa l'estil tanc de guerra amb mil armes a sobre, és un senzill editor de text, alguns plugins i la capacitat d'teclejar com un malalt ... a això agregunele la màgia de Zen Coding i tindran en els seus dits la millor eina per al marcat mai creada (a l'almenys per a mi).

Però ... Què diables és el Zen Coding?

Simple, és un plugin especial que serveix com a capa d'abstracció desplegable per a HTML i CSS creat en Javascript i dispobible per a molts dels editors més famosos (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverEtc.).

Ajá, segueixo sense entendre ni Pepina idea del que dius ...

Llavors t'ho mostro amb un exemple simple; Recordes el d'abstracció desplegable? Bé, canvia-ho per contracció, imagina que pots prendre una línia de codi HTML / CSS contret en una línia i desplegar-com una cortina o tornar-lo a plegar ... Vols veure com? Només has d'assegurar de tenir dues coses perquè funcioni:

Tenir Zen Coding instal·lat en el teu editor.
Conèixer els comandaments i la sintaxi per usar-lo.

Bé, dits a el codi:

html>head+body

Veuen aquesta línia de codi? doncs aquesta és la sintaxi per a HTML, és simple:

Primer poses el nom de l'etiqueta (html) després li indiques que etiquetes estaran dins d'aquesta etiqueta (>) i després el nom de les etiquetes que van dins d'aquesta etiqueta (head i body). El signe de '+' indica que head i body són dues etiquetes diferents i que cap està continguda dins de l'altra, és com dir-li «juntes però tampoc gaire«... llavors, veiem que ens genera aquesta línia de codi a l'pressionar les tecles màgiques (en el meu cas CTRL + E):

Exacte, 4 línies de codi fetes en una sola, que apareixen màgicament a l'utilitzar la combinació de tecles correcta ... i poden ser moltes més; per exemple:

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

Mateixa sintaxi, però li afegim una mica més ... si coneixes una mica de CSS t'adonaràs que estem agregant un ID, classes i, una cosa que segur no coneixies; multiplicadors ... ¿Quina és tot això !? ¡Fotre em confons!

Calma, això és bastant senzill, a l'anterior li vam dir que dins de body ingressi una etiqueta «ul», res estrany, això ho vaig explicar a dalt, després, li assignem un ID, que si saps CSS entendràs que aquests s'identifiquen amb el signe '#', i dins d'aquesta llista desordenada (ul) afegim XNUMX etiquetes amb la classe (class) espavilats, els explico breument això. De fet és molt simple, '#' denota que és un ID, després 'li.listilla' diu que cal crear una etiqueta «li» amb la classe espavilats «li class = espavilats» i després, li diem «repeteix això últim cinc vegades«. El que ens dóna com a resultat:

Dotze línies de codi escrites en una sola línia i en molt menys temps 😉

I això es pot fer també amb CSS, encara que no alargaré l'article mostrant que és obvi (baix els passaré una llista sencera de cheats per Zen Coding).

He de destacar que això no funciona per fer chorrocientasmil línies en una sola, oh no, això té un límit i una manera d'usar-se. Si per exemple volem fer alguna cosa com això:

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

Què, en teoria hauria de donar-nos això (fixar-se en la línia ressaltada de la darrera imatge):

Ens va donar això:

El que demostra que tampoc es pot fer màgia amb això; recordin que un mestre Zen de el codi ha de ser precís i ràpid, i fer coses mal fetes treu velocitat i temps, per la qual cosa, la tècnica correcta per escriure ràpid i amb Zen Coding seria aquesta:

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

Expandeixes i dins de l'etiqueta head:

title+meta

La qual cosa et donaria el codi correcte:

Tot i que el Zen Coding té moltes més coses per mostrar-te i potser haver d'escriure dins head altra línia d'ordres no sigui el millor, per la qual cosa fem servir un altre ordre, «expand with abreviation»En el meu cas ctrl + alt + i que ens obrirà una petita barra a on podrem anar creant programes Zen i veure com apareix en temps real. Ull, no recomano escriure tot amb això sinó escriure dins de les estructures ja creades, o sigui, crea primer les estructures grans i després vas detallant dins d'elles amb aquesta opció.

I hi ha una multitud d'ordres súper interessants dins de l' Zen Coding, La cosa és que els investiguis una vegada que els instal i els aprenguis a fer servir; amb aquest connector no et caldrà autocompletat ni snippets per css o html, de fet, amb això et donaràs compte que aquestes opcions són una total pèrdua de temps dins d'aquests dos llenguatges de programació 😉

I per als interessats, aquí els deixo la CheatSheet oficial de l' Zen Coding, Poden veure-la en format ODF o PDF just AQUÍ


20 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà. Els camps obligatoris estan marcats amb *

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   mafuns va dir

    Em sembla superinteressant!

    Vaig a provar-segur!

  2.   mafuns va dir

    Una pregunta, la forma «head> body» no hauria de crear body dins de head? Per aconseguir el que volem no hauriem posar «head + body»?

    Si estic confudido ho sento!

    Gràcias

    1.    nano va dir

      Sí, qualsevol nom d'etiqueta precedit per un «>» indica que aquesta va dins de l'etiqueta abans esmentada; en aquest cas, com dius, head> body indica que body aniria dins de head, cosa que sabem és incorrecte.

      I sí, head mes body és com concatenar, li dius que van dins d'una altra etiqueta però que cap de les dues va dins de l'altra, en aquest cas html> head + body

  3.   Assuart va dir


    a més

  4.   103 va dir

    Molt, molt bo, en el personal prefereixo utilitzar editors de text pla per a aquest tipus de coses i Zen Coding doncs és el millor que he vist per a HTML.

    Això em va agradar molt: html: xt i per als que es volen avançar htlm: 5

  5.   AurosZx va dir

    Hmm, doncs jo mai he fet servir de veritat programes tipus Dreamweaver, he de provar això de l'Zen Coding ...

    PD: Aquest wallpaper que tens ... de casualitat és el que vaig fer jo?

    1.    nano va dir

      Sí pero el de DesdeLinux

  6.   Eazel va dir

    Molt bo, sempre m'han agradat els editors de text lleugers, el que faig servir ara és Geany i veure que està suportat per la tetera màgica segur que m'anima a provar

  7.   Lupin III va dir

    Bé, això de programar no és el meu, el que m'ha flipat ha estat l'escriptori, que fas servir, gnome 3 o unity, que tema és? aquesta molt molt xulo, a veure si deixo el meu semblant
    Si no us és molèstia respondre'mi estaria molt agraït 😀
    PD: si, estic des windows, és el que té la Universitat xD

    1.    nano va dir

      Unity, amb el tema elementary i baixada l'opacitat de el panell.

      1.    Neomet va dir

        Jo també en el treball estic amb windows, deixa felicitar-te l'escriptori està molt xulo.

  8.   JaszAndre va dir

    Molt interessant l'article ... li veig una gran utilitat. Per cert, la instal·lació de l'connector Zen Coding per Gedit em va prendre alguna cosa desprevingut i és que cal descarregar el paquet adequat per Gedit3. En el lloc oficial de Zen coding s'ofereixen els links d'el connector per Gedit, però no està actualitzat ja que és per Gedit 2 la qual cosa fa impossible usar-lo en la versió actual Gedit3 segons les instruccions d'instalacion.

    Els connectors de Gedit escrits per a la versió 2 no funcionen en la nova versió 3, ja que fa servir GTK3, mentre que Gedit2 fa servir GTK2. Per utilitzar algun connector en Gedit3 cal prendre en compte el següent:

    Nou Directori: ~ / .local / share / gedit / plugins
    La extensió .gedit-connector ha de ser renombrada .plugin
    Obrir l'arxiu i editar la capçalera [Gedit Plugin], i canviar-lo per [Plugin]
    També canviar IAGE = 2 per IAGE = 3

    Aquells que facin servir Gedit3 poden descarregar el plugin Zen Coding de el següent enllaç:

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

    Espero els sigui d'utilitat.
    Salutacions.

    1.    Zad va dir

      GRÀCIES, tenia exactament aquest problema !!

    2.    Alex-m7 va dir

      Excel·lent li vas donar a el problema que tenia! Grax!

  9.   Elynx va dir

    Molt útil, encara que per això d'edicion en html o qualsevol llenguatge orientat a la web i demas prefereixo el Bluefish o el Aptana Studio.

    Salutacions!

    1.    nano va dir

      Bluefish falla en un parell de coses com poder personalitzar dreceres de teclat i aquestes coses, i que fins al sol d'avui no aconsegueixo fer que es autocompleten les cometes, i això em treu molts problemes de sobre per després oblidar-me de tancar un parell.

      Aptana, senzillament és un fàstic per a mi, simplement està escrit en Java i té dependències que posen en perill el meu sistema ... sense esmentar que per a mi (entiendase molt bé, PER MI) Java = merda.

  10.   v3on va dir

    ja porto usant-ho des de fa estona, recomanat!

  11.   Rafael va dir

    Hola, exelene article ...
    no vull sentir-me un mestre Zen :-), però la expanción que proposes:

    html> head> title + meta + body> ul # lista_ordenada> li.listilla * 5
    (Que falla a l'expanderse)

    es pot fer correctament amb parentesis per agrupar, una cosa així:

    html> (head> title + meta) + (body> ul # lista_ordenada> li.listilla * 5)
    això s'expandeix com ho esperao

    salutacions

  12.   Felipe va dir

    aquest connector està s'abandoni i va ser reemplaçat per emmet (http://emmet.io/)

  13.   Ulisses va dir

    Algú sap com ho va instal·lar a Archlinux per kate? Gràcies.