Õppige olema Zen-i märgistamise meister

Märgistus või märgistus viitab märgistus- või sildikeeltele sellistena, nagu need on HTML ja CSSja me kõik teame, kui valus on veebimalli loomiseks sildid ükshaaval avada ja sulgeda ...

Muidugi on selleks lahendusi, üks neist on automaatne lõpetamine IDE-sarnastega Dreamweaver mierda Sinilill tüütu, kui te temalt pistikprogramme ei osta o Komodo muutmine väga raske... mõte on selles, et liiga valikutega koormatud IDE-d või koodiredaktorid takistavad sageli tööd mõeldamatutel viisidel; selline on Dreamweaver mis täidab teid graafiliselt genereeritava prügikoodiga ja on raske, kallis ja kole. Sinilill see on enamasti tüütu, sest see on tasuta, tasuta, kuid pooled võimalused on reserveeritud tasulistele kasutajatele ... see pole lõbus. Ja lõpuks oleme Komodo-redigeeri, mis on üsna hea, võimas ja võimalusi täis, kuid see on raske (100mb tühikäigul) ja selle seadistamine on tüütu.

Veebiarendaja või veebidisaineri parim relv ei ole sõjatanki stiilis IDE, millel on tuhat relva, see on lihtne tekstiredaktor, mõned pistikprogrammid ja oskus haige inimesena kirjutada lisada võlu Zen-kodeerimine ja neil on sõrmedes parim loodud tööriist märgistamiseks (vähemalt minu jaoks).

Aga ... mis kurat see on Zen-kodeerimine?

Lihtne, see on spetsiaalne pistikprogramm, mis toimib rippmenüüst abstraktsioonikihina HTML-i ja CSS-i jaoks Javascript ja saadaval paljudele kuulsamatele kirjastajatele (märkmik ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverJne).

Ahaa, ma ei saa ikka veel aru neetust, mida sa ütled ...

Nii et ma näitan teile lihtsa näite abil; Kas mäletate rippmenüüst abstraktsiooni? Noh, muutke see kokkutõmbumiseks, kujutage ette, et võite võtta ühte rida HTML / CSS-koodi, mis on kokku varisenud, ühe kardina lahti lahti või voltida tagasi ... Kas soovite näha, kuidas? Selle toimimiseks peate lihtsalt veenduma, et teil on kaks asja:

Olema Zen-kodeerimine teie redaktorisse installitud.
Teadke selle kasutamiseks käske ja süntaksit.

Olgu, näpud koodi juurde:

html>head+body

Kas näete seda koodirida? See on HTML-i süntaks, see on lihtne:

Kõigepealt panete sildi nime (html), seejärel märkite, millised sildid selle sildi sisse jäävad (>), ja seejärel siltide nimi, mis lähevad selle sildi sisse (pea ja keha). Märk "+" näitab, et pea ja keha on kaks erinevat silti ja et kumbki pole teises, see on nagu öeldes «koos, kuid pole segatud«... Vaatame siis, mida see koodirida võluklahvide (minu puhul CTRL + E):

Täpselt, 4 koodirida, mis on tehtud üheks, mis ilmuvad võluväel, kui vajutate õiget klahvikombinatsiooni ... ja neid võib olla palju rohkem; näiteks:

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

Sama süntaks, kuid lisame veel midagi ... kui teate midagi CSS-ist, mõistate, et lisame ID-d, klassid ja midagi, mida te kindlasti ei teadnud; kordajad ... mis see kõik on!? Kurat, et ajate mind segadusse!

Rahune, see on üsna lihtne, me ütlesime ülaltoodule, et keha sees sisestage silt «ul», pole midagi imelikku, ma selgitasin seda eespool, siis määrame selle, siis määrame ID, et kui teate CSS-i, mõistate, et need on samastatud märk "#" ja selle korrastamata loendi (ul) sisse lisame viis sildi koos klassi (klassi) listillaga, selgitan seda lühidalt. Tegelikult on see väga lihtne, tähistab "#", et see on ID, siis "li.listilla" ütleb, et peame looma sildi "li" klassiga listilla "li class = listilla" ja siis ütleme "korrake seda viis korda«. Mis annab meile selle tulemusena:

Kaksteist koodirida, mis on kirjutatud ühele reale ja palju lühema ajaga 

Ja seda saab teha ka CSS-iga, kuigi ma ei pikenda artiklit, ilmutades ilmset (allpool edastan teile terve nimekirja pettustest Zen-kodeerimine).

Pean rõhutama, et see ei toimi, et teha ühte tuhat tuhat rida, oh ei, sellel on piir ja viis seda kasutada. Näiteks kui me tahame midagi sellist teha:

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

Mis teoreetiliselt peaks meile selle andma (vaadake viimase pildi esiletõstetud joont):

See annab meile selle:

Mis näitab, et ka sellega ei saa maagiat teha; Pidage meeles, et Zen-koodimeister peab olema täpne ja kiire ning valesti tehtud asjade tegemine võtab aega ja kiirust, mistõttu õige tehnika, millega kiiresti ja koos kirjutada Zen-kodeerimine oleks see:

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

Laiendate ja peatunnistuse sees:

title+meta

Mis annaks teile õige koodi:

Kuigi Zen-kodeerimine Sellel on teile veel palju asju näidata ja võib-olla pole kõige parem see, kui peate teise käsurea kirjutama, nii et me kasutame teist käsku «laienda lühendiga" minu puhul ctrl + alt + e see avab väikese riba, kuhu saame kirjutada Zen-koodi ja vaadata, kuidas see reaalajas kuvatakse. Olge ettevaatlik, ma ei soovita sellega kõike kirjutada, vaid kirjutada juba loodud struktuuridesse, see tähendab, et kõigepealt looge suured struktuurid ja siis täpsustate selle valiku abil nende sees.

Ja seal on palju ülilahedaid käske Zen-kodeerimine, asi on selles, et pärast installimist uurite neid ja õpite neid kasutama; Selle pistikprogrammiga ei vaja te CSS-i või HTML-i jaoks automaatset lõpetamist ega katkendeid, tegelikult saate sellega aru, et need valikud on nende kahe programmeerimiskeele puhul täielik ajaraiskamine

Ja huviliste jaoks on siin ametlik CheatSheet Zen-kodeerimine, näete seda vormingus ODF o pDF õiglane SIIT