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 sve ovo 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 mierda Plavi grifon dosadno ako od njega ne kupite dodatke o Komodo uredi vrlo teško... 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 ispunjava kodom za smeće ono što grafički generirate i težak je, skup i ružan. Plavi grifon uglavnom je dosadno jer je besplatno, besplatno, ali polovica opcija rezervirana je za plaćene korisnike ... to nije zabavno. I konačno imamo 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 tipkanja poput bolesne osobe ... tome dodaju čaroliju Zen kodiranje i u prstima će imati najbolji alat za označavanje koji je ikad stvoren (barem za mene).

Ali ... koji je to vrag Zen kodiranje?

Jednostavan, to je poseban dodatak koji služi kao padajući sloj apstrakcije za HTML i CSS stvoren u Loše i dostupna mnogim najpoznatijim izdavačima (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Itd).

Aha, još uvijek ne razumijem vražju ideju što govoriš ...

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

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

Ok, prsti do koda:

html>head+body

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

Prvo stavite ime oznake (html), a zatim naznačite koje će oznake biti unutar te oznake (>), a zatim naziv 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 pomiješani«... Onda, hajde da vidimo što taj redak koda generira pritiskom na čarobne tipke (u mom slučaju CTRL + E):

Točno, 4 retka koda pretvorena u jedan, koji se čarobno pojavljuju kad pritisnete ispravnu kombinaciju tipki ... 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 neki CSS, shvatit ćete da dodajemo ID, klase i nešto što zasigurno niste znali; multiplikatori ... što je sve ovo!? Jebi me što me zbunjuješ!

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

Dvanaest redaka 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čito (u nastavku ću vam poslati cijeli popis varalica za Zen kodiranje).

Moram naglasiti da ovo ne uspijeva stvoriti milijun stotina tisuća 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

Što bi nam u teoriji trebalo dati ovo (pogledajte istaknuti redak 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 odrađ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širujete i unutar oznake glave:

title+meta

Što bi vam dalo točan kôd:

Iako Zen kodiranje Ima vam još mnogo stvari za pokazati, a možda i pisanje drugog naredbenog retka u glavu nije najbolje, pa koristimo drugu naredbu, «proširiti kraticom" 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, ali pišite u već stvorenim strukturama, mislim, prvo stvorite velike strukture, a zatim ćete s njima odabrati detalje.

A u sustavu Windows Vista 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, ovdje je službeni CheatSheet of Zen kodiranje, možete ga vidjeti u formatu ODF o PDF Justo OVDJE