• Welcome to Forum graficzne Burning-Brushes.pl. Please log in or sign up.
 

Zen-coding - wprowadzenie do szybkiego kodowania w HTML

Zaczęty przez Lysander, Luty 16, 2011, 20:48:43

Poprzedni wątek - Następny wątek
Zen-coding 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):
div#wrapper>p.asd
po wciśnięciu skrótu klawiszowego do rozszerzania wprowadzonego kodu da nam:
<div id="wrapper">
<p class="asd"></p>
</div>


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


Wtyczka ta pasuje do wielu edytorów, w tutorialu opiszę jedynie prosty proces instalacji dla Notepad++.

Instalacja dla Notatnika++

1. W menu wyszukujemy pozycję "Pluginy" w niej "Plugin Manager" i "Show Plugin Manager"


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".

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ć.


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 Ctrl+Alt+Enter da nam
<!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>

lub bardziej przejrzyście tu: http://img.burning-brushes.pl/images/4tpt.jpg

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
Give sanity a longer leash  |  H+ 

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 :D

Cytat: Lysander w Luty 16, 2011, 20:48:43
1. W menu wyszukujemy pozycję "Pluginy" w niej "Plugin Manager" i "Show Plugin Manager"

lol, ok.



Chciałem poinformować, że zen-coding przekształcił się w Emmet: http://docs.emmet.io/, http://docs.emmet.io/cheat-sheet/
Give sanity a longer leash  |  H+