Forum graficzne Burning-Brushes.pl

Tutoriale graficzne i materialy => Pozostałe tutoriale => Wątek zaczęty przez: Lysander w Luty 16, 2011, 20:48:43

Tytuł: Zen-coding - wprowadzenie do szybkiego kodowania w HTML
Wiadomość wysłana przez: Lysander w Luty 16, 2011, 20:48:43
Zen-coding (http://code.google.com/p/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++ (http://notepad-plus-plus.org/).

Instalacja dla Notatnika++

1. W menu wyszukujemy pozycję "Pluginy" w niej "Plugin Manager" i "Show Plugin Manager"
(https://burning-brushes.pl/proxy.php?request=http%3A%2F%2Fimg.burning-brushes.pl%2Fimages%2F1jxj.jpg&hash=657708d7de5c50a90076d31f2946c50730551553)

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".
(https://burning-brushes.pl/proxy.php?request=http%3A%2F%2Fimg.burning-brushes.pl%2Fimages%2F2ava.jpg&hash=09cb6d0b0f0861ccf7a14af273d1078360ef48d9)
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ć.
(https://burning-brushes.pl/proxy.php?request=http%3A%2F%2Fimg.burning-brushes.pl%2Fimages%2F3pjp.jpg&hash=6e3864d6ab359b96b8a4ecdfffab2e37a691ce6e)

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 (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
Tytuł: Odp: Zen-coding - wprowadzenie do szybkiego kodowania w HTML
Wiadomość wysłana przez: Abik w 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 :D
Tytuł: Odp: Zen-coding - wprowadzenie do szybkiego kodowania w HTML
Wiadomość wysłana przez: Lysander w Listopad 20, 2012, 11:59:40
Cytat: Lysander w Luty 16, 2011, 20:48:43
1. W menu wyszukujemy pozycję "Pluginy" w niej "Plugin Manager" i "Show Plugin Manager"
(https://burning-brushes.pl/proxy.php?request=http%3A%2F%2Fimg.burning-brushes.pl%2Fimages%2F1jxj.jpg&hash=657708d7de5c50a90076d31f2946c50730551553)
lol, ok.



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