Маркирането или маркирането се отнася до езици за маркиране или маркиране такива, каквито са HTML и CSS, и всички знаем колко болезнено е всичко това да отваряме и затваряме етикети един по един, за да създадем уеб шаблон ...
Разбира се, има решения за това, едно от тях е автоматично довършване с IDE Dreamweaver mierda Блугрифон досадно, ако не купувате приставки от него o Комодо редактиране много тежко... Въпросът е, че IDE или редакторите на кодове, прекалено натоварени с опции, често в крайна сметка пречат на работата по невъобразими начини; такъв е случаят с Dreamweaver който ви изпълва с код за боклук, това, което генерирате графично и е тежък, скъп и грозен. Блугрифон досадно е най-вече, защото е безплатно, безплатно, но половината от опциите са запазени за платени потребители ... това не е забавно. И накрая имаме Комодо-редактиране, който е доста добър, мощен и пълен с опции, но е тежък (100mb на празен ход) и настройването му е досадно.
Най-доброто оръжие на уеб разработчик или уеб дизайнер не е IDE в стила на военния резервоар с хиляда оръжия отгоре, това е прост текстов редактор, някои приставки и способността да пишете като болен човек ... към това добавете магията на Zen кодиране и те ще имат в пръстите си най-добрия инструмент за маркиране, създаван някога (поне за мен).
Но ... какво по дяволите е това Zen кодиране?
Просто, това е специален плъгин, който служи като падащ слой за абстракция за HTML и CSS, създаден в Javascript и достъпна за много от най-известните издатели (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverИ др.)
Аха, все още не разбирам дяволска идея какво казваш ...
Затова ви показвам с прост пример; Помните ли падащото абстракционно нещо? Е, променете го на свиване, представете си, че можете да вземете ред HTML / CSS код, свит в един ред и да го разгънете като завеса или да го сгънете обратно ... Искате ли да видите как? Трябва само да се уверите, че имате две неща, за да работи:
Имам Zen кодиране инсталиран във вашия редактор.
Познайте командите и синтаксиса, за да го използвате.
Добре, пръсти към кода:
html>head+body
Виждате ли този ред код? Ами това е синтаксисът за HTML, той е прост:
Първо поставяте името на маркера (html), след това посочвате кои маркери ще бъдат вътре в този етикет (>) и след това името на маркерите, които влизат в него (глава и тяло). Знакът „+“ показва, че главата и тялото са два различни етикета и че нито един от тях не се съдържа в другия, все едно да кажете «заедно, но не смесени«... Тогава нека видим какво генерира този ред код при натискане на магическите клавиши (в моя случай CTRL + E):
Точно, 4 реда код, направени в един, които се появяват магически, когато натиснете правилната комбинация от клавиши ... и може да бъде много повече; например:
html>head+body>ul#lista_ordenada>li.listilla*5
Същият синтаксис, но ние добавяме нещо друго ... ако знаете някакъв CSS, ще разберете, че добавяме идентификатор, класове и нещо, което със сигурност не сте знаели; умножители ... какво е всичко това?? Майната ми, че ме объркваш!
Споко, това е съвсем просто, казахме по-горе, че вътре в тялото въведете таг «ul», нищо странно, обясних това по-горе, след това назначихме идентификатор, че ако знаете CSS, ще разберете, че те се идентифицират с знакът "#" и вътре в този неподреден списък (ul) добавяме пет етикета с класа (клас) listilla, обяснявам накратко това. Всъщност е много просто, „#“ означава, че е ID, тогава „li.listilla“ казва, че трябва да създадем етикет «li» с класа «li class = listilla» и след това казваме «повторете това последно пет пъти«. Какво ни дава като резултат:
Дванадесет реда код, написани на един ред и за много по-малко време
И това може да се направи и с CSS, въпреки че няма да удължавам статията, като показвам очевидното (по-долу ще ви предам цял списък с мами за Zen кодиране).
Трябва да подчертая, че това не работи, за да се направят милион сто хиляди линии в един, о, не, това има ограничение и начин да го използвам. Ако например искаме да направим нещо подобно:
html>head>title+meta+body>ul#lista_ordenada>li.listilla*5
Какво на теория трябва да ни даде това (вижте маркирания ред в последното изображение):
Ще ни даде това:
Което показва, че и с това не можете да правите магия; Не забравяйте, че Дзен майсторът на кода трябва да бъде точен и бърз, а правенето на грешно направени неща отнема скорост и време, следователно правилната техника за писане бързо и с Zen кодиране би било това:
html>head>body>ul#lista_ordenada>li.listilla*5
Разгъвате и вътре в маркера на главата:
title+meta
Което ще ви даде правилния код:
Въпреки че Zen кодиране Има много повече неща, които да ви покаже и може би трябва да пишете друг команден ред в главата не е най-доброто, затова използваме друга команда, «разширяване със съкращение" в моя случай ctrl + alt + e това ще отвори малка лента, където можем да напишем Zen код и да видим как се появява в реално време. Внимавайте, не препоръчвам да пишете всичко с това, но пишете в рамките на вече създадени структури, искам да кажа, първо създайте големите структури и след това ще детайлизирате в тях с тази опция.
И има множество супер готини команди в Zen кодиране, работата е там, че ги проучвате, след като ги инсталирате и научите как да ги използвате; С този плъгин няма да имате нужда от автоматично довършване или фрагменти за CSS или HTML, всъщност с това ще осъзнаете, че тези опции са пълна загуба на време в рамките на тези два езика за програмиране
А за заинтересованите, ето официалният CheatSheet на Zen кодиране, можете да го видите във формат ODF o PDF прав ТУК