DHTML - Dynamiczny staruszek

Java, Shockwave, ActiveX - to znane wszystkim internautom synonimy efektowności stron WWW. Czysty HTML, nie uzupełniony o te "nowinki", w praktyce oznacza statykę i - najczęściej - niewielką atrakcyjność internetowej witryny.

Java, Shockwave, ActiveX - to znane wszystkim internautom synonimy efektowności stron WWW. Czysty HTML, nie uzupełniony o te "nowinki", w praktyce oznacza statykę i - najczęściej - niewielką atrakcyjność internetowej witryny.

Niedawno na staruszku - HTML-u dokonano pewnej rewitalizacji, po której stał się zdecydowanie bardziej dynamiczny.

DHTML, czyli Dynamic Hypertext Markup Language to rozszerzenie języka HTML o nowe możliwości: dokładne określenie położenia obiektów (pozycjonowanie) i wynikającą z tego możliwość animacji, użycie dowolnych, ładowanych z Sieci typów czcionek, pełną interakcje, zmiany "w locie" zawartości strony i stylów oraz tzw. filtry i przenikania. Wszystkie te możliwości całkowicie integrują się z HTML-em.

Wymienione na wstępie technologie mają pewną wadę - są dość mocno odseparowane od naturalnego w Sieci języka opisu strony - HTML-a (Hypertext Markup Language). Każda z nich tworzy nowy świat kreacji, gdzie wszystkie prawa i zasady są zgodne z lokalnym standardem. By wykorzystać te nowe technologie, nie tylko trzeba posiąść nową wiedze i umiejętności, potrzebne są też dedykowane edytory przystosowane do budowy serwisów w danej technologii. Efekty tych wysiłków, choć nierzadko robią porażające wrażenie na buszujących w pajęczynie, jednak nie najlepiej integrują się z HTML-em - a takie rozwiązanie nie jest zbyt przyjazne projektantom serwisów. Wszelkie modyfikacje wymagają zmian w plikach zewnętrznych, nierzadko niezbędna jest także praca nad plikami źródłowymi. Czy nie prościej byłoby po prostu wyposażyć HTML w nowe możliwości?

DHTML

Nowe standardy sieciowe wchodzą w życie wraz z pojawieniem się nowych przeglądarek WWW. Netscape Comunicator i Microsoft Internet Explorer w wersjach 4.0 wspierają nową technologię - DHTML. Dziś jest to już chleb powszedni standardów internetowych (np. Microsoft przy rejestracji nowych kanałów informacyjnych wymaga, by korzystały one z DHTML-a).

DHTML, czyli Dynamic Hypertext Markup Language, to rozszerzenie języka HTML o nowe możliwości - dokładne określenie położenia obiektów (pozycjonowanie) i wynikającą z tego możliwość animacji, użycie dowolnych, ładowanych z Sieci czcionek, pełną interakcję, zmiany "w locie" zawartości strony i stylów oraz tzw. filtry i przenikania. Wszystkie te funkcje są całkowicie zintegrowane z HTML-em.

DHTML nie powinien być rozumiany jako nowa, odrębna technologia. W rzeczywistości to zespół (nawet nie do końca ze sobą powiązanych) rozszerzeń, dodających pewne nowe właściwości poszczególnym elementom strony.

Na poziomie technologii

Technologicznie DHTML sprowadza się do rozszerzenia listy właściwości i metod obiektów reprezentujących wszystkie elementy strony. Z "obiektowego" widzenia strony internetowej korzystają zagnieżdżone w HTML-u języki skryptowe - JavaScript i VBScript. To właśnie za ich pomocą można dokonywać i kontrolować większość "DHTML-owych efektów".

I tak np. zamiast wyświetlać kolejne liczby w polu tekstowym (za pomocą podobnego kodu), pole tekstowe można... przesuwać po ekranie.

Oczywiście, wszelkie zmiany wyglądu strony można powiązać z interakcją użytkownika. DHTML to rozwiązanie niezbyt "rewolucyjne" w zakresie zastosowanej technologii, przynosi jednak efekty, o których np. użytkownik Shockwave'a mógł tylko pomarzyć (np. morphing między dwiema bitmapami).

Możliwości DHTML-a dostępne są także bez wykorzystania języka skryptowego, wybranym elementom można nadawać odpowiednie właściwości poprzez korzystanie z tzw. stylów CSS.

Pozycjonowanie i dynamiczne style

Każdemu elementowi strony należy najpierw przyznać parametry pozycyjne: współrzędne początku (położenie), szerokość, wysokość oraz atrybut (nie)widzialności. Wartości współrzędnych mogą być podane jako absolutne (wyrażone względem lewego górnego rogu okna) lub względne. Ponadto obiektowi można przyporządkować współrzędną "z" - ona to decyduje, czy dany obiekt będzie znajdował się nad, czy pod innym.

Opcje te umożliwiają konstruowanie stron WWW z elementów, które będą umieszczone dokładnie w tym miejscu, gdzie zamierza twórca, a nie tam gdzie domyślnie umieści je przeglądarka.

Dowolną animacje można zrealizować za pomocą zmiany położenia obiektu w czasie (korzystając z języka skryptowego) - elementy mogą wysuwać się z boków okien, krążyć po stronie, a nawet pojawiać się i znikać. Także wszystkie parametry stylu, czyli kolor, wielkość, krój i rodzaj czcionek, rodzaj tła, obramowania, mogą być dowolnie zmieniane.

Dynamiczna zawartość strony

Technika dynamicznej zawartości strony umożliwi rozwiązanie problemu (frapującego jeszcze niektórych internautów) standardu kodowania polskich liter - strona WWW (zgodnie z życzeniem użytkownika) sama dokona zmiany standardu "w locie".

Najbardziej niezwykła, a co ciekawsze, dostępna wyłącznie w DHTML-u, jest technika tzw. dynamicznej zawartości strony. Korzystając z języka skryptowego, można dowolnie modyfikować treść wyświetlanego tekstu i znaczników (wraz z parametrami) używanych w kodzie danej strony WWW.

DHTML pozwala np. na konwersję wszystkich małych liter na wersaliki, zamianę znaczników <b> (pogrubienie) na <i> (pochylenie). Dzięki tej nowej, dynamicznej technologii, projektant internetowego serwisu może nawet, w pewnym stopniu, zrealizować marzenie o własnych kodach sterujących - interpretuje je (np. rozwijać na ciągi zwykłych znaczników) kod napisany w JavaScript.

Technika dynamicznej zawartości strony umożliwi rozwiązanie problemu (frapującego jeszcze niektórych internautów) standardu kodowania polskich liter - strona (zgodnie z życzeniem użytkownika) sama przeprowadzi "w locie" zmianę standardu.

Filtry i przenikanie

lista dostępnych filtrów:Alpha (zmiana przezroczystości)

Blur (sprawia wrażenie szybkiego ruchu)

Chroma (wprowadza przezroczystość w danym kolorze)

Drop Shadow (rzucanie pojedynczego cienia)

FlipH/FlipV (obroty w pionie i poziomie, efekt lustra)

Glow (dodaje rodzaj poświaty dookoło obiektu)

Grayscale (zanik kolorów)

Invert (negatyw)

Light (imitacja podświetlenia obiektu)

Mask (tworzy przezroczystą maskę z obiektu)

Shadow (dodaje cień ciągły)

Wave (falowanie - przekształca współrzędne na podstawie funkcji sinus)

XRay (pokazuje tylko brzegi obiektu)

Aby zmienić wygląd obiektów graficznych i tekstu na ekranie, wystarczy poddać je różnorodnym przekształceniom lub posłużyć się specjalnymi filtrami (patrz ramka).

Przy korzystaniu z filtrów należy określić interesujący projektanta serwisu typ zmian oraz inne parametry. Wprowadzenie zmian we wskaźnikach definiujących upływ czasu i parametrach określających filtr (za pomocą JavaScript lub VBScript) pozwala uzyskać ciekawy efekt, np. animowane filtry.

W czasie gry zwykły filtr pozwala na statyczne "zafalowanie" grafiki (lub tekstu), natomiast filtr animowany spowoduje płynne falowanie elementu. Działanie filtra można uzależnić także od położenia kursora myszy (efektem może być np. oświetlenie obiektu graficznego stożkiem światła z miejsca, w którym znajduje się wskaźnik myszy).

Przenikanie to rodzaj metamorfozy, która zachodzi między dwoma stanami obiektu (np. różnymi kolorami tła, lub stanami - widzialność/niewidzialność). Przeglądarka WWW w określonym czasie automatycznie "przekształca" stan obiektu: poprzez tzw. blending lub reveal (pojawianie się zmian pasek po pasku, przypadkowo lub w sposób skomplikowany).

Dostępne jest także wykorzystanie efektu przenikania dla całej strony (przy jej załadowaniu lub wyjściu).

Czcionki użytkownika

Dotychczas standardowo autor stron HTML był ograniczony do posługiwania się jedynie dwoma typami czcionek (Times i Courier). Wprowadzenie rozszerzenia pozwoliło na użycie dowolnych jej typów, zainstalowanych na komputerze użytkownika. Twórca witryny nie mógł jednak zakładać, iż internauta, oglądający jego dzieło, będzie miał zainstalowane niestandardowe czcionki. Dlatego też DHTML wyposażono w specjalne mechanizmy, które umożliwiają używanie czcionek ładowanych z Sieci na stronach WWW.

Internetowe czcionki można tworzyć z plików TrueType za pomocą specjalnego konwertera (choć niektóre pliki TrueType mogą być zabezpieczone przed takimi działaniami).

Dedykowane edytory DHTML-a

Kod DHTML (jak i HTML) można pisać "ręcznie" w edytorze tekstów (na tym polu króluje Notepad). Dla początkującego użytkownika wygodniejsze będzie jednak korzystanie z dedykowanego edytora.

Microsoft FrontPage 98 dysponuje pewnym niewielkim wsparciem tej nowej technologii: umożliwia proste animowanie elementów (sposób ich pojawienia się po załadowaniu), obsługuje też przekształcenia całych stron.

Do miana wizualnego edytora HTML z wbudowanym DHTML-em jedynym pretendentem wydaje się być Macromedia Dreamweaver. Oprócz obsługi pozycjonowania, oferuje rozwiązanie nowatorskie w świecie edytorów HTML-a - tzw. timeline. To technologia opisu animacji (oparta na koncepcji następujących po sobie scen), stosowana już w programach do tworzenia multimedialnych prezentacji - Macromedia Director i Flash (patrz artykuł o Shockwave'ie). Timeline pozwala na wygodne zaplanowanie ruchu, w jaki pragniemy wprawić obiekty. W tym celu wystarczy na osi czasu umieścić obiekty znajdujące się w żądanych przez autora stanach lub "wyzwalacze" akcji DHTML.

W Dreamweaverze wprowadzono również rozbudowaną obsługę tzw. behaviors (właściwości) - z akcjami (np. najazd kursora myszki nad obiekt) można kojarzyć wybrane DHTML-owe operacje (a także skoki na konkretną scenę timeline'u).

Macromedia Dreamweaver (bezpłatna wersja próbna dostępna w Sieci) to DHTML nie tylko "o ludzkiej", ale także multimedialnej twarzy.

http://www.macromedia.com - Dreamweave

http://www.dhtmlzone.com - Macromedia DHTML zone

http://www.microsoft.com/workshop/author/dhtml- dokumentacja DHTML


Zobacz również