R 22 07 (10)


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:

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:

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.

0x01 graphic

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

0x01 graphic

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:

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

Rysunek 22.2 przedstawia tę technikę pisania, której powinieneś unikać.

Rysunek 22.2.

Tę stronę trudno „skanować”

0x01 graphic

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:

Rysunek 22.3 pokazuje, jak mogłaby wyglądać taka korekta.

Rysunek 22.3.

Ta trudna w odbiorze strona została odrobinę poprawiona

0x01 graphic

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:

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ń

0x01 graphic

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ń

0x01 graphic

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:

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

0x01 graphic

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

0x01 graphic

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

0x01 graphic

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.

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

0x01 graphic

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ń

0x01 graphic

Rysunek 22.11.

Jeszcze inne, lepsze menu linków

0x01 graphic

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

0x01 graphic

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ń

0x01 graphic

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”

0x01 graphic

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!

0x01 graphic

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.

0x01 graphic

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

0x01 graphic

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

0x01 graphic

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

0x01 graphic

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

0x01 graphic

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

0x01 graphic

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:

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:

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: