Zen-coding - wprowadzenie do szybkiego kodowania w HTML

Lysander · Luty 16, 2011, 20:48:43

[url=http://code.google.com/p/zen-coding/]Zen-coding[/url] jest wtyczką pozwalającą na "rozszerzanie" skrótowych wyrażeń podobnych do CSS-a do prawidłowego kodu HTML z kilkoma wspomagaczami.

Najprostszy przykład (pokazujący duże podobieństwo do css):
[code]div#wrapper>p.asd[/code]
po wciśnięciu skrótu klawiszowego do rozszerzania wprowadzonego kodu da nam:
[code]<div id="wrapper">
<p class="asd"></p>
</div>[/code]

Natomiast poniższa linijka kodu, którą omówię dokładnie później
[code]html:xt>div#wrapper>(div#header>(div#logo+div#menu>ul>li*5>a))+(div#content>p.article-$*3)+div#sidebar+div#footer[/code]
da nam ładnie sformatowany podstawowy zarys całej strony.

Wtyczka ta pasuje do wielu edytorów, w tutorialu opiszę jedynie prosty proces instalacji dla [url=http://notepad-plus-plus.org/]Notepad++[/url].

Instalacja dla Notatnika++

1. W menu wyszukujemy pozycję "Pluginy" w niej "Plugin Manager" i "Show Plugin Manager"
[img]http://img.burning-brushes.pl/images/1jxj.jpg[/img]

2. W oknie menedżera pluginów w zakładce "Available" na samym dole listy wyszukujemy "Zen Coding - Python". Zaznaczamy przy nim ptaszka i naciskamy "Install".
[img]http://img.burning-brushes.pl/images/2ava.jpg[/img]
Program zapyta nas o zgodę na ponowne uruchomienie Notepada na co oczywiście się zgadzamy.

3. Kluczowym i ostatnim krokiem przed rozpoczęciem pracy z zen-codingiem jest ustawienie języka kodowania, którym będziemy się posługiwać.
[img]http://img.burning-brushes.pl/images/3pjp.jpg[/img]

I to wszystko - Notepad++ jest gotowy do odbioru i rozszerzania kodu zen : P

Wróćmy do przykładu z początku tutoriala, który po wprowadzeniu do Notepada i naciśnięciu kombinacji [b]Ctrl+Alt+Enter[/b] da nam
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<div id="content">
<p class="article-1"></p>
<p class="article-2"></p>
<p class="article-3"></p>
</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>[/code]
lub bardziej przejrzyście tu: [url=http://img.burning-brushes.pl/images/4tpt.jpg]http://img.burning-brushes.pl/images/4tpt.jpg[/url]

Miałem ambicje żeby to jakoś ładnie pokolorować, który element odpowiada za co, ale wyjątkowo mi to nie wychodziło, dlatego słownie podkreślę tylko kilka elementów.

Zaczynając od poczatku:

html:xs odpowiada za cały doctype i sekcje html, head i body

Znakiem > umieszczamy w nim div o id (# z css) wrapper i podobnie postępujemy z kolejnymi elementami zawierającymi się w innych.

Następnie należy zwrócić uwagę na ważną rolę nawiasów, które chronią kolejne elementy przed "siłą" > - takim sposobem elementy:
(div#header>(div#logo+div#menu>ul>li*5>a))
(div#content>p.article-$*3)
div#sidebar
div#footer
połączone znakiem + są sobie równe/znajdują się na jednakowej "głębokości" w divie wrapper. Gdyby ominąć wszystkie nawiasy ostatni element kodu (div#footer) nie dość, że znalazłby się głęboko, zamknięty w poprzedzających go elementach to zostałby ponad to powielony pięć razy - za co natomiast odpowiadałaby część
div#menu>ul>li*5>a
w której jak widać w divie#menu umieszczamy listę z pięcioma elementami, a następnie do każdego z nich dodajemy a co daje prosty zarys nawigacji.

Ostatnim elementem, który chciałbym omówić jest znak $, obecny we fragmencie
div#content>p.article-$*3
który znaczy tyle, że w sekcji #content umieszczamy trzy paragrafy o klasach article-1, article-2, article-3, co chyba jasno obrazuje działanie $

Zen-coding oferuje podobną funkcjonalność w CSS-ie, oczywiście opiera się ona jedynie na skróconych nazwach właściwości elementów.

Wszystkie możliwe skróty są do odnalezienia w załączonym cheat sheet'cie

Abik · Luty 16, 2011, 21:05:04

O Ty koksie : O
dobre, dzięki wielkie, używam notepada, ale nie zbyt wtyczek do niego, ta jest przeboska, chyba spróbuję się z tym zapoznać bliżej, na prawdę dzięki

Lysander · Listopad 20, 2012, 11:59:40

[quote author=Lysander link=topic=5838.msg109482#msg109482 date=1297882123]
1. W menu wyszukujemy pozycję "Pluginy" w niej "Plugin Manager" i "Show Plugin Manager"
[img]http://img.burning-brushes.pl/images/1jxj.jpg[/img]
[/quote]
lol, ok.

Chciałem poinformować, że zen-coding przekształcił się w Emmet: [url=http://docs.emmet.io/]http://docs.emmet.io/[/url], http://docs.emmet.io/cheat-sheet/

Forum graficzne Burning-Brushes.pl

Zen-coding - wprowadzenie do szybkiego kodowania w HTML

Lysander

Luty 16, 2011, 20:48:43

Abik

Luty 16, 2011, 21:05:04 #1

Lysander

Listopad 20, 2012, 11:59:40 #2