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ądz
cierpliwy. Jeszcze zdążysz nacieszyć się HTML-em.
30 Część 1. Informacje wstępne
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.
Rozdział 2. Grunt to organizacja 31
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 for-
mie 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, gdy-
byś 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ól-
ny, bliżej nie sprecyzowany pomysł. Być może szef nakazał Ci zaprojektowanie firmo-
wej 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
32 Część 1. Informacje wstępne
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;
Rozdział 2. Grunt to organizacja 33
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 wyobraz
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 pomy-
słów). Z moich własnych doświadczeń wynika, że najlepszym sposobem na wymyśle-
nie 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ż czy-
telnicy 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ć lo-
kalizacji firmy. Mogą znalez
ć 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 prze-
glądanie produktów uporządkowanych według różnych kryteriów i oczywiście udo-
stępnić im mechanizm zamówienia wybranego towaru.
Jeżeli chodzi natomiast o witrynę osobistą lub dotyczącą konkretnego tematu, zasadni-
czy 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 wyraz
ne określenie go jest bardzo istotne, stanowi bo-
wiem rodzaj przygotowania do organizacji, projektowania i tworzenia stron, które będą
konkretnie ukierunkowane. Jasno określony cel pozwala powstrzymać się od dołączania do-
datkowych, 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
34 Część 1. Informacje wstępne
witryny, bądz
ustalenie go z pracodawcą. Twoje pomysły mogą się nie pokrywać z po-
mysłami innych osób, zaangażowanych w to przedsięwzięcie i cała sprawa może za-
koń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ądz
rozdziałów, grupując po-
wią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 two-
rzysz 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 stro-
nach. Póz
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 gaz
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 dru-
giego. 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ą olbrzy-
mią 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
Rozdział 2. Grunt to organizacja 35
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, umieszcze-
nie każdej rośliny w formie oddzielnego tematu byłoby zabójcze dla witryny. Najprost-
szym 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 jedna-
kową 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żywa-
nym 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 odnalez
ć 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 hie-
rarchia, podobna do menu, jak pokazano na rysunku 2.3.
36 Część 1. Informacje wstępne
Rysunek 2.3.
Struktura hierarchiczna
Struktury hierarchiczne i menu szczególnie dobrze sprawdzają się w systemach opar-
tych 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 ro-
dzaju 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 ła-
two 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
Rozdział 2. Grunt to organizacja 37
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 in-
formacjami 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żli-
wości prostej nawigacji. Struktury hierarchiczne są na tyle przejrzyste, że prawdopodo-
bień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
38 Część 1. Informacje wstępne
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 wyszuka-
nie 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, po-
nieważ może to zirytować czytelników. Za dużo stron zawierających menu wyboru pro-
wadzi do tzw.  syndromu poczty głosowej . Czytelnicy, zmuszeni do ciągłego wybiera-
nia, 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 pozio-
my, 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 poka-
zano 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 so-
bą (poprzednia  następna). Czasem można też znalez
ć 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ę linio-
wą w rzeczywistości, gdzie funkcjonują (krótkie opowiadania, instrukcje krok po kroku, tre-
ning 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 po-
ruszasz 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 , po-
tem będzie  Kwaszenie mleka i tak dalej, aż do końcowego  Dojrzewanie sera . Zaw-
sze 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.
Rozdział 2. Grunt to organizacja 39
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ęk-
szoś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).
40 Część 1. Informacje wstępne
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 hie-
rarchicznej ze strukturą liniową, jak pokazano na rysunku 2.11. Jest to stosowane zwy-
kle wtedy, gdy informację można podzielić na główne tematy, ale można ją też odczy-
tywać 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 klarow-
ny 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 mo-
gą 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 ?
Rozdział 2. Grunt to organizacja 41
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 miej-
sca, 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 przecho-
dzą od strony do strony, wybierając kolejne połączenia.
42 Część 1. Informacje wstępne
Rysunek 2.13.
Struktura pajęczyny
Struktury tego typu są bardzo luz
ne i pozwalają na bezcelowe wędrówki po ich zawar-
tości. Pajęczyny są doskonałe, jeżeli zawartość witryny jest bardzo słabo ze sobą po-
wią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 teksto-
wą 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 re-
prezentuje 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 spo-
só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.
Rozdział 2. Grunt to organizacja 43
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 znalez
ć związek pomiędzy miejscem, w którym je-
steś, 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 wyco-
fanie 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 wyraz
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 organi-
zacja całości w dużym stopniu wyniknie z samej struktury, co będzie dużym ułatwie-
niem. 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ę znalez
ć.
44 Część 1. Informacje wstępne
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ży-
serowi 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 oso-
bom 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 nieskompliko-
wanej 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
Rozdział 2. Grunt to organizacja 45
Wielką zaletą scenopisu jest to, że możesz poukładać sobie swoje strony WWW w spo-
sób, który Ci najbardziej odpowiada. Jeżeli lubisz szpilki i nitki, możesz z nich skorzy-
stać, 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 komputero-
wego, 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
46 Część 1. Informacje wstępne
automatycznie modyfikowane.
Podsumowanie
Projektowanie witryny WWW, podobnie jak tworzenie wstępnego zarysu książki, pla-
nowanie 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óło-
wymi 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 na-
uczysz się tworzyć pojedyncze strony WWW, hiperpołączenia między nimi oraz uatrak-
cyjniać strony poprzez wstawianie grafiki i mediów innego rodzaju.
Warsztat
Pierwsza część warsztatu zawiera pytania, jakie zwykle są zadawane podczas planowa-
nia witryn internetowych. Do każdego z pytań dołączona jest odpowiedz
. Na kolejne
pytania odpowiedz samodzielnie. Jeśli będziesz miał problem z którymś z nich, odpo-
wiedz
znajdziesz w następnej sekcji. Ćwiczenia pomogą Ci zaplanować zawartość Two-
jej 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 wy-
dobyć 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ść. Opraco-
wanie planu nie boli, a może oszczędzić wiele czasu.
Rozdział 2. Grunt to organizacja 47
P. Mówiłaś w tym rozdziale wiele na temat organizacji tematów i stron, nie wspo-
mniał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.   Two-
rzenie 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 znalez
ć 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.
2. Strona domowa witryny internetowej pełni rolę początkowego punktu, z którego
odbywa się nawigacja po całej witrynie (pierwsza, najważniejsza strona).
3. Kiedy ustalisz cel lub przeznaczenie Twojej witryny internetowej, powinieneś
podzielić zawartość witryny na poszczególne tematy lub sekcje.
4. 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.
5. 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.
48 Część 1. Informacje wstępne
Ć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.
2. Kiedy już ustalisz cele, odwiedz
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?