Научитесь быть мастером дзен-разметки

Разметка, или разметка, относится к языкам разметки или тегов, как они есть. HTML и CSS, и все мы знаем, как больно открывать и закрывать ярлыки одну за другой для создания веб-шаблона ...

Конечно, для этого есть решения, одно из них - автозаполнение с помощью IDE, например Dreamweaver Mierda Голубой грифон раздражает, если вы не покупаете у него плагины o Комодо править очень тяжело… Дело в том, что IDE или редакторы кода, слишком загруженные опциями, часто в конечном итоге мешают работе невообразимым образом; так обстоит дело с Dreamweaver который наполняет вас мусорным кодом, который вы генерируете графически, и является тяжелым, дорогим и уродливым. Голубой грифон это в основном раздражает, потому что это бесплатно, бесплатно, но половина опций зарезервирована для платных пользователей ... это не весело. И наконец у нас есть Комодо-править, который неплох, мощный и полный опций, но он тяжелый (100 МБ в режиме ожидания), и его настройка утомительна.

Лучшее оружие веб-разработчика или веб-дизайнера - это не IDE в стиле боевого танка с тысячей вооружений наверху, это простой текстовый редактор, несколько плагинов и возможность печатать как больной ... Дзен кодирование и в их руках будет лучший инструмент для маркировки из когда-либо созданных (по крайней мере для меня).

Но ... что за чертовщина Дзен кодирование?

Все просто, это специальный плагин, который служит раскрывающимся слоем абстракции для HTML и CSS, созданных в Javascript и доступен для многих самых известных издателей (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, DreamweaverИ т.д.).

Ага, я до сих пор ни черта не понимаю, о чем ты говоришь ...

Итак, я покажу вам простой пример; Помните выпадающую абстракцию? Что ж, измените его на сжатие, представьте, что вы можете взять строку кода HTML / CSS, свернутую в одну строку, и развернуть ее, как занавес, или сложить обратно ... Хотите увидеть, как? Вам просто нужно убедиться, что у вас есть две вещи, чтобы это работало:

Иметь Дзен кодирование установлен в вашем редакторе.
Знайте команды и синтаксис для его использования.

Хорошо, пальцы к коду:

html>head+body

Видите эту строку кода? Что ж, синтаксис HTML прост:

Сначала вы указываете имя тега (html), затем указываете, какие теги будут внутри этого тега (>), а затем имя тегов, которые входят в этот тег (заголовок и тело). Знак «+» указывает на то, что голова и тело - это два разных ярлыка, и ни один из них не содержится в другом, это как сказать «вместе, но не смешанные«… Тогда давайте посмотрим, что генерирует эта строка кода при нажатии волшебных клавиш (в моем случае CTRL + E):

Точно, 4 строки кода, объединенные в одну, которые волшебным образом появляются, когда вы нажимаете правильную комбинацию клавиш ... и их может быть намного больше; например:

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

Тот же синтаксис, но мы добавляем кое-что еще ... если вы знаете немного CSS, вы поймете, что мы добавляем идентификатор, классы и кое-что, о чем вы наверняка не знали; множители… что это все !? Бля ты меня запутаешь!

Успокойтесь, это довольно просто, мы сказали выше, что внутри тела введите тег «ul», ничего странного, я объяснил это выше, затем мы присвоили идентификатор, который, если вы знаете CSS, вы поймете, что они идентифицируются знаком '#', и внутри этого неупорядоченного списка (ul) мы добавляем пять меток с классом (class) listilla, я кратко объясню это. На самом деле это очень просто, «#» означает, что это идентификатор, затем «li.listilla» говорит, что мы должны создать метку «li» с классом listilla «li class = listilla», а затем мы говорим «повтори это последние пять раз«. Что дает нам в результате:

Двенадцать строк кода, написанных одной строкой и за гораздо меньшее время 😉

И это также можно сделать с помощью CSS, хотя я не буду расширять статью, показывая очевидные (ниже я передам вам полный список читов для Дзен кодирование).

Я должен подчеркнуть, что это не работает, чтобы сделать миллион сотен тысяч строк в одном, о нет, у этого есть предел и способ его использования. Если, например, мы хотим сделать что-то вроде этого:

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

Что теоретически должно дать нам это (посмотрите на выделенную строку на последнем изображении):

Это даст нам это:

Что показывает, что с этим тоже нельзя творить волшебство; Помните, что дзен-мастер кода должен быть точным и быстрым, а выполнение неправильных действий отнимает скорость и время, поэтому правильная техника написания быстро и с умом. Дзен кодирование было бы это:

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

Вы расширяете и внутри тега заголовка:

title+meta

Что даст вам правильный код:

Несмотря на то, Дзен кодирование В нем есть еще много вещей, которые можно показать вам, и, возможно, необходимость писать другую командную строку внутри головы - не лучший вариант, поэтому мы используем другую команду, «раскрыть аббревиатурой" в моем случае ctrl + alt + e который откроет небольшую панель, где мы можем написать код Дзен и посмотреть, как он выглядит в режиме реального времени. Будьте осторожны, я не рекомендую писать все с этим, но писать в уже созданных структурах, то есть сначала создавать большие структуры, а затем вы детализируете их с помощью этой опции.

И есть множество супер крутых команд внутри Дзен кодирование, дело в том, что вы исследуете их после того, как установите их и научитесь ими пользоваться; С этим плагином вам не понадобится автозаполнение или сниппеты для css или html, фактически, с этим вы поймете, что эти параметры являются пустой тратой времени в этих двух языках программирования 😉

А для тех, кому интересно, вот официальная CheatSheet Дзен кодирование, вы можете увидеть это в формате ODF o PDF просто ЗДЕСЬ


20 комментариев, оставьте свой

Оставьте свой комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

*

*

  1. Ответственный за данные: Мигель Анхель Гатон
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.

  1.   мафуны сказал

    Мне это очень интересно!

    Обязательно попробую!

  2.   мафуны сказал

    Один вопрос, не должна ли форма «голова> тело» создавать тело внутри головы? Разве для получения желаемого нельзя поставить «голова + тело»?

    Если я запутался, мне очень жаль!

    спасибо

    1.    карликовый сказал

      Да, любое имя тега, которому предшествует ">", указывает, что оно входит в ранее названный тег; в этом случае, как вы говорите, head> body указывает, что тело войдет внутрь головы, что, как мы знаем, неверно.

      И да, голова плюс тело похоже на конкатенацию: вы говорите, что они входят в другой тег, но ни один из них не входит в другой, в данном случае html> head + body

  3.   Асуарто сказал


    аминь

  4.   103 сказал

    Очень, очень хорошо, лично я предпочитаю использовать текстовые редакторы для такого рода вещей и Zen Coding, поскольку это лучшее, что я видел для HTML.

    Мне очень понравилось это: html: xt и для тех, кто хочет предвкушать htlm: 5

  5.   АуросZx сказал

    Хм, ну я никогда толком не пользовался программами типа Dreamweaver, мне нужно попробовать это Zen Coding ...

    PS: Эти обои у вас ... случайно ли это я сделал?

    1.    карликовый сказал

      Sí pero el de DesdeLinux

  6.   Эзаэль сказал

    Очень хорошо, мне всегда нравились легкие текстовые редакторы, сейчас я использую Geany и видя, что он поддерживается для волшебного чайника, безусловно, побуждает меня попробовать его

  7.   Lupin III сказал

    Ну, программирование - это не мое, меня поразил рабочий стол, что вы используете, gnome 3 или unity, что это? Это очень-очень здорово, посмотреть, оставлю ли я свой аналогичный
    Если вы не прочь мне ответить, буду очень признательна 😀
    PS: да, я из windows, это то, что в университете xD

    1.    карликовый сказал

      Unity, с элементарной темой и пониженной непрозрачностью панели.

      1.    Неомито сказал

        Еще я работаю с windows, позвольте поздравить вас на рабочем столе очень круто.

  8.   ЯсАндре сказал

    Статья очень интересная ... Считаю очень полезной. Кстати, установка плагина Zen Coding для Gedit застала меня врасплох, и это то, что вам необходимо загрузить соответствующий пакет для Gedit3. На официальном сайте кодирования Zen предлагаются ссылки на плагин для Gedit, но он устарел, поскольку предназначен для Gedit 2, что делает невозможным его использование в текущей версии Gedit3 в соответствии с инструкциями по установке.

    Плагины Gedit, написанные для версии 2, не будут работать в новой версии 3, поскольку она использует GTK3, а Gedit2 использует GTK2. Чтобы использовать плагин в Gedit3, вы должны принять во внимание следующее:

    Новый каталог: ~ / .local / share / gedit / plugins
    Расширение .gedit-plugin необходимо переименовать в .plugin.
    Откройте файл и отредактируйте заголовок [Gedit Plugin], изменив его на [Plugin]
    Также измените IAge = 2 на IAge = 3

    Те, кто использует Gedit3, могут скачать плагин Zen Coding по ссылке ниже:

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

    Надеюсь, он будет вам полезен.
    Привет.

    1.    ZAD сказал

      СПАСИБО, у меня была именно такая проблема !!

    2.    Алекс-М7 сказал

      Отлично, вы попали в мою проблему! ГРАКС!

  9.   Элинкс сказал

    Очень полезно, хотя для этой версии в формате html или на любом веб-ориентированном языке и других я предпочитаю BlueFish или Aptana Studio.

    Привет!

    1.    карликовый сказал

      Bluefish терпит неудачу в нескольких вещах, таких как возможность настраивать сочетания клавиш и прочее, и что по сей день я не могу сделать автозаполнение кавычек, и это избавляет меня от многих проблем, если позже я забуду закрыть пару.

      Aptana, для меня это просто отстой, он просто написан на Java и имеет зависимости, которые ставят под угрозу мою систему ... не говоря уже о том, что для меня (очень хорошо понимаю, ДЛЯ МЕНЯ) Java = дерьмо.

  10.   v3on сказал

    Пользуюсь уже давно, рекомендую!

  11.   Рафаэль сказал

    Здравствуйте, статья exelene ...
    Не хочу чувствовать себя мастером дзен :-), но предлагаемое вами расширение:

    html> заголовок> заголовок + мета + тело> ul # order_list> li.listilla * 5
    (который не может расширяться)

    Это можно сделать правильно с помощью скобок для группировки, примерно так:

    html> (заголовок> заголовок + мета) + (тело> ul # заказанный_лист> li.listilla * 5)
    это расширяется, как ожидалось

    привет

  12.   Felipe сказал

    этот плагин больше не поддерживается и был заменен на emmet (http://emmet.io/)

  13.   Ulysses сказал

    Кто-нибудь знает, как его установить в Archlinux для катя? Спасибо.