Rozdział 23.
Przykłady
dobrych i złych stron WWW
W tym rozdziale zajmiemy się prostymi przykładami stron i witryn, typowych dla sieci
(w rzeczywistości nie znajdziesz zaprezentowanych tu stron WWW w Sieci,
utworzyłam je specjalnie z myślą o tym rozdziale). Każda z pokazanych stron jest albo
typowym przykładem przedstawiania danego rodzaju informacji, albo prezentuje
specyficzną metodę rozwiązywania problemów, na które możesz natrafić, tworząc
własne strony. Oto tematyka rozdziału:
szkic strony głównej firmy,
encyklopedia motocykli  zawiera obrazy, sekwencje dz
więkowe i inne sekwencje
multimedialne,
katalog firmy ogrodniczej, w którym możesz pooglądać okazy oraz złożyć
zamówienia na zioła, przyprawy oraz aromatyczne warzywa.
W każdym przykładzie zwracam uwagę na interesujące cechy strony oraz te
kwestie, które mogą być Ci przydatne w trakcie tworzenia własnych stron i witryn.
Postać z
ródłową przykładów znajdziesz na dołączonym do książki dysku CD-ROM
Przykład 1. Witryna firmowa
Firma Fuszerka sp. z o. o. produkuje swetry oraz koce na wszelkie okazje. Klienci
odwiedzający witrynę firmy początkowo trafią na jej stronę główną (patrz rysunek
23.1). Ogólnie rzecz biorąc, autor witryny zdecydował, że wygląd stron zostanie
sformatowany przy użyciu kaskadowych arkuszy stylów.
Oprócz spójnego wyglądu stron osiągniętego dzięki wykorzystaniu arkuszy stylów, na
poszczególnych są jeszcze inne, powtarzające się elementy. Każda z głównych stron
witryny zawiera niewielki, lecz atrakcyjny obraz przedstawiający jej tytuł. U dołu
każdej z nich został umieszczony pasek nawigacyjny, informacje o prawach autorskich
oraz adres poczty elektronicznej, pod który można przesyłać pytania i komentarze.
680 Część 8. Projektowanie efektywnych stron WWW
Rysunek 23.1.
Strona główna
firmy Fuszerka
Na tej prostej i bezpretensjonalnej stronie głównej klient może wybrać z listy połączeń
stronę, którą chce odwiedzić. Nie będę opisywać wszystkich po kolei, ale przedstawię
te, które są interesujące.
Co nowego w firmie?
Wybór połączenia Co nowego w firmie? powoduje przejście na stronę Co nowego (patrz
rysunek 23.2). Jest to pierwsze połączenie na stronie głównej oraz drugie (po
połączeniu ze stroną główną) na pasku nawigacyjnym.
Strona Co nowego w firmie zawiera informacje o tym, co interesującego zdarzyło się
w firmie i poza nią. Zwróć uwagę na odwrotny porządek chronologiczny przedstawia-
nych wydarzeń (jako pierwsze wymieniane są wydarzenia najświeższe). Strona ta
nadaje się do prezentowania klientom sieciowym nowych wyrobów firmy lub samej
firmy i informacji o niej. Strony typu Co nowego są przydatne w prezentacjach
odwiedzanych często i regularnie. Pozwalają one Twoim czytelnikom szybko i bez
szukania znalez
ć nowe informacje o witrynie.
Pierwszą pozycją przedstawioną na stronie Co nowego w firmie Fuszerka, jest informa-
cja o wystąpieniu szefa laboratorium badawczego firmy na konferencji naukowej.
Rozdział 23. Przykłady dobrych i złych stron WWW 681
Rysunek 23.2.
Strona  Co nowego
w firmie
W notce umieszczone jest połączenie prowadzące do prezentowanego referatu (patrz ry-
sunek 23.3).
Wełna alpak jest niewątpliwie fascynująca, lecz gdzie można przejść z tej strony? Połą-
czenia umieszczone u dołu tej strony są inne, niż połączenia umieszczone u dołu głów-
nych stron witryny. Tutaj użytkownik ma dodatkowe możliwości nawigacji, może
przejść na stronę główną witryny (klikając połączenie Strona główna), do strony
z informacjami technicznymi (połączenie Informacje techniczne) oraz do innych stron
w tym samym dziale  skrócone wersje ich tytułów zostały umieszczone na pasku na-
wigacyjnym.
Stronę główną witryny już odwiedziłeś, a zatem przejdz
my dalej, do strony z informa-
cjami technicznymi.
Informacje techniczne
Strona Informacje techniczne (patrz rysunek 23.4) prezentuje listę publikacji, w których
firma opisała kwestie techniczne związane z produkcją swetrów (nie wiedziałeś o tym,
prawda?). Każde z połączeń listy przenosi Cię do odpowiedniego artykułu omawiające-
go dany problem techniczny.
682 Część 8. Projektowanie efektywnych stron WWW
Rysunek 23.3.
Wszystko na temat
zbioru wełny alpak
Rysunek 23.4.
Dział informacji
technicznych
Rozdział 23. Przykłady dobrych i złych stron WWW 683
Z tego miejsca czytelnik może przejść o jeden poziom niżej w hierarchii i przeglądnąć
anonsowane artykuły albo powrócić do strony głównej. Na stronie głównej pozostały do
wybrania połączenia do strony zawierającej charakterystykę firmy, strony opisującej jej
produkty oraz strony przedstawiającej możliwości współpracy.
Strona  Informacje o firmie
Strona Informacje o firmie zawiera listę połączeń do innych stron zwierających dodat-
kowe informacje na temat firmy. Jeśli tylko zechcesz, to dowiesz się czegoś więcej na
temat działalności firmy, jej misji, historii oraz położenia jej siedziby. Strona ta została
przedstawiona na rysunku 23.5.
Rysunek 23.5.
Strona z informacjami
o firmie
Strona  Produkty
Wybór kolejnego połączenia umieszczonego na pasku nawigacyjnym powoduje przej-
ście na stronę poświęconą produktom. Strona ta zawiera listę połączeń ze stronami kata-
logowymi (podobnymi do tych, które przedstawię w dalszej części rozdziału,
w przykładzie Katalogu Wysyłkowego). Te strony doskonale nadają się na umieszcze-
nie zdjęć, opisów oraz informacji o cenie poszczególnych produktów wytwarzanych
w firmie. Strona Produkty została przedstawiona na rysunku 23.6.
684 Część 8. Projektowanie efektywnych stron WWW
Rysunek 23.6.
Strona dotycząca
produktów firmy
Strona  Wsparcie dla produktów
Nawet osoby noszące swetry i pulowery robione na drutach zasługują na pomoc
i wsparcie. Klienci mogą mieć pytania dotyczące sposobu użytkowania oraz obchodze-
nia się z produktami firmy Fuszerka. Mając to na uwadze, firma stworzyła stronę zawie-
rającą takie informacje. Rysunek 23.7 przedstawia stronę Wsparcie dla produktów, jak
widać, zawiera ona listę najczęściej zadawanych pytań dotyczących produktów firmy
oraz odpowiedzi na nie. Jeśli na stronie nie ma odpowiedzi na pytanie użytkownika,
można je przesłać do działu obsługi klienta, pod podany adres poczty elektronicznej.
Z tej strony można przejść do dowolnej innej, znajdującej się w tym samym dziale lub
na którąś z głównych stron witryny.
Strona  Możliwości pracy
Dynamicznie rozwijająca się firma, taka jak Fuszerka, wciąż poszukuje utalentowanych
osób i chętnie przyjmuje podania o pracę, nawet jeśli w danej chwili nie ma żadnych
wolnych etatów. Na rysunku 23.8 została przedstawiona strona zawierająca listę do-
stępnych stanowisk pracy (jeśli takie są) oraz inne informacje dla osób szukających za-
trudnienia w firmie.
Rozdział 23. Przykłady dobrych i złych stron WWW 685
Rysunek 23.7.
Strona Wsparcie
dla produktów
Rysunek 23.8.
Strona Możliwości pracy
686 Część 8. Projektowanie efektywnych stron WWW
Cechy zaprezentowanej witryny i szczegóły projektowe
Przedstawiony szkic witryny firmy nie jest skomplikowany pod względem projekto-
wym. Ma prostą strukturę hierarchiczną i zawiera menu nawigacyjne służące do prze-
chodzenia do odpowiednich stron. Pasek nawigacyjny można umieścić także na począt-
ku strony, a nawet zarówno na jej początku, jak i na końcu, na wypadek, gdyby
użytkownik nie czytał całej strony. Prosta jest także rozbudowa takiej witryny, polega
ona na dołączaniu do hierarchii kolejnych elementów i dodawaniu nowych połączeń na
stronie głównej.
Przyjrzyj się dokładnie trasie naszej wędrówki poprzez strony witryny. W przypadku kla-
sycznej hierarchii czytelnik odwiedza każdy element po kolei, badając coraz to niższe
poziomy, a następnie wraca na poziom wyższy, by odwiedzić nową stronę. Pamiętasz
połączenie między stroną Co nowego w firmie a referatem o wełnie? Połączenie to
sprawiało, że czytelnik docierał z danej strony (Co nowego w firmie) do kolejnej (In-
formacje techniczne) bocznymi drogami. Dzięki stworzeniu odmiennego paska nawiga-
cyjnego, który pozwala na przejście do strony głównej witryny, głównej strony działu
oraz do pozostałych w tym samym dziale, bez trudu można odnalez
ć drogę do wszyst-
kich, głównych części witryny.
Ze względu na prostotę naszego przykładu nie jest to dezorientujące, ale w przypadku
skomplikowanej hierarchii, z wieloma poziomami i rozgałęzieniami, takie połączenia
przecinające hierarchiczne granice i pozwalające czytelnikowi zaburzyć porządek, mo-
gą być niebezpieczne. Po przejściu kilku takich pobocznych połączeń trudno jest okre-
ślić, na którym poziomie hierarchii aktualnie się znajdujesz. Jest to powszechny pro-
blem występujący w przypadku większości układów hipertekstowych, który określany
jest mianem  zagubienia w hiperprzestrzeni .
Nie ma wielu dobrych rozwiązań problemu zgubienia. Aktualnie stosowanym rozwią-
zaniem jest tworzenie układów ramek, ułatwiających poruszanie się po szczególnie
skomplikowanych witrynach; jednak nawet to rozwiązania należy projektować ze
szczególną ostrożnością. Wykorzystanie zbyt wielu ramek może nie tylko wprowadzić
dodatkowe zamieszanie, lecz także doprowadzić do powstania zbyt wielu bocznych po-
łączeń w hierarchii stron. Jeśli ograniczysz się do sztywnej struktury hierarchicznej
i utworzysz tylko nawigacyjne połączenia, czytelnicy będą w stanie zorientować się,
gdzie się znajdują, a jeśli nie, do dyspozycji będą mieli dwie możliwości: przejście o je-
den poziom wyżej, do znanej już strony lub dalsze drążenie hierarchii, w celu uzyskania
szczegółowych informacji.
Przykład 2. Encyklopedia multimedialna
Multimedialna Encyklopedia Motocykli to układ stron WWW, na których znajdziesz
wyczerpujące wiadomości na temat motocykli i ich producentów. Niezależnie od in-
formacji tekstowych na temat poszczególnych firm produkujących motocykle, encyklo-
pedia zawiera fotografie, dz
więki (hałas silnika!) i sekwencje wideo dla wielu maszyn.
Rozdział 23. Przykłady dobrych i złych stron WWW 687
Indeks jest ułożony alfabetycznie, zgodnie z zasadą: jedna strona na jedną literę (a.html,
b.html, itd.). Aby wspomóc nawigację w obrębie encyklopedii, strona główna jest stroną
przeglądową.
Strona przeglądowa
Jest to centralny punkt, z którego można przedostać się na kolejne strony encyklopedii
(patrz rysunek 23.9).
Rysunek 23.9.
Strona główna
Multimedialnej
Encyklopedii Motocykli
Możliwe jest to na dwa sposoby, poprzez wybranie pierwszej litery lub marki motocykla.
Marka to zabawny termin używany przez motocyklistów i fanatyków sportu
samochodowego, który określa wytwórcę danego wehikułu.
Tak więc, aby dowiedzieć się czegoś na temat motocykla marki Norton, powinieneś
wskazać literę N i przewinąć stronę do odpowiedniej pozycji strony N. Ponieważ jednak
nazwa Norton, jako jedna z głównych marek, pojawia się zaraz obok litery N, wystar-
czy, że klikniesz na tym połączeniu, by przejść do żądanej strony.
Pozycja Norton
Pozycjami każdej ze stron są charakterystyki poszczególnych marek motocykli
zaczynających się na literę odpowiadającą stronie. Jeśli czytelnik wybrał określonego
producenta, połączenie poprowadzi go bezpośrednio do wskazanej pozycji (na rysunku
688 Część 8. Projektowanie efektywnych stron WWW
centa, połączenie poprowadzi go bezpośrednio do wskazanej pozycji (na rysunku 23.10
pokazana jest pozycja omawiająca markę Norton). Pozycje zawierają informacje o fir-
mie i modelach motocykli produkowanych przez nią na przestrzeni lat.
Rysunek 23.10.
Pozycja omawiająca
firmę Norton
A gdzie obrazki? To miała być encyklopedia multimedialna, nieprawdaż? Obok tekstu
poświęconemu samej firmie Norton, pozycja zawiera listę zewnętrznych plików multi-
medialnych. Lista wszelkich plików multimedialnych została umieszczona z prawej
strony tabeli. Ze względu na to, że tło komórki tabeli zawierającej tę listę połączeń jest
inne, została wizualnie oddzielona od pozostałej części strony. Dzięki temu od razu wi-
dać, iż są to informacje dodatkowe, choć ściśle związane z motocyklami firmy Norton.
Rozdział 23. Przykłady dobrych i złych stron WWW 689
Lista ta zawiera połączenia do obrazów przedstawiających różne motocykle, klipów
dz
więkowych prezentujących odgłosy pracy silnika oraz filmów sławnych kierowców
na wspaniałych maszynach Norton a.
Każdy element listy zawiera krótki opis pliku multimedialnego i połączenie do niego.
Na przykład, kliknięcie połączenia z obracającym się, trójwymiarowym modelem mo-
tocykla Norton, zapisanym w formacie GIF, spowoduje wyświetlenie animowanego ob-
razu GIF w przeglądarce (patrz rysunek 23.11).
Rysunek 23.11.
Trójwymiarowy,
obracający się
model motocykla
Zauważ również, że ilekroć w tekście pojawia się nazwa którejś z firm, jest ona pod-
stawą połączenia prowadzącego do odpowiadającej jej pozycji. Wybierając w ostatnim
akapicie nazwę BSA, przeniesiony zostaniesz do pozycji BSA (patrz rysunek 23.12).
Rysunek 23.12.
Informacje
o firmie BSA
W ten sposób czytelnik może skakać od połączenia do połączenia, studiując dane po-
szczególnych firm i docierać do informacji, które go interesują. Po znalezieniu szuka-
nych treści trzeba jednak umieć wrócić. W tym celu każda pozycja zawiera połączenie
 Powrót do przeglądu . Oznacza to, że czytelnik nie musi przewijać strony ani w górę,
ani w dół, by znalez
ć drogę powrotną.
690 Część 8. Projektowanie efektywnych stron WWW
Indeks marek
Chciałabym zwrócić uwagę na pewną ciekawą opcję dostępną na stronie głównej 
przegląd zawiera także połączenie do Indeksu Marek, czyli alfabetycznego spisu
wszystkich producentów motocykli wymienionych w encyklopedii (patrz rysunek 23.13).
Rysunek 23.13.
Indeks Marek
Każda pozycja indeksu, jak możesz się spodziewać, jest połączeniem do pozycji danej
firmy w encyklopedii. Indeks ułatwia więc i usprawnia nawigację. Dodatkowe rozsze-
rzenie możliwości Indeksu marek zostało umieszczone w górnej części strony. Jest nim
lista połączeń Skocz do, pozwalająca czytelnikowi na błyskawiczne przejście do marek
o nazwach rozpoczynających się na konkretną literę, bez konieczności przewijania stro-
ny. Na przykład, klikając literę  O na liście Skocz do, użytkownik może przejść do od-
nośnika  O umieszczonego na stronie. Kolejne połączenie, umieszczone pod koniec
sekcji  O strony (identyczne do połączenia widocznego na końcu sekcji  A na rysun-
ku 23.13) pozwala użytkownikowi wrócić na sam początek strony, gdzie może wybrać
kolejną literę.
Cechy zaprezentowanej witryny i szczegóły projektowe
Chyba najmocniejszym punktem tej encyklopedii jest jej strona główna pełniąca rolę
strony przeglądowej. W wielu wypadkach encyklopedie sieciowe tego rodzaju udostęp-
niają połączenia do każdej litery alfabetu i na tym poprzestają. Jeśli w takiej encyklopedii
Rozdział 23. Przykłady dobrych i złych stron WWW 691
chciałbyś poczytać o firmie Norton, musiałbyś wybrać literę N jako połączenie, a na-
stępnie przewijać zawartość, aż do znalezienia hasła. Udostępniając połączenia do bar-
dziej popularnych producentów motocykli już na stronie przeglądowej, autor strony
wyposaża czytelnika w narzędzie szybkiego przemieszczania, które redukuje czas tra-
cony na przewijanie strony i przenosi zainteresowanego od razu we właściwe miejsce.
Dołączenie Indeksu Marek to także bardzo ładny gest wobec czytelnika. Indeks umoż-
liwia bowiem bezpośrednie przechodzenie do wskazanych miejsc, będących pozycjami
encyklopedii. Strona przeglądowa daje czytelnikom kilka sposobów znajdowania in-
formacji.
Struktura samej encyklopedii jest luz
na, co ułatwia czytelnikom przenoszenie się w do-
wolne miejsca, podążanie wzdłuż połączeń, zdobywanie informacji, odkrywanie połą-
czeń między motocyklami, firmami a historią motoryzacji  przypuszczam, że w przy-
padku tradycyjnej encyklopedii byłoby to trudniejsze. Co więcej, dzięki zewnętrznym
względem stron plikom multimedialnym, autor tej prezentacji WWW nie tylko daje
jednakowe szanse posiadaczom przeglądarek graficznych i tekstowych, ale także nie
dopuszcza do rozrastania się stron, co przyspiesza proces ładowania.
Zauważ również, że każda ze stron poświęcona konkretnej marce (na przykład, strony
Nortona i BSA przedstawione na rysunkach 23.10 oraz 23.12) wyposażona jest w połą-
czenie powrotne do strony przeglądowej. Gdyby połączeń było więcej, strona byłaby
przeładowana i wyglądałaby brzydko. Jednak jedyną bezpośrednią możliwością nawi-
gacyjną jest przejście na stronę przeglądową lub od indeksu marek. Umieszczenie na
stronie tych dwóch połączeń sprawia, że użytkownik może szybko i łatwo powrócić na
główny poziom encyklopedii i opuścić ją.
Najważniejszą kwestią w przypadku przygotowywania tego typu prezentacji jest konfi-
guracja i obsługa. W zależności od ilości materiału, którym dysponujesz, zadanie zago-
spodarowania go w całości (czy będzie to tyle plików, ile liter w alfabecie? może wię-
cej? a może mniej?) i utworzenia połączeń dla wszystkich odnośników do zewnętrznych
plików multimedialnych, może być rzeczywiście przerażające. Szczęśliwie się składa,
że prezentacja tego typu nie musi być często aktualizowana, tak więc najtrudniej jest
skonfigurować całość, a póz
niejsza obsługa to drobiazg. Być może, w ramach kompro-
misu, połączysz opisy wszystkich marek, których nazwy rozpoczynają się na tę samą li-
terę i o jakich nie ma wielu informacji oraz zapiszesz je na jednej stronie (na przykład
b.html). Jednocześnie prezentacje marek, o których podano więcej informacji, takie jak
Norton, możesz pozostawić na niezależnych stronach.
W każdym przypadku, tworzenie wszystkich połączeń ze stronami WWW oraz dodat-
kowymi plikami multimedialnymi może być długotrwałym i zniechęcającym zadaniem.
Na szczęście witryny tego typu nie muszą być często aktualizowane, a zatem, po wyko-
naniu początkowej pracy, ich utrzymanie nie będzie trudne. Aby dodać nowe informa-
cje, wystarczy umieścić je w odpowiednim miejscu, dodać kilka połączeń wskazujących
na nie oraz na pozostałe główne strony witryny i to wszystko.
692 Część 8. Projektowanie efektywnych stron WWW
Przykład 3. Katalog wysyłkowy
Ogród ziół i przypraw jest komercyjnym ośrodkiem specjalizującym się w uprawie
i sprzedaży ziół, przypraw oraz aromatycznych ziół przeznaczonych dla ozdoby ogrodu
oraz do celów kulinarnych. Oferuje on ponad 120 gatunków rośli, książki oraz inne ma-
teriały. Strona główna witryny Ogrodu Ziół i Przypraw została przedstawiona na rysun-
ku 23.14.
Rysunek 23.14.
Strona domowa witryny
Ogród ziół i przypraw
Także autorzy tej strony wykorzystali kaskadowe arkusze stylów w celu określenia ko-
lorów tła i połączeń. Nazwa firmy pojawia się w tytule na każdej stronie witryny oraz
w formie graficznego logo, wyświetlanego na samej górze każdej ze stron witryny. Au-
torzy zdecydowali się umieścić połączenia do głównych stron witryny na początku każ-
dej z nich. Dzięki temu użytkownicy nie muszą przewijać stron aż do końca, aby
przejść do innego dokumentu. Pasek nawigacyjny zapewnia dostęp do najbardziej przy-
datnych stron witryny, strony głównej, katalogu, strony z informacjami o sposobie za-
mawiania produktów oraz formularza zamówień.
Na stronie głównej zostały umieszczone połączenia umożliwiające przeglądnięcie kata-
logu, przejrzenie informacji dotyczących zamawiania produktów oraz dokonanie za-
mówienia rośliny lub innego produktu znajdującego się w ofercie firmy.
Rozdział 23. Przykłady dobrych i złych stron WWW 693
Przeglądanie katalogu
Wybór połączenia Przejrzyj nasz katalog powoduje wyświetlenie strony zawierającej
kolejne połączenia umożliwiające wybór jednego z kilku sposobów przeglądania kata-
logu produktów firmy (patrz rysunek 23.15).
Rysunek 23.15.
Jak przeglądać katalog
Udostępniając kilka różnych sposobów prezentacji katalogu, autorzy witryny wychodzą
naprzeciw różnym typom klientów. Dla osób znających zioła i przyprawy, które chcą
tylko przejrzeć dostępne produkty, najbardziej odpowiedni będzie indeks alfabetyczny.
Osoby poszukujące żywych sadzonek ziół do swego ogródka, które jednak nie wiedzą,
jakie zioła chciałyby zakupić, mogą przejrzeć katalog tematyczny. W końcu osoby, któ-
re nie znają lub nie zaprzątają sobie głowy nazwami, a poszukują jedynie atrakcyjnych
roślin, mogą skorzystać z galerii obrazów.
694 Część 8. Projektowanie efektywnych stron WWW
Połączenia alfabetyczne (A  F, G  R oraz S  Z) powodują wyświetlenie stron zawie-
rających alfabetyczne listy roślin, które można zamówić. Na rysunku 23.16 przedsta-
wiony został przykład strony zawierającej taką alfabetyczną listę roślin. W tym przy-
padku jest to lista roślin o nazwach zaczynających się od liter G  R.
Rysunek 23.16.
Katalog alfabetyczny od
G  R
W tym przykładzie nie wszystkie pozycje przedstawionej listy są połączeniami. Załóż-
my jednak, że każda z nich jest łączem do strony zawierającej więcej informacji o kon-
kretnym ziole, przyprawie bądz
warzywie. Jeśli użytkownik wybierz połączenie Liście
laurowe (które zostało utworzone na stronie z rysunku 23.16), to w przeglądarce zosta-
nie wyświetlona strona ze szczegółowymi informacjami na temat wybranego produktu.
Przykład takiej strony został przedstawiony na rysunku 23.17.
Każda strona produktu zawiera niewielkie zdjęcie rośliny (w tym przypadku, dla celów
prezentacji, został zastosowany rysunek, a nie zdjęcie). Obok zdjęcia umieszczona jest
Rozdział 23. Przykłady dobrych i złych stron WWW 695
Rysunek 23.17.
Strona
konkretnego produktu
polska oraz łacińska (lub naukowa) nazwa zioła. Poniżej został umieszczony opis typo-
wych jego zastosowań, smaku oraz inne przydatne informacje. Na końcu strony, w for-
mie listy, zostały przedstawione dostępne sposoby zakupu rośliny oraz jej ceny.
Innym sposobem prezentacji katalogu (dostępnym z poziomu strony Przeglądanie kata-
logu) są strony grupujące produkty ze względu na kategorie. Wybór jednego z połączeń
umieszczonego w sekcji Według kategorii strony Przeglądanie katalogu, powoduje wy-
świetlenie kolejnej strony z listą produktów. W tym przypadku, jeśli użytkownik wybie-
rze kategorię Zioła, to w przeglądarce zostanie wyświetlona strona widoczna na rysun-
ku 23.18.
Wybór kategorii Zioła spowoduje wyświetlenie strony z listą wszystkich dostępnych
ziół. Także w tym przypadku poszczególne opcje tej listy powinne być połączeniami,
które umożliwiają wyświetlenie strony poświęconej konkretnej roślinie, takiej jak stro-
na przedstawiona na rysunku 23.17. Ze stron grupujących produkty firmy ze względu
na kategorie użytkownik może wrócić na stronę Przeglądanie katalogu, gdzie jest do-
stępy jeszcze jeden sposób poznania produktów firmy  galeria fotografii.
696 Część 8. Projektowanie efektywnych stron WWW
Rysunek 23.18.
Produkty
według kategorii
Galeria ta pozwala użytkownikom na wybór wielu roślin hodowanych w firmie na pod-
stawie zamieszczonych zdjęć, dzięki czemu nie trzeba znać ich nazw. Jeśli osoba prze-
glądająca katalog poszukuje rośliny, którą widziała w ogrodzie znajomego, lecz nie pa-
mięta jej nazwy, to galeria fotografii jest doskonałym miejscem poszukiwań.
Oczywiście możliwość ta będzie dostępna wyłącznie dla osób używających przegląda-
rek graficznych, jednak stanowi doskonały sposób poszukiwania interesujących roślin.
Strona galerii fotografii (przedstawiona na rysunku 23.19) zawiera grupę ikon, z któ-
rych każda jest łączem umożliwiającym wyświetlenie większego zdjęcia zapisanego
w formacie JPEG. Tekstowy opis umieszczony pod każdą z ikon umożliwia przejście
do strony poświęconej konkretnej roślinie.
Zamawianie
Gdy użytkownicy skończą już przeglądanie katalogu i wybiorą rośliny, które chcą za-
mówić, mogą przejść na stronę Jak zamawiać, gdzie dowiedzą się, w jaki sposób mogą
złożyć zamówienie.
Rozdział 23. Przykłady dobrych i złych stron WWW 697
Rysunek 23.19.
Galeria fotografii
Strona służąca do zamawiania produktów firmy zawiera wyłącznie informacje tekstowe
(patrz rysunek 23.20). Można na niej znalez
ć informacje, gdzie zadzwonić, aby złożyć
zamówienie telefonicznie, gdzie wysłać czek, tabelę kosztów wysyłki oraz inne informacje.
W sekcji strony poświęconej zamówieniom pocztowym znajduje się połączenie z for-
mularzem zamówienia. Formularz ten można stworzyć na kilka różnych sposobów. Jeśli
nie masz ochoty zawracać sobie głowy tworzeniem formularza HTML i pisaniem pro-
cedur jego obsługi, możesz stworzyć zwyczajny plik tekstowy zawierający szablon
formularza. Użytkownicy mogą skopiować ten plik lub wyświetlić go w przeglądarce,
co pokazałam na rysunku 23.21. Następnie mogą wydrukować formularz, wypełnić jego
pola i przesłać na adres firmy.
698 Część 8. Projektowanie efektywnych stron WWW
Rysunek 23.20.
Zamawianie roślin
Są także inne sposoby udostępnienia zewnętrznych wersji tego do dokumentu, na przy-
kład, możesz stworzyć wersję formularza zapisaną w formacie postscript, plik Adobe
Acrobat Reader (z rozszerzeniem .PDF) a nawet wersję dokumentu stworzoną w jed-
nym z popularnych edytorów, takich jak Microsoft Word lub Word Perfect. Wystarczy
zapisać te pliki na witrynie podobnie jak zwyczajne dokumenty HTML, a na stronie
WWW umieścić połączenia do tych plików. Po kliknięciu takiego połączenia, jeśli
użytkownik nie ma odpowiedniej przeglądarki lub programu dodatkowego umożliwia-
jącego wyświetlenie pliku w przeglądarce WWW, to zostanie on poproszony o zapisa-
nie pliku na dysku.
Rozdział 23. Przykłady dobrych i złych stron WWW 699
Rysunek 23.21.
Tekstowy
formularz zamówienia
Można także zaprojektować formularz zamówienia w formie HTML, którego przykła-
dową postać przedstawiłam na rysunku 23.22.
To rozwiązanie może nie być tak proste, jak się wydaje, gdyż wymaga rozważenia kilku
spraw:
jeśli umożliwiasz składanie zamówień za pośrednictwem stron WWW, musisz mieć
świadomość, że wielu użytkowników, ze względów bezpieczeństwa, bardzo obawia
się podawania numerów kart kredytowych. W takim przypadku najlepszym
rozwiązaniem może być umieszczenie katalogu na bezpiecznym serwerze,
zabezpieczającym informacje podawane przez użytkownika;
jeśli Twój katalog nie został umieszczony na bezpiecznym serwerze, to nie zapomnij
poinformować o tym klientów i udostępnić inne metody składania zamówień. Podaj
numer telefonu, pod którym można zamówić lub tekstową wersję formularza
podobną do tej, pokazanej na rysunku 23.21. Dzięki temu klienci będą mogli użyć
jednej z tradycyjnych metod składania zamówień;
700 Część 8. Projektowanie efektywnych stron WWW
Rysunek 23.22.
Strona z formularzem
zamówienia
Rozdział 23. Przykłady dobrych i złych stron WWW 701
inną metodą jest umieszczenie na formularzu zamówienia w wersji HTML
wszystkich informacji z wyjątkiem numeru karty kredytowej. Po otrzymaniu
zamówienia, możesz przesyłać klientowi potwierdzenie pocztą elektroniczną.
Nie zapomnij umieścić na nim numeru zamówienia oraz numeru telefonu, pod jaki
klient powinien zadzwonić, by podać informacje konieczne do rozliczenia;
czy chcesz automatycznie dodawać nadesłane zamówienia do bazy danych? Jest
to możliwe, lecz wymaga użycia zaawansowanych rozwiązań programistycznych
oraz znajomości struktury bazy danych, jak i innych technologii, które nie będą
omawiane w tej książce.
Powracając do witryny, zauważ, iż trzecie połączenie umieszczone na stronie głównej
umożliwia bezpośrednie wyświetlenie formularza zamówienia. Zostało umieszczone
w tym miejscu, aby klienci, którzy wielokrotnie korzystają z usług firmy, nie musieli
przechodzić przez wszystkie dodatkowe strony z informacjami o sposobie zamawiania,
opłatach i kosztach przesyłki.
Cechy zaprezentowanej witryny i szczegóły projektowe
Cel wszystkich sklepów internetowych jest taki sam, pozwolić czytelnikowi przejrzeć
proponowane towary i umożliwić złożenie zamówienia. Organizując proces przegląda-
nia, trzeba wziąć pod uwagę dwie kwestie. Pierwsza wiąże się z obsługą klientów, któ-
rzy zdecydowani są na określony produkt  czy można znalez
ć go szybko i bez trudu?
Druga  to obsługa klientów niezdecydowanych, którzy chcą obejrzeć różne produkty,
by znalez
ć coś interesującego.
Mogłoby się wydawać, że obie kwestie są sprzeczne, jednakże w przedstawionym przy-
kładzie zostały one rozwiązane wyjątkowo dobrze, dzięki zastosowaniu kilku sposobów
przeglądania katalogu. Każdy ze sposobów wprowadza poziom pośredni (jest to dodat-
kowe menu łączące stronę główną z zawartością samego katalogu), ale rozgałęzienie
przez niego powodowane pomaga różnym grupom klientów załatwiać swoje sprawy.
Jednak w konstrukcji całej witryny celowo pozostawiłam pewne braki, abyś mógł po-
prawić możliwości poruszania się po niej. Na przykład, przeglądanie katalogu produk-
tów można by ułatwić, dodając osobne menu dla każdego ze sposobów prezentacji
katalogu. Przypomnij sobie pierwszy przykład przedstawiony w tym rozdziale, w któ-
rym na stronie głównej został umieszczony pasek nawigacyjny z połączeniami do
głównych stron witryny (patrz rysunek 23.1). Jednak po przejściu do działu informacji
technicznych, umieszczone w nim strony zawierały pasek nawigacyjny z połączeniami
do strony głównej oraz innych stron tego samego działu (patrz rysunek 23.3.). Zastoso-
wanie podobnego systemu nawigacyjnego w ogromny sposób ułatwiłoby korzystanie
z katalogu produktów witryny Ogród ziół i przypraw.
Co więcej, najważniejsza rzeczą, jaką firma chce osiągnąć dzięki swej witrynie WWW,
jest powiększenie sprzedaży. W jaki sposób można usprawnić poruszanie się po witry-
nie, aby osiągnąć ten cel? Najlepszym rozwiązaniem jest umieszczenie połączenia do
stron Jak zamawiać oraz Formularz zamówienia na stronie zawierającej informacje o
konkretnym produkcie. Kiedy użytkownik wyświetli stronę poświęconą Liściom lauro-
702 Część 8. Projektowanie efektywnych stron WWW
wym (przedstawioną na rysunku 23.17) i zdecyduje się je zamówić, to może już zapo-
mnieć, że formularz zamówienia wyświetlany był za pośrednictwem połączenia umiesz-
czonego na stronie Jak zamawiać. Dlatego umieść połączenie do formularza bezpośred-
nio poniżej informacji o cenach konkretnego produktu. Wystarczy jedno kliknięcie i zdo-
będziesz następnego klienta.
Chyba najtrudniejszym zadaniem w przypadku takiego układu stron WWW jest obsługa
samego katalogu, a szczególnie wówczas, gdy konieczne jest dodawanie i usuwanie po-
zycji lub zmiana cen. Gdyby szkółka korzystała tylko z katalogu alfabetycznego, nie
byłoby tak z
le, bowiem zmiany można wprowadzać bezpośrednio w plikach katalogu.
Jednak z powodu istnienia dodatkowych sposobów przeglądania katalogu i połączeń
pomiędzy nimi, obsługa całości staje się znacznie trudniejsza.
W idealnym przypadku, tego typu informacje powinny być przechowywane raczej
w bazie danych, a nie w plikach HTML. Bazy danych służą właśnie do tego. Mogą one
także na życzenie prezentować dane na różne sposoby. Ale jak połączyć bazę danych ze
stroną WWW?
Dysponując wystarczającymi umiejętnościami programistycznymi (oraz znajomością
zagadnień obsługi baz danych), mógłbyś stworzyć program przeszukujący bazę i zwra-
cający atrakcyjnie sformatowaną listę produktów. Dzięki temu, gdy osoba przeglądająca
witrynę zażąda wyświetlenia alfabetycznej listy produktów, na stronie zostałaby auto-
matycznie wygenerowana taka lista, zawierająca aktualne informacje pobrane z bazy
danych. Jednak do zaimplementowania takiego rozwiązania będzie Ci potrzebna baza
danych, z którą będziesz mógł wymieniać informacje oraz serwer WWW, który w za-
leżności od systemu operacyjnego, może, lecz nie musi być techniczne przystosowany
do korzystania z takich baz. Będziesz także potrzebował umiejętności programowania,
które umożliwią realizację takiego rozwiązania w oparciu o zaawansowane technologie,
takie jak CGI, Java, JavaScript, VBScript, Dynamiczny HTML, itp. Niestety, są to za-
gadnienia bardzo szerokie i wykraczają poza ramy tematyczne niniejszej książki. Wię-
cej informacji na ich temat możesz znalez
ć w książkach, takich jak JavaScript Księga
eksperta autorstwa Danny ego Goodmana, Java 1.1 autorstwa Laury Lemay oraz Char-
lesa L. Perkinsa oraz Java  aplikacje bazodanowe autorstwa Michała Grochala,
wszystkie wydane przez Wydawnictwo HELION
Alternatywne rozwiązanie to przechowywanie danych w bazie danych, a następnie
przerzucanie ich do tekstu i konwertowanie do formatu HTML. Oczywiście podstawo-
wa trudność tego rozwiązania to nakłady pracy na każdorazowe dokonanie konwersji,
przy zachowaniu połączeń z innymi stronami. Czy proces ten mógłby zostać zautoma-
tyzowany? Ile czasu dziennie należałoby poświęcić na konfigurację i obsługę procesu?
W przypadku tego rodzaju aplikacji mogą pojawić się takie właśnie pytania i wyzwania,
z którymi, tworząc własną prezentację, będziesz musiał się zmierzyć. Czasami samo
projektowanie, pisanie i formatowanie informacji na ekranie to nie wszystko.
Rozdział 23. Przykłady dobrych i złych stron WWW 703
Podsumowanie
Zaprezentowałam tutaj jedynie kilka pomysłów stosowania i budowania struktur stron
WWW. Projektując własne strony, możesz jednak modyfikować je do woli.
Najlepszym sposobem znalezienia takiego rodzaju stron WWW, który odpowiadałby Ci
pod względem zaprojektowania i organizacji jest wędrówka po sieci i przeglądanie jej
zawartości. Przeglądając, staraj się jednak, niezależnie od podziwiania samego układu
i projektu strony, analizować rozwiązania strukturalne, z których inni korzystają, by or-
ganizować swoje strony (wielu użytkowników wcale nie myśli o tych aspektach two-
rzenia stron WWW, stąd tyle marnych stron w sieci). Przyglądaj się innym stronom kry-
tycznie  czy nawigacja w ich obrębie jest prosta? Czy można się zagubić? Jak
rozwiązana jest kwestia powrotu z dowolnego miejsca prezentacji do znanej strony? Je-
śli znasz cel danej prezentacji, to czy można go osiągnąć? A jeśli nie, jakie zmiany re-
organizacyjne mogłyby pomóc?
Uczenie się na błędach innych i analizowanie cudzych rozwiązań może pomóc Ci
w tworzeniu lepszych stron.
Warsztat
Mam nadzieję, że w tym rozdziale dowiedziałeś się kilku rzeczy, które pomogą Ci po-
prawić atrakcyjność oraz funkcjonalność tworzonych stron WWW. W tej części roz-
działu znajdziesz pytania i odpowiedzi oraz quiz dotyczący niektórych, najważniejszych
zagadnień omawianych w tym rozdziale.
Pytania i odpowiedzi
P. Te prezentacje WWW są naprawdę wspaniałe. Jakie są ich adresy URL?
O. Jak wspomniałam na początku tego rozdziału, opisywane tutaj prezentacje (znaj-
dziesz je na dołączonym do książki CD-ROM-ie) są jedynie modelami potencjalnie
istniejących witryn WWW i nie istnieją w rzeczywistości w sieci. Natomiast wiele
pomysłów dotyczących projektów i organizacji materiału zostało zainspirowanych
przez rzeczywiste rozwiązania.
P. We wszystkich zaprezentowanych tu przykładach stosowana jest organizacja
hierarchiczna. Czy jest ona tak popularna i należy z niej korzystać? Nie mogę
stosować czegoś innego?
O. Układ hierarchiczny jest niezwykle popularny w Internecie. Nie jest zły. Jest to
wspaniały sposób organizowania zawartości, szczególnie wtedy, gdy z natury swojej
ma ona charakter hierarchiczny.
704 Część 8. Projektowanie efektywnych stron WWW
Oczywiście, że możesz swoją prezentację zorganizować w inny sposób, na przykład,
wykorzystać układy ramek przedstawione w rozdziale 12.   Ramki i okna połą-
czone . Jednak prostota układów hierarchicznych sprawia, iż można je łatwo struk-
turalizować, utrzymywać i poruszać się po nich. Po co sobie i czytelnikom stwarzać
kłopoty, narzucając złożoną strukturę na skądinąd proste informacje.
Quiz
1. Podaj kilka sposobów ułatwiających poruszanie się po witrynie WWW.
2. Co można zrobić, aby osoby przeglądające witrynę WWW nie  gubiły się na niej?
3. Co przysparza największych problemów podczas tworzenia witryn zawierających
bardzo dużo informacji, takich jak internetowe encyklopedie?
4. Jakie są zalety udostępnienia kilku sposobów przeglądania internetowych katalogów
wysyłkowych?
5. Na jakie zagadnienia należy zwrócić szczególną uwagę podczas zbierania zamówień
na produkty za pośrednictwem WWW?
Odpowiedzi
1. Jednym z nich jest udostępnienie paska nawigacyjnego zawierającego połączenia
do wszystkich głównych stron witryny. Kolejne paski nawigacyjne można
zaprojektować dla poszczególnych działów witryny. W celu zachowania spójności
najlepiej jest umieszczać je w tym samym miejscu każdej ze stron. Paski
nawigacyjne można umieszczać na górze, u dołu lub przy lewej krawędzi stron WWW
(w tych miejscach są one najczęściej umieszczane). Strony z najczęściej
zadawanymi pytaniami, z najnowszymi wydarzeniami oraz spis treści to miejsca,
które najlepiej nadają się do umieszczenia łączy do innych stron witryny.
2. Ogólnie rzecz biorąc, warto ściśle przestrzegać hierarchicznej struktury witryny
i unikać wykorzystywania połączeń omijających tę strukturę. Dzięki temu osoby
przeglądające witrynę łatwiej będą mogły określić, w jakim jej miejscu się znajdują.
3. Najwięcej problemów przy tworzeniu witryny zawierającej bardzo dużo informacji
stwarza opracowanie jej struktury, a następnie jej pielęgnacja. Najtrudniejszym
zadaniem jest określenie sposobu organizacji prezentowanych informacji, natomiast
stworzenie wzajemnych połączeń pomiędzy stronami oraz innymi plikami
multimedialnymi może być bardzo czasochłonne. Informacje prezentowane
na witrynach typu internetowych encyklopedii nie zmieniają się bardzo często,
dzięki czemu pielęgnacja takich witryn nie jest wyjątkowo kosztowna.
4. Udostępnienie kilku sposobów prezentacji zawartości katalogu (na przykład, według
typu produktu, jego numeru, wyglądu, nazwy, itp.) ułatwia klientom odnalezienie
poszukiwanego produktu. Najbardziej logicznym sposobem rozpoczęcia organizacji
katalogu jest stworzenie podziału ze względu na kategorie. Jeśli klienci dobrze znają
oferowane produkty, to niewątpliwie docenią zalety, jakie daje przeszukiwanie
katalogu według nazwy lub numeru produktu. Inni użytkownicy mogą preferować
poszukiwanie produktu na podstawie jego wyglądu (koloru, wielkości, itp.).
Rozdział 23. Przykłady dobrych i złych stron WWW 705
5. Najważniejszym zagadnieniem przy odbieraniu zamówień za pośrednictwem WWW
jest zapewnienie odpowiednich środków bezpieczeństwa. Wielu użytkowników
nie lubi podawać numerów swoich kart kredytowych na stronach WWW. A zatem
nie powinieneś zapomnieć o udostępnieniu innych sposobów składania zamówień;
postaraj się także umieścić formularz zamówienia na bezpiecznym serwerze.
Ćwiczenia
1. Bazując na przykładzie Encyklopedii motocykli, zaplanuj i stwórz układ ramek
składający się z dwóch lub trzech ramek. W jaki sposób mógłbyś stworzyć interfejs
ułatwiający użytkownikom poruszanie się po różnych działach witryny?
2. Niektóre podpowiedzi dotyczące sposobów nawigacji oraz projektu stron, możesz
wykorzystać przy tworzeniu własnej witryny. Dobrym przykładem zastosowania
pasków nawigacyjnych oraz łączenia stron WWW jest witryna Firmy Fuszerka
przedstawiona w tym rozdziale. Część rozdziału prezentująca Encyklopedię
motocykli zawiera dobre porady dotyczące łączenia stron związanych ze sobą
tematycznie, umieszczania na nich obrazów oraz dołączania plików
multimedialnych. Witrynę tę możesz wykorzystać jako wzór przy tworzeniu swojej
własnej witryny WWW.
706 Część 8. Projektowanie efektywnych stron WWW