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 pro­jektowania 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 za­projektowanych stron WWW. Dowiesz się, co jest zalecane, a czego należy unikać w kon­strukcji 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.

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.
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ędź trójkąta przedstawionego na rysunku 22.1.

Konserwatywny projektant stron WWW chce, by jego strony miały maksymalnie szeroką 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 bezproblemowa we wszystkich przeglądarkach, tym samym mają one potencjalnie najszersze rzesze czytelników.

Projektant, który nie jest konserwatywny, lecz jednocześnie nie jest eksperymentatorem, 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ć stanowił 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 podjąć 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 projektowane 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 znaleźć na eksperymentalnej stronie informację, że „These Pages Are Best Read Using Browser X” (do odczytu tych stron najlepiej 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 nieź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 przedstawione z prawej strony kontinuum z rysunku 22.1. Poniżej skrótowo opisałam każdą z nich:

• 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 zaspokojenia oczekiwań wszystkich projektantów WWW, to jednak wciąż istnieje ten „najwyższy” punkt kontinuum, oznaczający prawdziwych eksperymentatorów, wykorzystujących możliwości wykraczające poza formalne specyfikacje. Producenci przeglądarek wciąż wzbogacają swoje produkty o nowe, eksperymentalne możliwości, a postę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ą czytelnikó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 wykorzystanie 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ż korzystają 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 standardów na stro­nie 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ć 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 zobaczyć efekty kombinacji na swoich stronach.

Stosując rozszerzenia i starając się zarazem zachować kompatybilność z wieloma przeglą­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 oprogramowania typu shareware. Wystarczy odnaleźć je w Sieci, ściągnąć i zainstalować. Dzięki testom uzyskasz pojęcie o tym, jak różne przeglądarki interpretują poszczególne znaczniki, 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 sta­nowi 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 za­sad 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ą ź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ęź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 poszczegó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”, powinieneś ją kupić. Kupić, przeczytać, następnie przeczytać jeszcze raz, przypomnieć sobie, 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.

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ą poruszane na stronie. W zależności od tego, czego czytelnik oczekuje od Twojej strony, będzie on „ska­nował” 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 „skanowanie”, pomożesz czy­telnikom 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 znaleźć 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ć”

Ponieważ niemal wszystkie informacje na tej stronie prezentowane są w formie akapitó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 trze­ciej, 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ądź 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ę;

Ostrożnie stosuj wyróżnienia

Wyróżnienia należy stosować sporadycznie. Akapity zawierające tekst pogrubiony, kursywę i wyrazy pisane samymi wielkimi literami są nieczytelne i to zarówno, gdy stosujesz te elementy często, jak i wówczas, gdy wyróż­niasz w ten sposób długie fragmenty tekstu. Najskutecz­niejsze 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ądź animacji. O ile animacja nie jest centralnym elementem strony, ruch i dź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: „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 gramatycznej 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 pewnymi względami cykl wydawniczy książki, czasopisma czy też proces produkcyjny jakiegoś 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 ortograficzne i gramatyczne źle odbiją się na Twojej pracy, na Tobie i poruszanej przez Ciebie tematyce. Czytelnicy mogą się poczuć na tyle zirytowani, że poprzestaną na przeglądnię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 zasada maksymalnej prostoty. Zredukuj liczbę elementów, obrazów, nagłówków, linii poziomych i postaraj się, by wzrok czytelnika padał w pierwszej kolejności na najistotniejsze części strony.

Niech to będzie kardynalna zasada postępowania. Pamiętaj o niej, czytając następne pod­rozdziały, prezentujące inne sugestie dotyczące projektowania i układu strony.

Stosuj nagłówki jako nagłówki

W wielu przeglądarkach graficznych nagłówki wyświetlane są czcionką większą lub pogru­bioną. 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 tekstem 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 projek­towania. 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ębność 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 <HR>, tak jak pokazano na rysunku 22.8.

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 oczekujesz, a pierwszy wyraz pojawia się zawsze w tym samym miejscu.

Ta sama zasada powtarzalności sprawdza się w odniesieniu do prezentacji WWW. Jednolita 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, czytelnicy 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 <H2>, 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.

Stosowanie połączeń

Bez połączeń strony WWW byłyby beznadziejnie nudne, a znalezienie w sieci czegokol­wiek 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 definio­wania 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 wspaniał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 zoriento­wanie 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. Niewą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ę rzeczy­wistej 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 informują czytelnika o tym, co jest po drugiej stronie połączenia.

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 napisanym tekście podświetlasz odpowiednie wyrazy, które staną się tekstem prezentacyjnym 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ę źródłem dodatkowych lub uzupełniających informacji, 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 stosujesz 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 znaleźć potrzebną informację.

Rysunek 22.12. Te połączenia nie działają dobrze

Na rysunku 22.13 możesz zobaczyć jeden ze sposobów zmiany wyglądu strony przedstawionej w poprzednim przykładzie. Najważniejszymi elementami strony jest tytuł konferencji oraz nazwy i daty zaplanowanych spotkań. A zatem mógłbyś zmienić wyglą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 preformatowanego tekstu, można wyróżnić najważniejsze informacje spośród całej zawartoś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, pozba­wionej 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 oznacza tekst prezentacyjny połączenia).

Tutaj znajdziesz informacje na temat oswajania strusi.

Wybierz to połączenie, aby poznać szczegóły budowy silnika.

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 przedstawiony 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 zawie­rają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 muszą 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?

Każde połączenie musi służyć określonemu celowi. Twórz połączenia z istotnych powo­dó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 czytelni­ka 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 powodami 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ę przemiesz­czać po Twoich stronach WWW: naprzód, wstecz, wyższy poziom, strona główna. 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 zawierają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 wydrukujesz 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

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. Łącząc pierwsze wystąpienie wyrazu z jego definicją, 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 uzupeł­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 innych 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 podstawowego. 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 tekstem. 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 miejsca 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.

Nie przesadź 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żenie 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, koloru 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.

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 <IMG> 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 dodat­kowy 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 sprawdź, 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.

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 przypadku, 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 obrazów, w ogóle nie będą znały jej nazwy! W poprawionej wersji strony musi się znaleźć 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 trzecie, 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 powodzeniem 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ć niezorganizowana. 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 elementów listy, używając w tym celu znacznika <UL> i określając obraz za pomocą atrybutu 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 listy 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ądź 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;

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ć. Sprawdź 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 wzorzyste 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 <BASEFONT> 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;

• Jeśli stosujesz wzorzyste tło, sprawdź, 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 uprzedzeniami, lepiej będzie w stanie ocenić, jak kolory tła i tekstu współgrają ze sobą. Oczywiście, musisz zna­leźć 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 zwycza­jó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 pozio­mu 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 powró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 powin­na być rozdzielana pomiędzy odrębne strony. Nawet jeśli łączysz je połączeniami, przecho­dzenie między stronami może być dezorientujące. Ta dezorientacja będzie jeszcze 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 pojedynczej 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.

Wyważ właściwie liczbę stron

Nie ma zasad określających liczbę stron w prezentacji, nie ma też ograniczeń, co do wiel­koś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 strony, 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 znaleźć 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łączeniami (patrz rysunek 22.23).

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 przewijanie 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 <ADDRESS>. Ten właśnie znacznik został wybrany celowo.

Zastanów się nad umieszczeniem w znaczniku <ADDRESS> takich oto użytecznych infor­macji, 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;

• 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

Ładnym posunięciem byłoby połączenie adresu URL Mailto z tekstem zawierającym adres e-mail Webmastera. Oto przykład:

<ADDRESS>

Laura Lemay <A HREF="mailto:[e-mail]">[e-mail]</A>

</ADDRESS>

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 od­powiedzialnej 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 prawami autorskimi, możesz przygotować osobną stronę, która zawiera te informacje. Następnie na każdej ze stron umieść połączenie do tej sygnatury. Oto przykład:

<ADDRESS>

<A HREF="copyright.html">Prawa autorskie</A> i informacje

<A HREF="webmaster.html">kontaktowe</A>.

</ADDRESS>

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 auto­busie 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.

Jeśli dla Ciebie sieć to miejsce publikowania wszystkiego, co może być czytane i używane 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 czytać z dala od komputera. Połączenie do wersji tekstowej może nawet pojawić się na początku wersji hipertekstowej, tak jak w poniższym przykładzie:

<A HREF="ftp://myhome.com/pub/mydir/myfile.ps">Wersja PostScriptowa</A> 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;

• 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ądź ostrożny, stosując kolorowe tło i kolorowy tekst, przesada spowoduje,
  że stro­na 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 podsumowanie tego rozdziału. Pytania, quiz oraz ćwiczenia umieszczone w tej części rozdziału pomogą 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ądarek, 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, biorą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ętaj, że biorąc pod uwagę rozrastanie się sieci w czasie, owe 10 procent oznacza 10 milionó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 roz­wiązaniem byłoby przepisanie dokumentu i dopasowanie jego struktury do wymagań 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ą pre­zentację dokumentu, dodać podsumowania, spisy treści, indeksy tematyczne, standar­dowe 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, szczegó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 kontakto­we 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 przypadku ewentual­nych zmian w sygnaturze, nie będziesz musiał aktualizować wszystkich 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 <IMG>, 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 — 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ądź 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

Rozdział 22. Tworzenie i projektowanie stron WWW 677

---