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 uurite neid pärast installimist ja õpite neid kasutama; Selle pistikprogrammiga ei vajata css-i ega HTML-i jaoks automaatset täitmist ega sisulõikeid, tegelikult mõistate sellega, et need valikud raiskavad nende kahe programmeerimiskeele ajakulu kokku 😉
Ja huviliste jaoks on siin ametlik CheatSheet Zen-kodeerimine, näete seda vormingus ODF o pDF õiglane SIIT
Minu arvates on see super huvitav!
Ma proovin seda kindlasti!
Üks küsimus, kas vorm "pea> keha" ei peaks tekitama keha pea sees? Kas mitte seda, mida tahame, kas me ei peaks panema "pea + keha"?
Kui olen segaduses, siis vabandust!
tänan
Jah, mis tahes sildi nimi, millele eelneb ">", näitab, et see läheb eelnevalt nimetatud sildi sisse; sel juhul, nagu te ütlete, pea> keha näitab, et keha läheks pea sisse, mis on meie teada vale.
Ja jah, pea pluss keha on nagu liitmine, ütlete talle, et nad lähevad teise sildi sisse, kuid et kumbki neist ei lähe teise sisse, antud juhul html> pea + keha
Väga, väga hea, isiklikult eelistan ma sellisteks asjadeks kasutada lihttekstiredaktoreid ja Zen-kodeerimist, kuna see on HTML-i jaoks parim.
Mulle meeldis see väga: html: xt ja neile, kes tahavad htlm: 5 ette näha
Hmm, noh, ma pole kunagi Dreamweaveri-laadseid programme kasutanud, pean proovima seda Zen-kodeerimist ...
PS: See tapeet, mis teil on ... on see juhuslikult minu tehtud?
Sí pero el de DesdeLinux
Väga hea, mulle on alati meeldinud kerged tekstiredaktorid, mida ma praegu kasutan Geany ja nähes, et seda toetatakse maagilise teekannu jaoks, julgustab mind kindlasti seda proovima
Noh, programmeerimine pole minu asi, mis on mind puhunud, on olnud töölaud, mida te kasutate, gnome 3 või unity, mis see on? See on väga lahe, et näha, kas jätan oma sarnaseks
Kui te ei viitsi mulle vastata, oleksin väga tänulik 😀
PS: jah, ma olen Windowsist, see on see, mida ülikoolil on xD
Ühtsus koos põhiteemaga ja vähendas paneeli läbipaistmatust.
Ma töötan ka akendega, lubage mul õnnitleda teid töölaual on väga lahe.
Artikkel on väga huvitav ... minu arvates on see väga kasulik. Muide, Zenit kodeerimise pistikprogrammi installimine Geditile tabas mind mõnevõrra üllatusena ja see on see, et peate Gedit3 jaoks alla laadima sobiva paketi. Ametlikul Zen-kodeerimissaidil pakutakse Gediti pistikprogrammi linke, kuid see on vananenud, kuna see on mõeldud Gedit 2-le, mis muudab selle kasutamise võimatuks praeguses versioonis Gedit3 vastavalt installijuhistele.
Versiooni 2 jaoks kirjutatud Gediti pistikprogrammid ei tööta uues versioonis 3, kuna see kasutab GTK3, Gedit2 aga GTK2. Pistikprogrammi kasutamiseks Gedit3-s peate arvestama järgmisega:
Uus kataloog: ~ / .local / share / gedit / plugins
Laiend .gedit-plugin tuleb ümber nimetada .plugin
Avage fail ja muutke päist [Gedit Plugin] ning muutke see väärtuseks [Plugin]
Muutke ka IAge = 2 väärtuseks IAge = 3
Need, kes kasutavad Gedit3, saavad Zen Codingi pistikprogrammi alla laadida allolevalt lingilt:
https://github.com/mtrovo/zen-coding-gedit3
Loodan, et see on teile kasulik.
Tervitused.
AITÄH, mul oli täpselt see probleem !!
Suurepärane, et andsite mulle tekkinud probleemi! GRAX!
Väga kasulik, ehkki selle väljaande jaoks HTML-is või mis tahes veebile orienteeritud keeles ja teistes eelistan BlueFishi või Aptana Stuudiot.
Tervitused!
Bluefish ebaõnnestub mitmes asjas, näiteks on võimalik kohandada klaviatuuri otseteid ja muud, ning et tänaseni ei saa ma hinnapakkumisi automaatselt täita ja see võtab minult palju probleeme, kuna unustasin hiljem paari sulgeda.
Aptana, see on minu jaoks lihtsalt nõme, see on lihtsalt Java-s kirjutatud ja sellel on sõltuvused, mis ohustavad minu süsteemi ... rääkimata sellest, et minu jaoks (mõista väga hästi, MINU EEST) Java = pask.
Olen seda pikka aega kasutanud, soovitatav!
Tere, ekselene artikkel ...
Ma ei taha end tunda zen-meistrina :-), kuid teie pakutav laiendus:
html> head> pealkiri + meta + body> ul # tellitud_loend> li.listilla * 5
(see ei laiene)
seda saab korrektselt teha sulgudega grupeerimiseks, umbes nii:
html> (pea> pealkiri + meta) + (keha> ul # tellitud_loend> li.listilla * 5)
see laieneb ootuspäraselt
osas
see pistikprogramm katkestatakse ja asendati emmetiga (http://emmet.io/)
Kas keegi teab, kuidas ma selle Archeuxisse kate installin? Aitäh.