Rozdział 2.
Grunt to organizacja

Gdy piszesz książkę, wypracowanie, artykuł czy nawet zwykłą notatkę, nigdy nie wygląda to w ten sposób, że zaczynasz od pierwszego zdania i piszesz jednym ciągiem, nie odrywając długopisu od kartki i zatrzymując się dopiero na końcu. To samo dotyczy wszelkich sztuk wizualnych — nikt nie maluje obrazów punkt po punkcie, zaczynając od lewego górnego, a kończąc na prawym dolnym rogu płótna.

Pisanie, rysowanie czy projektowanie przebiega znacznie lepiej, jeżeli rozpoczyna się je od wstępnego zaplanowania pracy, aby lepiej zorientować się w tym, co chce się zrobić i co chce się przez to osiągnąć, a także, aby zdobyć ogólne spojrzenie na całokształt planowanego przedsięwzięcia przed przystąpieniem do właściwych czynności.

Podobnie jak w przypadku tradycyjnych środków przekazu, proces tworzenia i projektowania stron WWW wymaga zaplanowania i przemyślenia, przed rozpoczęciem tekstowo-graficznych szaleństw i dzikiego hiperłączenia wszystkiego z wszystkim. Być może jest to nawet ważniejsze niż w przypadku innych mediów, bowiem próby narzucenia reguł tradycyjnego pisania czy projektowania do hipertekstu często owocują dokumentami, które są trudne do zrozumienia i poruszania się lub po prostu nie wykorzystują w żaden sposób ogromnych możliwości, tkwiących w hipertekście. Jeżeli grupa stron WWW jest nieumiejętnie zorganizowana, trudno wprowadzać do nich poprawki i rozszerzać ich zawartość.

W tym rozdziale pragnę zwrócić uwagę na kilka spraw, o których powinieneś pomyśleć, zanim przystąpisz do tworzenia stron WWW. Szczególną uwagę zwróć na:

• zapamiętanie różnic pomiędzy serwerem WWW, witryną WWW, stroną WWW i stroną główną,

• wybieranie informacji, które chciałbyś umieścić w Internecie,

• wyznaczenie celu, któremu witryna ma służyć,

• podzielenie zawartości na główne tematy,

• organizację ogólnej struktury stron i ich tematów.

Gdy będziesz miał już ogólny pomysł na strukturę swoich stron, będziesz gotów do rozpoczęcia ich tworzenia i projektowania, czym zajmiemy się w rozdziale 4. — „Zaczynamy od podstaw”. Jeżeli już nie możesz wytrzymać i bardzo chcesz zacząć, posłuchaj mojej rady i bądź cierpliwy. Jeszcze zdążysz nacieszyć się HTML-em.

Anatomia witryn WWW

Na początek wyjaśnię kilka pojęć, które będą używane w tej książce. Musisz doskonale rozumieć, co terminy te oznaczają i jakie jest ich znaczenie w kontekście tego, co będziesz tworzył w sieci WWW. Są to następujące pojęcia:

• witryna WWW — zbiór składający się z jednej lub kilku stron WWW,

• serwer WWW — komputer podłączony do Internetu lub intranetu, na którym przechowywana jest jedna lub kilka witryn WWW,

• strony WWW — pojedynczy element witryny, zapisany na dysku w formie pliku,

• strona główna — „wejściowa” strona witryny, która może zawierać połączenia do innych stron tej samej witryny.

Witryna WWW składa się z jednej lub wielu stron WWW powiązanych ze sobą w sposób, który odzwierciedla istotę zawartych w niej informacji i tworzy spójną całość (patrz rysunek 2.1).

Rysunek 2.1. Witryny i strony WWW
	Witryna WWW to zbiór składający się jednej lub wielu stron.

Każda witryna WWW znajduje się na określonym serwerze WWW, czyli na komputerze, który tę witrynę przechowuje i jest podłączony do Internetu. W pierwszych kilku rozdziałach tej książki nauczysz się tworzyć przemyślane i dobrze zaprojektowane witryny WWW. W dalszej części dowiesz się, jak opublikować witrynę na serwerze WWW.

Serwer WWW to system w Internecie, zawierający jedną lub więcej witryn WWW.

Strona WWW stanowi pojedynczy element witryny, tak jak strona stanowi pojedynczy element książki czy gazety (z tą różnicą, że strona papierowa ma długość ograniczoną wielkością kartki, natomiast długość strony WWW może być dowolna). Strony WWW są często nazywane również dokumentami WWW.

Oba te pojęcia odnoszą się do tego samego, strona WWW to pojedynczy, konkretnie nazwany plik, który jest pobierany z serwera i formatowany przez przeglądarkę.

Strona tworząca witrynę WWW jest pojedynczym elementem witryny WWW i zawarta jest w jednym pliku.

Pojęcia serwera, witryny i strony WWW są dość proste do zrozumienia, ale strona główna (home page) sprawia już troszkę więcej problemów, ma bowiem kilka różnych znaczeń.

Pierwsze skojarzenie, które nasuwa się w związku z pojęciem strony głównej przeciętnemu odbiorcy stron WWW, jest takie, iż strona główna to ta, która ładuje się automatycznie po uruchomieniu przeglądarki. W każdej przeglądarce jest zdefiniowana taka strona, zwykle jest to strona producenta przeglądarki (na przykład strona główna dla przeglądarki Netscape to strona wejściowa witryny firmy Netscape, dla przeglądarki Internet Explorer jest to strona firmy Microsoft). W każdej przeglądarce istnieje możliwość zmiany tej strony, można w jej miejsce wstawić dowolny adres. Często spotykaną praktyką jest podłączanie tu własnych, prostych stron, zawierających połączenia do często odwiedzanych miejsc.

Dla ludzi publikujących swoje strony w WWW, termin strona główna ma jednak zupełnie inne znaczenie, jest to bowiem również pierwsza strona witryny WWW. Jest to swego rodzaju brama, prowadząca do pozostałych stron, pierwsza rzecz, którą ujrzy czytelnik (patrz rysunek 2.2).

Rysunek 2.2. Strona główna

Strona główna zawiera zwykle krótki przegląd zawartości witryny, na przykład, w formie spisu treści lub zestawu ikon. Jeżeli witryna nie zawiera zbyt wiele treści, można zmieścić ją na tej jednej stronie, wtedy strona główna i witryna stają się tym samym.

Strona główna jest punktem wyjścia do pozostałej części witryny WWW.

Do czego właściwie chcesz wykorzystać WWW?

Pytanie to może wydawać się bezsensowne. Przecież nie kupowałbyś tej książki, gdybyś nie miał już jakiejś koncepcji tego, co chcesz pokazać użytkownikom WWW. Ale niewykluczone, że tak naprawdę nie wiesz, co chcesz pokazać lub też masz tylko ogólny, bliżej nie sprecyzowany pomysł. Być może szef nakazał Ci zaprojektowanie firmowej strony WWW, a ktoś inny wręczył tę książkę ze słowami: „Masz, to powinno jakoś pomóc”. A może zapragnąłeś stworzyć coś zbliżonego do strony, którą zobaczyłeś w sieci i która szczególnie przypadła Ci do gustu. To, co chcesz umieścić w sieci WWW, nazywane będzie w tej książce treścią. Treść to ogólne pojęcie, które określa tekst, grafikę, inne media oraz jakąkolwiek interakcję. Jeżeli opowiadasz komuś, o czym traktuje Twoja strona, opisujesz jej treść.

Treść to wszystko, co umieszczasz w sieci WWW. Informacje, opisy, obrazki, sztuka, programy, wykresy, gry, dowcipy — wszystko to jest treścią.

Jakie treści można umieszczać w sieci WWW? Mówiąc krótko, wszystkie. Oto kilka ogólnych tematów, które są obecnie popularne:

• informacje osobiste — możesz tworzyć strony, opisujące wszystkie sprawy związane z Twoją osobą, które mogłyby okazać się interesujące dla innych: zainteresowania, życiorys, zdjęcia, osiągnięcia;

• hobby i zainteresowania — strona WWW może zawierać informacje na konkretny temat, może być to hobby lub inna rzecz leżąca w kręgu Twoich zainteresowań, na przykład muzyka, „Star Trek”, motocykle, kultowe filmy, grzyby halucynogenne, antyczne kałamarze lub terminy najbliższych koncertów jazzowych w okolicy;

• publikacje — gazety, magazyny ilustrowane i inne media publikacyjne bardzo dobrze sprawdzają się w sieci WWW, gdzie nawet zyskują przewagę nad swoimi drukowanymi odpowiednikami; mogą być łatwiej i szybciej aktualizowane;

• witryny firm — na stronie WWW możesz umieścić informacje o tym, czym firma się zajmuje, gdzie znajduje się jej siedziba, oferty pracy, wyniki finansowe, informacje marketingowe, prezentacje produktów i dane osób, z którymi należy się kontaktować w różnych sprawach;

• dokumentacja elektroniczna — pojęcie dokumentacji elektronicznej może odnosić się do wszystkiego, od krótkich przewodników do pełnej, szczegółowej dokumentacji, interakcyjnych przewodników czy też modułów szkoleniowych. Wszystko, co opisuje jakąś czynność (zmiana oleju w samochodzie, przygotowanie omletu, malowanie krajobrazów, nauka języka HTML) może być traktowane jako dokumentacja elektroniczna;

• katalogi towarów — jeżeli firma oferuje towary na sprzedaż, nie ma lepszego i szybszego sposobu na powiadomienie klientów o cenach i oferowanych produktach niż lista, dostępna w sieci WWW. Przy każdej zmianie cen, wystarczy korekta plików i publikowane informacje stają się aktualne;

• wirtualne sklepy — WWW może być wykorzystana do prowadzenia sprzedaży. W tego typu witrynach znajdują się „koszyki”, do których użytkownicy mogą „wrzucać” towary w trakcie przeglądania katalogu. Na koniec podają tylko numer karty kredytowej oraz informację o miejscu dostawy towaru i zamówienie jest już gotowe;

• sondaże opinii publicznej i głosowania — interakcyjność i formularze w sieci WWW pozwalają na zbieranie opinii czytelników na każdy temat, mogą to być sondaże, sugestie na temat zawartości stron, produktów, itp.;

• edukacja — interakcyjność i niski koszt przekazywania informacji w sieci WWW decydują o tym, że jest ona bardzo atrakcyjnym nośnikiem informacji w procesie edukacji na odległość. Wiele uniwersytetów o wiekowej tradycji, jak również mnóstwo nowo powstałych szkół „internetowych” oferuje obecnie różnorakie formy kształcenia na odległość za pośrednictwem WWW;

• wszystko, co tylko zdołasz wymyślić — hipertekstowa fikcja, wirtualne zabawy, archiwa, warsztaty artystyczne... dosłownie wszystko.

Jedyne ograniczenie, jakie posiada sieć WWW, to ludzka wyobraźnia. Tak naprawdę, jeżeli tego, co chciałbyś przedstawić w sieci, nie ma na powyższej liście lub uważasz, że jest zbyt nieokrzesane czy niedopracowane, tym bardziej powinieneś spróbować. Najbardziej interesujące są strony, przesuwające coraz dalej granice tego, do czego sieć WWW została powołana.

Jeżeli nie masz skonkretyzowanej koncepcji treści swojej witryny, nie oznacza to wcale, że powinieneś zakończyć lekturę tej książki. Możesz odłożyć ją na jakiś czas i powrócić do niej, gdy będziesz miał już wykrystalizowany plan. A może w trakcie czytania wpadniesz na jakiś pomysł (jest ona całkiem pożyteczna nawet jeżeli nie masz pomysłów). Z moich własnych doświadczeń wynika, że najlepszym sposobem na wymyślenie czegoś interesującego jest spędzenie popołudnia na przeglądaniu zasobów WWW i oglądaniu tego, co zrobili inni.

Wyznacz swój cel

Co ma dać innym Twoja witryna WWW? Czy jest przeznaczona dla poszukiwaczy konkretnych informacji i instrukcji? Czy strony będą tak skonstruowane, że trzeba będzie przeczytać je od początku do końca, by czegoś się z nich dowiedzieć? Czy też czytelnicy rozpoczną przeglądanie od strony głównej i będą kręcić się w kółko bez celu po stworzonym przez Ciebie „wirtualnym świecie”, aż w końcu znudzeni poszukają sobie czegoś ciekawszego?

Załóżmy, na przykład, że tworzysz witrynę, opisującą firmę, w której pracujesz. Niektórzy czytelnicy mogą być zainteresowani aktualnymi ofertami pracy. Inni mogą poszukiwać lokalizacji firmy. Mogą znaleźć się tacy, którzy gdzieś usłyszeli, że firma publikuje w sieci dokumentację techniczną w formie elektronicznej i chcą skopiować sobie aktualną wersję. Każdy z tych powodów jest istotny, tak więc każdy z nich powinieneś wziąć pod uwagę.

W przypadku witryny typu „katalog produktów”, należy umożliwić czytelnikom przeglądanie produktów uporządkowanych według różnych kryteriów i oczywiście udostępnić im mechanizm zamówienia wybranego towaru.

Jeżeli chodzi natomiast o witrynę osobistą lub dotyczącą konkretnego tematu, zasadniczy cel może być tylko jeden, umożliwienie przeglądania przedstawianych informacji.

Cel witryny nie musi być wzniosły („Te strony przyniosą pokój całemu światu”), może być też zrozumiały tylko dla autora. Ale wyraźne określenie go jest bardzo istotne, stanowi bowiem rodzaj przygotowania do organizacji, projektowania i tworzenia stron, które będą konkretnie ukierunkowane. Jasno określony cel pozwala powstrzymać się od dołączania dodatkowych, często niepotrzebnych informacji, które tylko zaciemniają obraz całej witryny.

Jeżeli projektujesz strony WWW dla kogoś innego, na przykład, strony dla firmy lub jeżeli zostałeś zatrudniony jako konsultant, jedną z najistotniejszych spraw, którą należy ustalić przed przystąpieniem do tworzenia stron będzie określenie podstawowego celu witryny, bądź ustalenie go z pracodawcą. Twoje pomysły mogą się nie pokrywać z pomysłami innych osób, zaangażowanych w to przedsięwzięcie i cała sprawa może zakończyć się wykonaniem dużej pracy, która zostanie odrzucona.

Podziel treść na główne tematy

Teraz, mając przed sobą jasno określony cel, postaraj się zorganizować treść, tak aby można ją było podzielić na kilka zasadniczych tematów bądź rozdziałów, grupując powiązane ze sobą informacje pod jednym hasłem. Na pewno zdarzy się, że cele, które sobie postawiłeś i lista podstawowych tematów będą się ze sobą pokrywać. Jeżeli tworzysz strony dla księgarni, a jednym z celów ma być możliwość zamawiania książek, doskonałe będzie w tym miejscu hasło „Zamówienie”.

Na tym etapie rozwoju witryny nie musisz być jeszcze zbyt dokładny. Najważniejsze w tym punkcie jest ustalenie, co konkretnie będzie opisywane na projektowanych stronach. Później, już w trakcie tworzenia stron, będziesz mógł zorganizować je dużo lepiej.

Załóżmy, że tematem witryny jest konserwacja samochodu. Przykład ten jest prosty, bowiem konserwacja samochodu polega na kilku konkretnych czynnościach, które dają się łatwo opisać za pomocą dobrze brzmiących nagłówków. Tematy te mogłyby brzmieć następująco:

• wymiana oleju i filtra,

• sprawdzenie i regulacja gaźnika,

• sprawdzenie i regulacja zaworów,

• sprawdzenie i wymiana świec zapłonowych,

• sprawdzenie poziomu płynów, naprężenia pasów i wężyków.

Nie przejmuj się kolejnością czynności ani sposobem przejścia od jednego tematu do drugiego. Po prostu zapisz w punktach to, co chcesz opisać na swojej witrynie.

A teraz przykład mniej oczywisty. Załóżmy, że jako fan jakiegoś zespołu rockowego pragniesz stworzyć strony mu poświęcone, chcesz bowiem podzielić się swoją olbrzymią wiedzą z innymi fanami. Lista tematów mogłaby być następująca:

• historia zespołu,

• biografie poszczególnych członków zespołu,

• dyskografia — wszystkie wydane albumy i single,

• teksty utworów,

• okładki płyt,

• informacje o najbliższych koncertach i zapowiadanych wydawnictwach.

Możesz wymyślić dowolną ilość tematów, ale każdy z nich powinien być w miarę zwięzły. Jeżeli pojedynczy temat wydaje się być zbyt obszerny, spróbuj rozbić go na mniejsze części. Gdy okaże się, że krótkich tematów jest za dużo, spróbuj pogrupować je w kilka bardziej ogólnych. Jeżeli tworzysz encyklopedię roślin trujących, umieszczenie każdej rośliny w formie oddzielnego tematu byłoby zabójcze dla witryny. Najprostszym rozwiązaniem jest pogrupowanie nazw pod literami alfabetu (A,B,C ...) i wtedy właśnie litery stałyby się tematami nadrzędnymi. Oczywiście, musimy w takiej sytuacji założyć, że czytelnicy będą przeglądać informacje w porządku alfabetycznym. Jeżeli zechcesz umożliwić im przeglądanie informacji według jakiegoś innego klucza, będziesz musiał wymyślić inny podział.

Podstawowym celem jest rozdzielenie wiedzy na tematy, zawierające mniej więcej jednakową ilość informacji, sensownie rozmieszczonych w grupach, które chcesz zaprezentować.

Pomysły na organizację i nawigację

W tym miejscu powinieneś mieć już klarowną wizję tego, co chcesz przekazać oraz ogólną listę tematów. Następnym krokiem będzie podział informacji na strony WWW. Ale przed przystąpieniem do tego, przyjrzyj się „standardowym” strukturom, używanym w systemach pomocy i innych podobnych narzędziach. Niniejszy rozdział opisuje niektóre z tych struktur, ich cechy oraz odpowiedzi na kilka istotnych pytań:

• jakie typy informacji najlepiej pasują do pewnych struktur?

• jak czytelnicy odnajdują drogę do szukanych informacji w różnych strukturach?

• jak sprawić, aby czytelnik zawsze potrafił stwierdzić, w którym miejscu dokumentu się znajduje, a także odnaleźć drogę powrotną?

Czytając ten rozdział, zastanów się, jak informacje, które pragniesz zamieścić pasowałyby do opisywanych struktur i jaką ich kombinację mógłbyś zastosować, aby od nowa zaprojektować strukturę witryny.

Wiele opisywanych w tym rozdziale pomysłów zostało zaczerpniętych z książki Designing and Writing Online Documentation, autorstwa Williama K. Hortona (John Wiley & Sons, 1994). Pomimo to, że książka Hortona została napisana przede wszystkim dla twórców dokumentacji elektronicznej oraz systemów pomocy kontekstowej, jest to kopalnia wiedzy na temat strukturalizacji dokumentów i ogólnych zasad tworzenia hipertekstu.

Struktura hierarchiczna

Chyba najłatwiejszą i najbardziej logiczną strukturą dokumentu WWW jest właśnie hierarchia, podobna do menu, jak pokazano na rysunku 2.3.

Rysunek 2.3. Struktura hierarchiczna

Struktury hierarchiczne i menu szczególnie dobrze sprawdzają się w systemach opartych na hipertekście. Wiele systemów pomocy kontekstowej zostało stworzonych właśnie na bazie hierarchii. Tak więc przeglądanie rozpoczyna się od menu lub innego rodzaju listy głównych tematów. Wybór jednego z nich powoduje pojawienie się listy podtematów, pod którymi kryje się już konkretna treść. Różne systemy pomocy mają różne poziomy, ale większość z nich wpisuje się w taką strukturę.

W tego typu strukturach czytelnicy łatwo odnajdują swoje aktualne położenie. Przejście w górę zawsze prowadzi do informacji bardziej ogólnych, w dół, do informacji szczegółowych. Jeżeli umożliwisz przejście o poziom wyżej, czytelnicy będą mogli zawsze łatwo i szybko powrócić do miejsca, w którym już byli.

W witrynach o strukturze hierarchicznej strona główna zawsze zawiera ogólny przegląd opisywanych treści. Zawiera także połączenia do stron, które znajdują się na niższych poziomach hierarchii. Przykładowo, strona główna katalogu na witrynie Wydawnictwa Helion wygląda, jak pokazano na rysunku 2.4.

Rysunek 2.4. Katalog Wydawnictwa Helion

Jeżeli wybierzesz temat „Wszystkie książki”, połączenie poprowadzi do strony o wszy-stkich tytułach (patrz rysunek 2.5). Z tego miejsca możesz cofnąć się do strony głównej lub wybrać kolejne połączenie i przejść jeszcze niżej, do szczegółowych informacji o konkretnej książce.

Wybór tematu „3D Studio MAX — Doskonałość i precyzja” poprowadzi do strony z informacjami o książce (patrz rysunek 2.6). Stąd możesz przejść do strony katalogu, do strony głównej lub do konkretnego opisu, wybranego z menu.

Zauważ, że interfejs na każdym poziomie jest konsekwentnie tworzony w tym samym stylu (przejścia w górę, w dół, powrót do strony głównej) i posiada ograniczone możliwości prostej nawigacji. Struktury hierarchiczne są na tyle przejrzyste, że prawdopodobieństwo pogubienia się jest minimalne (szczególnie, że wskazówki dotyczące powrotu

Rysunek 2.5. Wszystkie tytuły
Rysunek 2.6. Książka „3D Studio MAX — doskonałość i precyzja”

są jasno opisane). Jeżeli każdy poziom struktury będzie poprawnie zorganizowany i unik­niesz powtarzania tematów w różnych „gałęziach” (jeżeli treść daje się sensownie ułożyć w tego typu strukturę), to hierarchia może stanowić najlepszy sposób na wyszukanie konkretnej porcji informacji. Jeżeli jest to jednym z celów, które sobie postawiłeś, struktura hierarchiczna może być tym, czego szukasz i co sprawdzi się najlepiej.

Staraj się unikać tworzenia zbyt wielu poziomów i zbyt wielu możliwości wyboru, ponieważ może to zirytować czytelników. Za dużo stron zawierających menu wyboru prowadzi do tzw. „syndromu poczty głosowej”. Czytelnicy, zmuszeni do ciągłego wybierania, mogą po drodze zapomnieć, czego właściwie szukają i będą wtedy tak wściekli, że przestanie ich obchodzić Twoja publikacja. Struktura powinna posiadać dwa, trzy poziomy, a szczegółowe informacje powinny znajdować się na ostatnim, najniższym z nich.

Struktura liniowa

Innym sposobem organizacji dokumentów jest struktura liniowa (sekwencyjna), która przypomina sposób organizacji dokumentów drukowanych. W strukturze tej, jak pokazano na rysunku 2.7, strona główna stanowi tytuł lub wstęp, a każda następna strona jest kolejnym rozdziałem. W strukturze typowo liniowej, strony są połączone kolejno ze sobą (poprzednia — następna). Czasem można też znaleźć połączenie do strony głównej, które pozwala na szybkie przejście do pierwszej strony.

Rysunek 2.7. Struktura liniowa

W strukturze liniowej łatwo zapoznać się z treścią, ponieważ nie ma zbyt wielu możliwości wyboru. Struktury tego typu są bardzo sztywne i ograniczają zarówno swobodę czytelnika, jak i twórcy. W ten sposób możesz prezentować informacje, które posiadają strukturę liniową w rzeczywistości, gdzie funkcjonują (krótkie opowiadania, instrukcje krok po kroku, trening komputerowy) lub jeżeli nie chcesz, aby czytelnicy przeskakiwali od tematu do tematu.

Rozważmy wobec tego przykład nauki wyrobu sera za pośrednictwem WWW. Jest to złożona procedura, składająca się z serii czynności, które muszą być wykonane w określonej kolejności.

Opis tej procedury na stronach WWW doskonale pasuje do struktury liniowej. Gdy poruszasz się po stronach dotyczących tego tematu, rozpoczynasz od strony głównej, na której znajdziesz krótkie podsumowanie tego, co musisz zrobić. Następnie, używając połączenia „Dalej”, przejdziesz do pierwszego kroku „Wybór właściwego mleka”, potem będzie „Kwaszenie mleka” i tak dalej, aż do końcowego „Dojrzewanie sera”. Zawsze będziesz miał możliwość przypomnienia sobie pewnych informacji za pomocą przycisku „Wróć”. Ponieważ procedura jest typowo liniowa, nie ma potrzeby tworzenia połączeń, które przerywałyby główny tok czynności, czy też stanowiły odniesienia do innych, podobnych procedur.

Struktura liniowa z alternatywą

Możesz odrobinę złagodzić sztywną strukturę liniową i pozwolić czytelnikowi zboczyć z głównej ścieżki. Można stworzyć strukturę liniową z alternatywnymi połączeniami, które odbiegają od głównego tematu (patrz rysunek 2.8). Te swego rodzaju dygresje mogą prowadzić z powrotem do zasadniczego tematu, mogą też być to zupełnie odrębne ścieżki, prowadzące do swojego własnego zakończenia.

Rysunek 2.8. Struktura liniowa z alternatywą

Załóżmy, że będziemy opisywać procedurę instalacji oprogramowania, która w większości punktów dla każdego komputera jest taka sama, ale jest jednak jeden wyjątek. W pewnym miejscu liniowego procesu instalacji następuje rozgałęzienie, procedura przebiega bowiem różnie w różnych systemach (patrz rysunek 2.9).

Rysunek 2.9. Różne ścieżki dla różnych systemów

Po zakończeniu części instalacji, specyficznej dla danego systemu, następuje powrót do pierwotnej ścieżki, która w dalszej części jest znów identyczna dla wszystkich platform.

Oprócz schodzenia z właściwej ścieżki możesz także tworzyć hiperpołączenia, które pomijają pewne elementy łańcucha czynności. Mogą to być połączenia wsteczne, aby przypomnieć sobie jeden z etapów, mogą też prowadzić do przodu, jeżeli czytelnik może sobie pozwolić na pominięcie pewnej grupy czynności (patrz rysunek 2.10).

Rysunek 2.10. Skoki w tył lub w przód

Struktura mieszana (liniowo-hierarchiczna)

Popularną formą organizacji dokumentów w sieci WWW jest kombinacja struktury hierarchicznej ze strukturą liniową, jak pokazano na rysunku 2.11. Jest to stosowane zwykle wtedy, gdy informację można podzielić na główne tematy, ale można ją też odczytywać w sposób liniowy. Jest to często wykorzystywany sposób w tzw. FAQ (ang. Frequently Asked Questions — najczęściej zadawane pytania).

Rysunek 2.11. Mieszana struktura liniowo—hierarchiczna

Kombinacja struktury liniowej i hierarchicznej sprawdza się wtedy, gdy bardzo klarowny jest kontekst przekazywanych informacji. Ponieważ czytelnicy mogą poruszać się w czterech różnych kierunkach (w górę i w dół, do przodu i do tyłu), bardzo łatwo mogą stracić orientację w momencie przekraczania granic tematów hierarchii, poruszając się w przód lub w tył.

Jeżeli chciałbyś przedstawić „Pana Tadeusza” Adama Mickiewicza postaci stron WWW, mógłbyś jako dodatek do prostej, liniowej struktury utworu wykreować hierarchiczny spis treści oraz streszczenie każdej księgi, podłączone w odpowiednim miejscu tekstu. Tego typu witrynę pokazuje rysunek 2.12.

Ponieważ struktura ta jest zarówno liniowa, jak i hierarchiczna, każda strona zawiera połączenia do przodu, do tyłu, do początku i do góry. Ale jaki jest właściwie sens tego „do góry”?

Rysunek 2.12. Struktura „Pana Tadeusza”

Jeżeli dotarłeś do obecnej strony ze streszczenia księgi, sens jest jasny, jest to powrót do owego streszczenia.

Ale załóżmy, że dotarłeś tu, wychodząc od streszczenia, na przykład, księgi pierwszej, potem przeszedłeś dalej, przekraczając granicę dwóch ksiąg. Co oznacza „do góry” w tym momencie? Otóż oznacza przejście do streszczenia księgi drugiej, czyli do miejsca, w którym jeszcze nie byłeś. Fakt przejścia do strony, której wcześniej nie widziałeś, może być bardzo dezorientujący z punktu widzenia tego, czym powinna być struktura hierarchiczna. Tak więc przejścia w górę i w dół powinny być spójne i konsekwentnie zorganizowane.

Istnieją dwa możliwe rozwiązania:

• nie pozwól na połączenia w przód i w tył pomiędzy granicami tematów, znajdujących się na jednym poziomie hierarchii. W tym przypadku, aby przejść z pierwszej do drugiej księgi „Pana Tadeusza”, należałoby cofnąć się do strony głównej i dopiero stamtąd przejść do kolejnego aktu;

• opisz dokładniej samo połączenie. Zamiast napisać po prostu „w górę” lub umieścić ikonę ze strzałką, wstaw w to miejsce dokładniejszy opis, gdzie to połączenie prowadzi.

Struktura sieciowa (pajęczyna)

Pajęczyna to zbiór dokumentów, które nie mają jakiejś ogólnej struktury. Jedyną rzeczą, która łączy strony ze sobą, to hiperpołączenie (patrz rysunek 2.13). Czytelnicy przechodzą od strony do strony, wybierając kolejne połączenia.

Rysunek 2.13. Struktura pajęczyny

Struktury tego typu są bardzo luźne i pozwalają na bezcelowe wędrówki po ich zawartości. Pajęczyny są doskonałe, jeżeli zawartość witryny jest bardzo słabo ze sobą powiązana lub też, jeśli chcesz zachęcić czytelnika do częstych przeskoków. Sieć WWW sama w sobie jest jedną wielką pajęczyną.

Przykładem treści zorganizowanej w strukturę pajęczyny może być zbiór wirtualnych pokoi, utworzony z wykorzystaniem stron WWW. Jeżeli kiedykolwiek grałeś w tekstową grę przygodową typu Zork lub Dungeon lub, jeżeli korzystałeś w wersji Dungeon dla wielu użytkowników (MUD), tego typu środowisko nie jest Ci obce.

W kontekście witryny WWW środowisko jest zorganizowane tak, że każda strona reprezentuje konkretne miejsce (zwykle zawiera też jego opis). Z tego miejsca możesz przemieszczać się w różnych kierunkach, wędrując przez ten wirtualny „świat” w sposób bardziej przypominający przechodzenie z pokoju do pokoju niż rzeczywistość (zgubić można się tak łatwo, jak w labiryncie). Pierwsza strona takiej witryny może wyglądać, tak jak ta, pokazana na rysunku 2.14.

Rysunek 2.14. Strona główna wirtualnego świata WWW

Z tej strony możesz udać się w jednym z kierunków, wskazywanych przez hiperpołączenia, na przykład, wejść do budynku, co poprowadzi do strony z rysunku 2.15.

W każdym pokoju znajdują się połączenia z sąsiednimi pomieszczeniami. Korzystając z nich, możesz poruszać się po budynku.

Problem z witrynami tego typu polega na tym, że zdecydowanie zbyt łatwo się w nich pogubić, tak jak podczas wędrówki po wirtualnym świecie. Przy braku jakiejkolwiek ogólnej struktury często trudno jest znaleźć związek pomiędzy miejscem, w którym jesteś, z którego przyszedłeś i tym, do którego zmierzasz.

Rysunek 2.15. Kolejna strona wirtualnego świata

Często jedynym sposobem na odzyskanie orientacji we własnym położeniu jest wycofanie się kilka stron wstecz i prześledzenie swoich kroków. Pajęczyny mogą być bardzo mylące i denerwujące dla czytelników mających jasno określony cel.

Aby rozwiązać problem dezorientacji w pajęczynie, możesz skorzystać ze wskazówek zawartych na tej stronie. Oto dwa pomysły:

• na każdej stronie umieść wyjście awaryjne, czyli połączenie o nazwie „Powrót do strony głównej”,

• na każdej stronie umieść mapkę całej struktury z wyraźnym znakiem „Tu jesteś”. Nie musi to być mapa w dosłownym znaczeniu, jakakolwiek forma umiejscowienia aktualnego miejsca pobytu w całej strukturze może uchronić czytelników przed całkowitym zagubieniem.

Scenopis witryny WWW

Następnym krokiem w procesie planowania witryny WWW jest określenie, jaka treść znajdzie się na poszczególnych stronach i opracowanie sposobu poruszania się po nich.

Jeżeli skorzystasz z jednej ze struktur opisanych powyżej, może okazać się, że organizacja całości w dużym stopniu wyniknie z samej struktury, co będzie dużym ułatwieniem. Jeśli jednak zechcesz połączyć ze sobą różne struktury lub jeśli treść jest na tyle obszerna, że trzeba połączyć ją w jakiś bardziej złożony sposób, trzeba będzie przed rozpoczęciem tworzenia i łączenia stron usiąść i opracować dokładny plan tego, co i gdzie powinno się znaleźć.

Co to jest scenopis i do czego może się przydać?

Scenopis witryny to pomysł zaczerpnięty z produkcji filmów, gdzie wszystkie sceny i ujęcia kamery są wstępnie rozpisywane w kolejności, w jakiej pojawią się w filmie. Scenopis umożliwia stworzenie ogólnej struktury i planu filmu, a także dostarcza reżyserowi i całemu zespołowi poglądu na to, jak dane ujęcie pasuje do całej reszty.

Scenopis to proces tworzenia ogólnego zarysu przyszłego wyglądu witryny, przed przystąpieniem do właściwego tworzenia stron. Scenopis pozwala spojrzeć na całość witryny zanim jeszcze ona powstanie. Koncepcja scenopisu przeniesiona na grunt WWW funkcjonuje bardzo dobrze. Scenopis to zarys tego, jak wyglądać będzie gotowa witryna. Zawiera on, między innymi informacje o tym, na których stronach znajdą się poszczególne tematy, opis głównych hiperpołączeń a nawet pomysły na to, jakiego rodzaju elementy graficzne będą użyte i w których miejscach się znajdą. Z takim planem w ręku możesz zacząć tworzenie stron, nie martwiąc się, że zapomnisz, gdzie powinieneś daną stronę umieścić i jakie są jej związki z innymi stronami.

W przypadku naprawdę dużych zbiorów dokumentów scenopis umożliwia wielu osobom tworzenie różnych części tej samej witryny. Przejrzysty scenopis minimalizuje prawdopodobieństwo powielenia tej samej pracy przez różne osoby oraz zmniejsza ilość informacji koncepcyjnych, którą każdy z twórców musi zapamiętać.

W przypadku małych i prostych witryn WWW czy nawet dużych witryn o nieskomplikowanej strukturze, tworzenie scenopisu może nie być konieczne, ale w przypadku dużych, bardziej złożonych projektów, istnienie scenopisu oszczędza wiele czasu i nerwów. Jeżeli nie potrafisz ogarnąć treści stron i ich wzajemnych powiązań, opracuj scenopis.

Jak więc wygląda taki scenopis dla witryny WWW? Może być bardzo prosty i składać się z zaledwie kilku kartek papieru. Każda kartka reprezentuje stronę, powinna więc zawierać listę tematów, które znajdą się na niej oraz uwagi na temat wychodzących z niej hiperpołączeń.

Widziałem już scenopisy wielkich systemów hipertekstowych, umieszczone na olbrzymich tablicach pełnych kartek i nitek. Na każdej kartce zapisany był temat, a nitki, poprzypinane szpilkami, symbolizowały hiperpołączenia pomiędzy nimi (patrz rysunek 2.16).

Rysunek 2.16. Złożony scenopis

Wielką zaletą scenopisu jest to, że możesz poukładać sobie swoje strony WWW w sposób, który Ci najbardziej odpowiada. Jeżeli lubisz szpilki i nitki, możesz z nich skorzystać, ale nie ma reguły nakazującej robienie tego koniecznie w taki sposób. Jeśli wolisz rozrysować sobie wszystko na papierze lub za pomocą jakiegoś programu komputerowego, proszę bardzo, zrób tak, jak Ci najwygodniej.

Kilka wskazówek dotyczących scenopisów

Oto kilka spraw, które należy mieć na uwadze, tworząc scenopis:

• który temat na którą stronę?

Reguła kciuka mówi, że jeden temat powinien zajmować jedną stronę. Jeżeli jednak tematów jest wiele, łączenie ich może być niezbyt przyjemnym zadaniem. Zamiast tego, zastanów się nad możliwością stworzenia stron zawierających kilka małych, powiązanych ze sobą tematów.

Ale i tu nie należy przesadzać, nie umieszczaj na jednej stronie wszystkiego; pamiętaj, że między witryną a czytelnikami stoi sieć, która ma swoją przepustowość. Wiele stron średniej wielkości (czyli gdzieś pomiędzy 2 i 10 stron napisanych w standardowym edytorze tekstów) to o wiele lepsze rozwiązanie, niż wielka strona zawierająca setki mniejszych;

• jakie będą podstawowe sposoby nawigacji między stronami?

Jakie hiperpołączenia będą wymagane, aby czytelnicy mogli przechodzić od strony do strony? Są to podstawowe połączenia, które umożliwią czytelnikom osiągnięcie celów, zdefiniowanych w pierwszym rozdziale. Hiperpołączenia do przodu, do tyłu, w górę, w dół, do strony głównej — wszystkie należą do kategorii połączeń podstawowych;

• jakie alternatywne formy nawigacji umieścisz na stronach?

Niektóre witryny zawierają, obok podstawowych połączeń nawigacyjnych, także inne informacje, które współistnieją z głównym tematem, jak, na przykład, słownik pojęć, indeks alfabetyczny lub stronę z informacjami o twórcach. Pamiętaj o tego typu informacjach w trakcie opracowywania planu i zastanów się, w jaki sposób podłączyć je do zasadniczej treści;

• co znajdzie się na stronie głównej?

Ponieważ strona główna jest punktem wyjściowym do dalszej części witryny, dobrze zastanów się nad tym, jakie informacje chcesz na niej umieścić. Ogólny opis tego, co znajduje się dalej? A może listę hiperpołączeń do innych tematów?

• jeszcze raz przemyśl wszystkie cele witryny?

Nigdy w trakcie pracy nad witryną nie zapominaj o celach, które sobie wyznaczyłeś. Upewniaj się cały czas, czy nie umieszczasz informacji, które swoją treścią mogą zaciemnić całokształt witryny.

Istnieje wiele narzędzi i pakietów, które mogą być pomocne w tworzeniu scenopisu. Są wśród nich pakiety do zarządzania witrynami, które pomagają w zapanowaniu nad połączeniami, pokazują w sposób graficzny wszelkie związki pomiędzy stronami, pozwalają na modyfikowanie ich za pomocą myszy, przy czym wszelkie połączenia są wtedy automatycznie modyfikowane.

Podsumowanie

Projektowanie witryny WWW, podobnie jak tworzenie wstępnego zarysu książki, planowanie czy malowanie, może być czasami bardzo złożonym procesem. Wcześniejsze opracowanie ogólnego planu może być niesłychanie pomocne w pracy nad szczegółowymi rozwiązaniami, może też zapobiec ewentualnym komplikacjom.

W tym rozdziale nauczyłeś się opracowywać prosty plan i strukturę grupy stron WWW a więc jak:

• zdecydować, jaką treść chcesz zaprezentować,

• wyznaczyć cele, którym służyć ma witryna,

• podzielić treść na główne tematy,

• stworzyć ogólny plan witryny.

Z tym planem w ręku możesz przystąpić do lektury kolejnych rozdziałów, gdzie nauczysz się tworzyć pojedyncze strony WWW, hiperpołączenia między nimi oraz uatrak­cyj­niać strony poprzez wstawianie grafiki i mediów innego rodzaju.

Warsztat

Pierwsza część warsztatu zawiera pytania, jakie zwykle są zadawane podczas planowania witryn internetowych. Do każdego z pytań dołączona jest odpowiedź. Na kolejne pytania odpowiedz samodzielnie. Jeśli będziesz miał problem z którymś z nich, odpowiedź znajdziesz w następnej sekcji. Ćwiczenia pomogą Ci zaplanować zawartość Twojej witryny.

Pytania i odpowiedzi

P. Wygląda na to, że organizacja stron to spory kawał roboty. Chcę stworzyć coś prostego, a Ty wmawiasz mi, że potrzebne mi do tego cele, tematy i scenopis.

O. Jeżeli rzeczywiście tworzysz coś w miarę prostego, to tak naprawdę nie będziesz musiał robić zbyt wiele — a może nawet nic — z tego, co opisałam w tym rozdziale. Ale jeżeli mówisz o więcej niż dwóch lub trzech połączonych ze sobą stronach, stworzenie planu przed rozpoczęciem pracy naprawdę pomoże. Jeżeli rzucisz się w wir pracy, może okazać się, że zapamiętanie wszystkiego jest ponad Twoje siły. Wynik pracy może dalece odbiegać od oczekiwań. Czytelnicy nie będą mogli wydobyć szukanych informacji w sensowny sposób, a co chyba gorsze, sam nie będziesz w stanie tak zorganizować stron, aby ułożyły się w logiczną całość. Opracowanie planu nie boli, a może oszczędzić wiele czasu.

P. Mówiłaś w tym rozdziale wiele na temat organizacji tematów i stron, nie wspomniałaś natomiast ani słowa o projektowaniu i kształcie pojedynczych stron.

O. O tych sprawach przeczytasz w kolejnych rozdziałach książki. Najpierw zapoznasz się z możliwościami języka HTML (jest to język, w którym tworzy się strony WWW), dowiesz się, co można, a czego nie można zrobić za jego pomocą. Więcej informacji na temat układów i projektowania stron WWW znajdziesz w rozdziale 22. — „Tworzenie i projektowanie stron WWW: zalecenia i przeciwwskazania”.

P. A jeżeli nie odpowiada mi żadna ze struktur, które omówiłaś w tym rozdziale?

O. Opracuj własną. Jeżeli tylko czytelnik będzie mógł bez problemów znaleźć to, czego szuka lub robić to, co chcesz, aby robił, żaden przepis nie nakazuje korzystania ze struk­tury liniowej czy hierarchicznej. Moim celem była wyłącznie prezentacja kilku idei, z których możesz, ale nie musisz korzystać podczas projektowania własnych stron.

Quiz

1. Jak pokrótce mógłbyś wyjaśnić znaczenie pojęć witryna WWW, serwer WWW, strona WWW?

2. Jakie znaczenie ma strona główna witryny internetowej?

3. Jaki jest następny etap projektowania witryny, po wybraniu przeznaczenia Twojej witryny internetowej?

4. Bez względu na strukturę witryny, na każdej stronie powinien się zwykle znajdować jeden, określony odnośnik. Jaki to odnośnik?

5. Jaki jest cel użycia ogólnego szkicu strony?

Odpowiedzi

1. Witryna WWW jest to jedna lub więcej stron WWW, połączonych w logiczną całość. Serwer WWW jest to komputer, który przechowuje witryny internetowe. Strony WWW, niczym strony w książce, są pojedynczymi elementami witryny internetowej.

6. Strona domowa witryny internetowej pełni rolę początkowego punktu, z którego odbywa się nawigacja po całej witrynie (pierwsza, najważniejsza strona).

7. Kiedy ustalisz cel lub przeznaczenie Twojej witryny internetowej, powinieneś podzielić zawartość witryny na poszczególne tematy lub sekcje.

8. Na każdej stronie swojej witryny internetowej powinieneś umieszczać połączenie do strony domowej. Umożliwi to użytkownikowi w każdym momencie powrót do strony początkowej.

9. Ogólny szkic wyglądu gotowej witryny pomoże Ci zorganizować strony WWW w sposób najbardziej przejrzysty i użyteczny dla Ciebie. Zalety tego szkicu wykorzystasz najlepiej podczas projektowania większych witryn internetowych.

Ćwiczenia

1. W pierwszym ćwiczeniu ustal listę kilku celów, które mogłyby przyświecać użytkownikom odwiedzającym Twoją witrynę. Im prostsze cele, tym lepiej.

10. Kiedy już ustalisz cele, odwiedź witryny internetowe o tematyce zbliżonej do projektowanej przez Ciebie witryny. Co sądzisz o ich zawartości i łatwości poruszania się po nich? Następnie wymień, co Ci się w nich najbardziej podoba. Jak mógłbyś zaprojektować swoją stronę lepiej?

48 Część 1. Informacje wstępne

Rozdział 2. Grunt to organizacja 47

---