Išmokite būti „Zen“ žymėjimo meistru

Žymėjimas arba žymėjimas nurodo žymėjimo ar žymėjimo kalbas tokias, kokios jos yra HTML ir CSS, ir visi žinome, kaip skaudu po vieną atidaryti ir uždaryti etiketes, norint sukurti žiniatinklio šabloną ...

Žinoma, tam yra sprendimų, vienas iš jų yra automatinis užbaigimas su panašiais į IDE Dreamweaver mierda Mėlynasis grifas erzina, jei iš jo neperki papildinių o Komodo redaguoti labai sunkus... Esmė ta, kad IDE ar kodų redaktoriai, per daug apkrauti pasirinkimais, dažnai trukdo dirbti neįsivaizduojamais būdais; toks yra Dreamweaver kuris užpildo jus šiukšlių kodu, kurį generuojate grafiškai, ir yra sunkus, brangus ir negražus. Mėlynasis grifas tai dažniausiai erzina, nes yra nemokama, nemokama, tačiau pusė variantų rezervuota mokamiems vartotojams ... tai nėra smagu. Ir pagaliau mes turime Komodo-redaguoti, kuris yra gana geras, galingas ir kupinas galimybių, tačiau yra sunkus (100 MB tuščiąja eiga), o jo nustatymas yra varginantis.

Geriausias žiniatinklio kūrėjo ar interneto dizainerio ginklas nėra karo tanko stiliaus IDE su tūkstančiu ginklų viršuje, tai yra paprastas teksto redaktorius, kai kurie papildiniai ir galimybė spausdinti kaip ligotas žmogus ... pridėti magija „Zen“ kodavimas ir jie turės savo pirštuose geriausią kada nors sukurtą žymėjimo įrankį (bent jau man).

Bet ... koks velnias yra „Zen“ kodavimas?

Paprasta, tai yra specialus papildinys, kuris yra išskleidžiamasis HTML ir CSS abstrakcijos sluoksnis, sukurtas Javascript ir prieinama daugeliui garsiausių leidėjų („notepad ++“, „Komodo-edit“, Gedit, Kate, „Bluefish“, „Geany“, „Dreamweaver“Ir kt.)

Aha, aš vis dar nesuprantu nė vienos minties, ką tu sakai ...

Taigi aš jums parodysiu paprastą pavyzdį; Pamenate išskleidžiamąjį abstrakcijos dalyką? Na, pakeiskite jį į susitraukimą, įsivaizduokite, kad galite paimti į vieną eilutę sugriuvusią HTML / CSS kodo eilutę ir išskleisti ją kaip užuolaidą arba atlenkti atgal ... Norite pamatyti, kaip? Jūs tiesiog turite įsitikinti, kad turite du dalykus, kad tai veiktų:

Turėti „Zen“ kodavimas įdiegta jūsų redaktoriuje.
Žinokite komandas ir sintaksę, kad galėtumėte juos naudoti.

Gerai, pirštais laikykitės kodo:

html>head+body

Matyti tą kodo eilutę? Na, tai yra HTML sintaksė, paprasta:

Pirmiausia įdėkite žymos pavadinimą (html), tada nurodysite, kurios žymos bus tos žymos viduje (>) ir tada žymių, einančių į tą žymą, pavadinimą (galva ir kūnas). „+“ Ženklas rodo, kad galva ir kūnas yra dvi skirtingos etiketės ir kad nė viena nėra kitoje, tai tarsi sakoma «kartu, bet nemaišyti«... Tada pažiūrėkime, ką ta kodo eilutė sukuria paspaudus magiškuosius klavišus (mano atveju CTRL + E):

Tiksliai, 4 kodo eilutės, sudarytos į vieną, stebuklingai pasirodys paspaudus teisingą klavišų kombinaciją ... ir jų gali būti daug daugiau; pavyzdžiui:

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

Ta pati sintaksė, bet mes pridedame dar ką nors ... jei žinote keletą CSS, suprasite, kad pridedame ID, klases ir tai, ko jūs tikrai nežinojote; daugikliai ... kas visa tai! Šūdas, tu mane supainiok!

Nusiramink, tai yra gana paprasta, mes pasakėme aukščiau, kad kūno viduje įveskite žymą „ul“, nieko keisto, aš tai paaiškinau aukščiau, tada mes priskyrėme ID, kad, jei žinote CSS, suprasite, kad jie yra identifikuojami su ženklą „#“, o to nesutvarkyto sąrašo (ul) viduje pridedame penkias etiketes su klasės (klasės) listilla, trumpai tai paaiškinu. Tiesą sakant, tai labai paprasta, „#“ reiškia, kad tai yra ID, tada „li.listilla“ sako, kad mes turime sukurti etiketę «li» su klasės listilla «li class = listilla» ir tada sakome «pakartokite paskutinius penkis kartus«. Kas mums tai duoda:

Dvylika kodo eilučių, parašytų vienoje eilutėje ir per daug trumpesnį laiką 😉

Tai galima padaryti ir naudojant CSS, nors nepailgsiu straipsnio rodydamas akivaizdų (Žemiau aš jums pateiksiu visą kodų sąrašą „Zen“ kodavimas).

Turiu pabrėžti, kad tai neveikia, kad padarytumėme milijardą šimtų tūkstančių eilučių vienoje, o ne, tai turi ribą ir būdą, kaip ją naudoti. Pavyzdžiui, jei norime padaryti ką nors panašaus:

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

Kas teoriškai turėtų mums tai suteikti (pažiūrėkite į paryškintą eilutę paskutiniame paveikslėlyje):

Tai suteiks mums tai:

Tai rodo, kad ir tuo negalima užsiimti magija; Atminkite, kad „Zen“ kodo meistras turi būti tikslus ir greitas, o neteisingai atliktų darbų atlikimas reikalauja laiko ir greičio. „Zen“ kodavimas būtų tai:

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

Išplečiate ir viduje antraštės:

title+meta

Kuris suteiks jums teisingą kodą:

Nors „Zen“ kodavimas Joje yra daug daugiau dalykų, kuriuos jums reikia parodyti, ir galbūt ne pats geriausias dalykas yra parašyti kitą komandinę eilutę galvos viduje, todėl naudojame kitą komandą «išplėsti sutrumpinus" Mano atveju „ctrl“ + „alt“ + e tai atvers nedidelę juostą, kur galėsime parašyti „Zen“ kodą ir pamatyti, kaip jis atrodo realiuoju laiku. Būkite atsargūs, nerekomenduoju rašyti visko tuo, bet rašyti jau sukurtose struktūrose, turiu omenyje, pirmiausia sukurkite dideles struktūras ir tada išsamiai aprašysite jose naudodamiesi šia galimybe.

Programoje yra daugybė super šaunių komandų „Zen“ kodavimas, dalykas yra tai, kad jūs juos ištirsite, kai juos įdiegsite, ir išmoksite jais naudotis; Naudojant šį papildinį jums nereikės automatinio užbaigimo ar fragmentų, skirtų css ar html, iš tikrųjų, naudodami tai suprasite, kad šios parinktys yra visiškas laiko švaistymas šiose dviejose programavimo kalbose 😉

Ir tiems, kurie domisi, čia yra oficialus „CheatSheet“ „Zen“ kodavimas, galite pamatyti formatą ODF o PDF tiesiog ČIA


20 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   mafūnai sakė

    Manau, kad tai labai įdomu!

    Aš tikrai išbandysiu!

  2.   mafūnai sakė

    Vienas klausimas, ar forma „galva> kūnas“ neturėtų sukurti kūno kūno viduje? Norėdami gauti tai, ko norime, neturėtume dėti „galva + kūnas“?

    Jei esu supainiotas, atsiprašau!

    Ačiū

    1.    nanotechnologijų sakė

      Taip, bet koks žymos pavadinimas, prieš kurį rašoma „>“, rodo, kad jis patenka į anksčiau pavadintą žymą; šiuo atveju, kaip jūs sakote, galva> kūnas rodo, kad kūnas eitų į galvą, o tai, mes žinome, yra neteisinga.

      Taip, galva plius kūnas yra tarsi sujungimas, sakote, kad jie eina į kitą žymą, bet nė vienas iš jų nepatenka į kitą, šiuo atveju html> galva + kūnas

  3.   assuarto sakė


    amen

  4.   103 sakė

    Labai, labai gerai, asmeniškai aš norėčiau naudoti paprasto teksto redaktorius tokiems dalykams ir „Zen Coding“, nes tai yra geriausia, ką mačiau HTML.

    Man tai labai patiko: html: xt ir tiems, kurie nori numatyti htlm: 5

  5.   „AurosZx“ sakė

    Hmm, gerai, aš niekada nesinaudojau „Dreamweaver“ tipo programomis, turiu išbandyti šį „Zen“ kodavimą

    PS: Tas tapetai, kuriuos turite ... ar aš juos padariau?

    1.    nanotechnologijų sakė

      Sí pero el de DesdeLinux

  6.   Ezaelis sakė

    Labai gerai, man visada patiko lengvi teksto redaktoriai, tas, kurį dabar naudoju Geany ir pamačiusi, kad jis palaikomas stebuklingam arbatinukui, mane tikrai skatina išbandyti

  7.   Lupin III sakė

    Na, programavimas nėra mano dalykas, kas mane nuvertino, buvo darbalaukis, ką jūs naudojate, „gnome 3“ ar „unity“, kas tai? Tai labai labai šaunu, pažiūrėkime, ar paliksiu savo panašų
    Jei neprieštarausite man atsakyti, būčiau labai dėkinga 😀
    PS: taip, aš esu iš „Windows“, tai yra tai, ką universitetas turi xD

    1.    nanotechnologijų sakė

      Vienybė, turinti elementarią temą ir sumažinanti skydo neskaidrumą.

      1.    neomitas sakė

        Aš taip pat dirbu su „Windows“, leiskite man pasveikinti jus, kad jūsų darbalaukyje yra labai šaunu.

  8.   jaszandre sakė

    Straipsnis labai įdomus ... Matau, kad jis labai naudingas. Beje, „Zen Coding“ papildinio įdiegimas „Gedit“ mane šiek tiek nustebino ir tai yra tai, kad jūs turite atsisiųsti atitinkamą „Gedit3“ paketą. Nuorodos į „Gedit“ įskiepį siūlomos oficialioje „Zen“ kodavimo svetainėje, tačiau ji yra pasenusi, kaip ir „Gedit 2“, todėl neįmanoma jo naudoti dabartinėje „Gedit3“ versijoje pagal diegimo instrukcijas.

    2 versijai parašyti „Gedit“ papildiniai neveiks naujojoje 3 versijoje, nes jis naudoja GTK3, o „Gedit2“ - GTK2. Norėdami naudoti „Gedit3“ papildinį, turite atsižvelgti į šiuos dalykus:

    Naujas katalogas: ~ / .local / share / gedit / plugins
    Plėtinys .gedit-plugin turi būti pervadintas į .plugin
    Atidarykite failą ir redaguokite antraštę [Gedit Plugin] ir pakeiskite ją į [Plugin]
    Taip pat pakeiskite IAge = 2, jei IAge = 3

    Tie, kurie naudoja „Gedit3“, gali atsisiųsti „Zen Coding“ papildinį iš toliau pateiktos nuorodos:

    https://github.com/mtrovo/zen-coding-gedit3

    Tikiuosi, kad tai bus jums naudinga.
    Sveikinimai.

    1.    griežtas sakė

      AČIŪ, aš turėjau būtent tokią problemą !!

    2.    Aleksas-m7 sakė

      Puiku, jūs davėte mano turimą problemą! GRAX!

  9.   elynx sakė

    Labai naudinga, nors šiam leidimui html ar bet kuria į internetą orientuota kalba ir kitiems man labiau patinka „BlueFish“ ar „Aptana Studio“.

    Sveiki atvykę!

    1.    nanotechnologijų sakė

      „Bluefish“ nepavyksta dėl kelių dalykų, pavyzdžiui, galimybės pritaikyti sparčiuosius klavišus ir panašius dalykus, ir kad iki šios dienos negaliu padaryti citatų automatinio užbaigimo, ir tai mane išvengia iš daugybės problemų, kai vėliau pamiršau uždaryti porą.

      „Aptana“, man tai tiesiog įsiurbia, ji tiesiog parašyta „Java“ kalba ir turi priklausomybių, kurios kelia pavojų mano sistemai ... jau nekalbant apie tai, kad man (suprask labai gerai, MAN) Java = šūdas.

  10.   v3 sakė

    Aš naudoju jį ilgą laiką, rekomenduojama!

  11.   Rafaelis sakė

    Sveiki, exelene straipsnis ...
    Nenoriu jaustis dzeno meistru :-), bet jūsų siūloma plėtra:

    html> head> title + meta + body> ul # order_list> li.listilla * 5
    (to nepavyksta išplėsti)

    tai galima padaryti teisingai, skliausteliuose grupuojant, maždaug taip:

    html> (head> title + meta) + (body> ul # order_list> li.listilla * 5)
    tai plečiasi, kaip tikėtasi

    dėl

  12.   Felipe sakė

    šis papildinys yra nutrauktas ir pakeistas emmet (http://emmet.io/)

  13.   Ulises sakė

    Ar kas nors žino, kaip aš ją įdiegiu „Archlinux“, skirtą „kate“? Ačiū.