I 5 - M A F A L D A B A C C A R O a. a / I I a n n u a l i t à. Compito 2.

Transcript

1 I 5 - M A F A L D A B A C C A R O a. a / I I a n n u a l i t à T 0 4 Compito 2. P R II N C II P II D II G R A F II C A E L AY O U T Si immagini di dover progettare il layout grafico di un sito (es. proprio sito web, sezione del sito della propria classe/scuola...). Descrivere le scelte grafiche che si adotteranno, prestando particolare attenzione a: Layout. che tipo di layout dare alla pagina, individuazione di griglia e di possibile template, posizionamento di logo, menu principale, eventuale sottomenu, contatti e altri elementi che devono essere presenti in ogni pagina. Uso del colore: individuare una palette di colori da utilizzare per tutto il sito. Motivare la propria scelta. Testo: individuare quale tipo di font, dimensione, colore usare per ogni tipo di testo o di link. Immagini: scelta delle immagini, dimensioni e loro posizionamento nella pagina. 1

2 Per svolgere questo compito, mi astengo dall immaginare di dover progettare un sito, dal momento che io stessa ho creato e gestisco il sito della scuola in cui insegno e che, con molto orgoglio e soddisfazione, è stato finalista per il Premioinnovascuola Per questo motivo, ho partecipato al FORUM PA alla Nuova Fiera di Roma, lo scorso 19 maggio Il sito che descriverò è Da tre anni scolastici, ho l incarico di Funzione Strumentale Informatica. Tra i vari compiti di questa FS, c è quello di creare e mantenere aggiornato il sito della scuola. Per realizzare il sito della Scuola Secondaria di I grado Gallo-Pascoli di Noci (Bari), dopo aver affrontato le problematiche relative all individuazione degli stakeholder, delle richieste dell utenza, degli obiettivi, dei vantaggi che si desidera trarre, mi sono posta il problema dei costi, in quanto il budget a disposizione era piuttosto ristretto. Dopo aver analizzato varie offerte di hosting, ho risolto il problema del costo, editando il sito con un applicazione web che permette di elaborare il sito online. Le conoscenze del linguaggio HTML, pur non richieste dall applicazione, tornano comunque vantaggiose per l inserimento di oggetti multimediali e collegamenti. L applicazione offre centinaia di template, totalmente personalizzabili, con la possibilità di scegliere il font per i titoli delle pagine, dei blocchi di testo e dei testi, come disporre testi, immagini, video, ecc., scegliere la palette di colori o crearne una nuova, impostare un immagine di sfondo e tanto altro ancora. Il sito che io ho creato per la scuola è fortemente caratterizzato da un aspetto giovane e fresco, perché è semplice e minimale, con uno schema grafico che dà risalto ai contenuti. 2

3 Le pagine del sito (di risoluzione pari a 1024 pixel, ma con una larghezza massima inferiore per alleggerire la visione dell insieme) hanno come sfondo la chioma di un albero di noce, simbolo del Comune di Noci, a cui è legata una leggenda secondo cui Filippo I d Angiò, venuto nelle nostre terre, colto da un temporale, trovò riparo sotto un albero di noce. Figura 1. Stemma del Comune di Noci. Sullo sfondo di un verde molto riposante per la vista (che rafforza lo spirito giovane e fresco del sito, sebbene il nero verso cui sfuma il verde conferisce eleganza e un certo charme), la Home Page è caratterizzata dal logo della scuola (che è stato realizzato da un Alunno ed è presente su tutte le comunicazioni scolastiche, come sulle divise che indossano i ragazzi) e dai pulsanti di navigazione, posti a sinistra della pagina, secondo il metodo di lettura occidentale. Nella schermata più grande, invece, appare l intestazione della scuola; sotto vi è l indicazione della Home Page, quindi un blocco di testo e un immagine di una dimensione notevole. Il blocco di testo riporta i contenuti più recenti e gli eventuali collegamenti alle pagine del sito in cui trovare ulteriori approfondimenti; affianco vi è un immagine significativa. Ci sono poi dei blocchi di testo di minore rilevanza e dello spazio bianco, prima del piè di pagina. Nelle pagine interne, a seconda delle necessità, i pulsanti di navigazione sono visibili solo al passaggio del mouse sul lato sinistro della pagina: in questo modo si ha più spazio disponibile per i blocchi di testo. 3

4 Figura 2. La Home Page del sito Il colore principale del tema del sito è un verde #3dcc49, mentre la gradazione #ecf06e è utilizzata per enfatizzare quei blocchi di testo che si vedono sotto i pulsanti di navigazione e che rimandano a contenuti importanti, quali la descrizione del sito e il Piano dell Offerta Formativa (POF) del nostro istituto. La gradazione #ecf06e è utilizzata anche nell ultima pagina, quella dedicata ai Sostenitori, sia per differenziarla dalle pagine più strettamente legate alla vita scolastica, sia per dare risalto alle persone, associazioni o enti che generosamente contribuiscono all acquisto di attrezzature e materiali scolastici. In ogni pagina, nella parte più alta, scorrono in dissolvenza delle immagini significative delle principali attività della scuola, confermando un immagine attiva e propositiva. 4

5 Da qualunque pagina del sito è possibile tornare alla Home Page. Figura 3. Anche dalla pagina "Galleria fotografica e video" si può tornare alla Home Page. Il sito ha una propria favicon che può essere trascinata nella Barra dei Preferiti. Io stessa ho creato l immagine che ho trasformato in file ico. Per la favicon ho utilizzato le iniziali G e P della scuola Gallo-Pascoli, le ho colorate dello stesso verde dell albero di noce dello sfondo (campionando il colore) e ho creato un bagliore di luce all interno delle lettere, per conferire alla nostra scuola un immagine solare. I colori fanno altresì riferimento alla bandiera di Noci che è bianca e verde con contorno giallo. Figura 4. Favicon ingrandita del sito 5

6 I blocchi contenitori dei testi, non sono sempre della stessa misura. Possono essere editati al 100% della pagina, al 66%, al 50% e al 33%. Le immagini possono anch esse essere proporzionate alle stesse misure. Inoltre, all interno dei vari blocchi, le immagini possono essere sistemate a sinistra del testo, a destra, oppure centrali. Le immagini caricate possono essere presentate secondo rapporti di 1:1, di 4:3, di 16:9. Si può anche massimizzare il ritaglio o ritagliare manualmente. Al clic del mouse sull immagine, la stessa può essere ingrandita, mostrata così com è nel blocco di testo, oppure può portare ad un link. Una volta ingrandita un immagine, si apre una galleria, per cui è possibile andare avanti o indietro e vedere tutte le immagini del sito. All interno dei blocchi di testo, si possono inserire immagini gif animate. I blocchi di testo possono essere evidenziati (cioè appaiono su uno sfondo verde chiaro con il titolo evidente in grassetto all interno di una striscia) oppure essere editati su sfondo bianco, con il titolo sottolineato. L allineamento del testo è talvolta a sinistra, altre volte giustificato. Il testo viene volutamente giustificato, quando si intende trasmettere una sensazione di formalità, per esempio per le comunicazione della Dirigente Scolastica o per le attività svolte dagli Alunni. A piè di pagina, è riportato il copyright e il pulsante per entrare nella redazione con una password. Per il titolo del sito ho scelto l Arial Black (senza grazie e di colore bianco su uno sfondo nero tendente al verde). Il nome dell istituto è riportato in carattere minuscolo, ancora una volta per ribadire l immagine giovane della nostra scuola. Questo carattere è di una dimensione più grande rispetto ai titoli delle pagine, a loro volta di una dimensione ancora più grande di quella del carattere dei blocchi di testo, che sono tutti editati con il font Verdana. Con la mia Dirigente Scolastica non abbiamo ancora trovato un intesa in merito ai contenuti del sito. Viste le Linee guida per i siti web delle Pubbliche 6

7 Amministrazioni, 2011, io sarei del parere di inserire un Modulo di Contatto e, laddove utile, un pulsante per la condivisione di contenuti in Facebook, Twitter o altri social network, per favorire il diritto alla partecipazione. Inoltre, inserirei i dati relativi al personale, per la trasparenza delle informazioni sui ruoli della DS e dei docenti. Si tratta, come si può facilmente osservare, di problemi relativi al contenuto, non alla grafica. 7