Skorzystajmy z naszej krótkiej prezentacji elementów, z których tworzone są strony DHTML, od HTML-a, po dodanie interaktywności za pomocą JavaScriptu…
DHTML to kombinacja odpowiedniego kodu HTML dla treści, kaskadowych arkuszy stylów (CSS) dla projektu i JavaScriptu dla interaktywności. Połączenie tych technologii może zaowocować skromną potrawą lub wykwintnym bufetem.
Punkty startowe HTML
Strony są napisane w HTML-u. Po to, by z powodzeniem rozszerzyć HTML do DHTML-a, HTML musi spełniać dwa warunki. To poprawność i składnia. Mogą one wymusić konieczność zarzucenia wcześniejszych nawyków w tworzeniu kodu HTML. Mogą także wymagać odmiennego podejścia.
Specyficzny zestaw zasad, określony w rekomendacji HTML, narzuca to, jak HTML powinien być napisany. O HTML-u zgodnym z tymi zasadami mówi się, że jest poprawny. Nasz HTML także musi być ważny, gdyż tylko jako taki może zostać użyty do utworzenia rozszerzenia w postaci DHTML. Ponieważ zestaw zasad jest dosyć złożony, o tym, że HTML jest poprawny możemy dowiedzieć się postępując zgodnie z poniższymi radami.
Właściwie osadzone znaczniki
Nie pozwólmy by znaczniki mieszały się ze sobą. Przykładowo, nie twórzmy kodu, jak w poniższym przykładzie:
Here is some bold and italictext
Znaczniki {html}{/html} oraz {html}{/html} wymieszały się, są one nieprawidłowo osadzone. Osadzanie jest niezwykle istotne we właściwym korzystaniu z DHTML-a. Jeśli wymieszamy znaczniki, każda przeglądarka będzie interpretować kod w odmienny sposób, zgodnie z różnymi zasadami, a nie ze standardami. Przekonanie, że jesteśmy w stanie kontrolować wygląd i funkcjonalność utworzonych przez nas stron w przeglądarkach okaże się złudne, o ile nie wykonamy tego poprawnie.
Zamknięte kontenery ze znacznikami
Znaczniki takie jak {html}{/html} lub {html}
{/html}, zawierające inne elementy, zawsze powinny zostać zamknięte za pomocą właściwych znaczników zamykających {html}{/html} lub {html}
{/html}. Ważna jest też wiedza o tym, jaki rodzaj treści przechowuje dany znacznik (np. tekst lub inne znaczniki) oraz upewnienie się, że je zamknęliśmy. Przykładowo, {html}
{/html} nie oznacza \”umieśćmy tutaj akapit\”, ale \”akapit zaczyna się tutaj\” i znacznik ten powinien zostać zestawiony ze znacznikiem {html}
{/html}.
Osoby, które wiedzą jak postępować z kontenerami ze znacznikami będą świadome tego, że HTML 4.01 aktualnie nie wymaga, żeby zamykać wszystkie znaczniki, choć XHTML tego wymaga. Jednak zamknięcie kontenera ze znacznikiem nigdy nie jest błędem, choć błędem jest, gdy czasem tego nie zrobimy. O wiele prościej jest więc zamykać wszystko, niż pamiętać, które znaczniki można zostawić otwarte. Takie samo rozumowanie dotyczy znaczników {html}
Zawsze używajmy typu dokumentu
Rodzaj dokumentu (lub DOCTYPE) opisuje zastosowany dialekt HTML-a, mamy tutaj kilka różnych opcji. W naszym przykładzie użyliśmy dialektu nazywanego HTML 4.01 Strict. Nasz DOCTYPE powinien wyglądać jak poniżej:
Ta informacja może być zapisana w pojedynczej linii lub w przerwie między liniami po EN\”. Upewnijmy się, że umieszczamy go u góry każdej strony. Artykuł \”Fix your site with the right DOCTYPE!\”, opublikowany na stronie http://www.alistapart.com wymienia wszystkie rodzaje DOCTYPE, które możemy zastosować.
Najważniejszym etapem tworzenia strony jest sprawdzanie poprawności HTML-a. Istnieje wiele narzędzi, które można pobrać i uruchomić w celu przetestowania poprawności kodu. Niektóre edytory HTML mają nawet wbudowane tego rodzaju narzędzia. Można też użyć jednego z wielu walidatorów online, z których najbardziej popularnym jest walidator W3C, dostępny na stronie http://validator.w3.org. Walidator podpowie, co należy poprawić w HTML-u, by był zgodny z technikami DHTML-a. Ostateczną referencją poprawności kodu HTML jest rekomendacja HTML: http://www.w3.org/TR/html4. Jest złożona i szczegółowa, znajdziemy tu także odpowiedzi na różne pytania.
Jak wspomniano wyżej, przeglądarki opierają się na standardach, które opisują, jak poprawny kod HTML powinien być interpretowany. Jednak nie opracowano standardów opisujących, jak interpretować błędny kod HTML. Producenci różnych przeglądarek opracowali własne reguły radzenia sobie z problemem. Poprawność HTML-a oznacza, że jakiekolwiek problemy, które napotkamy uważane są za błędy przeglądarki – błędy, które jesteśmy w stanie obejść.
W stronę składniowego HTML-a
Na dodatek do poprawności, HTML powinien być semantyczny, nie prezentacyjny. To oznacza, że powinniśmy używać znaczników HTML-a do opisu charakteru elementu w dokumencie, nie zaś opisu wyglądu tego elementu. Nie używajmy więc znacznika {html}
{/html}, jeśli mamy na myśli \”wstaw tu pustą linię\”. Użyjmy go w znaczeniu \”tutaj zaczyna się akapit\” (i wstawmy {html}
{/html} na końcu akapitu). Nie używajmy {html}
{/html} w znaczeniu \”wytnij najbliższy fragment tekstu\”, ale po to, by uzyskać stan \”ten blok jest cytatem\”. Jeśli oznaczymy nasz HTML w ten sposób, o wiele prościej będzie zastosować DHTML.
Takie podejście jest nazywane oznaczaniem semantycznym – pomysłowym określeniem \”zastosowania znaczników do opisu znaczenia\”.Przyjrzyjmy się kilku przykładom. W pierwszym wyobraźmy sobie, że na naszej stronie WWW znajduje się lista odnośników do różnych części działów strony. Taka lista powinna być oznaczona na podstawie tego, czym jest: listą. Nie twórzmy zestawu znaczników {html}{/html} oddzielonych przez znaczniki {html}
{/html}; to jest lista, więc tak właśnie powinna zostać oznaczona, z wykorzystaniem znaczników {html}{/html} oraz {html}
- {/html}. Może to wyglądać następująco:
Często korzystamy ze znacznika {html}
{/html}. Wiele pozycji na stronie to listy: struktura menu jest listą odnośników, galeria fotografii to lista zdjęć. Jeśli nasza lista zawiera pozycje, z którymi powiązane są komentarze, powinna być oznaczona jako lista definicji:
- Home
- Back to the home page
- About this Website
- Why this site exists, how it was set up and who did it
- Contact details
- Getting in contact with the Webmaster: email addresses and phone numbers
Pamiętajmy: to jak wygląda strona, w rzeczywistości nie jest istotne. Najważniejsze jest to, że informacja na stronie jest oznaczona w sposób, który opisuje stan faktyczny. W HTML-u jest mnóstwo znaczników, nie traktujmy ich jako środka do rozmieszczania informacji na stronie, ale jako środek do zdefiniowania znaczenia informacji. Jeśli nie wykorzystujemy HTML-a do kontroli prezentacji strony, w jaki sposób możemy sprawić, by wyglądały tak jak oczekujemy? Tutaj do akcji wchodzą kaskadowe arkusze stylów, czyli CSS.
Dodawanie CSS
Kaskadowe arkusze stylów (CSS) to technika umożliwiająca opisywanie przedstawiania naszego HTML-a. W gruncie rzeczy umożliwia nam określanie jak ma wyglądać na stronie każdy element. Element to kod HTML, który reprezentuje jedną pozycję: akapit, nagłówek, obraz, listę. Zazwyczaj element odpowiada konkretnemu znacznikowi i jego zawartości. Gdy użyjemy stylów CSS, strony DHTML mogą oddzielnie zajmować się wyglądem i zawartością strony. Wyobraźmy sobie, że chcemy, by nagłówek głównej strony (znacznik {html}
{/html}) był wyświetlany w postaci dużego, wycentrowanego tekstu w kolorze czerwonym. Powinniśmy określić to w naszym arkuszu stylów, jak poniżej:
h1 { font-size: 300%; color: #FF0000; text-align: center; }Zajrzyjmy do ramki pt. \”Więcej informacji\” w celu znalezienia odnośników wiodących do plików uczących CSS-ów. Powinny okazać się przydatne, jeśli powyższe linijki kodu nie mają dla nas sensu.
Najważniejsze jest usunięcie aspektów prezentacyjnych z naszego HTML-a i umieszczenie ich w arkuszach stylu. Jeśli, przykładowo, powiększamy nagłówek strony poprzez umieszczenie znaczników {html}{/html} w HTML-u, wówczas konieczne jest umieszczenie tych znaczników na każdej stronie, na której używamy tego nagłówka. Poprzez przeniesienie aspektów dotyczących wyglądu do CSS-ów kontrolujemy wygląd nagłówków w całym serwisie za pomocą jednego arkusza stylów.Oczywiście, nie jest to aż tak proste. Choć pełna definicja CSS-a umożliwia robienie naprawdę ciekawych rzeczy, to jeśli chodzi o pełną kontrolę prezentowania strony, nie każda przeglądarka wspiera wszystko, co CSS ma do zaoferowania.
Aby poznać różnice między przeglądarkami wspierającymi CSS-y, musimy znać możliwości samych CSS-ów. Mamy do czynienia z dwoma rodzajami niekompatybilności: elementy, których dana przeglądarka nie obsługuje i elementy, które obsługuje niewłaściwie.
Z elementami, które nie są obsługiwane, sprawa jest prosta: nie polegajmy na tych zasadach jeśli chcemy, by nasze CSS działały w przeglądarce, które oblały test z obsługi. To może okazać się bolesne, zwłaszcza, że najczęściej używana przeglądarka na świecie – Internet Explorer dla Windows ma poważne luki we wspieraniu CSS-ów. Takie rozwiązanie często jest koniecznym kompromisem.Źle zaimplementowane standardy są większym problemem. W takich przypadkach, przeglądarka źle je rozumie. Konieczna jest dokładna analiza, co każda przeglądarka robi źle i jak można ominąć te trudności. Naprawa błędów CSS w różnych przeglądarkach zazwyczaj jest realizowana za pośrednictwem włamań do CSS-ów. Korzysta się przy tym z błędów w parserze CSS przeglądarki po to, by wprowadzić dyrektywę arkusza stylu, która rozwiąże problem słabej implementacji standardów. W sieci można znaleźć wiele udokumentowanych włamań CSS dla każdej przeglądarki.
Nauka prowadząca do zrozumienia i adaptacji kaprysów wspierania CSS-ów przez różne przeglądarki jest częścią pracy, którą należy wykonać, by CSS-y działały efektywnie. To może kosztować dużo wysiłku, bowiem wiele błędów CSS pojawia się jedynie wtedy, gdy w pełni używamy tej technologii. Większość CSS-ów jest doskonale wspierania na wielu platformach i przeglądarkach bez konieczności włamań lub wykonywania kompleksowych testów.
CSS-y mają duże możliwości, jednak nie oferują prawdziwej elastyczności w prezentowaniu. Możliwości CSS-ów stale wzrastają, do specyfikacji dodawane są coraz bardziej interaktywne funkcje. Jednak nie są one dedykowane do budowania prawdziwie interaktywnych serwisów. Z tego powodu potrzebujemy ostatniego klocka budującego DHTML: JavaScriptu.
Dodawanie JavaScriptu
JavaScript to prosty język programowania o dużych możliwościach. Jest stosowany w celu dodawania dynamicznego zachowania elementów na stronach WWW. HTML definiuje strukturę strony, CSS określa jak będzie ona wyglądać, jednak działanie, czyli to co będzie się dziać, gdy zaczniemy korzystać ze strony, jest zdefiniowane w JavaScripcie. JavaScript przypisuje działanie do różnych zdarzeń (ruchu myszy, pochwycenia obiektu, kliknięcia itp.). Ramka pt. \”Więcej informacji\” zawiera odnośniki do kilku podręczników JavaScriptu, jeśli będziemy ich potrzebować.
Prosty przykład w JavaScripcie
Poniżej mamy prosty przykład JavaScriptu, który konwertuje wartość pola tekstowego na duże litery, gdy użytkownik użyje tabulatora. Po pierwsze zobaczmy stary, zły sposób wykonania tego zadania:
Zalecamy bardziej nowoczesną technikę. Najpierw HTML:
Pierwsza funkcja konwertuje tekst. Druga funkcja upewnia, że pierwsza jest powiązana z właściwym znacznikiem HTML. Końcowa linia wykonuje owo połączenie, gdy strona jest w całości załadowana. Choć wymaga to więcej kodu, zauważmy jak HTML pozostaje czysty i prosty.
Skorzystajmy z narzędzi!
Dobre środowisko JavaScriptu bardzo ułatwia pracę ze skryptami. Testowanie stron w Internet Explorerze (IE) pozostawia wrażenie, że czegoś brakuje. Jeśli nasza strona generuje błędy JavaScriptu, IE nie jest zbyt pomocny w diagnozowaniu gdzie wystąpiły i dlaczego. Najbardziej przydatnym, prostym narzędziem do debuggowania JavaScriptu jest JavaScript Console w Mozilli lub Firefoksie. Dzięki niej jasno zobaczymy, gdzie na stronie pojawiły się błędy JavaScriptu i co to są za błędy. Firefoks działa na wszystkich platformach i nie jest zbyt wielkim plikiem do pobrania.
Ma też lepsze wsparcie dla CSS niż IE i powinien stać się jednym z naszych narzędzi programistycznych. Prócz niego, jest także debugger JavaScriptu w Mozilli, który nosi nazwę Venkman. Może być przydatny, ale bądźmy świadomi, że wymaga pracy przy konfiguracji. W praktyce, gdy rozbudowujemy stronę o DHTML, nie potrzebujemy niczego tak złożonego, jak debugger. JavaScript Console i rozsądne korzystanie z alarmów do śledzenia tego, co dzieje się z kodem okaże się wystarczające w prawie każdej sytuacji.
Kolejnym przydatnym narzędziem jest dobry edytor kodu, w którym tworzymy naszą stronę. Wyróżnienia składni JavaScriptu są naprawdę pomocne, sprawiają, że kod łatwiej się czyta w czasie gdy powstaje, i szybko powiadamiają, gdy zdarzy się nam pominąć nawias lub cudzysłów. Dobry edytor znacząco przyspieszy wprowadzanie kodu strony. Wiele potężnych edytorów jest bezpłatnych. Jednak jeśli wprowadzamy kod w systemowym Notatniku, rozejrzyjmy się, czy jest jakiś inny produkt, który oferuje środowisko bardziej odpowiednie dla naszych potrzeb. Textpad i Crimson Editor są windowsowymi edytorami, które wyposażono w podstawowe funkcje, użytkownicy Linuksa mają gedit, Kate lub vima, a zawsze pod ręką jest Emacs.
JavaScript jest silnikiem, na którym działa DHTML. Ogranicza się on do manipulowania HTML-em i CSS-ami, by strona zachowywała się w taki sposób, w jaki sobie życzymy, a JavaScript jest narzędziem, które dokonuje tych manipulacji.
