Che materia stai cercando?

Sviluppo Sito Web con Drupal

Appunti con tesi finale su tirocinio svolto per la realizzazione di un sito web utilizzando il CMS Drupal basati su appunti personali del publisher presi alle lezioni del prof. Cucchiarelli dell’università degli Studi Politecnico delle Marche - Univpm. Scarica il file in formato PDF!

Esame di Tecnologie web docente Prof. A. Cucchiarelli

Anteprima

ESTRATTO DOCUMENTO

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 un sfondo statico dove al suo interno si trova il

contenuti widgets).

corpo centrale del sito suddiviso in 2 colonne (corpo e

corpo dei contenuti

Nel vengono visualizzati i contenuti corrispondenti

widgets

alla pagina o widget selezionati, mentre nella colonna dei vengono

visualizzati i seguenti widgets:

- che mostra un video Youtube del canale del Team

Youtube

- alle gare a cui il team partecipa

Iscrizioni

- del team (ogni evento presente è un ancora al contenuto

Eventi

dell’evento stesso)

- è un ancora alla descrizione della competizione (presente

Competizione

anche nel footer)

- con i collegamenti alle pagine sui social network.

Social

Il corpo centrale è sormontato dal (in alto a sinistra) che

logo del Team

rappresenta un’ancora alla home e dal (in alto a

logo dell’ Università

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 , 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: e nella cartella

page-front.tpl page.tpl

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 rettangoli, con angoli smussati di

colore azzurro con scritte interne di colore bianco, che permettono il

collegamento ai contenuti delle relative pagine.

Questi colori sono stati scelti per dare una maggiore leggibilità e vengono

ripetuti all’interno di tutte le pagine . 6

Sfondo

Per lo sfondo si è optato per una soluzione con effetto carbonio, in

considerazione del fatto che questo materiale viene largamente utilizzato

nel mondo automobilistico.

Esso è stato suddiviso in 3 livelli:

Livello 1:

- texture a trame larghe contenuta nel file Sfondo.gif di

dimensioni 16x9 pixel ripetute in orizzontale e verticale per tutta la

dimensione della pagina . Essa è stata disegnata con il software di

elaborazioni di immagini Photoshop utilizzando una paletta colori in toni

di grigio.

Livello 2:

- texture, nativa del tema adottato, denominata Home-Block-

Box-Bg.png di dimensione 50x50 pixel ripetuta in orizzontale e verticale

per tutta la grandezza del corpo centrale. Essa presenta un padding di 10

pixel in tutte le direzioni in modo da creare un effetto cornice rispetto al

livello successivo .

Livello

- 3: texture a trame fitte (non presente nella home) contenuta nel file

Contenuti.jpg di dimensione 1200x297 pixel, ma riadattata per essere

contenuta all’interno del corpo centrale, ripetuta in verticale in tutta la

lunghezza delle varie pagine.

Footer

Il fondo di ogni pagina è suddiviso in 2 footer:

- in quello superiore (di colore blu) ci sono gli sponsor principali del team.

Essi sono disposti in un blocco a dimensione fissa (960 pixel) al cui interno

sono inseriti i loghi aventi dimensione 115x60 pixel circa. Sono disposti in

maniera orizzontale fino alla dimensione massima con possibilità di

formare un nuovo livello in caso di un numero maggiore di loghi.

- in quello inferiore (di colore nero) si trovano le informazioni

dell’università e vari collegamenti utili (login, informativa sulla privacy,

etc).

Editor dei contenuti

L’editor utilizzato per la creazione dei contenuti è il plugin del modulo

Wysiwyg (modulo che permette la creazione dei contenuti utilizzando

editor lato utente) denominato CKEditor.

All’interno di esso sono presenti le tipiche funzioni per l’inserimento di

testi, immagini e collegamenti vari, inoltre permette la visualizzazione del

codice sorgente dei contenuti in lavorazione.

Tutti i contenuti creati vengono visti come Full HTML (indirizzi web ed

email vengono trasformati in link automaticamente, linee e paragrafi

vanno a capo automaticamente, etc). 7

8

SCREENSHOT DI UNA PAGINA 9

CAPITOLO 2

Composizione del Sito 10

Si è scelto di dividere il tutto in pagine più sezioni per widget

nove due

e footer in maniera che ogni aspetto (tecnico e non), che il Team voleva

mettere in evidenza, abbia una sezione apposita.

La suddivisione adottata è la seguente:

- HOME

- CAR

- GALLERY

- EVENTI

- CONTATTI

- TEAM

- FORUM

- SPONSOR

- LOGIN

- WIDGETS

-FOOTER 11

HOME

Come detto nel capitolo del layout, la homepage presenta una struttura che

si differenzia dalle altre pagine presenti nel sito perchè nella parte centrale

ha uno slideshow che occupa l’intera dimensione del corpo centrale. Lo

slideshow era già compreso nel template originale e non è stato modificato

strutturalmente. All’interno dello slideshow sono presenti 5 immagini che

si ripetono in sequenza casuale ad intervalli regolari con un’ effetto

dissolvenza tra una diapositiva e la successiva.

La soluzione adottata rispetta i requisiti imposti e presenta all’interno dello

slideshow il contesto del lavoro del team. Le immagini inserite nello

slideshow sono modificabili direttamente da remoto accedendo alla

cartella del server Slideshow e mantenendo la stessa nomenclatura

adottata all’interno della stessa. Questo è dovuto al fatto che i nomi scelti

per le 5 immagini sono stati inseriti direttamente nel codice html della

pagina home denominata page-front.tpl all’interno della cartella

sites/all/themes/bluemasters. Il numero e il nome delle immagini può

essere modificato andando a modificare il codice html. Le immagini per

una visualizzazione ottimale devono avere una risoluzione di 930x320 px. 12

CAR

La pagina CAR presenta quelle che sono le caratteristiche della vettura che

andrà a competere nelle prove della Formula SAE.

Queste informazioni, correlate anche di immagini che rappresentano la

sezione corrispondente per una rapida ricerca, sono state editate

utilizzando una tabella suddivisa in 2 colonne: nella prima sono state

inseriti i campi delle specifiche (motore, elettronica, etc), mentre nella

seconda le soluzioni adottate dal team. 13

14

GALLERY

In questa pagina sono presenti tutte le foto del team suddivise in album con

Titolo e anteprima sviluppata con uno slideshow che mostra le prime 10

foto contenute all’interno dell’album stesso.

L’implementazione della galleria è una view di drupal, ovvero un

raccoglitore di specifici tipi di contenuti che si possono creare assegnando

agli stessi dei campi (titolo, immagini da inserire,url, etc).

La view implementata permette di impostare la visualizzazione dei

contenuti di tipo Album (appositamente creata con i campi immagini e

titolo dell’album) come una griglia di contenuti ovvero una griglia dove

vengono racchiusi i contenuti del tipo.

Cliccando sull’album desiderato all’interno della pagina, si accede ad una

pagina dove sono contenute le foto dell’album selezionato. Infatti un

album è costituito da una raccolta di immagini. Le immagini presenti

all’interno dell’album vengono mostrate in una galleria di immagini

implementata con una galleria jQuery che permette la visualizzazione

dell’immagine selezionata in basso (dove vengono mostrate tutte le

immagini presenti all’interno dell’album suddivise in blocchi da 4

immagini) in una finestra più ampia.

Inoltre c’è la possibilità di ingrandire ulteriormente le immagini cliccando

sulla lente di ingrandimento utilizzando un modulo di Drupal chiamato

Colorbox che funge da visualizzatore di immagini in overload sulla pagina

corrente, molto simile a Lightbox.

Una volta che l’immagine è aperta in overload, è possibile navigare

all’interno dell’album scorrendo le immagini con le frecce della finestra in

overload.

Come detto precedentemente, è stato creato un tipo di contenuto specifico

per gli album, chiamato appunto Album.

Esso è costituito dai campi Foto (chiamato con il plurale perché permette

l’inserimento appunto di molteplici immagini) e del campo Nome

dell’album.

Una volta caricate le immagini dell’album, il contenuto creato può essere

salvato e in automatico inserito all’interno della vista della pagina con tutti

gli accorgimenti visti prima. 15

Le immagini degli album vengono tutte portate ad una dimensione

prestabilita, grazie all’impostazione del modulo Image che ci permette di

creare degli stili per le immagini, denominata galleryformatter (dal

modulo dipendente) e trasforma le immagini in 500x312 px in modo da

uniformarle tra di loro.

Le immagini che appaiono quando clicchiamo sulla lente vengono portate

in un’altro stile per le immagini chiamato image_slideshow che le

trasforma in 640x480 px.

Per la creazione è necessario impostare l’url dell’album in modo che esso

risulti .../content/url. 16

Pagina ottenura cliccando sull’album nella pagina Gallery.

Cliccando sulla lente si ottiene un visualizzatore di immagini in overload 17

EVENTI

In questa pagina vengono visualizzati gli eventi e news del Team.

La visualizzazione delle news avviene in due posizioni:

-nel con una vista

corpo dei contenuti

-nella con un blocco

colonna dei widgets

La vista nel è stata implementata come una lista di

corpo dei contenuti

contenuti, di tipo Eventi, ordinati in modo che l’ultimo inserito diventi il

primo della lista (ordinamento LIFO).

Ogni elemento della lista rappresenta un’ancora alla pagina del contenuto

degli eventi comprendente testo ed immagini .

La vista presente permette la visualizzazione di un numero prefissato di

eventi (10 elementi per pagina). In caso di un numero maggiore di elementi

viene creata un’ ulteriore pagina raggiungibile dalla barra inferiore che si

crea in automatico con il numero di pagine degli eventi.

Nel blocco degli eventi nella esso è ancora una lista

colonna dei widgets,

di contenuti, ordinati nello stesso modo, che fanno da ancore agli stessi

contenuti indirizzati dalle ancore della vista nel corpo dei contenuti.

A differenza della vista, nel blocco vengono visualizzati solo 3 eventi (gli

ultimi 3 inseriti) in maniera da individuare subito quali sono gli ultimi

eventi o news rilasciate dal team.

Per rendere in modo più semplice la creazione di un nuovo evento, è stato

Eventi.

realizzato un tipo di contenuto apposito chiamato

I campi presenti nel tipo di contenuto sono:

- (campo obbligatorio)

Titolo

- (indirizzo della pagina)

Url

- (contenuto dell’evento)

Body

Per default, sono impostati gli Url automatici, cioè vengono generati

indirizzi automatici del tipo ...univpm.it/content/titolo.

Per ovviare a ciò, è possibile spuntare la casella url automatici e scrivere lo

stesso Url inserito nel campo url (campo non obbligatorio) in modo da

rendere l’url squadracorse.univpm.it/url. 18

Pagina eventi

Cliccando su un elemento della lista andiamo al contenuto

dell’evento selezionato 19

CONTATTI

In questa pagina vengono visualizzati i contatti del team. Questa pagina è

raggiungibile in due modi: dal menù di navigazione e dall’ancora posta in

basso alla pagina (sopra le info dell’Università). Essi sono stati inseriti

direttamente nel body (corpo) della pagina tramite l’editor dei contenuti

predefinito. Nel campo dell’email è presente un’ancora con funzione

emailto diretta all’email del team per una veloce comunicazione. 20

SPONSOR

In questa pagina vengono mostrati gli sponsor del Team.

La visualizzazione è stata implementata come una griglia di contenuti

suddivisa in 2 colonne.

Per facilitarne l’inserimento, sono stati definiti con un tipo di contenuto

denominato Sponsor.

apposito

Questo tipo di contenuto contiene i seguenti campi: Nome sponsor e

Immagine del logo.

Gli sponsor hanno una dimensione prefissata in modo da avere una

visibilità ottimale.

Per evidenziarli ulteriormente è possibile cliccarci sopra e apparirà una

finestra in overload come nelle foto, però non è navigabile perché ogni

sponsor è un contenuto a se stante. contenuti inseriti

A differenza delle altre viste, questa visualizza tutti i

nella stessa pagina.

Parte di questi sponsor, ovvero i partner principali, vengono riportati

anche nel blocco degli sponsor posizionato nel footer superiore

presente in tutte le pagine.

Blocco degli sponsor

sulla Homepage 21


PAGINE

37

PESO

24.69 MB

PUBBLICATO

+1 anno fa


DETTAGLI
Corso di laurea: Corso di laurea in ingegneria informatica e dell'automazione
SSD:

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher sgorbius90 di informazioni apprese con la frequenza delle lezioni di Tecnologie web e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Politecnico delle Marche - Univpm o del prof Cucchiarelli Alessandro.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Corso di laurea in ingegneria informatica e dell'automazione

Riassunto esame Fondamenti di Informatica, prof. Dragoni, libro consigliato Fondamenti di Programmazione in C++ di Aguilar
Appunto
Informatica - Introduzione
Appunto
Algebra lineare e geometria - spazi vettoriali
Appunto
Riassunto esame Fondamenti di Informatica: Manuale di C/C++, prof. Dragoni
Appunto