HTML (HyperText Markup Language) è il primo linguaggio ideato (e il più
utilizzato) per realizzare pagine ipertestuali, più comunemente note come
pagine internet.
Una comune pagina HTML è un documento di testo contenente codice HTML
ed avente le seguenti
estensioni: .htm o .HTML. La differenza tra le due estensioni è che la prima
veniva usata nel mondo DOS perché esso supportava estensioni con al
massimo 3 lettere. L'estensione dice al browser che si tratta di un pagina
HTML e di interpretarla di conseguenza.
L'HTML è un linguaggio che descrive il contenuto di una pagina web ma non
la forma, in passato
veniva anche usato massicciamente ed erroneamente per definire la
visualizzazione della pagina stessa compito oggi eseguito molto più
efficacemente dai fogli di stile.
1. Tag, attributi e valori
Prima di cominciare a lavorare a stretto contatto con il codice è bene
soffermarsi su questi tre elementi: il tag, l'attributo, e il valore.
Il tag è l'unità fondamentale, che fa capire al browser come interpretare il
codice e visualizzarlo sul monitor.
Attraverso i tag è possibile definire molti elementi di un documento: paragrafi,
colore del testo, collegamenti ipertestuali e quant'altro.
Ogni tag è caratterizzato da tre componenti:
• < il segno di minore
• nome il suo nome
• > il segno di maggiore
Un tag di chiusura ha la particolarità che dopo il segno di minore ha uno slash
/ che comunica al browser che quello è, per l'appunto, un tag di chiusura.
All'interno dei tag vi è poi il contenuto che è quello che verrà formattato
secondo le regole del tag che lo comprende. Per fare il punto della situazione,
la sintassi comune alla maggior parte dei tag è la seguente:
<nome tag>contenuto che verrà formattato</nome tag>
Ad esempio il tag <h1> serve per determinare i titoli e quindi rendere il testo
al suo interno più grande rispetto al contenuto della pagina.
Il codice seguente visualizzerà sul nostro browser un titolo .
<html>
<head>
</head>
<body>
<h1>ViaggioAdriatico</h1>
</body>
</html>
La maggior parte dei tag, supporta gli attributi ossia dei parametri che
servono a definire l'allineamento del testo, il suo colore, la dimensione del
testo.....
Ogni attributo è costituito da un valore che determinerà, ad esempio, se
questo verrà visualizzato a destra o a sinistra, o se il testo sarà di colore rosso
piuttosto che nero.
Ecco la struttura di un tag con tutti gli elementi definiti precedentemente:
<nometag attributocolore="valore" attributoallineamento="valore">
Testo che verrà visualizzato sulla pagina dell'utente
</nometag>
2. Struttura generale di una pagina HTML
Tutte le pagine web hanno la seguente struttura a livello di codice HTML:
<html>
<head>
codice
</head>
<body>
codice
</body>
</html>
Il tag <html> indica all'interprete, in questo caso il browser, che il documento
è stato formattato in HTML e pertanto il suo contenuto dovrà essere
interpretato secondo le specifiche del linguaggio.
I tag <head> d'apertura e </head> di chiusura, servono a definire
l'intestazione del documento, ossia tutte quelle informazioni che servono a
definire il contenuto della pagina.
All'interno dei tag <body> e </body> è presente invece il resto del
documento, il corpo della pagina, ciò che effettivamente poi verrà visualizzato
sul browser.
Il tag di chiusura </html> serve invece per comunicare all'interprete che il
codice HTML è terminato , pertanto tutto ciò che sarà scritto successivamente
verrà interpretato come normale testo.
L'HTML è un linguaggio case-unsensitive pertanto scrivere i tag tutti in
maiuscolo o in minuscolo è indifferente, anche alternandoli non cambia nulla
. I seguenti esempi codificano una pagina identica, sia dal punto di vista
sintattico sia da quello dell'interpretazione del browser .
Esempi:
<html>
<head></head>
<body>
</body>
</html>
<HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
<htMl>
<HeAd></hEAD>
<bODY>
</BOdy>
</HTml>
Queste tre pagine mostreranno lo stesso risultato sul browser dell'utente.
3. Elementi block e in-line
Una distinzione importante da fare tra gli elementi di una pagina HTML è
quella tra gli elementi cosiddetti block-elements (elementi blocco) e gli in-line
elements (elementi in linea) chiamati anche text-elements (elementi testo).
Le diversità tra questi due tipi di elementi è molto importante nel Linguaggio
CSS.
• generalmente, gli elementi block possono contenere elementi in-line e altri
elementi block e, quando vengono inseriti, iniziano una nuova riga
• generalmente, gli elementi in-line possono contenere solo testo e altri
elementi in-line.
Gli elementi in-line, come suggerisce la parola stessa, vengono visualizzati
sulla riga corrente e non vanno perciò a capo.
4. Indentazione
L'indentazione è una tecnica di scrittura del codice sorgente dei programmi
che ha lo scopo di aumentarne la leggibilità, soprattutto nel contesto dei
linguaggi strutturati.
È estremamente diffusa e il suo utilizzo viene considerato come una norma
fondamentale di buona programmazione.
Ecco due esempi:
Sintassi sconsigliata:
<html>
<head></head>
<body><div>testo testo</div>
<a href="http://www.viaggioadriatico.it/">ViaggioAdriatico</a>
Sintassi consigliata:
<html>
<head>
</head>
<body>
<div>testo testo</div>
<a href="http://www.viaggioadriatico.it/">ViaggioAdriatico</a>
</body>
</html>
5. Il Titolo della pagina
Per far sì che venga visualizzato un titolo del documento nella barra del titolo
del browser è sufficiente inserire all'interno dei tag <head>,</head> il tag
<title>seguito dal titolo che si vorrebbe dare alla pagina e successivamente il
tag di chiusura </title>.
Ecco un esempio:
<html>
<head>
<title>Inserire qui il titolo della pagina</title>
</head>
<body>
codice
</body>
</html>
6. I meta tag
I meta tag sono dei tag speciali che posti all'interno dei tag <head></head>
permettono di definire il contenuto della pagina web, in modo, ad esempio, da
rendere l'indicizzazione da parte dei motori di ricerca più rapida ed efficace.
I meta tag non producono alcun tipo di effetto grafico nella visualizzazione
della pagina.
I meta tag sono costituiti da due parti:
• Nome del meta tag
• Valore del meta tag
Ecco quindi la loro sintassi generale:
<meta name="nome meta tag" content="valore del meta tag">.
7. Font
E' possibile scegliere l'aspetto che assumerà il testo attraverso l'attributo face
i cui valori sono tutti i nomi di font esistenti. Tuttavia è preferibile scegliere
sempre le famiglie generiche di font (ogni font appartiene a una famiglia) in
maniera tale da garantire la massima compatibilità con tutta l'utenza
rinunciando ad un font che probabilmente l'utente non avrà installato sul
proprio pc.
I possibili valori dell'attributo face sono molteplici tra cui:
Arial, Verdana, Helvetica, Times
7.1 Colore
Il colore si può impostare attraverso l'attributo color i cui valori possono
essere tutti i colori disponibili sia in forma nominale che in forma esadecimale.
Esempio:
<body>
<font color="red">Questo testo sarà di colore rosso</font>
<font color="#FF0000">Questo testo sarà di colore rosso</font>
</body>
7.2 Stile
Nell'HTML vi sono due stili utilizzabili per determinare il modo in cui sarà
visualizzato il testo:
• Stile fisico: non si preoccupa della funzione che ha il testo all'interno del
contesto pagina e si limita a definire solo gli attributi del testo
• Stile logico: gli stili logici al contrario si preoccupano anche di veicolare
all'interprete la funzione del blocco di testo che è presente al loro interno.
Gli stili logici sono quelli maggiormente supportati anche dai vecchi browser
in quanto presenti sin dalle prime versioni dell'HTML.
Da un punto di vista concettuale è grandemente preferibile usare gli stili
logici, specialmente in vista di un utilizzo esteso dei fogli di stile.
Ad esempio, marcando col il tag <code> una porzione di testo che racchiude
del codice sorgente, tale testo sarà normalmente visualizzato con caratteri
non-proporzionali.
Se in un secondo tempo si desidera che tutti i testi marcati <code> siano
visualizzati diversamente (per esempio, su uno sfondo colorato e delimitato da
un bordo), sarà sufficiente ridefinire il tag <code> in un foglio di stile, con gli
attributi necessari.
Ci sono diversi valori per impostare lo stile di un testo, di seguito una tabella
riassuntiva.
Stile logico
Stile fisico
Significato
<strong>
<b>
b rende il testo in
grassetto;
strong
è
usualmente
(ma
non
sempre)visualizzato
in
grassetto
<em>
<i>
Rende il testo in corsivo
<cite>
<u>
Rende
il
sottolineato
<code>
<tt>
<tt> Rende
monospaziato
<code>
testo
il
testo
come
7.3 Dimensioni
Le dimensioni sono determinate, su una scala arbitraria, dal valore
dell'attributo size, che può essere compreso tra 1 e 7. Il valore predefinito è 3.
Qualora si inserisse un valore minore di uno o maggiore di sette, verrano
interpretati dal browser come dimensione 1 o 7.
E' possibile anche determinare una dimensione base del font attraverso il tag
<basefont> e il suo attributo size e lo si può ingrandire come si desidera
semplicemente inserendo gli operatori + e - seguiti dal valore per cui si
desidera incrementare o decrementare la dimensione base. Se non viene
determinato il valore base di basefont size="valore" è di 3.
Ecco un esempio:
<body>
<font size="3">Questo testo sarà di dimensione 3</font>
</body>
Ecco un esempio con basefont:
<body>
<basefont size="4">
<font size="+2">Questo testo sarà di dimensione 6</font>
<font size="-2">Questo testo sarà di dimensione 2</font>
</body>
Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:
<body>
<font size="+2">Questo testo sarà di dimensione 5</font>
<font size="-2">Questo testo sarà di dimensione 1</font>
</body>
8. Titoli
I titoli sono molto utili nelle pagine per dare maggior visibilità a un elemento
che, solitamente, racchiude ciò che sarà possibile leggere nei paragrafi che
seguono. Vi sono 6 livelli di titoli, il primo è quello più grande e man mano che
si va verso il sesto il titolo risulterà più piccolo.
I titoli sono automaticamente visualizzati dall'interprete in grassetto e
lasciano prima e dopo di sè, un margine considerevole (in modo che risulti più
leggibile).
La sintassi per definire un titolo è la seguente: <h1>Inseriamo il titolo del
paragrafo</h1>.
Al posto del numero uno ovviamente si possono inserire i numeri: 2,3,4,5,6 a
seconda della grandezza che si desidera visualizzare.
9. Paragrafi
Vi sono essenzialmente tre tag che svolgono la funzione di suddivisione del
testo: <p>,<div>,e <span>.
Le differenze tra questi tag sono minime ma abbastanza determinati, nel
contesto della pagina, per ciò che verrà visualizzato dal browser.
Tag
Significato
Utilizzo
<p>
Elemento
block,
di
default ha dei margini
superiori e inferiori che
lo separano dal resto
dei contenuti.
• <p> sta per paragraph
ed è infatti l'elemento
che
rappresenta
la
nostra concezione di
paragrafo
con
dei
margini
inferiori
e
superiori.
<div>
<div> Elemento block. • <div> sta per division
Di default il testo non ha e definisce un blocco di
margini.
testo al suo interno. In
realtà il tag <div> è,
prima che un separatore
di testo, un contenitore
di elementi HTML. Il suo
utilizzo è spesso
associato ai fogli di stile.
<span>
Elemento in-line, serve a •
<span>
fa
da
raggruppare
il
concettualmente
testo contenitore
al
testo
presente al suo interno.
La sua utilità è evidente
quando si
usano i fogli di stile.
Ecco un esempio:
<body>
<p>Questo è un paragrafo</p>
<div>A cui seguono due blocchi di testo, questo è il primo.</div>
<div>Questo è il secondo</div>
<span>Questo è un contenitore niente di più</span>
</body>
10. Linee divisorie
Per impaginare meglio un testo si potrebbe rendere necessaria una linea che
divida ad esempio un articolo dall'altro.
Il tag che svolge questa funzione è <hr>.
I suoi principali attributi sono width che ne indica la larghezza, richiede un
valore in pixel o in percentuale; size che ne regola le dimensioni, il cui valore
viene espresso in pixel ; e infine align che permetterà di allineare la barra
rispettivamente a destra, al centro o a sinistra.
Ecco un esempio:
<body>
<h1>TITOLO</h1>
<hr width="100%" size="3">
<div>Questo è una guida a contenuto aperto</div>
</body>
11. Andare a capo
Il tag che svolge la funzione per andare a capo è <br>.
Alcuni webmaster gli preferiscono dei tag<p> senza il tag di chiusura perché
sono più veloci da scrivere però così facendo lasciano il paragrafo aperto
incorrendo in un errore sintattico.
12. Elenchi ordinati
Gli elenchi ordinati vengono definiti attraverso il tag <ol> che sta per
Ordered List.
Gli elementi dell'elenco, devono essere inclusi all'interno dei tag <li></li>
ossia List Item.
Ogni elemento verrà automaticamente preceduto da un numero.
È utile l'uso dell'attributo start, il quale specifica il numero da cui partirà la
numerazione dell'elenco.
Esempio di elenco ordinato:
<body>
<ol>
<li>1° Elemento in ordine numerico</li>
<li>2° Elemento in ordine numerico</li>
<li>3° Elemento in ordine numerico</li>
</ol>
</body>
13. Elenchi non ordinati
Gli elenchi non ordinati, le cui voci sono precedute da un pallino, vengono
definiti attraverso il tag <ul> che sta per Unordered List. Gli elementi
dell'elenco, devono sempre essere inclusi all'interno dei tag <li></li>.
Esempio di elenco non ordinato:
<body>
<ul>
<li>Elemento uno</li>
<li>Elemento due</li>
<li>Elemento tre</li>
</ul>
</body>
14. Links
Collegamenti esterni
La sintassi per creare un collegamente ipertestuale è molto semplice ed è la
seguente:
<a href="qui va inserito l'url">e qui la parola che risulterà cliccabile</a>.
Ecco un esempio:
<body>
<a href="http://it.wikibooks.org">Homepage </a>
</body>
Collegamenti interni
I collegamenti interni o àncore sono collegamenti che non rimandano a una
pagina esterna, come visto in precedenza, bensì a un contenuto disponibile
nella stessa pagina.
La loro sintassi è leggermente più complicata dei collegamenti esterni.
Per prima cosa, si deve creare un collegamento con l'attributo name che farà
sì che il collegamento non venga visto come un reale link, ma al contrario
come un'àncora usata per
definire un collegamento che punti a quel
determinato testo della pagina.
Ecco l'esempio:
<body>
<a href="#viaggiadr">Vai al paragrafo su viaggiadr</a>
<a name="viaggiadr">
Questo non è un link ma il testo a cui siamo stati
rimandati
</a>
</body>
Dunque ricapitolando per poter realizzare un collegamento interno bisogna
eseguire le seguenti operazioni:
• Definire l'àncora attraverso l'attributo name.
• Richiamarla da un altro link inserendo come valore dell'attributo href il
valore dell'attributo name preceduto dal segno #.
15. Posta elettronica
Attraverso un link è anche possibile aprire il client di posta dell'utente
affinché questo possa mandare una mail con il campo A: precompilato.
Ecco la sintassi:
<ahref="mailto:indirizzo mail">Parola da visualizzare</a>
Ecco un esempio:
<body>
<a href="mailto:[email protected]">Invia Mail</a>
</body>
16. Immagini
Inserire un'immagine
La sintassi di base per inserire un'immagine all'interno di una pagina web è la
seguente:
<img src="url dell'immagine" alt="testo alternativo">
17. tabelle
Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di
chiusura </table>.
E' tra questi due tag che si devono inserire colonne e righe, le prime si creano
attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table
Data).
Se si vuole creare una cella d'intestazione, con il contenuto in neretto e
centrato si può usare il tag <th> (Table Header), ideato appositamente per
questo tipo di funzione.
Possibili attributi di colonne e righe sono align (alignment), valign (Vertical
alignment), colspan (Column span), e rowspan
.
• align: allinea il testo della cella a destra (right), sinistra (left) e centrato
(center).
• valign: allinea il testo della cella sul margine superiore (top), sul margine
inferiore (bottom), e in mezzo (middle)
• colspan e rowspan: il primo indica l'estensione di una colonna, il secondo
di una riga
Le celle e le colonne supportano anche gli attributi height e width.
Vi è un tag interessante che è <caption> che permette di aggiungere una
descrizione alla tabella
(una sorta di didascalia) che supporta l'attributo align pertanto si posizionerà
o sopra o sotto la tabella secondo il valore specificato in tale attributo.
Attributi delle tabelle
Significato
border
Stabilisce la dimensione del bordo
esterno alla tabella. Il valore di
default è 0
(ossia assente).
width
Stabilisce la larghezza della tabella
height
Stabilisce la lunghezza della tabella
cellspacing
Stabilisce la spaziatura tra le celle
cellpadding
Stabilisce la spaziatura tra il testo e la
cella che lo contiene
Esempio di tabella:
<table width="100%" height="30%" cellspacing="4" cellpadding="2"
border="1">
<caption align="bottom">Questa è una tabella di
esempio</caption>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
<tr>
<td align="center">Cella 1 colonna 1 testo centrato</td>
<td valign="top">Cella 1 colonna 2 allineata sopra</td>
</tr>
<tr>
<td>Cella 2 colonna 1</td>
<td width="70%">Cella 2 colonna 2</td>
</tr>
</table>
18. Sfondo
Colore di sfondo
Per poter settare un colore come sfondo di una pagina è sufficiente servirsi
dell'attributo bgcolor che va inserito all'interno del tag <body>.
L'attributo bgcolor sta per background color che corrisponde all'italiano:
colore di sfondo.
Come valore dell'attributo bgcolor si può impostare qualsiasi colore, sia
attraverso il suo valore nominale che attraverso il suo valore esadecimale.
La sintassi per l'uso di bgcolor:
<body bgcolor="#FFFF00">
La pagina avrà uno sfondo di colore giallo (valore esadecimale)
</body>
<body bgcolor="black">
La pagina avrà uno sfondo di colore nero (valore nominale)
</body>
Immagine di sfondo
Una volta settata un'immagine come sfondo di una pagina essa verrà ripetuta
sia orizzontalmente che verticalmente, bisognerà quindi stare attenti alla
colorazione del testo in modo che questo sia in ogni caso leggibile.
L'attributo per poter inserire un'immagine di sfondo è background che va
inserito sempre all'interno di <body>, il suo valore ovviamente sarà l'url che
porterà all'immagine in questione.
Ecco un esempio:
<body bgcolor="#FFFF00" background="immagine.jpg">
Questa pagina contiene un'immagine come sfondo, tuttavia mentre essa verrà
caricata vedrai uno sfondo di colore giallo
</body>
19. Caratteri speciali
Sono quei caratteri che necessitano di un particolare codice per la loro
corretta visualizzazione.
Per poter codificare un carattere, come per gli stili del testo, vi sono due
metodi:
• codice numerico o Numerical Reference
• codice nominale o Entity Name
I codici nominali sono molto usati da chi è anglofono perché in sostanza il loro
codice corrisponde al nome del carattere nella lingua inglese.
I codici numerici forse saranno più semplici da usare per i non-anglofoni.
Non c'è un motivo valido per preferire un set di codificazione rispetto all'altro,
tuttavia si tenga a mente che i codici numerici sono maggiormente supportati
dai browser, proprio perché la loro comprensione è universale.
I codici ,in entrambi i caratteri sono costituiti da tre parti:
•&
• valore numerico o nominale
•;
Ecco un tabella dei caratteri speciali
Carattere
Codice nominale
Codice numerico
&
&amp;
&#38;
÷
&divide;
&#247;
¢
&cent;
&#162;
©
&copy;
&#169;
>
&gt;
&#62;
<
&lt;
&#60;
µ
&micro;
&#169;
·
&middot;
&#183;
£
&pound;
&#163;
§
&sect;
&#167;
¥
&yen;
&#165;
®
&reg;
&#174;
±
&plusmn;
&#177;
¶
&para;
&#182;
áÁ
&aacute; &Aacute;
&#225; &#193;
àÀ
&agrave; &Agrave;
&#224; &#192;
âÂ
&acric; &Acric;
&#226; &#194;
åÅ
&aring; &Aring;
&#229; &#197;
ãÃ
&atilde; &Atilde;
&#227; &#195;
20. I fogli di stile
Il linguaggio CSS è un linguaggio che permette di impostare tutti gli
aspetti di una visualizzazione di una pagina web, quali allineamento della
pagina, il layout (la disposizione cioè dei contenuti rispetto allo schermo), la
formattazione del testo e i colori.
Esso è nato dalla necessità di separare il contenuto HTML della pagina dalla
grafica e dalla visualizzazione.
21. Regole e sintassi
21.1 Sintassi fondamentale
Un foglio CSS è semplicemente un insieme di definizioni dello stile da
applicare a determinati elementi della pagina.
La loro sintassi è:
selettore { dichiarazioni }
Le dichiarazioni tra parentesi graffe racchiudono coppie di proprietà : valore
separate da un punto e
virgola.
Ad esempio:
<style>
p { font-size: 12px; }
</style>
è un foglio di stile con una sintassi valida. In particolare, il valore per la
proprietà font-size sarà 12px.
21.2 CSS esterni e interni
Gli stili di una pagina possono essere definiti sia all'interno del file nel quale
devono operare, sia in un file a parte.
• Gli stili esterni solitamente vengono usati se si hanno molte pagine a cui
applicare il medesimo stile.
Questo permette di non fare confusione nel lavoro di modifica e revisione.
È il sistema più usato ed è compatibile con tutti i browser.
Per inserire un collegamento ad uno stile esterno alla pagina, si usa il tag
<link /> nell'intestazione della pagina:
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>...
• Gli stili interni vengono usati se le pagine sui cui operare sono veramente
poche o se il sito è semplice .
Per formattare un elemento all'interno del codice html si usa l'attributo style:
<elemento style="regole_di_stile">
Se ad esempio si vuole formattare l'elemento Fieldset, bisogna operare come
segue:
<fieldset style="color:red;font-size:14px">
22. I cms
Con il termine content management (in italiano: gestione dei contenuti) si
indica una serie di processi e tecnologie a supporto del ciclo di vita evolutivo
dell'informazione digitale (content o digital content).
Tale ciclo di vita comprende essenzialmente sei passi:
•
•
•
•
•
Creazione
Aggiornamento
Pubblicazione
Traduzione
Archiviazione e utilizzo
Il Content management è un processo collaborativo nel senso più stretto del
termine.
La creazione del contenuto viene effettuata da una o più persone, ma la
comunità partecipa al suo aggiornamento (formale e sostanziale) fino alla
pubblicazione definitiva, dopo la quale può iniziare una fase di aggiornamento
la cui durata può anche non essere limitata.
Il processo di aggiornamento si basa sui seguenti ruoli e privilegi base:
•
•
•
•
Autore principale - responsabile della creazione del contenuto.
Curatore (o autore secondario) - responsabile dell'aspetto formale del
contenuto (stile, rappresentazione) per garantirne l'uniformità e la
diffusione.
Editore - responsabile della diffusione e dell'utilizzo del contenuto.
Amministratore - responsabile della gestione delle versioni del
contenuto negli archivi e nei sistemi di diffusione (Content Management
System).
Un aspetto critico del Content management è la capacità di gestire le versioni
del contenuto durante la sua evoluzione.
Gli autori e i curatori spesso hanno necessità di ripristinare vecchie versioni
del contenuto in conseguenza di errori del processo di evoluzione o di errati
aggiornamenti.
22.1 Il problema della gestione dei contenuti
In un approccio sistematizzato al problema della gestione dell'informazione si
affrontano le seguenti fasi:
•
•
•
•
•
Identificazione degli utenti e dei relativi ruoli di produzione o fruizione
dell'informazione
Assegnazione di responsabilità a differenti categorie di utenti per
distinti tipi di contenuti (in un progetto complesso il prodotto finito non
è frutto del lavoro del singolo, che pertanto non ha possibilità o esigenza
di intervenire in tutti gli ambiti)
Definizione delle attività di workflow, cioè formalizzazione di un
percorso per l'assemblaggio del prodotto finale che, in quanto frutto di
produzione frammentaria, deve acquisire la sua unitarietà sottostando a
opportune procedure di supervisione. Più prosaicamente, per poter
rendere efficiente la comunicazione tra i vari livelli della gerarchia, è
necessaria un'infrastruttura di messaggistica, con la quale i gestori del
contenuto possono ricevere notifica degli avvenuti aggiornamenti.
Tracciamento e gestione delle versioni del contenuto
Pubblicazione del contenuto
22.2 I Web Content Management System
Nonostante i CMS non siano stati concepiti per il Web, oggi il loro utilizzo più
diffuso è rivolto alla gestione di siti web, soprattutto se di grandi dimensioni e
frequentemente
aggiornati.
Una delle applicazioni più utili dei sistemi di CMS, infatti, è nella gestione dei
portali, dove vengono impiegati come strumento di pubblicazione flessibile e
multiutente.
Ad esempio, gestione di contenuti testuali (notizie, articoli ecc.), link,
immagini, liste di discussione, forum, materiale scaricabile. Può essere
modificata anche la struttura stessa delle pagine in numero ed organizzazione.
A volte i WCMS danno la possibilità di gestire anche più versioni dello stesso
sito (ad esempio, HTML o WAP).
I WCMS consentono di definire utenti, gruppi e diritti in modo da poter
permettere una distribuzione del lavoro tra più persone.
Per esempio, è possibile definire una classe di utenti abilitati esclusivamente
all'inserimento delle notizie, mentre si può riservare la scrittura di articoli ad
un altro gruppo, e limitare tutti gli altri alla sola consultazione.
L'introduzione di un Web Content Management System in azienda richiede la
definizione di chiari processi interni di approvazione dei contenuti.
La scelta di un software di WCMS è strategica per le aziende che generano la
maggior parte di volume d'affari su Internet, ma - in proporzione diversa - è
molto importante anche per il libero professionista che vuole utilizzare il
medium Internet per farsi conoscere.
In letteratura esistono numerosi modelli che aiutano a valutare il ritorno di un
investimento in un WCMS.
I costi di adozione sono spesso elevati, quindi non sono sostenibili per i
professionisti o i privati che non fanno del Web la loro competenza di base.
Per rispondere a questa necessità di mercato sono nati alcuni Application
Service Providers (ASP) che offrono questo servizio direttamente via Web,
senza richiedere alcun investimento hardware o software.
Gli ASP costano ai loro clienti un canone annuale per il servizio di WCMS
erogato.
22.3 Vantaggi dei CMS
Un CMS permette di costruire e aggiornare un sito dinamico, anche molto
grande, senza necessità di scrivere una riga di HTML e senza conoscere
linguaggi di programmazione lato server (come PHP) o progettare un apposito
database.
L'aspetto può essere personalizzato scegliendo un foglio di stile CSS
appositamente progettato per un determinato CMS.
I flat file CMS (altrimenti noti come text-based CMS) sono dei content
management system che si basano su files di testo (il più delle volte files XML)
e che perciò non necessitano di alcun database come MySQL, PostgreSQL,
ecc.
Questi CMS sono facilmente installabili e dunque sono particolarmente adatti
per siti personali o per piccole comunità.
Esistono CMS specializzati, cioè appositamente progettati per un tipo
preciso di contenuti (un'enciclopedia on-line, un blog, un forum, ecc.) e CMS
generici, che tendono ad essere più flessibili per consentire la pubblicazione
di diversi tipi di contenuti.
23. Un caso di studio:Il portale Viaggio adriatico
Per creare e gestire le pagine web del portale è stato utilizzato un software di
gestione facile da usare che consente a tutti di creare pagine web senza
essere dei web master o degli esperti di linguaggio html.
Un tale sistema di gestione è definito tecnicamente come CMS (Content
Management System) ovvero un Sistema per la Gestione dei Contenuti.
Per mezzo di semplici interfacce, il CMS consente a chiunque ne sia
autorizzato, indipendentemente dalla sua posizione geografica, dall'esperienza
e dalle sue conoscenze informatiche, di contribuire personalmente alla
definizione, all'amministrazione ed alla pubblicazione dei contenuti del sito.
Chiunque in possesso delle autorizzazioni necessarie può quindi produrre
pagine web da qualsiasi parte del mondo, usando un browser standard e senza
bisogno di ulteriori software specializzati.
Di conseguenza, un CMS permette a molti più utenti di creare e modificare i
contenuti del sito.
Le pagine sono prodotte scrivendo del testo o caricando dei file nei template
precostituiti del sito.
In un CMS inoltre il controllo del flusso informativo è molto granulare e il
compito del web master può essere effettivamente delegato a svariate
persone, ognuna facente capo a un settore diverso del sito, senza diminuire in
alcun modo né la sicurezza, né tantomeno gli standard qualitativi.
Un CMS in breve mantiene separato il codice di programmazione, la grafica e
i contenuti facendo in modo che su ognuno di questi tre elementi possano
intervenire persone diverse con competenze specifiche:
il grafico web realizza l’interfaccia grafica del sito.
il programmatore informatico configura e personalizza la struttura
del sistema integrando il materiale grafico e realizzando i template.
l’azienda o l’ente committente provvede a gestire i contenuti.
23.1 Zope e Plone
Plone è il sistema di amministrazione di contenuti (Content Management
System), libero (free) ed a sorgente aperto (open source) utilizzato per la
realizzazione del portale.
Plone è basato su Zope, che è un framework per costruire software di
elaborazione dei contenuti.
In un certo senso, Zope è un sistema operativo per applicazioni web, una delle
quali è il CMF (Content Management Framework), una applicazione che
facilita la costruzione di ambienti CMS.
(Plone è uno di questi CMS, basati su un CMF, che gira dentro Zope ma con un
suo livello di template e di tipi di file).
23.2 Principali caratteristiche
Zope è orientato agli oggetti, nel senso che qualunque cosa appaia in un sito
web Zope (pagine web, immagini, link, file) è un oggetto ed è contenuto in
database di oggetti.
Questo database è gerarchico, non relazionale, ed è particolarmente adatto a
memorizzare strutture gerarchiche di oggetti.
I tecnici tendono a pensare a un database come a una collezione di tabelle di
righe e di colonne, relazionate da chiavi primarie.
Qui è differente, e rappresenta più da vicino la struttura di un ordinario file
system, con oggetti che contengono altri oggetti.
Zope contiene un certo numero di strumenti particolarmente adatti alle grandi
organizzazioni e ai lavori collaborativi.
D’altra parte Zope è stato creato per essere utilizzato dalle grandi
organizzazioni con le seguenti caratteristiche:
numero elevato di contribuenti ai progetti collaborativi;
localizzati in posti differenti e su differenti piattaforme;
forti requisiti di flessibilità e sicurezza, con la necessità di definire ruoli
locali con differenti autorizzazioni alla visione, creazione, modifica e
approvazione nelle differenti parti di progetti complessi
scalabilità a numeri elevati di oggetti e di server;
Plone (come entità distinta da Zope), aggiunge a Zope almeno due utili
funzionalità:
un efficace e elegante framework per la navigazione, basato su cartelle e
sul loro contenuto piuttosto che su collegamenti tra documenti html, che
devono essere aggiornati ogni volta che si produce una modifica o si
aggiunge un contenuto;
uno strumento semplice per la creazione di documenti strutturati anche
complessi con differenti parti di ogni documento visibile a differenti
gruppi di utenti e con un percorso di approvazione personalizzabile.
La prima funzionalità rende un sito straordinariamente facile e veloce da
usare; la seconda lo rende utilizzabile per progetti fortemente collaborativi, in
cui la possibilità di condividere facilmente la creazione e/o l’aggiustamento di
un contenuto è molto proficuo.
23.4 Il Portale
Per accedere al sito di Viaggiadr digitare nella barra degli indirizzi del proprio
browser l’indirizzo del portale e premere invio.
Si accede così alla home page del sito, alla pagina web iniziale così composta:
MAIN TABS
SLOTS DI
DESTRA
SLOTS DI
SINISTRA
23.4.1 Pubblicazione di un nuovo contenuto
Inserire nel box predisposto il proprio nome utente e la propria password per
avere diritto all’abilitazione dei permessi che consentono di aggiungere o
modificare i contenuti del sito.
Dopo la registrazione entrare nella sezione in cui si vuole inserire nuovo
contenuto.
Appare una pulsantiera che permette di gestire i contenuti sotto diversi
aspetti:
Contenuti
Visualizza
Modifica
Proprietà
Condivisione
Vista
Aggiungi un nuovo elemento
Stato
Traduci in
Azioni
Se non vedi il collegamento alla vista “Contenuti” significa che non hai i
permessi per inserire o cambiare i contenuti a questo livello.
Premere su “Contenuti” : appare l’elenco di tutti file presenti nella sezione,
suddivisi per categoria in sottocartelle e di cui si mostra :
Titolo
Dimensione
Modificato ( data di
inserimento o
dell’ultima modifica)
Stato (bozza pubblica,
in revisione,
pubblicato)
Selezionare la sottosezione nella quale inserire un nuovo contenuto (si
visualizzano tutti i contenuti della sottosezione, anche qui titolo - dimensione
modificato - stato)
Premere su “aggiungi un nuovo elemento”, che mostra la lista di tutti i tipi di
contenuto (file, immagini, pagine, cartelle) che puoi inserire in questa
particolare sezione.
Compilare la maschera di inserimento.
Confermare le modifiche.
In particolare:
1. In Biblioteca digitale :
Premere su “Contenuti “ e scegliere le sottosezioni “titoli” , “biblioteche” ,
“autori” , “pubblicazioni” o “galleria immagini”. Da ognuna di queste è
possibile aggiungere un nuovo elemento. Le sottosezioni cataloghi sono
infatti contenuti filtrati direttamente dai campi presenti nelle maschere di
inserimento delle schede relative appunto a titolo, autore, biblioteca,
pubblicazione.
Nota anche che la scheda bibliografica ora si suddivide in più pagine, per
cui per completarla in tutte le sue parti occorre “voltare pagina” premendo
sul pulsante “successivo” in fondo alla scheda, per tornare indietro
premere su “precedente”. Confermare gli inserimenti premendo sempre
sul pulsante “conferma le modifiche”.
2. In Itinerari :
Cliccare su “Contenuti”. Si visualizzano i contenuti presenti suddivisi in
sottocartelle: “itinerari” – “immagini della sezione”
Selezionare una sottosezione, poi cliccare su “aggiungi un nuovo
elemento”, (itinerario).
Nota che per inserire l’immagine nella pagina degli itinerari è opportuno
caricare prima le immagini nella sezione “immagini della sezione”, creando
una cartella nominata con il nome dell’itinerario cui le immagini si
riferiscono.
Quando poi dalla pagina di creazione dell’itinerario si desidera inserire
un’immagine, si “recupera” da quella sezione. In tal modo si evita che
immagine caricate dal proprio desktop risultino poi “invisibili” su altri
computers.
3. In Rete :
Cliccare su “Contenuti” e scegliere le sottosezioni “Beni” , “Città” e
“immagini della sezione”
Selezionare una sottosezione, poi premere su “aggiungi un nuovo
elemento” e completare la relativa maschera di inserimento. Nota che
anche qui occorre voltare pagina con il pulsante “successivo” per compilare
la scheda in ogni sua parte e che anche qui la sezione “immagini della
sezione” permette di caricare le pagine relative alla città .
23.4.2 Il Workflow
Il workflow è il processo usato per gestire gli oggetti in un sito web. Un
esempio chiarificatore è un annuncio stampa di una certa ditta: un dipendente
scrive l'annuncio e lo sottopone all'editore per una revisione prima di
pubblicarlo sul sito. Questo processo, workflow appunto, viene usatoper
assicurarsi che il contenuto pubblicato sul sito sia corretto e rispondente ai
requisiti desiderati.
Questo controllo del flusso informativo è costruito a partire dagli “Stati di un
oggetto” e dai “Ruoli degli utenti”.
Stati di un oggetto:
•
Bozza pubblica: di default, gli oggetti sono creati con lo stato di “bozza
pubblica”. Questi oggetti non sono visibili ai visitatori del sito ma solo a
•
•
chi li ha creati (al possessore), al revisore e al manager del sito e sono
modificabili solo da chi li possiede e dagli amministratori del sito.
In revisione: sono contenuti sottoposti alla pubblicazione da qualche
collaboratore del sito ed etichettati in modo tale che i revisori del sito
possano intervenire pubblicando o rigettando l'oggetto in questione. Gli
oggetti in questo stato sono modificabili solo dai manager.
Pubblicato: è un contenuto visibile a tutti i visitatori. Gli elementi
pubblicati sono modificabili solo dai manager, ma possono essere ritirati
da chi li possiede per apportarvi cambiamenti (il ritiro riporta l'oggetto
nello stato di “bozza pubblicat”).
Ruoli degli utenti
•
•
•
Collaboratori : sono quelli che si sono fatti riconoscere inserendo il loro
nome e la password. Sono “possessori” degli elementi che creano.
Questo consente loro di modificarli,sottoporli o ritirarli dalla revisione
oppure di renderli bozza pubblica.
I revisori , hanno l'autorità di pubblicare o rigettare i contenuti
sottoposti a revisione dai collaboratori. Quando un revisore accede al
sito, se ci sono contenuti da controllare appare un messaggio nella
barra personale e una lista dei contenuti in revisione appare nella
colonna a destra sulla pagina. I revisori hanno gli stessi diritti di accesso
degli altri collaboratori.
I manager del sito possono vedere i contenuti in qualsiasi stato (bozza
pubblica, in revisione, pubblicato ). I manager possono aggiungere,
modificare, cancellare o spostare gli oggetti, oltre che aggiungere,
modificare e cancellare gli utenti e assegnare loro i ruoli.
Modificare lo stato degli oggetti
Per cambiare lo stato di un'oggetto, nella vista dei contenuti attiva il checkbox
di fianco al nome dell'oggetto da modificare e poi clicca sul pulsante per
cambiarne lo stato, in fondo alla pagina. Compare una maschera relativa al
processo di pubblicazione che propone le seguenti opzioni::
1. Stato: ti dice lo stato corrente del documento
•
Data di pubblicazione e di ritiro: la data effettiva di pubblicazione indica
il primo giorno in cui l'oggetto dovrà essere reso disponibile, mentre
quella di ritiro l'ultimo giorno di disponibilità. I contenuti possono cos’
essere visibili anche solo per uno specifico arco di tempo. Lasciando
vuoti questi campi l'oggetto è disponibile indefinitivamente.
•
Commenti: qui si può inserire qualsiasi commento o motivo alla richiesta
di modifica dello stato di pubblicazione. Questi commenti sono
conservati nelle registrazioni dei cambiamenti dell'oggetto.
•
Cambia stato : gli stati nei quali può essere posto l'oggetto. La
disponibilità degli stati dipende dal tuo ruolo. I collaboratori possono
mettere in revisione o rendere gli oggetti privati. Una volta messi in
revisione, gli oggetti saranno disponibili ai collaboratori con funzione di
revisore, che potranno pubblicarli o rigettarli.
Seleziona quindi lo stato che desideri e conferma l'operazione.
È anche possibile cambiare lo stato degli oggetti nella vista normale. Clicca
sul tab di stato, scegli quello desiderato e conferma.
Revisione dei documenti
Se hai i diritti di revisionare dei documenti al tuo ingresso nel sito ti verrà
proposta una indicazione se qualche elemento è da revisionare. Come revisore
puoi selezionare ogni documento e revisionarlo. Entra nella scheda 'stato' e
vedrai un modulo come quello sopra. A questo punto hai praticamente due
possibilità: o approvare e quindi pubblicare il documento (opzione 'pubblica')
o respingerlo (opzione 'Respingi'). Se respingi il documento vorrai
probabilmente associargli un commento per spiegarne il perché.
Modifica di un documento dopo la sua pubblicazione
Gli amministratori hanno facoltà di modificare gli oggetti in qualsiasi stato si
trovino. Ai collaboratori invece non è consentito cambiare un elemento dopo
che è stato pubblicato: deve prima essere riportato allo stato bozza pubblica
per poterlo fare. Per ritirarlo dalla pubblicazione, entra nella scheda di stato e
clicca su ritira. A questo punto l'oggetto sarà nuovamente alterabile a piacere
e potrà essere risottoposto a revisione.
Condivisione
Il possessore di un oggetto, quindi il creatore di un contenuto, può decidere di
condividere la propria creazione con altri collaboratori rendendo loro
accessibile e modificabile il proprio contenuto. Per far questo dalla tab di
gestione dei contenuti selezionare “Condivisione” . Appare una maschera che
mostra i possessori del contenuto, cioè gli utenti che hanno permessi condivisi
sul particolare contenuto
e la possibilità
di aggiungere permessi di
condivisione ad altri collaboratori o a gruppi di collaboratori, o al contrario di
eliminare qualsiasi tipo di condivisione.
Proprietà
E’ anche possibile assegnare delle proprietà al documento, cioè assegnare
delle informazioni, dette anche metadati, che integrano e completano il
contenuto di tutti gli elementi consentendone la loro classificazione.
Si possono assegnare delle parole chiave, includere i nomi di tutte le persone
che hanno contribuito alla creazione del contenuto, o i nomi dei responsabili
del contenuto, la data di accessibilità effettiva e la data di scadenza…etc
