Foghlaim a bheith ina mháistir Zen ar mharcáil

Tagraíonn an marcáil, nó an marcáil, do theangacha marcála nó clibeála mar atá siad HTML agus CSS, agus tá a fhios againn go léir cé chomh pianmhar is atá sé lipéid a oscailt agus a dhúnadh ceann ar cheann chun teimpléad gréasáin a chruthú ...

Ar ndóigh tá réitigh ann maidir leis seo, is é ceann acu uathchomhlánú le leithéidí IDE Dreamweaver cac gormghrafón annoying mura gceannaíonn tú breiseáin uaidh o Eagarthóireacht Komodo an-trom… Is é an pointe ná go mbíonn IDEanna nó eagarthóirí cód ró-luchtaithe le roghanna go minic ag cur bac ar an obair ar bhealaí do-thuigthe; is amhlaidh atá Dreamweaver a líonann tú le cód truflais an rud a ghineann tú go grafach agus atá trom, costasach agus gránna. gormghrafón tá sé cráite den chuid is mó toisc go bhfuil sé saor in aisce, saor in aisce, ach tá leath de na roghanna curtha in áirithe d’úsáideoirí íoctha… ní spraoi é sin. Agus ar deireadh ní mór dúinn Komodo-eagar, atá maith go leor, cumhachtach agus lán le roghanna ach tá sé trom (100mb in iddle) agus tá sé slachtmhar é a chur ar bun.

Ní hé an t-arm is fearr atá ag forbróir gréasáin nó dearthóir gréasáin ná na IDEanna i stíl umar cogaidh le míle arm ar a bharr, is eagarthóir téacs simplí é, roinnt breiseán agus an cumas clóscríobh cosúil le duine tinn ... leis sin cuir draíocht na Códú Zen agus beidh an uirlis is fearr acu le marcáil a cruthaíodh riamh ina méara (domsa ar a laghad).

Ach ... cad é an ifreann an Códú Zen?

Go simplí, is breiseán speisialta é a fheidhmíonn mar chiseal astarraingthe anuas do HTML agus CSS a cruthaíodh in Javascript agus ar fáil do go leor de na foilsitheoirí is cáiliúla (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, Etc).

Aha, ní thuigim smaoineamh damanta fós ar a bhfuil á rá agat ...

Mar sin taispeánann mé sampla simplí duit; An cuimhin leat an rud astarraingthe anuas? Bhuel, athraigh go crapadh é, samhlaigh gur féidir leat líne de chód HTML / CSS a thit isteach i líne amháin a thógáil agus é a fhilleadh mar imbhalla nó é a fhilleadh ar ais ... Ar mhaith leat a fheiceáil conas? Níl le déanamh agat ach a chinntiú go bhfuil dhá rud agat chun go n-oibreoidh sé:

An bhfuil Códú Zen suiteáilte i d’eagarthóir.
Bíodh a fhios agat na horduithe agus an chomhréir chun iad a úsáid.

Ceart go leor, méara leis an gcód:

html>head+body

Féach an líne sin de chód? Bhuel sin an chomhréir le haghaidh HTML, tá sé simplí:

Ar dtús cuireann tú ainm na clibe (html) ansin tugann tú le fios cé na clibeanna a bheidh taobh istigh den chlib sin (>) agus ansin ainm na gclibeanna a théann taobh istigh den chlib sin (ceann agus corp). Tugann an comhartha ‘+’ le fios gur dhá lipéad éagsúla iad an ceann agus an corp agus nach bhfuil ceachtar acu sa cheann eile, tá sé cosúil le rá «le chéile ach gan a bheith measctha«… Ansin, feicfimid cad a ghineann an líne sin de chód agus na heochracha draíochta á mbrú (i mo chás CTRL + E.):

Go díreach, 4 líne de chód déanta i gceann amháin, atá le feiceáil go draíochtúil nuair a bhrúnn tú an teaglaim eochair cheart… agus d’fhéadfadh go leor eile a bheith ann; mar shampla:

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

Comhréir chéanna, ach cuirimid rud éigin eile leis ... má tá roinnt CSS ar eolas agat tuigfidh tú go bhfuil ID, ranganna agus, rud nach raibh ar eolas agat, cinnte; iolraitheoirí ... cad é seo go léir!? Fuck mearbhall tú dom!

Déan socair, tá sé seo simplí go leor, dúirt muid leis an méid thuas go gcuireann an corp istigh clib «ul», rud ar bith aisteach, mhínigh mé é seo thuas, ansin, sannann muid ID, má tá CSS ar eolas agat tuigfidh tú go n-aithnítear iad seo leis an gcomhartha '#', agus taobh istigh den liosta neamhordúil sin (ul) cuirimid cúig lipéad leis an rang (aicme) listilla, míním é seo go hachomair. Déanta na fírinne tá sé an-simplí, seasann ‘#’ gur ID é, ansin deir ‘li.listilla’ go gcaithfimid lipéad «li» a chruthú leis an rang listilla «li class = listilla» agus ansin, deirimid «déan é sin arís cúig huaire«. Cad a thugann dúinn mar thoradh air:

Dhá líne dhéag de chód scríofa i líne shingil agus i bhfad níos lú ama 😉

Agus is féidir é sin a dhéanamh le CSS freisin, cé nach leathnóidh mé an t-alt trí na rudaí follasacha a thaispeáint (thíos cuirfidh mé liosta iomlán de cheats duit Códú Zen).

Caithfidh mé a aibhsiú nach n-oibríonn sé seo chun zillion céad míle líne a dhéanamh i gceann amháin, ó níl, tá teorainn leis seo agus bealach chun é a úsáid. Más mian linn rud mar seo a dhéanamh:

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

Cad ba cheart go teoiriciúil é seo a thabhairt dúinn (féach ar an líne aibhsithe san íomhá dheireanach):

Tabharfaidh sé seo dúinn:

Rud a léiríonn nach féidir leat draíocht a dhéanamh leis seo ach an oiread; Cuimhnigh go gcaithfidh máistir Zen den chód a bheith beacht agus tapa, agus dá bhrí sin, tógann sé luas agus am as rudaí a dhéantar go mícheart a dhéanamh, dá bhrí sin, an teicníc cheart chun scríobh go gasta agus leis Códú Zen bheadh ​​sé seo:

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

Leathnaíonn tú agus taobh istigh den chlib ceann:

title+meta

A thabharfadh an cód ceart duit:

Cé go bhfuil an Códú Zen Tá go leor rudaí eile le taispeáint duit agus b’fhéidir nach é an rud is fearr a bheith agat líne ordaithe eile a scríobh taobh istigh den cheann, mar sin bainimid úsáid as ordú eile, «leathnú le giorrúchán"i mo chás ctrl + alt + e osclóidh sé sin barra beag inar féidir linn cód Zen a scríobh agus a fheiceáil conas a dhealraíonn sé i bhfíor-am. Bí cúramach, ní mholim gach rud a scríobh leis seo ach scríobh laistigh de na struchtúir a cruthaíodh cheana, is é sin le rá, na struchtúir mhóra a chruthú ar dtús agus ansin tabharfaidh tú mionsonraí iontu leis an rogha seo.

Agus tá an iliomad orduithe sár-fhionnuar laistigh den Códú Zen, is é an rud go ndéanann tú imscrúdú orthu nuair a dhéanann tú iad a shuiteáil agus foghlaim conas iad a úsáid; Leis an mbreiseán seo ní bheidh autocompletion nó snippets de dhíth ort le haghaidh CSS nó html, i ndáiríre, tuigfidh tú gur cur amú ama iomlán iad na roghanna seo laistigh den dá theanga cláir seo 😉

Agus dóibh siúd ar spéis leo, seo duit Bileog CheatSet oifigiúil an Códú Zen, is féidir leat é a fheiceáil i bhformáid ODF o PDF cóir ANSEO


Cloíonn ábhar an ailt lenár bprionsabail eitic eagarthóireachta. Chun earráid a thuairisciú cliceáil anseo.

20 trácht, fág mise

Fág do thrácht

Ní thabharfar do sheoladh r-phoist a fhoilsiú.

*

*

  1. Freagrach as na sonraí: Miguel Ángel Gatón
  2. Cuspóir na sonraí: SPAM a rialú, bainistíocht trácht.
  3. Legitimation: Do thoiliú
  4. Na sonraí a chur in iúl: Ní chuirfear na sonraí in iúl do thríú páirtithe ach amháin trí oibleagáid dhlíthiúil.
  5. Stóráil sonraí: Bunachar sonraí arna óstáil ag Occentus Networks (EU)
  6. Cearta: Tráth ar bith is féidir leat do chuid faisnéise a theorannú, a aisghabháil agus a scriosadh.

  1.   mafuns a dúirt

    Tá sé thar a bheith suimiúil dom!

    Táim chun triail a bhaint as cinnte!

  2.   mafuns a dúirt

    Ceist amháin, nár cheart go gcruthódh an fhoirm “ceann> corp” corp taobh istigh den cheann? Chun an rud a theastaíonn uainn a fháil, nár cheart dúinn "ceann + corp" a chur?

    Má tá mearbhall orm tá brón orm!

    Go raibh maith agat

    1.    nano a dúirt

      Sea, léiríonn ainm clib ar bith roimh ">" go dtéann sé laistigh den chlib a ainmníodh roimhe seo; sa chás seo, mar a déarfá, tugann ceann> comhlacht le fios go rachadh an corp taobh istigh den cheann, rud atá ar eolas againn atá mícheart.

      Agus sea, tá ceann móide comhlacht cosúil le concatenating, deir tú leis go dtéann siad taobh istigh de chlib eile ach nach dtéann ceachtar acu taobh istigh den cheann eile, sa chás seo html> ceann + corp

  3.   Asurto a dúirt


    o'n

  4.   103 a dúirt

    An-mhaith, an-mhaith, go pearsanta is fearr liom eagarthóirí gnáth-théacs a úsáid don chineál seo ruda agus Zen Coding mar is é an rud is fearr a chonaic mé le haghaidh HTML.

    Thaitin seo go mór liom: html: xt agus dóibh siúd atá ag iarraidh réamh-mheas a dhéanamh ar htlm: 5

  5.   auroszx a dúirt

    Hmm, bhuel níor úsáid mé cláir cosúil le Dreamweaver riamh, caithfidh mé triail a bhaint as an Zen Coding seo ...

    PS: An páipéar balla sin atá agat ... an é an seans a rinne mé?

    1.    nano a dúirt

      Sea ach an ceann ó FromLinux

  6.   Ezeel a dúirt

    Go han-mhaith, thaitin eagarthóirí téacs éadroma liom i gcónaí, is é an ceann a úsáidim anois Geansaidh agus má fheiceann mé go dtacaítear leis an taephota draíochta is cinnte go spreagann sé mé chun triail a bhaint as

  7.   Lúipín III a dúirt

    Bhuel, ní hé an clársceidealú mo rud, an rud a chuir as dom ná an deasc, cad a úsáideann tú, gnome 3 nó aontacht, cad é? Tá sé an-fhionnuar, féach an bhfágfaidh mé mianach cosúil leis
    Mura miste leat mé a fhreagairt, bheinn an-bhuíoch 😀
    PS: sea, is as fuinneoga mé, is é xD an Ollscoil

    1.    nano a dúirt

      Aontacht, leis an téama tosaigh agus laghdaigh sé teimhneacht an phainéil.

      1.    neomyth a dúirt

        Oibrím le fuinneoga freisin, lig dom comhghairdeas a dhéanamh leat ar do dheasc an-fhionnuar.

  8.   jassandre a dúirt

    Tá an t-alt an-suimiúil ... Feicim go bhfuil sé an-úsáideach. Dála an scéil, chuir suiteáil an bhreiseáin Zen Coding do Gedit iontas orm agus is é sin go gcaithfidh tú an pacáiste cuí do Gedit3 a íoslódáil. I suíomh oifigiúil códaithe Zen tairgtear naisc an bhreiseáin do Gedit, ach tá sé as dáta toisc gur le haghaidh Gedit 2 a fhágann nach féidir é a úsáid sa leagan reatha Gedit3 de réir na dtreoracha suiteála.

    Ní oibríonn breiseáin Gedit a scríobhadh do leagan 2 sa leagan nua 3, toisc go n-úsáideann sé GTK3, agus úsáideann Gedit2 GTK2. Chun breiseán a úsáid i Gedit3 caithfidh tú an méid seo a leanas a chur san áireamh:

    Eolaire Nua: ~ / .local / share / gedit / plugins
    Caithfear an síneadh .gedit-plugin a athainmniú .plugin
    Oscail an comhad agus cuir an ceanntásc [Gedit Plugin] in eagar, agus athraigh go [Breiseán]
    Athraigh IAge = 2 freisin le haghaidh IAge = 3

    Is féidir leo siúd a úsáideann Gedit3 an breiseán Zen Coding a íoslódáil ón nasc thíos:

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

    Tá súil agam go mbeidh sé úsáideach duit.
    Beannachtaí.

    1.    stern a dúirt

      Go raibh maith agat, bhí an fhadhb sin agam go díreach !!

    2.    Alex-m7 a dúirt

      Ar fheabhas a thug tú an fhadhb a bhí agam! GRAX!

  9.   Eilín a dúirt

    An-úsáideach, cé gur fearr liom an t-eagrán seo i html nó in aon teanga atá dírithe ar an ngréasán agus i gceann eile is fearr liom BlueFish nó Aptana Studio.

    Beannachtaí!

    1.    nano a dúirt

      Teipeann ar Bluefish i gcúpla rud cosúil le bheith in ann aicearraí agus rudaí méarchláir a shaincheapadh, agus go dtí an lá atá inniu ann ní féidir liom na luachana a dhéanamh uathchomhiomlán, agus cuireann sé sin an-trioblóid orm dearmad a dhéanamh níos déanaí cúpla a dhúnadh.

      Aptana, ní thaitníonn sé liom, tá sé scríofa go simplí i Java agus tá spleáchais air a chuireann mo chóras i mbaol ... gan trácht ar sin domsa (tuig go han-mhaith, DO ME) Java = cac.

  10.   v3on a dúirt

    Tá mé ag úsáid é le fada, molta!

  11.   Rafael a dúirt

    Dia duit, alt exelene ...
    Níl mé ag iarraidh mothú mar mháistir Zen :-), ach an leathnú atá beartaithe agat:

    html> head> title + meta + body> ul # order_list> li.listilla * 5
    (theipeann air sin a leathnú)

    is féidir é a dhéanamh i gceart le lúibíní chun grúpa a dhéanamh, rud mar seo:

    html> (ceann> teideal + meta) + (corp> ul # order_list> li.listilla * 5)
    leathnaíonn sé seo mar a bhíothas ag súil

    Maidir

  12.   Felipe a dúirt

    Scoir an breiseán seo agus cuireadh emmet ina áit (http://emmet.io/)

  13.   Ulises a dúirt

    An bhfuil a fhios ag aon duine conas a shuiteáilim é in Archlinux le haghaidh kate? Go raibh maith agat.

bool (fíor)