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 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: creare un elenco di tutti i contenuti esistenti ed effettuare un braistorming in relazione ai contenuti che è necessario creare; revisionare la lista dei contenuti ed eliminare quelli che non corrispondono agli obiettivi o alle esigenze dell’utenza, secondo quanto stabilito nella sintesi. prevedere come crescerà in futuro; effettuare una categorizzazione, ovvero una classificazione dei contenuti; 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). 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 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 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