333

11

              Tworzenie i projektowanie stron WWW

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:

n               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,

n               jak pisać strony WWW, by były przejrzyście zorganizowane i łatwe w czytaniu,

n               kwestie dotyczące projektowania i wyglądu stron WWW,

n               kiedy umieszczać na stronach połączenia i dlaczego,

n               efektywne korzystanie z obrazów,

n               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 now­szymi 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:

n               znaczniki HTML 2.0,

n               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,

n               HTML 4.0 i związane z nim możliwości, takie jak kaskadowe arkusze stylów, Dynamiczny HTML i układy ramek,

n               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,

n               pluginy i inne obiekty osadzone wykorzystujące pliki i dane zewnętrzne (względem przeglądarki),

n               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,

n               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 od­czuciu odo­sobniony. Autorzy i projektanci stron WWW, tacy jak Ty, starają się posortować ten bała­gan 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ą po­dejmujesz, przystępując do tworzenia stron WWW. Aby lepiej Ci to zobrazować, załączam rys. 22.1, przedstawiający Twoje możliwości wyboru w postaci kontinuum, miesz­czącego się pomiędzy konserwatywnym a eksperymentalnym sposobem podejścia.

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

mimo najszczerszych chęci na rysunku 22.1 nie mogę dopatrzyć się żadnego 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 konserwatyw­ny 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 zaawan­sowanych opcji, że ich obsługa jest praktycznie bezproblemowa we wszystkich przeglądar­kach, 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ę spo­dziewać 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 ponie­waż 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ądar­kach, które są dla Ciebie istotne. Większość przeglądarek jest bezpłatna lub dostępna w postaci oprogramowania typu shareware. Wystarczy więc 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 alternatyw­nych 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 prze­glą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ę przy­da.

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

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

n              
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 wypunkto­waną.

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

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

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

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 rys. 22.2? Spróbuj przerobić ją tak, aby czytelnicy mogli od razu wyła­pać główne kwestie. Rozważ te uwagi:

n               zawarte na stronie dwa akapity w rzeczywistości dotyczą dwóch odrębnych tematów,

n               cztery składowe drinków to świetna okazja do wprowadzenia listy.

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

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.

n               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ą.

n               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).

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

Rys. 22.4 stanowi ilustrację szczególnie złego stosowania wyróżnień w tekście.

Jeśli usuniemy pogrubienie tekstu i skrócimy tekst prezentacyjny połączeń, czytelnik nie będzie tak rozpraszany jak poprzednio (rys. 22.5).

Szczególnie oszczędnie powinieneś stosować wyróżnienia tam, gdzie tekst porusza się lub zmie­nia, 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ąda­rek. Nie stosuj słownictwa przytoczonego poniżej.

n               „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”).

n               „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.

n...