Zen Coding

zSpx · April 21, 2011

Не нашел особого упоминания на форуме и создал тему. Zen Coding - это набор скриптов, позволяющий ОЧЕНЬ быстро писать html структуру страницы. Выполнен в качестве расширений для большого количества редакторов и ide. Суть работы:

в редакторе пишем css подобный синтаксис

html>head+body>div.wrapper>div.head+div.main+div.footer>ul.menu>li*5

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

<html><head></head><body>
		<div class="wrapper">
			<div class="head"></div>
			<div class="main"></div>
			<div class="footer">
				<ul class="menu">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</body></html>

Настраиваемый, легок в освоении.

Страница проекта: http://zen-coding.ru/ пока еще не работает.

Демо страница: http://zen-coding.ru/demo/

Обзор последней версии на Хабре: тут еще хабр

Поддерживаемые редакторы и страница загрузок

Для Notepad++ (я им пользуюсь) требуется установленный Python Script.

Edited April 21, 2011 by zSpx

Great Rash · April 21, 2011

Обсуждали уже... Давно правда, в начале зимы кажись.

Robot · June 28, 2011

Здравствуйте, господа.

Вопрос: где можно скачать мануал на русском по zen-coding?

Или так: кто-нибудь владеет тайными знаниями выражений в zen-coding, которые помогают быстро верстать HTML, CSS(преимущественно HTML-я начинающий, со стажем ? Много раз бросал из-за рутинного набирания кода и отсутствия свободного времени для занятий.

Предупрежу стандартные ответы: родной мануал ни в какие ворота не лезет, вёрстка-сатанинство и мракобесия(смерть типографике! Даздравствует машинный код! Убить всех человеков! Я робот, и горжусь этим!), ни каких толковых примеров-два мануала смотрел (старый и новый), один хуже другого....Всё для профессионала! Смерть неопытным!

А, вы знаете...?(плачу), я ведь так обрадовался, когда увидел в действии zen-coding, а когда попробовал, ухххххх!-просто улетел!

Но всё благополучно закончилось... я не знаю выражений! Буржуйским владею с букварём, так что ползать по wiki и по ихову сообществу бесполезно, проще руками всё набирать........

Друзья!

Может быть, кто-нибудь поделица бесценным опытом?

А есчооо лучше тему новую организовать по zen-coding, и в перспективе автор данного ресурса сможет книгу выпустить (со скидкой для участников форума) и продавать её за доро...не.. ну какие-нибудь деньги.

Вообще, лучше создать мануал, как для новичков, так и для покорителей космоса(2 в 1).

О други! Жду ответов по данному вопросу! Вопрос АРХИВАЖНЫЙ, и актуальный-быстро набирать полезно, не только космонавтам, но и обычным детям с воздушным змеям в руках.

P.S.

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

buddah · June 28, 2011

Пользуйся на здоровье) http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsRu

Слава роботам!

sigma77 · June 28, 2011

Шпоры по Zen Coding - http://code.google.com/p/zen-coding/wiki/CheatSheets (pdf и odt)

Robot · June 28, 2011

<trbl>Писал именно об этом</trbl>

<trbl>Нужен мануал или рекомендации для начинающего</trbl>

</beda>

Интересуют комбинации тегов, атрибутов...синтаксис, если хотите...принципы-правила комбинаций.

Пример:

команда ol+

<ol>

</ol>

ну ОК! Я доволен! А...постойте, а...м...мммм-а..? А! а как повторить 5 раз <li></li>, да ещё через выделение напечатанного текста в 5 строк?

НО-НО! Только без рук!-->например: ctrl+D(notepad++) и ещё пару-тройку брыков.

P.S.

Вот выросту и стану космонавтом, и всех-всех роботов перепрошью, и новые мануалы для них и людей напишу и будем все мы дружить(мечтаю, когда стою на стуле в коридоре и выкручиваю очередную сгоревшую лампочку Ильича(http://ru.wikipedia.org/wiki/%D0%9B%D0%B0%D0%BC%D0%BF%D0%BE%D1%87%D0%BA%D0%B0_%D0%98%D0%BB%D1%8C%D0%B8%D1%87%D0%B0).

Edited June 28, 2011 by Robot

mishka · June 28, 2011

Большинство комбинаций - это селекторы css.

обернуть 5 строк в li - просто:

выделаем строки нажимаем (у меня ctrl+E) в полученном окошке вводим li* энтер. Все.

Горячие клавиши:

Опции -> Горячие клавиши -> Plugin commands

там ищи.

ну и у меня ZenCoding не на питоне, а на JavaScript

sigma77 · June 28, 2011

Интересуют комбинации тегов, атрибутов...синтаксис, если хотите...принципы-правила комбинаций.

Синтаксис практически полностью повторяет синтаксис селекторов атрибутов. Так что, если их знаете, то проблем быть не должно. Если нет - то бегом учить вначале их, потом с Zen Coding разберетесь.

Пример:
команда ol+
<ol>
<li></li>
</ol>
ну ОК! Я доволен! А...постойте, а...м...мммм-а..? А! а как повторить 5 раз <li></li>,

ol>li*5

Robot · June 28, 2011

Большинство комбинаций - это селекторы css.
обернуть 5 строк в li - просто:
выделаем строки нажимаем (у меня ctrl+E) в полученном окошке вводим li* энтер. Все.

А вот откудо енто знание(li*)?-меня интересует.

А если 5 раз <li>Пусто</li>?

Ну и т.д. вобщем, где, когда,с чем писать *,>,+, и прочее?

Если можно, то личный опыт.

Вообще бы, лучше для этого отдельную тему завести (повторение), с личным опытом, объяснениями, примерами.

Я бы в слесари пошёл, пусть меня научат! Да-к, вот я не знаю ентот фрукт, а так бы написал бы...эх всю правду про него, прямо как отчёт от "большого брата" (он следит за тобой :facepalmxd: ).

И, забыл:

сразу и без доп. телодвижений:

<ol>

<li>четыре</li>

</ol>

команда в одну строку и сразу результат. Можно пустые li.

Ткните меня, в хороший источник, если не трудно, пожалуйста

Robot · June 28, 2011

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

-Да! Круто!-сел и поехал!

-Проще велосипеда!

Ни кто, не спрашивает: что?, да КАК?

Все, всё знают.

Делаю вывод: без СSS, эту кашу не съешь!

А мне лично, хотелось упростить себе изучение html, но видать не получится. Придётся проходить через каналы, воды, тупики.

Есть такое понятие: чем быстрее ошибешься, тем быстрее найдёшь решение. С быстрым написанием кода, возможно и меньше ошибался бы. А так вообще больше времени уделяешь изучению материала, а не писанине. Конечно писать код вручную полезно, но не всегда и не везде. В конц-концов, мы же не движемся на роботу или учёбу всегда пешком (особенно школьники, когда школа в др. конце города), используем автоматизацию (возможно не верное слово подобрал), средства передвижения-транспорт.

Дык и мне хочется средство передвижения, пусть я хоть и школьник.

Ладно. Чево-то я много болтаю (пишу не тот код).

Если кто-то знающий (крутой космонавт и просто Гагарин) понял меня, создайте тему или хотя бы развёрнуто ответьте.

p.s.

Буду по-старинке писать, учить всё, ошибаться, всё как 100-1000 лет назад, а автоматика-это шайтан с лампочками.

Жду не дождусь познания CSS, и мир тогда станет проще.

Robot · June 28, 2011

Интересуют комбинации тегов, атрибутов...синтаксис, если хотите...принципы-правила комбинаций.
Синтаксис практически полностью повторяет синтаксис селекторов атрибутов. Так что, если их знаете, то проблем быть не должно. Если нет - то бегом учить вначале их, потом с Zen Coding разберетесь.
Пример:
команда ol+
<ol>
<li></li>
</ol>
ну ОК! Я доволен! А...постойте, а...м...мммм-а..? А! а как повторить 5 раз <li></li>,
ol>li*5

Спасибо! Чего-то я сразу не заметил вашего ответа. Болтаю много-увлёкся :blush:

Бигу разбираться :yahoo: .

buddah · June 28, 2011

Robot, ты лентяй, который даже не читает документацию, извини.

Вот например смотрим сюда: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

example: div.par$2>p*3
result: <div class="par1">
<p></p> <p></p> <p></p>
</div> <div class="par2">
<p></p> <p></p> <p></p>
</div>

Логика понятна?

Зен-кодинг был придуман для экономии времени специалистов, специалистами для специалистов, а не для упрощенного изучения HTML. Халявы не будет, хенд-кодинг еще никто не отменял.

Это то же самое, что учиться водить на болиде Формулы 1: да, едет быстрее, а толку?

Robot · June 29, 2011

Robot, ты лентяй, который даже не читает документацию, извини.
Вот например смотрим сюда: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
example: div.par$2>p*3
result: <div class="par1">
<p></p> <p></p> <p></p>
</div> <div class="par2">
<p></p> <p></p> <p></p>
</div>
Логика понятна?
Зен-кодинг был придуман для экономии времени специалистов, специалистами для специалистов, а не для упрощенного изучения HTML. Халявы не будет, хенд-кодинг еще никто не отменял.
Это то же самое, что учиться водить на болиде Формулы 1: да, едет быстрее, а толку?

Спасибо! Да здравствует рукопашка! Ура-Ура-Ура-Ура!-так началось восстание китайских боксёров.

Морпех:

-А, за чем нам рукопашка, метание ножей, лазанье голыми по потолку и стенам?

У нас ведь есть лазерные, бластерные, суокные пушки, гибирдные прожекторы джидаев

индивидуального использования,

межгалактические ракеты, межвселенские крейсеры-звёзды убийцы!

Сэр! И накой чёрт, нам нужна рукапашка и ножы!?

Сержант

-...

Морпех:

-Господи! Моя рука! Кто-нибудь! Вытащите нож! Боже! Ладонь! (кисть истекает кровью,

морпех висит прикованй ножом к стене)

Сержант:

-Что бы противник не мог воспользоваться своим оружием, нужно пробить и вторую

руку! (исполняет) А если надо, то и ногу, пальцы, хвост, уши, голову и др. части

тела!

/вольная трактовка диалога из фильма "Звёдный Дисант"/

Edited June 29, 2011 by Robot

Sign In

Zen Coding

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information