Dossier restyling template www.laboratorioclimatico.ch
Shyrlie Rezzonico Corso di grafica digitale orientamento web 4° semestre Ciclo formativo 2013/2014
Indice 1. MANDATO
3
1.1 Tema del progetto
3
1.2 Obiettivi
3
1.3 Richieste
4
1.4 Suddivisione del lavoro
4
1.5 Tempistiche
5
2. ANALISI
6
2.1 Introduzione
6
2.2 L’analisi 6 3. PROGETTAZIONE
16
3.1 Introduzione
16
3.2 Concetto
16
3.3 Wireframe
22
3.4 Mockup
25
4. SVILUPPO 26 4.1 Introduzione
26
4.2 Componenti grafiche
26
5. CONCLUSIONI
29
1. Mandato 1.1 TEMA DEL PROGETTO Il Laboratorio climatico è un progetto della fondazione Myclimate (www.myclimate. org), The Climate Protection Partnership è una fondazione con sede a Zurigo che rende possibile soluzioni innovative per la protezione del clima e promuove lo sviluppo e l’impiego di energia rinnovabile e di nuove tecnologie per il rispetto del clima. Mycliamte ha pensato a un progetto per coinvolgere apprendisti, scuole e aziende formatrici, per permettere lo studio di nuove soluzioni atte alla protezione del clima, facendo ciò ha ideato il Laboratorio climatico. Si tratta di un concorso svizzero di progetti per la protezione del clima. Sul sito ufficiale del Laboratorio climatico (www.laboratorioclimatico.ch) è possibile avere tutte le informazioni riguardo il concorso nazionale, l’archivio dei progetti inoltrati e materiale didattico inerente il tema del clima, delle energie e dell’impatto ambientale che queste possono avere, questo per accompagnare apprendisti e scuole nella progettazione di proposte. Attualmente l’impaginazione dei contenuti del sito permette la fruizione unicamente su computer. La richiesta è di rendere più contemporaneo il template attraverso un restyling grafico, favorendo la lettura dei contenuti con i vari dispositivi di navigazione online e di ripensare lo strumento “Calcolatore di CO2” rendendolo più fruibile, chiaro e attrattivo
1.2 OBIETTIVI • Identificare e proporre la migliore soluzione d’impaginazione dei contenuti considerando un valore di risparmio energetico per i dispositivi smartphone, tablet e desktop. • Identificare e proporre la migliore soluzione per la comprensione dei risultati ottenuti dal “Calcolatore di CO2”, rispetto il pubblico di riferimento.
3
1. Mandato 1.3 RICHIESTE Le richieste del progetto sono: 1. analizzare il progetto e la tematica trattata • producendo una documentazione esaustiva sul tema • confrontando idee con riferimenti a prodotti simili • descrivendo le logiche per la definizione della proposta 2. definire la proposta identificata • stabilendo il flusso della funzionalità del calcolatore (flowchart) • integrando nella struttura delle pagine già esistente i nuovi elementi • applicando il concetto grafico già esistente alla soluzione progettata (mockup) 3. produrre • il materiale grafico atto allo sviluppo produttivo • una guida per lo sviluppo del front-end • un prototipo HTML / CSS / JS
1.4 SUDDIVISIONE DEL LAVORO La fase di analisi dei contenuti attuali del sito, la ricerca dei competitors e la definizione del target, sono stati svolti come gruppo-classe. Successivamente ognuno di noi, ha dovuto realizzare individualmente un wireframe e la grafica (mokup); dopodiché ognuno ha sviluppato autonomamente, con il codice, la propria proposta del sito e una soluzione più accattivante del calcolatore di CO2.
4
1. Mandato 1.5 TEMPISTICHE Scadenze e consegne: 11 marzo Consegna del mandato di progetto (concept) dall’11 al 18 marzo Fase di discovery 18 marzo Presentazione risultati della fase di discovery dal 18 marzo all’8 aprile Fase di development content e design 8 aprile Presentazione risultati della fase di design dall’8 aprile al 20 maggio Fase di development 20 maggio (posticipata al 27 maggio) Consegna finale
5
2. Analisi 2.1 INTRODUZIONE Dopo la presentazione del progetto da parte della docente Prisca Berto Vendittelli, la classe ha iniziato la fase di analisi suddividendosi nella classe in gruppetti di 2, guardando i competitors, le personas (target) a cui potrebbe rivolgersi questo sito e le informazioni inerenti il tema del risparmio energetico e del consumo di energia con conseguente emissione di CO2. Per alcuni elementi presenti nel mio sito, mi sono ispirata a grafiche o soluzioni esistenti. Il menu volevo si comportasse come in facebook su mobile, cioé a scomparsa e tramite un’icona di menu, comparise da sinistra a destra spostando il resto del contenuto, come una tenda. Per il calcolatore invece mi sono confrontata con vari siti di calcolatori, per capire e vedere se trovavo delle soluzioni semplici. Di seguito riporto alcuni siti che ho guardato: - https://www. myclimate.org - https://www.wwf.ch/it/attivi/vivere_meglio/impronta_ecologica - https://www.sunearthtools.com/it/tools/CO2-emissions-calculator.php - https://www.co2balance.it/co2calculators - https://netapp.post.ch/CO2Calculator/pages/Start.aspx?language=it
6
2. Analisi 2.2 L’ANALISI COMPETITORS Per quanto riguarda i competitors, posso riassumere ciò che troviamo invece come allegati separati (competitors.pdf). L’analisi sui competitors è stata fatta su 8 siti internet esistenti. I siti in questione si riferiscono ad associazioni che utilizzano server eco-sostenibili, società e associazioni che si preoccupano di promuovere l’impiego razionale dell’energia e l’utilizzo delle energie rinnovabili, associazioni che ritirano apparecchi che consumano energia, ... Per l’analisi abbiamo preso in considerazione delle euristiche di usabilità, scegliendo quelle che facevano maggiormente al caso nostro, cioé sono state analizzate le seguenti categorie: - Homepage - Task orientation - Navigation & AI - Trust & credibility - Writing & content quality - Page layout & visual design Grazie all’analisi accurata effettuata sui competitors, ho potuto constatare che ciò che non funziona molto nei siti presi in esame, é soprattutto l’assenza di punti di riferimento per capire dove ci si trova, problemi di contenuti e molto spesso carenti nella parte grafica. Tutto ciò si dovrà dunque migliorare e tenere in considerazione. Mentre i contenuti sono esaustivi, ma resi poco accattivanti e piacevoli alla lettura.
7
2. Analisi PERSONAS Per capire a quale target si può rivolgere il sito www.laboratorioclimatico.ch, sono state individuate 5 tipologie di personas differenti. Il docente, che potrebbe usufruire del sito, per partecipare al concorso con i suoi allievi, e quindi esige una semplicità nella spiegazione del tema (risparmio energetico) e che illustri le possibilità di risparmio che attualmente ci sono o sono state pensate. Dovrebbe essere semplice trovare le informazioni per partecipare al concorso e le relative info, poter vedere i progetti già creati negli anni passati e i progetti vincitori. Il sito dovrebbe dunque trasmettere il piacere di coinvolgere i propri alunni nel creare qualcosa che possa in futuro essere un’innovazione! L’azienda, vorrebbe capire se le emissioni di CO2 della propria ditta, sono tante o poche, inoltre vorrebbe poter vedere cos’é stato progettato per diminuire queste emissioni, magari attraverso questi progetti, ne trova uno che si può applicare all’azienda per risparmiare. L’apprendista, vorrebbe avere a disposizione il materiale per capire cosa si sta facendo a livello di risparmio energetico, e come poter contribuire a ciò. Visionare i progetti già realizzati, stimolerebbe a partecipare al concorso. Poter iscriversi per partecipare e trovare tutte le informazioni necessarie a ciò, aiuterebbe a incrementare il numero di partecipanti. I promotori, vogliono capire subito di cosa parla il sito, quindi un sito per un concorso rivolto ad apprendisti e scuole, per realizzare nuovi sistemi di risparmio energetico. Comunicazione semplice e chiara. L’utente tipo, attraverso questo sito, potrebbe cambiare il suo comportamento nei confronti del risparmio energetico, e quindi sensibilizzare l’approccio più ecologico con l’ambiente. Permettere di capire quanto si consuma e come agire per ridurre questo consumo.
8
2. Analisi SITO ATTUALE Attualmente il sito si presenta in questo modo: chiuso in un box e poco attraente graficamente. In questo modo lo spazio é poco sfruttato, risulta molto scuro alla vista, dunque non favoriscono una buona leggibilità. Le immagini risultano piccole, mentre il footer é quesi inesistente e i promotori ingombranti rispetto al contenuto.
9
2. Analisi SITO ATTUALE Attraverso un wireframe stilato dal gruppo che si é occupato dell’analisi di quello attuale, possiamo notare le suddivisioni degli elementi.
10
2. Analisi SITO ATTUALE Possiamo vedere in rosso ciò che andrebbe rivisto e in verde ciò che si può tenere, ed eventualmente spostare o variare.
- s p a zi o l ate r a l e i nut i li z z ato
- Lo g o i n ev i d e nz a
- c o nte nuto i n un b ox
- H e ad e r p i c c o l a
- Fo nt t r o p p o p i c c o l o - M e nu ve r t i c a l e (ut i li z z a b i l e i n m o da li t à m o b i l e) - si capisce in che p a g i n a c i s i t r ova
- li nk di r et to di d ow n l o ad d e i p d f (m a n c a nz a di s c e lt a da p a r te d e ll ’ute nte) - i n c o e r e nz a (a l c uni li nk p d f n o n us a n o t a r g et _ b l a nk , t i t r ov i i n un a p a g i n a e ste r n a a l s i to
- Lo g hi n o n a l li n e at i c o r r et t a m e nte - M a n c a nz a di i nf o r m a zi o ni
11
2. Analisi SITO ATTUALE I colori del sito sono pochi e molto diversi tra loro.
H E X # 113 3 6 0
HE X #b20 0 0 0
HEX #cccccc
HEX #ffffff
HEX #00cccc
R G B 17 / 51 / 9 6
R G B 17 8 / 0 / 0
RGB 204 / 204 / 204
RGB 255 / 255 / 255
RGB 0 / 204 / 204
In generale il sito risulta mediocre, un po’ vecchiotto nella struttura e pesante alla lettura. I nostri consigli elencati in precedenza, favorirebbero una migliore navigazione e darebbero più spazio ai molteplici contenuti. L’importanza di fotografie, dati tabellari, e contatti/iscrizione, devono essere maggiormente visibili creando la curiosità nel visitatore. Il consiglio é di ottimizzare l’utilizzo di energia per la navigazione del sito migliorando la tecnologia (Javascript, Jquery, Ajax, HTML5 e CSS3) dunque un codice leggero e ben strutturato e l’ottimizzazione delle immagini per rendere il tutto più fluido e a poco dispendio energetico. Inoltre é consigliabile dare più visibilità alla partnership con Myclimate.
12
2. Analisi RISPARMIO ENERGETICO Per capire meglio di cosa si tratta, é stata svolta una ricerca, per capire cos’é, come ridurre il CO2, cosa vuol dire energia pulita e come migliorare il calcolatore presente nel sito. RISPARMIO ENERGETICO: COS’È? Il risparmio energetico é una serie di tecniche testate e atte a ridurre l’energia necessaria per lo svolgimento delle varie attività, così da avere meno sprechi e aiutare quindi a ridurre l’inquinamento. Per approfondire il tema si faccia riferimento al documento allegato (Risp_energia. pdf). In breve invece posso dire, che quando l’inquinamento climatico ha raggiunto livelli critici e l’opinione pubblica si é accorta dei rischi che si stavano correndo nell’utilizzare illimitatamente le risorse a disposizione, é stato indetto un incontro tra i vari stati del mondo per trovare una soluzione. Dunque é stato creato così il protocollo di Kyoto, cioé un trattato internazionale, atto a ridurre il riscaldamento climatico. Protocollo sottoscritto nel 1997 e entrato in vigore nel 2005. RIDUZIONE CO2 Le nuove tecnologie e uno stile di vita attento all’ambiente, permetteranno, in futuro, di vivere con un fabbisogno di energia primaria di 2000 watt, emettendo 1 tonnellata di CO2 a persona all’anno. Questo senza dover scendere a compromessi in fatto di qualità di vita o di benessere. Per risparmiare energia sugli elettrodomestici, abbiamo l’etichetta energia che ci permette a colpo d’occhio di capire il consumo. Le classi di efficienza vanno dalla A (verde) alla G (rosso), cioé la peggiore. Curiosità: lasciando un apparecchio elettrico in standby, consumiamo di più che a spegnerlo e riaccenderlo ogni volta, significa non pagare 1 mese di elettricità all’anno. Per ridurre le emissioni, oltre a prestare attenzione alle classi degli elettrodomestici, possiamo ridurle anche usando in modo parsimonioso l’acqua calda, il riscaldamento.
13
2. Analisi Per gli edifici invece, ci sono altri accorgimenti. Il sistema Minergie, é uno dei modi per progettare o ristrutturare le case, per fare in modo che siano più in sintonia con l’ambiente. Anche per queste tipologie di case, ogni cosa che emette CO2, é pensata appositamente per essere integrata in un tutt’uno con l’edificio. La mobilità é pari a 1/3 del consumo energetico, almeno in Svizzera. Una soluzione é limitare per alcuni tragitti il n° di macchine e riempire la macchina con la sua capienza di portanza massima (persone). Sono state apportate altre fonti di ricarica per le automobili: metano o elettricità. Anche le automobili hanno un’etichetta energia, poiché alcune emettono più o meno CO2 di altre. Il consumo di carburante e le conseguenti emissioni dipendono dagli pneumatici. Per risparmiare, si può anche adottare una guida ecodrive, in questo modo si risparmia anche benzina.
ENERGIA PULITA Sono le forme d’energia prodotte da fonti di energia derivanti da particolari risorse naturali, che si rigenerano almeno alla stessa velocità con cui vengono consumate o non sono “esauribili” nella scala delle ere geologiche, e che il cui utilizzo non pregiudica le risorse stesse per le generazioni future. La peculiarità di molte di queste energie alternative, non immettono sostanze nocive e/o climalteranti, quali ad esempio il CO2. Sono dunque alla base della cosiddetta economia verde. - Energia idroelettrica - Energia del legno - Biomassa - Energia eolica - Energia biotermica - Energia solare - Energia estratta dall’ambiente - Teleriscaldamento
14
2. Analisi CALCOLATORE Ci sono vari tipi di calcolatori nel web: - di volo - domestici - delle auto - compensazione CO2 - dell’alimentazione - dei beni e dei servizi Ci sono anche calcolatori dell’acidità dell’acqua o di contenuto di Biossido di Carbonio. Per conteggiare il risparmio di CO2, bisogna fare dei semplici passi qui elencati: - leggere i watt dall’apparecchio - moltiplicare per 1000 per ottenere i chilowatt - si moltiplica poi per un tempo di utilizzo (ore, giorni, mesi) - otteniamo così il consumo, che moltiplicato per 0.72, ci dà i kg di CO2 emessi
Formula per un mese: KWh consumati * Numero di giorni in un mese * 0.72 = kg di CO2
È stata stilata una tabella con i consumi di alcune automobili e di alcuni elettrodomestici; in base a questi dati, é stata stilata una lista di comparazioni, di modo da comprendere meglio a cosa equivale il consumo di una dato elettrodomestico, in un anno. Quindi vengono equiparati a dei viaggi in macchina da un luogo all’altro a dipendenza del consumo, grazie alla comparazione con i relativi chilometri.
15
3. Progettazione 3.1 INTRODUZIONE Dopo aver analizzato competitors, definito il target, analizzato la struttura e gli elementi del sito attuale, e naturalmente aver capito il tema trattato, si può iniziare la prossima fase, cioé progettare il nuovo sito. Ho iniziato cercando delle parole chiave, per poter definire il mio concetto e procedere poi alla produzione di un wireframe, di modo da riposizionare i miei elementi e successivamente vestirlo con la grafica, per passare infine allo sviluppo di un prototipo funzionante e responsive.
3.2 CONCETTO Il concetto dietro alla mia idea per il restyle del sito, é come una ciotola di riso.
Proprio una ciotola di riso, anche se non centra nulla con il clima, ma perché volevo trovare un concetto grafico semplice, poiché il riso é un alimento semplice e di base, (può essere usato con vari piatti), ma é anche ricco, poiché il sito ha tante informazioni utili, allo stesso tempo é anche economico, poiché deve essere preso in considerazione il risparmio energetico e quindi, meno consumo di energia e meno emissioni di CO2, (come per il riso che costa poco, quindi vado a risparmiare), e da ultimo, ma non ultimo, é un qualcosa di univarsale! Il mio sito sarà visibile da molteplici dispositivi grazie al fatto che sarà anche ottimizzato per i dispositivi mobile.
16
3. Progettazione Per restare sul semplice, anche nei colori non ho voluto esagerare, infatti ho mantenuto gli stessi già presenti nel sito, eccetto l’azzurro (usato nei link del sito attuale) e aggiungendo dei grigi per restare sul neutro.
H E X # 113 3 6 0
HE X #b20 0 0 0
HEX #cccccc
HEX #666666
HEX #333333
R G B 17 / 51 / 9 6
R G B 17 8 / 0 / 0
RGB 204 / 204 / 204
R G B 10 2 / 10 2 / 10 2
R G B 51 / 51 / 51
HEX #ffffff
HEX #000000
H E X # 113 3 6 0
RGB 255 / 255 / 255
RGB 0 / 0 / 0
R G B 17 / 51 / 9 6 opacity: 30%
Ho deciso di mantenerli uguali, sia per semplificare, ma soprattutto per non stravolgere l’utente, e mantenere un legame con logo e dicitura (che restano invariati). I colori vengono usati nel menu, le voci non selezionate sono blu, mentre le attive diventano rosse, e le sottovoci rosse con un’opacità del 20%. I colori sono usati puri, tranne per il background del footer, che ho utilizzato il blu al 30% e vi ho sovrapposto un pattern a righe diagonali bianche al 15% di opacità. Il grigio é stato usato come sfondo del menu, per il resto il bianco e le linee divisorie sono blu con anche loro l’opacità al 20%.
17
3. Progettazione Ho voluto cambiare anche il font e come prima scelta ho optato per l’ AVENIR, un font a pagamento, creato da Adrian Frutiger nel 1988. Font questo geometrico e senza grazie. Per creare questo font L’autore si é ispirato a font come Erbar, Futura e Frutiger. L’ho scelto soprattutto per il suo significato, poiché in francese Avenir é FUTURO!! Ma dato che é a pagamento, ho cercato qualcosa di simile ma gratuito (sempre per parlare di risparmio), e ho trovato Lato, un font molto simile all’Avenir. Nel mio sito uso solo questo font in varie dimensioni e i colori con cui lo uso sono per il menu blu e rosso, mentre per i contenuti si passa dai grigi al nero per i link. Le declinazioni sono: Regular, Bold e Italic.
18
3. Progettazione Per questo progetto era richiesto di trovare una migliore rappresentazione dei risultati del calcolatore di CO2, quindi ho studiato l’analisi sul risparmio energetico, e dalla ricerca effettuata, ho creato una flowchart del funzionamento della mia idea e i parametri che prenderà in considerazione.
19
3. Progettazione Sotto possiamo notare la semplicità del calcolatore, cioé di come si presenta all’utente. Ciò che dovrà fare il nostro utente, sarà immettere il proprio valore in KWh e cliccare il pulsante calcola; allora otterrà un risultato anch’esso molto semplice e pulito, ma che gli permetterà di capire effettivamente quanto CO2 emette.
Come risultato otteniamo prima di tutto i Kg di CO2, ma soto di esso ho anche il numero di Km a cui equivale il valore ottenuto, e in base a ciò, mi cambierà la città a destra, e si capirà se il consumo é tanto o poco. Parto sempre da Chiasso come punto di riferimento e in base al n° di Kg (quindi di Km), ho una distanza maggiore o minore (vedendo la tabella nella pagina precedente). In questo modo anche io ho potuto capire se il consumo é tanto o poco, grazie al paragone con i chilometri da Chiasso a un’altra città. Ci rendiamo subito conto, poiché i numeri da soli non dicono molto, invece attraverso
20
3. Progettazione un paragone, possono far capire l’importanza del consumo, e quindi di conseguenza l’importanza del risparmio energetico. Inizialmente mi sono trovata in difficoltà nel cercare una soluzione semplice ma efficace; allora mi sono documentata d’apprima navigando nel web su google, poi leggendo la ricerca effettuata dal gruppetto responsabile di trovare informazioni sul risparmio energetico e sul calcolatore, e infine, chiedendo anche ad amici e conoscenti cosa sapevano sull’argomento. Successivamente mi sono chiesta che cosa mi sarebbe stato utile trovare nei risultati di un calcolatore di CO2, per capire l’effettivo consumo. Di sicuro sarebbe stato utile un paragone con qualcosa, ma come collegare il consumo di CO2 con quello delle macchine? Quindi mi sono detta che dovevo decidere (per semplificare il tutto) una sola città di partenza e la media delle automobili (consumo annuo), poiché la lista delle macchine era molto variata, ma mettere la distanza percorsa da una cabrio, non sarebbe stato molto chiaro come paragone, poiché ogn itipologia di macchina ha un consumo differente (anche in base alla cilindrata), quindi attraverso la media di consumo annuo, quindi generalizzando, sarebbe stato tutto più comprensibile. A seguito di ciò, ho dovuto stilare una tabella di valori da associare come distanze, allora munita di google maps (itinareri), ho cercato fino a dove si poteva arrivare con la macchina (escluse le isole). Dunque partendo da Chiasso, sono arrivata fino a 12000 km, cioé Bangkok; in seguito, attraverso la flowchart, ho illustrato gli step che dovrò creare in javascript, per fare in modo che mi torni i risultati esatti. Grazie a dei calcoli e a delle regole in javascript, avrò un paragone molto semplice e intuitivo. Mi sono fermata alla comparazione fino a Bangkok, poiché cercando le possibili mete in macchina, era la più lontana raggiungibile appunto in automobile, dunque sorpassati questi 12000 Km, l’informazione che avrò, sarà “distanza non percorribile in macchina“.
21
3. Progettazione 3.3 WIREFRAME (desktop)
Questa schreenshot mostra come vengono disposti i diversi elementi; possiamo ritrovare molte similitudini tra la nuova proposta e quella attualmente online; ma non ho cambiato molto, ho solo voluto dare maggior respiro e definizione ai vari contenuti. Layout che si può suddividere in 4 sezioni (header, navigation, content e footer).
22
3. Progettazione 3.3 WIREFRAME (tablet)
Per il tablet, ho optato per far sparire il menu a sinistra e comparire con l’icona adibita, mentre per la modalità landscape, il menu ho voluto restasse visibile. Quindi sopra possiamo vedere come verrebbero visualizzato gli elementi nelle due modalità.
23
3. Progettazione 3.3 WIREFRAME
Su smartphone il menu é a scomparsa sulla sinistra e gli elementi flottano uno sotto l’altro, in entrambe le modalità.
24
3. Progettazione 3.4 MOCKUP
desktop
tablet
smartphone
Possiamo vedere la differenza di visualizzazione sui vari device e nelle varie modalità.
25
4. Sviluppo 4.1 INTRODUZIONE Dopo la presentazione del concetto grafico, si é proceduto allo sviluppo del sito tramite codice HTML5, CSS3, Javascript, Jquery e le media query, per renderlo responsive. Tutto ciò basandomi anche sul framework bootstrap3, oltre al puro HTML e CSS. Il prototipo conta una trentina di pagine sviluppate. In questa fase ho apportato ancora delle modifiche grafiche rispetto al mockup presentato. Ho voluto dare maggiore risalto al “benvenuto” in prima pagina, cambiando il colore del font da #333 a #666, di modo da rendere la pagina ancora più dinamica. In fase di sviluppo ho avuto difficoltà per quanto riguarda il menu a scomparsa, poiché volevo fare in modo che quando visualizzavo su smartphone e tablet, il menu appariva con un’icona e scompariva (come facebook), ma che al suo interno presentasse un accordion. Risolto questo ostacolo, mi sono trovata davanti ad un altro ostacolo sempre inerente al menu essendo un accordion, le voci principali non mi riportavano alle pagine create, ma ho risolto grazie a delle regole javascript. Fortunatamente ho risolto il tutto in tempo per consegnare un prodotto finito e di qualità. Tutte le immagini sono state alleggerite grazie allo strumento “ImageOptim”, in modo da risparmiare sul tempo di caricamento e dunque sulle emissioni di CO2.
4.2 COMPONENTI GRAFICHE Il font “Avenir” é stato cambiato con il “Lato”, come detto in precedenza, utilizzato nella mia grafica, nelle declinazioni Regular (per i paragrafi del contenuto, i titoli, il menu e i contatti nel footer), Bold (per i link e nel footer per i titoli di promotori, partner e distinzioni) e Italic (per i documenti pdf). Tutti i pdf sono muniti dell’icona tipica dei pdf (utilizzata come background), sono sottolineati e in italico. Per le immagini, ho usato quelle già presenti nel sito, ma sarebbe meglio averle con una risoluzione maggiore. I video sono stati implementati da youtube e la mappa da google maps.
26
4. Sviluppo Le icone dei posti (classifica), sono state ricreate personamente in illustrator, come l’immagine di sfondo della header, il logo e la dicitura del sito nuovo e il calcolatore. Mentre i loghi dei partner, dei promotori e delle distinzioni, li ho cercati su google e il logo myclimate é stato preso dal sito ufficiale. Per avere tutti i loghi della stessa dimensione, ho deciso di racchiuderli tutti singolarmente in un rettangolo a sfondo bianco e farli in scala di grigio e non a colori, sempre prer un discorso di risparmio. Per il menu ho deciso di utilizzare un plugin di bootstrap3, che utilizza jquery, di modo da renderlo più interessante e interattivo, scompare quando guardo il sito su mobile. Il primo passo fatto nello sviluppo delle ca. 30 pagine del sito Laboratorio climatico, é stato quello di creare la index attraverso HTML5 e CSS3, in modo da definire il posizionamento degli elementi, e con i CSS, lo stile di ogni “pezzetto” che compone la pagina. Dopo aver costruito tutta la pagina su desktop, ho iniziato a modificare il posizionamento degli elementi, attraverso le media query. Media query che sono state create in base alle misure dei dispositivi che avevo a disposizione, che sono misure standard (per la apple). Grazie a Prisca, si poteva caricare le nostre pagine su un server e poter così verificare direttamente sui dispositivi, la corretta visualizzazione. In questo modo ho potuto notare il comportamento degli elementi e apportare l’addove necessario le dovute modifiche. Una volta definiti i “breakpoint“ e creato la index responsive, ho iniziato a creare le altre pagine, e nel mentre ho associato delle pagine a delle altre, in questo modo ho tolto alcune voci di menu (ad esempio: impressum, materiale didattico,...). Entusiasmante é stato creare il calcolatore, dato che la ricerca e la preparazione alla spiegazione del funzionamento del mio calcolatore, era già ben definita nella flowchart, é stato quindi più veloce tradurlo nel linguaggio di javascript. Dunque una volta creato il codice js e averlo collegato all’HTML e ai campi giusti, ho dovuto cercare le città “più conosciute”, con le distanze pensate nella tabella, su google maps, per poi inserirle nei miei risultati e far capire se le emissioni di CO2 sono elevate o meno. Una volta completata la pagina del calcolatore, ho provato il suo funzionamento e mi sono sentita molto appagata.
27
4. Sviluppo Ho notato che per realizzare una trentina di pagine, a volte procedevo celermente, mentre altre volte ero rallentata, e questo a volte mi faceva arrabbiare, perché sentivo la pressione della consegna e il tempo a disposizione che diminuiva, e la paura di non finire per tempo, facevano aumentare lo stress e il nervosismo. Ho fatto fatica a staccare la testa da questo lavoro, anche la sera o nel weekend, continuavo a lavorare, e di notte la testa continuava a frullare e a pensare al sito. Pian piano vedendo il mio procedere del lavoro, e il diminuire delle pagine da realizzare, e soprattutto anche grazie all’aiuto dei famigliari, sono riuscita ogni tanto a staccare un po’, poiché fa bene anche allontanarsi un po’ da ciò ce si sta facendo, per poi trovare eventuali errori e poter ragionere più lucidamente. Io sono sempre così, mi stresso perché ho paura di non finire e invece poi arrivo sempre con tutto pronto, ma mi faccio un sacco di domande, poiché vedo gli altri miei compagni che se la prendono con comodo e poi riescono ad arrivare alal consegna con il materiale... Questo é sconfortante, perché loro riescono a godersela di piû e poi arrivare col lavoro fatto e invece io devo fare tutti sti salti e stressarmi? Vabbé, detto ciò chiudo questa breve parentesi su me stessa e riprendiamo a parlare del progetto. Per riuscire ad arrivare alla consegna con tutto pronto, mi ero imposta una tabella di marcia abbastanza serrata, dato che per lo sviluppo avevo 5 settimane, avrei dovuto fare 6 pagine a settimana, ma ci sono stati dei giorni in cui ho fatto 2-3 pagine al giorno, e altre in cui mi sono soffermata mezza giornata o una giornata intera solo su una pagina; ma tutto sommato sono arrivata per tempo a crearle tutte. L’ultimo step é stato portare a termire sia il presente dossier, sia un problema riscontrato nel mio menu (sempre quello a mettermi i bastoni tra le ruote...). Oltre al dossier si doveva consegnare anche una guida di sviluppo, cosa che mi ha mandata nuovamente in tilt, poiché nel mio CSS avevo così tante regole per i vari elementi, che non sapevo da che cosa partire. Ho suddiviso la prima parte della guida (header, navigation, content, footer), inoltre ho suddiviso per media query, cioé sono partita con l’elencare le regole per il desktop per poi passare a quelle per il tablet (portrait e landscape) e infine a quelle per smartphone (portrait e landscape). Ho lavorato molto sia a casa sia a scuola per terminare il tutto per tempo, ma ora mi sento più tranquilla, poiché nell’ultima settimana prima della consegna non mi erano rimaste molte pagine da programmare (4), dunque ho potuto dedicarmi al dossier, alla guida e alla realizzazione della cover del cd da consegnare.
28
5. Conclusioni A conclusione di questo progetto, posso dire che é stato interessante confrontarsi con un committente vero. È stata una bella sfida, riuscire a rinnovare il look grafico di un sito esistente pieno di contenuti interessanti, e soprattutto riuscire a rendere il sito ottimizzato anche per altri device. Ho trovato molto ristretti i tempi, ma come ci é stato detto, nel mondo del lavoro a volte si é ancora più pressati, e si hanno diversi lavori da portare avanti contemporaneamente. Fortunatamente la fase di discovery, abbiamo potuto suddividercela in classe, di modo da velocizzarci poi nel procedimento per la realizzazione dei wireframe e successivamente della grafica. È stato complesso per me trovare una grafica che mi soddisfacesse e che esprimesse il mio concetto, mi sentivo molto “limitata”, poiché marchio e dicitura non potevano essere cambiati né di forma, né di colore; ma ora sono contenta del risultato ottenuto. Grazie a dei consigli utili sono riuscita a trovare il mix giusto per arrivare a un risultato buono e professionale, ma soprattutto... semplice e pulito. Ho chiesto consigli anche in fase di sviluppo, poiché per alcuni elementi e alcuni funzionamenti in questa fase, ho faticato a crearli e/o a cercare un qualcosa di già pronto da implementare e modificare a mio modo, e ringrazio dunque per il tempo dedicatomi e la pazienza dimostrata. Sono molto entusiasta di ciò che ho creato e di come ho risolto in modo semplice, ma con un forte impatto, il calcolatore di CO2; in questo modo anche io ho potuto capire il valore effettivo di un numero di KWh emessi. È stato un progetto avvincente, che mi ha permesso di crescere e di imparare cose nuove e trucchetti del mestiere che potranno tornarmi utili nel mondo del lavoro. Mi ha fatto inoltre crescere personalmente, per il fatto di sapersi autogestire, avere la responsabilità dell’organizzarsi il tempo al meglio per arrivare pronti alla consegna. Inoltre a parere mio ha permesso di capire come quando si preparal a grafica, é meglio già pensare a quando si svilupperà, e quindi se cercherà di fare qualcosa di più semplice e fattibile, per non dover diventare matti in fase di sviluppo. Per concludere riporto due citazioni a mio parere molto innovative sul webdesign. “Il web design é la creazione di ambienti digitali che facilitano e incoraggino attività umane, che riflettono o si adattano a voci individuali e ad un contenuto che cambiano nel tempo mantenendo sempre la loro identità“ Jeffrey Zeldman “Un sito accessibile é un sito più usabile per tutti“ Berners Lee
29
