adamczuk.net.pl » javascript

Znane skrypty typu Lightbox

admin — Wed, 03 Nov 2010 23:09:07 +0000

Popularny w ostatnich latach efekt Lightbox znalazł wielu naśladowców. Nowe skrypty pozwalają nie tylko na otwieranie pojedynczych zdjęć, ale również galerii, materiałów wideo, elementów flash czy wykonywania żądań AJAX. Mało kto pamięta, że wszystko zaczęło się jeszcze w 2005 roku, kiedy pierwszy skrypt Lightbox stworzył Lokesh Dhakar.

Początek historii

Pierwotny skrypt Lightbox nie używa efektów żadnej biblioteki JS do prezentacji. Prosty pomysł, troszkę kodu JavaScript i kilka plików graficznych. Wszystko to wystarczyło do uzyskania nowatorskiego na tamte czasy efektu. Skrypt pozwalał na oglądanie plików graficznych.

Niedługo potem powstała druga wersja skryptu. Lightbox 2
używa znanej biblioteki prototype oraz efektów scriptaculous. Wprowadzone zmiany to możliwość przechodzenia między oglądanymi zdjęciami, płynna animacja podczas prezentacji obrazów i wiele opcji konfiguracyjnych. Minusem tego rozwiązania była waga używanych technologii. Obydwie biblioteki nie były lekkie, co zostało poprawione w następcach tego projektu.

Alternatywne skrypty

Fancybox to skrypt, który korzysta z biblioteki jQuery, lekkiego frameworka dla JavaScript. Skrypt pozwala na otwieranie obrazów, elementów HTML, ale także animacji flash, ramek czy żądań AJAX. Ustawienia wyglądu łatwo modyfikuje się poprzez arkusze stylów, ale to nie powinno nikogo szokować. Ciekawym pomysłem jest obsługa rolki w myszce czy suwaka na trackpadzie, a także strzałek na klawiaturze. Bardzo użyteczne skróty.

ThickBox w wersji 3.1 nie jest wprawdzie rozwijany, ale ciągle pozostaje dostępny w sieci. Skrypt łączył swoje działanie z biblioteką jQuery. Podobnie jak inne rozwiązania oferuje otwieranie obrazów, treści liniowych, ramek i żądań poprzez AJAX.

Z kolei Multibox korzysta z konkurencyjnej biblioteki MooTools. Skrypt wspiera otwieranie elementów flash, materiałów wideo oraz treści HTML,

GreyBox to jedyny znany mi skrypt, który nie potrzebuje zewnętrznego frameworka JS. Ogromna zaleta tego rozwiązania to końcowa wielkość. Popularne wyskakujące okienko, które nie ssie waży całe 22 kB. GreyBox otwiera zdjęcia oraz inne treści, w tym strony internetowe.

Nick Stakenburg napisał skrypt Lightview, który korzysta z wspomnianych wcześniej bibliotek prototype i scriptaculous. Istotnie należy przyznać, że możliwości tego rozwiązania są imponujące. Otwieranie wielu typów mediów, szerokie możliwości stylizacji elementów wizualnych, automatyzacja kolejnych działań to główne cechy tego skryptu. Lightview wykorzystuje różne techniki optymalizacji, w tym wcześniejsze ładowanie obrazów. Poza wymienionymi cechami skrypt obsługuje wiele przycisków klawiatury.

Lightwindow to kolejny skrypt wykorzystujący biblioteki prototype i scriptaculous. Główne cechy otwieranie wielu rodzajów mediów i treści, wiele możliwości opisu wyświetlanych elementów, a także duża elastyczność przy zmianach obrazów, w tym automatyczne dostosowywanie rozmiaru. Lightwindow wykrywa typ prezentowanej treści oraz pozwala na wysyłanie formularzy.

ColorBox to lekki plugin dla jQuery, który oferuje wiele możliwości, poczynając od otwierania obrazów, pokazów slajdów, a kończąc na treściach ramek czy żądań Ajax. Sam skrypt jest lekki, wygląd prezentowanego efektu modyfikują style kaskadowe, a zmiany ustawień domyślnych można wykonać bez ingerencji w kod bazowy skryptu. Wywołania skryptu można łączyć z kodem jQuery, a całość kodu XHTML jest zgodna ze standardami sieciowymi.

Inny plugin dla jQuery to NyroModal, który podobnie jak wiele innych klonów Lighboxa otwiera różne media. Dodatkowo zawsze zapewnia otwieranie treści wewnątrz okna przeglądarki, obsługę błędów, modyfikowaną animację i widok.

Istnieje wiele innych skryptów, które nie zostały w tym artykule szerzej opisane, jak Shadowbox, Facebox, piroBox, GreyBox Redux, prettyPhoto i pewnie kilkanaście innych.

Podsumowanie

Opisane i wymienione skrypty to tylko część przykładów jakie znajdziemy w sieci. Powstało wiele podobnych rozwiązań, które mniej lub bardziej różnią się od siebie. Jedne otwierają pojedyncze zdjęcia, drugie całe galerie. Część pozwala na uruchamianie pokazów slajdów, a inne na odtwarzanie materiałów wideo i flash.

Każdy przypadek użycia skryptu na stronie czy aplikacji jest inny. Czasami potrzeba prostego efektu, który nie wymaga konieczności dołączania ciężkich bibliotek JS, czy efektów, pokroju scriptaculous. Jeśli z kolei strona używa frameworka dla innych funkcjonalności to lepsze będzie znalezienie skryptu o większym możliwościach, który potrzebuje do działania danej biblioteki.

Wsparcie nowoczesnych przeglądarek dla standardów sieciowych jest coraz lepsze, a udział przestarzałych w rynku nieustannie maleje. Dzięki temu możemy być pewni, że kolejne skrypty i rozwiązania będą coraz lepsze i efektowniejsze.

wmd – alternatywa dla TinyMCE

admin — Tue, 10 Aug 2010 19:30:24 +0000

Język HTML oraz XHTML to główne technologie używane przy tworzeniu stron internetowych. Niestety nie wszyscy, którzy mają styczność z internetem to ludzie techniczni. Właśnie dla takich ludzi stworzono edytory WYSIWYG, czyli dostajesz, co widzisz. Jednak ten wpis dotyczy edytora WYSIWYM, którym jest wmd.

Markdown to język znaczników przeznaczony do formatowania tekstu, który został stworzony przez Johna Grubera i Aarona Swartza. Podstawowy cel składni język to uproszczenie tworzenia i formatowania tekstu. Tekst zapisany w takim formacie jest przetwarzany to semantycznego XHTML. Nic nie stoi na przeszkodzie w zapisywaniu obydwu wersji na wypadek przyszłych aktualizacji tekstu.

Podstawowym problemem edytorów WYSIWYG jest generowanie niepoprawnego kodu. Wina stoi nie tylko po stronie parsowania tekstu przez skrypt, ale także oczekiwaniach użytkownika, co do samego formatowania tekstu. Zalety edytorów WYSIWYM to generowanie semantycznego kodu, który nie zawiera formatowania wewnątrz znaczników tekstu. Wygląd takiego tekstu zależy od zewnętrznych arkuszy stylów.

Edytor wmd to doskonała alternatywa dla TinyMCE, popularnego edytora WYSIWYG. Wprawdzie nie korzystałem z ostatnich wersji tego edytora od kilku lat, ale na potrzeby ostatnich projektów stosuję właśnie wmd. Markdown nie jest trudnym formatem i do podstawowych zastosowań zupełnie wystarcza.

Nowe jQuery – nowe rozwiązania

admin — Fri, 05 Feb 2010 10:43:28 +0000

Na początku roku wydano jQuery 1.4, które wprowadza nowe funkcjonalności i poprawia znane błędy. Wydanie nowej wersji trwało stało się dla twórców powodem do wielkiego świętowania, czemu poświęcili osobną stronę.

W ciągu 14 dni twórcy biblioteki opowiadali o zmianach jakie wprowadzili do nowej wersji. Szczególnie interesujący był podcast, w którym John Resig przedstawił zmiany w rdzeniu biblioteki. Zmniejszenie rozmiaru, wzrost wydajności i większa zgodność z przeglądarkami.

Drawter

admin — Fri, 20 Nov 2009 20:01:37 +0000

Dawno temu znalazłem w sieci ciekawe narzędzie – mianowicie Drawter.com. Pamiętam, że jego możliwości były spore, chociaż nigdy nie próbowałem tworzyć przy jego pomocy prawdziwego układu strony. Możliwości aplikacji pokazuje screencast ze strony projektu. Program pozwala na tworzenie stron internetowych poprzez rysowanie warstw. Jednak nie jest to internetowy edytor WYSIWYG.

Drawter w elegancki sposób generuje kod XHTML oraz CSS na podstawie narysowanych myszką warstw. Rysowane warstwy symbolizują znaczniki kodu, a nie narysowany obraz. Draw Mode pozwala na rysowanie kolejnych tagów naszego layoutu, a Edit Mode pozwala dodać lub zmienić właściwości stylów. Oprócz tego możemy w dowolnej chwili wygenerować kod naszej strony.

Narzędzie to wymaga od użytkownika wiedzy na temat XHTML i CSS, a zatem nie jest przeznaczone dla początkujących koderów. Jednak programiści Drawtera zapowiadają stworzenie wersji Amateur dla laików standardów sieciowych.

ferrante.pl

admin — Fri, 05 Jun 2009 21:48:58 +0000

W sieci istnieje wiele blogów na temat technologii internetowych. Jednak nie wszystkie z nich, właściwie i rzeczowo opisują dane technologie, do tego w języku polskim. Jeśli chodzi o Java Script to moim podstawowym źródłem informacji była strona Damiana Wielgosika, czyli ferrante.pl.

Autor przedstawił na blogu kilkanaście przydanych i obszernych artykułów na temat Java Script. To dzięki tej stronie nabrałem przekonania do stosowania JS. W dalszej kolejności ucząc się jQuery, które rozszerza możliwości JS, a zostało równie profesjonalnie opisane przez autora. Tego typu strony pozwalają początkującym użytkownikom łatwo zapoznać się ze specyficznym tematem.

Szkoda tylko, że intensywny cykl artykułów na temat JS, a także jQuery przystopował trochę częstość aktualnizacji bloga. Trudno się przyznać, ale brak czasu jest poważnym wrogiem podczas aktywnej działalności w sieci. Na swoim przykładzie mogę przyznać, jak trudne jest regulane pisanie na specjalistyczne tematy. Tym bardziej cieszę się, że ferrante.pl działa znowu, a autor częściej aktualizuje bloga.

JavaScript dla webmasterów. Zaawansowane programowanie

admin — Mon, 25 May 2009 20:29:05 +0000

JavaScript jest technologią działającą po stronie klienta. W latach 90-tych ubiegłego wieku był wykorzystywany w aplikacjach internetowych do różnych celów. Jednak większość użytkowników ma złe doświadczenia związane z JS. Wyciąganie informacji o przeglądarce, rozwidlanie kodu oraz irytujące okienka pop-up to standardowe zadania jakie spełniał kiedyś JavaScript. A przecież możliwości JS są dużo większe. Możemy się, o tym przekonać czytając książkę Nicolasa Zakasa.

“JavaScript dla webmasterów. Zaawansowane programowanie” to książka, w której znajdziemy wiele informacji na temat struktury języka oraz sposobu programowania w nim. Możliwości JS rozszerzają się w połączeniu z DOM i BOM. Nowoczesna aplikacja webowa musi pozwalać na swobodną interakcje użytkownika z oprogramowaniem. Możemy zwiększyć użyteczność naszych stron internetowych poprzez programowanie obiektowe oraz rozdzielenie warstw prezentacji i logiki. Dzięki tej książce nauczymy się jak tworzyć mechanizmy komunikacji klient-server, a także projektować intuicyjne i dynamiczne interfejsy użytkownika.

Książka “JavaScript dla webmasterów. Zaawansowane programowanie” zawiera przykładowe rozwiązania najczęściej spotykanych problemów. Podczas tworzenia aplikacji internetowych projektanci często muszą rezygnować ze swoich pomysłów, bo nie mają możliwości ich realizacji. W książce znajdziemy informacje o wyrażeniach regularnych, obsłudze zdarzeń oraz rozszerzeniach JavaScriptu. Nauczymy się także podstaw ECMAScript, struktury obiektowego modelu dokumentu oraz właściwego osadzania JavaScript w kodzie strony WWW. Autor przedstawia również alternatywne sposoby sprawdzania poprawności formularzy oraz wykorzystania elementów XML. Wreszcie poznamy zasady działania komunikacji między przeglądarką i serwerem. Jeśli interesjuą nas usługi sieciowe i bezpieczeństwo naszych aplikacji JavaScript to niezbędne informacje również znajdziemy w tej książce.

Książka jest bardzo dobrym podręcznikiem dla osób znających podstawy JS. Znajomość materiału powinna pozwolić nam na właściwą rozbudowę naszych aplikacji. Przedstawione przykłady znajdują bardzo duże zastosowanie w nowoczesnych, intuicyjnych interfejsach użytkownika.

OSTATECZNA OCENA: 4/5

Autor: Nicholas C. Zakas
Tytuł oryginału: Professional JavaScript for Web Developers
Tłumaczenie: Jarosław Dobrzański, Krzysztof Czupryński, Daniel Kaczmarek
ISBN: 83-246-0280-1
Format: B5, stron: 696
Data wydania: 04/2006 (Helion)