E nter.net  


Dynamiczna sieµ
Piotr Senator


I nternet prze┐ywa niezwyk│y rozw≤j od czasu pojawienia siΩ graficznego ╢rodowiska WWW. Z ka┐dym dniem przybywa stron, kt≤re s▒ ciekawsze, lepiej opracowane, korzystaj▒ce z najnowszych technologii. Nieustanne zmiany wymagaj▒ nowych standard≤w. Jeszcze kilka lat temu prze│omem by│o dodanie do HTML-a etykiety <center> umo┐liwiaj▒cej centrowanie tekstu. Dzisiaj z ka┐d▒ kolejn▒ wersj▒ popularnych przegl▒darek pojawiaj▒ siΩ skomplikowane technologie, nowe jΩzyki programowania, dziesi▒tki nowych etykiet...
WiΩkszo╢µ u┐ytkownik≤w nie jest zainteresowana ╢ledzeniem burzliwych zmian na internetowej arenie, ale osoby, kt≤rych zainteresowanie informatyk▒ wykracza ponad przeciΩtn▒, s▒ zmuszone do b│▒dzenia w╢r≤d setek nowych akronim≤w. Na pocz▒tku wszystkie strony by│y pisane w "czystym" HTML - jΩzyku do╢µ │atwym do opanowania i szybko daj▒cym efektowne rezultaty. Dzi╢ na stronach WWW znajdujemy elementy ActiveX, aplety Javy, SHTML, XML czy wreszcie DHTML.
Zmiany, jakie dokona│y siΩ ostatnio na stronach WWW, nie s▒ zbyt imponuj▒ce - wiΩcej obrazk≤w, animowane gify, ramki, mozolne pozycjonowanie tekstu za pomoc▒ tabel... Strony WWW nadal s▒ bardzo statyczne, a ca│a interakcja odbywa siΩ g│≤wnie przez skrypty CGI, kt≤re maj▒ wiele minus≤w. Wymagaj▒ bowiem du┐o wiΩkszej wiedzy ni┐ pisanie stron w HTML-u i s▒ ograniczone mo┐liwo╢ciami serwera. Pr≤by umo┐liwienia przetwarzania czΩ╢ci informacji bezpo╢rednio przez przegl▒darkΩ przed wys│aniem do serwera pojawi│y siΩ w postaci jΩzyk≤w skryptowych - VB Script popieranego przez Microsoft i JavaScript popieranego przez Netscape.

Kto nie maszeruje, ten ginie


Wojna, bo tylko tak to mo┐na nazwaµ, pomiΩdzy dwoma gigantami, Microsoftem i Netscapem, sta│a siΩ nieco mΩcz▒ca dla u┐ytkownik≤w (co kilka tygodni nowe kilku- lub kilkunastomegowe pliki do ╢ci▒gniΩcia), ale przyczyni│a siΩ do gwa│townego rozwoju wielu interesuj▒cych technologii. Obie wersje przegl▒darek (Navigator i Internet Explorer) w wersji 4.0 zaprezentowa│y niezale┐nie od siebie dynamiczny HTML (Dynamic HTML, DHTML, ewentualnie dHTML). Oczywi╢cie obie implementacje nie s▒ ze sob▒ zgodne. Mimo ┐e osobi╢cie popiera│em zawsze propozycje firmy Netscape, tym razem por≤wnuj▒c obiektywnie techniczne mo┐liwo╢ci obu przegl▒darek po raz pierwszy muszΩ przyznaµ prymat Microsoftowi. Implementacja DHTML w wykonaniu Microsoftu jest pe│niejsza, a tak┐e zgodna z zaleceniami WWW Consortium. (Navigator 4.0 realizuje DHTML w do╢µ ograniczony spos≤b, korzysta te┐ z nowej niezgodnej z ┐adnym standardem etykiety <LAYER> pozwalaj▒cej wyodrΩbniµ fragment strony WWW, kt≤rym potem mo┐emy manipulowaµ). Netscape co prawda szykuje ju┐ odpowied╝ w postaci wersji 5.0 Navigatora, ale Microsoft te┐ nie zasypia gruszek w popiele. Tymczasem Internet Explorer z pewno╢ci▒ zwiΩkszy sw≤j udzia│ na rynku przegl▒darek.

Czym jest DHTML?


DHTML to zbi≤r nowych technologii, kt≤re pozwalaj▒ u┐ytkownikowi korzystaµ bardziej interaktywnie z zasob≤w WWW. DHTML umo┐liwia tworzenie stron, kt≤re reaguj▒ na akcje ze strony u┐ytkownika (naci╢niΩcie klawisza, klikniΩcie myszk▒) - mog▒ zmieniaµ wygl▒d w czasie │adowania strony i po jej za│adowaniu (zmiana koloru czcionki, wielko╢µ obrazka, kolejno╢µ akapit≤w), umo┐liwiaj▒c jednocze╢nie dynamiczne reakcje innych element≤w strony na te zmiany (czyli, na przyk│ad, zmiana rozmiar≤w obrazka powoduje rozsuniΩcie tekstu). Istot▒ DHTML jest udostΩpnienie prostym obiektowym jΩzykom skryptowym wszystkich element≤w strony WWW, kt≤re dziΩki temu mog▒ byµ zmieniane bez potrzeby odwo│a± do serwera.
Style
Style
Style
Style umo┐liwiaj▒ pozycjonowanie na stronie element≤w w trzech wymiarach. Opr≤cz po│o┐enia w p│aszczy╝nie mo┐emy okre╢liµ tak┐e warstwΩ (czyli, czy nowy element bΩdzie nad, czy pod innymi). Rysunki przedstawiaj▒ fragment strony WWW z rybk▒ p│ywaj▒c▒ pomiΩdzy kolorowymi s│upkami. Efekt przemieszczania siΩ uzyskano dziΩki kr≤tkiemu skryptowi w JavaScript.
DHTML nie zosta│ stworzony po to, aby wyprzeµ istniej▒ce technologie, w szczeg≤lno╢ci nie jest to odpowied╝ Microsoftu na popularno╢µ Javy. Nale┐y podkre╢liµ, ┐e dynamiczny HTML nie jest rozszerzeniem HTML, jest raczej rozszerzeniem jego mo┐liwo╢ci. Nie jest on tak┐e zwi▒zany z okre╢lonym jΩzykiem - przy tworzeniu stron w tej technologii mo┐emy korzystaµ zar≤wno z JavyScript, jak i skryptowej wersji Visual Basica. Mo┐liwa jest te┐ integracja DHTML z apletami Javy czy obiektami ActiveX. Jako czΩ╢ci sk│adowe DHTML mo┐na wyodrΩbniµ HTML wraz ze stylami (CSS), DOM (Dynamic Object Model) i jΩzyki skryptowe. DOM to prawdziwe serce technologii DHTML. Umo┐liwia on traktowanie wszystkich element≤w strony WWW jako obiekt≤w, kt≤re wraz ze swoimi w│a╢ciwo╢ciami mog▒ byµ udostΩpniane jΩzykom skryptowym. PomiΩdzy tymi obiektowymi elementami istniej▒ hierarchiczne powi▒zania. Takim elementem mo┐e byµ np. etykieta jΩzyka HTML, otwarte okno, adres strony, data i czas czy wersja u┐ywanej przegl▒darki. Ka┐demu obiektowi przyporz▒dkowane s▒ zdarzenia (np. odpowiadaj▒ce naci╢niΩciu klawisza, klikniΩciu myszk▒ czy przesuniΩciu myszki). Osoby, kt≤re pr≤bowa│y swoich si│ choµby w JavaScript, stwierdz▒, ┐e to ┐adna nowo╢µ. Owszem, DOM istnia│ ju┐ wcze╢niej, ale w bardzo ograniczonym zakresie i by│ ╢ci╢le zwi▒zany z konkretnym jΩzykiem skryptowym. Obecnie DOM obejmuje wszystkie elementy HTML i pozwala na ich zmianΩ. (Oczywi╢cie nie mamy mo┐liwo╢ci zmiany na przyk│ad obiektu "aktualny czas", ale mo┐emy go wykorzystaµ do zmiany innych element≤w na stronie - tworz▒c np. zegarek albo stronΩ zmieniaj▒c▒ t│o w zale┐no╢ci od pory dnia.)
Aby ulepszyµ umiejscowienie element≤w na stronie i ich wygl▒d, DHTML proponuje wykorzystanie styl≤w CSS i pozycjonowanie. Style umo┐liwiaj▒ przyporz▒dkowanie okre╢lonych informacji stylistycznych ca│ej strukturze dokumentu, sprawiaj▒c, ┐e strony HTML s▒ bardziej przejrzyste i pozwalaj▒ autorom stron na dokonywanie szybszych zmian w wygl▒dzie dokumentu. Ze stylami zwi▒zane jest pozycjonowanie - nareszcie mo┐na dok│adnie okre╢liµ w spos≤b bezwzglΩdny (w pikselach) lub wzglΩdny (lewo, prawo), gdzie ma siΩ znajdowaµ dany element strony, bez uciekania siΩ do pomocy tabel (jak to czΩsto ma miejsce obecnie). Style pojawi│y siΩ ju┐ w wersji 3.0 IE, a s▒ w pe│ni interpretowane przez wersje 4.0 obu przegl▒darek. DziΩki technologii DOM wszystkie atrybuty CSS mog▒ byµ zmieniane za pomoc▒ skrypt≤w (mo┐emy stworzyµ stronΩ, gdzie u┐ytkownik ma mo┐liwo╢µ przeci▒gniΩcia myszk▒ obrazk≤w albo atrakcyjne menu, kt≤re umo┐liwia pod╢wietlanie aktualnie wybranej pozycji).
Faktyczn▒ dynamikΩ strony DHTML uzyskujemy dziΩki skryptom, im te┐ zawdziΩczamy szybko╢µ, bowiem skrypty interpretowane s▒ przez przegl▒darkΩ, a nie przez serwer. Pisanie skrypt≤w nie jest bardzo skomplikowane, a do ich uruchamiania wystarczy obs│uguj▒ca je przegl▒darka. Osoby, kt≤re ju┐ tworzy│y skrypty na stronach WWW, s▒ w stanie opanowaµ DHTML bardzo szybko, a dziΩki DOM i CSS bΩd▒ w stanie tworzyµ rzeczy tak dynamiczne jak gry.
Microsoft proponuje wyodrΩbnienie skrypt≤w na oddzielnych stronach (tzw. scriptlets), dziΩki czemu u┐ytkownicy nie maj▒cy do╢wiadczenia w programowaniu mog▒ korzystaµ z gotowych modeli, aby uatrakcyjniµ w│asne strony.

Podsumujmy ca│o╢µ


Microsoft
Microsoft na stronach www.microsoft.com/ie/ie40/demos/asteroids.htm prezentuje klasyczne Asteroids - warto zobaczyµ
To co zmieniamy na stronach WWW, to HTML razem ze stylami. To dziΩki czemu zmieniamy, to DOM. To czym zmieniamy, to jΩzyki skryptowe. A wszystko razem to w│a╢nie dynamiczny HTML.
Microsoft proponuje te┐ kilka ulepsze± maj▒cych usprawniµ wykorzystanie stron WWW jako interfejsu do danych spoza stron HTML. Aby u│atwiµ integracjΩ HTML z zewnΩtrznymi ╝r≤d│ami informacji DHTML pozwala najbardziej zaawansowanym u┐ytkownikom osadzanie obiekt≤w na stronie (takich jak obiekty HTML, XML, JDBC, RDS - Remote Data Service), umo┐liwiaj▒c miΩdzy innymi │atwiejsze korzystanie z baz danych. Przy okazji Microsoft zaproponowa│ kilka nowych etykiet <DATA...>. Ta technologia nie jest jeszcze objΩta procesem standaryzacji, dlatego na razie nale┐y traktowaµ j▒ raczej eksperymentalnie.
Dynamiczny HTML ma bez w▒tpienia wiele zalet. Pozwala tworzyµ bardziej funkcjonalne strony WWW, umo┐liwiaj▒c tw≤rcom stron lepsz▒ kontrolΩ nad ostatecznym wygl▒dem strony. Pozwala na szybkie i │atwe tworzenie interaktywnych formularzy bez potrzeby pisania skrypt≤w CGI czy aplet≤w Javy. W przeciwie±stwie do wielu innych nowych technologii pozwala na szybsze korzystanie z zasob≤w sieci redukuj▒c liczbΩ odwo│a± do serwera i jednocze╢nie zmniejszaj▒c rozmiar stron (efekty zrealizowane za pomoc▒ technik DHTML zajmuj▒ du┐o mniej miejsca ni┐ identyczne realizacje za pomoc▒ Javy).
Nie wymaga te┐ ┐adnych specjalnych "wtyczek" jak na przyk│ad popularny produkt firmy Macromedia - Shockwave. Czy warto zatem tworzyµ strony w DHTML-u? S▒dzΩ, ┐e tak. Przemawia za tym wiele powod≤w. Po pierwsze, DHTML jest zgodny z wytyczonymi przez WWW Consortium standardami (HTML 4 Working Draft, CSS1 Recommendation, CSS Positioning Working Draft, Document Object Model Preliminary Requirements - wszystkie dokumenty dostΩpne na serwerze WWW Consortium www.w3.org/DOM/). Oznacza to, ┐e nied│ugo implementacja dynamicznego HTML przez Microsoft stanie siΩ standardem i wiΩkszo╢µ przysz│ych przegl▒darek bΩdzie poprawnie interpretowa│a strony napisane w DHTML (kt≤ry firma Microsoft ma zamiar udostΩpniaµ za darmo zainteresowanym firmom). Dynamiczny HTML jest te┐ poprawnie interpretowany na wielu platformach systemowych i, co najwa┐niejsze, zosta│ stworzony w taki spos≤b, aby strona napisana z wykorzystaniem tej nowej technologii mog│a byµ r≤wnie┐ widoczna w starszych wersjach przegl▒darek.
DHTML nie zosta│ stworzony po to, aby wyprzeµ istniej▒ce technologie, w szczeg≤lno╢ci nie jest to odpowied╝ Microsoftu na popularno╢µ Javy.

Informacje o DHTML


Osoby, kt≤re chcia│yby korzystaµ z DHTML, powinny siΩ wyposa┐yµ w najnowsz▒ przegl▒darkΩ, a nastΩpnie zapoznaµ z pe│n▒ dokumentacj▒ Microsoftu: www.microsoft.com/workshop/author/dhtml/dhtmlqa-f.htm

Zagorzali zwolennicy Navigatora znajd▒ informacjΩ o DHTML pod adresem: developer.netscape.com/library/documentation/communicator/dynhtml/

Polecam te┐ zajrzeµ na strony:
www.dhtmlzone.com/
www.htmlguru.com/
www.insideDHTML.com/

(c) Copyright LUPUS