Rozdzial 2 cz1, ## Documents ##, HTML 4 - Czrna księga WebMastera


Rozdział 2.

Grunt to organizacja

Gdy piszesz książkę, wypracowanie, artykuł czy nawet zwykłą notatkę, nigdy nie wygląda to w ten sposób, że zaczynasz od pierwszego zdania i piszesz jednym ciągiem, nie odry­wając długopisu od kartki i zatrzymując się dopiero na końcu. To samo dotyczy wszelkich sztuk wizualnych — nikt nie maluje obrazów punkt po punkcie, zaczynając od lewego gór­nego, a kończąc na prawym dolnym rogu płótna.

Pisanie, rysowanie czy projektowanie przebiega znacznie lepiej, jeżeli rozpoczyna się je od wstępnego zaplanowania pracy, aby lepiej zorientować się w tym, co chce się zrobić i co chce się przez to osiągnąć, a także, aby zdobyć ogólne spojrzenie na całokształt planowa­ne­go przedsięwzięcia przed przystąpieniem do właściwych czynności.

Podobnie jak w przypadku tradycyjnych środków przekazu, proces tworzenia i projekto­wa­nia stron WWW wymaga zaplanowania i przemyślenia, przed rozpoczęciem tekstowo-graficznych szaleństw i dzikiego hiperłączenia wszystkiego z wszystkim. Być może jest to nawet ważniejsze niż w przypadku innych mediów, bowiem próby narzucenia reguł tra­dycyjnego pisania czy projektowania do hipertekstu często owocują dokumentami, które są trudne do zrozumienia i poruszania się lub po prostu nie wykorzystują w żaden sposób ogromnych możliwości, tkwiących w hipertekście. Jeżeli grupa stron WWW jest nieumie­jętnie zorganizowana, trudno wprowadzać do nich poprawki i rozszerzać ich zawartość.

W tym rozdziale pragnę zwrócić uwagę na kilka spraw, o których powinieneś pomyśleć, zanim przystąpisz do tworzenia stron WWW. Szczególną uwagę zwróć na:

    1. zapamiętanie różnic pomiędzy serwerem WWW, witryną WWW, stroną WWW i stroną główną,

    1. wybieranie informacji, które chciałbyś umieścić w Internecie,

    2. wyznaczenie celu, któremu witryna ma służyć.

Gdy będziesz miał już ogólny pomysł na strukturę swoich stron, będziesz gotów do roz­poczęcia ich tworzenia i projektowania, czym zajmiemy się w rozdziale 4. „Zaczynamy od podstaw”. Jeżeli już nie możesz wytrzymać i bardzo chcesz zacząć, posłuchaj mojej rady i bądź cierpliwy. Jeszcze zdążysz nacieszyć się HTML-em.

Anatomia witryn WWW

Na początek wyjaśnię kilka pojęć, które będą używane w tej książce. Musisz doskonale ro­zumieć, co terminy te oznaczają i jakie jest ich znaczenie w kontekście tego, co będziesz tworzył w sieci WWW. Są to następujące pojęcia.

Witryna WWW składa się z jednej lub wielu stron WWW powiązanych ze sobą w sposób, który odzwierciedla istotę zawartych w niej informacji i tworzy spójną całość (patrz rys. 2.1).

Rysunek 2.1

Witryny i strony WWW

0x01 graphic

UWAGA !!! zmienić opisy:

The Web Site - Witryna WWW

Pages … - Strony tworzące witrynę

0x01 graphic

Witryna WWW to zbiór składający się jednej lub wielu stron.

Każda witryna WWW znajduje się na określonym serwerze WWW, czyli na komputerze, który tę witrynę przechowuje i jest podłączony do Internetu. W pierwszych kilku rozdziałach tej książki nauczysz się tworzyć przemyślane i dobrze zaprojektowane witryny WWW. W dalszej części dowiesz się, jak opublikować witrynę na serwerze WWW.

0x01 graphic

Serwer WWW to system w Internecie, zawierający jedną lub więcej witryn WWW.

Strona WWW stanowi pojedynczy element witryny, tak jak strona stanowi pojedynczy element książki czy gazety (z tą różnicą, że strona papierowa ma długość ograniczoną wiel­kością kartki, natomiast długość strony WWW może być dowolna). Strony WWW są często nazywane również dokumentami WWW. Oba te pojęcia odnoszą się do tego same­go, strona WWW to pojedynczy, konkretnie nazwany plik, który jest pobierany z serwera i formato­wany przez przeglądarkę.

0x01 graphic

Strona WWW jest pojedynczym elementem witryny WWW i zawarta jest w jed­nym pliku.

Pojęcia serwera, witryny i strony WWW są dość proste do zrozumienia, ale strona głów­na (home page) sprawia już troszkę więcej problemów, ma bowiem kilka różnych znaczeń.

Pierwsze skojarzenie, które nasuwa się w związku z pojęciem strony głównej przeciętnemu odbiorcy stron WWW, jest takie, iż strona główna to ta, która ładuje się automatycznie po uruchomieniu przeglądarki. W każdej przeglądarce jest zdefiniowana taka strona, zwykle jest to strona producenta przeglądarki (na przykład strona główna dla Netscape'a to strona wejściowa witryny firmy Netscape, dla Internet Explorera jest to strona firmy Microsoft).

W każdej przeglądarce istnieje możliwość zmiany tej strony, można w jej miejsce wstawić dowolny adres. Często spotykaną praktyką jest podłączanie tu własnych, prostych stron, zawierających połączenia do często odwiedzanych miejsc.

Dla ludzi publikujących swoje strony w WWW, termin strona główna ma jednak zupełnie inne znaczenie, jest to bowiem również pierwsza strona witryny WWW. Jest to swego rodzaju brama, prowadząca do pozostałych stron, pierwsza rzecz, którą ujrzy czytelnik (patrz rys. 2.2).

Strona główna zawiera zwykle krótki przegląd zawartości witryny, na przykład, w formie spisu treści lub zestawu ikon. Jeżeli witryna nie zawiera zbyt wiele treści, można zmieścić ją na tej jednej stronie, wtedy strona główna i witryna stają się tym samym.

0x01 graphic

Strona główna jest punktem wyjścia do pozostałej części witryny WWW.

Rysunek 2.2

Strona główna

0x01 graphic

Do czego właściwie
chcesz wykorzystać WWW?

Pytanie to może wydawać się bezsensowne. Przecież nie kupowałbyś tej książki, gdybyś nie miał już jakiejś koncepcji tego, co chcesz pokazać użytkownikom WWW. Ale niewy­klu­czone, że tak naprawdę nie wiesz, co chcesz pokazać lub też masz tylko ogólny, bliżej nie sprecyzowany pomysł. Być może szef nakazał Ci zaprojektowanie firmowej strony WWW, a ktoś inny wręczył tę książkę ze słowami: „Masz, to powinno jakoś po­móc”. A może zap­ragnąłeś stworzyć coś zbliżonego do strony, którą zobaczyłeś w sieci i która szczególnie przypadła Ci do gustu.

To, co chcesz umieścić w sieci WWW, nazywane będzie w tej książce treścią. Treść to ogólne pojęcie, które określa tekst, grafikę, inne media oraz jakąkolwiek interakcję. Jeżeli opowiadasz komuś, o czym traktuje Twoja strona, opisujesz jej treść.

0x01 graphic

Treść to wszystko, co umieszczasz w sieci WWW. Informacje, opisy, obrazki, sztuka, programy, wykresy, gry, dowcipy — wszystko to jest treścią.

Jakie treści można umieszczać w sieci WWW? Mówiąc krótko, wszystkie. Oto kilka ogól­nych tematów, które są obecnie popularne.

Jedyne ograniczenie, jakie posiada sieć WWW, to ludzka wyobraźnia. Tak naprawdę, jeżeli tego, co chciałbyś przedstawić w sieci, nie ma na powyższej liście lub uważasz, że jest zbyt nieokrzesane czy niedopracowane, tym bardziej powinieneś spróbować. Najbardziej interesujące są strony, przesuwające coraz dalej granice tego, do czego sieć WWW została powołana.

Jeżeli nie masz skonkretyzowanej koncepcji treści swojej witryny, nie oznacza to wcale, że powinieneś zakończyć lekturę tej książki. Możesz odłożyć ją na jakiś czas i powrócić do niej, gdy będziesz miał już wykrystalizowany plan. A może w trakcie czytania wpad­niesz na jakiś pomysł (jest ona całkiem pożyteczna nawet jeżeli nie masz pomysłów). Z mo­ich własnych doświadczeń wynika, że najlepszym sposobem na wymyślenie czegoś intere­sującego jest spędzenie popołudnia na przeglądaniu zasobów WWW i oglądaniu tego, co zrobili inni.

Wyznacz swój cel

Co ma dać innym Twoja witryna WWW? Czy jest przeznaczona dla poszukiwaczy konkretnych informacji i instrukcji? Czy strony będą tak skonstruowane, że trzeba będzie przeczytać je od początku do końca, by czegoś się z nich dowiedzieć? Czy też czytelnicy rozpoczną przeglądanie od strony głównej i będą kręcić się w kółko bez celu po stworzonym przez Ciebie „wirtualnym świecie”, aż w końcu znudzeni poszukają sobie czegoś ciekawszego?

Załóżmy, na przykład, że tworzysz witrynę, opisującą firmę, w której pracujesz. Niektó­rzy czytelnicy mogą być zainteresowani aktualnymi ofertami pracy. Inni mogą poszukiwać lokalizacji firmy. Mogą znaleźć się tacy, którzy gdzieś usłyszeli, że firma publikuje w sieci dokumentację techniczną w formie elektronicznej i chcą skopiować sobie aktualną wersję. Każdy z tych powodów jest istotny, tak więc każdy z nich powinieneś wziąć pod uwagę.

W przypadku witryny typu „katalog produktów”, należy umożliwić czytelnikom przeglą­danie produktów uporządkowanych według różnych kryteriów i oczywiście udostępnić im me­chanizm zamówienia wybranego towaru.

Jeżeli chodzi natomiast o witrynę osobistą lub dotyczącą konkretnego tematu, zasadni­czy cel może być tylko jeden, umożliwienie przeglądania przedstawianych informacji.

Cel witryny nie musi być wzniosły („Te strony przyniosą pokój całemu światu”), może być też zrozumiały tylko dla autora. Ale wyraźne określenie go jest bardzo istotne, stanowi bowiem rodzaj przygotowania do organizacji, projektowania i tworzenia stron, które będą konkretnie ukierunkowane. Jasno określony cel pozwala powstrzymać się od dołą­czania dodatkowych, często niepotrzebnych informacji, które tylko zaciemniają obraz całej witryny.

Jeżeli projektujesz strony WWW dla kogoś innego, na przykład, strony dla firmy lub jeżeli zostałeś zatrudniony jako konsultant, jedną z najistotniejszych spraw, którą należy ustalić przed przystąpieniem do tworzenia stron będzie określenie podstawowego celu witryny, bądź ustalenie go z pracodawcą. Twoje pomysły mogą się nie pokrywać z pomys­łami innych osób, zaangażowanych w to przedsięwzięcie i cała sprawa może zakończyć się wykonaniem dużej pracy, która zostanie odrzucona.

Podziel treść na główne tematy

Teraz, mając przed sobą jasno określony cel, postaraj się zorganizować treść, tak aby moż­na ją było podzielić na kilka zasadniczych tematów bądź rozdziałów, grupując powiązane ze sobą informacje pod jednym hasłem. Na pewno zdarzy się, że cele, które sobie posta­wi­łeś i lista podstawowych tematów będą się ze sobą pokrywać. Jeżeli tworzysz strony dla księgarni, a jednym z celów ma być możliwość zamawiania książek, doskonałe będzie w tym miejscu hasło „Zamówienie”.

Na tym etapie rozwoju witryny nie musisz być jeszcze zbyt dokładny. Najważniejsze w tym punkcie jest ustalenie, co konkretnie będzie opisywane na projektowanych stronach. Później, już w trakcie tworzenia stron, będziesz mógł zorganizować je dużo lepiej.

Załóżmy, że tematem witryny jest konserwacja samochodu. Przykład ten jest prosty, bo­wiem konserwacja samochodu polega na kilku konkretnych czynnościach, które dają się łatwo opisać za pomocą dobrze brzmiących nagłówków. Tematy te mogłyby brzmieć nastę­pująco:

Nie przejmuj się kolejnością czynności ani sposobem przejścia od jednego tematu do dru­giego. Po prostu zapisz w punktach to, co chcesz opisać na swojej witrynie.

A teraz przykład mniej oczywisty. Załóżmy, że jako fan jakiegoś zespołu rockowego prag­niesz stworzyć strony mu poświęcone, chcesz bowiem podzielić się swoją olbrzymią wiedzą z innymi fanami. Lista tematów mogłaby być następująca:

Możesz wymyślić dowolną ilość tematów, ale każdy z nich powinien być w miarę zwięzły. Jeżeli pojedynczy temat wydaje się być zbyt obszerny, spróbuj rozbić go na mniej­sze części. Gdy okaże się, że krótkich tematów jest za dużo, spróbuj pogrupować je w kilka bardziej ogólnych. Jeżeli tworzysz encyklopedię roślin trujących, umiesz­czenie każdej rośliny w formie oddzielnego tematu byłoby zabójcze dla witryny. Naj­prostszym rozwiązaniem jest pogrupowanie nazw pod literami alfabetu (A,B,C ...) i wte­dy właśnie litery stałyby się tematami nadrzędnymi. Oczywiście, musimy w takiej sytuacji założyć, że czytelnicy będą przeglądać informacje w porządku alfabe­tycz­nym. Jeżeli zech­cesz umożliwić im przeglądanie informacji według jakiegoś innego klucza, będziesz musiał wymyślić inny podział.

Podstawowym celem jest rozdzielenie wiedzy na tematy, zawierające mniej więcej jednako­wą ilość informacji, sensownie rozmieszczonych w grupach, które chcesz zaprezentować.

Pomysły na organizację i nawigację

W tym miejscu powinieneś mieć już klarowną wizję tego, co chcesz przekazać oraz ogólną listę tematów. Następnym krokiem będzie podział informacji na strony WWW. Ale przed przystąpieniem do tego, przyjrzyj się „standardowym” strukturom, używanym w systemach pomocy i innych podobnych narzędziach. Niniejszy rozdział opisuje niektóre z tych struk­tur, ich cechy oraz odpowiedzi na kilka istotnych pytań.

Czytając ten rozdział, zastanów się, jak informacje, które pragniesz zamieścić pasowałyby do opisywanych struktur i jaką ich kombinację mógłbyś zastosować, aby od nowa zaprojek­tować strukturę witryny.

0x01 graphic

Wiele opisywanych w tym rozdziale pomysłów zostało zaczerpniętych z książki Designing and Writing Online Documentation, autorstwa Williama K. Horto­na (John Wiley & Sons, 1994). Pomimo to, że książka Hortona została napi­sana przede wszystkim dla twórców dokumentacji elektronicznej oraz systemów pomocy kontekstowej, jest to kopalnia wiedzy na temat strukturalizacji dokumentów i ogólnych zasad tworzenia hipertekstu.

Struktura hierarchiczna

Chyba najłatwiejszą i najbardziej logiczną strukturą dokumentu WWW jest właśnie hierar­chia, podobna do menu, jak pokazano na rysunku 2.3. Struktury hierarchiczne i menu szczegól­nie dobrze sprawdzają się w systemach opartych na hipertekście. Wiele systemów pomocy kontekstowej zostało stworzonych właśnie na bazie hierarchii. Tak więc przeglądanie roz­poczyna się od menu lub innego rodzaju listy głównych tematów. Wybór jednego z nich powoduje pojawienie się listy podtematów, pod którymi kryje się już konkretna treść. Róż­ne systemy pomocy mają różne poziomy, ale większość z nich wpisuje się w taką strukturę.

W tego typu strukturach czytelnicy łatwo odnajdują swoje aktualne położenie. Przejście w górę zawsze prowadzi do informacji bardziej ogólnych, w dół, do informacji szczegóło­wych. Jeżeli umożliwisz przejście o poziom wyżej, czytelnicy będą mogli zawsze łatwo i szybko powrócić do miejsca, w którym już byli.

Rysunek 2.3

Struktura hierarchiczna

0x01 graphic

W witrynach o strukturze hierarchicznej strona główna zawsze zawiera ogólny przegląd opisywanych treści. Zawiera także połączenia do stron, które znajdują się na niższych poziomach hierarchii. Przykładowo, strona główna katalogu na witrynie Wydawnic­twa Helion wygląda, jak pokazano na rysunku 2.4.

Rysunek 2.4

Katalog Wydawnictwa Helion

0x01 graphic

Rysunek 2.5

Wszystkie tytuły

0x01 graphic

Jeżeli wybierzesz temat „Wszystkie książki”, połączenie poprowadzi do strony o wszystkich tytułach (patrz rys. 2.5). Z tego miejsca możesz cofnąć się do strony głównej lub wybrać kolejne połącze­nie i przejść jeszcze niżej, do szczegółowych informacji o konkretnej książce.

Wybór tematu „3D Studio MAX - Doskonałość i precyzja” poprowadzi do strony z infor­macjami o książce (patrz rys. 2.6). Stąd możesz przejść do strony katalogu, do strony głównej lub do konkretnego opisu, wybranego z menu.

Zauważ, że interfejs na każdym poziomie jest konsekwentnie tworzony w tym samym stylu (przejścia w górę, w dół, powrót do strony głównej) i posiada ograniczone możliwości pros­tej nawigacji. Struktury hierarchiczne są na tyle przejrzyste, że prawdopodobieństwo pogu­bienia się jest minimalne (szczególnie, że wskazówki dotyczące powrotu są jasno opisane). Jeżeli każdy poziom struktury będzie poprawnie zorganizowany i unikniesz powtarzania tematów w różnych „gałęziach” (jeżeli treść daje się sensownie ułożyć w tego typu struktu­rę), to hierarchia może stanowić najlepszy sposób na wyszukanie konkretnej porcji infor­macji. Jeżeli jest to jednym z celów, które sobie postawiłeś, struktura hierarchiczna może być tym, czego szukasz i co sprawdzi się najlepiej.

Rysunek 2.6

Książka „3D Studio MAX - doskonałość i precyzja”

0x01 graphic

Staraj się unikać tworzenia zbyt wielu poziomów i zbyt wielu możliwości wyboru, ponie­waż może to zirytować czytelników. Za dużo stron zawierających menu wyboru prowadzi do tzw. „syndromu poczty głosowej”. Czytelnicy, zmuszeni do ciągłego wybie­ra­nia, mogą po drodze zapomnieć, czego właściwie szukają i będą wtedy tak wściekli, że przestanie ich obchodzić Twoja publikacja. Struktura powinna posiadać dwa, trzy poziomy, a szczegóło­we informacje powinny znajdować się na ostatnim, najniższym z nich.

Struktura liniowa

Innym sposobem organizacji dokumentów jest struktura liniowa (sekwencyjna), która przypomina sposób organizacji dokumentów drukowanych. W strukturze tej, jak pokazano na rysunku 2.7, strona główna stanowi tytuł lub wstęp, a każda następna strona jest kolejnym rozdziałem. W strukturze typowo liniowej, strony są połączone kolejno ze sobą (poprzednia — następna). Czasem można też znaleźć połączenie do strony głównej, które pozwala na szybkie przejście do pierwszej strony.

Rysunek 2.7

Struktura liniowa

0x01 graphic

W strukturze liniowej łatwo zapoznać się z treścią, ponieważ nie ma zbyt wielu możliwości wyboru.

Struktury tego typu są bardzo sztywne i ograniczają zarówno swobodę czytelnika, jak i twórcy. W ten sposób możesz prezentować informacje, które posiadają strukturę liniową w rzeczywistości, gdzie funkcjonują (krótkie opowiadania, instrukcje krok po kroku, trening komputerowy) lub jeżeli nie chcesz, aby czytelnicy przeskakiwali od tematu do tematu.

Rozważmy wobec tego przykład nauki wyrobu sera za pośrednictwem WWW. Jest to zło­żona procedura, składająca się z serii czynności, które muszą być wykonane w określonej kolejności.

Opis tej procedury na stronach WWW doskonale pasuje do struktury liniowej. Gdy poru­szasz się po stronach dotyczących tego tematu, rozpoczynasz od strony głównej, na której znajdziesz krótkie podsumowanie tego, co musisz zrobić. Następnie, używając połączenia „Dalej”, przejdziesz do pierwszego kroku „Wybór właściwego mleka”, potem będzie „Kwaszenie mleka” i tak dalej, aż do końcowego „Dojrzewanie sera”. Zawsze będziesz miał możliwość przypomnienia sobie pewnych informacji za pomocą przycisku „Wróć”. Ponie­waż procedura jest typowo liniowa, nie ma potrzeby tworzenia połączeń, które przerywały­by główny tok czynności, czy też stanowiły odniesienia do innych, po­dob­nych procedur.

Struktura liniowa z alternatywą

Możesz odrobinę złagodzić sztywną strukturę liniową i pozwolić czytelnikowi zboczyć z głównej ścieżki. Można stworzyć strukturę liniową z alternatywnymi połączeniami, które odbiegają od głównego tematu (patrz rys. 2.8). Te swego rodzaju dygresje mogą prowadzić z powrotem do zasadniczego tematu, mogą też być to zupełnie odrębne ścieżki, prowadzące do swojego własnego zakończenia.

Rysunek 2.8

Struktura liniowa z alternatywą

0x01 graphic

Załóżmy, że będziemy opisywać procedurę instalacji oprogramowania, która w większości punktów dla każdego komputera jest taka sama, ale jest jednak jeden wyjątek. W pewnym miejscu liniowego procesu instalacji następuje rozgałęzienie, procedura przebiega bowiem różnie w różnych systemach (patrz rys. 2.9).

Po zakończeniu części instalacji, specyficznej dla danego systemu, następuje powrót do pierwotnej ścieżki, która w dalszej części jest znów identyczna dla wszystkich platform.

Rysunek 2.9

Różne ścieżki dla różnych systemów

0x01 graphic

Oprócz schodzenia z właściwej ścieżki możesz także tworzyć hiperpołączenia, które pomi­jają pewne elementy łańcucha czynności. Mogą to być połączenia wsteczne, aby przypom­nieć sobie jeden z etapów, mogą też prowadzić do przodu, jeżeli czytelnik może sobie pozwolić na pominięcie pewnej grupy czynności (patrz rys. 2.10).

Rysunek 2.10

Skoki w tył lub w przód

0x01 graphic



Wyszukiwarka

Podobne podstrony:
Rozdzial 2 cz3, ## Documents ##, HTML 4 - Czrna księga WebMastera
Rozdzial 2 cz2a, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-01, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-D-H, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-D-FMP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-18MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-27MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-24MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-08MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-D-GMP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-04, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-20MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-30MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-D-EMP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-19MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-21MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-09MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-22MP, ## Documents ##, HTML 4 - Czrna księga WebMastera
R-05, ## Documents ##, HTML 4 - Czrna księga WebMastera

więcej podobnych podstron