AVVERTENZA:
Nei vent'anni che sono trascorsi da
quando è stato inventato
il
Web i siti hanno subito una notevole evoluzione stilistica, passando da
un aspetto alquanto spartano (documenti alfanumerici senza grafica) a
siti
che offrono molteplici contenuti multimediali in streaming
già all'apertura.
Per una piena comprensione del funzionamenti dei siti attuali occorre sapere com'erano organizzati quelli
che li hanno preceduti, quali erano i loro problemi e come si è cercato di porvi rimedio.
Nasce il problema degli esempi. Certo
si potrebbe cercare in rete qualche "vecchio" sito che abbia mantenuto
le caratteristiche stilistiche e tecniche che si vogliono illustrare,
tuttavia nessuno può garantire che questi siti "sopravissuti"
continueranno ad essere mantenuti senza subire variazioni pertanto ho
preferito sviluppare ex-novo dei piccoli siti Web
conformi alle esigenze del corso; siti che costituiscono una specie
piccola "antologia" dell'evoluzione programmazione Web.
Trascurando la categoria dei siti orientati ai terminali alfanumerici,
che al giorno d'oggi penso possano avere solo un interesse storico, la
più semplice tipologia di siti che si può prendere in considerazione è
costituita dai siti realizzati impieganod solo caratter grafici ma
senza grafica (quindi caratteri colorati grandi e piccoli ma non
immagini).
Il primo
di questi siti, il Sito 0.0, cui appartiene questa pagina,
mostra
come si possa realizzare un sito Web utilizzando solo testo, così
come accadeva nei primi anni '90.
Le pagine del corso si
distingueranno pertanto in lezioni e siti d'antologia.
Le
pagine di ciascuno dei siti antologici presentano caratteristiche stilistiche e tecniche omogenee ed
hanno lo scopo di permettere allo studente di sperimentare le
sensazioni (look & feel) di un sito di un certo tipo,
in modo da potere da potersene fare un'opinione. Questo nlla
convinzione che non sia possibile valutare una soluzione ipertestuale
basandosi su di un'unica pagina poiché la "navigazione", fra le pagine,
è uno degli aspetti fondamentalidell'esperienza.
Nelle lezioni
(di ciascun Sito) sebbene si sia fatto il possibile per attenersi agli
stessi principi di omogeneità stilistica impiegate nell'antologia, per
esigenze didattiche
potrebbero
essere utilizzate tecniche che verranno presentate in un secondo
momento.
Ciascun sito antologico è costituito da tre (3)
pagine: Home
Page - Chi
sono? - Perché
questo sito? che mantengono gli stessi nomi ma cambiano aspetto grafico passando da un
Sito all'altro per mostrare come si sarebbero potuti risolvere gli stessi problemi con diversi strumenti.
Buono studio.
Il più semplice documento HTML
Il più semplice documento HTML che si possa prendere in considerazione consiste almeno di sei (6) linee di codice o più esattamente di tre (3) coppie di TAG.
<html>
<head>
</head>
<body>
</body>
</html>
I TAG
Nel caso più semplice un TAG di HTML consiste in una parola racchiusa
fra parentesi angolari, cioè fra il segno di minore "<"
e quello di maggiore ">".
Nel testo precedente <html> è
un esempio di TAG, così come lo sono <head> e <body>.
Gli elementi cioè le "coppie di TAG"
Le convenzioni di utilizzo
dei TAG
prevedono che questi compaiano a coppie, come le
parentesi in un'espressione matematica, ad indicare l'estensione del campo di applicazione di una certa formattazione o combinazione di attributi.
La stringa di caratteri:
<tag>
svolge la funzione di parentesi aperta.
La stessa stringa con l'introduzione della barra "/" dopo il segno di minore
</tag>
rappresenta invece la parentesi chiusa. Per cui attenzione alle barre!
Come si è detto le due "parentesi"
individuano il campo di applicazione degli attributi impostati nel
TAG ed il tutto prende il nome di elemento.
Scrivendo il codice:
si otterrà il seguente risultato:
il
testo fra le parentesi verrà messo in grassetto
Scrivendo
un testo HTML dobbiamo rispettare le regole di
inclusione fra le coppie di parentesi, che sono analoghe a quelle
vigenti per le parentesi delle espressioni matematiche.
Se apriamo
un TAG, inserendo il testo <tag1>, e
poi un altro,
inserendo il testo <tag2>, prima di chiudere
<tag1>
dovremo chiudere <tag2>.
In altri termini la
sequenza:
<tag1>
<tag2>
</tag2>
</tag1>
è corretta, mentre la
sequenza:
<tag1>
<tag2>
</tag1>
</tag2>
è sbagliata.
TAG
che fanno eccezione
Sfortunatamente ci sono alcuni
TAG che fanno eccezione e questo è un grave difetto del linguaggio HTML.
Ad esempio il TAG <br> che
spezza la
linea di codice mandando a capo non prevede una chiusura, per cui non
si vedrà mai un tag </br>
!
Il
più semplice documento HTML che ha un significato
La
sequenza :
<html>
<head>
</head>
<body>
</body>
</html>
considerata in precedenza è il
più semplice testo HTML sintatticamente corretto ma non ha nessun
significato perché produce una pagina di testo completamente bianca
e senza titolo.
La più semplice sequenza di codice HTML significativa è pertanto qualcosa di
simile:
<html>
<head>
<title>titolo
della pagina</title>
</head>
<body>
Testo
di prova
</body>
</html>
Aprendo un
simile documento con un browser HTML apparirà una pagina con un
titolo: "titolo della pagina" e un testo: "Testo di
prova", come potete verificare cliccando sul seguente link:
semplice.html.
Collegamenti
ad altri documenti
Completiamo il discorso introduttivo
sul linguaggio HTML spiegando come si possono creare dei collegamenti
(link) verso altri documenti.
Come avrete certo già
indovinato basta introdurre una riga di comando costituita da una
coppia di TAG specificando opportunamente gli attributi.
Ad
esempio per visualizzare la pagina semplice.html
basta inserire il seguente testo:
<a
href="semplice.html">semplice.html</a>
Aprendo
una pagina contenente il suddetto comando con un browser HTML
apparirà la scritta semplice.html,
sottolineata, in blu, per indicare che si tratta di un collegamento
ad un altro documento.
Posizionando, o anche semplicemente
passando, il cursore su di un link, in genere il
cursore
cambierà forma confermandoci che il testo in blu, sottolineato è
effettivamente di un collegamento.
Nel caso più semplice,
cliccando con il tasto destro del mouse sul link il
browser
aprirà il file associato al link
visualizzandolo.
Non
pensavo fosse così difficile scrivere una pagina HTML!
Infatti
non lo è, anche perché generalmente chi scrive pagine HTML
opera in maniera diversa da quella sopra descritta.
Ricordiamo che
HTML è un linguaggio di comandi per la visualizzazione dei
testi e la navigazione all'interno di essi.
Il formalismo HTML
consente in particolare di descrivere l'aspetto grafico del documento
considerato e le modalità attraverso le quali a partire dal
documento in questione è possibile raggiungere altri documenti.
Un
documento HTML pertanto può essere "visto" in due modi:
come una specie di "programma" che stampa qualcosa sul
monitor o come un documento di testo formattato.
Per la maggior
parte delle persone, in particolare per i lettori interessati ai
contenuti del documento è importante solo quest'ultimo aspetto,
pertanto sono stati sviluppati numerosi programmi simili agli editor
e ai desk top publisher che consentono di redigere
un
documento, di impaginarlo e di salvarlo in formato HTML, operando
come se si stesse scrivendo un normale testo con Microsoft Word; anzi
per la verità anche Microsoft Word consente di salvare i
documenti in formato HTML.
Il livello sottostante, costituito dai
comandi di controllo, interessa esclusivamente gli autori
delle
pagine HTML che hanno necessità particolari che non possono essere
soddisfatte mediante i comandi dell'editor grafico.
Se
siete intenzionati a scrivere delle pagine HTML, e magari a
realizzare un vostro sito, è bene che sappiate che dietro alle
pagine dei vostri documenti si cela un linguaggio di programmazione
che consente di controllare l'aspetto di ciò che verrà mostrato dal
browser. In una fase iniziale tuttavia non è necessario spingersi
oltre, per cui ci si può limitare a lavorare come se si dovesse
redigere un normale file di testo.
Strumenti per scrivere codice HTML
Le pagine HTML possono essere composte utilizzando diverse tipologie di strumenti: text editor, word processor e desk top publisher (DTP), HTML editor e generatori di codice.
- Text Editor
Come si è visto precedentemente il codice HTML è essenzialmente un testo, scritto in caratteri ASCII; per cui indipendentemente dalla complessità del risultato finale che sarà visualizzato dai browser è sempre possibile editare una pagina HTML utilizzando un semplice editor di testo come EDIT.COM di MS-DOS o notepad.exe di MS-Windows.
Le persone che scelgono di scrivere codice HTML utilizzando un editor di testo si pongono in una posizione analoga a quella dei programmatori che scrivono del software utilizzando uno dei tanti linguaggi di programmazione, per cui ha senso parlare di codice HTML. In effetti, volendo, è possibile "mischiare" il codice HTML con il codice di vari linguaggi di programmazione che sono stati espressamente sviluppati per consentire l'automatizzazione delle pagine Web; il più famoso dei quali è sicuramente JavaScript.
- Word Processor e Desk Top Publisher (DTP)
In alternativa ci sono gli "scrittori puri" che non sono interessati minimamente a sapere come è codificato un documento HTML ma solo al testo e alla sua impaginazione grafica. Poiché in genere queste persone in genere già utilizzano deiDTP la soluzione più naturale è di salvare semplicemente il testo scritto con il MS-Word piuttosto che con OpenOffice o LibreOffice in formato HTML. Il risultato è immediato.
Questa strategia ha purtroppo un inconveniente: che in certe circostanze, tipicamente quando si tenta di salvare in formato HTML un testo graficamente complesso, è possibile che il DTP lo salvi in maniera grafica, generando un'immagine che riproduce quello che apparirebbe sullo schermo alla risoluzione selezionata e lo salvi così!
Di primo acchito nessuno si accorgerà che il test visualizzato è un'immagine . I link, se ci sono, funzioneranno correttamente senza problemi (si tratta di una tecnica un po' più sofisticata che verrà spiegata più avanti). Tuttavia se qualcuno volesse editate il testo della pagina HTML per correggere ad esempio un errore, non potrà farlo. Naturalmente anche questa può essere un'opzione alla quale ricorrere in qualche caso.
Il problema principale dei testi salvati sotto forma di immagine è che le dimensioni di questa coincidono con la risoluzione grafica selezionata al momento del salvataggio, ad esempio 1024 per 768 pixel. Per cui a pagina visualizzata ad una risoluzione diversa apparirà troppo piccola o troppo grande. Insomma è un pasticcio!
In conclusione, volendo potete editare i vostri documenti con un DTP e poi salvarli in formato HTML ma attenzione perché a volte potreste avere delle sorprese!
- HTML Editor
Gli HTML Editor sono dei programmi che offrono un'interfaccia grafica non molto diversa da quella di Word Processor e DTP ma sono stati espressamente progettati per la redazione di documenti in formato HTML. L'utente può pertanto scrivere il suo testo come se lavorasse con il suo DTP preferito e poi salvarlo avendo la sicurezza di non incorrere nei problemi accennati precedentemente.
Nel caso si avesse la necessità di intervenire sul codice HTML per gestire delle problematiche di automazione, integrando ad esempio delle routine in JavaScript, gli HTML Editor consentono di commutare da dalla presentazione grafica del documento (così come apparirà visualizzato dai browser ) al codice "programma" e viceversa premendo un tasto.
Gli HTML Editor hanno pertanto la massima versatilità, consentendo di accedere e controllare tutti i meccanismi che possono essere nascosti all'interno di una pagina Web.
In rete è possibile reperire molti HTML Editor
che
si possono scaricare e utilizzare gratuitamente. Uno dei migliori e
KompoZer il programma che è stato utilizzato per scrivere queste
pagine HTML.
KompoZer è un programma OpenSource ed è disponibile
sia per MS-Windows che per Linux., scaricabile dal sito xxxxxx.
- Generatori di Codice
Poiché scrivere delle pagine di codice HTML può essere molto faticoso, sopratutto quando si desidera una veste grafica molto accattivante, sono stati sviluppati dei programmi che consentono di automatizzare la creazione di pagine Web o addirittura di un sito completo.
Tali prodotti consentono di comporre la veste grafica del sito scegliendo fra le opzioni stilistiche di un repertorio e quindi aggiungere i testi che si desiderano. Utilizzando questi strumenti in linea di principio chiunque può creare un splendido sito Web, in pochi minuti, senza conoscere nulla di HTML.
Sfortunatamente gli autori di questi strumenti, che sono per la maggior parte programmi commerciali, tendono a "difendere" il loro codice offuscandolo in modo che sia di difficile lettura anche da parte di persone che conoscono bene HTML. Pertanto se il generatore di codice soddisfa completamente le nostre esigenze va tutto bene ma se dovessimo avere la necessità di qualcosa di più potrebbe essere molto difficile intervenire sul codice HTML per modificarlo. Tenetene conto
Aspetti giuridici, Copyright (c) e Creative Commons
Concludiamo questa prima
lezione
ricordando che quando si scrive un testo per la pubblicazione sul Web
bisogna tenere conto anche dei molteplici aspetti giuridici, in
particolare sul fatto se vogliamo o meno tutelare i nostri diritti
sul materiale pubblicato.
I diritti degli autori si possono
riassumere in tre punti: paternità, diritti
patrimoniali,
opere derivate.
La legge sul diritto d'autore stabilisce
che se non viene disposto altrimenti tutti i diritti sulle
opere
letterarie e assimilabili spettino all'autore.
Quindi anche
senza aggiungere in calce la classica dicitura "Copyright (c)
Pinco Pallino 1980-2011", se non scriviamo nulla, tutti i
diritti sono comunque riservati e sono nostri!
Quando si è agli
inizi le restrizioni imposte dalla logge sul diritto d'autore
possono essere un ostacolo alla diffusione delle nostre idee e delle
nostre opere per cui potrebbe essere utile "rilassarle"
concedendo ai lettori alcuni diritti.
Tuttavia ci si potrebbe
chiedere:
come esprimere il consenso affinché i lettori possano ad esempio diffondere liberamente le mie opere senza che qualcuno se ne approfitti e senza consultare un avvocato?
Una possibile risposta può
essere il
ricorso alle Creative Commons Public Licenses (CCPL).
Le
CCPL sono delle licenze preconfezionate, sviluppate da un
organizzazione internazionale senza fini di lucro, la Creative
Commons Organization, che promuove la diffusione della
cultura
attraverso il rilassamento dei vincoli sul diritto d'autore.
In
sintesi: le licenze CCPL sono dei contratti standard fra i titolari
del diritto d'autore e i fruitori di un'opera letteraria o
assimilabile e si differenziano per tre clausole che possono o meno
essere presenti.
Le CCPL prevedono, in ogni caso:
- per
l'autore il diritto "all'attribuzione della paternità
dell'opera";
- per il fruitore il diritto di duplicarla
per scopi non commerciali.
Dopo di ché, il titolare del
diritto d'autore può decidere se concedere ai fruitori il diritto di
duplicare la sua opera anche per scopi commerciali., di realizzare
delle opere derivate (ad esempio una traduzione) o concedere l'uno o
l'altro dei precedenti diritti richiedendo che l'eventuale fruitore
che realizza un'opera derivata si impegni a rilasciarla sotto
lo
stesso tipo di licenza.
Volendo approfondire l'argomento delle Creative
Commons
Public Licenses (CCPL) si suggerisce di cominciare leggendo il tutorial Cosa sono le Creative Commons License? e poi di leggere la documentazione pubblicata sul sito italiano della Creative
Commons Organization www.creativecommons.it, che fornisce le informazioni più precise ed aggiornate sull'argomento.