Avvertenza

Questo documento è una versione provvisoria, e non dovrebbe essere divulgato.

In caso di errori, si prega di segnalarli all'autore.

Autore:	Prof. Massimo Piai
Data:	2005-05-05
Aggiornamenti:	2005-05-06, 2005-05-08, 2005-05-11, 2005-05-12

Indice

1 Premessa
2 Aderenza allo standard ISO 15445
3 Pubblicazione dei documenti e «pagina casa»
4 Inclusione di immagini e «miniature»
5 Rispetto del diritto d'autore
6 Altre indicazioni
7 Copyright

1 Premessa

Il presente documento intende fornire allo studente:

suggerimenti pratici su come preparare un semplice sito personale;
indicazioni e convenzioni cui aderire al fine di ottenere una valutazione soddisfacente del lavoro svolto.

Questo documento è stato realizzato utilizzando gli strumenti Docutils.

2 Aderenza allo standard ISO 15445

Ogni documento HTML che faccia parte del sito deve aderire allo standard ISO 15445.

A tale scopo lo studente può avvalersi degli script html-frammento-valido.sh e html-completa-frammento.sh. In pratica, lo studente preparerà dei frammenti di documento HTML (essenzialmente si tratta del contenuto dell'elemento BODY), ne controllerà la validità mediante lo script html-frammento-valido.sh e genererà il documento completo mediante lo script html-completa-frammento.sh.

Esempio

Ci si posizioni all'interno della directory di lavoro, ad esempio:

$ cd ~/lavoro

Si parte da un file che contiene un frammento HTML:

~/lavoro$ ls
fram-1.html
~/lavoro$ cat fram-1.html 
<P>Questo è il primo paragrafo... bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla. Bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla.</P>

<P>Questo è il secondo paragrafo... bla bla bla bla bla
bla bla bla bla. Bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla. Bla bla bla bla bla bla
bla bla bla bla bla bla bla.</P>

Si verifica la corretteza sintattica:

~/lavoro$ html-frammento-valido.sh fram-1.html 
fram-1.html: Frammento HTML valido! (ISO/IEC 15445)

Si produce il documento completo:

~/lavoro$ html-completa-frammento.sh fram-1.html 
fram-1.html: Frammento HTML valido! (ISO/IEC 15445)
Sorgente HTML completo: ./fram-1.iso15445.html

Si verifica che il file è stato effettivamente generato:

~/lavoro$ ls
fram-1.html  fram-1.iso15445.html
~/lavoro$ cat fram-1.iso15445.html 
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">

<HTML LANG="it">

<HEAD>

<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=ISO-8859-1">

<TITLE>....</TITLE>

</HEAD>

<BODY>

<P>Questo è il primo paragrafo... bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla. Bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla.</P>

<P>Questo è il secondo paragrafo... bla bla bla bla bla
bla bla bla bla. Bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla. Bla bla bla bla bla bla
bla bla bla bla bla bla bla.</P>

<HR>

<P><A HREF="http://validator.w3.org/check?uri=referer"><IMG
SRC="http://validator.w3.org/images/v15445" ALT="Valid
ISO-HTML!"></A></P>

</BODY>

</HTML>

Come si può notare, il documento generato dallo script html-completa-frammento.sh contiene tutti gli elementi che lo rendono un documento completo e corretto in adesione allo standard ISO 15445, come si può verificare con il seguente comando:

~/lavoro$ nsgmls -s fram-1.iso15445.html

che, se non genera messaggi, significa che la correttezza è verificata.

Inoltre, ci sono altre informazioni di contorno, di utilità pratica.

L'unica accortezza che lo studente deve avere a questo punto è che l'elemento TITLE deve essere completato a mano, direttamente sul file con estensione .iso15445.html. Per convenzione, tutti i documenti contenuti nel sito avranno come contenuto dell'elemento TITLE la stessa informazione, ossia il «nome» del sito. Ad esempio, se il sito tratta della Rivoluzione Francese, allora l'elemento TITLE potrebbe essere così:

<TITLE>La Rivoluzione Francese</TITLE>

Avvertenza

Se sono necessarie ulteriori modifiche, lo studente opererà sul frammento, lo ricontrollerà e rigenererà un nuovo documento completo.

3 Pubblicazione dei documenti e «pagina casa»

I documenti che cosituiscono il sito, una volta completati, vanno pubblicati.

Concretamente ciò consiste nella creazione di un'opportuna sottodirectory in ~/public_html; il nome della sottodirectory costituisce in pratica il «nome» del sito; i documenti sono automaticamente pubblicati nel momento in cui vengono copiati all'interno di tale sottodirectory.

Avvertenza

Si presti molta attenzione a copiare i documenti non con il nome generato automaticamente dallo script html-completa-frammento.sh, bensì con il nome del frammento originale, altrimenti non funzionerebberò più i collegamenti ipertestuali interni al sito.

Inoltre si eviti accuratamente di procedere a modifiche manuali direttamente sui file già presenti all'interno della directory ~/public_html; invece, si modifichino i frammenti nella directory di lavoro, li si completino e infine li si copino.

Il sito deve, per convenzione, contenere un documento denominato index.html che in pratica è il documento principale (o «pagina casa») del sito. Da esso deve essere possibile raggiungere direttamente o indirettamente tutti gli altri documenti del sito tramite opportuni collegamenti ipertestuali.

La «pagina casa» risulta dunque raggiungibile mediante il protocollo HTTP utilizzando un URI che termina col nome della directory contenente il file corrispondente.

Esempio

Si prepara la directory che conterrà il sito:

~/lavoro$ mkdir ~/public_html/rivoluzione

Si parte da un file che contiene un frammento HTML, che costituirà la «pagina casa»:

~/lavoro$ ls
fram-1.html  fram-1.iso15445.html  index.html
~/lavoro$ cat index.html 
<H1>Questa è la «pagina casa»</H1>

<P>Questo è il primo paragrafo... bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla. Bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla.</P>

Se ne verifica la validità:

~/lavoro$ html-frammento-valido.sh index.html 
index.html: Frammento HTML valido! (ISO/IEC 15445)

Lo si completa:

~/lavoro$ html-completa-frammento.sh index.html 
index.html: Frammento HTML valido! (ISO/IEC 15445)
Sorgente HTML completo: ./index.iso15445.html
~/lavoro$ ls
fram-1.html  fram-1.iso15445.html  index.html  index.iso15445.html
~/lavoro$ cat index.iso15445.html 
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">

<HTML LANG="it">

....

<H1>Questa è la «pagina casa»</H1>

....

Si copiano i file usando i nomi corretti:

~/lavoro$ cp index.iso15445.html ~/public_html/rivoluzione/index.html
~/lavoro$ cp fram-1.iso15445.html ~/public_html/rivoluzione/fram-1.html

A questo punto si può accedere alla «pagina casa» del sito tramite un URI del tipo:

http://SERVENTE_HTTP/~UTENTE/SITO/

Per esempio, se il sito è ospitato da una macchina il cui indirizzo IP è 192.168.1.129, l'utente proprietario del sito è denominato pierino e il sito è contenuto nella directory ~/public_html/rivoluzione, allora l'URI da utilizzare è:

http://192.168.1.129/~pierino/rivoluzione/

4 Inclusione di immagini e «miniature»

Si dice che un'immagine valga più di mille parole. È senz'altro condivisibile che un'illustrazione ben scelta può favorire molto la trasmissione del pensiero dell'autore al lettore; ma è altresì vero che se l'immagine non è scelta con cura l'effetto può essere controproducente.

Inoltre, è necessario prestare cautela a non includere immagini «ingombranti» che rendano la lettura del documento nel suo insieme tutt'altro che agevole.

4.1 Immagini di grandi dimensioni

Un'immagine dovrebbe costituire da sola il contenuto di un paragrafo (il testo che precede e/o segue dovrebbe spiegare o giustificare la presenza dell'immagine), e le sue dimensioni non dovrebbero mai superare i 400 o 500 pixel di larghezza e i 200 o 300 di altezza. Può essere quindi necessario preparare un file alternativo contenente l'immagine stessa ma rimpicciolita; convenzionalmente tale file dovrebbe avere lo stesso nome del file originale, tranne che per il suffisso _sm (come «small», ossia «piccolo»).

Esempio

Si parta da un file grafico in formato JPEG:

~/lavoro$ ls
aereo3.jpg  fram-1.html  fram-1.iso15445.html  index.html index.iso15445.html

Se ne determinino larghezza e altezza:

~/lavoro$ imgsize aereo3.jpg 
width="510" height="341"

Siccome la larghezza dell'immagine supera i 500 pixel è necessario ridimensionarla. Per scendere al di sotto dei 400 pixel in larghezza è sufficiente portarla al 75% delle dimensioni originali (75 / 100 * 510 = 383, approssimativamente):

~/lavoro$ convert -resize 75% aereo3.jpg aereo3_sm.jpg
~/lavoro$ imgsize aereo3_sm.jpg 
width="383" height="256"

Si noti che entrambe le dimensioni sono state ridotte in proporzione, in modo da mantenere l'aspetto geometrico dell'immagine.

A questo punto è possibile inserire l'immagine ridimensionata nel documento HTML:

....

<P><IMG SRC="aereo3_sm.jpg" ALT="[aeroplano in decollo]"></P>

....

Eventualmente, è possibile far sì che l'immagine rimpicciolita costituisca un'àncora per un collegamento ipertestuale al file che contiene l'immagine a dimensioni piene.

Esempio

....

<P><A HREF="aereo3.jpg"><IMG SRC="aereo3_sm.jpg"
ALT="[aeroplano in decollo]"></A></P>

....

4.2 «Miniature»

La tecnica cosiddetta delle «miniature» consiste in un'estensione degli esempi visti sopra al caso di più immagini affiancate. In pratica la tecnica si applica al caso in cui si vogliano presentare più immagini in sequenza sulla stessa linea di testo; è evidente che il problema fondamentale è quello di ridimensionare le immagini in modo tale che:

tutte le immagini della linea condividano la stessa altezza, tipicamente inferiore ai 200 o 300 pixel;
la larghezza complessiva sia inferiore ai 400 o 500 pixel.

Le immagini così ridotte solitamente sono molto piccole, tanto da meritare il termine «miniature»; i file corrispondenti sono convenzionalmente contraddistinti dal suffisso _tn (da «thumbnail», ossia - idiomaticamente - «miniatura»). Gli elementi IMG corrispondenti alle miniature allineate dovrebbero essere separati da un singolo spazio vuoto. Ciascuna miniatura deve costituire un'àncora di un riferimento ipertestuale all'immagine a dimensioni piene.

Esempio

Si determinino le dimensioni di cinque immagini da cui partire per costruire le miniature:

~/lavoro$ imgsize bambino.jpg basket.jpg caffe.jpg calcio.jpg capra.jpg 
bambino.jpg: width="510" height="341"
basket.jpg: width="340" height="508"
caffe.jpg: width="510" height="341"
calcio.jpg: width="510" height="339"
capra.jpg: width="340" height="511"

Bisogna intanto ridurre l'altezza delle immagini a 200 pixel:

~/lavoro$ convert -resize x200 bambino.jpg bambino_x200.jpg
~/lavoro$ convert -resize x200 basket.jpg basket_x200.jpg
~/lavoro$ convert -resize x200 caffe.jpg caffe_x200.jpg
~/lavoro$ convert -resize x200 calcio.jpg calcio_x200.jpg
~/lavoro$ convert -resize x200 capra.jpg capra_x200.jpg
~/lavoro$ imgsize *x200.jpg
bambino_x200.jpg: width="299" height="200"
basket_x200.jpg: width="134" height="200"
caffe_x200.jpg: width="299" height="200"
calcio_x200.jpg: width="301" height="200"
capra_x200.jpg: width="133" height="200"

Ora la larghezza complessiva ammonta a: 299 + 134 + 299 + 301 + 133 = 1166; per ricondurla al di sotto dei 500 pixel si deve operare un'ulteriore riduzione al 40%:

~/lavoro$ convert -resize 40% bambino_x200.jpg bambino_tn.jpg
~/lavoro$ convert -resize 40% basket_x200.jpg basket_tn.jpg
~/lavoro$ convert -resize 40% caffe_x200.jpg caffe_tn.jpg
~/lavoro$ convert -resize 40% calcio_x200.jpg calcio_tn.jpg
~/lavoro$ convert -resize 40% capra_x200.jpg capra_tn.jpg
~/lavoro$ imgsize *tn.jpg
bambino_tn.jpg: width="120" height="80"
basket_tn.jpg: width="54" height="80"
caffe_tn.jpg: width="120" height="80"
calcio_tn.jpg: width="120" height="80"
capra_tn.jpg: width="53" height="80"

Larghezza totale miniature: 120 + 54 + 120 + 120 + 53 = 467.

A questo punto è possibile preparare la linea di miniature nel documento HTML:

....

<P><A HREF="bambino.jpg"><IMG SRC="bambino_tn.jpg"
ALT="miniatura bambino"></A> <A HREF="basket.jpg"><IMG
SRC="basket_tn.jpg" ALT="miniatura pallacanestro"></A>
<A HREF="caffe.jpg"><IMG SRC="caffe_tn.jpg" ALT="miniatura
caffè"></A> <A HREF="calcio.jpg"><IMG SRC="calcio_tn.jpg"
ALT="miniatura calcio"></A> <A HREF="capra.jpg"><IMG
SRC="capra_tn.jpg" ALT="miniatura capra"></A></P>

....

Ed ecco come viene presentato da un comune programma di navigazione il suddetto frammento:

[swxs_01_002.jpeg]

da cui si nota che ciascuna miniatura presenta la possibilità di collegamento all'immagine a dimensioni piene.

4.3 Formato dei file grafici

I file grafici devono essere nei formati PNG («Portable Network Graphic Format») oppure JPEG («Joint Photographic Experts Group File Interchange Format»). Se si vuole utilizzare un'immagine in un diverso formato bisogna prima convertirla in uno dei due formati suddetti.

Esempio

Si desidera utilizzare l'immagine contenuta nel file in formato GIF («Graphics Interchange Format» ¹) sky2.gif; è possibile ad esempio convertire il file nel formato PNG:

~/lavoro$ file sky2.gif 
sky2.gif: GIF image data, version 89a, 300 x 220
~/lavoro$ convert sky2.gif sky2.png
~/lavoro$ file sky2.png
sky2.png: PNG image data, 300 x 220, 8-bit colormap, non-interlaced

5 Rispetto del diritto d'autore

Sia le leggi sul diritto d'autore, sia le regole di buon comportamento, impongono di accertare la possibilità di riutilizzare del materiale che si potrebbe ottenere attraverso la rete. Una volta accertata la possibilità, salvo altri obblighi stabiliti dall'autore, tutto ciò che non è lavoro proprio deve contenere un riferimento al suo autore e possibilmente all'origine dalla quale questo è stato ottenuto.

Una maniera abbastanza pratica di procedere è quella di preparare un opportuno documento (denominato fonti.html) che contenga esplicitamente le indicazioni delle varie fonti utilizzate sia per quanto riguarda il testo, sia per le immagini, e comunque per qualsiasi altra risorsa non originale utilizzata nel proprio sito.

Esempio

Una possibile soluzione è la seguente:

[swxs_01_003.jpeg]

6 Altre indicazioni

I documenti HTML che compongono il sito devono rispettare lo stile di composizione del sorgente appreso durante il corso. In caso di dubbio, chiedere al docente resposabile.
I documenti HTML che compongono il sito dovrebbero essere visibili integralmente in fase di presentazione, senza la necessità da parte dell'utente di utilizzare le barre laterali di scorrimento del consueto programma di navigazione ipertestuale. Se necessario, quindi, si proceda alla suddivisione dei singoli documenti in più «pagine», magari creando un apposito indice con riferimenti ipertestuali alle varie parti.
Il sito dovrebbe essere dotato di una struttura interna di collegamenti ipertestuali per la navigazione; per lo meno dovrebbe essere possibile tornare alla «pagina casa» direttamente da ciascun altro documento; è utile altresì la possibilità di percorrere sequenzialmente nei due sensi catene di documenti logicamente collegati, come esemplificato nel seguente diagramma:
Si utilizzino gli elementi H per creare i titoli nei vari documenti, ma si utilizzi H1 solo nel documento principale, e solo una volta, per specificare il «titolo del sito». Negli altri documenti utilizzare gli elementi H2, H3, ecc., a seconda della relativa importanza del documento e delle sue parti. In pratica, si usi il buon senso.
Si utilizzino tutti e soli gli elementi HTML appresi durante il corso; per l'utilizzo di altri elementi, ci si accordi col docente.
Il sito dev'essere composto da almeno cinque documenti.

7 Copyright

pxam67 at virgilio dot it

This work is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version, with the following exceptions and clarifications:

This work contains quotations or samples of other works. Quotations and samples of other works are not subject to the scope of the license of this work.
If you modify this work and/or reuse it partially, under the terms of the license: it is your responsibility to avoid misrepresentation of opinion, thought and/or feeling of other than you; the notices about changes and the references about the original work, must be kept and evidenced conforming to the new work characteristics; you may add or remove quotations and/or samples of other works; you are required to use a different name for the new work.

This work is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Una copia della licenza GNU General Public License, versione 2, si trova presso http://www.fsf.org/copyleft/gpl.html.

A copy of GNU General Public License, version 2, is available at http://www.fsf.org/copyleft/gpl.html.

[1]

È preferibile non utilizzare immagini in formato GIF in primo luogo perchè altri formati, come PNG, sono tecnicamente superiori; inoltre le immagini contenute nei file GIF sono compresse utilizzando un algoritmo (denominato Lempel-Ziv-Welch o LZW) che è coperto da brevetto proprietà dell'azienda statunitense Unisys Corporation. Fino allo scedere del brevetto, dunque, chiuque pubblichi immagini in formato GIF deve versare al detentore del brevetto un cànone stabilito dallo stesso detentore.

Sito web per sopravvivere