515

17

              Mapy odsyłaczy

Rozdział 16.

Tworzenie i stosowanie map odsyłaczy

Mapy odsyłaczy są specjalnym rodzajem obrazów czułych na klikanie. Zazwy­czaj, gdy osadzasz obraz wewnątrz połączenia, kliknięcie w jakimkolwiek miejscu obrazu zawsze pro­wadzi pod ten sam adres. W przypadku map odsyłaczy, w zależności od obszaru obrazu, w którym nastąpiło kliknięcie, adres docelowy będzie inny. W tym rozdziale poznasz mapy odsyłaczy i dowiesz się, jak je tworzyć. Oto szczegółowe tematy.

n               Czym są mapy odsyłaczy.

n               Tworzenie map odsyłaczy działających po stronie serwera.

n               Tworzenie map odsyłaczy działających po stronie klienta.

n               Obsługa obu typów map odsyłaczy.

Czym są mapy odsyłaczy

W rozdziale 7. „Wykorzystywanie obrazów, koloru i tła” nauczyłeś się two­rzyć obraz spełniający funkcje połączenia poprzez umieszczenie znacznika  <IMG> w obrębie znacz­nika <A>. W ten sposób cały obraz staje się połączeniem. Klikając w obraz, w obszarze jego obramowania lub tła, uzyskasz ten sam efekt.

W mapach odsyłaczy różne części obrazu aktywują różne połączenia. Stosując takie obiekty, możesz tworzyć wizualną mapę hiperpołączeń, które prowadzą Cię do stron przypisanych odpowiednim obszarom (patrz rys. 16.1). Możesz też stworzyć wizualną metaforę dla pre­zentowanych informacji, półkę z książkami lub fotografię, na której każdej z osób przypo­rzą­dkowany jest opis.

Istnieją dwa rodzaje map odsyłaczy: działające po stronie serwera oraz działające po stronie przeglądarki. Mapy odsyłaczy działające po stronie serwera były używane we wczesnym okresie istnienia WWW, jednak przysparzały pewnych problemów autorom stron WWW. Zagadnienia te przedstawię w dalszej części tego rozdziału. Aktualnie znacznie częściej są wykorzystywane mapy odsyłaczy działające po stronie przeglądarki. Wykazują one wiele zalet w porównaniu ze starszymi mapami odsyłaczy działającymi po stronie serwera.

Mapy odsyłaczy działające po stronie klienta pracują w ten sam sposób co poprzed­nia wersja. Różnica polega jedynie na tym, że nie ma w tym wypadku programu działające­go na serwerze. Obróbka współrzędnych i kojarzenie adresów odbywa się w przeglą­darce.

Choć mapy odsyłaczy działające po stronie serwera nie są już wykorzystywane tak często jak niegdyś, to jednak poznanie zasad działania i sposobów używania obu typów map odsyłaczy może dać duże korzyści. Jeśli chcesz zapewnić zgodność witryny z wcześniejszym typem map odsyłaczy, to będziesz musiał poznać metody wykorzystania map obu typów. Wszystkie konieczne informacje znajdziesz w tym rozdziale.

Mapy odsyłaczy działające po stronie serwera

Gdy mapy odsyłaczy pojawiły się na WWW, były tworzone przy użyciu specjalnych programów działających na serwerach. Mapy tego typu nazywane są mapami odsyłaczy działającymi na serwerze.

Gdy przeglądarka aktywuje połączenie na mapach odsyłaczy, wywoływany jest specjalny prog­ram przechowywany na serwerze WWW. Przeglądarka przekazuje mu współrzędne x oraz y miej­sca obrazu, w którym użytkownik kliknął. Program obsługi map odsyłaczy wy­szuku­je specjalny plik definicji map, który dopasowuje obszary obrazu do adresów URL, wyko­nu­je pewne obli­czenia, aby określić, którą ze stron załadować. Następnie ją ładuje.

Mapy odsyłaczy działające po stronie serwera były jedną z najwcześniejszych opcji siecio­wych i są obsługiwane przez większość graficznych przeglądarek, o ile nie przez wszystkie. Mapy tego typu nastręczają jednak pewnych problemów, które przedstawiłam poniżej.

n               Zazwyczaj, gdy przesuwasz wskaźnik myszy nad połączeniem, adres URL, do którego prowadzi połączenie, jest wyświetlany na pasku stanu okna przeglądarki. Ponieważ jednak przeglądarka WWW nie ma pojęcia, gdzie prowadzą poszczególne części map odsyłaczy, to, umieszczając wskaźnik myszy nad obrazem, zobaczysz albo URL samego programu obsługującego mapy odsyłaczy (co nie jest bardzo pomocne), albo ten sam URL i współrzędne x i y (równie mało pomocne).

n               Nie możesz używać ani testować takich map odsyłaczy z wykorzystaniem plików lokalnych. Mapy odsyłaczy wymagają kontaktu z serwerem, by uruchomić program obsługi i przeprowadzić analizę współrzędnych x i y.

n               Ponieważ każde kliknięcie w obrębie map odsyłaczy wymaga uruchomienia przez serwer specjalnego programu, są one znacznie wolniejsze niż zwykłe połączenia klasyczne czy też w postaci obrazów. W konsekwencji, jeśli prośba o nową stronę jest realizowana za pośrednictwem map odsyłaczy, będzie to trwało wieki.

Mapy odsyłaczy działające po stronie klienta

Chociaż mapy odsyłaczy działające po stronie serwera są powszechnie używane od dłuższe­go już czasu, problemy z nimi związane doprowadziły do stworzenia nowego typu map odsyłaczy — są to mapy odsyłaczy działające po stronie klienta. Mapy odsyłaczy działające po stronie przeglądarki eliminują wszelkie problemy występujące przy wykorzystaniu map odsyłaczy działających po stronie serwera, gdyż w ich przypadku nie ma potrzeby korzystania z programu do obsługi map działającego na serwerze. Przetwarzanie map jest w całości wykonywane lokalnie w samej przeglądarce. W rezultacie przeważająca ilość projektantów witryn WWW korzysta dziś właśnie z tego rodzaju map odsyłaczy.

Mapy odsyłaczy a przeglądarki tekstowe

Ze względu na swoją naturę, mapy odsyłaczy mogą działać wyłącznie w przeglądarkach gra­ficznych. W rzeczywistości, gdy próbujesz oglądać dokument zawierający takie obiekty w przeglądarce tekstowej,  takiej jak, na przykład, Lynx, nie pojawi się nawet ślad istnienia obrazu, chyba że do obrazu dołączony jest atrybut ALT. Ale nawet wówczas nie będziesz mógł wykorzystać obrazu do nawigacji. Jeśli decydujesz się na umieszczenie map odsyłaczy w swoich dokumentach, jest niezwykle istotne, abyś utworzył także tekstowy ekwiwalent obrazu, wówczas czytelnicy posługujący się przeglądarkami tekstowymi będą mogli korzystać z Twojej strony. Zastosowanie map odsyła­czy ograniczy możliwości tych użytkowników, bądź więc miłosierny i pozwól im przynajm­niej pooglądać zawartość strony.

Tworzenie map odsyłaczy działających po stronie serwera

Choć mapy odsyłaczy działające po stronie serwera mają swoje wady, wciąż jednak warto znać sposoby ich wykorzystania. Niestety, serwery WWW w różny sposób tworzą mapy odsyłaczy, co sprawia, że wyjaśnienie sposobów ich tworzenia przysparza pewnych trudności. Nawet w przypadku tej samej platformy mogą być stosowane inne metody. I tak serwery: W3C CERN i HTTPD NCSA stosują odmienne metody implementacji plików. Identyczne są nato­miast elementy składowe map odsyłaczy:

n               specjalny kod HTML wskazujący, że obraz jest mapą,

n               plik definicji mapy umieszczony na serwerze, który zawiera przyporządkowanie obszarów obrazu odpowiednim połączeniom do stron WWW,

n               skrypt CGI łączący wszystko w jedną całość.

Ten podrozdział wyjaśnia ogólne zasady konstrukcji map odsyłaczy, ale przykłady zostały przygotowane z myślą o takich serwerach, jak NCSA i Apache. Jeśli w przypadku Twojego serwera konieczne są dodatkowe informacje, spójrz do jego dokumentacji lub zwróć się do administratora.

Wybór obrazu

Aby utworzyć mapy odsyłaczy, potrzebny Ci będzie obraz (to oczywiste). Obraz, który ma być zastosowany do przygotowania mapy powinien zawierać odrębne wizualnie obszary, aby moż­na było łatwo je wybierać. Takie wymagania spełniają obrazy zawierające fragmenty symbo­liczne lub dające się łatwo podzielić na wielokąty. Dość trudno tworzy się mapy odsyłaczy w oparciu o fotografie, bowiem ich elementy mają tendencję do zlewania się ze sobą lub też mają nietypowe kształty. Rysunki 16.2 i 16.3 pokazują przykłady odpo­wied­nich i nieodpowied­nich na mapy obrazów.

Definiowanie koordynat

Sercem działających po stronie serwera map odsyłaczy jest plik zawierający definicję mapy. Stworzenie tego pliku wymaga nakreślenia na obrazie obszarów, w których będzie można klikać, określenia współrzędnych definiujących te obszary i wybrania stron HTML, do któ­rych prowadzić będą połączenia.

Tworzenie pliku mapy możesz rozpocząć od ręcznego naszkicowania obszarów i zanotowa­nia ich współrzędnych. Dostępne są także programy do przygotowywania map odsyłaczy. Zastoso­wanie takiego programu ułatwi Ci życie, bowiem generuje on plik definicji mapy automatycz­nie, za podstawę biorąc obszary nakreślone za pomocą myszy.

Programy Mapedit dla systemu Windows oraz WebMap dla komputerów Macintosh pomogą Ci w tworzeniu plików definicji mapy w formacie NCSA. Jeśli korzystasz z systemu Unix, to będziesz mógł skopiować odpowiednią wersję programu Mapedit z serwera FTP. (Pełną listę adresów serwerów FTP zawierających zasoby związane z tworzeniem map odsyłaczy i nie tyko, znajdziesz w dodatku A, pt.: „Inne źródła informacji”). Wiele z najnowszych WYSIWIG edytorów stron WWW również umożliwia generowanie map odsyłaczy.

W tabeli 16.1 przedstawiona jest lista dostępnych obecnie narzędzi przeznaczonych do ge­ne­rowania map odsyłaczy.

Tabela 16.1: Oprogramowanie wspomagające tworzenie map odsyłaczy

Za pomocą tych programów możesz konwertować współrzędne do formatu właściwego dla Twojego serwera.

Jeśli jesteś zmuszony ręcznie przygotowywać pliki zawierające definicję mapy, w tym miej­scu znajdziesz odpowiedni przepis. Najpierw zrób szkic obszarów, które chcesz uaktywnić w swoim obrazie. Rysunek 16.4 przedstawia trzy typy obszarów, które można definiować w mapach odsyłaczy: koło, prostokąt oraz wielobok.

W kolejnym kroku musisz określić współrzędne krańcowych punktów tych obszarów. Ten proces jest taki sam, niezależnie od tego czy tworzysz mapę odsyłaczy działającą po stronie serwera, czy po stronie przeglądarki. Większość programów do edycji obrazów wyświetla współrzędne wskaźnika mysz­y — skorzystaj z tej opcji i zanotuj odpowiednie współrzędne (wspomniane wyżej pro­gramy zrobią to za Ciebie, ale samodzielne wykonanie tych operacji pomoże Ci zrozumieć cały pro­ces).

Definiowanie obszarów wielobocznych

Na rysunku 16.5 zostały przedstawione współrzędne obszaru wielobocznego. Wartości te liczone są względem lewego, górnego wierzchołka obrazu, który ma współrzędne (0,0). Pierwsza liczba w każdej parze oznacza współrzędną x i definiuje ilość pikseli od lewej krawędzi obrazu. Druga liczba oznacza współrzędną y i definiuje ilość pikseli od górnej krawędzi obrazu.

Notatka              Początek układu współrzędnych, czyli punkt (0,0), znajduje się w lewym, górnym wierzchołku obrazu, a wartości współrzędnych y rosną ku dołowi.

Definiowanie obszaru w kształcie koła

Rysunek 16.6 przedstawia sposób określania współrzędnych obszaru w kształcie koła. W tym przypadku należy zapisać współrzędne środka koła oraz długość jego promienia, wyrażoną w pikselach. Środek koła jest określany jako para współrzędnych (x,y) liczonych względem lewego, górnego wierzchołka obrazu.

Definiowanie obszaru prostokątnego

Rysunek 16.7 pokazuje, jak określić współrzędne obszaru prostokątnego. W tym przypadku należy zanotować współrzędne (x,y) lewego górnego oraz prawego dolnego wierzchołka prostokąta.

Definiowanie punktu

Starsze przeglądarki dają także możliwość definiowania punktów na mapie odnośników. Jeśli podczas kliknięcia wskaźnik myszy nie znajdzie się w zakresie działania żadnego ze zdefiniowanych obszarów, to zostanie uaktywniony najbliżej położony punkt. Punkty są przydatne w przypadku fotografii i innych obrazów, których elementy zlewają się ze sobą. Wprowadzają one pewną ziarnistość, dzięki której użytkownik nie musi klikać w dokładnie wyznaczonych rejonach. W przypadku definiowania punktów wystarczy zanotować parę współrzędnych (x,y) liczonych względem lewego, górnego wierzchołka obrazu.

Tworzenie i zapisywanie pliku mapy odsyłaczy

Kiedy już zaznaczysz współrzędne obszarów na obrazie, który będzie mapą odsyłaczy, to wykonałeś połowę pracy. Następnym etapem jest przyporządkowanie obszarom lub punktom adresów URL, odpowiadających połączeniom. Ten sam adres może wskazywać wiele obsza­rów, ale każdy obszar może mieć tylko jedno połączenie.

Mając obszary, współrzędne i adresy URL, możesz przystąpić do napisania definicji mapy przeznaczonej dla Twojego serwera.  Plik definicji dla serwera NCSA HTTPD wygląda w ten sposób:

default URL
circle URL x,y promień

rect URL x,y x,y

poly URL x1,y1 x2,y2 ... x...