NetBeans z wsparciem dla Zen Coding

W trakcie przeglądania ostatnich nowości ze świata WebDesign moją uwagę przykuła informacja, na temat nowej wtyczki do NetBeans, wspierająca Zen Coding. Już wcześniej zainteresowałem się tą techniką, jednak do nie dawna wsparcie dla NetBeans było nizwykle ubogie i praktycznie nic nie dające pod wsględem wydajności i szybkości pracy. Tym razem jednak jest zupełnie inaczej.

Instalacja Zen Coding w NetBeans

Proces instalacji jest prosty, a wymagany do niej jest NetBeans w wersji nie mniejszej niż 6.9.1:

• ściągnij plugin ze strony głównej lub bezpośrednio z tego linku.
• w NetBeans przejdź do Tools -> Plugins i tam w zakładce Download użyj przycisku Add plugin i wskaż na ściągnięty wcześniej plik
• Uruchom ponownie NetBeans

Od tej pory używając kombinacji klawiszy Ctrl+Alt+n uruchamiamy działanie Zen Coding.

Co to jest Zen Coding?

Najprościej opisując, jest to wykorzystanie selektorów CSS do stworzenia całej struktury kodu HTML. Myślę, że najprościej będzie to pokazać na prostym przykładzie, wpisując w edytorze:

div#info>p.green

i naciskając opisaną wyżej kombinację klawiszy Ctrl+Alt+n otrzymamy kod HTML w postaci:

<div id="info">
  <p class="green"></p>
</div>

Oczywiście za pomocą selektorów możemy zbudować bardziej skomplikowane struktury:

div#content>h2+img.top+p+ul.similar>li*4>a

i możemy otrzymać przykładową budowę strony:

<div id="content">
  <h2></h2>
  <img src="" alt="" class="top" />
  <p></p>
  <ul class="similar">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

Oczywiście zapoznanie się z wszystkimi selektorami, może zająć chwilkę, ale potem szybkość i jakość pracy z kodem HTML wzrasta wykładniczo. Szczegółowe informacje na temat Zen Coding znajdziecie na stronie głównej projektu. Zdecydowanie polecam zapoznanie się z tym pluginem. Dla mnie budowanie, żmudnych i przecież często powtarzalnych schematów w HTML stało się teraz o wiele lepsze i wydajniejsze.

• Bookmark
• RSS
• Tweet
• Opublikuj

DyskusjaKomentarze: 2

• Rafał Płatek 01 grudnia 2010 13:20

  Odpowiedz
  
  Hej!
  
  Nasz polski Pajączek również, od najnowszej wersji, w pełni wspiera bibliotekę zen-coding.
  
  Link do opisu zen-coding w Pajączku:
  http://sprytne.pl/index.php/2010/12/nowy-pajaczek-z-pelnym-wsparciem-dla-zen-coding/
  
  Pozdrawiam
  Rafał Płatek
  • Krzysztof Bachula 02 grudnia 2010 09:45
    Bardzo fajnie. Zen Coding jest na prawdę przydatnym narzędziem i ciesze się, że wraz z rozwojem Pajączka pomyśleliście o jego dodaniu.

Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]