Rozdział 23. u Przykłady dobrych i złych stron WWW              705

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ązywania 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.

n   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.

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.

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 rysunek 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 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ącego dany problem 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 przypadku 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 czytelnik docierał z danej strony (Co nowego w firmie) do kolejnej (Informacje techniczne) bocznymi 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 rysunek 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 rysunku 23.10 pokazana jest pozycja omawiająca markę Norton). Pozycje zawierają informacje o firmie i modelach motocykli 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 ostatnim akapicie nazwę BSA, przeniesiony zostaniesz do pozycji BSA (patrz rysunek 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 producentów motocykli wymienionych w encyklopedii (patrz rysunek 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 przenosi zainteresowanego od razu we właściwe miejsce.

Dołączenie Indeksu Marek to także bardzo ładny gest wobec czytelnika. Indeks umoż...