393

12

              Przykłady dobrych i złych stron WWW

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ła­dem przedstawiania danego rodzaju informacji, albo prezentuje specyficzną metodę rozwiązy­wania problemów, na które możesz natrafić, tworząc własne strony. Oto tematyka rozdziału:

n               szkic strony głównej firmy,

n               encyklopedia motocykli — zawiera obrazy, sekwencje dźwiękowe i inne sekwencje multimedialne,

n               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ć ź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 rys. 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.

Na tej prostej i bezpretensjonalnej stronie głównej klient może wybrać z listy połączeń stro­nę, 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 regular­nie. Pozwalają one Twoim czytelnikom szybko i bez szukania znaleźć nowe infor­macje o witrynie.

Pierwszą pozycją przedstawioną na stronie Co nowego w firmie Fuszerka, jest informacja o wystąpieniu szefa laboratorium badawczego firmy na konferencji naukowej. W notce umieszczone jest połączenie prowadzące do prezentowanego referatu (patrz rys. 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łównych 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 nawigacyjnym.

Stronę główną witryny już odwiedziłeś, a zatem przejdźmy dalej, do strony z informacjami technicznymi.

Informacje techniczne

Strona Informacje techniczne (patrz rys. 23.4) prezentuje listę publikac­ji, 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ącego dany prob­lem techniczny.

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 dodatkowe 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

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 katalogowymi (podobnymi do tych, które przedstawię w dalszej części rozdziału, w przykładzie Katalogu Wysyłkowego). Te strony doskonale nadają się na umieszczenie zdjęć, opisów oraz informacji o cenie poszczególnych produktów wytwarzanych w firmie. Strona Produkty została przedstawiona na rysunku 23.6.

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 obchodzenia się z produktami firmy Fuszerka. Mając to na uwadze, firma stworzyła stronę zawierają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ę dostępnych stanowisk pracy (jeśli takie są) oraz inne informacje dla osób szukających zatrudnienia w firmie.

Cechy zaprezentowanej witryny i szczegóły projekto­we

Przedstawiony szkic witryny firmy nie jest skomplikowany pod względem projektowym. Ma prostą strukturę hierarchiczną i zawiera menu nawigacyjne służące do przechodzenia do odpowiednich stron. Pasek nawigacyjny można umieścić także na początku 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 przy­padku klasycznej 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 czy­telnik docierał z danej strony (Co nowego w firmie) do kolejnej (Informacje techniczne) bocz­nymi drogami. Dzięki stworzeniu odmiennego paska nawigacyjnego, 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 odnaleźć drogę do wszystkich, 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 prze­cinające hierarchiczne granice i pozwalające czytelnikowi zaburzyć porządek, mogą 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 problem występu­jący w przypadku większości układów hipertekstowych, który określany jest mianem „zagu­bienia 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 ograni­czysz 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 jeden 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 wy­czerpujące wiadomości na temat motocykli i ich producentów. Niezależnie od informacji tekstowych na temat poszczególnych firm produkujących motocykle, encyklopedia zawiera fotografie, dźwięki (hałas silnika!) i sekwencje wideo dla wielu maszyn.

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 en­cyklopedii (patrz rys. 23.9).

Możliwe jest to na dwa sposoby, poprzez wybranie pierwszej litery lub marki motocykla.

Tak więc, aby dowiedzieć się czegoś na temat motocykla marki Norton, powinieneś wska­zać 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, wystarczy, że klik­niesz 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 rys. 23.10 pokazana jest pozycja omawiająca markę Norton). Pozycje zawierają informacje o firmie i modelach mo­tocykli produkowanych przez nią na przestrzeni lat.

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 multimedial­nych. 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 widać, iż są to informacje dodatkowe, choć ściśle związane z motocyklami firmy Norton. Lista ta zawiera połączenia do obrazów przedstawiających różne motocykle, klipów dź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 motocykla Norton, zapisanym w formacie GIF, spowoduje wyświetlenie animowanego obrazu GIF w przeglądarce (patrz rysunek 23.11).

Zauważ również, że ilekroć w tekście pojawia się nazwa którejś z firm, jest ona podstawą połączenia prowadzącego do odpowiadającej jej pozycji. Wybierając w ostat­nim akapicie nazwę BSA, przeniesiony zostaniesz do pozycji BSA (patrz rys. 23.12).

W ten sposób czytelnik może skakać od połączenia do połączenia, studiując dane poszcze­gólnych firm i docierać do informacji, które go interesują. Po znalezieniu szukanych 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 znaleźć drogę powrotną.

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 produ­centów motocykli wymienionych w encyklopedii (patrz rys. 23.13).

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 rozszerzenie 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 strony. Na przykład, klikając literę „O” na liście Skocz do, użytkownik może przejść do odnoś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 rysunku 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ępniają połą­czenia do każdej litery alfabetu i na tym poprzestają. Jeśli w takiej encyklopedii chciałbyś poczytać o firmie Norton, musiałbyś wybrać literę N jako połączenie, a następnie przewijać zawartość, aż do znalezienia hasła. Udostępniając połączenia do bardziej popularnych pro­ducentów motocykli już na stronie przeglądowej, autor strony wyposaża czytelnika w narzę­dzie szybkiego przemieszczania, które redukuje czas tracony na przewijanie strony i prze­nosi 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 pozycja­mi encyklo­pedii. Strona przeglądowa daje więc czytelnikom kilka sposobów znajdowania informacji.

Struktura samej encyklopedii jest luźna, co ułatwia czytelnikom przenoszenie się w dowolne miejsca, podążanie wzdłuż połączeń, zdobywanie informacji, odkrywanie połączeń między motocyklami, firmami a historią motoryzacji — przypuszczam, że w przypadku 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ą nawigacyjną 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 konfigu­racja i obsługa. W zależności od ilości materiału, którym dysponujesz, zadanie zagospoda­rowania 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 multi­medialnych, może być rzeczywiście przerażające. Szczęśliwie się składa, że prezen­tacja te­go typu nie musi być często aktualizowana, tak więc najtrudniej jest skonfigurować całość, a późniejsza obsługa to drobiazg. Być może, w ramach kompromisu, połączysz opisy wszystkich marek, których nazwy rozpoczynają się na tę samą literę 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 dodatkowymi 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 wykonaniu początkowej pracy, ich utrzymanie nie będzie trudne. Aby dodać nowe informacje, 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.

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 materiały. Strona główna witryny Ogrodu Ziół i Przypraw została przedstawiona na rysunku 23.14.

Także autorzy tej strony wykorzystali kaskadowe arkusze stylów w celu określenia koloró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. Autorzy 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 przydatnych stron witryny, strony głównej, katalogu, strony z informacjami o sposobie zamawiania produktów oraz formularza zamówień.

Na stronie głównej zostały umieszczone połączenia umożliwiające przeglądnięcie katalogu, przejrzenie informacji dotyczących zamawiania produktów oraz dokonanie zamówienia rośliny lub innego produktu znajdującego się w ofercie firmy.

...