Web publishing e sistemi
CMS
Concetto del
Web publishing
 Un Web Content Management System
(WCMS) o CMS per la pubblicazione sul
Web, è una combinazione di database di
grandi dimensioni, file system e altri moduli
software correlati, che sono utilizzati per
memorizzare e poi recuperare enormi
quantità di dati.
 Essi sono basati (di solito) su un modello
(template) precompilato che funge da
piattaforma per ogni pagina del sito, man
mano che questa viene creata.
Le figure di base
del CMS
Ci sono tre figure (attori, partecipanti) di base
nel sistema CMS di web publishing:
 Editor di contenuto (che decidono quali
contenuti pubblicare e dove)
 Gli editori di contenuti (che pubblicano il
contenuto sul web)
 Gli autori di contenuto (che creano il
contenuto per il web)
Utilizzando questi sistemi è possibile pubblicare una vasta
gamma di contenuti, che possono essere:
 pagine semplici per la presentazione normale
 pagine complesse, con layout specifico e la presentazione
 informazioni provenienti da database dinamico, che
cambia ad intervalli di tempo
 regolari
 materiale didattico
 manuale in linea
 documenti aziendali generali
 migliaia di pagine in totale, per le diverse categorie di
clienti
 notevoli collegamento tra le pagine
Progettazione e pubblicazione di
un sito web
Il progetto di un sito web è un processo
costituito dalle seguenti sei fasi:
 1. Definizione del Progetto
 2. Struttura del Sito
 3. Progetto Visuale
 4. Sviluppo del Sito
 5. Testing
 6. Avvio della Piattaforma
1. Fasi di definizione del progetto
 La definizione di un progetto rappresenta il
momento più critico del processo di web
design perché in essa si definisce in modo
preciso la struttura del progetto. Una
definizione del progetto include una sintesi
(brief) del progetto e le sue direttive.
L'indagine presso il cliente è necessaria per
raccogliere le informazioni per lo sviluppo del
brief del progetto e il suo piano.
Sono previste sei fasi:
 Fase 1: Condurre un colloquio di indagine del cliente, per determinare
gli obiettivi del progetto, il pubblico a cui è rivolto, gli obiettivi
dell’azienda, la fonte dei contenuti, specifiche tecniche iniziali e la
strategia di comunicazione.
 Fase 2: Scrivere una breve sintesi del progetto ( Brief). Partendo dalle
informazioni acquisite dal colloquio con il cliente , scrivere una sintesi
del progetto per descrivere gli obiettivi del progetto, il profilo
dell’utenza, la percezione dell’utenza, il messaggio principale e il
vantaggio competitivo.
 Fase 3: Sviluppare il profilo dell’utenza. Rivedere il colloquio con il
cliente e la sintesi del progetto. Utilizzare il template dell’utente, per
creare un pubblico immaginario inserendo i dettagli seguenti: foto,
nome, preventivo, descrizione, demografia, profilo tecnico, principali
obiettivi dell’utente, tre principali obiettivi economici per il sito.
 Fase 4: Scrivere le specifiche tecniche del progetto. Utilizzando le
informazioni raccolte nell’intervista con il cliente e gli standard tecnici
dell’azienda, documentare le specifiche tecniche per definire
chiaramente i requisiti, come risoluzione dello schermo, compatibilità
del browser, tempo di download, standards web e accessibilità.
 Fase 5: Sviluppare il Piano del progetto e le scadenze (Timeline),limite
temporale massimo. Definire la timeline per le consegne e le attività per
ciascuna fase del progetto. Assegnare sempre due date e le risorse.
 Fase 6: Documentare le direttive per la manutenzione. Sviluppare un
piano di manutenzione del sito che preveda con quali modalità il sito
debba essere aggiornato e rivisto regolarmente. Il motivo per cui di
deve preparare un piano di manutenzione all’inizio del progetto è che si
deve tener conto del fatto che i siti e le applicazioni web richiedono
supporto e manutenzione. Tranquillizzare l’utenza sulla robustezza del
sito esponendo le esigenze di manutenzione con opportuni riferimenti
sulla parte anteriore del sito.
Struttura del sito
Un buon progetto web richiede una solida architettura
per il sito, basata sugli obiettivi del sito e sull’utenza
target (finale), stabiliti nella sintesi del progetto. I
risultati di questa fase sono:
1. Descrizione dei contenuti del sito
2. Diagramma (schema) del sito
3. Diagrammi di descrizione delle pagine
4. Wireframes (schema dei macroblocchi del sito
Questi quattro elementi sono dipendenti l’uno dall’altro
e devono essere sequenziali, in particolare:
Descrizione dei contenuti del sito
Lavorando in sinergia con i clienti:
1. creare un elenco di tutti i contenuti esistenti ed effettuare un
braistorming in relazione ai contenuti che è necessario creare;
2. revisionare la lista dei contenuti ed eliminare quelli che non
corrispondono agli obiettivi o alle esigenze dell’utenza, secondo quanto
stabilito nella sintesi.
3. prevedere come crescerà in futuro;
4. effettuare una categorizzazione, ovvero una classificazione dei
contenuti;
5. ottenere un feedback degli utenti mediante una card sort (una card sort
è un metodo veloce, non costoso ed affidabile, che serve come input
nel processo di progettazione dell’informazione. Esso produce una
struttura complessiva per le informazioni, oltre suggerimenti per la
navigazione, menu e tassonomie).
6. creare un profilo (schema) del contenuto ed effettuare una revisione
insieme al cliente per una maggiore accuratezza.
Diagramma (schema) del sito
A partire dallo schema finale dei contenuti, si
crei una mappa del sito (diagramma o site
diagram). Il site diagram è una
rappresentazione visuale dello schema dei
contenuti e della struttura del sito. È possibile
utilizzare qualsiasi programma per realizzare
il site diagram.
Diagrammi di descrizione delle
pagine.
 I diagrammi di descrizione di pagina, detti
anche PDD (Page Description Diagrams)
devono precedere la creazione dei
wireframes o li devono sostituire. Servono a
stabilire:
 Quali contenuti appartengono a questa fase;
 Qual è la priorità di ciascun macroblocco di
contenuto.
PDD
 Per i PDD è consigliabile utilizzare un layout ad

1.
2.
3.
accesso orizzontale per le priorità. Ad esempio tre
colonne, di cui la prima contiene informazioni ad alta
priorità.
I vantaggi del PDD rispetto al wireframe sono i
seguenti:
Chiarisce quali siano tutti i contenuti per una data
pagina;
Chiarisce quale sia la priorità di ciascun
macroblocco di contenuto;
Rimuove completamente il progetto visuale (colore,
font, collocazione) da questa fase della
conversazione.
Wireframes
 Schema dei macroblocchi del sito. Un
wireframe è un layout non grafico di una
pagina web. È un semplice schema dei
macroblocchi di informazione e funzionalità
per ciascuna pagina del sito. È consigliabile
creare un wireframe per la homepage, per
ciascuna unica pagina di secondo livello e
per ogni altra pagina significativamente
differente del sito.
Wireframes
I wireframes comprendono i
contenitori per tutti i maggiori
elementi della pagina. Gli
elementi comprendono la
navigazione, le immagini, il
contenuto, gli elementi
funzionali (come la ricerca) e
il footer (fondo pagina).
Progetto Visuale
 Il progetto Visuale consente l’esame della
sintesi del progetto, la mappa del sito e lo
schema dei macroblocchi (wireframe) con il
progettista, per poi cercare le soluzioni
(brainstorming) e sviluppare più progetti
visivi. Il progettista deve inoltre esaminare i
requisiti tecnici per la risoluzione dello
schermo, la compatibilità del browser, il
tempo standard di caricamento web e
l’accessibilità.
Un esempio dei compiti (attività) del progetto visuale sono i
seguenti:
 Prima bozza di progetti visuali per la homepage e una
sottopagina;
 Il cliente fornisce un feedback sui progetti;
 Seconda bozza dei progetti visuali per la homepage e una
sottopagina;
 Il cliente seleziona il progetto e fornisce un feedback;
 Terza bozza dei progetti visuali per la homepage e una
sottopagina;
 Il cliente fornisce un feedback sul progetto;
 Progetti visuali finali per la homepage e tutte le sottopagine
uniche;
 Approvazione del progetto finale da parte del cliente.
Sviluppo del sito
 Conferma e perfezionamento del Piano
Tecnico e Funzionale
 Costruzione e integrazione del Sito.
Conferma e perfezionamento del Piano
Tecnico e Funzionale
Specifiche Tecniche Target. Quali sono i browser, sistema operativo,
risoluzione e velocità di connessione che ci si pone come target.
1. Browser: Quali browser si vuole adottare.
2. Sistema Operativo: Mac, Windows, altri.
3. Risoluzione del monitor: Stabilire con quale risoluzione si deve
progettare il sito e con qual altre risoluzioni è ancora possibile avere
una gradevole visione dei contenuti.
4. Velocità di connessione: Stabilire qual è la velocità di connessione
attesa per l’utenza principale e quali altre velocità di connessione sono
supportabili.
5. Dimensione di download della pagina:
 30K o minori
 30 - 80K (pagina tipica)
 80 – 100K (grafica pesante)
 Oltre 100K (non consigliabile, tranne che tutti gli utenti abbiano una
banda larga.
Conferma delle specifiche tecniche. Stabilire quali siano le
funzionalità richieste dal sito; è consigliabile seguire gli standard
del W3C per garantire che il sito raggiunga gli obiettivi web per
ognuno e per qualsiasi cosa sul web:








CSS
Flash
Versione X(HTML)
JavaScript
Rich Media (video, audio)
Ricerca
Transazioni Secure Credit Card
Tecnologie di back end (database, CMS, personalizzazione,
login)
Piano di progetto. Rivedere la timeline originale e le specifiche
tecniche e funzionali già stabilite.
Verificare che siano disponibili tutte le risorse per completare il
progetto nei tempi e nel budget stabiliti.
Costruire ed
integrare il sito
FASE 1
Costruire Template Utilizzando gli Standard
Web:
 CSS – separare la presentazione dal
contenuto
 X(HTML) – utilizzare una versione valida di
X(HTML)
 Javascript – aggiungere piccoli script
 Ottimizzare le immagini, i css e (x)html
 Eseguire i test iniziali sui template
Costruire ed
integrare il sito
Creare Pagine:
 Contenuto semplice nei template
 Stabilire un metodo per coloro i quali contribuiscono alla
revisione, aggiornamento e creazione di contenuti
 Sviluppo del Backend:
Codificare le caratteristiche dinamiche del sito che richiedono
database e integrazione, quali:
 Ricerca
 Personalizzazione/login
 Transazioni sicure
 Analisi web
Fase di Testing
Il piano originale del progetto dovrebbe assegnare
sempre un tempo standard per il test formale.
Idealmente, si dovrebbe identificare una persona a
cui demandare la funzione di Lead Quality
Assurance.
Il compito principale di questa persona sarà:
a) creare un piano realistico (QA),
b) gestire il processo di test (testing)
c) garantire che i problemi con priorità più alta siano
risolti,
d) condurre la revisione finale
e) effettuare il rilascio del sito.
Controllo di qualità
Effettuare il controllo della qualità valutando i parametri seguenti:
1. Contenuto. Verificare che sia accurato, comprensibile, esattezza
dell’ortografia, della grammatica (attività eseguite dagli autori e
dagli editori di contenuti);
2. Links. Revisione del sito per il controllo di integrità dei
collegamenti (links) e ricerca dei contenuti obsoleti, con l’ausilio
di uno strumento automatico (per esempio, WebXM);
3. Funzionalità. Verificare che il sito svolga le funzioni previste nella
definizione del progetto originale, creare l’elenco delle attività
(compiti) e condurre il test metodologico;
4. Validazione. Effettuare la validazione:
 del markup dei documenti web in HTML, XHTML, SMIL,
MathML;
 dei fogli di stile CSS;
Controllo di qualità
5. Accessibilità. Effettuare il test di accessibilità secondo la normativa vigente,
utilizzando uno strumento automatico tra quelli disponibili (per esempio
WebXM);
6. Browser/Sistema Operativo /Risoluzione. Effettuare il test del sito sui browsers
scelti in precedenza; tale attività può essere svolta in forma manuale o con
l’ausilio di un tool (per esempio BrowserCam);
7. Velocità di connessione. Utilizzare l'Analizzatore di Pagine Web per analisi e
raccomandazioni sulla velocità e sulla dimensione delle pagine;
8. Usabilità. Effettuare il test di usabilità, in modo formale o informale, con il pubblico
di destinazione del sito;
9. Ottimizzazione del motore di ricerca. Revisione del sito in relazione al markup
semantico.
10. Test di carico. Contattare l’amministratore del server per definire le tecniche dei
test di carico del sito.
11. Sicurezza. Richiedere la scansione automatizzata della sicurezza (per esempio
con SecurityXM Scan), rivedere le autorizzazioni dei file, rivedere il metodo di
autenticazione, effettuare il test di autenticazione.
Priorità
 Quando si controlla l'elenco dei problemi rilevati
durante la fase di test, è necessario assegnare ad
essi una priorità categorizzandoli in almeno tre
gruppi:
 Priorità 1 - Critico, deve essere risolto prima del
lancio del sito
 Priorità 2 - Potrebbe migliorare il sito, ma non è
indispensabile; aspetto da affrontare al più presto;
 Priorità 3 – Miglioramento futuro, buona idea /
caratteristica da considerare per i rilasci futuri.
Perfezionamento
del sito
Dopo aver svolto queste fasi e prima del
rilascio, accertarsi di aver apportato al sito le
modifiche secondo le indicazioni previste
dalla Priorità 1.
Avvio della
piattaforma
Questa fase prevede tre controlli:
 Guida di stile
 Lancio (pubblicazione) del sito
 Manutenzione
Guida di stile
Quando il sito è pronto per andare in produzione, è importante
documentare la Guida di Stile. Una Guida di Stile è costituita dai
seguenti elementi:
 standard del progetto visuale: loghi, colori, caratteri tipografici,
etc.;
 convenzioni per i nomi: per i file, le directory, i css, le immagini, i
titoli;
 struttura del sito: documentare il diagramma del sito e indicare
le modalità secondo cui la struttura è stata progettata per gestire
la crescita;
 Template (modelli): fornire i template X(HTML) e i CSS che
indicano il layout, i caratteri tipografici, le dimensioni, il colore, la
navigazione, i menu.
Lancio (pubblicazione) del sito
Pianificare la data migliore per la pubblicazione,
considerando i modelli attuali di traffico del
sito e cercando di avviarlo quando in modo
da minimizzare il tempo in cui non è
collegato. Accertarsi che tutti i componenti del
team di supporto siano collegati per
affrontare eventuali problemi che dovessero
insorgere durante il lancio. Se possibile, si
ipotizzi il lancio di una versione “beta” per
accertarsi che ogni cosa sia in linea e
funzionante prima del lancio ufficiale del sito.
Manutenzione
Implementare il piano di manutenzione che è stato sviluppato nella
prima fase di questo appaia:
 Completo
 Corrente
 Coerente
 Ricercabile
 Accessibile
 Attraente
 Robusto
 Sicuro
 Conveniente
 Allineato con lo spirito e gli obiettivi del progetto