Guida allo sviluppo del sito web

Transcript

1 Guida allo sviluppo del sito web Scuola Superiore Specializzata d Economia (SSSE) Classe grafica digitale orientamento web Anno Davide Gazzo, Désirée Obrecht, Giovanna Spena, Ilario Anzini, Olivier Staub, Sara Schneider, Shyrlie Rezzonico, Stefania Bandettini SSS_AA Scuola Superiore Specializzata d Arte Applicata

2 Indice pag. pag. Typeface 3 Homepage SSIG 14 Colore 4 Homepage SSEA 15 Homepage SSSE 5 Homepage FC 16 Base 5 Accordion 17 Navigation 6 Elementi grafici 18 Slideshow 7 Font size 18 News 8 Elenco Tabella Icone 19 Sidebar 9 Box Navigation 20 Teaser 10 Form 21 Descrizione 11 Popover 22 Footer 12 Alert Quote 23 Copyright 13 2

3 TYPEFACE Il carattere tipografico che abbiamo utilizzato per la realizzazione della grafica di tutto il layout è un Arial. È utilizzato nelle sue declinazioni Regular e Bold. La particolarità di questo carattere tipografico è il fatto che è senza grazie e rientra nella categoria dei web safe font, cioé i font che sono leggibili da tutti i browser. Disegnato da Robin Nicholas e Patricia Saunders nel 1982, è stato pensato prendendo ispirazione dall Helvetica ma si differenzia in numerose caratteristiche. Rientra nella categoria dei sans serif e la sua leggibilità è buona sia a monitor che nello stampato. Le parti terminali sono tagliate sulla diagonale, il che contribuisce a dare al font un apparenza meno meccanica. ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz

4 COLORI I colori utilizzati sono stati selezionati in base a quelli che il sito già proponeva, questo per mantenere l identità visiva che le scuole avevano in precedenza. I colori in hover hanno opacity: 0.8. Verde RGB: CMYK: HEX: #4f924d Rosso RGB: CMYK: HEX: #d53422 Blu RGB: CMYK: HEX: #116eab Giallo RGB: CMYK: HEX: #f5ab06 Nero RGB: CMYK: HEX: # Verde hover RGBa: CMYK: HEX: #9ec09d Rosso hover RGBa: CMYK: HEX: #da594b Blu hover RGBa: CMYK: HEX: #3d88b8 Giallo hover RGBa: CMYK: HEX: #f4b834 Nero RGBa: CMYK: HEX: #333 Grigio body RGB: CMYK: HEX: #ededed Grigio voci menu RGB: CMYK: HEX: #a1a1a1 Grigio testi RGB: CMYK: HEX: # Grigio footer RGB: CMYK: HEX: #37383a Grigio copyright RGB: CMYK: HEX: #292a2c 4

5 HOMEPAGE SSSE Base Questa è l homepage principale del sito. In questa pagina abbiamo un menù di navigazione che rimane fisso nella parte superiore della pagina. Il menù, è formato dal logo della scuola, le voci principali delle altre sezioni, i download, le news e i contatti. Infine nella parte finale troviamo il simbolo della ricerca. Nella parte inferiore, abbiamo uno slideshow d immagini che vogliono dare un idea della scuola. Nella parte sottostante un altro slideshow con le notizie, ci propone le news della scuola. I tre rettangoli che seguono le news ripropongono quelle che sono le sezioni principali all interno della scuola. Sono seguite da una breve descrizione della stessa. Il footer contiene le informazioni di contatto della scuola, i social network a cui la scuola si appoggia e una mappa che ci riporta alla sua posizione. 5

6 HOMEPAGE SSSE Navigation La navigazione per la SSSE è contraddistinta dal colore verde. Quando si va sopra le voci, queste da grigie diventano verdi e quando una voce è selezionata compare un rettangolino verde sopra. Nav: width: 100%; height: 97px; border-bottom: 22px solid #4f924d; background: #fff; Voci_nav: font-size: 20px; font-weight: normal; color: #a1a1a1; padding: 0 15px; Voci_nav: hover: color: #4f924d; Voci_nav: active: color: #4f924d; Rett_active: height: 10px; width: auto; color: #4f924d; top: 0; Logo: header-logo-ssse.png width: 306px; height: 31px; 6

7 HOMEPAGE SSSE Slideshow / Carousell Lo slideshow riporta alcune notizie che sono interessanti mettere in evidenza. Ruota da sinistra a destra. Slidshow: width: 100%; height: 435px; Slidshow_box: background: #000000; opacity: 0.8; Slidshow_titolo: font-size: 23px; color: #ffffff; line-height: 24px; font-weight: bold; Slidshow_bottone: background: #4f924d; border-radius: 2px; color: #ffffff; Slidshow_bottone:hover background: rgba (79, 146, 77,.8) Body: background: #ededed; 7

8 HOMEPAGE SSSE News Anche qui c è un carousell con quattro differenti news riguardanti la scuola, che scorrono da sinistra a destra automaticamente e anche con la possibilità di spostarle con le freccette. News_immagine: width: 336px; height: 133px; margin-right: 20px; News_titolo: font-weight: bold; font-size: 20px; color: #333; News_testo: color: #333; line-height: 1.4; News_link: color: #f5ab06; text-decoration: none; News_link: hover: text-decoration: underline; 8

9 HOMEPAGE SSSE Sidebar Nella sidebar a destra troviamo i quattro bottoni principali, questi, sono caratterizzati da delle icone con la nomenclatura del titolo, una linea verde che riprende il colore della scuola, contraddistingue la parte inferiore del bottone. Quando i bottoni sono in hover, cambiano sfondo e diventano grigio scuro, mentre il testo diventa nero. Bottone: width: 268px; height: 79px; background: #f3f3f3; border: 1px solid #ccc; Bottone_riga: width: 266px; height: 11px; background: #4f924d; Bottone_icone: icn-sprite.png height: 36px; width: 36 px; Bottone_testo: font-size: 20px; color: #6a6a6a; text-transform: uppercase; Bottone: hover: background: #ebebeb; Bottone_testo: hover: color: #333; 9

10 HOMEPAGE SSSE Banner I tre rettangolini colorati vogliono riproporre le aree principali presenti all interno della scuola. Dunque abbiamo la SSIG con il colore rosso, che verrà proposto per tutta la sua grafica; la SSEA con il blu e la Formazione Continua (FC) con il giallo. In hover, i rettangoli, assumono un opacità di 0.8. Banner: height: 191px; width: 225px; margin-right: 25px; Banner_titolo: color: #fff; font-size: 17px; Banner_paragrafo: color: #fff; font-size: 10px; Banner: hover: opacity: 0.8; Banner_rosso: background: #d53422; Banner_blu: background: #116eab; Banner_giallo: background: #f5ab06; 10

11 HOMEPAGE SSSE Descrizione La descrizione contiene un breve testo esplicativo delle scuole. Testo: width: 100%; height: auto; font-size: 16px; line-weight: normal; color: #616161; 11

12 HOMEPAGE SSSE Footer Il footer contiene le informazioni di contatto della scuola, i social network a cui la scuola si appoggia oltre ai loghi della Repubblica e Cantone Ticino e quello della Formazione Professionale. Una mappa ci riporta costantemente la posizione della scuola. Footer: background: #37383a; Logo: header-logo-ssse_gray.png width: 302px; height: 31px; Contatti_testo: color: #a3a3a3; Logo_cantone: img-repubblica-cantoneticino-logo-off.png width: 292px; height: 50px; Logo_formazione: img-azienda-formatrice-off. png width: 72px; height: 72px; Logo_social: icn-linkedin-off.png icn-facebook-off.png width: 36px; height: 36px; Logo: hover: opacity: 0.8; Mappa: width: 268px; height: 211px; 12

13 HOMEPAGE SSSE Copyright Sotto al footer si trova il Copyright, contenente le informazioni inerenti alla realizzazione del sito. Copyright: background: #292a2c; border-top: 1px solid #494b4c; Copyright_testo: font_size: 12px; color: #8c8989; Copyright_link: color: #bfbfbf; Copyright_link: hover: text-decoration: underline; 13

14 HOMEPAGE SSIG Logo: header-logo-ssig.png width: 306px; height: 31px; Colore_rosso: background: #d53422; La navigazione per la SSIG si differenzia dalla homepage della SSSE poiché è stato tolto lo slideshow-carousell e al posto del verde che contraddistingueva la SSSE ora è stato sostituito dal colore rosso della SSIG. Rispetto alla pagina principale, nella navigazione della SSSE il rettangolino verde sulla voce active scompare e rimane solo la scritta colorata. Quando si passa sopra alle voci, queste da grigie diventano rosse e quando una voce è selezionata compare un rettangolino rosso sopra. Nella sidebar, è stato aggiunto un video che mostra una serie di interviste fatte ai giovani studenti della scuola. Restyling sito web Scuola Superiore Specializzata d Economia (SSSE) Video: sss2.mp4 width: 268px; height: auto; Anno

15 HOMEPAGE SSEA L homepage della SSEA si differenzia come quella della SSIG per i colori utlizzati. Anche in questo caso infatti, invece di avere il colore verde, viene utilizzato il blu, colore che contraddistingue la SSEA. Logo: header-logo-ssea.png width: 306px; height: 31px; Colore_blu: background: #116 eab; 15

16 HOMEPAGE FC La pagina principale della Formazione Continua presenta molte informazioni presenti anche nelle altre pagine, ma con qualche modifica. Le news e la sidebar rimangono invariate; il banner mostra i corsi in evidenza ed è un unico rettangolo giallo. Nella parte inferiore, dopo il testo, troviamo gli sponsor di questa sezione. Il colore che contraddistingue l intera pagina è il giallo. Logo: header-logo-fc.png width: 135px; height: 31px; Colore_giallo: background: #f5ab06; Banner: width: 100%; height: 140px; background: #f5ab06; 16

17 HOMEPAGE FC Accordion L accordion presenta la descrizione dei vari corsi. I colori delle freccette e della barra laterale, riportano alle varie scuole, quindi il blu è collegato alla SSEA, mentre il rosso alla SSIG. Accordion_titolo: font-weight: bold; color: #212121; Accordion_titolo: hover: background: #d5d5d5; Accordion_freccetta: width: 12px; height: 12px; color-ssig: #d53422; color-ssea: #116eab; Accordion_border: border-color: 10px solid #d53422 / #116eab; border-grigio: 1px solid #a6a6a6; Accordion_testo: color: #808080; Accordion_download: color: #666; font-weight: bold; font-size: 12px; Accordion_download: hover: text-decoration: underline; Accordion_download_img: icn-sprite.png width: 25px; height: 25px; 17

18 ELEMENTI GRAFICI Font size Sono qui elencate le caratteristiche che si potranno usare all interno del sito web per la costruzione delle pagine, con i colori e le dimensioni dei vari elementi. Le righe dispari, colorate, prendono il colore della sezione dove sono poste. Il testo invece è uguale come dimensione e colore ovunque. Font: font-family: Arial; Colori_titoli: color_verde_ssse: #4f924d; color_rosso_ssig: #d53422; color_blu_ssea: #116eab; color_giallo_fc: #f5ab06; Paragrafo: line-height: 20px; color: #616161; H1: font-size: 36px; font-weight: normal; H2: font-size: 30px; font-weight: normal; H3: font-size: 24px; font-weight: normal; H4: font-size: 18px; font-weight: normal; H5: font-weight: normal; H6: font-size: 10px; font-weight: normal; 18

19 ELEMENTI GRAFICI Elenco L elenco ha un formato standard, anche in questo caso il colore è lo stesso usato per tutti i testi. Tabella La tabella presenta un grande titolo che prende tutta la lunghezza, con un testo in negativo. Le righe che seguono e riportano i vari elementi si alternano per agevolare la leggibilità, quindi alcuni in negativo e altri in positivo. Icone Il file delle icone racchiude le cinque icone principali. Icone usate unicamente nel metodo monocromatico (nero e grigio), non a colori. Elenco: line-height: 20px; color: #616161; Tabella_ titolo: font-size: 18px; font-wight: bold; color: #ffffff; background: #a5a5a5; Tabella_positivo: color: #616161; Tabella_ negativo: color: #ffffff; background: #a5a5a5; Icone: icn-sprite.png color_nero: #000000; color_grigio: #a2a2a2; 19

20 ELEMENTI GRAFICI Box I box o banner utilizzati all interno del file, hanno il colore delle sezioni che rappresentano. Quando si va in hover con il mouse, il rettangolo diventa più chiaro e cliccandoci sopra, ci riporta alla pagina cercata. Pagination La pagination è classica, anche in questo caso gli elementi prendono i colori delle sezioni in cui sono posti. Nell hover il bottone diventa in negativo, mentre, quando le icone sono active, il background dal colore bianco iniziale diventa grigio. Box: height: 191px; width: 225px; margin-right: 25px; background: colore scuola; Box_titolo: color: #fff; font-size: 17px; Box_paragrafo: color: #fff; font-size: 10px; Box_hover: opacity: 0.8; Pagination_page: color: colore scuola; background: #ffffff; border: 1px solid #dbdbdb; Pagination_page: hover: color: #ffffff; background: colore scuola; Pagination_page: active: color: colore scuola; background: #ededed; border: 1px solid #dbdbdb; 20

21 ELEMENTI GRAFICI Form I form hanno un formato standard, il placeholder al suo interno è di un grigio chiaro, mentre i field di testo hanno uno sfondo bianco. I bottoni prendono il colore della sezione. Il bottone del form ha un comportamento molto classico, normalmente a sfondo bianco con scritta nera, in hover ha la scritta bianca con il colore della selezione a 0.8 di opacità e cliccato, prende il colore pieno. Form_box: border: 1px solid #dbdbdb; background: #ffffff; border_radius: 2px; Form_placeholder: color: #dbdbdb; Form_text: color: # ; Form_bottone: border: 1px solid #dbdbdb; background: #ffffff; border_radius: 2px; color: # ; Form_bottone: hover: border: 1px solid #dbdbdb; background: rbga (213, 52, 34,.8); border_radius: 2px; color: # ffffff; Form_bottone: active: border: 1px solid #dbdbdb; background: #b93729; border_radius: 2px; color: # ffffff; 21

22 ELEMENTI GRAFICI PopOver I popover sono presi standard da Bootstrap. PopOver: border: 1px solid #b7b7b7; background: #ffffff; border_radius: 2px; PopOver_Titolo: font-size: 16px; color: #343434; background: #f7f7f7; border_bottom: #ededed; PopOver_text: color: # ; 22

23 ELEMENTI GRAFICI Alert Gli alert sono di quattro tipi e compaiono nel caso in cui le azioni (p.es. di un form), non risultino corrette o complete, sono elementi standard di Bootstrap. Quote Le citazioni sono formate da due parti, una contiene gli apici ingranditi rispetto il file originale, mentre la parte scritta è in italic rispetto al tutto, ma con la stessa dimensione presente in tutto il testo. Alert_success: border: 1px solid #dce9cd; background: #e4f0d8; border_radius: 2px; color: #5b8949; Alert_important: border: 1px solid #d1e5ee; background: #deecf5; border_radius: 2px; color: #5b88a9; Alert_warning: border: 1px solid #f3eeda; background: #faf7e4; border_radius: 2px; color: #b1985f; Alert_error: border: 1px solid #e0d5d9; background: #ecdede; border_radius: 2px; color: #9e4f4a; Quote: font-style: italic; color: #616161; Quote_apici: font-size: 50px; font-style: italic; color: #616161; 23

24