Naučite biti zen majstor markupa

Oznaka ili markup odnosi se na jezike za označavanje ili označavanje kakvi jesu HTML i CSS, i svi znamo koliko je bolno otvarati i zatvarati naljepnice jednu po jednu za stvaranje web predloška ...

Naravno, za to postoje rješenja, jedno od njih je automatsko dovršavanje s IDE-ima Dreamweaver sranje Bluegriffon dosadno ako ne kupujete dodatke od njega o Komodo uredi jako tesko... poanta je u tome što IDE-ovi ili uređivači koda preopterećeni opcijama često na kraju ometaju posao na nezamislive načine; takav je slučaj Dreamweaver koji vas puni kodom za smeće ono što grafički generirate i težak je, skup i ružan. Bluegriffon uglavnom je dosadno jer je besplatno, besplatno, ali polovina opcija rezervirana je za plaćene korisnike ... to nije zabavno. I konačno jesmo Komodo-uredi, koji je prilično dobar, moćan i pun mogućnosti, ali je težak (100 MB u praznom hodu) i postavljanje je zamorno.

Najbolje oružje web programera ili web dizajnera nisu IDE-ovi u stilu ratnog tenka s tisuću oružja na vrhu, to je jednostavan uređivač teksta, neki dodaci i mogućnost kucanja poput bolesne osobe ... tome dodaje magija Zen kodiranje i u prstima će imati najbolji alat za označavanje ikad stvoren (bar za mene).

Ali ... koji je to vrag Zen kodiranje?

Jednostavno, to je poseban dodatak koji služi kao padajući sloj apstrakcije za HTML i CSS kreirane u Javascript i dostupan mnogim najpoznatijim izdavačima (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, itd.).

Aha, još uvijek ne razumijem prokletu ideju šta govoriš ...

Pokazaću vam na jednostavnom primjeru; Sjećate se padajuće apstrakcije? Pa, promijenite ga u skupljanje, zamislite da možete uzeti red HTML / CSS koda sažet u jedan redak i razviti ga poput zavjese ili preklopiti natrag ... Želite li vidjeti kako? Samo morate biti sigurni da imate dvije stvari da bi to uspjelo:

tener Zen kodiranje instaliran u vašem uređivaču.
Znajte naredbe i sintaksu da biste ih koristili.

Ok, prsti na kodu:

html>head+body

Vidite tu liniju koda? Pa to je sintaksa za HTML, ona je jednostavna:

Prvo stavite ime oznake (html), zatim naznačite koje će oznake biti unutar te oznake (>), a zatim ime oznaka koje idu unutar te oznake (glava i tijelo). Znak '+' označava da su glava i tijelo dvije različite oznake i da nijedna nije sadržana u drugoj, to je kao da kažete «zajedno, ali ne i miješano«... Onda, hajde da vidimo šta ta linija koda generira pritiskom na čarobne tastere (u mom slučaju CTRL + E):

Tačno, 4 retka koda pretvorena u jedan, koji se magično pojavljuju kada pritisnete ispravnu kombinaciju tastera ... a može ih biti i mnogo više; na primjer:

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

Ista sintaksa, ali dodajemo još nešto ... ako znate nešto o CSS-u shvatit ćete da dodajemo ID, klase i nešto što sigurno niste znali; multiplikatori ... šta je sve ovo!? Jebi me, zbunjuješ me!

Smiri se, ovo je vrlo jednostavno, gore smo rekli da unutar tijela unesite oznaku «ul», ništa čudno, objasnio sam ovo gore, zatim dodijeljujemo ID, da ako znate CSS shvatit ćete da su oni identificirani sa znakom '#', a unutar te nesređene liste (ul) dodajemo pet oznaka s listom klase (klase), ukratko to objašnjavam. Zapravo je vrlo jednostavno, '#' označava da je to ID, onda 'li.listilla' kaže da moramo stvoriti oznaku "li" s klasom smarty "li class = smarty", a zatim kažemo "ponovite to posljednjih pet puta«. Šta nam daje kao rezultat:

Dvanaest linija koda napisano u jednom retku i za mnogo manje vremena 😉

A to se može učiniti i sa CSS-om, iako neću produžiti članak pokazujući očigledno (u nastavku ću vam poslati čitav spisak varalica za Zen kodiranje).

Moram naglasiti da ovo ne uspijeva napraviti milijardu stotina hiljada redaka u jednom, oh ne, ovo ima ograničenje i način na koji se koristi Ako na primjer želimo učiniti nešto poput ovoga:

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

Šta bi nam u teoriji trebalo dati ovo (pogledajte istaknutu liniju na posljednjoj slici):

To će nam dati ovo:

Što pokazuje da ni s ovim ne možete raditi magiju; Imajte na umu da Zen majstor koda mora biti precizan i brz, a činjenje pogrešno urađenih stvari oduzima brzinu i vrijeme, stoga ispravna tehnika pisanja brzo i sa Zen kodiranje bi bilo ovo:

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

Proširite i unutar oznake glave:

title+meta

Što bi vam dalo tačan kod:

Iako Zen kodiranje Ima još mnogo stvari da vam pokaže, a možda i pisanje druge naredbene linije u glavu nije najbolje, pa koristimo drugu naredbu, «proširiti skraćenicom" u mom slučaju ctrl + alt + e to će otvoriti malu traku u koju možemo napisati Zen kod i vidjeti kako se on pojavljuje u stvarnom vremenu. Budite oprezni, ne preporučujem da sve pišete s ovim, već da pišete u već stvorenim strukturama, tj. Prvo stvorite velike strukture, a zatim ćete detaljno detaljno opisati ovu opciju.

A u sustavu postoji mnoštvo super cool naredbi Zen kodiranje, stvar je u tome što ih istražujete nakon što ih instalirate i naučite ih koristiti; S ovim dodatkom neće vam trebati automatsko dovršavanje ili isječci za css ili html, zapravo, s tim ćete shvatiti da su ove opcije totalno gubljenje vremena unutar ova dva programska jezika

A za zainteresirane, evo službenog CheatSheet-a Zen kodiranje, možete ga vidjeti u formatu ODF o PDF fer OVDE


Sadržaj članka pridržava se naših principa urednička etika. Da biste prijavili grešku, kliknite ovdje.

20 komentara, ostavi svoj

Ostavite komentar

Vaša e-mail adresa neće biti objavljena. Obavezna polja su označena sa *

*

*

  1. Za podatke odgovoran: Miguel Ángel Gatón
  2. Svrha podataka: Kontrola neželjene pošte, upravljanje komentarima.
  3. Legitimacija: Vaš pristanak
  4. Komunikacija podataka: Podaci se neće dostavljati trećim stranama, osim po zakonskoj obavezi.
  5. Pohrana podataka: Baza podataka koju hostuje Occentus Networks (EU)
  6. Prava: U bilo kojem trenutku možete ograničiti, oporaviti i izbrisati svoje podatke.

  1.   mafuns rekao je

    Super mi je zanimljivo!

    Probaću sigurno!

  2.   mafuns rekao je

    Jedno pitanje, oblik "glava> tijelo" ne bi trebao stvoriti tijelo unutar glave? Da bismo dobili ono što želimo, ne bismo li trebali staviti "glava + tijelo"?

    Ako sam zbunjen žao mi je!

    hvala

    1.    nano rekao je

      Da, bilo koje ime oznake kojem prethodi ">" označava da se uklapa u prethodno imenovanu oznaku; u ovom slučaju, kao što kažete, head> body ukazuje da bi tijelo ušlo u glavu, za što znamo da je netačno.

      I da, glava plus tijelo je poput spajanja, kažete im da ulaze u drugu oznaku, ali da nijedno od njih ne ulazi u drugu, u ovom slučaju html> glava + tijelo

  3.   Asuarto rekao je


    Amen

  4.   103 rekao je

    Vrlo, vrlo dobro, osobno više volim koristiti urednike u običnom tekstu za takve stvari i Zen Coding, jer je to najbolje što sam vidio za HTML.

    Zaista mi se svidjelo ovo: html: xt i za one koji žele predvidjeti htlm: 5

  5.   AurosZx rekao je

    Hmm, dobro, nikad nisam koristio programe slične Dreamweaveru, moram isprobati ovo Zen Coding ...

    PS: Ta tapeta koju imate ... je li slučajno ona koju sam napravio?

    1.    nano rekao je

      Da, ali onaj iz FromLinuxa

  6.   Ezael rekao je

    Vrlo dobro, uvijek sam volio lagane uređivače teksta, ovaj koji sada koristim je Geany a vidjevši da je podržan za čarobni čajnik sigurno me ohrabruje da ga probam

  7.   Lupine III rekao je

    Pa, programiranje nije moja stvar, ono što me oduševilo je radna površina, šta koristite, gnome 3 ili jedinstvo, šta je to? Vrlo je super, vidjeti da li i ja ostavljam svoje slično
    Ako nemate ništa protiv da mi odgovorite, bio bih vam vrlo zahvalan 😀
    PS: da, ja sam iz prozora, to je ono što Univerzitet ima xD

    1.    nano rekao je

      Jedinstvo, s osnovnom temom i smanjenom neprozirnošću panela.

      1.    Neomito rekao je

        I ja radim sa Windowsima, dozvolite mi da vam čestitam na vašoj radnoj površini je super.

  8.   JaszAndre rekao je

    Članak je vrlo zanimljiv ... Vidim ga vrlo korisnim. Inače, instalacija dodatka Zen Coding za Gedit donekle me iznenadila, a to je da morate preuzeti odgovarajući paket za Gedit3. Na službenoj web lokaciji za kodiranje Zen nude se veze dodatka za Gedit, ali je zastario jer je za Gedit 2 što onemogućava upotrebu u trenutnoj verziji Gedit3 prema uputama za instalaciju.

    Gedit dodaci napisani za verziju 2 ne rade u novoj verziji 3, jer koristi GTK3, dok Gedit2 koristi GTK2. Da biste koristili dodatak u Gedit3, morate uzeti u obzir sljedeće:

    Novi direktorij: ~ / .local / share / gedit / plugins
    Dodatak .gedit-plugin mora se preimenovati u .plugin
    Otvorite datoteku i uredite zaglavlje [Gedit Plugin] i promijenite ga u [Plugin]
    Također promijenite IAge = 2 za IAge = 3

    Oni koji koriste Gedit3 mogu preuzeti dodatak Zen Coding sa donjeg linka:

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

    Nadam se da će vam biti korisno.
    Pozdrav.

    1.    krma rekao je

      HVALA, imao sam upravo taj problem !!

    2.    Alex-m7 rekao je

      Izvrsno, dali ste problem koji sam imao! GRAX!

  9.   Elynx rekao je

    Vrlo korisno, iako za ovo izdanje u html-u ili bilo kojem web-orijentiranom jeziku i drugima preferiram BlueFish ili Aptana Studio.

    Pozdrav!

    1.    nano rekao je

      Bluefish ne uspijeva u nekoliko stvari, poput mogućnosti prilagođavanja prečica na tastaturi i ostalog, te da do danas ne mogu učiniti da se citati dovršavaju automatski, a to me izbacuje iz puno problema za kasnije zaboraviti zatvoriti par.

      Aptana, za mene je jednostavno sranje, jednostavno je napisano na Javi i ima zavisnosti koje ugrožavaju moj sistem ... a da ne spominjem da je za mene (razumijem jako dobro ZA MENE) Java = sranje.

  10.   v3on rekao je

    Koristim ga već duže vrijeme, preporučljivo!

  11.   Rafael rekao je

    Pozdrav, članak exelene ...
    Ne želim se osjećati kao Zen majstor :-), ali proširenje koje predlažete:

    html> glava> naslov + meta + tijelo> ul # poredani_list> li.listilla * 5
    (koji se ne proširuje)

    to se može pravilno napraviti sa zagradama za grupiranje, otprilike ovako:

    html> (glava> naslov + meta) + (tijelo> ul # poredani_list> li.listilla * 5)
    ovo se proširuje kako se očekivalo

    pozdravi

  12.   felipe rekao je

    ovaj dodatak je ukinut i zamijenjen je emmet (http://emmet.io/)

  13.   Ulises rekao je

    Zna li neko kako ga instaliram u Archlinux za kate? Hvala ti.