Mappe immagine lato server

Nel caso di mappe server-side, la maggior parte del codice si trova nel server. Il browser non deve fare altro che concatenare – in corrispondenza di un click – le coordinate del pixel all’URL ed inviarle al server. Tutto il resto del lavoro è a carico del server.

Gli ingredienti per costruire una imagemap server-side sono:

  • Un’immagine, in un qualunque formato supportato,
  • Gli appropriati marcatori HTML,
  • Un file di mappa immagine, che definisce le aree attive della mappa e ciò che esse fanno,
  • Un programma ‘valutatore’ dell’imagemap (probabilmente è un componente standard del tuo server)

Dal momento che la valutazione delle coordinate viene effattuata interamente dal server, non serve uno standard di interconnessione fra il file dei dati dell’imagemap ed il programma che lo prende in carico e, in origine, ciascuno sviluppatore di server ha definito il suo formato proprietario di file di dati. Fortunatamente, nell’uso comuno non si riscontrano poi tanti formati diversi; generalmente c’è il formato “CERN” e quello “NCSA” (“Apache supporta quest’ultimo con alcune estensioni) Alcuni ‘valutatori’ sono stati pensati in grado di supportare più di un formato

Tu dovrai scoprire le impostazioni del server che stai utilizzando così da esser certo di generare il corretto formato di imagemap, e di utilizzare l’URL appropriato per richiamarla. Questa trattazione potrà esaminare soltanto pochi metodi comuni per ottenere questo scopo.

Tu dovresti sapere che vi sono delle differenze nel modo con cui sono usate le coordinate dei pixel nei diversi formati di mappa immagine, per esempio un cerchio in un formato è definito dal suo centro e dal suo raggio, in un altro dal suo centro e da un punto della circonferenza

Comunque è chiaro che il file dell’imagemap dovrà risiedere sullo stesso server del ‘valutatore’, che però non sarà necessariamente lo stesso server dal quale provengono il corrente documento HTML e l’immagine. In realtà, nessuno ti vieta dallo scrivere un documento HTML – che salverai su un server – il quale richiama un’immagine storata su un secondo server, la quale invoca il valutatore di imagemap da un terzo server, sul quale hai salvato l’imagemap. Noi, per semplicità, assumeremo che questi tre oggetti risiedano, se non specificato diversamente, tutti sullo stesso server; dopo tutto è quest’ultima la situazioni più comune nella pratica.

L’immagine, il tuo codice HTML, ed il file della mappa immagine sono tutti situati sul server nel solito modo. Il seguente codice HTML si adatta bene a tutte le mappe immagine server-side, ed in seguito vedremo alcuni esempi

<A HREF="URL-for-mapping"><IMG SRC="URL-to-image" ISMAP></A>

Il tag IMG necessita di un particolare attributo ALT e, solitamente, anche dei soliti HEIGHT e WIDTH. PEr migliorare l’accessibilità, sono disponibili anche TITLE e LONGDESC, in accordo con i principi del WAI .

Nei casi in cui la pagina già possegga adeguati strumenti di navigazione in modalità testo, è possibile ‘nascondere’ l’imagemap ai browser ‘text-mode’ per mezzo di ALT="", ma questo non è il solo modo; un metodo alternativo, e spesso prefetibile, è di far sì che se il browser in modalità testo può utilizzare la mappa immagine, il server restituirà un menu di tipo testuale. Se vuoi approfondire, vai pure alla pagina mappe immagine text-friendly .

Qui di seguito troverai una disamina sulle più tipiche configurazioni ed utilizzi di server. Se è la prima volta che leggi questo tutorial, potresti leggere Client-side maps  prima di proseguire nel dettaglio di questa pagina.

Server NCSA, col programma imagemap

QUesto è il tradizionale metodo di codifica per una imagemap NCSA, ed è completamente descritto nel tutorial di NCSA .

Il formato dei parametri del file di mappa immagine è:

method target-URL coord1 coord2 … coordn

dove ciascun coordn è formato da una coppia di coordinate di pixel x ed y, separate dalla virgola. Per esempio

rect http://www.w3.org/ 15,8 135,39

Nella formula di sopra, il parametro URL-for-mapping è formato da due parti: il percorso virtuale del programma di valutazione dell’imagemap, e quello del tuo file dei dati di mappa immagine. Di solito, il primo dovrebbe essere /cgi-bin/imagemap, così, se il tuo file dei dati di mappa si trova in /newbie/mydir/sample.map, il tag HREF diventa:

HREF="/cgi-bin/imagemap/newbie/mydir/sample.map"

[Ricorda: il tutorial su NCSA utilizza un URL assoluto nel A HREF=, ed un URL relativo nel IMG SRC=, anche se tutti i riferimenti puntano allo stesso server. Certamente il tutto è in grado di funzionare, ma non sembra esserci una vera ragione per preferire l’URL assoluto nel momento in cui quello relativo produce lo stesso effetto. Non confonderti, però, con gli URL che sono codificati all’interno dello stesso file dei dati di mappa; in questo caso c’è un’importante differenza fra le due forme, come vedremo fra breve.]

Quando l’imagemap viene utilizzata, il browser concatenerà le due coordinate x ed y del click all’URL-for-mapping, ed invia la richiesta risultante al server. QUest’ultimo risponderà seguendo la classica procedura che richiama un programma CGI (in questo caso il programma pre la valutazione dell’imagemap), passandogli il percorso virtuale che identifica il file dei dati dell’imagemap, e la stringa che definisce le coordinate x ed y del click. Il risultato da parte del ‘valutatore’ sarà l’URL del documento da richiamare, oppure un ‘nulla di fatto’. Vi sono due tipologie di URL supportate dal server NCSA:

Un URL locale (percorso virtuale) del tipo /newbie/mypage.html
In questo caso, il server restituisce imediatamente il contenuto della pagina specificata
Un URL completo, come http://www.w3.org/pub/WWW/
Il server restituisce una rilocazione all’URL specificato

Osserva come le due alternative abbiano diverse conseguenze sul caching. Potrebbe essere vantaggioso (tranne nel caso di documenti molto piccoli) forzare la rilocazione attraverso la seconda forma, anche quando la pagina da caricare è locale. Dovrai comunque utilizzare la seconda forma se il documento da richiamare è ad accesso controllato: il server NCSA si rifiuterà di restituire un documento ad accesso controllato se utilizzerai la prima forma.

Un’altro caso in cui la seconda forma di URL è obbligatoria è quando si desidera utilizzare la notazione #fragment dell’URL da richiamare.

L’azione di default

Le imagemap lato server possono richiedere (o meno, a seconda del tipo di server) richiedere la definizione di un URL di default da usare allorchè l’utente fa click all’interno dell’immagine ma al di fuori di ciascuna delle aree attive che sono state predisposte sulla map. E ci sono diversi modi di utilizzo di questa funzionalità:

  • Fornire un URL ‘nullo’ (di solito si tratta di uno script CGI che restituisce il valore 204, dicendo al browser di mantenere visualizzata la pagina corrente). E’ facile che il tuo server già preveda uno script di questo tipo.
  • Fornire un URL che punta ad un pannello di errori e che comunica all’utente che “hai fatto click in un punto errato, riprova!”. L’utente ddeve usare il tasto Indietro e riprovare.
  • Andare ad un URL che non fa niente di utile.

Attenzione! Cerca di porti dalla parte dell’utente. Egli fa click su di un’immagine e si aspetta che accada qualcosa (di utile). Così, la tua prima priorità in quanto autore di documenti è di far accadere avvenimenti utili per gli utenti. Lasciare che non accada nulla, o nulla di interessante, non è affatto produttivo; allora, se la tua imagemap non è stata creata per eseguire delle funzionalità dall’effetto irreversibile (il che non è mai una buona idea), è quantomeno consigliabile offrire qualcosa agli utenti – per esempio un menu di testo – che potranno sempre usare il tasto Indietro se non è ciò che si aspettavano.

Server NCSA, sfruttando il supporto di imagemap interno

E’ simile al precedente, ma evita la creazione ‘manuale’ e lunga di riferimenti al programma ‘valutatore’. In questo caso, il server sarà stato configurato per riconoscere le imagemap come una tipologia “magica” di contenuto (text/x-imagemap), e per associargli un’estensione di nome di file – per esempio .map. Quindi, usando lo stesso esempio di prima, l’HREF potrebbe essere semplicemente:

HREF="/newbie/mydir/sample.map"

ed il server richiamerebbe in automatico il programma per le imagemap.

Server Apache

Apache supporta le imagemap lato server attraverso un “modulo” chiamato mod_imap : esso è più efficiente di un semplice programma CGI come quello NCSA. Per quanto concerne la mappatura degli URL, essa è molto simile a quella del server NCSA con supporto interno di imagemap appena incontrata. La configurazione del server (anche se questo è solitamente un lavoro dell’amministratore del server) ha luogo attraverso la direttiva “AddHandler”: per compatibilità con NCSA, all’interno di una direttiva AddType si può inserire il tipo di contenuto “magico”.

Il gestore supporta svariati formati di file di imagemap, uno dei quali è quello NCSA. Quindi il gestore Apache può rapportarsi con preesistenti imagemap NCSA; in ogni caso, per ottenere le migliori funzionalità (sapendo che la mappa immagine sarà usata su un server Apache o uno che supporta queto formato) si preferisce quanto segue:

method target-URL coord1 coord2 … “Menu text”

dove ciascun coordn rappresenta la coppia di coordinate x ed y, separate dalla virgola. Per esempio:

rect http://www.w3.org/ 15,8 135,39 "W3 Consortium"

OSserva la presenza di una stringa di testo, che il server userà – in determinati casi – per la costruzione di un menu testuale.

Per una descrizione completa di cosa un imagemap Apache possa contenere, consulta la notevole documentazione Apache 

Migrazione da NCSA ad Apache

La soluzione della guida alla riscrittura di moduli , per questo problema, è la seguente:

    RewriteEngine  on
    RewriteRule    ^/cgi-bin/imagemap(.*)  $1  [PT]

ma funziona solo se l’estensione del file dell’imagemap è già riconosciuta dal server. Se sono presenti diverse tipologie di imagemap, con uno schema di estensioni non uniformi (o addirittura senza alcuna estensione), Joshua Slive ha evidenziato una soluzione, che ho provato con successo: si tratta di modificare la seconda riga nel seguente modo:

    RewriteRule  ^/cgi-bin/imagemap(.*)  $1  [PT,T=application/x-httpd-imap]

“Phantom imagemap”

Un’idea promettente ebbe inizio con un modulo di Apache, il modulo “phantom imagemap” mod_phantomimap che si proponeva di utilizzare una imagemap lato client nel file contenente il codice HTML come sua imagemap lato server. Sembrava la maniera ideale per ottenere il supporto lato server “alle spalle” del client, con pochi sforzo da parte dello sviluppatore HTML. Sfortunatamente, il modulo distribuito era difettoso, l’autore non era raggiungibile (siamo intorno al 1996-7). Credo che il supporto lato client fosse così diffuso che nessuno sentisse la spinta a perseguire tale scopo: comunque ho trovato per caso un provider che oggi offre questo servizio  ai propri clienti (ma non sembra che rendano pubblico il codice sirgente)

Il formato “CERN” di imagemap

Il W3C (ex-“CERN”) httpd  ha un ‘valutatore’ di imagemap che implementa il formato “CERN”. Sappi che la versione HTTPD 3.0A (1996) è stata quella finale

Riassumendo

Come abbiamo visto, diversi server (per essere precisi dovremmo dire diversi valutatori di imagemap) possono avere a che fare con diversi formati di imagemap. Conseguentemente, quando scegli un tool per le mappe immagine, assicurati (specialmente se hai intenzione o necessità di migrare da un server ad un altro) che il tuo tool possa leggere tutte le attuali imagemap, e scriverle nel formato più appropriato per un qualsiasi server.

Le sole ragioni che mi potrebbero portare a preferire le imagemap lato server, sono che le aree sulla mappa sono mantenute ‘segrete’ (immagina una caccia al tesoro) o che le coordinate sono frutto di un complesso algoritmo, piuttosto che di un semplice elenco di aree (ma in quel caso, avrai anche bisogno di un valutatore personalizzato).

Potrebbero interessarti anche i seguenti articoli

  • Aree sovrapposteAree sovrapposte Spesso alcuni sviluppatori si tuffano in situazioni di difficile soluzione nel tentativo di evitare la sovrapposizione di aree in una mappa immagine, anche se sono […]
  • Altre mappe immagineAltre mappe immagine Questa sezione menziona, senza dettagliare, alcune tipologie alternative di mappa immagine. FORM..INPUT TYPE=IMAGE L'elemento INPUT TYPE=IMAGE dell'HTML FORM […]
  • Mappe immagine – IntroduzioneMappe immagine – Introduzione Le mappe immagine permettono di associare diverse parti di un'immagine a diversi URL. Il primo tipo di mappa immagine ad essere definita ed implementata, fu quella […]
  • Guida alle Mappe ImmagineGuida alle Mappe Immagine Questo articolo affronta le problematiche legate alla creazione di mappe immagine, ed alle alternative che uno sviluppatore si trova davanti. Il tutto, […]
  • Mappe immagine lato clientMappe immagine lato client Le specifiche originarie per le mappe immagine lato client erano su RFC1980. La versione correntemente usata è, in buona sostanza, quella dell'HTML4.01. […]
Condividi:

Informazioni sull'autore

Roberto Castaldo
Roberto Castaldo
Sono nato e vivo a Napoli, ed opero professionalmente nel mondo dell'informatica da più di vent'anni. In realtà l'informatica, insieme alla musica e ad altre poche cose, è stato da sempre un mio chiodo fisso, e la buona sorte mi ha aiutato a trasformarlo in un mestiere. Sin dalle mie primissime esperienze lavorative - insegnavo dattilografia ed i primi rudimenti di informatica in una scuola privata - mi sono trovato a mio agio nel settore della formazione e della divulgazione, certamente aiutato dai miei studi classici. Nel 1987 ho iniziato la mia attività come insegnante d'informatica in un Istituto Professionale Statale - per circa due anni sono stato il più giovane insegnante di ruolo d'Italia. Ho avuto svariate esperienze anche nel settore privato come sviluppatore (TPascal - lo ricordate? - VB, ASP e, più di recente VB.NET ed ASP.NET), ma soprattutto come docente e come divulgatore. Ho effettuato attività di formazione presso le più grandi realtà imprenditoriali italiane (IBM, Omnitel, Telecom Italia, TIM, Unicredito, Ekip, BNL, SSGRR), ma anche all'estero in qualità di docente e/o progettista di percorsi formativi; gli argomenti spaziano dal mondo Office fino al multimedia ed alla programmazione avanzata ASP ed ASP.NET. Ho collaborato con l'Istituto Italiano per gli Studi Filosofici di Napoli, ho redatto articoli/tutorial per un'importante rivista informatica (Win98 Magazine), ed ho partecipato allo sviluppo di CD-Rom Multimediali (IBM, Selfin, BNL) curando personalmente la registrazione dei commenti audio ed il montaggio delle musiche (CoolEdit), l'eventuale connessione a database remoti, l'assemblaggio degli elementi testuali, grafici e multimediali (Director 8) fino alla creazione del master definitivo. Negli anni 1998-2000 ho collaborato con la Gazzetta dello Sport Online curando, in occasione dei più importanti avvenimenti sportivi (Mondiali ed Europei di calcio, Giro d'Italia, Campionato di Serie A) le pagine contenenti la traduzione in inglese e francese degli articoli in italiano. Il mio compito consisteva nell'inviare ai miei traduttori la cronaca in italiano, riceverne la traduzione, creare le pagine inglesi e francesi del sito www.gazzetta.it e pubblicarle sul server, il tutto entro 90 minuti dalla fine dell'evento. Nel frattempo, mi avvicinavo in maniera sempre più approfondita alle problematiche legate all'accessibilità di siti web, progettando percorsi di formazione ad hoc, ed aderendo entusiasticamente al progetto webaccessibile.org. Sono stato per diversi mesi membro del XML Protocol Working Group del W3C, ed attualmente partecipo ai lavoro del WAI Web Content Accessibility Guidelines (WCAG) Working Group e del E&O Education ad Outreach Working Group.

Commenti

Nessun commento

    Rispondi

    Link e informazioni