docWEB DESIGN:COME CREARE SITI DI SUCCESSO
download 
Reclamo Transcript
WEB DESIGN:COME CREARE SITI DI SUCCESSO
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 & & & ÷ ÷ ÷ ¢ ¢ ¢ © © © > > > < < < µ µ © · · · £ £ £ § § § ¥ ¥ ¥ ® ® ® ± ± ± ¶ ¶ ¶ áÁ á Á á Á àÀ à À à À â &acric; &Acric; â  åÅ å Å å Å ãà ã à ã à 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
