Merkintä tai merkintä viittaa merkintä- tai koodauskieliin sellaisenaan HTML ja CSS, ja me kaikki tiedämme, kuinka tuskallista tämä kaikki on avata ja sulkea tarroja yksi kerrallaan verkkomallin luomiseksi ...
Tietysti tähän on olemassa ratkaisuja, yksi niistä on automaattinen täydennys IDE: n kaltaisilla Dreamweaver mierda Sinipunainen ärsyttävää, jos et osta laajennuksia häneltä o Komodo muokata tosi raskas... asia on se, että IDE: t tai koodieditorit, jotka ovat liian täynnä vaihtoehtoja, lopulta estävät työtä käsittämättömillä tavoilla; näin on Dreamweaver joka täyttää sinut graafisesti luomallasi roskakoodilla ja on raskasta, kallista ja rumaa. Sinipunainen se on enimmäkseen ärsyttävää, koska se on ilmainen, ilmainen, mutta puolet vaihtoehdoista on varattu maksullisille käyttäjille ... se ei ole hauskaa. Ja lopuksi meillä on Komodo-muokkaus, joka on melko hyvä, tehokas ja täynnä vaihtoehtoja, mutta se on raskas (100 Mt tyhjäkäynnillä) ja sen asettaminen on työlästä.
Verkkokehittäjän tai verkkosuunnittelijan paras ase ei ole sotatankkien tyyppiset IDE: t, joissa on tuhat asetta, se on yksinkertainen tekstieditori, joitain laajennuksia ja kyky kirjoittaa kuin sairas ihminen ... siihen lisää taika Zen-koodaus ja heillä on sormissaan paras työkalu koskaan luotuun merkintään (ainakin minulle).
Mutta ... mikä helvetti on Zen-koodaus?
Yksinkertainen, se on erityinen laajennus, joka toimii avattavana abstraktikerroksena HTML-koodille ja CSS: lle Javascript ja saatavilla useille tunnetuimmista kustantajista (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverJne.).
Aha, en vieläkään ymmärrä pirun ajatusta mitä sanot ...
Joten näytän sinulle yksinkertaisen esimerkin; Muistatko avattavan abstraktion? Vaihda se kutistumiseen, kuvittele, että voit ottaa rivin HTML / CSS-koodin kokoontaitettuna yhdeksi riviksi ja avata sen verhona tai taittaa sen takaisin ... Haluatko nähdä miten? Sinun on vain varmistettava, että sinulla on kaksi asiaa, jotta se toimisi:
Olla Zen-koodaus asennettu editoriisi.
Tunne komennot ja syntaksit sen käyttämiseksi.
Okei, sormet koodiin:
html>head+body
Näetkö kyseisen koodirivin? No, se on HTML: n syntaksia, se on yksinkertaista:
Ensin laitat tunnisteen nimen (html), sitten ilmoitat mitkä tagit ovat kyseisen tagin sisällä (>) ja sitten tunnisteiden nimet, jotka menevät kyseisen tunnisteen sisään (pää ja runko). + -Merkki osoittaa, että pää ja runko ovat kaksi erilaista etikettiä ja että kumpikaan ei sisälly toiseen, se on kuin sanoa «yhdessä, mutta ei sekoitettu«… Katsotaanpa sitten, mitä tuo koodirivi tuottaa, kun painat maagisia näppäimiä (minun tapauksessani CTRL + E):
Tarkalleen, neljä koodiriviä, jotka on tehty yhdeksi, ilmestyvät maagisesti, kun painat oikeaa näppäinyhdistelmää ... ja niitä voi olla paljon enemmän; esimerkiksi:
html>head+body>ul#lista_ordenada>li.listilla*5
Sama syntaksia, mutta lisäämme jotain muuta ... jos tiedät joitain CSS-tiedostoja, huomaat, että lisäämme tunnuksen, kursseja ja jotain, jota et varmasti tiennyt; kertoimet ... mikä tämä kaikki on? Vittu sinä sekoitat minut!
Rauhoitu, tämä on melko yksinkertaista, kerroimme edellä, että kehon sisällä kirjoita tunniste «ul», ei mitään outoa, selitin tämän yllä, annamme sitten tunnuksen, että jos tiedät CSS: n, ymmärrät, että nämä tunnistetaan merkillä "#", ja siihen järjestämättömään luetteloon (ul) lisätään viisi tarraa luokan (luokan) listilla, selitän tämän lyhyesti. Itse asiassa se on hyvin yksinkertainen, "#" tarkoittaa, että se on tunnus, sitten "li.listilla" sanoo, että meidän on luotava tarra "li" luokan listilla "li class = listilla" ja sitten sanotaan «toista viimeiset viisi kertaa«. Mikä antaa meille seurauksena:
Kaksitoista koodiriviä kirjoitettuna yhdelle riville ja paljon lyhyemmässä ajassa
Ja se voidaan tehdä myös CSS: llä, vaikka en pidennä artikkelia näyttämällä ilmeistä (Alla välitän sinulle koko luettelon huijareista Zen-koodaus).
Minun on korostettava, että tämä ei onnistu tekemään biljoonaa satatuhatta riviä yhdessä, oi ei, tällä on raja ja tapa käyttää sitä. Jos esimerkiksi haluamme tehdä jotain tällaista:
html>head>title+meta+body>ul#lista_ordenada>li.listilla*5
Mitä teoriassa pitäisi antaa meille tämä (katso viimeisen kuvan korostettua viivaa):
Se antaa meille tämän:
Mikä osoittaa, että et voi tehdä taikuutta myöskään; Muista, että koodin zen-päällikön on oltava tarkka ja nopea, ja väärin tehtyjen asioiden tekeminen vie aikaa ja nopeutta, joten oikea tekniikka kirjoittaa nopeasti ja Zen-koodaus olisi tämä:
html>head>body>ul#lista_ordenada>li.listilla*5
Laajenet ja päätunnisteen sisällä:
title+meta
Mikä antaisi sinulle oikean koodin:
Vaikka Zen-koodaus Siinä on paljon muuta näytettävää asiaa, ja ehkä uuden komentorivin kirjoittaminen pään sisälle ei ole paras, joten käytämme toista komentoa «laajentaa lyhenteellä" minun tapauksessani ctrl + alt + e joka avaa pienen palkin, johon voimme kirjoittaa Zen-koodin ja nähdä, miten se näyttää reaaliajassa. Ole varovainen, en suosittele kaiken kirjoittamista tällä tavalla, mutta kirjoittamista jo luotuihin rakenteisiin, tarkoitan, että ensin luot suuret rakenteet ja sitten tarkistat niiden sisällä tällä vaihtoehdolla.
Ja sisällä on monia erittäin hienoja komentoja Zen-koodaus, asia on, että tutkit niitä, kun olet asentanut ne ja opit käyttämään niitä; Tämän laajennuksen avulla et tarvitse automaattista täydennystä tai katkelmia CSS- tai HTML-kielelle, itse asiassa tämän avulla ymmärrät, että nämä vaihtoehdot ovat täydellistä ajanhukkaa näissä kahdessa ohjelmointikielessä
Ja kiinnostuneille, tässä on virallinen CheatSheet of the Zen-koodaus, näet sen muodossa ODF o PDF oikea TÄSTÄ