Analisi & Progettazione del Sito Web “Documento dei requisiti”
05/01/2014
Ferruccio Piazzoni
1
Domini
giorgiorgiogori.it giorgiogoriperbergamo.it giorgiogorixbergamo.it goriperbergamo.it perbergamo.it (www) 05/01/2014
Ferruccio Piazzoni
2
Premessa Stiamo progettando um sito che nel 2014 ( e nei prossimi anni) deve avere qualche chance di funzionare realmente per organizzare la partecipazione dei cittadini all’attivitá politica di un politico , portatore di una proposta fatta- insieme- di contenuti e metodo. Stiamo parlando, sia pure a tendere, di un elaborato e complesso «PROGETTO WEB 2.0» con una serie di applicazioni online che permettono un elevato livello di interazione tra il sito web e l'utente afferenti al paradigma del Web dinamico [blog, e piattaforme di condivisione di media come Facebook, Myspace, Twitter, Google+, YouTube, Vimeo, i social network . Un Progetto Web come insieme di quattro componenti fondamentali: • Sito Web • Web Marketing • Monitoraggio • Tuning Mensile
05/01/2014
Ferruccio Piazzoni
3
Documento dei requisiti Purtroppo anche in questo caso non è stato possibile scrivere un documento di analisi e di progetto, per problemi di tempo e di personale dedicato. È vero però che molti problemi in fase di realizzazione e sviluppo del progetto, derivano dalla mancanza di un documento di questo tipo che riporti in dettaglio tutte le informazioni stabilite inizialmente con il committente. In questo documento ( pomposamente : project plan, piano editoriale) andrebbero inserite anche le linee scelte per:
il tono e lo stile del sito (allegro, serio, formale, informale, ...); la strategia di comunicazione da adottare, in accordo con il tono e lo stile; il messaggio di fondo da fornire; la pianificazione dei tempi di sviluppo; la definizione del team interno/esterno che si occuperà del progetto, con i rispettivi ruoli e responsabilità.
05/01/2014
Ferruccio Piazzoni
4
Specifiche documento Formalizzare, per iscritto, il lavoro futuro. Alla raccolta dei dati segue un’analisi dettagliata che aiuti a passare alla fase successiva della progettazione. Alcune domande a cui rispondere potrebbero essere del tipo: a. b. c.
I desideri e gli obiettivi del cliente? Piano operativo per conseguirli? Quanto costerà nel suo insieme il progetto
d. e. f. g.
come sono composti i costi e come possono essere ridotti? quante ore vanno allocate ad ogni singolo task? chi sono i membri del team e come si suddividono le rispettive responsabilità?
Quali sono le responsabilità del cliente? Quali materiali occorre produrre nel corso del progetto, e con quali scadenze vanno consegnati? Come si verificherà la rispondenza del sito alle esigenze degli utenti? Quali sono gli obiettivi a lungo termine del sito?
05/01/2014
Ferruccio Piazzoni
5
Architettura Architettura del sito web, in termini di contenuti e funzionalità. Entra da subito in gioco la competenza professionale di un esperto ( sa, sa fare, ha fatto) per disegnare la SITEMAP ( mappa delle pagine che comporranno il Sito Web: strutturata correttamente sin dall’inizio, organizzando i contenuti in categorie e tassonomie specifiche ed associando le singole pagine da produrre ad un certo numero di “parole chiave”
• DA FARE ORA : raccolta delle informazioni necessarie per arrivare al rilascio della RELEASE 1.0 con funzionalità tempi e costi chiari e preventivati. » » » » » »
Creazione delle voci base del progetto Esplosione delle voci in attività minori Quantificazione delle attività Necessità di sw / hw extra Albero di "navigazione" Albero di "funzionalità"
05/01/2014
Ferruccio Piazzoni
6
Release Attuale ( 5.1.2014-ore 18.30) • •
Aderisci>>> ZODIACK NASCONDERE ( non eliminare ) DALLA SITE MAP GENERATA Chi Sono –
Idee • • • • • • •
–
•
Un’Italia unita, moderna e giusta Un’altra Italia è già qui L’Italia giusta Cambiare l’Italia Cambiare Verso Il mio Impegno Cinque priorità per Bergamo
Perchè mi candido
Conosciamoci – – –
Vogliamo incontrarci? Dì la tua Partecipa
• • • • •
Contatti Download>>> ZODIACK ELIMINARE O NASCONDERE DALLA SITE MAP GENERATA Foto I referenti di quartiere Idee per Bergamo
• • • • • •
Invia la tua proposta Link Materiali da scaricare News>>> ZODIACK ELIMINARE O NASCONDERE DALLA SITE MAP GENERATA Newsletter>>>ZODIACK NASCONDERE ( non eliminare ) DALLA SITE MAP GENERATA Oggi, %s
• • • • • • •
Quando/Come/Dove si vota>>> CONTENUTI DA DEFINIRE>>>COLLOCARE NELL’ALBERO DI NAVIGAZIONE Rassegna Stampa Registrazione Site Map VIDEO Il programma>>> ELIMINARE
–
–
Un’idea di città
Agenda
05/01/2014
Ferruccio Piazzoni
7
Site Map - RELEASE 1.0 1. Site Map ( a tendere)>>> TDB a valle attuale fase >> 8.01.2014 2. To Do con steps relativi ( Gantt) TDB a valle attuale fase >> 9.01,2014 Zodiak Attivitá da svolgere - distinguere: una tantum/ manutenzione/SLA, service level agreement)
Specifiche descrittive funzionalità implementate e da implementare Metodo raccordo tra Redazione Multimediale “per Bergamo” e Zodiak [ responsabili operativi unici di riferimento e coordinamento]
Eventuale Contrattualizzazione degli aspetti onerosi da quantificare
05/01/2014
Ferruccio Piazzoni
8
Fasi di progetto 1.
Analisi dei Requisiti e Progettazione del Sito Web
2.
Design
3.
documento dei requisiti“, all’interno del quale il cliente espone le caratteristiche della sua attività nei minimi dettagli e le richieste funzionali da architettura del sito web, in termini di contenuti e funzionalità. Entrano da subito in gioco diverse competenze professionali, tra cui quella di un esperto (interno o esterno al team) in ottimizzazione per il posizionamento nei motori di ricerca, conosciuto anche come SEO expert. la “sitemap”, cioè la mappa delle pagine che comporranno il Sito Web va strutturata correttamente sin dall’inizio, organizzando i contenuti in categorie e tassonomie specifiche ed associando le singole pagine da produrre ad un certo numero di “parole chiave DA CONCLUDERE ENTRO IL 7.1. 2014- Responsabile Ferruccio
Web Designer Professionista, esperto della User Experience, cre le prime bozze “grafiche” delle pagine che comporranno il Sito Web. wireframes nell’ottica di focalizzare l’attenzione su quali contenuti presentare e dove posizionarli, creando così il layout “scheletro”, delle pagine. I wireframes sono necessari quando si realizzano siti web di tipo responsive (adatti a smartphone e tablet) poichè consentono di stabilire cosa visualizzare (o non visualizzare) sui diversi dispositivi. MAURO FERRARI
Realizzazione del tema Zodiak su piattaforma WP
3.
CSS, APP, Short … colori, forme, stili, fonts, immagini, pulsanti, link, liste e tanto altro.
Sviluppo Zodiak su piattaforma WP
4. 5. 6. 7.
Produzione Contenuti FERRUCCIO & C Test e Lancio CHRISTOPHE Promozione, Web Marketing CHRISTOPHE Monitoraggio e Tuning CHRISTOPHE
Le attività di Monitoraggio e Tuning, seppur diverse, vanno spesso a braccetto. Con frequenza mensile, od anche maggiore per progetti web complessi e delicati, si monitorano i dati di accesso al sito, i flussi comportamentali e l’andamento dei cosiddetti KPI (Key Performance Indicators) che sono, in sostanza, indicatori associati agli obiettivi del nostro Progetto Web: contatti, richieste di preventivo, nuovi followers, acquisti, presenza sui motori di ricerca ecc
05/01/2014
Ferruccio Piazzoni
9
Attività - Progress
Prog.
Attivitá
1 2 3 4 5 6 7
Responsabile
Contatto e coordinamento Analisi Preparazione prototipo (mockup) Preparazione bozze grafiche Preparazione prototipo Live Creazione Template Creazione CMS (db)
Ferruccio
Ok
Ferruccio
8 Creazione pagine / Integrazione CMS 9 Installazione / Configurazione
Ferruccio Piazzoni
Fine no data 7.1.2013
Mauro
Ok
Ended
Mauro
Ok
Ended
Zodiak su base WP
Ok
3.1.2014
Zodiak su base WP
tbd
Zodiak su base WP
tbd
Ferruccio & C. su base Zodiak Template
10 Web Writing e SEO
05/01/2014
Avanzamento
Ok
Ended
Zodiak su base WP
tbd
Ferruccio & C. su base Zodiak Template
tbd
10
Contatto e coordinamento La prima ed essenziale attività, fondamentaleper per definire le 5W del progetto: • • • • •
who: Giorgio Gori what: per Bergamo- obiettivi e tipo di utenza why: vincere le amministrative Bergamo where: eventuali vincoli di hosting, location when: tempistica > inizio, step intermedi, fine e modalità di consegna (SLA attesi) dei contenuti
Tenere conto dei tempi che saranno necessari lungo tutto il lavoro, per comunicare con GG e coordinarsi con gli altri team.
05/01/2014
Ferruccio Piazzoni
11
GG & il suo target • GG viene qui inteso come chiunque, interno o esterno, abbia il ruolo di approvare il progetto, il budget e il contenuto informativo. • Target è chi visiterà il sito che stiamo progettando, la metodologia alla base della progettazione deve essere User Centered Design (UCD): – quali sono le categorie di utenza che più visitano il nostro sito – quali sono le loro caratteristiche: background, expertise tecnologico, quali sono le loro esigenze
05/01/2014
Ferruccio Piazzoni
12
Analisi Analisi dei Requisiti e Progettazione del Sito Web Questo è il «documento dei requisiti», all’interno del quale GG espone le caratteristiche dell’attività nei dettagli e le richieste funzionali da implmentare Architettura del sito web, in termini di contenuti e funzionalità. Entrano da subito in gioco competenze diverse professionali, tra cui quella di un SEO expert (interno o esterno al team) per l’ ottimizzazione del posizionamento nei motori di ricerca: la “sitemap”, [ mappa delle pagine che comporranno il Sito Web va strutturata correttamente sin dall’inizio] , organizzando i contenuti in categorie e tassonomie specifiche ed associando le singole pagine da produrre ad un certo numero di «parole chiave»
Zodiak Ci consegnerá il “progetto su carta", per arrivare alla produzione di un prototipo con funzionalità tempi e costi chiari e preventivati con : • • • • • • •
Voci base del progetto Esplosione delle voci in attività minori Quantificazione delle attività Necessità di sw / hw extra Albero di "navigazione" Albero di "funzionalità" (approvazione...)
Fondamentale: identificare con precisione l'elenco del materiale, chi e come lo fornisce, quando.
05/01/2014
Ferruccio Piazzoni
13
Specifiche prototipo: richieste da GG a Zodiak Condizioni necessarie per rendere autonoma la padonanza della gestione della piattaforma • • •
Attivitá condivise con il cliente Costi accettati dal cliente Contratto firmato
Il Protótipo ( maquete/mockup) o o o o o o o o o
Definizione delle aree del sito Aree sempre presenti Aree occasionali Menu Contenuti Footer Struttura homepage Struttura modelli principali di pagina Struttura / casi d'uso di funzionalità interattive
Obiettivo • • •
Struttura homepage Struttura modelli principali di pagina Struttura / casi d'uso di funzionalità interattive
05/01/2014
Ferruccio Piazzoni
14
Scelte tipografiche Le convenzioni classiche per la stampa tipografica normalmente utilizzavano: • un font senza grazie per i titoli • un font con le grazie per il test Questo è dovuto al fatto che è più facile riconoscere una parola semplicemente scorrendo le grazie di un carattere. Oggi con l’evoluzione delle tecnologie utilizzate per la costruzione dei monitor e con l’elevata risoluzione con cui riusciamo a visualizzare, è possibile dire che la differenza nell’utilizzo di un tipo di font rispetto ad un altro non cambia molto le prestazioni nella leggibilità. No al maiuscolo Uno degli errori più ricorrenti è quello di scrivere delle porzioni di testo tutte in carattere maiuscolo, credendo erroneamente di attirare l’attenzione. Purtroppo l’occhio umano fa difficoltà a leggere i caratteri maiuscoli rallentando anche la comprensione stessa del testo
05/01/2014
Ferruccio Piazzoni
15
Prototipo Live Il progetto “Giorgio Gori X Bergamo “ richiede a Zodiak la creazione e il rilascio di un prototipo funzionante e da noi collaudato Questa attività é ancora in fase di svolgimento sulla base delle bozze grafiche rilasciate da Mauro Ferrari Alcune funzionalitá sono state solo indicate e saranno successivamente implementate: – A caccia di volontari – Mappe Interattive
05/01/2014
Ferruccio Piazzoni
16
Tema : Twenty Eleven rev. Zodiak Abbiamo capito che il tema è Twenty Eleven solo di nome. Di fatto Zodiak ha personalizzato il layout di Wordpress codificando tutto, la stessa cartella in cui risiede sotto /themes si chiama cosi. É tutto php e css. Ad esempio: • L'header non è quello Twenty Eleven, ma viene utilizzato il plugin simplemodal per creare degli overlay grafici o dei dialog box (attraverso jquery). Il logo del PD in overlay viene inserito con questo sistema. • Il font si chiama proximanova, i caratteri sono stati scelti da Mauro, caricati nello style.css. e i relativi file .eot, woff, ttf e .svg sono nella cartella font del tema. • Le icone social sono definite nello style.css (yt-icon, fb-icon, tw-icon), i file .png delle stesse sono sotto themes/zodiak/images/... • La sidebar ( spalla di destra con tutti i suoi oggetti) viene definita in sidebargori.php
05/01/2014
Ferruccio Piazzoni
17
Creazione CMS • GG per Bergamo ha necessità di un sistema di gestione contenuti (CMS) autonomo, ci sembrava ottima la scelta di usare un sistema pronto come WP ( Wordpress), avrebbe potuto essere Drupal, .... • La piattaforma che abbiamo in mano sembrerebbe in parte creata come un CMS ad hoc senza sfruttare i plug in esistenti in Wordpress • Questo é accettabile se alcune logiche di creazione/adattamento della piattaforma di riferimento Wordpress non alterino la portabilitá • In questa fase di analisi è necessaria particolare attenzione all'architettura delle informazioni e alla struttura del db, difficilmente modificabile in corso d'opera. • É necessario concordare con GG , con un allegato al contratto quali parti il cliente inserirá in modo autonomo e quali dovremo inserire noi e se il cliente potrà eventualmente modificarle • Pertanto, sulla base del lavoro di questi giorni é necessario rivedere alcune scelte e arrivare a un “Progetto Strutturato” 05/01/2014
Ferruccio Piazzoni
18
Modelli di riferimento Il sito dei Liberal Canadesi http://www.liberal.ca/,
sia pure molto meglio organizzato come impostazione, menu e navigazione, è fatto con WordPress ed è molto vicino (anche come contenuti) a quanto stiamo elaborando in «GG per Bergamo», ciò rappresenta per noi un feedback molto positivo che ci conferma che siamo sulla strada giusta: anche i liberal canadesi hanno scelto il pop up adottato da Mauro per aumentare la registrazione , anche se la «pressione» è opportunamente più lite (non si ripresenta fino alla prossima sessione di navigazione). • I canadesi hanno utilizzato la tecnica di profilazione e installato buddypress per la gestione del “social network” interno alla loro organizzazione. Vedi http://www.temiwordpress.net/blog/buddypressrealizza-il-tuo-social-network-con-buddypress/ • Piú semplice anche per onerositá di gestione acquisire la tecnologia visibile all’indirizzo http://uidu.org/explores/opportunities
05/01/2014
Ferruccio Piazzoni
19
Piattaforma WP • Sarebbe opportuno che la piattaforma WP installata fosse quella Italiana (per problemi di riconoscimento soprattutto degli accenti) • Zodiak ha giá installato il plugin sitemap, ma questo non genera una vera e propria sitemap (formato xml) come richiesto da Google (Protocollo Sitemap 0.9 definito all'indirizzo sitemaps.org/it/). • il sito deve essere ottimizzato per tramite del plugin Yoast Wordpress SEO 05/01/2014
Ferruccio Piazzoni
20
Menú & Navigabilitá - Responsivity • RESPONSIVITY [ oggi - rispetto al 2011- necessario] Twenty Eleven non è particolarmente responsive, specie su IOS. Esisterebbe WPtouch , un plugin for WordPress che abilita automaticamente il sito WordPress website. Lo si trova qui : http://wordpress.org/plugins/wptouch/
05/01/2014
Ferruccio Piazzoni
21
Menú & Navigabilitá - Side Bar SIDE BAR non capiamo come funziona, ma quello che abbiamo capito ci preoccupa perché arriviamo a gestire solo alcune pagine, ma non la struttura, le icone, i caratteri… ci saranno altri oggetti da inserire ( esempio : widget, mappe o altro , esempi inviati )
Esempi/Quesiti/Features Il tag cloud non prevede lettere accentate (argomenti della sidebar)>> potrebbe essere che WP è installato in en e non ita ? Il tag cloud è quello standard WordPress: viene evidenziato con carattere più argomento che contiene più informazioni (numero di articoli – posts- maggiore), sarebbe necessaria una impaginazione diversa e più leggibile degli argomenti ed una evidenziazione a scelta della redazione, o nessuna evidenziazione [vedi SIDE BAR/ ARGOMENTI]:
Per quale motivo è necessario usare la categoria “highlights” per esporre un post in home page? Wordpress prevede già di base questa possibilità con lo SHOWCASE (stick this post on the home page).
05/01/2014
Ferruccio Piazzoni
22
Menú & Navigabilitá- Altre barre navigazione TESTIMONIALS – nella SIDE BAR, sotto ARGOMENTI una rubrica di grande effetto , molto stile americano (fosse possibile inserire anche una immagine del singolo “testimonial”): qui la redazione puó riportare in evidenza le citazioni/articoli (posts) di tutte le personalità importanti che intendiamo far partecipare sui vari ARGOMENTI (>> Idee)… A questo scopo va creata una categoria denominata “testimonials” con la quale marcare tutti i post inseriti con questo scopo SOCIAL IKON – Le icone che linkano i social network secondo le indicazioni di Cristophe dovevano essere posizionate: • Sopra il box SIDE BAR/PRIMARIE • Nel footer ( dove sono ora) – Solo nel footer sono un po’ invisibili BARRA NAVIGAZIONE SECONDARIA • fatta a icone e titolo: stile sito www.goldfinger.com ma più' bassa in altezza. 3 o 4 voci tipo; partecipa, dai la tua opinione, comitati, dona ... Tecnica molto usata in home da quasi tutte le campagne americane
05/01/2014
Ferruccio Piazzoni
23
Next Steps •
•
•
Tenendo conto di quanto detto sin qui , GG per Bergamo non puó, non vuole e non deve modificare i CSS: la comunicazione multimediale è un mestiere per team multidisciplinari, la programmazione non è il nostro , deve essere fatto ( come tutti i mestieri) da chi lo sa fare bene, lo ha già fatto, ne ha padronanza ed è uno specialista della piattaforma e dei linguaggi usati. Lo scopo è mettere in condizione noi che ci occupiamo di visual, comunicazione e interattività di essere operativamente autonomi [SLA] 24ore su 24, 365 giorni all’anno Le modifiche al CSS: vengono fatte da Zodiak che deve definire tempi e costi compatibili con le fasi del ns. progetto e consentendo di valutare gli investimenti che vale la pena di fare Nessuna delle features pre-viste [ giá note) sembra impossibile, in questa piattaforma possono essere interfacciate le altre Applicazioni che fosse necessario gestire nel frame del sito [ DB, Sondaggi e Mappe interattive].
05/01/2014
Ferruccio Piazzoni
24
Risorse disponibili, vincoli e opportunitá • In termini di budget, tempi e competenze. – Redazione professionale [+ volontari e stagisti ] – Social Media Marketing può essere adottato in rapporto con risorse professionali che “formano” GG per Bergamo affinché da soli si riesca a gestire post, interazioni, commenti e tutte le altre attività legate ai social network, consegnando~- a regime - un piano editoriale e delle linee guida da seguire (cosa pubblicare, dove, come e quando). Chiediamo che questa attività sia svolta dapprima come coaching , in seguito come supervisoring. Obiettivo minimizzare i costi di gestione della Campagna di Social Media Marketing mantenendo qualità ed efficacia. – Campagne PPC , DEM e su Google AdWords. La Gestione Integrata è di assoluta importanza. Non ci sono competenze specifiche che «GG per Bergamo» può adoperare o apprendere in breve tempo tramite scarne linee guida. E’ fondamentale l’esperienza e la conoscenza della piattaforma e di tutte le sue tecniche avanzate, possibile solo ad esperti del settore
05/01/2014
Ferruccio Piazzoni
25
Installazione e configurazione In sede di analisi preliminare al contratto e ai fini della preventivazione occorre definire: Dove sará in hosting il sito Valutare il supporto che il provider ci fornisce “GG per Bergamo” desidera che ogni step sia sul sito online in visione ristretta (status: coming soon o simili in uso dalla piattaforma Wordpress)
05/01/2014
Ferruccio Piazzoni
26
La redazione - scheda • E’ um team professionale coordinato da GG e FP • E’ costituita da volontari e stagisti • E’ disponibile 7 per 24
• Della Redazione fanno parte anche i collaboratori che curano oggi le pagine dei Social ( Facebook-Twitter e….) • Alla redazione vengono forniti tutti i materiali da pubblicare sul sito • Reporter Elezioni, l’autista-Jolly che accompagna Giorgio ovunque, tutti i giorni, e tra l’altro invia materiali in tempo reale- Risponde a… Cristophe , che predispone calendario eventi, entro il giorno 8.1 almeno sino al 12 .1 [ caso contrario FP predispone testi indolori pubblicabili qui: http://www.goriperbergamo.it/oggi/
05/01/2014
Ferruccio Piazzoni
27