5 B
Progettazione di un sito web
5 B 2015-2016
Trillini Leonardo 12/12/2015
Progettazione di un sito web Pagina 2
Sommario
1. Definizione del progetto ... 3 2. Avvio ... 3-4-5-6 3. Pianificazione ... 6-7-8-9-10-11-12 4. Esecuzione ... 12-13 5. Controllo ... 13 6. Chiusura ... 13 7. Idee per il layout ... 13-14-15
Progettazione di un sito web Pagina 3
1. Definizione del progetto
Dopo aver studiato in classe differenti metodologie per l’organizzazione di un progetto, applico le conoscenze acquisite per pianificare al meglio la creazione di un sito web.
Lo scopo del progetto è infatti quello di realizzare un sito web dall’interfaccia grafica accattivante e coinvolgente, che possa catalogare e organizzare in maniera consona ed adeguata tutto il materiale prodotto durante il corso dell’anno scolastico nelle differenti discipline (libri digitali, file di gruppo ecc.).
Pur essendo io sia cliente che produttore, nelle fasi successive ho previsto la divisione per ruoli e per ore del lavoro, andando ad analizzare ciascuna attività nel dettaglio. Ho scelto questo tipo di approccio perché pur trattandosi di una realizzazione figurata (nella realtà il cliente ed il/i produttore/i sono differenti) si avvicina molto ad una normale situazione di sviluppo di un progetto nella realtà.
2. Avvio
La fase di avvio è caratterizzata dallo sviluppo dell’idea iniziale, ovvero di come poter presentare al meglio il lavoro svolto nel corso dell’anno scolastico e se stessi attraverso il sito.
Per questa fase ho deciso di prevedere solamente una giornata in quanto, pur essendo una parte molto importante, tutte le idee verranno analizzate e sviluppate più nel dettaglio successivamente. Nonostante ciò, questa fase non va trascurata. Ho infatti deciso di realizzare un questionario, che possa permettermi di capire fino in fondo cosa devo effettivamente realizzare. Tale questionario mi consente di stabilire il target, che cosa proporre al target prestabilito, come dimostrare che ciò che si propone è valido e quale è il concetto chiave che deve essere trasmesso.
E’ evidente dunque che sia fondamentale capire effettivamente cosa si debba realizzare e in che modo lo si debba fare. Capire ciò che il cliente vuole è il primo grande passo per organizzare il lavoro e per realizzare un progetto attinente, affascinante e che possa soddisfare appieno chi lo ha commissionato.
Progettazione di un sito web Pagina 4 Domande
Risposte
Chi: Qual è il target a cui ci si vuole rivolgere ?
Che cosa: Che cosa si propone al target ? Quale è l’offerta ?
Come: Come si può dimostrare che l’offerta è valida ? Quali sono le prove ?
Punti chiave:
Qual è il concetto
chiave da
comunicare al target ?
Il sito è rivolto agli studenti alla ricerca di materiale scolastico
correttamente
prodotto e
rielaborato, ma è anche rivolto ai docenti e ai professori, che potrebbero
facilmente
consultarlo in qualsiasi momento.
Al target viene proposto un sito user friendly, facilmente consultabile ed intuitivo. Oltre a ciò viene proposto del materiale prodotto da una quinta durante l’anno scolastico, e dunque utile a tutti i prossimi maturandi e non solo.
L’offerta è valida per il semplice fatto che tutto il materiale prodotto durante il corso dell’anno è stato realizzato sotto la supervisione dei docenti. Dunque i vari file e libri digitali sono stati prodotto, modificati e corretti e ricaricati.
Ovviamente la versione caricata nel sito è quella
corretta e
definitiva.
I punti chiave del sito sono la semplicità dello stesso e la correttezza del materiale
caricato. Un design minimale ma intrigante rende dunque facilmente
consultabile il website, ed il materiale
scaricabile gratuitamente risulta
vantaggioso per i visitatori.
Oltre al questionario, per delineare le caratteristiche base del progetto sviluppo il Project Charter, documento breve e sintetico.
Progetto : Sito web Codice Progetto : WB001
Data : 12/12/2015 Revisione : 0
Cliente : Trillini Leonardo Sponsor : I.T.I.S. G. Marconi Jesi
Progettazione di un sito web Pagina 5 1. OBIETTIVI
Lo scopo del progetto è quello di realizzare un sito web dall’interfaccia grafica accattivante e coinvolgente, che possa catalogare e organizzare in maniera consona ed adeguata tutto il materiale prodotto durante il corso dell’anno scolastico nelle differenti discipline (libri digitali, file di gruppo ecc.).
2. PRINCIPALI DELIVERABLE
Definizione dell’obbiettivo Pianificazione del lavoro Pianificazione sito
Pianificazione ambiente di sviluppo Pianificazione piattaforma di hosting
Esecuzione sito (stesura codice corretto, realizzazione design, upload materiale) Controllo errori
3. MILESTONE
Progetto sito web
4. VINCOLI E DIPENDENZE
Ultima versione software ambiente di sviluppo 5. TEMPISTICA PRELIMINARE
Il progetto è stato assegnato a ciascun alunno della classe 5°B all’inizio dell’anno scolastico, il 12/09/2015. Tale progetto dovrà essere terminato entro l’inizio dell’esame di stato, possibilmente entro la fine di aprile.
6. PRINCIPALI RISORSE E LIMITI DI COSTO
Le risorse principali per la realizzazione del progetto sono:
PC
Ambiente di sviluppo
Connessione ad Internet
Conoscenze personali
Non sono presenti costi. L’unica cosa che potrebbe richiedere una spesa è l’hosting del sito su Internet.
7. STRUTTURA ORGANIZZATIVA
Progettazione di un sito web Pagina 6 Project Manager del progetto sarà l’alunno Trillini Leonardo.
Il team di progetto sarà costituito da altre due persone, il programmatore Trillini Leonardo e il Web Designer Trillini Leonardo.
8. AUTORIZZAZIONE
Approvato da : Fabbracci Luca Data : 12/12/2015
3. Pianificazione
Per la fase di pianificazione mi avvalgo dapprima del PMBOK, che mi consente di fare una panoramica generale di tutte le attività da svolgere; successivamente di altri diagrammi, quali WBS, PDM e GANT, per individuare ed analizzare le differenti attività da realizzare ad ogni fase. Oltre ad essi, per individuare i differenti ruoli, utilizzerò la matrice delle responsabilità di tipo RACI.
GRUPPI DI PROCESSO
AREE DI
CONOSCENZA Avvio Pianificazione Esecuzione Controllo Chiusura INTEGRAZIONE Sviluppo dell’idea
iniziale (Stesura questionario e
realizzazione Project Charter)
Sviluppare piano lavorativo;
individuare le attività da svolgere
Realizzare il sito seguendo le attività prefissate
Ottimizzare codice e rilevare eventuali errori
Chiusura del progetto;
Hostare il sito
SCOPO Documentarsi
Al meglio per La creazione del sito
Realizzazione di
WBS, PDM, GANT Verificare
corretto
“funzionamento”
del sito
TEMPI Rispettare
tempi stimati Stima delle tempistiche per ciascuna
attività(GANT)
Rispettare
tempi stimati Rispettare tempi
stimati Rispettare
tempi stimati
Progettazione di un sito web Pagina 7 COSTI
RISCHI Individuare
possibili rischi Controllare
eventuali
problematiche e risolverle
QUALITA’ Pianificare la
qualità Verificare
qualità design e codice
RISORSE UMANE Me stesso
Me stesso (Realizzazione
schema RACI) Me stesso Me stesso Me stesso
COMUNICAZIONI
ACQUISTI
Dopo aver realizzato il PMBOK, passo alla stesura della WBS (Work Breakdown Structure) per individuare più nel dettaglio tutte le attività da svolgere per ciascuna fase.
Progettazione di un sito web Pagina 8 Dalla struttura WBS può essere estratta successivamente la lista delle attività.
Progetto : Sito web Codice Progetto : WB001
Data : 12/12/2015 Revisione : 0
Cliente : Trillini Leonardo Sponsor : I.T.I.S. G. Marconi Jesi
WBS DESCRIZIONE
1-AVVIO
1.1 Sviluppo idea iniziale (Stesura Project Charter e
realizzazione questionario) 2-PIANIFICAZIONE
2.1 Progettazione sito
2.2 Scelta ambiente di sviluppo adeguato
2.3 Scelta piattaforma di hosting
3-ESECUZIONE
Progettazione di un sito web Pagina 9
3.1 Stesura codice corretto
3.2 Realizzazione design accattivante e coinvolgente
3.3 Caricamento del materiale
4-CONTROLLO
4.1 Ottimizzazione codice
4.2 Rilevamento eventuali errori
5-CHIUSURA
5.1 Hostare sito
A questo punto stabilisco la durata di ciascuna attività precedentemente descritta attraverso il PDM. Utilizzo tale diagramma per riportare l’ordine con cui esse devono essere svolte e per stimare (in giorni) la durata dello svolgimento di ciascuna di esse.
Stabilita la data d’inizio del progetto, sarà possibile rappresentare la durata delle differenti attività con il diagramma di Gant (Essendo molto esteso, allego file con diagramma completo, per una visualizzazione unitaria).
Progettazione di un sito web Pagina 10 Risorse umane (Matrice delle responsabilità RACI)
Ruoli dell’organigramma
Attività PM(Project Manager) Programmatore Web Designer
Presentarsi attraverso il
progetto
A/R C
Progettazione sito
web I R R
Scelta ambiente di
sviluppo I R I
Stesura codice
corretto I R R
Realizzazione
design I I/R R
Scelta piattaforma
hosting I R I
Caricamento I R
Progettazione di un sito web Pagina 11 materiale
Ottimizzazione codice e
rilevamento errori I R
Hostare sito I R
Per questo progetto ciascun ruolo verrà assunto dallo studente che sviluppa il sito.
Ho deciso di individuare tre ruoli fondamentali :
Project Manager : Responsabile unico della pianificazione, valutazione, realizzazione e controllo del progetto.
Programmatore : Il programmatore ha il ruolo di tecnico all’interno del progetto. Tale figura partecipa all’analisi per la realizzazione del sito e ha il compito di realizzarlo scrivendo correttamente il codice.
Web Designer : Altra figura “tecnica” che deve affiancare il programmatore, sviluppando in particolare la parte grafica del sito web.
E’ inoltre evidente che in questo caso la realizzazione del progetto non richieda dei costi, in quanto io sono sia cliente che produttore; l’unica cosa che potrebbe richiedere una spesa è l’hosting del sito web su internet. I software e le attrezzature di cui sono già in possesso sono adeguate per la creazione del sito. Tali attrezzature, identificabili come risorse sono :
Laptop
Microsoft Expression Web 4 (Possibile ambiente di sviluppo)
Google Chrome (Per effettuare ricerche)
Collegamento ad Internet
Conoscenze personali
Il Laptop a mia disposizione ha buoni requisiti hardware; grazie ad esso posso realizzare il sito senza particolari problematiche.
Expression Web 4, ambiente di sviluppo studiato a scuola, potrebbe essere il software adeguato per la stesura del codice e la realizzazione del sito. (E’ comunque prevista, come precedentemente indicato, una fase di analisi per la scelta del miglior ambiente di sviluppo).
Google Chrome, per ricerche da effettuare su internet. Esso è senza dubbio il browser più veloce e leggero.
Progettazione di un sito web Pagina 12
4. Esecuzione
A questo punto procedo con la realizzazione del sito. Per fare ciò dovrò tenere conto di tutte le attività, delle tempistiche, dei ruoli e delle risorse precedentemente definiti. E’
chiaro che l’esecuzione sia la fase più importante. Grazie ad essa è infatti possibile realizzare materialmente ciò che finora è stato “solamente” pianificato. E’ altrettanto ovvio che la grande importanza attribuibile a questa fase è dettata da tutto il lavoro precedentemente svolto. Se si realizzasse un progetto senza pianificazione e progettazione, tutto il lavoro potrebbe essere riassunto con una semplice definizione :
“Andare per tentativi”. Nonostante tutto il lavoro precedentemente svolto, nella fase di esecuzioni potrebbero chiaramente manifestarsi imprevisti, potrebbe capitare che alcune parti richiedano maggior elaborazione di quanto ci si aspettasse in precedenza.
La pianificazione è essenziale ma non si riesce a prevedere tutto prima di toccare le cose con mano. Ecco perché è necessario seguire questa fase rispettando il piano precedente, adattandolo però al contesto e alle problematiche che potrebbero man mano verificarsi. Occorre perciò una pianificazione nella pianificazione, le risorse devono essere ottimizzate per l’attività da svolgere.
Inoltre devono essere ben chiare le richieste del committente, altrimenti rischierei di realizzare qualcosa che il cliente non vuole. In questo caso non dovrebbero esserci problemi, in quanto io sono sia cliente che esecutore materiale del progetto, oltre che pianificatore.
Per realizzare il sito dovrò quindi procedere alla stesura del codice, alla realizzazione di un design accattivante e coinvolgente e al caricamento del materiale. Dovrò quindi rispettare le attività descritte precedentemente nella fase di pianificazione. In questo caso sorge una problematica. Per creare un sito che rispetti tali parametri, occorre un’ottima conoscenza di alcuni linguaggi, quali html, css, php. Tali linguaggi non sono stati trattati così approfonditamente a scuola. Le soluzioni per ovviare a questo problema sono sostanzialmente due :
Utilizzo di piattaforme che propongono siti già realizzati
Utilizzo di fogli di stile
La prima soluzione è nettamente la più facile, tuttavia non mi permetterebbe di realizzare un sito ottimizzato secondo i parametri precedentemente stabiliti. Inoltre tale soluzione richiede basse conoscenze, e dunque non metterebbe in risalto quanto è stato appreso durante l’anno scolastico.
Dopo un’attenta analisi scelgo dunque di avvalermi dei fogli di stile, che potranno permettermi di avere un aiuto (relativamente alla parte grafica). In questo modo mi è possibile ottimizzare i tempi raggiungendo comunque un risultato finale notevole.
Progettazione di un sito web Pagina 13
5. Controllo
Lo scopo di questa fase è quello di verificare se finora, tutto il lavoro svolto, è stato eseguito in maniera corretta. E’ dunque una fase assolutamente necessaria, perché se fossero presenti degli errori dei quali prima non ci si è accorti, si avrebbe la possibilità di eliminarli. Procedo dunque con il controllo dell’ottimizzazione del codice, il rilevamento di eventuali errori, ma anche con la verifica della qualità di ciò che è stato realizzato in precedenza, oltre che delle tempistiche.
6. Chiusura
Superato con successo il controllo, resta solamente una cosa da fare, ovvero hostare il sito su internet, per renderlo disponibile ed accessibile a tutti. In questo caso, la soluzione più conveniente, come fatto in passato con altri progetti scolastici, potrebbe essere quella di hostare il website direttamente sul sito della scuola, chiedendo aiuto all’amministratore di rete Vittorio Alfieri. Alternativamente, potrebbe essere scelto un dominio gratuito, come ad esempio altervista. Tramite questo dominio, il sito potrebbe essere ospitato sulla rete senza alcuna spesa.
7. Idee per il layout
Nonostante abbia già previsto la progettazione del layout del sito nella fase della pianificazione, vorrei comunque presentare un’idea di come potrebbe essere strutturato.
La parte grafica ha grande importanza per coinvolgere lo spettatore e per “vendersi”
bene agli altri. E’ dunque necessario come già detto nell’introduzione che il sito piaccia sin dalla prima occhiata e per far ciò si ha bisogno di uno stile minimale che possa però ben impressionare.
Dopo aver consultato i siti più belli dal punto di vista del design (Apple, Samsung, Huawei ecc.), ho individuato un template in particolare che rispetta i canoni da me ricercati :
Progettazione di un sito web Pagina 14 La home ha uno stile ricercato e semplice. In basso a sinistra sono presenti delle frecce per scorrere manualmente le 4 foto caricabili e visualizzabili a schermo intero. Una cosa molto importante è che la homepage è a scorrimento. Eseguendo infatti uno scroll verso il basso, sarà possibile iniziare la navigazione vera e propria e la ricerca delle informazioni o, in questo caso, del materiale caricato.
Come visibile in foto, è apparsa anche la barra di ricerca. Essa appare semplicemente scendendo verso il basso, esplorando la pagina ed i suoi contenuti. L’idea di base è quella di seguire quanto proposto in figura, creando un menu semplice ed intuitivo come quello presente sulla sinistra, in cui verrà data la possibilità di selezionare la materia.
Successivamente apparirà sulla destra tutto il materiale relativo ad essa, catalogato in ordine cronologico. Si partirà dunque dal primo argomento svolto durante l’anno scolastico fino ad arrivare all’ultimo.
Progettazione di un sito web Pagina 15 Sarà infine presente una sezione con una breve descrizione di me stesso, di ciò che faccio nella vita, insomma della persona che sono.
AUTORE Trillini Leonardo
