Rozdział 22.
Tworzenie i projektowanie
stron WWW: zalecenia
i przeciwwskazania
Ten rozdział nie będzie poświęcony ani znacznikom HTML, ani sposobom
konwertowania plików z jednego dziwnego formatu w inny. W zasadzie poznałeś już
wszystkie tajniki projektowania kodu HTML stron WWW. Czas teraz na to, co
nieuchwytne  to co sprawia, że strona nie jest jedynie przypadkowym zlepkiem
znaczników, tekstu i grafiki.
Wzbogacony o wiedzę zdobytą w ostatnich kilku rozdziałach, mógłbyś już w zasadzie
odłożyć tę książkę na bok i przystąpić do samodzielnego przygotowywania swojej
strony. To jednak, czego nauczysz się teraz sprawi, że Twoje strony będą doskonalsze.
Czy istnieje lepsza motywacja, by kontynuować czytanie?
W rozdziale znajdziesz podpowiedzi dotyczÄ…ce tworzenia ciekawie napisanych i dobrze
zaprojektowanych stron WWW. Dowiesz się, co jest zalecane, a czego należy unikać
w konstrukcji strony. Oto szczegółowa tematyka:
kiedy stosować standardowe znaczniki HTML 3.2, kiedy nowe znaczniki HTML 4.0,
kiedy arkusze stylów, kiedy rozszerzenia HTML, a kiedy kombinację tych
możliwości,
jak pisać strony WWW, by były przejrzyście zorganizowane i łatwe w czytaniu,
kwestie dotyczÄ…ce projektowania i wyglÄ…du stron WWW,
kiedy umieszczać na stronach połączenia i dlaczego,
efektywne korzystanie z obrazów,
najróżniejsze ciekawostki i podpowiedzi.
650 Część 8. Projektowanie efektywnych stron WWW
Stosowanie rozszerzeń HTML
W przeszłości, zanim firmy tworzące przeglądarki nie zaczęły uszczęśliwiać nas coraz
nowszymi znacznikami, bycie projektantem stron WWW było całkiem proste. Do
dyspozycji miałeś wyłącznie znaczniki mieszczące się w standardzie HTML 2.0, a
większość przeglądarek sieciowych bez trudu radziła sobie z czytaniem stron
utworzonych w oparciu o ten standard. Teraz sprawy znacznie się skomplikowały.
Musisz posługiwać się nie jedną grupą znaczników a kilkoma. Oto one:
znaczniki HTML 2.0,
opcje HTML 3.2 i HTML 4.0, takie jak tabele, wycinki, tła i kolor, które
są obsługiwane przez większość przeglądarek, ale nie przez wszystkie,
HTML 4.0 i związane z nim możliwości, takie jak kaskadowe arkusze stylów,
Dynamiczny HTML i układy ramek,
XHTML 1.0, proponowane rozszerzenie języka HTML 4.0 stwarzające możliwość
rozbudowy znaczników HTML i przygotowujące dokumenty HTML na przyszłe
wymagania WWW,
pluginy i inne obiekty osadzone wykorzystujące pliki i dane zewnętrzne (względem
przeglÄ…darki),
znaczniki specyficzne dla danego typu przeglÄ…darek (np. dla Netscape czy Internet
Explorera), które mogą, ale wcale nie muszą, zostać uwzględnione w oficjalnej
specyfikacji HTML  w tym przypadku obsługa tych znaczników również zależy
od typu przeglÄ…darki,
inne technologie (takie jak SMIL Boston, synchronizowany język multimedialny),
które w przyszłości mogą się stać specyfikacjami W3C, a które na razie nie
są w ogóle obsługiwane lub są obsługiwane tylko przez nieliczne przeglądarki.
Jeśli czujesz się nieco bezradny, gdy musisz dokonać wyboru, wiedz, że nie jesteś
w tym odczuciu odosobniony. Autorzy i projektanci stron WWW, tacy jak Ty, starajÄ…
się posortować ten bałagan i wybrać z niego to, co nada stronom pożądany przez nich
kształt. Dynamiczny HTML oraz kaskadowe arkusze stylów dostępne w HTML 4.0
oraz XHTML 1.0, bez wątpienia dają większe możliwości odnośnie układu strony.
Jednak do momentu, gdy więcej przeglądarek będzie obsługiwało te technologie,
wykorzystanie ich może ograniczyć ilość osób, które będą mogły oglądać je w sposób
zamierzony przez twórcę.
Wybór strategii stosowania rozszerzeń HTML jest jedną z ważniejszych decyzji, którą
podejmujesz, przystępując do tworzenia stron WWW. Aby lepiej Ci to zobrazować,
załączam rysunek 22.1, przedstawiający Twoje możliwości wyboru w postaci kontinuum,
mieszczącego się pomiędzy konserwatywnym a eksperymentalnym sposobem podejścia.
Nie traktuj punktów krańcowych tego kontinuum w kategoriach wartościujących  podejście
konserwatywne nie jest gorsze od eksperymentalnego i odwrotnie. Obie opcje majÄ… swoje
zalety, podobnie zresztą, jak i rozwiązanie mieszczące się gdzieś w środku.
Rozdział 22. Tworzenie i projektowanie stron WWW 651
Rysunek 22.1.
Kontinuum podejść
do tworzenia
stron WWW
Przed pojawieniem się standardu HTML 4.0, przedstawione powyżej kontinuum miało
postać linearną. Ta starsza wersja kontinuum jest reprezentowana przez lewą krawędz

trójkąta przedstawionego na rysunku 22.1.
Konserwatywny projektant stron WWW chce, by jego strony miały maksymalnie sze-
roką grupę odbiorców. Stosuje więc HTML 2.0, bowiem jest to standard. Nie twierdzę,
że konserwatywny twórca jest nudny. Można stworzyć wspaniałe strony za pomocą
znaczników standardu HTML 2.0, które będą miały ponadto tę przewagę nad stronami
korzystającymi z zaawansowanych opcji, że ich obsługa jest praktycznie bezproblemo-
wa we wszystkich przeglÄ…darkach, tym samym majÄ… one potencjalnie najszersze rzesze
czytelników.
Projektant, który nie jest konserwatywny, lecz jednocześnie nie jest eksperymentato-
rem, będzie wykorzystywał znaczniki dostępne w standardzie HTML 3.2. W momencie
pojawienia się tego standardu był on tym, czym aktualnie jest XHTML 1.0. Choć sta-
nowił ogólnie przyjęty standard, to jednak twórcy stron WWW musieli poczekać, aby
przeglądarki udostępniły jego możliwości. Niemniej jednak projektanci byli gotowi pod-
jąć ryzyko i założyć, że większość użytkowników korzysta z jednej z dwóch najnowszych
przeglądarek, które w tamtym czasie obsługiwały już większość znaczników HTML 3.2.
Eksperymentator natomiast chce kontroli nad układem strony, którą dają mu bardziej
zaawansowane znaczniki i jest gotów poświęcić część potencjalnych odbiorców swych
stron, aby móc skorzystać z tych możliwości. Takie eksperymentalne strony projekto-
wane są zazwyczaj z myślą o jednej przeglądarce (najwyżej dwóch lub trzech typach),
testowane są także w jednej. Często można znalez
ć na eksperymentalnej stronie infor-
mację, że  These Pages Are Best Read Using Browser X (do odczytu tych stron najle-
piej zastosować przeglądarkę X). Próba skorzystania z innej przeglądarki niż wskazana
może spowodować, że strona nie będzie się nadawała do odczytu, ale równie dobrze
może się prezentować całkiem niez
le.
Aby obsłużyć te różne podejścia, definicje HTML 4.0 jak i XHTML 1.0 udostępniają trzy
różne  werjse HTML-a, a główne różnice pomiędzy HTML-em 4.0 a XHTML-em 1.0
zostały opisane w niniejszej książce. Trzy nowe  wersje HTML-a zostały przedstawio-
ne z prawej strony kontinuum z rysunku 22.1. Poniżej skrótowo opisałam każdą z nich:
652 Część 8. Projektowanie efektywnych stron WWW
HTML 4.0 lub XHTML 1.0 Transitional  jest przeznaczony głównie dla
konserwatywnych projektantów WWW, którzy chcą obsługiwać jak największą
ilość istniejących przeglądarek. Odpowiada to tej grupie użytkowników, którzy
we wcześniejszej  liniowej  wersji kontinuum, wykorzystywali znaczniki
HTML 2.0. Znaczniki te wciąż stanowią absolutne minimum, podstawę możliwości
funkcjonalnych przeglądarek. Jednak aktualnie najczęściej wykorzystywane są
przeglądarki zgodne z HTML 3.2, a zatem, bezpiecznie można założyć, iż to właśnie
specyfikacja HTML 3.2 stanowi dolną, podstawową granicę możliwości
przeglądarek. Zdecydowana większość stron WWW, jakie stworzyłeś i stworzysz
w tej książce, można zaliczyć do tej kategorii;
HTML 4.0 lub XHTML 1.0 Frameset  to zalecane rozwiÄ…zanie dla wszystkich
projektantów stron WWW tworzących strony przeznaczone dla przeglądarek
zgodnych ze standardem HTML 3.2, którzy jednocześnie chcą prezentować witryny
przy wykorzystaniu układów ramek. (We wcześniejszej wersji kontinuum układy
ramek należały raczej do jego  eksperymentalnej części.) Według mnie, aktualnie
jest to podejście pośrednie. Choć ta  wersja języka daje możliwość użycia większej
liczby znaczników niż  wersja pośrednia (Transitional), to jednak wciąż istnieje
wiele przeglądarek, które nie są w stanie obsługiwać układów ramek;
HTML 4.0 lub XHTML 1.0 Strict  przeznaczona dla projektantów WWW,
który lubią eksperymentować i chcą tworzyć swoje strony, opierając się ściśle
na specyfikacjach HTML 4.0 i XHTML 1.0. Oznacza to rezygnacjÄ™ ze wszystkich
znaczników uznanych za  przestarzałe i określanie postaci dokumentów wyłącznie
przy użyciu kaskadowych arkuszy stylów.
Choć specyfikacje HTML 4.0 oraz XHTML 1.0 stanowią ogromny krok w kierunku za-
spokojenia oczekiwań wszystkich projektantów WWW, to jednak wciąż istnieje ten
 najwyższy punkt kontinuum, oznaczający prawdziwych eksperymentatorów, wyko-
rzystujących możliwości wykraczające poza formalne specyfikacje. Producenci prze-
glądarek wciąż wzbogacają swoje produkty o nowe, eksperymentalne możliwości, a po-
stępowi projektanci stron WWW są chętni do ich wykorzystywania. Te osoby używają
najnowszych i najlepszych wersji swych ulubionych przeglÄ…darek i projektujÄ… strony
wykorzystujące znaczniki dostępne wyłącznie w tych przeglądarkach.
Wydaje się, że złotym środkiem pomiędzy interesującym rozwiązaniem a liczbą czytel-
ników jest zachowanie równowagi. Wiedząc z góry, czego możesz się spodziewać po
rozszerzeniach HTML w przeglądarkach, które je obsługują oraz w tych, które sobie
z nimi nie radzą, możesz wprowadzać do swoich stron modyfikacje, umożliwiające wy-
korzystanie zalet obu typów. W efekcie Twoje strony nadal będą czytelne i użyteczne
w starszych przeglądarkach zainstalowanych na większości platform, ale ponieważ ko-
rzystają także z nowszych opcji, będą atrakcyjne również w nowych przeglądarkach,
które je obsłużą. Obecnie oznacza to zastosowanie znaczników HTML standardów 3.2
i 4.0 tam, gdzie nie można osiągnąć założonego celu za pomocą znaczników HTML 2.0.
Musisz mieć jednak pełną świadomość efektu obecności znaczników wyższych stan-
dardów na stronie wyświetlanej w przeglądarkach, które ich nie obsługują.
Nieustannie wyjaśniam w tej książce, które znaczniki są częścią specyfikacji HTML 4.0,
oraz jak wygląda ich obsługa w poszczególnych przeglądarkach. Zaprezentowałem tak-
że dla każdego ze znaczników alternatywne rozwiązania, z których możesz skorzystać
Rozdział 22. Tworzenie i projektowanie stron WWW 653
tam, gdzie obsługa znacznika nie jest możliwa. Uzbrojony w tę wiedzę możesz zabrać
się za eksperymentowanie z poszczególnymi znacznikami i przeglądarkami, aby zoba-
czyć efekty kombinacji na swoich stronach.
Stosując rozszerzenia i starając się zarazem zachować kompatybilność z wieloma prze-
glądarkami, musisz przetestować pliki w tych wszystkich przeglądarkach, które są dla
Ciebie istotne. Większość przeglądarek jest bezpłatna lub dostępna w postaci oprogra-
mowania typu shareware. Wystarczy odnalez
ć je w Sieci, ściągnąć i zainstalować. Dzięki
testom uzyskasz pojęcie o tym, jak różne przeglądarki interpretują poszczególne znacz-
niki, które z rozszerzeń jest uniwersalne, a które wymaga alternatywnych rozwiązań dla
starszych wersji przeglądarek. Dowiesz się również, które znaczniki możesz spokojnie
stosować, bez obawy o ich interpretację przez inne przeglądarki.
Publikowanie w sieci
Publikowanie w sieci nie różni się od zwykłego pisania. Chociaż to, co piszesz, nie jest
przesyłane w postaci zamkniętego w kopercie listu, jest jednak jakąś formą publikacji
i stanowi odbicie Ciebie i Twojej pracy. A ponieważ to, co piszesz, jest prezentowane
w sieci, jest więc bardziej ulotne dla Twoich czytelników i wymaga stosowania się do
pewnych zasad dobrego pisania, bowiem Twoi czytelnicy nie będą pobłażliwi.
Sieć jest pełna informacji, czytelnik nie poświęci Ci swojego czasu, jeśli uraczysz go
stronÄ… z
le zorganizowaną i pełną błędów. Po paru chwilach walki z taką stroną podda
się i przejdzie do innych stron. W końcu do dyspozycji ma ich kilkanaście milionów.
Nie twierdzę, że musisz stać się profesjonalnym pisarzem, by stworzyć dobrą stronę
WWW, ale parę rad jak pisać, by strona była łatwa do czytania i zrozumienia, na pewno
Ci siÄ™ przyda.
Pisz jasno i zwięz
le
Jeśli nie tworzysz Wielkiej Powieści Sieciowej, nie licz, że czytelnicy zjawią się na
Twoich stronach tylko dla okrąglutkich zdań. Najlepszym sposobem, aby to, co piszesz
było efektowne, jest stworzenie tekstu jasnego i zwięzłego, zaprezentowanie poszcze-
gólnych kwestii i na tym koniec. Zaciemnianie tego, co przekazujesz, dodatkowymi
słowami sprawi, że Twój punkt widzenia gdzieś się zagubi.
Jeśli nie masz książki Strunka i White a zatytułowanej  The Elements of Style , powi-
nieneś ją kupić. Kupić, przeczytać, następnie przeczytać jeszcze raz, przypomnieć so-
bie, oddychać nią, włożyć pod poduszkę, pokazać przyjaciołom, zacytować i uczynić
z niej swoje życie  oto moja rada. Nie ma lepszego przewodnika niż ona.
654 Część 8. Projektowanie efektywnych stron WWW
Organizuj strony w sposób przejrzysty
Nawet jeśli Twoja proza jest niezwykle jasna, zwięzła i ekscytująca, prawdopodobień-
stwo, że czytelnik rozpocznie czytanie od samego początku strony i przeczyta wszystko
bardzo uważnie aż do samego końca, jest raczej niewielkie. Przejrzysta organizacja
strony oznacza, iż czytelnik już na pierwszy rzut oka orientuje się, jakie kwestie są po-
ruszane na stronie. W zależności od tego, czego czytelnik oczekuje od Twojej strony,
będzie on  skanował głównie te elementy, które rzucają się mu w oczy  nagłówki,
połączenia i inne wyróżnione w tekście wyrazy. Być może przeczyta kilka akapitów,
a następnie przejdzie dalej. Pisząc i organizując strony w sposób ułatwiający takie  ska-
nowanie , pomożesz czytelnikom uzyskać potrzebne im informacje w najszybszy sposób.
Oto zalecenia, którymi powinieneś się kierować.
Podsumowując temat, korzystaj z nagłówków. Zwróć uwagę na sposób, w jaki w tej
książce stosowane są nagłówki. Dzięki nim możesz szybko znalez
ć interesujący Cię
temat. Ta sama zasada stosuje siÄ™ do stron WWW;
Stosuj listy. Wspaniale nadajÄ… siÄ™ do podsumowania odnoszÄ…cych siÄ™ do siebie
pozycji. Ilekroć masz powiedzieć coś w rodzaju  każdy kij ma dwa końce lub
 zastosuj następującą procedurę , skojarz to z listą numerowaną lub wypunktowaną;
Nie zapominaj o menu zawierającym połączenia. Forma listy sprawia, że menu
zawierające połączenia ma wszystkie zalety listy, będąc ponadto więcej niż
doskonałym narzędziem nawigacji;
Nie ukrywaj ważnych informacji w tekście. Jeśli chcesz poczynić istotną uwagę,
niech pojawi się ona u góry strony lub na początku akapitu. Długie akapity czyta się
gorzej, a ich skuteczność w przekazywaniu informacji jest mniejsza. Im głębiej
w treści akapitu umieścisz swoją uwagę, tym mniej prawdopodobne, że ktokolwiek
jÄ… przeczyta.
Rysunek 22.2 przedstawia tę technikę pisania, której powinieneś unikać.
Rysunek 22.2.
TÄ™ stronÄ™ trudno
 skanować
Rozdział 22. Tworzenie i projektowanie stron WWW 655
Ponieważ niemal wszystkie informacje na tej stronie prezentowane są w formie akapi-
tów, czytelnicy muszą przeczytać całość, aby odszukać to, o co im chodziło.
Jak poprawić stronę z rysunku 22.2? Spróbuj przerobić ją tak, aby czytelnicy mogli od
razu wyłapać główne kwestie. Rozważ te uwagi:
zawarte na stronie dwa akapity w rzeczywistości dotyczą dwóch odrębnych
tematów,
cztery składowe drinków to świetna okazja do wprowadzenia listy.
Rysunek 22.3 pokazuje, jak mogłaby wyglądać taka korekta.
Rysunek 22.3.
Ta trudna
w odbiorze strona
została odrobinę
poprawiona
Twórz strony, będące samodzielnymi całościami
Przygotowując strony pamiętaj, że Twoi czytelnicy mogą  wskoczyć na dowolną
z nich. Może się zdarzyć, że podzielisz dokument tak, iż część czwarta pojawia się po
części trzeciej, ale nie ma pomiędzy nimi połączeń. Niech ktoś z Twoich czytelników
utworzy połączenie prowadzące do części czwartej. Wówczas inni będą trafiać do czę-
ści czwartej, nie będąc nawet świadomymi, że część trzecia w ogóle istnieje.
BÄ…dz
więc ostrożny, pisząc każdą ze stron i staraj się, by stanowiły one odrębne całości.
Oto rady, które powinny Ci pomóc:
Niech Twoje tytuły będą opisowe. Tytuł powinien informować nie tylko o temacie
strony, ale także o jej pozycji względem innych stron prezentacji, której jest częścią;
Umieść na stronie połączenia nawigacyjne. Jeśli strona jest tematycznie związana
ze stroną poprzednią, to umieść na niej połączenie, które pozwoli wrócić na tę stronę
(być może należy także umieścić na niej połączenie do strony nadrzędnej);
Unikaj jako zdań otwierających zdań typu:  Możesz rozwiązać ten problem
poprzez&  ,  Po wykonaniu tego zrób&  i  Korzyści tej metody to&  ,
gdy informacje, do których się odnosisz, są na innej stronie, wyrazy  to, tego, ten ,
nic nie wnoszą, wpędzają jedynie czytelnika w konfuzję;
656 Część 8. Projektowanie efektywnych stron WWW
Ostrożnie stosuj wyróżnienia
Wyróżnienia należy stosować sporadycznie. Akapity zawierające tekst pogrubiony, kur-
sywę i wyrazy pisane samymi wielkimi literami są nieczytelne i to zarówno, gdy stosu-
jesz te elementy często, jak i wówczas, gdy wyróżniasz w ten sposób długie fragmenty
tekstu. Najskuteczniejsze jest wyróżnianie krótkich wyrazów (takich jak I, TO, BUT,
LUB, ORAZ, itp.).
Tekst prezentacyjny połączenia jest także formą wyróżnienia. Staraj się więc, by był
krótki. Unikaj przekształcania całych akapitów w połączenia.
Rysunek 22.4 stanowi ilustrację szczególnie złego stosowania wyróżnień w tekście.
Rysunek 22.4.
Zbyt wiele wyróżnień
Jeśli usuniemy pogrubienie tekstu i skrócimy tekst prezentacyjny połączeń, czytelnik
nie będzie tak rozpraszany jak poprzednio (zobacz rysunek 22.5).
Rysunek 22.5.
Mniej wyróżnień
Szczególnie oszczędnie powinieneś stosować wyróżnienia tam, gdzie tekst porusza się
lub zmienia, na przykład, gdy korzystasz na stronie z opcji Marquee, migającego tekstu
bÄ…dz
animacji. O ile animacja nie jest centralnym elementem strony, ruch i dz
więk tak-
że powinny być oszczędnie używane, aby reszta strony nie rozpraszała.
Nie stosuj terminologii typowej dla danego typu przeglÄ…darek
Unikaj w swoim tekście odwoływania się do charakterystycznych opcji specyficznych
przeglądarek. Nie stosuj słownictwa przytoczonego poniżej:
 kliknij tutaj  cóż bowiem mają począć użytkownicy przeglądarek, które nie są
obsługiwane za pomocą myszy? Bardziej stosowne będzie ogólne wyrażenie:
Rozdział 22. Tworzenie i projektowanie stron WWW 657
 Wybierz to połączenie (oczywiście powinieneś przede wszystkim unikać
określenia  tutaj );
 by zapisać stronę, rozwiń menu File i wybierz Save  każda przeglądarka
ma swoje specyficzne menu i inne sposoby osiągania tego samego celu. Jeśli
to możliwe, unikaj odwoływania się do specyfiki działania danej przeglądarki;
 skorzystaj z przycisku Back, by powrócić do poprzedniej strony  poprzednia
uwaga jest słuszna także i w tym wypadku. Zestawy przycisków w różnych
przeglądarkach mogą się różnić, podobnie jak metody przemieszczania się wstecz.
Jeśli zależy Ci, by czytelnicy byli w stanie powrócić do poprzedniej
lub jakiejkolwiek innej strony, stosuj połączenia.
Sprawdzaj ortografię i składnię
Wymaganie korygowania stron pod względem poprawności ortograficznej i gramatycz-
nej może wydawać się czymś oczywistym, ale widziałam w sieci tak wiele stron z błę-
dami obu rodzajów, że uwaga ta warta jest zapamiętania.
Proces projektowania stron WWW i udostępniania ich w sieci przypomina pod pewny-
mi względami cykl wydawniczy książki, czasopisma czy też proces produkcyjny jakie-
goś produktu. Publikowanie w sieci jest oczywiście znacznie łatwiejsze, niż wydawanie
książek i czasopism, ale łatwość nie może oznaczać niechlujności.
Tysiące ludzi będzie czytało i badało udostępnione przez Ciebie treści. Błędy ortogra-
ficzne i gramatyczne z
le odbijÄ… siÄ™ na Twojej pracy, na Tobie i poruszanej przez Ciebie
tematyce. Czytelnicy mogą się poczuć na tyle zirytowani, że poprzestaną na przegląd-
nięciu strony głównej, nawet jeśli poruszana przez Ciebie tematyka jest fascynująca.
Projektowanie i układ strony
Chociaż w kwestiach projektowania możliwości HTML-a i sieci są raczej ograniczone,
to ciągle jednak wiele masz do dyspozycji. Z drugiej strony, pozbawieni talentu twórcy
także mają szansę stworzenia czegoś naprawdę okropnego.
Naczelną zasadą, którą należy się kierować przy projektowaniu stron WWW, jest zasa-
da maksymalnej prostoty. Zredukuj liczbę elementów, obrazów, nagłówków, linii po-
ziomych i postaraj się, by wzrok czytelnika padał w pierwszej kolejności na najistot-
niejsze części strony.
Niech to będzie kardynalna zasada postępowania. Pamiętaj o niej, czytając następne
podrozdziały, prezentujące inne sugestie dotyczące projektowania i układu strony.
658 Część 8. Projektowanie efektywnych stron WWW
Stosuj nagłówki jako nagłówki
W wielu przeglądarkach graficznych nagłówki wyświetlane są czcionką większą lub
pogrubioną. Z tego względu skorzystanie ze znacznika nagłówka w celu wyróżnienia,
na przykład, ostrzeżenia, uwagi lub fragmentu zwykłego tekstu, jest często kuszące.
Przykład takiego wykorzystania nagłówków pokazany jest na rysunku 22.6.
Rysunek 22.6.
Nieprawidłowe
zastosowanie nagłówka
Nagłówki sprawdzają się najlepiej jako nagłówki, gdyż dominują nad pozostałym tek-
stem i sygnalizują rozpoczęcie nowego tematu. Jeśli naprawdę musisz wyróżnić jakiś
fragment tekstu, rozważ możliwość skorzystania z małego obrazu, linii poziomej lub
jeszcze innej metody. Na rysunku 22.7 pokazany jest alternatywny sposób wizualnego
wyróżnienia tekstu z poprzedniego rysunku.
Rysunek 22.7.
Oto lepszy sposób
wyróżnienia tekstu
Grupuj informacje wiążące się ze sobą
Grupowanie odnoszÄ…cych siÄ™ do siebie informacji to zadanie z pogranicza pisania
i projektowania. Gromadząc takie informacje pod odpowiednimi nagłówkami, tak jak
sugerowałam w podrozdziale   Publikowanie w Sieci , poprawiasz czytelność strony.
Odpowiednie sekcje tematyczne można rozdzielić wizualnie, co podkreśli ich odręb-
ność i zwróci uwagę na logiczny ciąg tematyczny w obrębie sekcji.
Jeśli na stronie WWW istnieje kilka sekcji, spróbuj wymyślić coś, by je oddzielić, na
przykład, za pomocą nagłówków lub linii poziomej

---

, tak jak pokazano na rysunku
22.8.
Rozdział 22. Tworzenie i projektowanie stron WWW 659
Rysunek 22.8.
Oddzielaj wizualnie
sekcje tematyczne
Stosuj spójny układ
Czytając książkę lub czasopismo zauważyłeś zapewne, że każda strona, każdy rozdział,
mają zazwyczaj ten sam układ. Numery stron umieszczone są tam, gdzie ich oczeku-
jesz, a pierwszy wyraz pojawia siÄ™ zawsze w tym samym miejscu.
Ta sama zasada powtarzalności sprawdza się w odniesieniu do prezentacji WWW. Jed-
nolita forma stron daje czytelnikowi komfort pracy, po przeczytaniu dwóch lub trzech
stron wie już, co i gdzie znajdzie na kolejnej stronie. Jeśli Twój projekt jest zwarty, czy-
telnicy odszukają potrzebne im informacje i będą mogli nawigować bez konieczności
zatrzymywania się na każdej stronie, by określić umiejscowienie elementów.
Oto cechy zwartego układu strony.
konsekwentne stosowanie elementów strony  jeśli na jednej ze stron skorzystałeś
z nagłówka

, by przedstawić główne tematy, w ten sam sposób postępuj
na pozostałych stronach. Jeśli strona rozpoczyna się nagłówkiem podkreślonym
linią poziomą, taki sam układ powinien pojawić się na reszcie stron;
konsekwentne formy nawigacji  na kolejnych stronach umieszczaj menu
nawigacyjne zawsze w tym samym miejscu (zazwyczaj u dołu lub u góry strony)
i staraj się nie zmieniać ich liczby. Jeśli masz zamiar korzystać z ikon
nawigacyjnych, pamiętaj, by na każdej stronie były to te same ikony, ułożone w tym
samym porzÄ…dku;
zewnętrzne arkusze stylów  jeśli chcesz postępować zgodnie z zaleceniami
HTML 4.0, to możesz stworzyć główny arkusz stylów definiujący właściwości tła,
kolory tekstu i połączeń, stosowane kroje czcionek i ich rozmiar, wielkość
marginesów, itd. Stosując ten arkusz stylów, uzyskasz to, że wszystkie strony
wchodzące w skład witryny zachowają spójny wygląd.
660 Część 8. Projektowanie efektywnych stron WWW
Stosowanie połączeń
Bez połączeń strony WWW byłyby beznadziejnie nudne, a znalezienie w sieci czego-
kolwiek interesującego, praktycznie niemożliwe. Jakość Twoich połączeń jest równie
ważna jak samo projektowanie i tworzenie strony. Oto moje przyjacielskie rady odno-
śnie definiowania i stosowania połączeń.
Dbaj o to, by tekst prezentacyjny połączeń
zawartych w menu był opisowy
Jak już wspomniałam wcześniej, stosowanie menu zawierających połączenia to wspa-
niały sposób organizowania strony i połączeń na niej umieszczonych. Gromadząc połą-
czenia na listach lub w strukturach przypominających menu, ułatwisz czytelnikowi
szybkie zorientowanie się w możliwościach wyboru strony.
Jednak samo umieszczenie połączeń w menu nie wystarczy. Tworząc menu zawierające
połączenia, musisz dbać o to, by tekst prezentacyjny połączeń nie był zbyt krótki. Nie-
wątpliwie kuszące wydaje się zastosowanie jako tekstu prezentacyjnego nazw plików
lub innych krótkich nazw, jak pokazano na rysunku 22.9.
Rysunek 22.9.
Bardzo ascetyczne menu
No tak, w tym menu mamy połączenia, których tekst prezentacyjny wskazuje nazwę
rzeczywistej strony, ale nie opisuje jej zawartości. Skąd czytelnicy mają wiedzieć, co
jest po drugiej stronie połączenia? Czy, bazując na tak skromnych informacjach, mogą
uznać, że warto skorzystać z połączenia? Z trzech zaproponowanych połączeń tylko
ostatnie (pesto.recipe) zawiera niewielką sugestię, czego można spodziewać po
skoku do wskazanego pliku.
Bardziej sensownie byłoby dodać krótki tekst o zawartości pliku, tak jak pokazano na
rysunku 22.10 lub całkowicie zrezygnować z nazw plików (bo kogo one obchodzą)
i opisać zawartość, zachowując postać menu, przy czym tekst połączenia podświetlić
(rysunek 22.11).
Obie propozycje są lepsze, niż opcja zaprezentowana na rysunku 22.9, bowiem infor-
mują czytelnika o tym, co jest po drugiej stronie połączenia.
Rozdział 22. Tworzenie i projektowanie stron WWW 661
Rysunek 22.10.
Lepsze menu połączeń
Rysunek 22.11.
Jeszcze inne,
lepsze menu linków
Umieszczaj połączenia w tekście
Najlepszym sposobem wprowadzenia połączeń do tekstu jest napisanie tekstu bez połą-
czeń; tak właśnie jest, gdy piszesz tekst, który chcesz wydrukować. Następnie, w napi-
sanym tekście podświetlasz odpowiednie wyrazy, które staną się tekstem prezentacyj-
nym tworzonych połączeń. Pamiętaj, by wstawiając połączenie, nie zburzyć układu
strony. Główną zasadą jest, aby o układzie tekstu nie decydowały połączenia, ale sama
treść. W ten sposób połączenia staną się z
ródłem dodatkowych lub uzupełniających in-
formacji, z których czytelnicy mogą skorzystać, o ile zechcą.
Rysunek 22.12 przedstawia kolejny przykład stosowania połączeń w tekście. W tym
przypadku sam tekst nie jest istotny, jego rolą jest wspomaganie połączeń. Jeśli stosu-
jesz tekst tylko do ich opisu, rozważ zastąpienie akapitów listami połączeń. Dzięki temu
czytelnicy łatwiej znajdą potrzebne im informacje. Zamiast czytać cały akapit, mogą
szybko przebiec listÄ™ wzrokiem, by znalez
ć potrzebną informację.
Rysunek 22.12.
Te połączenia
nie działają dobrze
662 Część 8. Projektowanie efektywnych stron WWW
Na rysunku 22.13 możesz zobaczyć jeden ze sposobów zmiany wyglądu strony przed-
stawionej w poprzednim przykładzie. Najważniejszymi elementami strony jest tytuł
konferencji oraz nazwy i daty zaplanowanych spotkań. A zatem mógłbyś zmienić wy-
gląd strony w taki sposób, aby właśnie te informacje zostały wyróżnione. Jak możesz
się przekonać na rysunku 22.13, przedstawiając terminarz spotkań w formie tabeli pre-
formatowanego tekstu, można wyróżnić najważniejsze informacje spośród całej zawar-
tości strony.
Rysunek 22.13.
Zmiana postaci połączeń
Chyba najłatwiejszym sposobem stwierdzenia, czy połączenia utworzone są poprawnie,
jest wydrukowanie sformatowanej strony z przeglÄ…darki. Czy w formie wydrukowanej,
pozbawionej hiperpołączeń, akapity mają nadal sens? Jeśli strona sprawia dziwaczne
wrażenie na papierze, tak samo będzie w sieci. Nie zawsze zmiany wprowadzane
w wyglądzie strony muszą być aż tak drastyczne, jak w przedstawionym wcześniej
przykładzie. Czasami wystarczy wprowadzić w tekście niewielkie modyfikacje, by stał
się on czytelny zarówno na papierze, jak na ekranie.
Unikaj używania słowa  tutaj
Powszechny błąd czyniony przez wielu autorów stron WWW w trakcie definiowania
połączeń, to namiętne stosowanie słowa  tutaj . Można wręcz tę skłonność nazwać
syndromem. Syndrom ten to tendencja to tworzenia w tekście połączeń, których tekst
prezentacyjny to jeden wyraz   tutaj . Spójrz na przykłady (podkreślony tekst ozna-
cza tekst prezentacyjny połączenia).
Tutaj znajdziesz informacje na temat oswajania strusi.
Wybierz to połączenie, aby poznać szczegóły budowy silnika.
Rozdział 22. Tworzenie i projektowanie stron WWW 663
Ponieważ na stronie WWW połączenia są podświetlane, bardziej rzucają się w oczy, niż
otaczający je tekst (a języku projektowania graficznego powiedzielibyśmy, że bardziej
przyciągają wzrok). Czytelnicy najpierw zobaczą połączenie, a dopiero potem zacznie
do nich docierać tekst. Spróbuj utworzyć takie połączenia. Na rysunku 22.14 przedsta-
wiony jest przykład potwornego w swym ogromie syndromu  tutaj . Zamknij oczy,
a następnie otwórz je szybko, od razu ujrzysz mnóstwo rzucających się w oczy połączeń
 tutaj , ale dłuższą chwilę zajmie Ci określenie, po co one tam są.
Rysunek 22.14.
Syndrom  tutaj
Spróbuj teraz to samo ćwiczenie przeprowadzić z poprawnie zorganizowanym menu
zawierającym połączenia (patrz rysunek 22.15).
Rysunek 22.15.
Ta sama strona
co poprzednio, ale o ileż
lepsza organizacja!
Ponieważ słowo  tutaj nic nie mówi o samym połączeniu, Twoi biedni czytelnicy mu-
szą analizować tekst przed i za połączeniem, by samemu określić, co oznacza sławne
 tutaj . Jeśli akapit zawiera wiele połączeń  tutaj lub podobnych, nic nie mówiących,
zmusza to czytelnika do ciężkiej pracy.
Zamiast połączenia w takiej formie:
Tutaj znajdziesz informacje na temat oswajania strusi.
lepszym rozwiązaniem byłoby takie:
Palo Alto Zoo udzieli Ci informacji na temat oswajania strusi.
Połączenia  tworzyć czy nie tworzyć
Podobnie jak w przypadku umieszczania grafiki, ilekroć tworzysz połączenie, zastanów
się nad powodami łączenia dwóch stron lub sekcji. Czy połączenie będzie użyteczne?
Czy rzeczywiście da czytelnikowi dostęp do dodatkowych informacji? Czy zbliży go do
celu? Czy połączenie jest istotne z punktu widzenia omawianych treści?
664 Część 8. Projektowanie efektywnych stron WWW
Każde połączenie musi służyć określonemu celowi. Twórz połączenia z istotnych po-
wodów. Tylko dlatego, że gdzieś na stronie pojawia się słowo kawa, nie musisz tworzyć
połączenia do strony głównej kompanii kawowej. Być może byłoby to całkiem miłe, ale
jeśli połączenie nie miałoby związku z bieżącą zawartością, wprowadzałoby czytelnika
w głębokie zdziwienie.
Ten podrozdział opisuje pewne, użyteczne na stronach WWW, kategorie połączeń. Jeśli
Twoje połączenia nie mieszczą się w żadnej z tych kategorii, zastanów się nad powo-
dami umieszczania ich na stronie.
Dziękuję Nathanowi Torkingtonowi za jego  Taxonomy of Tags opublikowaną w liście
dyskusyjnej www talk, która zainspirowała ten podrozdział.
Połączenia lokalnej nawigacji wskazują czytelnikom ścieżki, którymi mogą się prze-
mieszczać po Twoich stronach WWW: naprzód, wstecz, wyższy poziom, strona głów-
na. Połączenia te często są reprezentowane przez ikony nawigacyjne, takie jak pokazane
na rysunku 22.16.
Rysunek 22.16.
Połączenia
lokalnej nawigacji
Połączenia zewnętrzne, pokazane na rysunku 22.17, różnią się od lokalnych tym, że
z tekstu połączenia nie wynika, iż nastąpi przeniesienie do innej strony. Menu zawiera-
jące połączenia to najlepszy przykład połączeń takiego typu. Podświetlony tekst połą-
czenia to wskazówka, że wybranie go dostarczy dodatkowych informacji na wskazany
tekstem prezentacyjnym temat, aczkolwiek sam tekst tego nie mówi. Główną różnicę
pomiędzy połączeniami lokalnymi a zewnętrznymi widać na wydruku, jeśli wydruku-
jesz stronę zawierającą oba typy połączeń, bardzo możliwe jest, że nie będziesz w stanie
stwierdzić, dokąd prowadzą połączenia zewnętrzne.
Rysunek 22.17.
Połączenia zewnętrzne
Rozdział 22. Tworzenie i projektowanie stron WWW 665
Połączenia zewnętrzne mogą być zorganizowane w struktury przypominające spis treści.
Wyrazy lub definicje wspaniale nadają się na połączenia, szczególnie, gdy tworzysz du-
że prezentacje zawierające glosariusze. A
Ä…czÄ…c pierwsze wystÄ…pienie wyrazu z jego de-
finicją, możesz wyjaśnić jego znaczenie tym czytelnikom, dla których wyraz nie jest
znany, nie rozpraszając tych, którzy wiedzą, co on znaczy. Rysunek 22.18 prezentuje
ten typ połączenia.
Rysunek 22.18.
Połączenia definicje
Ostatnim omawianym typem połączeń są połączenia do informacji dodatkowych i uzu-
pełniających. Są one cenne w sytuacji, gdy dodatkowy tekst, umieszczony na stronie,
odciągałby uwagę od podstawowego tematu. Odpowiadają one stopkom lub przypisom
w tekście drukowanym (patrz rysunek 22.19). Mogą prowadzić do odnośników do in-
nych prac lub do dodatkowych informacji, które są interesujące, ale nie związane bezpo-
średnio z omawianym tematem.
Rysunek 22.19.
Połączenia stopki
Uważaj, by nie przesadzić z ilością połączeń do definicji i dodatkowych informacji. Je-
śli będzie ich zbyt wiele, czytelnicy nie będą mieli czasu na śledzenie tematu podsta-
wowego. Unikaj tworzenia połączeń przy każdej okazji, powinny się one pojawiać tylko
tam, gdzie rzeczywiście prowadzą do ważnych informacji wiążących się z Twoim tek-
stem. Unikaj także powielania połączeń, na przykład, tworząc połączenia od każdego
wystąpienia na stronie liter WWW do strony głównej W3C. Jeśli do tego samego miej-
sca strony prowadzą dwa połączenia lub więcej, rozważ rezygnację z któregoś z nich.
Czytelnik będzie miał do dyspozycji pozostałe połączenia, jeśli temat go zainteresuje.
Obrazy
W rozdziale 7.   Wykorzystywanie obrazów, koloru i tła dowiedziałeś się już
wszystkiego na temat tworzenia obrazów i korzystania z nich na stronach WWW. Teraz
czas na podsumowanie.
666 Część 8. Projektowanie efektywnych stron WWW
Nie przesadz
z liczbą obrazów
Wstawiając obrazy na stronę WWW, zachowaj umiar. Oprócz tego, że każdy dodatkowy
obraz to dodatkowy czas ładowania strony, zbyt wiele obrazów na stronie sprawia wraże-
nie przeładowania i bałaganu, a na dodatek odwraca uwagę od kwestii, którą poruszasz.
Czasami twórcy stron WWW uważają, że im więcej obrazów wstawią na stronę, tym bę-
dzie ona lepsza. Rysunek 22.20 prezentuje przykład przeładowania strony obrazami.
Rysunek 22.20.
Zbyt wiele obrazów
Przypomnij sobie moje podpowiedzi z rozdziału 7.   Wykorzystywanie obrazów, ko-
loru i tła . Zanim umieścisz obraz na stronie, zastanów się, czy rzeczywiście jest on
niezbędny. Jeśli jego obecność nic nie wnosi, daj sobie z nim spokój.
Rozdział 22. Tworzenie i projektowanie stron WWW 667
Stosuj tekst alternatywny
Oczywiście, skoro wspominam o obrazach, muszę również przypomnieć, że nie wszyst-
kie przeglądarki mogą je wyświetlać. Wśród potencjalnych odbiorców Twoich stron są
także użytkownicy przeglądarek tekstowych. Projektując strony, powinieneś wziąć ich
pod uwagę. Do wyboru masz dwie możliwości:
zastosowanie atrybutu ALT znacznika tak, by w przeglÄ…darkach tekstowych
grafika była automatycznie zastępowana odpowiednim napisem (w HTML-u 4.0
atrybut ten jest obowiązkowy). Może to być opis zastępowanego obrazu,
jeżeli stworzenie dwóch wersji strony  dla przeglądarek graficznych i dla
tekstowych  jest zbyt pracochłonne, a rezultat nie jest zadawalający, rozważ
możliwość napisania dwóch osobnych stron przeznaczonych dla odpowiednich
typów przeglądarek. Następnie wyposaż swoją stronę główną w opcje wyboru.
Stosuj małe obrazy
Jeśli umieszczasz na stronie obrazy, pamiętaj, że każdy z nich to osobne połączenie
i dodatkowy czas na jego załadowanie. Oznacza to, że każdy z obrazów wydłuża cał-
kowity czas ładowania strony. Staraj się ograniczać liczbę obrazów i dbaj o to, by były
one małe, zarówno pod względem wielkości pliku, jak i rzeczywistych wymiarów.
A oto szczególnie istotne rady:
zasada, jaką należy przyjąć, głosi, iż przy połączeniu modemowym o prędkości 28,8
kb/s strona będzie się ładowała w tempie 2 kB na sekundę. Cała strona (tekst plus
grafika) powinna załadować się w czasie nie dłuższym niż 30 sekund, w innym
bowiem razie ryzykujesz znudzenie czytelników, którzy w efekcie mogą
zrezygnować z dalszego oczekiwania. To ograniczenie czasowe implikuje,
iż zawartość strony nie może przekraczać 60 kB. Staraj się realizować ten wymóg
poprzez stosowanie niewielkich obrazów;
w przypadku większych obrazów, zastanów się, czy nie lepiej zaprezentować
na stronie głównej miniatury obrazów i na ich bazie utworzyć połączenia
do ich większych odpowiedników;
zapisuj pliki GIF z przeplotem.;
przetestuj zapis obrazu w formatach JPEG i GIF i sprawdz
, który z nich daje
w efekcie mniejszy plik;
w obrazach o formacie GIF im uboższa paleta kolorów, tym mniejszy plik.
Powinieneś ograniczać liczbę stosowanych kolorów, by uniknąć problemów
z alokacją kolorów;
możesz zmniejszyć fizyczny rozmiar obrazu, przycinając go (czyli wykorzystując
fragment obrazu) lub zmieniając jego skalę (zmniejszając). Przeskalowanie może
spowodować, że pewne szczegóły obrazu staną się nierozpoznawalne;
do dyspozycji masz także atrybuty WIDTH i HEIGHT, umożliwiają one powiększanie
obrazu. Początkowo były to rozszerzenia Netscape, ale obecnie są elementem
standardu HTML 3.2. Rezultat takiego skalowania może znacznie odbiegać
od Twoich oczekiwań, przetestuj procedurę, zanim ją zastosujesz.
668 Część 8. Projektowanie efektywnych stron WWW
Pamiętając o powyższych sugestiach, przyjrzyj się jeszcze raz obrazom umieszczonym
na stronie. Naprawdę chcesz użyć tych wszystkich różnych obrazów, gdyż bardzo Ci się
podobają. W jaki sposób można by zmodyfikować stronę przedstawioną na rysunku 22.20
i poprawić jej wygląd?
Jeśli chodzi o wielkości obrazów, można by nieco zmniejszyć obraz umieszczony na
samym początku strony i służący jako jej logo. Zważywszy, iż jest to w zasadzie wy-
łącznie graficzny nagłówek i nie zawiera żadnych połączeń, możesz przerobić ten obraz
i o połowę zmniejszyć jego wysokość. Dzięki temu, czas pobierania także skróci się
niemal o połowę.
Kolejny problem, jaki trzeba rozwiązać, dotyczy faktu, iż tytuł strony (w tym przypad-
ku, jest nim tytuł witryny) w ogóle nie pojawia się na niej w formie tekstowej. Oznacza
to, że osoby odwiedzające witrynę, które w przeglądarkach wyłączyły wyświetlanie ob-
razów, w ogóle nie będą znały jej nazwy! W poprawionej wersji strony musi się znalez
ć
tytuł w formie tekstowej.
Dużym problemem są te poziome, graficzne linie. Po pierwsze, jest ich zbyt dużo. Po
drugie, ze względu na swą szerokość zmniejszają znaczenie grafiki tytułowej. Po trze-
cie, odciągają uwagę osób oglądających stronę od listy, gdyż oddzielają do siebie jej
poszczególne punkty. Z tego względu zmniejszymy ilość i wielkość tych obrazów.
Graficzne punkty wyświetlane przed każdym z elementów listy są za duże. Z powodze-
niem można zredukować ich wielkość o 50%. Z reguły wielkość punktów używanych
do oznaczania elementów list nie przekracza 30×30 pikseli.
Punkty oraz tekst został wyśrodkowany na stronie, przez co lista wydaje się być niezor-
ganizowana. Używając obrazów do oznaczania elementów listy, można to zrobić na
kilka różnych sposobów. Możesz zdefiniować obraz jako  oficjalne oznaczenie ele-
mentów listy, używając w tym celu znacznika

i określając obraz za pomocą atry-
butu SRC. Jednak w przeglÄ…darkach zgodnych ze specyfikacjÄ… HTML 3.2 oraz wcze-
śniejszych, zostaną wykorzystane standardowe sposoby oznaczania elementów listy.
Inną metodą jest umieszczenie obrazów oraz zawartości poszczególnych elementów li-
sty w tabeli o niewidocznych krawędziach. Wszystkie sugerowane usprawnienia zostały
przedstawione na rysunku 22.21.
Ostrożnie z założeniami
Wielu autorów stwarza problemy swoim czytelnikom poprzez przyjmowanie nieostroż-
nych założeń odnośnie ich sprzętu. Gdy przygotowujesz strony WWW bądz
tak miły
i pamiętaj o dwóch rzeczach:
Nie należy zakładać, że u każdego użytkownika wymiary okna przeglądarki są
takie same, jak u Ciebie. Jeśli ogromny obraz GIF jest idealnie dopasowany do
szerokości okna Twojej przeglądarki, nie oznacza to wcale, że tak będzie gdzie
indziej. Zbyt szerokie obrazy zmuszajÄ… czytelnika do nieustannej zmiany wymiaru
okien lub przewijania. Aby Twoje obrazy mieściły się w większości okien
przeglądarek, nie przekraczaj szerokości 450 pikseli;
Rozdział 22. Tworzenie i projektowanie stron WWW 669
Rysunek 22.21.
Tak należy postępować
 lepszy sposób
wykorzystania obrazów
Nie należy zakładać, że wszyscy korzystają z monitorów kolorowych. Przetestuj
obrazy z użyciem mniejszej niż maksymalna palety kolorów  często programy
do edycji obrazów wyposażone są w taką opcję. Wielu z Twoich czytelników
korzysta z monitorów o szesnastu kolorach lub nawet monochromatycznych.
Rezultaty testu mogą Cię zadziwić, w wersji monochromatycznej kolorowe obrazy
wyglądają inaczej i zupełnie odbiegają od tego, co zamierzałeś pokazać. Sprawdz

także, jak wyglądają obrazy w różnych rozdzielczościach  możesz stworzyć
wersje obrazu o niskiej i wysokiej rozdzielczości, a następnie umożliwić
czytelnikowi wybór.
Nie przesadzaj z kolorami tła i połączeń
Dzięki rozszerzeniom HTML możesz stosować na swoich stronach kolorowe i wzorzy-
ste tła oraz zmieniać kolor tekstu. Wykorzystanie tej możliwości jest bardzo kuszące,
ale powinieneś zachować umiar. Tworząc fantazyjne i barwne tła, możesz sprawić, że
strona przestanie być czytelna. Oto kilka podpowiedzi, które pozwolą uniknąć takich
problemów:
Zadbaj o to, by kolory pierwszego planu (tekstu) kontrastowały z kolorami tła.
SÅ‚aby kontrast utrudnia czytanie. Ponadto jasny tekst na ciemnym tle jest trudniejszy
w odbiorze niż ciemny tekst na jasnym tle;
Unikaj ingerowania w domyślne kolory połączeń. Twoi czytelnicy są do nich
przywiązani  niebieski oznacza połączenia nieodwiedzane, czerwony odwiedzane.
Zmiana kolorów może dezorientować;
Czasami zwiększenie rozmiaru czcionki za pomocą znacznika może
poprawić czytelność tekstu wyświetlanego na kolorowym tle. Zarówno tło,
jak i powiększenie czcionki będą ignorowane w przeglądarkach, które nie obsługują
znaczników Netscape;
670 Część 8. Projektowanie efektywnych stron WWW
Jeśli stosujesz wzorzyste tło, sprawdz
, czy wzór nie pokrywa się z tekstem.
Niektóre wzory wyglądają interesująco jako takie, ale umieszczony na nich tekst jest
nieczytelny. Pamiętaj, że tło ma być tłem. Subtelne wzorki zawsze będą lepsze,
niż te gryzące w oczy. Nie zapominaj także, że czytelnicy odwiedzają Twoją stronę
dla jej zawartości, nie po to, by podziwiać Twoje zdolności do tworzenia podróbki
marmuru za pomocą ulubionego edytora obrazów.
Jeśli masz wątpliwości, poproś kolegę, by przyjrzał się Twoim stronom. Ponieważ
znasz doskonale treść i konstrukcję strony, nie będziesz w stanie sam określić, jak się
stronę czyta. Ktoś, kto jej nie widział wcześniej na oczy i nie kieruje się Twoimi uprze-
dzeniami, lepiej będzie w stanie ocenić, jak kolory tła i tekstu współgrają ze sobą.
Oczywiście, musisz znalez
ć takiego kolegę, który będzie z Tobą szczery.
Inne dobre zwyczaje i podpowiedzi
W tym podrozdziale zebrałam różnorodne podpowiedzi i rady dotyczące dobrych zwy-
czajów obowiązujących w prezentacji WWW. Są to uwagi dotyczące wielkości po-
szczególnych stron i sposobów ich podpisywania.
Umieszczaj połączenie do strony głównej
Rozważ umieszczenie na każdej ze stron prezentacji połączenia do strony wyższego po-
ziomu lub do strony głównej. Dzięki niemu czytelnicy będą mogli szybko uciec, jeśli za
bardzo zagłębią się treść Twoich stron. Skorzystanie z połączenia do strony głównej jest
łatwiejsze niż powrotna nawigacja przez całą przebytą strukturę stron, nawet jeśli po-
wrót odbywa się za pomocą przycisku Back przeglądarki.
Nie rozdzielaj tematu między strony
Strona WWW działa najlepiej, jeśli tematycznie stanowi całość. Dana tematyka nie po-
winna być rozdzielana pomiędzy odrębne strony. Nawet jeśli łączysz je połączeniami,
przechodzenie między stronami może być dezorientujące. Ta dezorientacja będzie jesz-
cze większa, gdy czytelnik wskoczy na drugą lub trzecią stronę, nie rozumiejąc zupeł-
nie, o co tu chodzi.
Jeśli Twoim zdaniem temat jest zbyt obszerny, by można go było omówić na pojedyn-
czej stronie, zastanów się nad taką reorganizacją zawartości, która umożliwi podzielenie
treści na podtematy. Bardzo polecam ten sposób w przypadku tematów, które można
przedstawić w postaci hierarchicznej. Pozwala na dokładne określenie stopnia szczegó-
łowości każdego z poziomów hierarchii, a także wielkości i wypełnienia każdej ze stron.
Rozdział 22. Tworzenie i projektowanie stron WWW 671
Wyważ właściwie liczbę stron
Nie ma zasad określających liczbę stron w prezentacji, nie ma też ograniczeń, co do
wielkości poszczególnych stron. Możesz więc mieć jedną stronę lub tysiące, wszystko
zależy od tego, ile masz do powiedzenia i jak to zorganizujesz.
Mając to na względzie, mógłbyś zdecydować się na jedno z przedstawionych rozwiązań
ekstremalnych, każde z nich ma swoje wady i zalety. Powiedzmy, że umieszczasz całą
zawartość na jednej ogromnej stronie i tworzysz połączenia poszczególnych sekcji stro-
ny, tak jak pokazano to na rysunku 22.22.
Rysunek 22.22.
Jedna wielka strona
Zalety:
obsługa jednego pliku jest prostsza, a połączenia w nim zawarte nie zostaną
zerwane, nawet jeśli poprzesuwasz elementy lub zmienisz nazwę pliku,
pojedynczy plik jest najbliższy pod względem struktury dokumentowi spoza sieci,
jeśli więc rozprowadzasz dokumenty zarówno w postaci wydruku, jak i w sieci,
operowanie pojedynczym plikiem ułatwi zadanie.
Wady:
załadowanie dużego pliku zabiera mnóstwo czasu, szczególnie w przypadku
wolnych łączy sieciowych, a trwa wieki, gdy strona zawiera wiele elementów
graficznych,
czytelnicy muszą przewijać stronę, by znalez
ć interesujący ich materiał, odszukanie
właściwych informacji staje się nużące, nawigacja do punktów innych niż początek
i koniec strony graniczy z niemożliwością,
struktura takiej strony jest nazbyt sztywna i liniowa, choć czytelnicy mogą
przeskakiwać między sekcjami strony, struktura całości przypomina dokument
drukowany, brak tu elastyczności układu małych stron powiązanych ze sobą
nieliniowymi połączeniami.
Drugie z ekstremalnych rozwiązań to mnóstwo małych stron z łączącymi je połącze-
niami (patrz rysunek 22.23).
672 Część 8. Projektowanie efektywnych stron WWW
Rysunek 22.23.
Mnóstwo małych stron
Zalety:
małe strony ładują się szybko,
często całkowicie mieszczą się na ekranie, a więc prezentowane informacje są
widoczne na pierwszy rzut oka.
Wady:
zmorą takiego rozwiązania jest obsługa połączeń, niewielkie zmiany w strukturze
nawigacyjnej mogą spowodować jej załamanie się,
zbyt wielka liczba połączeń może irytować, śledzenie podstawowego wątku jest
utrudnione, jeśli czytelnik większość czasu spędza na skakaniu między stronami.
Jakie jest rozwiązanie? Często jest narzucane poprzez samą tematykę, którą poruszasz,
szczególnie, jeśli stosujesz się do rady: jeden temat na jedną stronę. Testowanie stron
na różnych platformach i przy różnych prędkościach przesyłu pozwoli Ci stwierdzić,
w którym momencie strona staje się zbyt obszerna. Jeśli tracisz wiele czasu na przewi-
janie zawartości lub zbyt długo czekasz na załadowanie, to znak, że strona jest za duża.
Podpisuj swoje strony
U dołu każdej strony powinna pojawiać się informacja, która pełni rolę Twojego podpisu.
Wspominałam o tym w rozdziale 5.   Więcej o formatowaniu tekstu w HTML-u , przy
okazji omawiania znacznika
. Ten właśnie znacznik został wybrany celowo.
Zastanów się nad umieszczeniem w znaczniku
takich oto użytecznych in-
formacji, które będą pojawiać się na każdej stronie:
informacje dotyczÄ…ce kontaktowania siÄ™ z autorem strony WWW lub osobÄ… za
stronę odpowiedzialną, potocznie zwaną  Webmaster-em . Powinny one zawierać
przynajmniej nazwisko tej osoby, a najlepiej jej adres e-mail;
status strony. Czy jest ukończona? A może w trakcie aktualizacji? Czy celowo
pozostawiono jÄ… pustÄ…?
data ostatniej aktualizacji. Ta informacja jest szczególnie ważna w przypadku stron,
które często podlegają zmianom. Umieszczaj datę na każdej z nich,
aby było wiadomo kiedy powstały;
Rozdział 22. Tworzenie i projektowanie stron WWW 673
informacje dotyczÄ…ce praw autorskich i handlowych  o ile takowe prawa
obowiÄ…zujÄ…;
adres URL strony. Umieszczenie w tekście adresu URL strony, która jest osiągalna
pod tym właśnie adresem, może wydawać się lekką przesadą, ale jak sobie poradzić,
gdy wydrukujesz stronę, a wszelkie odnośniki do niej zaginą w stercie papierów
na biurku? Skąd ona się wzięła? Często zdarzało mi się gubić adresy URL i zawsze
żałowałam, że nie są wpisane w samym dokumencie.
Rysunek 22.24 pokazuje, jak powinien wyglądać blok adresowy.
Rysunek 22.24.
Przykładowy adres
A
adnym posunięciem byłoby połączenie adresu URL Mailto z tekstem zawierającym
adres e-mail Webmastera. Oto przykład:


Laura Lemay [e-mail]


W ten sposób czytelnicy, których przeglądarki obsługują adresy URL Mailto, mogą po
prostu wybrać utworzone przez Ciebie połączenie i wysłać pocztę do właściwej osoby
odpowiedzialnej za stronę, bez konieczności przepisywania adresu.
Skojarzenie połączeń z adresami URL Mailto będzie działało tylko w przeglądarkach, które je
obsługują. Nawet w przeglądarkach nie akceptujących tych adresów tekst połączenia będzie
wyświetlany w zwykły sposób, umieść więc połączenie.
W końcu, jeśli nie chcesz zaburzać porządku stron masą danych personalnych i prawa-
mi autorskimi, możesz przygotować osobną stronę, która zawiera te informacje. Na-
stępnie na każdej ze stron umieść połączenie do tej sygnatury. Oto przykład:


Prawa autorskie i informacje
kontaktowe.


Udostępniaj wersje stron HTML nie korzystające z hipertekstu
Pomimo, że sieć udostępnia nowe i ekscytujące sposoby tworzenia stron WWW, niektó-
rzy czytelnicy ciągle wolą czytać tekst strony bez korzystania z połączenia z serwerem,
w autobusie lub przy śniadaniu. Dla takich czytelników strony hipertekstowe to poważ-
ny problem, bowiem w przypadku takich dokumentów trudno jest nakazać przeglądarce
 drukuj wszystko  przeglądarka może wydrukować daną stronę, ale nie kolejne,
wskazywane przez połączenia.
674 Część 8. Projektowanie efektywnych stron WWW
Jeśli dla Ciebie sieć to miejsce publikowania wszystkiego, co może być czytane i uży-
wane poza nią, rozważ możliwość przygotowania wersji zapisanej czystym tekstem lub
PostScriptem. Możesz następnie udostępniać taki plik do ściągania. W ten sposób Twoi
czytelnicy mogą zarówno przeglądać dokument w sieci, jak i wydrukować go, aby czy-
tać z dala od komputera. Połączenie do wersji tekstowej może nawet pojawić się na po-
czątku wersji hipertekstowej, tak jak w poniższym przykładzie:
Wersja PostScriptowa
tego pliku jest dostępna przez ftp myhome.com w katalogu
/pub/mydir/myfile/ps.
Oczywiście, umieszczenie w wersji tekstowej adresu URL wersji hipertekstowej także
byłoby wskazane:
Ten dokument jest również dostępny w wersji tekstowej w WWW pod adresem
URL:
http://myhome.com/pub/mydir/myfile.index.html
Podsumowanie
Oto lista zaleceń i przestróg dotyczących zasad projektowania stron WWW, wynikająca
z tego rozdziału:
Zrozum różnice między HTML 2.0, HTML 3.2, HTML 4.0 oraz poszczególnymi
 wersjami HTML 4.0 i XHTML 1.0. Określ, jaką strategię projektowania należy
wykorzystać podczas stosowania wybranej specyfikacji HTML;
Stosując niestandardowe znaczniki HTML, staraj się pamiętać o przygotowaniu
rozwiązań zastępczych;
Testuj strony w wielu przeglÄ…darkach.;
Pisz w sposób zwięzły i zwarty;
Organizuj tekst, tak by czytelnicy na pierwszy rzut oka byli w stanie wychwycić
ważniejsze informacje;
Unikaj tworzenia stron, które są zależne tematycznie od stron poprzedzających
lub następnych, powinny stanowić samodzielne całości;
Nie nadużywaj atrybutów formatowania (takich jak pogrubienie, kursywa, wielkie
litery, tekst prezentacyjny połączenia, miganie, efekt marquee). Rzadko korzystaj
z wyróżniania tekstu; rób to tylko wtedy, gdy jest to rzeczywiście niezbędne;
Nie stosuj terminologii typowej dla danego typu przeglądarek (unikaj wyrażeń
 kliknij tutaj, naciśnij przycisk Back itp.);
Sprawdzaj poprawność ortograficzną i gramatyczną;
Nie wyróżniaj tekstu za pomocą znaczników nagłówka;
Grupuj informacje powiÄ…zane ze sobÄ… tematycznie (odpowiednio organizujÄ…c tekst)
i oddzielaj wizualnie grupy (za pomocą nagłówków lub linii poziomych);
Na wszystkich stronach zachowuj ten sam układ;
Rozdział 22. Tworzenie i projektowanie stron WWW 675
Stosuj menu zawierające połączenia, aby możliwe było szybkie zorientowanie się
dokąd prowadzą  tekst prezentacyjny połączeń powinien być opisowy;
Tworząc połączenia, nie padnij ofiarą syndromu  tutaj ;
Połączenia twórz tylko wówczas, gdy są ku temu ważne powody. Unikaj tworzenia
połączeń do mało istotnego materiału;
Nie powielaj na danej stronie połączeń do tego samego miejsca;
Zachowaj prosty układ strony;
Nie zaśmiecaj strony pięknymi, ale niepotrzebnymi obrazami;
Przygotowuj tekst alternatywny dla obrazów, aby strona mogła być wyświetlana
w przeglÄ…darkach tekstowych;
Stosuj małe obrazy, aby nie wydłużać czasu ładowania;
BÄ…dz
ostrożny, stosując kolorowe tło i kolorowy tekst, przesada spowoduje,
że strona będzie piękna, ale nieczytelna;
Zawsze umieszczaj połączenie do strony głównej;
Dopasowuj tematy do stron;
Nie rozdzielaj tematu między różne strony;
Umieszczaj na stronach sygnaturę lub połączenie umożliwiające kontakt;
Twórz tekstowe wersje dokumentów hipertekstowych.
Warsztat
Przypomnij sobie wszystkie poznane wiadomości, gdyż nadszedł czas na podsumowa-
nie tego rozdziału. Pytania, quiz oraz ćwiczenia umieszczone w tej części rozdziału po-
mogą Ci nauczyć się myśleć o elementach, jakie powinieneś umieszczać na stronach WWW
lub których nie należy na nich umieszczać.
Pytania i odpowiedzi
P. Znalazłem dane statystyczne, według których większość użytkowników sieci
korzysta z przeglądarek Netscape oraz Internet Explorer. Dlaczego więc mam
projektować i testować moje strony z uwzględnieniem innych typów przegląda-
rek, skoro cały świat stosuje Explorera?
O. Jeśli chcesz, możesz projektować swoje strony z myślą o Explorerze, Navigatorze lub
obu tych przeglądarkach jednocześnie. To Twoje strony i Twoja decyzja. Jednak, bio-
rąc pod uwagę, jak łatwo można wprowadzić niewielkie modyfikacje, które umożliwią
oglądanie tych stron w innych przeglądarkach i to bez utraty wielu możliwości, po co
miałbyś rezygnować z części potencjalnych odbiorców dla kilku znaczników? Pamię-
676 Część 8. Projektowanie efektywnych stron WWW
taj, że biorąc pod uwagę rozrastanie się sieci w czasie, owe 10 procent oznacza 10 mi-
lionów ludzi lub więcej.
P. Przekształcam istniejące dokumenty w strony WWW. Istotą tych dokumentów
jest tekst  nie nadają się do  skanowania wzrokiem, muszą być czytane
w całości. Nie da się ich ani zrestrukturyzować, ani przeorganizować, by speł-
niały podane przez Ciebie wytyczne  to nie jest moje zadanie. Co mogę zrobić?
O. W niektórych wypadkach tak po prostu musi być, szczególnie dotyczy to konwersji
dokumentów napisanych z myślą o wydruku, a publikowanych w sieci. Idealnym
rozwiązaniem byłoby przepisanie dokumentu i dopasowanie jego struktury do wy-
magań sieci, ale patrząc realistycznie, najczęściej nie ma innej możliwości poza tą
jednÄ…  opublikowaniem dokumentu w sieci w istniejÄ…cej formie.
Nie wszystko jednak stracone. Nic nie stoi na przeszkodzie, aby poprawić ogólną
prezentację dokumentu, dodać podsumowania, spisy treści, indeksy tematyczne,
standardowe połączenia nawigacyjne, itd. Innymi słowy, możesz stworzyć system
nawigacji po samych dokumentach, który znacznie ułatwi korzystanie z nich w sieci.
P. Posługuję się standardową sygnaturą, która zawiera nazwisko, adres e-mail,
datÄ™ ostatniej modyfikacji i parÄ™ wierszy informacji o prawach autorskich, za-
żądali tego prawnicy mojej firmy. Taka sygnatura wygląda imponująco, szcze-
gólnie na małych stronach, jest bowiem obszerniejsza niż same strony.
O. Jeśli zgodzą się na to prawnicy Twojej firmy, spróbuj wszystkie te informacje kon-
taktowe oraz dotyczące praw autorskich umieścić na osobnej stronie, a na swoich
stronach wstawiaj jedynie połączenie do tej sygnatury. Dzięki takiemu rozwiązaniu,
strony nie będą już przytłoczone masą danych prawniczych, a dodatkowo, w przy-
padku ewentualnych zmian w sygnaturze, nie będziesz musiał aktualizować wszyst-
kich stron.
Quiz
1. Jakie są trzy  rodzaje HTML-a 4.0 oraz XHMTL-a 1.0 i który z nich umożliwia
trafienie do najszerszej grupy odbiorców?
2. W jaki sposób należy projektować strony WWW, tak aby były bardziej przejrzyste?
3. Prawda czy fałsz: nagłówki są dobrym sposobem wyróżniania tekstu, gdyż dzięki
nim informacje są wyświetlane dużymi, pogrubionymi literami.
4. Prawda czy fałsz: zmniejszając wielkość obrazu wyświetlonego na stronie poprzez
użycie atrybutów WIDHT oraz HEIGHT znacznika , możesz skrócić czas
konieczny do pobrania obrazu.
5. Jakie są zalety i wady tworzenia jednej dużej strony WWW lub kilku małych stron?
Odpowiedzi
1. Trzy  rodzaje HTML-a 4.0 oraz XHTML-a 1.0 to: Transitional (pośredni 
Rozdział 22. Tworzenie i projektowanie stron WWW 677
umożliwiający dotarcie do najszerszej grupy odbiorców i zaprojektowany z myślą
o osobach korzystających ze starszych przeglądarek), Frameset (układ ramek 
zawierający znaczniki dostępne w  pośrednim HTML-u bądz
XHTML-u
oraz dodatkowo znaczniki umożliwiające tworzenie układów ramek) oraz Strict
(ścisły  zaprojektowany z myślą o projektantach, którzy chcą korzystać wyłącznie
ze znaczników i atrybutów podanych w specyfikacji HTML-a 4.0 oraz XHTML-a 1.0).
2. Można używać nagłówków do podsumowywania zagadnień i list w celu
zorganizowania i wyświetlania informacji, menu składających się z połączeń
tekstowych dla zapewnienia sposobu poruszania się po witrynie, należy także
wydzielać istotne informacje z długich akapitów tekstu.
3. Fałsz. Nagłówki powinny być wykorzystywane jako nagłówki. Tekst wyświetlany
na stronach WWW można wyróżniać na inne sposoby, można także zwrócić uwagę
czytelnika na wybranÄ… informacjÄ™, stosujÄ…c elementy graficzne.
4. To podchwytliwe pytanie, stosując atrybuty WIDTH oraz HEIGHT, możesz jedynie
zmniejszyć wymiary obrazu wyświetlanego na stronie, nie zmniejszasz jednak
rozmiaru pliku obrazu, a zatem nie jesteś także w stanie skrócić czasu jego
pobierania. To wciąż jest ten sam obraz, z tym, że przeglądarka wyświetla
go w mniejszym obszarze.
5. Zaletą jednego dużego dokumentu jest, przede wszystkim, jego łatwiejsze
utrzymanie. W takim przypadku nie ma także połączeń, które mogą zostać
 przerwane , a poza tym struktura takiej strony odpowiada strukturze zwyczajnego
dokumentu. Wady takiego rozwiązania to: wydłużony czas pobierania, konieczność
przewijania zawartości strony oraz jej sztywna, liniowa struktura.
Ćwiczenia
1. Wypróbuj swoje siły, zmieniając postać strony, przedstawionej na rysunku 22.2.
Przedstaw umieszczone na niej informacje w formie listy definicyjnej lub tabeli.
Zmodyfikuj ją w taki sposób, aby odszukanie najważniejszych informacji było
Å‚atwiejsze.
2. Spróbuj w podobny sposób zmodyfikować stronę przedstawioną na rysunku 22.4.
W jaki sposób można przedstawić umieszczone na niej informacje, tak aby
odszukanie najważniejszych danych i połączeń było łatwiejsze?
678 Część 8. Projektowanie efektywnych stron WWW