Naučite se biti zen mojster označevanja

Označevanje ali označevanje se nanaša na jezike za označevanje ali označevanje, kakršni so HTML in CSS, in vsi vemo, kako boleče je odpiranje in zapiranje nalepk eno za drugo za ustvarjanje spletne predloge ...

Za to seveda obstajajo rešitve, ena izmed njih je samodejno dokončanje z IDE-jem Dreamweaver mierda bluegriffon nadležno, če od njega ne kupujete vtičnikov o Komodo uredi zelo težko... Bistvo je, da IDE ali urejevalniki kod, ki so preveč naloženi z možnostmi, pogosto ovirajo delo na nepredstavljive načine; tak primer je Dreamweaver ki vas napolni s kodo za smeti, kar ustvarite grafično, in je težka, draga in grda. bluegriffon večinoma je moteč, ker je brezplačen, brezplačen, vendar je polovica možnosti rezervirana za plačljive uporabnike ... to ni zabavno. In končno imamo Komodo-uredi, ki je precej dober, zmogljiv in poln možnosti, vendar je težek (100 MB v prostem teku) in nastavitev je dolgočasna.

Najboljše orožje spletnega razvijalca ali spletnega oblikovalca niso IDE v slogu vojnega tanka s tisoč orožji na vrhu, to je preprost urejevalnik besedil, nekaj vtičnikov in možnost tipkanja kot bolna oseba ... dodajte čarovnijo Zen kodiranje in v prstih bodo imeli najboljše orodje za označevanje, ki so ga kdajkoli ustvarili (vsaj zame).

Ampak ... kaj za vraga je Zen kodiranje?

Preprosto, gre za poseben vtičnik, ki služi kot spustni plast abstrakcije za HTML in CSS, ustvarjen v Javascript in na voljo mnogim najbolj znanim založnikom (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Itd).

Aha, še vedno ne razumem preklete ideje o tem, kar govoriš ...

Tako vam pokažem s preprostim primerom; Se še spomnite spustne abstrakcije? No, spremenite ga v krčenje, predstavljajte si, da lahko vzamete vrstico kode HTML / CSS, strnjeno v eno vrstico, in jo razgrnete kot zaveso ali zložite nazaj ... Bi radi videli, kako? Prepričati se morate le, da imate dve stvari, da bo to delovalo:

Si Zen kodiranje nameščen v vašem urejevalniku.
Poznajte ukaze in skladnjo za njegovo uporabo.

V redu, prsti do kode:

html>head+body

Vidite to vrstico kode? No, to je sintaksa za HTML, je preprosta:

Najprej vnesete ime oznake (html), nato navedete, katere oznake bodo znotraj te oznake (>) in nato ime oznak, ki gredo znotraj te oznake (glava in telo). Znak "+" pomeni, da sta glava in telo dve različni nalepki in da nobena ne vsebuje druge, je kot če bi rekliskupaj, vendar ne mešano«... Poglejmo potem, kaj ustvari ta vrstica kode s pritiskom na čarobne tipke (v mojem primeru CTRL + E):

Natančno, 4 vrstice kode, narejene v eno, ki se čarobno pojavijo, ko pritisnete pravilno kombinacijo tipk ... in lahko jih je še veliko več; na primer:

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

Ista sintaksa, vendar dodajamo nekaj drugega ... če poznate nekaj CSS, boste ugotovili, da dodajamo ID, razrede in nekaj, česar zagotovo niste vedeli; multiplikatorji ... kaj je vse to!? Jebi me, da me zmedeš!

Pomiri se, to je povsem preprosto, zgoraj smo povedali, da znotraj telesa vpišemo oznako «ul», nič čudnega, to sem razložil zgoraj, potem pa smo dodelili ID, da če poznate CSS, boste razumeli, da so ti identificirani s znak '#' in znotraj tega neurejenega seznama (ul) dodamo pet oznak z listila razreda (razreda), to na kratko razložim. Pravzaprav je zelo preprosto, "#" pomeni, da gre za ID, nato pa "li.listilla" pravi, da moramo ustvariti oznako "li" z razredom "li class = listilla", nato pa rečemo «ponovite to zadnjih petkrat«. Kaj nam daje kot rezultat:

Dvanajst vrstic kode, napisanih v eni vrstici in v veliko manj časa 😉

In to je mogoče storiti tudi s CSS, čeprav članka ne bom podaljšal s prikazom očitnega (spodaj vam bom posredoval cel seznam goljufov za Zen kodiranje).

Moram poudariti, da to ne deluje, če bi v enem milijonu sto tisoč vrstic ustvarili oh, ne, to ima mejo in način uporabe. Če želimo na primer narediti kaj takega:

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

Kaj bi nam teoretično moralo to dati (poglejte poudarjeno vrstico na zadnji sliki):

Dalo nam bo to:

Kar kaže, da tudi s tem ne morete delati čarovnije; Ne pozabite, da mora biti zen-mojster kode natančen in hiter, napačno opravljeno delo pa zahteva hitrost in čas, zato je pravilna tehnika pisanja hitra in Zen kodiranje bi bilo to:

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

Razširite in znotraj oznake glave:

title+meta

Kar bi vam dalo pravilno kodo:

Čeprav Zen kodiranje Pokazati vam mora še veliko stvari in morda pisanje druge ukazne vrstice v glavo ni najboljše, zato uporabimo drug ukaz, «razširiti s kratico" v mojem primeru ctrl + alt + e s tem se bo odprla majhna vrstica, v katero lahko napišemo Zen kodo in si ogledamo, kako je videti v realnem času. Bodite previdni, ne priporočam, da pišete vse s tem, ampak pišite znotraj že ustvarjenih struktur, to je, najprej ustvarite velike strukture, nato pa boste s to možnostjo podrobno razložili.

In znotraj množice je super kul ukazov Zen kodiranje, stvar je v tem, da jih raziščete, ko jih namestite in se naučite uporabljati; S tem vtičnikom ne boste potrebovali samodejnega dokončanja ali odrezkov za css ali html, s tem boste ugotovili, da so te možnosti popolna izguba časa v teh dveh programskih jezikih 😉

In za zainteresirane, tukaj je uradni CheatSheet of Zen kodiranje, lahko vidite v obliki ODF o PDF pošteno TUKAJ


Pustite svoj komentar

Vaš e-naslov ne bo objavljen. Obvezna polja so označena z *

*

*

  1. Za podatke odgovoren: Miguel Ángel Gatón
  2. Namen podatkov: Nadzor neželene pošte, upravljanje komentarjev.
  3. Legitimacija: Vaše soglasje
  4. Sporočanje podatkov: Podatki se ne bodo posredovali tretjim osebam, razen po zakonski obveznosti.
  5. Shranjevanje podatkov: Zbirka podatkov, ki jo gosti Occentus Networks (EU)
  6. Pravice: Kadar koli lahko omejite, obnovite in izbrišete svoje podatke.

  1.   mafuni je dejal

    Se mi zdi super zanimivo!

    Preizkusil bom zagotovo!

  2.   mafuni je dejal

    Eno vprašanje, oblika "glava> telo", ne bi smela ustvariti telesa znotraj glave? Ali ne bi morali, da bi dobili tisto, kar želimo, postaviti "glava + telo"?

    Če sem zmeden mi je žal!

    hvala

    1.    nano je dejal

      Da, katero koli ime oznake, pred katero je ">", pomeni, da gre znotraj prej imenovane oznake; v tem primeru, kot pravite, glava> telo kaže, da bi telo šlo v glavo, za kar vemo, da ni pravilno.

      In ja, glava plus telo je kot združitev, poveš mu, da gresta znotraj druge oznake, vendar nobena ne gre znotraj druge, v tem primeru html> glava + telo

  3.   assuarto je dejal


    amen

  4.   103 je dejal

    Zelo, zelo dobro, osebno raje uporabljam urejevalnike navadnega besedila za takšne stvari in Zen Coding, saj je to najboljše, kar sem jih videl za HTML.

    To mi je bilo zelo všeč: html: xt in za tiste, ki želijo predvideti htlm: 5

  5.   auroszx je dejal

    Hmm, no, nikoli nisem zares uporabljal programov, podobnih Dreamweaverju, preizkusiti moram to Zen Coding ...

    PS: Ta ozadja, ki jih imate ... je slučajno tista, ki sem jo naredil?

    1.    nano je dejal

      Sí pero el de DesdeLinux

  6.   Ezeel je dejal

    Zelo dobro, vedno so mi bili všeč lahki urejevalniki besedil, ta, ki ga zdaj uporabljam, je Geany in ko vidim, da je podprt za čarobni čajnik, me zagotovo spodbuja, da ga preizkusim

  7.   Lupin III je dejal

    No, programiranje ni moja stvar, kar me je razneslo, je namizje, kaj uporabljate, gnome 3 ali enotnost, kaj je to? Zelo je kul, poglejmo, ali bom pustil svojega podobnega
    Če mi ne želite odgovoriti, bi bil zelo hvaležen 😀
    PS: ja, prihajam iz oken, to ima univerza xD

    1.    nano je dejal

      Enotnost, z osnovno temo in znižanje neprosojnosti plošče.

      1.    neomit je dejal

        Delam tudi z okni, naj vam čestitam na namizju je zelo kul.

  8.   jaszandre je dejal

    Članek je zelo zanimiv ... se mi zdi zelo koristen. Mimogrede, namestitev vtičnika Zen Coding za Gedit me je nekoliko ujela in to je, da morate prenesti ustrezen paket za Gedit3. Uradno spletno mesto za kodovanje Zen ponuja povezave do vtičnika za Gedit, vendar je zastarel, tako kot za Gedit 2, kar onemogoča njegovo uporabo v trenutni različici Gedit3 v skladu z navodili za namestitev.

    Vtičniki Gedit, napisani za različico 2, v novi različici 3 ne delujejo, saj uporablja GTK3, medtem ko Gedit2 uporablja GTK2. Za uporabo vtičnika v Gedit3 morate upoštevati naslednje:

    Nov imenik: ~ / .local / share / gedit / plugins
    Razširitev vtičnika .gedit-plug je treba preimenovati v .plugin
    Odprite datoteko in uredite glavo [Gedit Plugin] ter jo spremenite v [Plugin]
    Spremenite tudi IAge = 2 za IAge = 3

    Tisti, ki uporabljajo Gedit3, lahko vtičnik Zen Coding prenesete s spodnje povezave:

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

    Upam, da vam bo koristno.
    Lep pozdrav.

    1.    krma je dejal

      HVALA, imel sem točno to težavo !!

    2.    alex-m7 je dejal

      Odlično, zadeli ste težavo, ki sem jo imel! GRAX!

  9.   elynx je dejal

    Zelo koristno, čeprav imam za to izdajo v html ali katerem koli spletnem jeziku in drugih raje BlueFish ali Aptana Studio.

    Lep pozdrav!

    1.    nano je dejal

      Bluefish ne uspe v nekaj stvareh, na primer pri prilagajanju bližnjic na tipkovnici in podobnih stvareh, in da še danes ne morem narediti narekovajev za samodokončanje, kar mi vzame veliko težav, ker sem pozneje pozabil zapreti par.

      Aptana, zame je preprosto zanič, preprosto je napisano v Javi in ​​ima odvisnosti, ki ogrožajo moj sistem ... da o tem ne govorim (zame zelo dobro razumej ZANO) Java = sranje.

  10.   v3on je dejal

    Uporabljam ga že dolgo, priporočljivo!

  11.   Rafael je dejal

    Pozdravljeni, članek exelene ...
    Nočem se počutiti kot zen mojster :-), ampak razširitev, ki jo predlagate:

    html> glava> naslov + meta + telo> ul # order_list> li.listilla * 5
    (ki se ne razširi)

    to je mogoče pravilno narediti z oklepaji za združevanje, približno tako:

    html> (glava> naslov + meta) + (telo> ul # naročen_list> li.listilla * 5)
    ta se po pričakovanju širi

    pozdrav

  12.   Felipe je dejal

    ta vtičnik se ukine in nadomesti z emmet (http://emmet.io/)

  13.   Ulises je dejal

    Ali kdo ve, kako ga namestim v Archlinux za kate? Hvala vam.