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.

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.

Tworzenie aplikacji internetowych to skomplikowany, czasochłonny i nie zawsze opłacalny proces.

Dlaczego wielu programistów pisze własne aplikacje, frameworki, biblioteki i inne rozwiązania?

Po prostu wychodzą z przekonania, że sami zrobią to lepiej. Czasami zdarza się, że dzięki temu podejściu rodzą się prawdziwe perełki. Często wielkie molochy tracą klientów, użytkownicy znajdują produkty skrojone na miarę ich potrzeb i każdy może być zadowolony.

Pozostałe przypadki to zmarnowany potencjał, czas i zasoby, bo projekt umiera, zanim rozpoczął żywot. Dopóki nie rozpoczniesz tworzenia nowej jakości nie będziesz, miał pewności co do swojej wartości.

Właściwy wpis

Często zastanawia mnie kształt moich wypowiedzi formułowanych w stanie, jak najbardziej trzeźwym. Jestem przecież człowiek technicznych, któremu nie obce powinno być prasowanie, ale już bogaty język podczas wszelkich wypowiedzi, co najmniej zadziwia.

Człowiek uczy się przez lata, choć nie zawsze ma na to czas i chęci. Najlepszym przykładem moich osiągnięć jest SquareZone. Prosty, ale funkcjonalny serwis, który przystępnie oferuje informacje użytkownikom. Tym razem przyszedł czas na nowy przykład.

MyBlog – nazwa kodowa powinna być bardziej tajemnicza, ale projekt jest w zbyt wczesnym stadium, mimo wielomiesięcznej pracy przy jego tworzeniu. Otóż wspomniana aplikacja oferuje lub będzie oferowała w przyszłości funkcjonalności znane z popularnych systemów blogowych.

Architektura systemu po części czerpała ze znanego WordPressa, jednak największym atutem omawianej aplikacji jest wydajność i zgodność ze standardami. Wszystkie testy i szczegóły zostaną przedstawione wkrótce. Niedługo postaram się przedstawić kolejne funkcjonalności oraz założenia rozwojowe.

Obecnie nie mam pewności czy kod źródłowy zostanie udostępniony publicznie, jednak wszelkie opinie na temat działania lub architektury są mile widziane.

Wersja demonstracyjna myBlogdostępna jest w sieci.

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.

Wśród typów obrazka rozpoznamy ten, który ma YouTube, nowy LightBox albo chociaż Lightwindow. Ten wpis jest prawdziwym dopełnieniem artykułu na temat stylowania lightboxa. Po zmianie kolorystki skryptu, możemy spokojnie dostosować do własnych potrzeb również obrazek ładowania.

Jednak korzystanie z edytorów WYSIWYG podczas tworzenia aplikacji internetowych to jedna z najgorszych praktyk. Edytory te prowadzą często do tworzenia nadmiarowego kodu. Bynajmniej nie chodzi tu tylko o przestarzałe znaczniki i inne wynalazki, które nie przechodzą poprawnie walidacji. Edytory WYSIWYG najzwyczajniej w świecie nie potrafią tworzyć w pełni semantycznego kodu XHTML. Jednak w pewnym stopniu mogą być przydatne.

Wprowadzenie

TinyMCE to niezależny internetowy edytor WYSIWYG napisany w Javascript. TinyMCE jest wydawany przez Moxiecode Systems AB jako Open Source na licencji LGPL. Główną zaletą tego produktu jest łatwa integracja z dowolnym systemem zarządzania treścią.

W jednym z projektów klient chciał formatować treść swoich wpisów. Oczywiście rozsądne było założenie, że klient nie zna znaczników HTML, składni BBCode czy Textile. Po krótkim namyśle, postanowiłem skorzystać z gotowego rozwiązania jakim jest TinyMCE.

Instalacja

Na początek musimy ściągnąć potrzebny TinyMCE, najlepiej w najnowszej wersji. Pozostaje nam wypakowanie archiwum w wybranej lokalizacji i podlinkowanie w kodzie naszej strony.

<script language="javascript" type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>

W moim przypadku był to katalog js/tiny_mce, w którym znajdował się właściwy plik tiny_mce.js. Uruchomienie edytora jest równie proste. Należy jedynie pamiętać o objęciu całości przez {literal} i {/literal}, jeżeli korzystamy z szablonów Smarty, ponieważ przy tworzeniu obiektu tinyMCE stosowane są klamry.

<script language="javascript" type="text/javascript">
  tinyMCE.init({
    mode : "textareas"
  });
</script>

Instalacja to dopiero początek. Cała magia skryptu kryje się w mnogości opcji konfiguracyjnych.

Konfiguracja

Kilkanaście kluczowych opcji pozwala na praktycznie dowolne ustawienie wyglądu i zachowania naszego edytora. Dokumentacja TinyMCE zawiera spis wszystkich parametrów konfiguracyjnych.

Opcja mode pozwala na ustawienie, jakie elementy naszej aplikacji będą edytorami. Wartość textareas powoduje przekształcenie wszystkich znaczników w edytory WYSIWYG.

tinyMCE.init({
  mode : "textareas"
});

Możliwe jest również przekształcenie w edytor dowolnego elementu na naszej stronie. W tym wypadku ustawiamy wartość exact oraz podajemy dodatkowy parametr elements, w celu powiadomienia, które elementy chcemy zmienić w edytor.

tinyMCE.init({
  mode : "exact",
  elements : "post-text"
});

Jeżeli potrzebujemy polskich podpowiedzi (hints) lub innych elementów to możliwy jest wybór języka. Jednak konieczne jest ściągnięcie odpowiednich plików z serwera TinyMCE i umieszczenie ich w naszych katalogach. Resztę załatwia opcja language z wartością danego języka. W naszym przypadku będzie to pl dla języka polskiego.

tinyMCE.init({
  ...
  language : "pl"
});

Następnie powinniśmy ustawić theme, który odpowiada za ilość funkcji, dostępnych w edytorze. Wartość advanced pozwala na dużą elastyczność, zarówno w doborze funkcji jak i innych ustawieniach. Druga możliwość to simple, która udostępnia edytor z podstawowymi funkcjami.

tinyMCE.init({
  ...
  theme : "advanced"
});

Wartość advanced jest domyślna, a nasz edytor może zawierać ponad 50 różnych funkcji! Zapewne większości użytkowników niepotrzebne są niektóre funkcje, dlatego możemy skorzystać z kolejnej opcji konfiguracyjnej.

Jeżeli potrzebujemy tylko wybrane funkcje i potrafimy zmieścić je w dwóch lub jednym pasku to wystarczy dodać kolejny fragment kodu.

tinyMCE.init({
  ...
  theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough",
  theme_advanced_buttons2 : "undo,redo,|,link,unlink",
  theme_advanced_buttons3 : ""
});

W pierwszym pasku mamy Pogrubienie, Pochylenie, Podkreślenie oraz Przekreślenie rozdzielone separatorem pionowym. W kolejnym pasku znajdują się Cofnij i Ponów oraz Dodaj link i Usuń link, także rozdzielone separatorem. Trzeci pasek jest zdefiniowany jako pusty. Dla krótszej notacji można stosować | zamiast separator.

Możemy również wybrać pozycję pasków oraz wyrównanie przycisków. Dopuszczalne wartości dla ustawienia pasków to top, bottom oraz external, przy czym druga jest domyślna, a trzecia wymaga dodatkowych opcji w celu ustawienia pasków w zewnętrznej warstwie. Jeśli chcemy wyrównać przyciski to możemy skorzystać z wartości left, right lub center, przy czym domyślnie przyciski umieszczone są na środku paska.

tinyMCE.init({
  ...
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left"
});

Podsumowanie

Artykuł przedstawia ogólne informacje na temat TinyMCE. Zdaję sobie sprawę, że omówiłem jedynie podstawowe opcje konfiguracyjne, ale w większości użytkowników jest to wystarczające. Więcej informacji możemy znaleźć w dokumentacji.

TinyMCE jest bardzo elastyczne i pozwala na praktycznie dowolną konfigurację. Nie należy jednak przesadzać, ponieważ czasem coś może nie działać tak jak tego oczekujemy.