DOCUMENTAZIONE SITO LINGUAGGI PER IL WEB I

DOCUMENTAZIONE SITO LINGUAGGI PER
IL WEB I
Sviluppo di un sito statico Html+Css.
A.A. 2010/2011
Daniele Votta: [email protected] http://www.danielevotta.it/
http://blog.danielevotta.it
http://portfolio.danielevotta.it
MATR: 708451
Indice generale
Sviluppo di un sito statico Html+Css.
1. Tipologia di sito.
2. Mappa sito.
2. Scelte progettuali.
3. Certificazioni.
4. Conclusioni.
Anteprima del lavoro svolto:
Documentazione sito Linguaggi per il web I
Daniele Votta: [email protected]
http://www.danielevotta.it/
Sviluppo di un sito statico Html+Css.
MATR: 708451
Tipologia di sito
Il progetto originale prevedeva la realizzazione di un sito per il personal brending. Siccome il
sottoscritto era già in possesso di un sito di questo tipo, si è scelto di variare leggermente il lavoro
commissionato. In particolare si è scelto di creare un portfolio personale, ovvero una raccolta di
lavori effettuati dettagliatamente descritti.
A chi si rivolge il sito?
Il sito in questione si rivolge ad un pubblico di età adulta, molto probabilmente possibili futuri
clienti. Per questo motivo si è cercato nella scelta dei colori e nel design di rendere il tutto il più
elegante e formale. Un utente che si trovasse sul sito in questione dovrebbe aver già ben chiaro chi
sono, di cosa mi occupo e cosa posso offrire, tutto questo grazie al blog dove è possibile reperire
queste informazioni. Come già detto questo sito non è da intendersi come sito di personal brending
ma è da considerarsi come sito finale, nel senso che un possibile utente ci arrivi solamente dopo
essere passato dal blog ed essersi fatto un idea sulla mia persona.
Mappa del sito
La struttura scelta è molto semplice in relazione all'obiettivo da realizzare. La mia idea è stata di
creare una struttura minima di 4 pagine ovvero:
•
Una pagina index.html : Con l'obietivo di accogliere l'utente (anche un utente che arrivasse
per puro caso) e mostrare diverse possibilità di navigazione, mettendo subito in risalto la
possibilità di contattarmi.
•
Una pagina about.html : Con una brevissima descrizione (per le ragioni sopra esposte) e un
form contatti realizzato in php e jQuery. Ovviamente sono stati effettuati tutti gli opportuni
controlli sui campi della form. All'invio di una email l'utente riceve un messaggio di
ringraziamento, come segno di transizione avvenuta correttamente.
•
Una pagina lavori.html : Dove in modo semplice e pulito vengono elencati gli ultimi lavori
in ordine temporale inverso (gli ultimi lavori compaiono per primi). Si è scelto di lasciare
una struttura molto pulita e dare la possibilità all'utente di approfondire (se interessto) grazie
al pulsante “guarda dettagli” a lato di ogni lavoro.
•
Diverse pagine lavoro1.html,...,lavoroN.html : Con l'obiettivo di descrivere dettagliatamente
il lavoro in questione. Si accede a queste pagine grazie al pulsante “guarda dettagli” sopra
citato. Viene ripreso il nome del lavoro, la categoria di appartenenza una descrizione
dettagliata e un certo numero di immagini.
-1-
Documentazione sito Linguaggi per il web I
Daniele Votta: [email protected]
http://www.danielevotta.it/
Sviluppo di un sito statico Html+Css.
MATR: 708451
Graficamente la struttura prende questa forma:
Scelte progettuali
Dimensioni sito:
•
Larghezza : Si è scelta una larghezza (width) di 1000px per adattarsi pressochè a tutte le
risoluzioni in maniera tale che non compaia la barra dello scroll orizzontale nella parte bassa
del sito.
•
Altezza : Varia in base al contenuto della pagina.
Colori:
•
Nero : Si è scelto il nero per lo sfondo.
•
Grigio : Si sono scelte diverse tonalità di grigio per le parti testuali.
Linguaggi utilizzati:
•
Html : Notare che si è voluto dichiarare il doctype del documento con sintassi Html5.
•
Css : Si è utilizzato Css versione 2.1 per la definizione dei fogli di stile
•
Javascript : Si è utilzzata in particolare la libreria javascript jQuery.
•
Php : Si è utilizzato php per l'inoltro delle mail (classi già fatte), sono state solamente
adattate alle mie esigenze.
-2-
Documentazione sito Linguaggi per il web I
Daniele Votta: [email protected]
http://www.danielevotta.it/
Sviluppo di un sito statico Html+Css.
MATR: 708451
Software utilizzati:
•
Adobe Photoshop : Per la definizione di una bozza e la gestione di tutte le immagini.
•
PsPad : Editor per mettere in risalto parti del codice html, css, js, php.
Browser di test principale :
•
Google Chrome e Mozilla Firefox, successivamente ci si è assicurati che non ci fossero
problemi con altri browser.
L'evoluzine del progetto è stata:
–
Prima bozza di mappa mentale.
–
Posizionamento elementi tramite Wireframe.
–
Realizzazione layout con software Photoshop.
–
Implementazione in Html+Css.
–
Debug e certificazione W3c.
Tempo di realizzazione (comprensivo di elaborazione immagini): 20 ore.
-3-
Documentazione sito Linguaggi per il web I
Daniele Votta: [email protected]
http://www.danielevotta.it/
Sviluppo di un sito statico Html+Css.
MATR: 708451
Anteprima delle pagine realizzate:
•
Index.html.
•
About.html.
-4-
Documentazione sito Linguaggi per il web I
Daniele Votta: [email protected]
http://www.danielevotta.it/
Sviluppo di un sito statico Html+Css.
MATR: 708451
•
Lavori.html.
•
Lavoro1.html, … , lavoroN.html.
-5-
Documentazione sito Linguaggi per il web I
Daniele Votta: [email protected]
http://www.danielevotta.it/
Sviluppo di un sito statico Html+Css.
MATR: 708451
Certificazioni W3c
Il sito è stato validato si per quel che riguarda il codice Html sia il css.
Risultato validazione Html:
Risultato validazione Css:
Conclusioni
Questo progetto mi ha permesso di consolidare ulteriormente le mie conoscenze nel campo web. Ed
è stata anche un ottima occasione per presentare i miei lavori in modo professionale.
Daniele Votta
-6-