Rozdział 22. u Tworzenie i projektowanie stron WWW 677
Ten rozdział nie będzie poświęcony ani znacznikom HTML, ani sposobom konwertowania plików z jednego dziwnego formatu w inny. W zasadzie poznałeś już wszystkie tajniki projektowania kodu HTML stron WWW. Czas teraz na to, co nieuchwytne — to co sprawia, że strona nie jest jedynie przypadkowym zlepkiem znaczników, tekstu i grafiki.
Wzbogacony o wiedzę zdobytą w ostatnich kilku rozdziałach, mógłbyś już w zasadzie odłożyć tę książkę na bok i przystąpić do samodzielnego przygotowywania swojej strony. To jednak, czego nauczysz się teraz sprawi, że Twoje strony będą doskonalsze. Czy istnieje lepsza motywacja, by kontynuować czytanie?
W rozdziale znajdziesz podpowiedzi dotyczące tworzenia ciekawie napisanych i dobrze zaprojektowanych stron WWW. Dowiesz się, co jest zalecane, a czego należy unikać w konstrukcji strony. Oto szczegółowa tematyka:
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.
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:
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 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:
n 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;
n 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;
n 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 stronie wyświetlanej w przeglądarkach, które ich nie obsługują.
Nieustannie wyjaśniam w tej książce, które znaczniki są częścią specyfikacji HTML 4.0, oraz jak wygląda ich obsługa w poszczególnych przeglądarkach. Zaprezentowałem także dla każdego ze znaczników alternatywne rozwiązania, z których możesz skorzystać 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 nie różni się od zwykłego pisania. Chociaż to, co piszesz, nie jest przesyłane w postaci zamkniętego w kopercie listu, jest jednak jakąś formą publikacji i stanowi odbicie Ciebie i Twojej pracy. A ponieważ to, co piszesz, jest prezentowane w sieci, jest więc bardziej ulotne dla Twoich czytelników i wymaga stosowania się do pewnych zasad dobrego pisania, bowiem Twoi czytelnicy nie będą pobłażliwi.
Sieć jest pełna informacji, czytelnik nie poświęci Ci swojego czasu, jeśli uraczysz go stroną ź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.
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.
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 „skanował” głównie te elementy, które rzucają się mu w oczy — nagłówki, połączenia i inne wyróżnione w tekście wyrazy. Być może przeczyta kilka akapitów, a następnie przejdzie dalej. Pisząc i organizując strony w sposób ułatwiający takie „skanowanie”, pomożesz czytelnikom 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 wypunktowaną;
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.
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:
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.
Rysunek 22.3 pokazuje, jak mogłaby wyglądać taka korekta.
Rysunek 22.3.
Ta trudna w odbiorze strona została odrobinę poprawiona
Przygotowując strony pamiętaj, że Twoi czytelnicy mogą „wskoczyć” na dowolną z nich. Może się zdarzyć, że podzielisz dokument tak, iż część czwarta pojawia się po części trzeciej, ale nie ma pomiędzy nimi połączeń. Niech ktoś z Twoich czytelników utworzy połączenie prowadzące do części czwartej. Wówczas inni będą trafiać do części czwartej, nie będąc nawet świadomymi, że część trzecia w ogóle istnieje.
Bą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ę;
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. Najskuteczniejsze jest wyróżnianie krótkich wyrazów (takich jak I, TO, BUT, LUB, ORAZ, itp.).
Tekst prezentacyjny połączenia jest także formą wyróżnienia. Staraj się więc, by był krótki. Unikaj przekształcania całych akapitów w połączenia.
Rysunek 22.4 stanowi ilustrację szczególnie złego stosowania wyróżnień w tekście.
djmathew18