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, kas 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 jūs tos pārbaudāt, tiklīdz esat tos instalējis, un iemācāties tos izmantot; Izmantojot šo spraudni, jums nebūs nepieciešama automātiska pabeigšana vai fragmenti css vai html, patiesībā ar to jūs sapratīsit, ka šīs opcijas ir pilnīgi 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


Atstājiet savu komentāru

Jūsu e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti ar *

*

*

  1. Atbildīgais par datiem: Migels Ángels Gatóns
  2. Datu mērķis: SPAM kontrole, komentāru pārvaldība.
  3. Legitimācija: jūsu piekrišana
  4. Datu paziņošana: Dati netiks paziņoti trešām personām, izņemot juridiskus pienākumus.
  5. Datu glabāšana: datu bāze, ko mitina Occentus Networks (ES)
  6. Tiesības: jebkurā laikā varat ierobežot, atjaunot un dzēst savu informāciju.

  1.   mafūni teica

    Man tas šķiet super interesanti!

    Es to noteikti izmēģināšu!

  2.   mafūni teica

    Viens jautājums, veidlapai "galva> ķermenis" nevajadzētu radīt ķermeni galvas iekšpusē? Lai iegūtu to, ko vēlamies, vai mums nevajadzētu likt "galva + ķermenis"?

    Ja esmu apmulsis, atvainojos!

    Gracias

    1.    nano teica

      Jā, jebkurš taga nosaukums, pirms kura ir ">", norāda, ka tas ietilpst iepriekš nosauktajā tagā; šajā gadījumā, kā jūs sakāt, galva> ķermenis norāda, ka ķermenis ietu galvas iekšienē, kas, kā mēs zinām, ir nepareizs.

      Jā, galva plus ķermenis ir kā savienošana, jūs sakāt, ka viņi iet citā tagā, bet neviens no viņiem neiet otra iekšpusē, šajā gadījumā html> galva + ķermenis

  3.   assuarto teica


    āmen

  4.   103 teica

    Ļoti, ļoti labi, personīgi es gribētu izmantot vienkārša teksta redaktorus šāda veida lietām un Zen kodēšanu, jo tas ir labākais, ko esmu redzējis HTML.

    Man tas ļoti patika: html: xt un tiem, kas vēlas paredzēt htlm: 5

  5.   auroszx teica

    Hmm, labi, es nekad īsti neesmu izmantojis Dreamweaver līdzīgas programmas, man ir jāizmēģina šī Zen kodēšana

    PS: Šīs tapetes jums ir ... vai tas ir nejauši tas, ko es izgatavoju?

    1.    nano teica

      Jā, bet viens DesdeLinux

  6.   Ezēls teica

    Ļoti labi, man vienmēr ir patikuši vieglā teksta redaktori, tāds, kādu izmantoju tagad Geany un redzot, ka tas tiek atbalstīts burvju tējkannā, tas noteikti mudina mani izmēģināt

  7.   Lupīna III teica

    Nu, programmēšana nav mana lieta, tas, kas mani ir aizrāvis, ir darbvirsma, ko jūs izmantojat, gnome 3 vai unity, kas tas ir? Ir ļoti forši redzēt, vai es pametu savējo līdzīgu
    Ja jums nav iebildumu man atbildēt, es būtu ļoti pateicīgs 😀
    PS: jā, es esmu no logiem, tas ir tas, kas Universitātei ir xD

    1.    nano teica

      Vienotība ar elementāru tēmu un pazemināja paneļa necaurredzamību.

      1.    neomīts teica

        Es arī strādāju ar logiem, ļaujiet man apsveikt jūs, ka jūsu darbvirsma ir ļoti forša.

  8.   jaszandre teica

    Raksts ir ļoti interesants ... Es uzskatu, ka tas ir ļoti noderīgs. Starp citu, Zen Coding spraudņa instalēšana Gedit mani nedaudz pārsteidza un tas ir tas, ka jums ir jālejupielādē Gedit3 atbilstošā pakotne. Oficiālajā Zen kodēšanas vietnē tiek piedāvātas Gedit spraudņa saites, taču tas ir novecojis, jo tas ir paredzēts Gedit 2, kas padara neiespējamu tā izmantošanu pašreizējā Gedit3 versijā saskaņā ar instalēšanas instrukcijām.

    Gedit spraudņi, kas rakstīti 2. versijai, nedarbojas jaunajā 3. versijā, jo tajā tiek izmantots GTK3, savukārt Gedit2 - GTK2. Lai Gedit3 lietotu spraudni, jāņem vērā sekojošais:

    Jauns katalogs: ~ / .local / share / gedit / plugins
    Paplašinājums .gedit-plugin jāpārsauc par .plugin
    Atveriet failu un rediģējiet galveni [Gedit Plugin] un nomainiet to uz [Plugin]
    Mainiet arī IAge = 2, lai IAge = 3

    Tie, kas izmanto Gedit3, var lejupielādēt Zen Coding spraudni no tālāk esošās saites:

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

    Es ceru, ka tas būs jums noderīgs.
    Sveicieni.

    1.    Zad teica

      PALDIES, man bija tieši tāda problēma !!

    2.    Alekss-m7 teica

      Izcili, ka jūs skārāt problēmu, kas man bija! GRAX!

  9.   Elīna teica

    Ļoti noderīga, lai gan šim izdevumam html vai jebkurā tīmekļa valodā orientētā valodā un citās es dodu priekšroku BlueFish vai Aptana Studio.

    Sveicieni!

    1.    nano teica

      Zilā zivs neizdodas dažās lietās, piemēram, spēju pielāgot īsinājumtaustiņus un citas lietas, un ka līdz šai dienai es nevaru padarīt pēdiņas automātiskas pabeigšanas, un tas mani atbrīvo no daudzām problēmām, lai vēlāk aizmirstu aizvērt pāris.

      Aptana, tas man vienkārši iesūcas, tas vienkārši ir rakstīts Java valodā un tam ir atkarības, kas apdraud manu sistēmu ... nemaz nerunājot par to, ka man (saproti ļoti labi, MAN) Java = sūdi.

  10.   v3on teica

    Es to izmantoju ilgu laiku, ieteicams!

  11.   Rafael teica

    Sveiki, exelene raksts ...
    Es nevēlos justies kā zen meistars :-), bet jūsu piedāvātā paplašināšana:

    html> head> title + meta + body> ul # order_list> li.listilla * 5
    (tas neizdodas paplašināties)

    to var izdarīt pareizi, iekavas grupējot, apmēram šādi:

    html> (head> title + meta) + (body> ul # pasūtīts_ saraksts> li.listilla * 5)
    tas paplašinās, kā paredzēts

    vēlējumiem

  12.   Felipe teica

    šis spraudnis tiek pārtraukts un aizstāts ar emmet (http://emmet.io/)

  13.   Ulises teica

    Vai kāds zina, kā es to instalēju Archlinux for Kate? Paldies.