Iemācieties būt dzen meistars uzcenojumiem

Atzīmēšana jeb iezīmēšana attiecas uz iezīmēšanas vai iezīmēšanas valodām, kādas tās ir HTML un CSS, un mēs visi zinām, cik sāpīgi ir atvērt un aizvērt etiķetes pa vienam, lai izveidotu tīmekļa veidni ...

Protams, tam ir risinājumi, viens no tiem ir automātiskā pabeigšana ar līdzīgiem IDE Dreamweaver mierda Blūgrifons kaitina, ja jūs nepērkat no viņa spraudņus o Komodo rediģēt ļoti smags... Lieta ir tāda, ka IDE vai kodu redaktori, kas pārāk ielādēti ar iespējām, bieži vien neiedomājami kavē darbu; tāds ir Dreamweaver kas piepilda jūs ar atkritumu kodu, ko jūs ģenerējat grafiski, un tas ir smags, dārgs un neglīts. Blūgrifons tas galvenokārt ir kaitinošs, jo tas ir bezmaksas, bezmaksas, bet puse no iespējām ir rezervēta apmaksātiem lietotājiem ... tas nav jautri. Un beidzot mums ir Komodo rediģēšana, kas ir diezgan labs, jaudīgs un pilns ar iespējām, taču ir smags (100 MB tukšgaitā), un tā iestatīšana ir garlaicīga.

Labākais tīmekļa izstrādātāja vai tīmekļa dizainera ierocis nav IDE kara tvertnes stilā ar tūkstoš ieročiem virsū, tas ir vienkāršs teksta redaktors, daži spraudņi un spēja rakstīt kā slims cilvēks ... uz to pievienot burvju Zen kodēšana un pirkstos viņiem būs labākais jebkad izveidots marķēšanas rīks (vismaz man).

Bet ... kas pie velna ir Zen kodēšana?

Vienkārši, tas ir īpašs spraudnis, kas kalpo kā nolaižamais abstrakcijas slānis HTML un CSS, kas izveidoti Javascript un pieejams daudziem slavenākajiem izdevējiem (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverUc).

Aha, es joprojām nesaprotu sasodītu ideju, ko tu saki ...

Tāpēc es parādīšu jums vienkāršu piemēru; Vai atceraties nolaižamo abstrakcijas lietu? Nomainiet to uz saraušanos, iedomājieties, ka varat paņemt vienā rindā sakļautu HTML / CSS koda rindiņu un atlocīt to kā aizkaru vai salocīt to atpakaļ ... Vai vēlaties redzēt, kā? Jums vienkārši jāpārliecinās, ka jums ir divas lietas, lai tas darbotos:

Ir Zen kodēšana instalēta jūsu redaktorā.
Pārziniet komandas un sintaksi, lai to izmantotu.

Labi, pieskarieties kodam:

html>head+body

Vai redzēt šo koda rindiņu? Tā ir HTML sintakse, tā ir vienkārša:

Vispirms jūs ievietojat taga nosaukumu (html), pēc tam norādiet, kuri tagi atradīsies šajā tagā (>), un pēc tam to tagu nosaukumu, kas iekļaujas tagā (galva un ķermenis). “+” Zīme norāda, ka galva un ķermenis ir divas atšķirīgas etiķetes un ka neviena no tām nav otrā, tas ir tāpat kā sakot «kopā, bet nav sajaukti«... Tad paskatīsimies, ko šī koda rindiņa ģenerē, nospiežot burvju taustiņus (manā gadījumā CTRL + E):

Tieši 4 koda rindas, kas izveidotas vienā, maģiski parādās, nospiežot pareizo taustiņu kombināciju ... un to var būt daudz vairāk; piemēram:

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

Tā pati sintakse, bet mēs pievienojam kaut ko citu ... ja jūs zināt kādu CSS, jūs sapratīsit, ka mēs pievienojam ID, klases un kaut ko tādu, ko jūs noteikti nezināt; reizinātāji ... kas tas viss! Fuck tu mani mulsini!

Nomierinies, tas ir diezgan vienkārši, mēs teicām iepriekš, ka ķermeņa iekšpusē ievadiet tagu «ul», nekas dīvains, es to paskaidroju iepriekš, pēc tam mēs piešķiram ID, ka, ja jūs zināt CSS, jūs sapratīsit, ka tie tiek identificēti ar zīme "#", un šī nesakārtotā saraksta (ul) iekšpusē mēs pievienojam piecas etiķetes ar klases (klases) listilla, es to īsi izskaidroju. Patiesībā tas ir ļoti vienkārši, “#” apzīmē, ka tas ir ID, tad “li.listilla” saka, ka mums ir jāizveido etiķete “li” ar klases listilla “li class = listilla” un tad mēs sakām “atkārtojiet to pēdējās piecas reizes«. Kas mums to dod:

Divpadsmit koda rindiņas ierakstītas vienā rindā un daudz īsākā laikā 

Un to var izdarīt arī ar CSS, lai gan es nepagarināšu rakstu, parādot acīmredzamo (zemāk es jums nodošu visu sarakstu ar krāpšanos Zen kodēšana).

Man jāuzsver, ka tas nedarbojas, lai vienā izveidotu ziljonu simtu tūkstošu līniju, ak nē, tam ir ierobežojums un veids, kā to izmantot. Piemēram, ja mēs vēlamies darīt kaut ko līdzīgu šim:

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

Kas, teorētiski, mums to vajadzētu dot (apskatiet iezīmēto līniju pēdējā attēlā):

Tas mums dos:

Kas liecina, ka arī ar šo nevar veikt maģiju; Atcerieties, ka koda Zen meistaram jābūt precīzam un ātram, un nepareizi izdarītu lietu atņemšana prasa ātrumu un laiku, tāpēc pareiza tehnika, lai ātri un ar Zen kodēšana būtu šāds:

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

Jūs paplašināt un iekš galvas taga:

title+meta

Kas jums piešķirtu pareizo kodu:

Aunque el Zen kodēšana Tam ir daudz vairāk lietu, ko jums parādīt, un, iespējams, citas komandrindas rakstīšana galvas iekšienē nav labākā, tāpēc mēs izmantojam citu komandu «paplašināt ar saīsinājumu" manā gadījumā ctrl + alt + e tas atvērs nelielu joslu, kur mēs varam rakstīt Zen kodu un redzēt, kā tas parādās reāllaikā. Esiet piesardzīgs, es neiesaku rakstīt visu ar šo, bet rakstīt jau izveidotajās struktūrās, tas ir, vispirms izveidojiet lielās struktūras un pēc tam jūs detalizēti aprakstīsit šo opciju.

Programmā ir daudz ļoti atdzist komandu Zen kodēšana, lieta ir tāda, ka pēc instalēšanas jūs tos izpētāt un iemācāties tos izmantot; Izmantojot šo spraudni, jums nebūs nepieciešama automātiskā pabeigšana vai fragmenti CSS vai HTML, patiesībā ar to jūs sapratīsit, ka šīs opcijas ir pilnīga laika izšķiešana šajās divās programmēšanas valodās

Un tiem, kas interesējas, šeit ir oficiālā CheatSheet Zen kodēšana, to var redzēt formātā ODF o PDF justo ŠEIT