artemate

CORSO HTML - parte terza

LE MAPPE CLICCABILI
LE APPLET
VERSIONI HTML
FOGLI DI STILE

MAP

<MAP> creare mappe cliccabili

Le mappe cliccabili hanno fatto il loro ingresso nel Web publishing già da molto tempo, fin dalle primissime versione di HTML. Si tratta di elementi molto usati dagli sviluppatori per la facilità d'utilizzo e l'evidente utilità.
Il concetto di mappa cliccabile è semplice e parte da un'altrettanto semplice constatazione: spesso collegare un unico link ad un'intera immagine limita il webdesigner che invece potrebbe linkare diverse pagine sfruttando il singolo gadget grafico. Le mappe cliccabili rimuovono questo limite e consentono, all'interno di una singola immagine, di creare differenti aree di ritaglio, ognuna delle quali con un link diverso. Il concetto fondamentale sul quale si reggono le mappe cliccabili è quelle delle coordinate, che uniche possono indicare al browser punti precisi dell'immagine. Esistono due tipi di mappe, ma prima di passare alla loro esposizione è bene precisare che l'uso di estensioni GIF o JPG è ininfluente e non crea alcuna incompatibilità.

Mappe dal lato server (ISMAP)

Affinchè queste mappe funzionino è necessario che sul tuo server siano presenti le estensioni CGI necessarie. Si tratta di programmi gratuitamente scaricabili in Rete e raccolti da CGIpoint.it.
Le ISMAP, questo il termine tecnico che indica questo genere di mappe, individuano le coordinate dell'immagine attraverso un file esterno. Gli URL creati dalle ISMAP è seguito dal valore delle coordinate x e y, separate da una virgola e precedute da un punto interrogativo. Ecco un esempio:

http://www.html.it/cgi-bin/menu.map?25,55

Questo URL indica che nel punto x=25 e y=55 il link è quello stabilito all'interno della ISMAP.

Mappe dal lato client (USEMAP)

Le mappe da lato server non sono molte diffuse soprattutto per la possibilità di ottenere un risultato del tutto simile con una procedura da lato client. Stiamo introducendo le USEMAP, cioè le mappe che vengono interpretate senza alcun intervento da parte del server. La sintassi corretta che HTML indica per inserire USEMAP in un documento è la seguente:

<IMG SRC="img/home/menu.gif" WIDTH=609 HEIGHT=87 BORDER=0 usemap="#menu">

Dove la prima parte del codice richiama evidentemente l'immagine e ne stabilisce la grandezza; mentre #menu indica il nome del file (con estensione .map) che contiene le informazioni relative alle coordinate. In altre parole le USEMAP non fanno altro che richimare un file esterno che per ogni link dell'immagine indica un relativo URL. Quello che segue è il contenuto di un file con estensione .map (editabile molto semplicemente anche con blocco notes di Win95).
Per comprendere meglio il funzionamento di una USEMAP prendiamo in considerazione un'immagine e simuliano che la nostra esigenza sia quella di creare tre differenti link d'immagine per ognuno dei tre elementi grafici: la bicicletta, il mouse e i pompieri. Se usassimo un normale ancoraggio d'immagine avremmo un unico link per tutti gli elementi grafici. Usando un USEMAP, al contrario, è possibile creare tre differenti aree di link per ognuna delle immagini.
Il codice così generato viene inserito all'interno dello stesso documento:

<map name="06a">

<area shape="poly" alt="Questo è un mouse" coords="181,27,172,14,163,10,150,14,136,23,136,34,128,40,123,32,112, 31,115,42,121,52,132,54,139,49,146,38,150,33,152,48,148,64,153,80, 161,82,172,82,180,76,183,53,181,34,181,24,181,25" href="mouse.htm" title="Questo è un mouse">

<area shape="rect" alt="Camion dei pompieri" coords="207,7,279,82" href="pompieri.htm" title="Camion dei pompieri">

<area shape="default" nohref>
</map>

Il codice è contenuto all'interno dei tag MAP, che chiudono e aprono la sintassi. Le tre aree di ritaglio sono generate da altrettanti campi AREA. Esistono tre differenti modi per ritagliare un'immagine:
poly: ritaglia immagini frastagliate attraverso linee rette
rect: ritaglia aree quadrate o rettagolari di 4 lati
circle: ritaglia aree circolari

Nel nostro esempio sono presenti aree di ritaglio poly e rect.
I commenti alle singole aree di ritaglio sono generati dai campi title e alt e fanno in modo che il browser visualizzi testo descrittivo per ogni singola area di link.

Creato il codice è necessario inserire all'interno dell'immagine un riferimento allo stesso.

<img src="06a.gif" width=300 height=100 border=0 alt="" usemap="#06a">

La dicitura usemap="#06a" richiama il codice impostato in precedenza ed assegna alle immagini le aree di ritaglio.
Creare delle aree di ritaglio non è affatto semplice se non si dispone di un programma adatto allo scopo che eviti un calcolo manuale. La gran parte degli editor HTML presenti sul mercato prevede generatori automatici di mappe, ed ai file di help di ognuno di essi rimandiamo per un approfondimento ulteriore. Esistono anche programmi esclusivamente dedicati alla creazione di USEMAP, tra questi consigliamo Mapedit: di piccole dimensioni (poco meno di 300kb di file d'installazione) e facile utilizzo. E' un programma shareware in prova per un periodo di 30 giorni e può essere gratuitamente scaricato .

LE APPLET

A differenza di Javascript, le applet Java sono dei veri e propri programmi residenti su server, con una propria sintassi contenuta all'interno di file con estensione ".class", che viene poi richiamata da codice HTML inserito nella pagina. Quindi il file class e' indipendente dalla pagina HTML e senza di esso (o essi, visto che molte applet si compongono di piu' file class) l'applet non funzionerebbe e il browser (Netscape o MSIE) darebbe in risposta un messaggio simile a questo:

"load: class xxxx not found"

Ovviamente le "xxxx" stanno per il nome del file class che il codice HTML ha richiamato ma che in realta' non e' presente nel percorso indicato.
Al contrario, se il file e' presente dove indicato all'interno del codice HTML della pagina, l'applet verra' caricata, generando gli effetti desiderati.

La presenza dei file .class richiama, poi, un ulteriore differenza con Javascript. Una delle caratteristiche di quest'ultimo, infatti, e' quella di essere facilmente modificabile; un editor HTML o addirittura blocco notes di Win95-98 sono sufficienti a modificare o rivedere completamente qualsiasi script.
Al contrario, per modificare un file .class e' necessario un compilatore Java e una conoscenza approfondita del linguaggio di Sun. Due elementi che il 99% degli utenti non possiedono e che precludono, nei fatti, qualsiasi modifica dell'applet.

Gli unici parametri modificabili sono, quindi, ancora una volta quelli inseriti all'interno del file HTML che richiama l'applet.

Le applet contenute in HTML.it sono singolarmente scaricabili in file zippati. Al termine di ogni esempio pratico, infatti, e' presente un link che recita:
"Scarica l'applet in formato zip"

Cliccando su questo link si apre una piccola finestra di conferma per il download del file indicato.
Dal momento in cui il file zip e' presente sull'hard disk e' necessario seguire alcune semplici operazioni:

1. decomprimere il contenuto del file all'interno di una directory (o cartella).
Solitamente questi file contengono uno o piu' file .class, una o piu' immagini e un unico file HTML. 2. visualizza il file HTML di cui al punto precedente con il tuo browser (Netscape o MSIE) per osservarne il corretto funzionamento.

3. apri il file HTML con un editor ovvero,

4. A questo punto ti troverai di fronte al codice HTML del documento. Non considerare l'intestazione e tutto il resto, ma poni attenzione soltanto al codice compreso tra:





Se eventualmente mancasse questo commento, allora fai riferimento al codice compreso tra:

<APPLET>

</APPLET>

Evidenzia con il mouse tutto il codice e serviti del copia/incolla per trasferirlo su un'altra pagina.

5. Apri con un editor (o con blocco note) il documento HTML sul quale vuoi che venga inserita l'applet e incolla nel punto che desideri il codice copiato. Anche in questo caso serviti del copia/incolla. Fatto questo salva le modifiche al documento.

6. Copia i file .class e le eventuali immagini dalla directory (o cartella) dove hai decompresso il file scaricato da HTML.it (punto 1.), e trasferiscili nella directory del file che hai modificato al punto 5.
Attenzione: non e' necessario che copi in questa cartella anche il file HTML, ma soltanto i file class e le eventuali immagini.

7. Se vuoi richiamare i file class da una directory diversa da quella in cui e' depositato il file HTML, devi impostare il parametro Codebase, come segue:

<APPLET CODE="XXXXX.class" CODEBASE="http://www.nomesito.com/java">

Ovviamente a "XXXXX.class" va sostituito il nome del file class, e a "http://www.nomesito.com/java" il percorso per raggiungere lo stesso.

Iil supporto del Java deve essere abilitato nei browser, altrimenti vedrai solo un messaggio che dice che il browser non supporta il java.

Gli errori piu' comuni

A) NOMI LUNGHI DI FILE SPEZZATI E CAMBIAMENTO DI MAIUSCOLE/MINUSCOLE:

B) Dimensione sbagliata di immagini o applet. Le immagini normalmente DEVONO essere di dimensioni stabilite (ad esempio 64*64, 128*128 ecc.). Inoltre, è bene non allargare le applet troppo, e immagini più larghe di 600 pixels non saranno visibili pienamente a chi usa un modo video in 640x480.

VERSIONI DI HTML

HTML dal 1989 regge ininterrottamente le sorti del Web.

L'HTML ha avuto, ed ha, uno sviluppo impetuoso e per molti versi simile a quello di internet. Uno sviluppo che si è cercato di regolare per la prima volta nel novembre del 1995, con la definizione da parte dell'Internet Engineering Task Force (IETF) dell'HTML 2.0. Questa prima versione ufficiale nacque già sorpassata dallo sviluppo di questo linguaggio, tanto da non tenere in conto le tabelle, che i browser presenti sul mercato avevano già adottato da tempo.

Nel marzo del 1995 il W3C (World Wide Web Consortium) iniziò a lavorare su una versione 3.0 destinata ad apportare numerose e fondamentali modifiche alla versione precedente. Ma il W3C si trovò ad operare mentre Microsoft e Netscape rilasciavano versioni dei rispettivi browser contenenti nuovi tags i quali, in ultima analisi, rendevano impossibile la definizione di uno standard. Così il W3C abbandonò la stesura della versione 3.0 per passare direttamente alla 3.2. Il risultato, a dire il vero, non fu certo dei più esaltanti. Le maggiori novità della versione 3.2 sono state: le tabelle, i font colorati, gli applet java, i tag superscript e subscript e le Client Side Image. Come si vede, tutti elementi da tempo supportati dai browser e adottati dai webmaster per la creazione di siti internet.

Ripercorrendo la storia dell'HTML, quindi, è di tutta evidenza il gap tra ciò che le "istituzioni ufficiali" stabiliscono come standard, e ciò che in realtà avviene nel web. Questa situazione è imputabile, da un lato alle strategie commerciali dei due grandi concorrenti (MS e Netscape), dall'altro alla genetica "frenesia" della rete. Questa sorta di "doppia velocità" non ha finora permesso la definizione di uno standard per l'HTML. Non è infrequente che i due browser principali adottino, per generare uno stesso effetto, comandi diversi ed incompatibili; a danno, è ovvio affermarlo, dei webmaster che si trovano a fare una scelta di campo tra uno dei due prodotti.

Il W3C si è impegnato a definire ufficialmente il nuovo standard (in fase di studio chiamato "Cougar"), finalmente espresso nel "W3C Proposed Recommendation".
E' nato quindi l'HTML 4.0 con propositi e prospettive diverse dai precedenti tentativi. A differenza del passato sia Netscape che Microsoft si sono impegnate ad implementare i lavori del W3C, e soprattutto ad accettarne i risultati rendendo i propri browser compatibili. E' bene ricordare che il W3C è un consorzio formato da: Adobe, Hewlett Packard, IBM, Microsoft, Netscape, Novell, SoftQuad e Sun Microsystems.

L'HTML 4.0 segna il definitivo avvicinamento al Dynamic HTML, ma non è certo questa l'unica importante innovazione:

Caratteri:
E' stato adottato il set di caratteri ISO/IEC:10646, che include qualsiasi tipo di carattere in qualsiasi lingua. Ciò vuol dire che il W3C ha tenuto conto dello sviluppo planetario del web, e che sarà possibile inserire in una stessa pagina idiomi o caratteri di lingua differenti; che oggi genererebbero soltanto incomprensibile testo "impazzito".

Accessibilità
HTML 4.0 tiene conto delle limitazione incontrate dai portatori di handicap, e prevede diversi strumenti per facilitarne l'accesso a documenti iperstestuali:

distinzione tra struttura base e contenuto di un documento attraverso i fogli di stile;

tabelle che prevedono la possibilita' di accedere ai non vedenti;

form che permettono di essere selezionati attraverso tasti di scelta rapida;

mappe cliccabili che possono visualizzare testo in alternativa alle immagini;

supporto dei comandi title e lang per tutti gli elementi;

descrizioni lunghe per tabelle, immagini, frames ecc.;

supporto degli elementi ABBR e ACRONYM;

possibilita' di usare, all'interno di fogli di stile, linguaggi di comunicazione quali tty, braille ed altri.

Object

Nell'HTML 4.0 potranno essere inseriti elementi eseguibili e multimediali, per fare questo il marcatore OBJECT sostituirà gli attuali IMG e APPLET. Questo marcatore omnicomprensivo permette di includere immagini, video, suoni e programmi esecutivi nel documento, attraverso una tecnica gerarchica per specificare varie alternative in base all'ambiente in cui si trova ad operare il browser dell'utente.
Facendo un esempio riguardo il marcatore OBJECT e la sua caratteristica di generare alternative, verra' di seguito riportato un codice che tenta di visualizzare in alternativa (1) un applet che genera l'immagine animata di una bandiera sventolante; la stessa animazione in formato Mpeg (2), ed infine un'immagine fissa JPG della bandiera:

<OBJECT title="Una bandiera" classid="java:Flag.class" width="300" height="200">
<OBJECT data="flag.mpeg" type application/mpeg">
<OBJECT src="flag.jpg">

<FONT SIZE=4>Una bandiera</FONT>

</OBJECT>
</OBJECT>
</OBJECT>

Fogli di stile

L'HTML è stato progettato per gestire singole pagine. Se ciò ha generato la definizione di un linguaggio semplice e diretto, non è più aderente alle necessità di siti spesso composti da migliaia di pagine. A questo si affianca il problema incontrato dai grafici professionisti riguardo la difficoltà di posizionamento all'interno del documento di immagini e testo.
A queste problematiche HTML 4.0 cerca di far fronte adottando i fogli di stile, i quali possono essere inseriti all'interno di un documento iperstestuale in tre modi:

attraverso un file esterno;

attraverso l'intenstazione generale di ogni singolo documento;

o, finalmente, attraverso la specifica degli attributi nel singolo TAG.

Sfruttando i fogli di stile è possibile modificare la struttura di diverse pagine agendo su un unico file esterno che ne determina l'aspetto. I fogli di stile sono destinati a sostituire l'abitudine, sempre più frequente, di layout di pagina creati attraverso strumenti impropri quali le tabelle.
La marcatura HTML dovrà, quindi, tornare alla sua originaria funzione di definizione della struttura logica del documento, lasciando ai fogli di stile la gestione del layout di pagina.
I fogli di stile non necessariamente debbono essere HTML. Alcuni linguaggi specializzati come il CSS (Cascading Style Sheets) permettono di riunire direttive di stile provenienti da fonti diverse, facendo prevalere le une alle altre in base alle scelte del webmaster.

Tabelle

Il modello definitivo di tabelle dell'HTML 4.0 riprende la prima stesura dell'HTML+. Il modello precedente è stato esteso rispondendo a requisiti di controllo nella presentazione dati, richiesti dalle nuove necessità della rete.
HTML 4.0 permette un notevole controllo sulle tabelle (basate su RFC1942), che sono esclusivamente orientate alla presentazione dati, e non, come avviene attualmente, alla definizione del layout di pagina.
E' stato introdotto, tra le altre cose, il nuovo elemento COLGROUP che permette di creare gruppi di colonne, specificandone allianeamento e larghezza.
Nello specifico, riprendendo quanto ufficialmente riportato nel W3C Proposed Recommendation, le più importanti innovazione alle tabelle sono:

possibilità di allineamento per caratteri indicati come "." e ":" (per esempio, sarà possibile allineare una colonna di numeri sul punto decimale);
introduzione di maggior flessibilà;
possibilità di ottenere tabelle scorrevoli con testate fisse, più un supporto adeguato per le tabelle interrotte durante le pagine di stampa;
semplificare le tabelle importate per adeguarsi al modello SGML CALS. L'ultima stesura fa sì che l'attributo sia compatibile con le ultime versioni dei più popolari browsers;

è stato introdotto un nuovo elemento che permette di ragruppare una serie di colonne con larghezza e proprietà di allineamento differenti da uno o più elementi, e rules="basic" è stato sostituito da rules="groups".

FORM

Sono stati introdotti nuovi attributi destinati a risolvere le lacune dell'HTML 3.2:

l'attributo accesskey provede di specificare un accesso diretto tramite tastiera ai campi del formulario;

con readonly, un attributo supplementare, i webmaster possono vietare i cambiamenti ai campi del form;

l'elemento LABEL aggiunge un'etichetta con un particolare form di controllo.
L'elemento FIELDSET raggruppa campi in relazione fra di loro e, in associazione con l'elemento LEGEND, può essere usato per nominare il gruppo. Entrambi questi nuovi elementi, permettono una migliore interpretazione e interazione;

una nuova serie di attributi onchange-INPUT, in associazione con il supporto per i linguaggi script, permette ai form dei providers di verificare i dati inseriti dall'utente;

l'elemento INPUT ha un nuovo attributo accept che permette agli autori di specificare una lista di media o tipi di struttura per l'input;

il nuovo elemento BUTTON può essere usato per arricchire i forms in modo diverso oltre ai classici "submit" e "reset".

Scripting

HTML 4.0 prevede la possibilità di associare script ai form, in modo da generare una maggior interattività con l'utente, senza per questo doversi servire di complesse applicazioni java.

Stampa

HTML 4.0 permette di stampare pagine web senza per questo ottenere una pura e semplice riproduzione della pagina, tout court. Il programmatore HTML 4.0 ha la possibilità di definire ciò che verrà stampato, e come verrà stampato, quando l'utente farà click sul pulsante "Stampa" del proprio browser.

I nuovi elementi dell'HTML 4.0 sono:
Q, INS, DEL, ACRONYM, LEGEND, COLGROUP, BUTTON, e FIELDSET

Gli elementi disapprovati:
ISINDEX, APPLET, CENTER, FONT, BASEFONT, STRIKE, S, U, DIR, e MENU
Gli elementi ritenuti obsoleti:
XMP, PLAINTEXT, and LISTING
al posto dei quali va usato esclusivamente il comando PRE

In ultima analisi, secondo chi scrive, HTML 4.0 risponde pienamente alle esigenze attuali della rete, anche grazie all'impegno e alla buona volontà dimostrata dai partecipanti al W3C.
Attualmente HTML 4.0 rappresenta un valido punto di riferimento per i webmaster che, a differenza del passato, possono ora riferirsi ad uno standard avanzato e non anacronistico.