Sviluppo Sito Web con Drupal

Polimarche Racing Team

Relazione sullo sviluppo del sito web

Tirocinante: Scafetta Nicola
Tutor: Prof. Cucchiarelli Alessandro

Introduzione

Il progetto descritto in questa relazione ha come obiettivo finale la realizzazione di un sito web tramite un CMS (Content Management System) open source con lo scopo finale di far conoscere la Polimarche Racing Team, di cui sono componente, non solo nell’ambito universitario, ma anche al mondo esterno, nella competizione FORMULA SAE.

La Formula SAE è una competizione tra studenti universitari organizzata dalla Society of Automotive Engineers (SAE) che prevede la progettazione e la produzione di un’auto da corsa, valutata durante una serie di prove in base alle sue qualità di design e di efficienza ingegneristica.

Scelta del CMS

Nella ricerca di una soluzione a ciò si è subito pensato all’utilizzo di un CMS: Drupal, Wordpress, Joomla, etc. Questi strumenti software, installati su server web, facilitano la gestione di siti web, svincolando il webmaster da conoscenze specifiche di programmazione web.

Il CMS è uno strumento usato dai webmaster per gestire un sito web evitando di dover programmare dinamicamente l'intero software lato server che gestisce il sito. Generalmente offre un'interfaccia di amministrazione con cui l'amministratore può gestire ogni aspetto del sito, senza il bisogno di possedere conoscenze tecniche particolari di programmazione web.

Esistono CMS specializzati, cioè appositamente progettati per un tipo preciso di contenuti (un'enciclopedia online, un blog, un forum, una rivista, ecc.) e CMS generici, che tendono a essere più flessibili per consentire la pubblicazione di diversi tipi di contenuti.

Tecnicamente, un CMS è un'applicazione lato server che si appoggia su un database preesistente per lo stoccaggio dei contenuti. L'applicazione è suddivisa in due parti:

• Amministrazione - una sezione di (back end), che serve ad organizzare e supervisionare la produzione dei contenuti;
• Applicativa - una sezione (front end), che l'utente web usa per fruire dei contenuti e delle applicazioni del sito.

L'amministratore del CMS gestisce dal proprio terminale, tramite un pannello di interfaccia e controllo, i contenuti da inserire o modificare. La scelta è caduta su Drupal per la sua facilità d’uso e per la capacità di realizzare siti di qualunque tipologia e complessità utilizzando i moduli opportuni.

Il sito avrà un’interfaccia il più semplice possibile in modo da mettere a proprio agio i visitatori, per una semplice visione, e i gestori per una migliore gestibilità del sito. Questa relazione viene suddivisa, per facilitarne la visione, in due capitoli:

• Nel primo capitolo verranno spiegati i requisiti necessari del sito.
• Nel secondo capitolo sono introdotte le parti che compongono il sito suddiviso per pagine in base alle richieste specifiche del team.

Capitolo 1: Requisiti del sito

Affrontare il problema

Il processo per lo sviluppo del sito è stato affrontato visionando videotutorial reperiti su internet su siti anche specifici dell’argomento, e consultando forum e manuali di utilizzo dello strumento. Tutto il processo di sviluppo si è svolto con un metodo passo-passo in modo che ogni componente che si andava ad inserire combaciasse al meglio all’interno del portale web.

L'ideazione

“L’ideazione è il breve passo iniziale che permette di stabilire una visione comune e una portata di base per il progetto”. Definire la visione e ottenere l’ordine di grandezza della stima, richiede un po’ di esplorazione dei requisiti. Tuttavia, lo scopo della fase di ideazione, non è quello di definire tutti i requisiti né di generare una stima o un piano di progetto credibile.

L’idea è quella di effettuare un’indagine sufficiente per formarsi un’opinione razionale e giustificabile sull’obiettivo generale e sulla fattibilità. L’obiettivo finale del progetto è quello di fornire una vetrina al team.

Requisiti

Il sito è stato realizzato seguendo concetti fondamentali come:

• Funzionalità - Il portale deve avere e mantenere i dati sempre disponibili.
• Usabilità - Il portale deve essere facile ed intuitivo da navigare.
• Affidabilità - I dati contenuti devono essere sempre aggiornati e sicuri.
• Prestazioni - Le pagine sono state costruite il più leggere e veloci possibili.
• Interfaccia - Il sito è consultabile da qualsiasi computer connesso ad una rete internet.

Richieste

Le caratteristiche del sito a me richiesto dal Team è stato sintetizzato in pagine ed elementi sotto elencati:

• Home Page
• Pagina con descrizione del mezzo da competizione
• Pagina dei contatti
• Pagina degli sponsor
• Pagina con descrizione del Team di lavoro
• Pagina degli eventi
• Galleria Immagini con possibilità di suddivisione in album
• Forum di discussione
• Widgets di scelta rapida: Eventi, Gallery, Polimarche Team, Car, Team Sponsor, Contatti, Forum

Layout

L’immediatezza e la praticità sono alla base del sito, quindi si è optato per un layout classico, semplice ma efficace. Le pagine sono composte da uno sfondo statico dove al suo interno si trova il corpo centrale del sito suddiviso in 2 colonne (corpo e widgets).

Nel corpo dei contenuti vengono visualizzati i contenuti corrispondenti alla pagina o widget selezionati, mentre nella colonna dei widgets vengono visualizzati i seguenti widgets:

• Youtube che mostra un video del canale del Team
• Iscrizioni alle gare a cui il team partecipa
• Eventi del team (ogni evento presente è un ancora al contenuto dell’evento stesso)
• Competizione è un ancora alla descrizione della competizione (presente anche nel footer)
• Social con i collegamenti alle pagine sui social network

Il corpo centrale è sormontato dal logo del Team (in alto a sinistra) che rappresenta un’ancora alla home e dal logo dell’Università (in alto a destra), anch’esso un’ancora che rimanda al sito istituzionale dell’Università. Sotto i loghi si trova la barra di navigazione con i collegamenti alle varie pagine del portale. Solo nella home non è presente questa suddivisione perché sostituita da uno slideshow di immagini non cliccabili.

Il tema adottato è Blue Masters, un tema responsive basato sul template Blue Masters PSD. Sono state apportate modifiche strutturali rispetto al tema originale (inserimento del logo dell’Università, eliminazione di componenti non utili all’obiettivo) per rendere il sito più coincidente alle aspettative del Team.

I layout sono inseriti in 2 file: page-front.tpl e page.tpl nella cartella Bluemasters. Il primo si riferisce alla home mentre il secondo è per le altre pagine.

Caratteri e colori

Il carattere standard utilizzato all’interno del sito è Arial in tutti i suoi formati (grassetto, normale, corsivo) nel colore bianco per i contenuti e nel colore azzurro per i collegamenti. Il menù principale è composto da 8 tasti rettangolari, con angoli smussati di colore azzurro con scritte interne di colore bianco, che permettono il collegamento alle sezioni principali del sito.