Die opmaak, of opmaak, verwys na opmaak- of etiketteringstale soos dit is HTML en CSS, en ons weet almal hoe pynlik dit is om etikette een vir een oop en toe te maak om 'n websjabloon te skep ...
Natuurlik is daar oplossings hiervoor, een daarvan is outovoltooiing met IDE's soos Dreamweaver mierda blougriffon irriterend as jy nie plugins by hom koop nie o Komodo wysig baie swaar... die punt is dat IDE's of kode-redakteurs wat te veel opsies bevat, dikwels die werk op onvoorstelbare maniere belemmer; so is die geval van Dreamweaver wat u vul met vulliskode wat u grafies genereer en swaar, duur en lelik is. blougriffon dit is meestal irriterend omdat dit gratis, gratis is, maar die helfte van die opsies is gereserveer vir betaalde gebruikers ... dit is nie lekker nie. En uiteindelik het ons Komodo-wysiging, wat redelik goed, kragtig en vol opsies is, maar dit is swaar (100 MB in die middel) en dit is vervelig om dit op te stel.
Die beste wapen van 'n webontwikkelaar of webontwerper is nie die IDE's soos 'n oorlogstenk met duisend wapens bo-op nie, dit is 'n eenvoudige teksversorger, 'n paar inproppe en die vermoë om soos 'n siek persoon te tik ... voeg die towerkuns van Zen-kodering en hulle sal die beste instrument vir die merk wat nog geskep is in hul vingers hê (ten minste vir my).
Maar ... wat de hel is die Zen-kodering?
Eenvoudig, dit is 'n spesiale inprop wat dien as 'n drop-down abstraksielaag vir HTML en CSS wat in gemaak is Javascript en beskikbaar vir baie van die bekendste uitgewers (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, ens.).
Aha, ek verstaan nog nie 'n verdomde idee wat jy sê nie ...
Ek wys jou dus met 'n eenvoudige voorbeeld; Onthou jy die dropdown-abstraksie? Wel, verander dit na krimp, stel jou voor dat jy 'n lyn HTML / CSS-kode in een lyn kan vou en soos 'n gordyn kan oopvou of terugvou ... Wil jy sien hoe? U moet net seker maak dat u twee dinge het om dit te laat werk:
Het Zen-kodering geïnstalleer in u redakteur.
Ken die opdragte en sintaksis om dit te gebruik.
Goed, vinger na die kode:
html>head+body
Sien u die kode kode? Wel, dit is die sintaksis vir HTML, dit is eenvoudig:
Eerstens plaas u die naam van die etiket (html), dan gee u aan watter etikette binne daardie etiket gaan wees (>) en dan die naam van die etikette wat binne daardie etiket (kop en liggaam) is. Die '+' teken dui aan dat kop en liggaam twee verskillende etikette is en dat geen van die twee in die ander is nie, dit is soos om te sê «saam maar nie gemeng nieLaat ons kyk wat die kode kode genereer as ons die towerknappe indruk (in my geval CTRL + E):
Presies, vier reëls kode wat in een gemaak is, verskyn op 'n magiese manier as u die regte toetskombinasie druk ... en daar kan nog baie meer wees; byvoorbeeld:
html>head+body>ul#lista_ordenada>li.listilla*5
Dieselfde sintaksis, maar ons voeg nog iets by… as u 'n CSS ken, sal u besef dat ons 'n ID, klasse en iets byvoeg wat u sekerlik nie geken het nie; vermenigvuldigers ... wat is dit alles!? Fok jy verwar my!
Kalmeer, dit is baie eenvoudig, ons het hierbo gesê dat die liggaam 'n tag 'ul' invoer, niks vreemds nie. Ek het dit hierbo verduidelik, en ons het 'n ID toegeken, dat as u CSS ken, u sal verstaan dat dit geïdentifiseer word met die teken '#' en binne daardie ongeordende lys (ul) voeg ons vyf etikette by met die klas (klas) listilla, ek verduidelik dit kortliks. In werklikheid is dit baie eenvoudig, '#' dui aan dat dit 'n ID is, dan sê 'li.listilla' dat ons 'n etiket 'li' moet skep met die klas 'li class = listilla' en dan sê ons 'herhaal die laaste vyf keer«. Wat gee ons as gevolg:
Twaalf reëls kode geskryf in een reël en in baie minder tyd 😉
En dit kan ook met CSS gedoen word, hoewel ek die artikel nie sal verleng deur die voor die hand liggende (hieronder gee ek u 'n volledige lys cheats vir Zen-kodering).
Ek moet beklemtoon dat dit nie werk om 'n duisend honderdduisend lyne in een te maak nie, o nee, dit het 'n limiet en 'n manier om dit te gebruik. As ons byvoorbeeld so iets wil doen:
html>head>title+meta+body>ul#lista_ordenada>li.listilla*5
Wat teoreties moet dit ons gee (kyk na die gemerkte lyn in die laaste prent):
Dit sal ons die volgende gee:
Wat wys dat jy ook nie hiermee kan tower nie; Onthou dat 'n Zen-meester van die kode presies en vinnig moet wees, en om dinge verkeerd gedoen te doen, neem spoed en tyd weg, dus die regte tegniek om vinnig en met Zen-kodering sou dit wees:
html>head>body>ul#lista_ordenada>li.listilla*5
U brei uit en binne die kopplaatjie:
title+meta
Dit gee u die regte kode:
Hoewel die Zen-kodering Daar is baie meer dinge om aan u te wys en miskien is dit nie die beste om 'n ander opdraglyn binne die kop te skryf nie, dus gebruik ons 'n ander opdrag, «brei uit met afkorting" in my geval ctrl + alt + e dit sal 'n klein balkie oopmaak waar ons Zen-kode kan skryf en kan sien hoe dit in reële tyd verskyn. Wees versigtig, ek beveel nie aan om alles hiermee te skryf nie, maar skryf binne die strukture wat reeds geskep is.
En daar is 'n menigte super cool opdragte in die Zen-kodering, die saak is dat u dit ondersoek sodra u dit installeer en leer om dit te gebruik; Met hierdie invoegtoepassing het u geen outovolledigheid of uittreksels vir css of html nodig nie, en hiermee sal u besef dat hierdie opsies 'n totale tydmors binne hierdie twee programmeertale is 😉
En vir belangstellendes, hier is die amptelike CheatSheet van die Zen-kodering, kan u dit in formaat sien ODF o PDF Justo HIER
20 kommentaar, los joune
Ek vind dit super interessant!
Ek gaan dit verseker probeer!
Een vraag, moet die vorm "kop> liggaam" nie liggaam binne die kop skep nie? Moet ons nie 'head + body' sit om te kry wat ons wil hê nie?
As ek verward is, is ek jammer!
Dankie
Ja, enige naam van die etiket wat voorafgegaan word deur 'n ">" dui aan dat dit binne die genoemde merker val; in hierdie geval, soos u sê, dui kop> liggaam aan dat die liggaam binne die kop sou gaan, wat ons weet verkeerd is.
En ja, kop plus liggaam is soos aaneenskakeling, jy sê vir hulle dat hulle in 'n ander etiket gaan, maar dat nie een van die ander binne-in die ander gaan nie, in hierdie geval html> kop + liggaam
Baie, baie goed, persoonlik gebruik ek die teksversorgers vir hierdie soort dinge en Zen Coding, aangesien dit die beste is wat ek vir HTML gesien het.
Ek het regtig hiervan gehou: html: xt en vir diegene wat htlm wil voorspel: 5
Hmm, wel, ek het nog nooit regtig Dreamweaver-agtige programme gebruik nie, ek moet hierdie Zen Coding probeer ...
PS: Die muurpapier wat jy het ... is dit toevallig die een wat ek gemaak het?
Ja, maar die van FromLinux
Baie goed, ek het nog altyd van ligte teksversorgers gehou, die een wat ek nou gebruik Geany en om te sien dat dit ondersteun word vir die magiese teepot, moedig my sekerlik aan om dit te probeer
Wel, programmering is nie my ding nie. Wat my weggeblaas het, was die lessenaar, wat gebruik u, kabouter 3 of eenheid, wat is dit? Dit is baie cool om te sien of ek myne soortgelyk laat
As u nie omgee om my te antwoord nie, sal ek baie dankbaar wees 😀
PS: ja, ek kom van Windows, dit is wat die Universiteit xD het
Eenheid, met die elementêre tema en die dekking van die paneel verlaag.
Ek werk ook met Windows, laat ek u gelukwens met u lessenaar, dit is baie cool.
Die artikel is baie interessant ... Ek sien dit baie nuttig. Terloops, die installering van die Zen Coding-inprop vir Gedit het my ietwat verras en dit is dat u die toepaslike pakket vir Gedit3 moet aflaai. Die amptelike Zen-koderingswerf bied die skakels na die invoegtoepassing vir Gedit aan, maar dit is verouderd soos vir Gedit 2, wat dit onmoontlik maak om dit in die huidige weergawe van Gedit3 te gebruik volgens die installasie-instruksies.
Gedit-inproppe wat vir weergawe 2 geskryf is, werk nie in die nuwe weergawe 3 nie, aangesien dit GTK3 gebruik, terwyl Gedit2 GTK2 gebruik. Om 'n inprop in Gedit3 te gebruik, moet u die volgende in ag neem:
Nuwe gids: ~ / .local / share / gedit / plugins
Die .gedit-plugin-uitbreiding moet hernoem word na .plugin
Maak die lêer oop en wysig die kopstuk [Gedit Plugin] en verander dit na [Plugin]
Verander ook IAge = 2 vir IAge = 3
Diegene wat Gedit3 gebruik, kan die Zen Coding-inprop aflaai van die onderstaande skakel:
https://github.com/mtrovo/zen-coding-gedit3
Ek hoop dit sal u nuttig wees.
Groete.
DANKIE, ek het presies daardie probleem gehad !!
Uitstekend jy het die probleem gegee wat ek gehad het! GRAX!
Baie nuttig, maar ek verkies BlueFish of Aptana Studio vir hierdie uitgawe in html of enige webgerigte taal en ander.
Groete!
Bluefish misluk in 'n paar dinge, soos die feit dat ek die sleutelbordkortpaaie en dinge kan aanpas, en dat ek tot vandag toe nie die aanhalings outomaties kan invul nie, en dit kry my uit baie probleme om later te vergeet om 'n paar te sluit.
Aptana, dit sukkel net vir my, dit is eenvoudig in Java geskryf en het afhanklikhede wat my stelsel in gevaar stel ... om nie te praat van dit vir my nie (verstaan baie goed, VIR MY) Java = kak.
Ek gebruik dit al lank, word aanbeveel!
Hallo, exelene artikel ...
Ek wil nie soos 'n Zen-meester voel nie :-), maar die uitbreiding wat u voorstel:
html> kop> titel + meta + liggaam> ul # geordende_lys> li.listilla * 5
(wat nie kan uitbrei nie)
dit kan korrek met hakies gedoen word om te groepeer, so iets:
html> (kop> titel + meta) + (liggaam> ul # bestel_lys> li.listilla * 5)
dit brei uit soos verwag
groete
hierdie inprop is gestaak en is vervang deur emmet (http://emmet.io/)
Weet iemand hoe ek dit installeer in Archlinux vir kate? Dankie.