Narzędzia JavaScript – zbiór

tools

Poziom średnio-zaawansowany

Od czasu do czasu publikujemy artykuły o interesujących i przydatnych narzędziach. Pracując na co dzień przychodzi realizować różne zadania, więc i poznaje się kolejne ciekawe narzędzia. A czasami ktoś po prostu podeślę ciekawostkę. I tak mamy dziś mały zbiór.

Narzędzia JavaScript (jQuery, HTML5, etc)

Przejdźmy do rzeczy.

1. Tworzenie prezentacji w HTML5 dzięki reveal.js

Proste w użyciu narzędzie JavaScript i HTML, pozwalające na tworzenie prezentacji. Definiujemy poszczególny slajdy składające się na naszą prezentację. Biblioteka dostarcza m.in. UI z efektami przejścia między elementami prezentacji.

Zasoby:

http://lab.hakim.se/reveal-js

https://github.com/hakimel/reveal.js/

http://mrbool.com/how-to-create-presentations-in-the-browser-with-reveal-js/27264

2. ASCIIFlow

Czyli narzędzie do rysowania, przy czym na naszą grafikę składają się znaki ASCII.

URL:

http://asciiflow.com/#Draw

ASCIIFlow tool

ASCIIFlow tool

Niezła zabawa, którą można kreatywnie wykorzystać. To już krok w stronę ASCII Art.

3. Google Web Designer

Czyli „Build great multi-device web experiences”. Może nieco odbiegamy tutaj od głównego tematu, jako że jest to program desktop, ale ważne co jest wynikiem pracy z nim. Niemniej jest to godny uwagi program wspomagający nas w projektowaniu i realizacji stron HTML5, gotowych do działania na wielu różnych urządzeniach.

Google Web Designer

Google Web Designer

URL:

http://www.google.com/webdesigner/

Dokumentacja:

https://support.google.com/webdesigner/#topic=3249465

A będąc już przy temacie wizualnego tworzenia projektów w HTML5, trzeba zauważyć narzędzie powstałe z inicjatywy IBM i Dojo – Maqetta.

4. HTML5 jQuery Paint Plugin

Prosty paint na własnej stronie. Żaden problem dzięki temu pluginowi jQuery.


5. Drzewa w JavaScript (jQuery)

Kolejne narzędzie JavaScript dotyczy funkcjonalności drzewek (trees), które nie raz trzeba implementować w projektach. Tutaj mamy świetne rozwiązanie – jsTree.

Jest to plugin jQuery o sporych możliwościach, m.in. drag & drop support, nawigacja za pomocą klawiatury, zarządzanie inline i inne.

Użycie nie sprawia żadnych problemów.

Przykładowo:

// tworzenie nowego jsTree
$(function () { $('#jstree_demo_div').jstree(); });

// nasłuchiwanie zdarzeń
$('#jstree_demo_div').on("changed.jstree", function (e, data) {
  console.log(data.selected);
});

Więcej na stronie projektu:

http://www.jstree.com/

Idąc dalej, mamy tu również świetne rozwiązanie bazujące na AJAX, które pozwala implementować przeglądarkę plików w postaci drzewa:

http://www.abeautifulsite.net/jquery-file-tree/

Podsumowanie

To wszystko na dziś, ale to nie ostatni taki zbiór na blogu. Zachęcam do wpisywania w komentarzach informacji o ciekawych narzędziach, które znacie, stosujecie, bądź napisaliście sami.

Web Developer ze sporym bagażem doświadczeń.
Języki: xhtml, html5, css3, js, php, python, java.
Hobby: programowanie gier (browser, mobile).

Podaj dalej: Share on Facebook2Tweet about this on TwitterShare on Google+0Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.