R-24-07, Programowanie, ! HTML, HTML 4

Rozdział 24.
Projektowanie witryn do praktycznych zastosowań

Czytając poprzednie rozdziały, poznałeś kilka wskazówek dotyczących tego, co powinieneś, a czego nie powinieneś robić, planując witrynę oraz projektując strony WWW. Poznałeś także czynniki, które mogą sprawić, że witryna będzie dobra (lub zła). Jest jednak jeszcze jeden czynnik, na jaki powinieneś zwrócić uwagę, jest nim sposób projektowania witryn przeznaczonych do „praktycznych zastosowań”.

Dowiedziałeś się już, że w praktyce z WWW korzysta wielu różnych użytkowników, używających wielu systemów komputerowych i przeglądarek. W stronach i witrynach projektowanych do tej pory nie uwzględniłeś jednak jeszcze jednego czynnika: różnych preferencji użytkowników odwiedzających Twoją witrynę oraz faktu, iż każdy z nich może dysponować różnym poziomem doświadczenia. Dzięki przewidzeniu potrzeb użytkowników, którzy będą odwiedzać Twą witrynę, łatwiej Ci będzie ocenić, w jaki sposób należy ją zaprojektować. W tym rozdziale przedstawię sposoby przewidywania potrzeb użytkowników oraz opiszę:

czynniki, jakie należy brać pod uwagę przy określaniu preferencji użytkowników tworzonych witryn,
jak dodawać możliwości funkcjonalne ułatwiające korzystanie z witryny początkującym użytkownikom,
różne metody ułatwiające użytkownikom poruszanie się po witrynie,
kod HTML prezentujący tę samą stronę WWW napisaną zgodnie z różnymi specyfikacjami XHTML 1.0 (Transitional, Frameset oraz Strict).

Czym są „zastosowania praktyczne”

Prawdopodobnie jesteś przyzwyczajony do przeglądania Internetu przy wykorzystaniu komputera działającego w konkretnym systemem operacyjnym, takim jak Windows 95 lub 98, Windows NT, Macintosh lub inny. Może Ci się zdawać, że pod każdym względem doskonale wiesz, w jaki sposób inne osoby odbierają strony WWW.

Miejmy nadzieję, że informacje nabyte podczas lektury tej książki pozwoliły Ci zdać sobie sprawę, iż Twój sposób postrzegania stron WWW nie zawsze odpowiada sposobowi, w jaki inne osoby oglądają te same strony. W rzeczywistym świecie istnieje tak wiele różnych komputerów działających w tak wielu systemach operacyjnych. Nawet jeśli spróbujesz zaprojektować swoje strony z myślą o najpopularniejszym systemie operacyjnym i najczęściej używanej przeglądarce, to będzie istniał jeszcze jeden czynnik, którego nie sposób przewidzieć: preferencje użytkowników. Rozważ przedstawiony poniżej przykład pewnej rodziny:

Jan jest szefem działu w firmie Fortuna 2000. Jego firma dysponuje własną siecią intranetową. Niemal wszyscy pracownicy firmy używają tego samego systemu operacyjnego oraz tej samej przeglądarki. Jan jest przyzwyczajony do postrzegania Internetu i stron WWW w pewien szczególny sposób: zazwyczaj są to strony zawierające dużo tekstu z niewielką ilością obrazków, które podkreślają znaczenie ważnych informacji, czyli proste strony WWW zawierające dużo informacji i mało efektów multimedialnych. Wszystkie dodatkowe „wodotryski” denerwują Jana, uważa, że ich pobieranie to strata czasu i dlatego wyłącza pobieranie zarówno obrazów, jak i dźwięków;
żona Jana, Zuzanna jeszcze nigdy wcześniej nie używała komputera, jednak zawsze chciała się nauczyć jego obsługi. Hobbystycznie zajmuje się genealogią i dowiedziała się, że w Internecie można znaleźć wiele informacji na ten temat. Chciałaby także opublikować na WWW historię swojej rodziny. Gdy wraz z mężem kupili pierwszy komputer do użytku domowego była bardzo podekscytowana. Jednak już wkrótce zaczęła zadawać pytania typu: „Czy można wyświetlić więcej niż jeden ekran informacji? Te literki są za małe, czy można je powiększyć?
A gdzie są obrazki? Jak można włączać i wyłączać muzykę... podobno na tej stronie jest jakaś muzyka!”. Jak widać, Zuzanna pragnie postrzegać Internet w zupełnie inny sposób, niż ten, do którego był przyzwyczajony jej mąż;
Jan i Zuzanna mają syna Tomka, ucznia szkoły średniej. Tomek jest zapalonym graczem i chce oglądać to, co jest efektowne, przede wszystkim multimedia! Włącza zatem głośniki na pełen regulator i stu procentach wykorzystuje możliwości nowego komputera. Uważa również, że „przeglądarka X” jest lepsza od „przeglądarki Y”, gdyż wszyscy jego koledzy używają jej do gier kreujących rzeczywistość wirtualną. Chciałby zaprojektować witrynę zawierającą podpowiedzi, rady i sztuczki wykorzystywane w jego ulubionych grach;
starsza siostra Tomka, Janka studiuje i chciałaby zostać komercyjną artystką. Bardzo interesuje się rzeźbiarstwem i fotografiką. Chciałaby wykorzystywać nowy komputer do tworzenia prac zadawanych przez wykładowców, a zatem będzie szukała witryn interesujących z wizualnego punktu widzenia. Janka chciałaby oglądać strony w pełnej palecie kolorów i najwyższej dostępnej rozdzielczości;
są także najstarsi członkowie rodziny, rodzice Zuzanny, którzy ostatnio przeprowadzili się do córki po wielu latach spędzonych w bardzo małym, wiejskim miasteczku. Ich doświadczenia w obsłudze komputerów są minimalne, widzieli je wyłącznie w sklepach, ale nawet nie dotykali w obawie, że coś popsują. Dla nich komputery to coś całkowicie tajemniczego i zdumiewającego. A zatem chcieliby dowiedzieć się czegoś więcej na nich temat. Rodzice podzielają zainteresowania Zuzanny genealogią. Jednak oczy ojca Zuzanny nie są już tak sprawne, jak niegdyś i dlatego musi on korzystać ze specjalnej przeglądarki, która nie tylko wyświetli tekst, lecz także go odczyta.

Wszystkie te osoby przeglądają WWW, używając tego samego komputera i systemu operacyjnego. Wszyscy członkowie rodziny, z wyjątkiem Tomka, używają także tej samej przeglądarki. Jednak ten przykład ilustruje inne sprawy, o których powinieneś pomyśleć, projektując witryny WWW, czyli różne potrzeby poszczególnych osób. Ich potrzeby można zaliczyć do różnych kategorii i zaspokoić łatwiej do pozostałych. Oto niektóre z czynników, jakie należy wziąć pod uwagę i które zostały przedstawione w powyższym przykładzie.

Uwzględnienie poziomu doświadczenia użytkownika

Poszczególni członkowie naszej fikcyjnej rodziny dysponują różnymi poziomami doświadczenia. Choć wszyscy żywo interesują się WWW, to jednak niektórzy spośród nich jeszcze nigdy nie widzieli przeglądarki. A zatem, projektując witrynę, powinieneś wziąć pod uwagę, iż osoby odwiedzające ją będą dysponowały różnym poziomem doświadczenia oraz potrzebami związanymi z przeglądaniem stron.

Czy zagadnienia przedstawiane na witrynie będą interesowały wszystkich odwiedzających, niezależnie od ich poziomu doświadczenia? Jeśli tak, to być może warto, abyś wyposażył witrynę w jakieś rozwiązania ułatwiające poruszanie się po niej? W rozdziale 23. — „Przykłady dobrych i złych stron WWW” poznałeś podpowiedzi i rady dotyczące projektowania systemów poruszania się po witrynach, które mogą zapobiec „gubieniu” się osób w cyberprzestrzeni. To dobry początek, jednak być może warto dodać do swojej witryny stronę szczegółowo opisującą zastosowany system poruszania się po witrynie.

Rysunek 24.1 przedstawia początkowy fragment strony, na której użytkownicy mogą dowiedzieć się czegoś więcej na temat witryny. Połączenia umieszczone na jej początku umożliwiają szybkie przejście do kilku pozostałych części. Zostały one zatytułowane: O witrynie, System nawigacyjny, Zalecane przeglądarki oraz Inne pliki, których możesz potrzebować. Z kolei, każda z tych części zawiera połączenia ze stronami prezentującymi bardziej szczegółowe informacje dotyczące zawartości witryny.

Rysunek 24.1.

Strona ułatwiająca użytkownikom poruszanie się po witrynie

0x01 graphic

Podaj listę stron zawierających opis witryny

Część O witrynie zawiera listę połączeń do stron, które umożliwią osobom odwiedzającym witrynę szybkie zapoznanie się z jej zawartością lub odczytanie, jakie nowe informacje zostały do niej dodane od czasu ostatniej wizyty. Rysunek 24.2 przedstawia przykład prostej listy połączeń do stron o tej tematyce. Poniżej przedstawiłam dobre przykłady stron o takiej tematyce:

Rysunek 24.2.

Połączenia ze stronami ułatwiającymi uzyskanie informacji dotyczących zawartości witryny

0x01 graphic

Strona Co nowego, która zawiera listę nowych informacji dodanych do witryny wraz z połączeniami do nich.
Strona Spis treści zawierająca listę tytułów oraz, opcjonalnie, krótki opis zawartości wszystkich stron witryny.
Strona Często zadawane pytania prezentująca pytania najczęściej zadawane przez użytkowników oraz odpowiedzi na nie.

Powyżej przedstawiłam typy stron, które są najczęściej wykorzystywane w celu ułatwienia użytkownikom zdobycia informacji o witrynie. Oczywiście, samemu możesz zastosować inne pomysły, które będą się lepiej nadawały do konkretnego przypadku Twojej witryny. W takiej sytuacji, warto podać listę stron, które będą najbardziej przydatne dla użytkowników.

Opisz system nawigacyjny

Różne witryny WWW mają różne systemy nawigacyjne, jednak w niektórych przypadkach ich zrozumienie może przysparzać trudności początkującym użytkownikom Internetu. Ogólnie rzecz biorąc, systemy nawigacyjne stosowane na witrynach WWW można zaliczyć do trzech podstawowych kategorii: prostych systemów tekstowych, systemów graficznych oraz systemów wykorzystujących układy ramek. Jeśli uważasz, że system nawigacyjny zastosowany na Twojej witrynie wymaga wyjaśnienia, to dodaj połączenia oraz strony, które ułatwią czytelnikom poznanie zasad poruszania się po niej. Rysunek 24.3 przedstawia przykład listy połączeń, umożliwiających przejście do stron, opisujących różne systemy nawigacyjne, jakie można zastosować na witrynach WWW.

Rysunek 24.3.

Opisz zastosowany system nawigacyjny

0x01 graphic

Opisując system nawigacyjny, postaraj się podawać opisy, które można łatwo zrozumieć. Załóżmy, że zastosowany tekstowy system nawigacyjny przypomina ten przedstawiony poniżej, oraz, że został umieszczony na wszystkich głównych stronach witryny:

Dla osób, które już wcześniej odwiedziły witrynę, zrozumienie tego paska nawigacyjnego nie będzie prawdopodobnie wymagało żadnych wyjaśnień. Jednak takie wyjaśnienia mogą się przydać osobom, które odwiedzają witrynę po raz pierwszy. Poniżej przedstawiłam opisy pomocne dla takich nowych użytkowników:

strona główna — „Skorzystaj z tego połączenia, aby wrócić na stronę główną witryny”;
zawartość — „Spis treści zawiera połączenia ze wszystkimi stronami witryny. Jeśli odwiedzasz tę witrynę po raz pierwszy, to będzie to strona, od której powinieneś zacząć”;
pytania i odpowiedzi — Na stronach często pojawia się także skrót „FAQ”. Dla nowych użytkowników Internetu oraz osób nie znających języka angielskiego przyda się jego wyjaśnienie lub podanie polskiego odpowiednika — „Najczęściej zadawane pytania i odpowiedzi”. Jeśli wolisz użyć skrótu „FAQ”, to opisz go w następujący sposób: „Strona FAQ (Frecquently Asked Quastions) zawiera pytania najczęściej zadawane przez osoby odwiedzające witrynę oraz odpowiedzi na nie”;
e-mail — Oto jeszcze jedno połączenie, którego znacznie może wymagać wyjaśnienia. Czy umożliwia ono wyświetlenie wiadomości otrzymanej pocztą elektroniczną lub też wysłanie takiej wiadomości na Twój adres? Opis o treści „Użyj tego połączenia, aby wysłać pytanie lub komentarz do administratora tej witryny” dokładnie wyjaśni użytkownikom, do czego służy to połączenie.

Jeśli system nawigacyjny witryny składa się z ikon lub obrazów, ich znaczenie nie zawsze będzie oczywiste. Rozważmy przykład przedstawiony na rysunku 24.4. Lewa ramka układu zawiera ikony i obrazy służące do poruszania się po witrynie, natomiast w dolnej ramce został umieszczony tekstowy pasek nawigacyjny udostępniający analogiczne możliwości funkcjonalne.

Rysunek 24.4.

System nawigacyjny wykorzystujący ikony, obrazy oraz układ ramek

0x01 graphic

W niektórych przypadkach znaczenie ikony lub obrazu umieszczonego na pasku nawigacyjnym nie jest oczywiste. Krótki opis każdej z zastosowanych ikon został podany w głównej ramce układu, jednak dla początkujących użytkowników przydałyby się zapewne dodatkowe wyjaśnienia. Na przykład, mógłbyś umieścić na stronie wszystkie ikony, a obok nich opisy podobne do tych, które podałam dla połączeń tworzących tekstowy pasek nawigacyjny.

Początkujący użytkownicy mają zazwyczaj problemy ze zrozumieniem układów ramek. Dla nich bardzo pomocna może się okazać strona z krótkim opisem układu. Jednym ze sposobów opisu układu ramek jest umieszczenie na stronie obrazu przedstawiającego jego miniaturę, podobnego do tego, który pokazałam na rysunku 24.5. Nazwij każdą z ramek układu, używając określeń, które odwiedzający będzie mógł łatwo zapamiętać (na przykład: Lewa, Górna, Dolna, Główna) i na tej samej stronie podaj krótki opis przeznaczenia każdej z tych ramek. Poniżej podałam przykład, jak można by opisać ramki przedstawione na rysunku 24.5:

ikony umieszczone w lewej ramce możesz użyć, aby określić stronę, którą chcesz wyświetlić w największej, Głównej ramce. Jeśli nie pamiętasz, co oznaczają poszczególne ikony, to kliknij ikonę ze znakiem zapytania, aby wyświetlić stronę z informacjami o ikonach lub skorzystaj z tekstowego paska nawigacyjnego wyświetlonego w Dolnej ramce;
Górna ramka układu zawiera logo witryny, dzięki czemu zawsze będziesz wiedział, jaką witrynę oglądasz;
w ramce Głównej wyświetlane są wszystkie strony wybierane w ramce Lewej lub Dolnej. Co więcej, jeśli klikniesz jakieś połączenie umieszczone na stronie wyświetlonej w Głównej ramce, to jego strona docelowa także zostanie wyświetlona w tej samej ramce;
połączenia tekstowe umieszczone w Dolnej ramce mają to samo przeznaczenie co ikony w ramce Lewej. Zostały one stworzone z myślą o osobach, których przeglądarki nie wyświetlają obrazów lub preferują stosowanie połączeń tekstowych.

Rysunek 24.5.

Opisywanie układu ramek

0x01 graphic

Dodaj informacje o zalecanych przeglądarkach

Kolejną informacją, która może się okazać pomocna dla osób korzystających po raz pierwszy z Twojej witryny, będzie wskazanie przeglądarki, z myślą o której została ona zaprojektowana. Rysunek 24.6 przedstawia prosty przykład strony zawierającej takie informacje.

Rysunek 24.6.

Dodanie zaleceń odnośnie stosowanej przeglądarki

0x01 graphic

Informacje umieszczone na tej stronie pozwalają dowiedzieć się, że do oglądania witryny należy używać przeglądarek zgodnych ze standardem języka HTML 3.2 oraz kolejnych wersji obsługujących układy ramek (zgodnych ze specyfikacją języka HTML Frameset). Umieszczona na stronie lista podaje wszystkie przeglądarki, w jakich witryna została przetestowana wraz z połączeniami umożliwiającymi ich pobranie. W końcu autor witryny pyta, czy użytkownicy innych przeglądarek mają jakieś problemy z korzystaniem z witryny. Podany został także adres poczty elektronicznej, dzięki czemu może otrzymywać informacje o potencjalnych problemach, jakie występują w przeglądarkach, których witryna nie została przetestowana.

Lista innych niezbędnych plików

Oprócz wiadomości o zalecanych przeglądarkach, powinieneś także poinformować użytkowników o wszelkich dodatkach oraz innych plikach, które będą potrzebne osobom przeglądającym witrynę. Jeśli na witrynie zostały umieszczone pliki, które nie są zapisane w formacie HTML (na przykład, pliki archiwalne, dokumenty programu Microsoft Word, obrazy w formatach innych niż JPEG i GIF, itp.), to powinieneś poinformować użytkowników, iż będą potrzebowali specjalnych programów. Podaj listę zewnętrznych i dodatkowych programów, które będą potrzebne.

Przykład listy połączeń do zewnętrznych plików został przedstawiony na rysunku 24.7. Na tej stronie autor podał zewnętrzne aplikacje, potrzebne użytkownikowi w celu ogląd-nięcia lub wykorzystania plików umieszczonych na witrynie. Ta przykładowa witryna zawiera kilka plików zapisanych w formacie Adobe Acrobat Reader (.PDF) oraz plików archiwalnych (.ZIP), które zostały umieszczone na kilku różnych stronach. Umieszczając na jednej stronie połączenie do wszystkich koniecznych przeglądarek i programów dodatkowych (takich jak WinZip oraz Adobe Acrobat Reader), osoby odwiedzające witrynę mogą bardzo szybko dowiedzieć się, jakich plików będą potrzebowały, aby w pełni wykorzystać możliwości witryny.

Rysunek 24.7.

Lista innych plików, koniecznych do korzystania z witryny

0x01 graphic

Określanie preferencji użytkowników

Oprócz różnych poziomów doświadczenia osób oglądających witryny, możesz mieć także pewność, że każda z nich będzie miała swój własny, ulubiony sposób korzystania z niej. W jaki sposób możesz zadowolić upodobania wszystkich użytkowników? Prawdę rzekłszy, nie możesz. Jednak postarać się go określić. Jednym z czynników dobrego projektu witryny jest przewidzenie, co użytkownicy będą chcieli na niej oglądać. Staje się to tym trudniejsze, im więcej osób będzie się interesowało zagadnieniami prezentowanymi na witrynie.

Jak można zauważyć, potrzeby każdego z członków naszej fikcyjnej rodziny sprawiają, iż inaczej patrzy na WWW. Czasami wynika to z zainteresowań, czasami ze specjalnych potrzeb użytkowników. Właśnie to jest kluczem do przewidzenia, jakie informacje powinieneś umieścić na swojej witrynie.

Zagadnienia typu „Regulacja zapłonu w silnikach motocyklowych o pojemności 300 cm sześciennych” zainteresuje wąskie grono odbiorców. Będzie on atrakcyjny dla osób interesujących się motocyklami, w konkretniej, dla osób pragnących wyremontować lub wyregulować własny motocykl. Stosunkowo łatwo można określić typy informacji, jakie zainteresują takich odbiorców. Będą to zapewne szczegółowe instrukcje, krok po kroku opisujące proces regulacji oraz obrazy lub inne prezentacje multimedialne demonstrujące techniki, których w łatwy sposób nie da się opisać słowami.

Z drugiej strony, temat „Siedem cudów świata starożytnego” przyciągnie zainteresowanie uczniów i studentów w różnym wielu, jak również ich nauczycieli. Taką witrynę mogą także odwiedzać archeolodzy, historycy oraz wszelkie inne osoby interesujące się historią starożytną. Teraz dysponujesz znacznie szerszym gronem odbiorców, mieszczących się w szerszym przedziale wiekowym i o wyższym poziomie wykształcenia. Znacznie trudniej będzie stworzyć witrynę, która zadowoli ich wszystkich.

W takich przypadkach zawężenie tematyki witryny może nieco ułatwić zadanie. Jednym ze sposobów jest zaprojektowanie witryny przeznaczonej dla konkretnej grupy użytkowników, na przykład, dla:

uczniów szkół podstawowych oraz ich nauczycieli — taka witryna będzie wymagać bardzo prostego systemu nawigacji, który można łatwo zrozumieć; zawartość witryny powinna być prosta i czytelna; atrakcyjne, kolorowe obrazy i animacje mogą przyciągnąć uwagę i zainteresowanie młodych odbiorców;
uczniów gimnazjów i liceów oraz ich nauczycieli — w tym przypadku można użyć nieco bardzie skomplikowanego systemu nawigacji; wykorzystanie multimediów oraz najnowszych technologii internetowych może skłonić tę grupę odbiorców do ponownego odwiedzenia witryny;
studentów oraz wykładowców — ta grupa odbiorców będzie wymagała witryny, której zawartość będzie na znacznie wyższym poziomie, natomiast zastosowanie technik multimedialnych nie będzie aż tak ważne; w tym przypadku dobrym rozwiązaniem będzie stworzenie witryny w formie internetowej encyklopedii;
badaczy i historyków — witryna przeznaczona dla tej grupy odbiorców będzie zapewne wymagała stworzenia stron zawierających więcej informacji tekstowych niż obrazów i innych plików multimedialnych.

Nie zawsze możliwe jest określenie grup odbiorców, korzystających z witryny. W takich przypadkach rozpocznij tworzenie witryny, bazując na własnych preferencjach. Sprawdź także inne o podobnej zawartości. Przeglądając je, zadaj sobie pytanie, co chciałbyś na nich zobaczyć. Czy informacje są prezentowane w dobry sposób? Czy na witrynie są wiadomości stanowiące pomoc dla odwiedzających ją osób? Czy na witrynie jest zbyt mało, bądź zbyt dużo efektów multimedialnych? Jeśli masz znajomych chętnych do pomocy, to ich opinie będą stanowiły cenny materiał, który powinieneś przeanalizować przed rozpoczęciem tworzenia własnej witryny.

Po zaprojektowaniu początkowych wersji własnych stron poproś przyjaciół, rodzinę lub współpracowników, aby przyjrzeli się witrynie i podzielili się swoimi opiniami na jej temat. Pamiętaj, że prosząc inne osoby o konstruktywną krytykę, nie zawsze usłyszysz to, co być chciał; jednak jest to bardzo ważny proces, dzięki któremu możesz zdobyć wiele nowych pomysłów i propozycji poprawienia witryny.

Podejmowanie decyzji o użyciu języka HTML 4.0 bądź XHTML 1.0

W poprzednich rozdziałach poznałeś różne wersje języka HTML 4.0 oraz XHTML 1.0 i dowiedziałeś się, w jaki sposób każda z nich jest przeznaczona dla osób korzystających ze starszych bądź nowszych przeglądarek. Poniżej przedstawiłam różne wersje języków:

HTML 4.0 lub XHTML 1.0 Transitional (pośredni) — jest przeznaczona dla osób pragnących zapewnić poprawne działanie witryny w starszych modelach przeglądarek;
HTML 4.0 lub XHTML 1.0 Frameset (układ ramek) — jest przeznaczona dla osób pragnących wykorzystać możliwości nawigacji, jakie dają układy ramek oraz znaczniki dostępne w języku HTML 4.0 Transitional;
HTML 4.0 lub XHTML 1.0 Strict (ścisły) — jest przeznaczona dla osób pragnących tworzyć strony całkowicie zgodne ze specyfikacją języków HTML 4.0 oraz XHTML 1.0, które nie wykorzystują przestarzałych i niezalecanych znaczników i atrybutów.

HTML 4.0 oraz XHTML 1.0 Transitional (pośredni)

Jeśli spodziewasz się, że osoby odwiedzające Twoją witrynę będą korzystały z wielu różnych przeglądarek, to prawdopodobnie korzystne będzie stworzenie jej na bazie specyfikacji HTML 4.0 lub XHTML 1.0 Transitional. Dzięki temu zapewniasz zgodność tworzonych stron z wcześniejszymi wersjami przeglądarek. Ta specyfikacja zapewnia możliwość stosowania znaczników, które w specyfikacji ścisłej, HTML 4.0 lub XHTML 1.0 Strict, zostały uznane za przestarzałe i nie są zalecane. Z tego względu, jeśli masz zamiar używać znaczników i atrybutów określających postać dokumentu wprowadzonych w HTML-u 3.2 (takich jak znacznik <CENTER> lub atrybut ALIGN określające wyrównanie elementu lub atrybuty BGCOLOR oraz COLOR określające kolor tła i tekstu), będziesz mógł to zrobić.

Rozważmy przykład strony Pałacu Strachu Halloween, przedstawionej w rozdziale 7. — „Wykorzystywanie obrazów, koloru i tła”. W tym rozdziale wygląd strony znowu został zmodyfikowany, o czym przekonasz się, przeglądając przedstawiony poniżej kod oraz rysunek. W tej wersji strony, do przedstawienia jej zawartości i określenia wyglądu zostały wykorzystane znaczniki zgodne ze specyfikacją HTML 3.2. Czcionki, kolory oraz wyrównanie elementów strony zostało określone przy wykorzystaniu znaczników uznanych za przestarzałe w specyfikacji HTML 4.0 i XHTML 1.0 Strict.

W przedstawionym poniżej przykładzie przestarzałe znaczniki i atrybuty zostały oznaczone kursywą. Poza tym na stronie wykorzystano tabelę, dzięki której fragmenty strony — obrazki, połączenia i wyjaśnienia — zostały rozmieszczone w formie szachownicy. Rysunek 24.8 przedstawia wygląd poniższej strony, wyświetlonej za pomocą przeglądarki Internet Explorer.

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>

<head>

<title>Witajcie w Pałacu Strachu Halloween</title>

</head>

Witajcie w Pałacu Strachu Halloween!!</h1>

</div>

<hr />

Wybrany najbardziej strasznym i przerażającym Pałacem Strachu przez

trzy lata z rzędu

Pałac Strachu Halloween

dostarcza niesamowitych wrażeń. Ponad 20 sal strachu i

przerażenia stworzonych, by przerazić i zmrozić krew w żyłach!

<hr />

Nie słuchajcie tego co mówią ... przejrzyjcie kilka obrazów tego co Was czeka!

<tr>

</td>

Uważajcie na Esmereldę. Nigdy nie wiadomo co gotuje w swoim kotle.

</td>

<a href="entry.gif">Holl wejściowy</a> </th>

</tr>

<tr>

<a href="bedroom.gif">Sypialnia Mistrza</a> </th>

Bez względu na wszystko, nie otwierajcie tych drzwi!</td>

</td>

</tr>

<tr>

</td>

Więcej niż kilku niewinnych zostało na eony zakutych w łańcuchy.

Oni już nigdy nie będą tacy sami.</td>

<a href="galley.gif">Galeria</a></th>

</tr>

<tr>

<a href="dungeon.gif">Piwnice</a> </th>

Lepiej słuchajcie przewodnika bo się zgubicie! </td>

</td>

</tr>

</table>

</div>

<hr />

<tong color="#cc0000">Pałac Strachu Halloween

jest otwarty od 20 października do 1 listopada,

a w noc Święta duchów odbędzie się wielka gala.

Godziny otwarcia:

<ul>

<li>

Pn-Pt 17.00 - do północy

</li>

<li>

Sb & Nd 17.00 - 3.00

</li>

<li>

W noc Halloween (31 październik): 15.00-???</li>

</ul>

Pałac Strachu Halloween

znajduje się w:

The Old Waterfall Shopping Center

1020 Mirabella Ave

Springfield, CA 94532

</body>

</html>

0x01 graphic

Rysunek 24.8.

Przykład kodu zgodnego ze specyfikacją HTML 4.0 Transitional wyświetlonego w przeglądarce Internet Explorer

0x01 graphic

HTML 4.0 i XHTML 1.0 Frameset (układ ramek)

Jeśli chcesz wykorzystać ramki do stworzenia systemu poruszania się po witrynie, to najbardziej logicznym rozwiązaniem będzie użycie specyfikacji HTML 4.0 lub XHTML 1.0 Frameset. Także w tym przypadku możesz korzystać ze znaczników i atrybutów „dopuszczalnych” w specyfikacji HTML 4.0 i XHTML 1.0 Transitional. Dodatkowo możesz także używać wszelkich znaczników i atrybutów związanych z układami ramek i ramkami.

Kluczem do zaprojektowania dobrego układu ramek jest użycie jak najmniejszej ilości ramek, które stworzą prosty i zrozumiały system nawigacyjny. Bardzo trudną decyzją, jaką należy podjąć, jest określenie rozdzielczości, w jakiej ma być oglądany układ ramek. Jej znaczenie ma związek z faktem, iż układ ramek dzieli okno przeglądarki na niezależne części — ramki; im będzie ich więcej, tym mniejsze będą strony wyświetlane w każdej z nich.

Na rysunku 24.9 przedstawiłam witrynę Pałacu Strachu Halloween, przedstawioną w postaci układu ramek. Główna ramka układu wyświetla dokładnie tą samą stronę, która została przedstawiona na rysunku 24.8, natomiast połączenia umieszczone w lewej ramce umożliwiają użytkownikom przejście do stron zawierających zdjęcia i opisy pozostałych pomieszczeń w nawiedzanym domu. Dzięki umieszczeniu połączeń w lewej ramce osoby przeglądające witrynę nie będą już musiały używać przycisków przeglądarki, aby odbyć krótką wycieczkę po nawiedzanym domu. A zatem, sposób poruszania się po witrynie został bardzo uproszczony.

Kod układu ramek dzieli okno przeglądarki na dwie ramki o nazwach: lewa i prawa. W lewej ramce wyświetlana jest strona o nazwie nawigacja.html, natomiast strona główna, glowna.html, jest wyświetlana w ramce prawej. Poniżej przedstawiłam kod układu ramek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">

<html>

<head>

<title>Pałac Strachu Halloween - Układ ramek</title>

</head>

<body>

... tu wstaw treść dla przeglądarek

które nie obsługują układów ramek ...

</body>

</noframes>

</frameset>

</html>

Kod strony wyświetlanej w lewej ramce układu (nawigacja.html) sprawia, że gdy użytkownik kliknie dowolne z połączeń umieszczonych na tej stronie, jego strona docelowa zostanie wyświetlona w prawej ramce. (Służy do tego znacznik <BASE TARGET="prawa">.) Każde z połączeń o postaci graficznej definiuje tekst alternatywny, wyświetlany w momencie, gdy użytkownik umieści wskaźnik myszy w obszarze połączenia lub w przeglądarce zostało wyłączone wyświetlanie obrazów. Kod strony nawigacja.html został przedstawiony poniżej:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"><html>

<head>

<title>Pałac Strachu Halloween</title>

</head>

Pałac

Strachu

Halloween

</body>

</html>

Rysunek 24.9.

Przykładowy kod zgodny ze standardem HTML 4.0 Frameset

0x01 graphic

HTML 4.0 i XHTML 1.0 Strict (ścisły)

Specyfikacje Transitional oraz Frameset umożliwiają tworzenie stron, które będą poprawnie wyświetlane w starszych przeglądarkach (wersjach wcześniejszych niż Netscape Navigator 4.0 oraz Internet Explorer 4.0). Jednak specyfikacje HTML 4.0 i XHTML 1.0 Strict udostępniają szersze możliwości związane z prezentowaniem stron. Jest to możliwe dzięki zastosowaniu kaskadowych arkuszy stylów (CSS — ang. Cascading Style Sheets) oraz innych technologii przedstawionych w niniejszej książce. Wraz z pojawianiem się nowego sprzętu służącego do przeglądania zasobów WWW potrzeba stosowania tej specyfikacji języka HTML i XHTML jest coraz większa. Jednak aktualnie korzystanie z tej specyfikacji ma jedną wadę, otóż może trochę potrwać, nim użytkownicy zaczną odwiedzać witrynę, używając przy tym odpowiednich przeglądarek.

Aby tworzyć strony zgodne ze specyfikacją HTML 4.0 i XHTML 1.0 Strict musisz unikać stosowania znaczników i atrybutów HTML oznaczonych jako przestarzałe. Zamiast nich należy używać kaskadowych arkuszy stylów oraz implementować strony, wykorzystując inne metody, takie jak Dynamiczny HTML.

Jeśli jesteś skłonny stracić część odbiorców, to odkryjesz, że zastosowanie specyfikacji HTML 4.0 i XHTML 1.0 Strict ma także kilka zalet. Zgodnie z tym, czego się dowiedziałeś w rozdziale 10. — „XHTML i arkusze stylów”, dzięki kaskadowym arkuszom stylów dysponujesz znacznie większą kontrolą nad wyglądem i układem tworzonych stron. Pod wieloma względami, będziesz w stanie rozmieszczać zawartość stron niemal tak samo, jak w programach poligraficznych oraz edytorach tekstu. Kolejną zaletą stosowania CSS2 (kaskadowych arkuszy stylów poziomu drugiego) jest możliwość użycia dodatkowych właściwości przeznaczonych dla przeglądarek, które nie prezentują zawartości stron w sposób wizualny. Oznacza to projektowanie stron, które mogą być odwiedzane przez osoby mające problemy ze wzrokiem lub inne, specjalne potrzeby.

Przedstawiony poniżej kod strony demonstruje, w jaki sposób należy zaimplementować stronę z rysunku 24.8, aby była zgodna ze specyfikacją XHTML 1.0 Strict. W tym przypadku nowa wersja strony Pałacu Strachu Halloween wykorzystuje osadzone arkusze stylów, określające postać wyświetlanego tekstu i obrazów. Kolory tekstu, połączeń oraz komórek tabeli zostały zdefiniowane na samym początku arkusza stylów. Zostały także określone wszystkie marginesy strony. Poza tym lista umieszczona u dołu strony nie zawiera standardowych oznaczeń punktów, lecz obraz zdefiniowany w arkuszu stylów. Wygląd tej strony, wyświetlonej w Internet Explorerze, został przedstawiony na rysunku 24.10.

0x01 graphic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

<html>

<head>

<title>Witajcie w Pałacu Strachu Halloween</title>

<!--

body { background-color: #ff9933;

color: #000000;

font-family: Arial, sans-serif;

font-size: 12pt;

margin-left: 20px;

margin-right: 20px;

margin-top: 10px;

margin-bottom: 10px }

a:link{ color: #990000 }

a:visited{ color: #CC00CC }

a:active{ color: #CC0000 }

h1{ font-family: Arial, sans-serif;

font-size: 24pt }

table { text-align: center }

th { background-color: #ff6600;

color: #000000;

font-family: Arial, sans-serif;

font-size: 12pt;

font-weight: bold }

td { color: #000000;

font-family: Arial, sans-serif;

font-size: 12pt }

td.red { background-color: #cc0000 }

ul { list-style-image: url("bullet.gif") }

.bloodred { color:#CC0000 }

.bloodredbold { color: #CC0000; font-weight: bold }

.center { text-align: center }

-->

</style>

</head>

<body>

<h1 class="center">Witajcie w Pałacu Strachu Halloween!!</h1>

<dl>

<dd>

</dd>

</dl>

</div>

<hr />

Wybrany najbardziej strasznym i przerażającym Pałacem Strachu przez

trzy lata z rzędu, Pałac Strachu Halloween

dostarcza niesamowitych wrażeń. Ponad 20 sal strachu i

przerażenia stworzonych, by przerazić i zmrozić krew w żyłach!!

<hr />

Nie słuchajcie tego co mówią ... przejrzyjcie kilka obrazów tego co Was czeka!

<tr>

<td>

</td>

<td class="red">Uważajcie na Esmereldę. Nigdy nie wiadomo co gotuje w swoim kotle.</td>

<th><a href="code/entry.gif">Holl wejściowy</a></th>

</tr>

<tr>

<th><a href="code/bedroom.gif">Sypialnia Mistrza</a></th>

<td class="red">Bez względu na wszystko, nie otwierajcie tych drzwi!</td>

<td>

</tr>

<tr>

<td class="red">Więcej niż kilku niewinnych zostało na eony zakutych w łańcuchy.

Oni już nigdy nie będą tacy sami.</td>

<th><a href="code/galley.gif">Galeria</a></th>

</tr>

<tr>

<th><a href="code/dungeon.gif">Piwnice</a></th>

<td class="red">Lepiej słuchajcie przewodnika bo się zgubicie!</td>

</tr>

</table>

<hr />

Pałac Strachu Halloween

jest otwarty od 20 października do 1 listopada,

a w noc Święta duchów odbędzie się wielka gala.

Godziny otwarcia:

<ul>

<li>Pn-Pt 17.00 - do północy</li>

<li>W noc Halloween (31 październik): 15.00-???</li>

</ul>

Pałac Strachu Halloween

znajduje się w:

The Old Waterfall Shopping Center

1020 Mirabella Ave

Springfield, CA 94532

</body>

</html>

0x01 graphic

Rysunek 24.10.

Przykład strony zgodnej ze specyfikacją XHTML 1.0 Strict wyświetlonej w przeglądarce Internet Explorer

0x01 graphic

Podsumowanie

Języki HTML 4.0 oraz XHTML 1.0 udostępniają różne sposoby podejścia do projektowania stron WWW, zaspokajają wszelkie, różnorodne potrzeby. Mam nadzieję, iż zdajesz już sobie sprawę, iż potrzeby osób odwiedzających witrynę także mogą mieć wpływ na sposób jej projektowania. Kluczowym zagadnieniem jest przewidzenie potrzeb użytkowników oraz zaspokojenie ich w jak największym stopniu. Nie każda witryna musi wykorzystywać najnowsze i najwspanialsze multimedialne technologie internetowe. Jednak z drugiej strony, niektóre zagadnienia niemal wymagają użycia bardziej zaawansowanego sposobu projektowania stron WWW. A zatem, jeśli, projektując witrynę, uwzględnisz potrzeby osób, które z nich korzystają, możesz sprawić, iż będą na nią wielokrotnie wracali.

Warsztat

Jakbyś jeszcze nie miał dosyć, to w tej części rozdziału utrwalisz sobie poznane wiadomości. Jak zwykle, znajdziesz tu pytania i odpowiedzi, quiz oraz ćwiczenia, które ułatwią Ci zapamiętanie niektórych, najistotniejszych zagadnień przedstawionych w tym rozdziale.

Pytania i odpowiedzi

P. Informacje docierające do mnie od osób odwiedzających moją witrynę są bardzo różne. Niektórzy z nich chcą, abym używał więcej efektów multimedialnych, a inni, aby było ich mniej. Czy w jakiś sposób zadowolić obie grupy użytkowników?

O. Dowiedziałeś się już, że możesz umieścić na stronach połączenia do zewnętrznych plików multimedialnych. Jest to najlepsze rozwiązanie wychodzące naprzeciw oczekiwaniom użytkowników, którym nie podoba się nadmiar efektów multimedialnych, gdyż w ten sposób nie zobaczą ich dopóki nie skorzystają z odpowiedniego połączenia.

Możesz także zastosować zaawansowane metody programistyczne (skrypty pisane w językach JavaScript lub VBScript), aby określić przeglądarkę używaną przez osobę odwiedzającą witrynę. Po określeniu typu przeglądarki, skrypt może automatycznie skierować użytkownika na stronę zgodną z tą przeglądarką. Oczywiście, takie rozwiązanie będzie wymagało od Ciebie poświecenia dodatkowego czasu. Nie tylko będziesz musiał napisać odpowiedni skrypt, lecz także stworzyć kilka różnych wersji swoich stron. Jeśli nie chcesz automatycznie określać typu przeglądarki, to możesz umieścić na stronie głównej połączenia, które umożliwią osobom odwiedzającym witrynę przejście do stron takiego typu, który im najbardziej odpowiada. Po prostu, wykorzystaj główną stronę witryny jak swoistą bramę pozwalającą na przejście do „prostej i skromnej witryny” lub „witryny w pełni multimedialnej” i pozwól użytkownikom dokonać wyboru.

P. Na swojej witrynie używam wielu plików zewnętrznych, które można pobrać z kilku różnych stron. Czy umieszczenie połączeń do odpowiednich aplikacji dodatkowych i przeglądarek na stronach, na jakich są umieszczone te pliki zewnętrzne, nie byłoby bardziej efektywnym rozwiązaniem?

O. Choć użytkownikowi znacznie łatwiej pobrać zewnętrzny plik oraz odpowiednią aplikację z tej samej strony WWW, to jednak pielęgnacja takich stron może być znacznie trudniejsza, gdy adresy URL zewnętrznych aplikacji będą się zmieniać. Dobrym rozwiązaniem jest dołączenie do witryny strony Pobieranie lub Programy dodatkowe, zawierającej adresy wszystkich aplikacji dodatkowych, których użytkownik będzie potrzebował. Jeśli skopiuje jakiś plik zewnętrzny dołączony do witryny, może następnie przejść na tę stronę i pobrać odpowiednią aplikację dodatkową.

Quiz

Pod jakimi względami mogą się różnić potrzeby osób, jakie w praktyce będą odwiedzać Twoją witrynę?
Wymień kilka ważnych elementów witryn WWW, które mogą ułatwić korzystanie z nich początkującym użytkownikom komputerów i Internetu.
W jaki sposób zastosowanie specyfikacji HTML 4.0 i XHTML 1.0 Transitional może pomóc w zaspokojeniu potrzeb większej ilości potencjalnych użytkowników witryny?
Prawda czy fałsz? Tworzenie układów składających się z większej ilości ramek jest lepszym rozwiązaniem, gdyż pozwala na jednoczesne wyświetlenie w oknie przeglądarki większej ilości informacji?
Jakie są zalety i wady zastosowania specyfikacji języka HTML 4.0 i XHTML 1.0 Strict, w zakresie zaspokajania potrzeb osób odwiedzających witrynę?

Odpowiedzi

Użytkownicy będą mieli różne poziomy doświadczenia. Różne są także preferencje dotyczące przeglądanych stron. Niektóre osoby lubią dużo efektów multimedialnych, natomiast inne najchętniej w ogóle by ich nie oglądały. Niektórzy użytkownicy preferują interaktywne strony i multimedia, a inni prostsze obrazy demonstrujące metody i techniki wykonywania określonych czynności. Pozostałe preferencje mogą zależeć od zainteresowań użytkowników.
Dołącz do witryny strony, które ułatwią użytkownikom odnalezienie poszukiwanych informacji. Dołącz także strony wyjaśniające, w jaki sposób należy się poruszać po witrynie.
Specyfikacja HTML 4.0 oraz XHTML 1.0 Transitional została zaprojektowana w celu zapewnienia zgodności z wcześniejszymi wersjami przeglądarek. Umożliwia ona stosowanie znaczników i atrybutów, które w specyfikacji ścisłej (Strict) zostały uznane za przestarzałe.

Fałsz. Wykorzystanie zbyt dużej ilości ramek może stanowić problem dla początkujących użytkowników, a poza tym, poszczególne ramki mogą się okazać zbyt małe w przypadku wyświetlenia układu w małej rozdzielczości.
Najpoważniejszą wadą wynikającą z zastosowania specyfikacji HTML 4.0 oraz XHTML 1.0 Strict jest konieczność odczekania pewnego okresu czasu, zanim większość użytkowników będzie używała przeglądarek w pełni zgodnych z tą specyfikacją. Jej zaletą jest natomiast możliwość korzystania ze specjalnych możliwości prezentacji stron, na przykład, możliwości posługiwania się przeglądarkami, które nie prezentują stron w postaci wizualnej.

Ćwiczenia

Zaprojektuj prosty system nawigacyjny dla swojej witryny i opisz go w sposób, który wydaje Ci się najbardziej odpowiedni. Następnie poproś kogoś, aby przejrzał ten opis i sprawdź, czy podane wyjaśnienia są dla niego jasne.
Sporządź listę zagadnień, jakie chcesz poruszać na swojej witrynie. Ponownie przejrzyj tę listę i sprawdź, czy będziesz w stanie określić typy osób, które mogą być zainteresowane tymi zagadnieniami. W końcu, przejrzyj listę po raz trzeci i zapisz szczególne wymagania i potrzeby, które być może będziesz musiał wziąć pod uwagę dla każdego z tych typów użytkowników.