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:

• szkic strony głównej firmy,

• encyklopedia motocykli — zawiera obrazy, sekwencje dź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ć ź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.

Rysunek 23.1. Strona główna firmy Fuszerka

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.

Rysunek 23.2. Strona „Co nowego w firmie”

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.

Rysunek 23.3. Wszystko na temat zbioru wełny alpak
Rysunek 23.4. Dział informacji technicznych

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.

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

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

Rysunek 23.7. Strona Wsparcie dla produktów
Rysunek 23.8. Strona Możliwości pracy

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

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

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

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

Rysunek 23.12. Informacje o firmie BSA

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

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 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żliwia bowiem bezpośrednie przechodzenie do wskazanych miejsc, będących pozycja­mi encyklo­pedii. Strona przeglądowa daje 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.

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

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

Połączenia alfabetyczne (A - F, G - R oraz S - Z) powodują wyświetlenie stron zawierających alfabetyczne listy roślin, które można zamówić. Na rysunku 23.16 przedstawiony został przykład strony zawierającej taką alfabetyczną listę roślin. W tym przypadku 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 konkretnym ziole, przyprawie bądź 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 zostanie 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


Rysunek 23.17. Strona konkretnego produktu

polska oraz łacińska (lub naukowa) nazwa zioła. Poniżej został umieszczony opis typowych jego zastosowań, smaku oraz inne przydatne informacje. Na końcu strony, w formie listy, zostały przedstawione dostępne sposoby zakupu rośliny oraz jej ceny.

Innym sposobem prezentacji katalogu (dostępnym z poziomu strony Przeglądanie katalogu) 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żytkow­nik wybierze kategorię Zioła, to w przeglądarce zostanie wyświetlona strona widoczna na rysunku 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 strona 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 dostępy jeszcze jeden sposób poznania produktów firmy — galeria fotografii.

Rysunek 23.18. Produkty według kategorii

Galeria ta pozwala użytkownikom na wybór wielu roślin hodowanych w firmie na podstawie zamieszczonych zdjęć, dzięki czemu nie trzeba znać ich nazw. Jeśli osoba przeglądająca katalog poszukuje rośliny, którą widziała w ogrodzie znajomego, lecz nie pamię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ądarek 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ą zamówić, mogą przejść na stronę Jak zamawiać, gdzie dowiedzą się, w jaki sposób mogą złożyć zamówienie.

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 znaleźć 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 formularzem 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 procedur 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.

Rysunek 23.20. Zamawianie roślin

Są także inne sposoby udostępnienia zewnętrznych wersji tego do dokumentu, na przykład, możesz stworzyć wersję formularza zapisaną w formacie postscript, plik Adobe Acrobat Reader (z rozszerzeniem .PDF) a nawet wersję dokumentu stworzoną w jednym 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żliwiającego wyświetlenie pliku w przeglądarce WWW, to zostanie on poproszony o zapisanie pliku na dysku.

Rysunek 23.21. Tekstowy formularz zamówienia

Można także zaprojektować formularz zamówienia w formie HTML, którego przykładową 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ń;

Rysunek 23.22. Strona z formularzem zamówienia

• 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ądania, 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 znaleźć go szybko i bez trudu? Druga — to obsługa klientów niezdecydowanych, którzy chcą obejrzeć różne produkty, by znaleźć coś interesującego.

Mogłoby się wydawać, że obie kwestie są sprzeczne, jednakże w przedstawionym przykła­dzie zostały one rozwiązane wyjątkowo dobrze, dzięki zastosowaniu kilku sposobów prze­glądania katalogu. Każdy ze sposobów wprowadza poziom pośredni (jest to dodatkowe 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ł poprawić możliwości poruszania się po niej. Na przykład, przeglądanie katalogu produktó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.). Zastosowanie 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 witrynie, 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 laurowym (przedstawioną na rysunku 23.17) i zdecyduje się je zamówić, to może już zapomnieć, ż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 pozycji lub zmiana cen. Gdyby szkółka korzystała tylko z katalogu alfabetycznego, nie byłoby tak źle, bowiem zmiany można wprowadzać bezpośrednio w plikach katalogu. Jednak z powo­du istnienia dodatkowych sposobów przeglądania katalogu i połączeń pomiędzy ni­mi, ob­sł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 zwracają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 automatycznie 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 zależ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 zagadnienia bardzo szerokie i wykraczają poza ramy tematyczne niniejszej książki. Więcej informacji na ich temat możesz znaleźć w książkach, takich jak JavaScript Księga eksperta autorstwa Danny'ego Goodmana, Java 1.1 autorstwa Laury Lemay oraz Charlesa 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 przerzu­canie ich do tekstu i konwertowanie do formatu HTML. Oczywiście podstawowa 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ć zautomatyzowany? 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.

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 organizować swoje strony (wielu użytkowników wcale nie myśli o tych aspektach tworzenia stron WWW, stąd tyle marnych stron w sieci). Przyglądaj się innym stronom krytycznie — 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 reorganizacyjne mogłyby pomóc?

Uczenie się na błędach innych i analizowanie cudzych rozwiązań może pomóc Ci w two­rze­niu lepszych stron.

Warsztat

Mam nadzieję, że w tym rozdziale dowiedziałeś się kilku rzeczy, które pomogą Ci poprawić atrakcyjność oraz funkcjonalność tworzonych stron WWW. W tej części rozdział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 (znajdziesz 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 korzys­tać? 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.

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 strukturalizować, 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.).

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

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

---