EL5-2_3ST INTRODUZIONE AL RESPONSIVE DESIGNAutore: __________________________________________ Data: _________Classe: ____

Se ci sono domande a cui non sai rispondere, puoi lasciarle vuote, ma devi scriverlo alla fine dell'esercitazione. Domande senza risposta (o con generica risposta NON SO) e non elencate alla fine, potranno comportare l'annullamento dell'esercitazione (se 3 o più).

ABBREVIAZIONI (SHORTHAND)

→pagina.htmlIndica la creazione di un file col nome indicato nella cartella dell'esercitazione (a partire dal template di pagina vuota o mediante copia e incolla dalle pagine precedenti). Segue descrizione del file da creare o immagine esplicativa.

→ Schermata browserIndica che bisogna incollare una schermata della pagina corrente visualizzata nel brower.

→ ValidatoreIndica che bisogna validare la pagina e incollare una schermata del validatore.

ATTENZIONE: non verranno accettate validazioni in cui non è visibile l'indirizzo della pagina validata

→ GIFIndica che bisogna registrare un filmato GIF

→ Codice HTMLIndica che bisogna incollare il codice specificato (es. HTML, CSS, JS)

A) OPERAZIONI PRELIMINARI

A1) Crea una sottocartella di ES5 con nome uguale a quello di questa esercitazione (EL5-2_3AST Introduzione al responsive design)

A2) All'interno della sottocartella EL5-2_3AST Introduzione al responsive design salva questo file Word

B) RESPONSIVE DESIGN

Con Responsive Design si intende una tecnica di progettazione di siti web in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (monitor PC con diverse risoluzioni, tablet, smartphone, cellulari, tv, etc).

Vediamo subito un esempio di responsive design applicato a un sito web.

B1) Collegati con https://www.julianabicycles.com/en/it e poi ridimensiona la dimensione orizzontale finestra del browser. Dovresti osservare che l’aspetto della pagina cambia al cambiare delle sue dimensioni:

Concentriamoci su alcuni particolari. La striscia orizzontale con i diversi modelli di bici su uno schermo di grande ampiezza viene visualizzata così:

B2) Incolla qui sotto una schermata in cui si veda come la stessa parte della pagina cambia quando le dimensioni orizzontali dello schermo diventano piccole (tipo smartphone):

Osserva anche il menu orizzontale di navigazione:

B3) Incolla qui sotto una schermata in cui si veda come il menu di navigazione cambia quando le dimensioni orizzontali dello schermo diventano piccole (tipo smartphone):

Uno strumento molto utile per verificare il funzionamento di una pagina responsive è Responsive Design Simulator (http://responsivedesignsimulator.com/)

B4) Copia e incolla in Responsive Design Simulator l’indirizzo del sito precedente (quello delle biciclette) e premi invio. Vedrai una simulazione dell’aspetto della pagina con diversi tipi di schermi. Incolla qui una schermata dove si veda la visualizzazione in un IPhone 5:

Potrai usare Responsive Design Simulator in futuro per testare il tuo sito responsive.

Un altro modo rapido, anche se non molto preciso, per testare una pagina responsive, è effettuare uno zoom col browser

B5) Apri di nuovo https://www.julianabicycles.com/en/it nel tuo browser e poi zooma ingrandendo la pagina (tieni premuto CTRL e usa la rotellina centrale del mouse). Dovresti osservare che gli elementi della pagina si trasformano in base al responsive design. Incolla qui sotto due schermate dello stesso particolare della pagina prima e dopo lo zoom, in cui si veda l’effetto del responsive design:

C) LA NOSTRA PRIMA PAGINA RESPONSIVE

C1) Crea una pagina respo1.html dentro alla cartella di questa esercitazione. La pagina deve contenere solo un DIV con i seguenti stili (incorporati nella pagina):div{width: 100px;height: 100px;background-color: red;}

C2) → Schermata browser

C3) Adesso aggiungi agli stili questo codice (puoi scriverlo subito dopo gli stili precedenti):

@media screen and (max-width: 600px) { div { background-color: blue; } }

C4) Riduci ora le dimensioni orizzontali della finestra del browser, finché non vedrai che il DIV cambia colore. In alternativa, puoi zoomare ingrandendo la pagina, come spiegato sopra. Incolla qui sotto una schermata dove si veda il cambiamento:

D) MEDIA QUERY: COME FUNZIONA

L’istruzione seguente si chiama media query:

@media screen and (max-width: 600px) { div { background-color: blue; } }

La nostra media query è fatta così:

Tradotto in italiano, la media query precedente dice:

1. @media screen and (max-width: 600px) se lo schermo ha una larghezza massima di 600px

2. div { background-color: blue; }colora lo sfondo del DIV di blu

In pratica la media query aggiunge uno stile colore di sfondo, nel caso in cui lo schermo abbia una larghezza massima di 600px:

BREAK POINT

Il valore 600px si dice break point (letteralmente: punto di rottura o di interruzione). In pratica un break point è un valore di larghezza dello schermo, in corrispondenza del quale (al di sotto o al di sopra di esso) vengono modificati gli stili applicati alla pagina.

Lo stile si deve trovare dentro la coppia di parentesi graffe della media query.

Osserva ancora che lo stile (o gli stili – possono essere più di uno) aggiunto dalla media query, sostituisce lo stile definito precedentemente per lo stesso DIV. In pratica background-color: red viene sostituito con background-color: blue;, quando lo schermo è più largo di 600px. Gli altri stili applicati al DIV (width, height) rimangono invariati:

D1) Considera ora quest’altra media query:@media screen and (min-width: 601px) and (max-width: 1000px)

D2) Spiegami cosa significa:

D3) Aggiungi la media query precedente a respo1.html in modo da colorare di giallo lo sfondo del DIV quando la larghezza dello schermo è compresa fra 601px e 1000px. Incolla il codice HTML:

D4) Dovresti adesso essere in grado di costruire una terza media query che colora lo sfondo del DIV di verde quando le dimensioni dello schermo superano i 1000px. Incolla il codice:

TEST DELLA PAGINA

Non limitarti a incollare il codice senza ragionare! Prova il funzionamento della pagina cambiando le dimensioni della finestra del browser. Se il DIV non cambia colore come richiesto, c'è un errore e devi correggerlo.

E) LAY OUT RESPONSIVE

Per lay out responsive di una pagina, si intende una pagina nella quale la disposizione dei diversi elementi cambia in base alle dimensioni dello schermo.

E1) Costruisci una pagina contenente 4 DIV colorati diversamente, ciascuno con dimensione 300x300px, come in figura. Salva la pagina in respo2.html:

E2) → Schermata browser

E3) Fai una copia di respo2.html in respo3.html. Usando le tecniche di posizionamento, cambia la posizione dei blocchi tre e quattro in modo da portarla sotto i primi due blocchi:

E4) → Schermata browser

E5) Fai una copia di respo2.html in respo4.html. Usando le tecniche di posizionamento, cambia la posizione dei blocchi tre e quattro in modo da portarli accanto ai primi due blocchi:

E6) → Schermata browser

Le tre pagine che abbiamo realizzato (respo2.html, respo3.html, respo4.html) rappresentano tre versioni diverse della stessa pagina, da visualizzare su dispositivi con diverse ampiezze di schermo:

Vogliamo adesso realizzare un'unica pagina respo5.hml che modifica il proprio layout a seconda delle dimensioni orizzontali dello schermo.

E7) Fai una copia di respo2.html in respo5.html.

Partiamo dunque da respo5.html, la quale contiene i 4 DIV visualizzati uno sotto l'altro, come devono comparire su un piccolo schermo (smartphone).

Di solito nel progettare una pagina responsive è consigliabile partire dallo schermo più piccolo. Questa tecnica è nota come mobile first design (progettazione partendo dallo smartphone).

MOBILE FIRST DESIGN (MFD)

Secondo il mobile first design (MFD), nella progettazione del sito, è necessario partire dalla strutturazione dei contenuti per lo schermo più piccolo dei dispositivi mobili. Non si parte, quindi, da un layout concepito per il desktop (grande schermo) per poi adattarlo per il mobile (piccolo schermo). Al contrario, si parte dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto sui dispositivi più capaci, man mano che aumentano le dimensioni dello schermo (ma anche la potenza dell’hardware).

Seguendo i principi del MFD, modifichiamo la nostra pagina mobile (respo5.html) per introdurre le funzionalità degli schermi più grandi.

In pratica nel nostro esempio noi vogliamo che, quando le dimensioni dello schermo sono maggiori di 600 px e minori di 1200px, venga visualizzato quest'altro layout:

E8) Introduci in respo5.html una media query in base alla quale, se le dimensioni dello schermo sono comprese fra 600px e 1200px, modifichi il layout come in figura qui sopra. Se non sai come fare, leggi il box qui sotto.

COME SI FA (SE NON TI È CHIARA LA SPIEGAZIONE, DOMANDA!)

È molto semplice. Basta creare la media query con le dimensioni precedenti e quindi copiare all'interno delle parentesi graffe gli stili di posizionamento di respo3.html.

ATTENZIONE: non serve una media query per gli stili del dispositivo mobile. Questa è la situazione di default, quella predefinita, che viene applicata sempre in assenza di diverse istruzioni.

Se ci sono stili che non vengono ridefiniti dalla nuova media query (es. il colore dei box, che non cambia al cambiare della larghezza dello schermo), non ripetere questi stili nella media query (cancellarli dalla media query).

Ancora meglio, gli stili comuni a tutti i box (es. le dimensioni) possono essere applicati direttamente all'elemento DIV, invece che ai singoli elementi.

Infine vogliamo aggiungere una media query che, se le dimensioni dello schermo superano i 1200 pixel, visualizzi il seguente lay out:

E9) Introduci in respo5.html una media query in base alla quale, se le dimensioni dello schermo superano 1200px, modifichi il layout come in figura qui sopra. Puoi ricopiare gli stessi stili usati in respo4.html.

E10) Nel codice CSS di respo5.html controlla che non ci siano inutili ripetizioni di stili e, se ci sono, eliminale. Se gli stili non vengono ridefiniti nelle media query, è inutile ripeterli ogni volta (es. lo stile colore dei box, che non cambia mai). Gli stili comuni a tutti i box (es. dimensioni) vanno dichiarati con un DIV e non ripetuti per ogni blocco.

E11) Codice di respo5.html:

CONTROLLA!

Non limitarti a incollare il codice senza ragionare! Prova il funzionamento della pagina cambiando le dimensioni della finestra del browser. Se non osservi il cambiamento del layout (tre diverse disposizioni dei blocchi), significa che c'è un errore!

F) UN MENU DI NAVIGAZIONE RESPONSIVE

Nell'esercitazione precedente abbiamo visto come si fa a trasformare una lista non ordinata in un menu di navigazione orizzontale oppure verticale:

Adesso vogliamo realizzare una pagina con un menu verticale che si trasforma in un menu orizzontale quando la larghezza dello schermo supera i 400px.

F1) Crea respo6.html con un menu verticale realizzato per mezzo di una lista non numerata con gli stili opportuni (usa la tecnica spiegata nella precedente esercitazione – per i link metti href="#" in modo di linkare alla pagina stessa). Incolla una schermata della pagina.

Il menu verticale è utile per gli schermi piccoli, nei quali il menu di navigazione orizzontale obbligherebbe a scorrere (scrolling) lo schermo:

Partendo da respo6.html col menu verticale, aggiungiamo dunque una media query per trasformare il menu precedente in orizzontale quando lo schermo è più largo di 400px,

F2) Stiamo applicando la tecnica mobile first design. Mi spieghi cosa vuol dire (in questo caso)?

F3) Aggiungi a respo6.html una media query che applica alla lista UL gli stili per il menu orizzontale quando lo schermo è più largo di 400px. Incolla qui sotto il codice della pagina:

TEST DELLA PAGINA

Non limitarti a incollare il codice senza ragionare! Prova il funzionamento della pagina cambiando le dimensioni della finestra del browser. Se non osservi il cambiamento del layout (il menu orizzontale si trasforma in verticale quando lo schermo è piccolo), significa che c'è un errore!

G) OPERAZIONI FINALI

G1) Controlla di aver risposto a tutte le domande contenute in questa esercitazione. Se hai tralasciato alcune domande perché non sai rispondere, elencale qui (es. B2):

G2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

G3) Se lavori a scuola, svuota la cartella tua Download (prima salva gli eventuali file che ti servono!) e poi incolla qui sotto una schermata in cui si veda la cartella Download vuota insieme con l'orologio e la data del PC (in fondo allo schermo). Se lavori sul PC di casa, puoi saltare questa domanda.

G4) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL5-2_3AST Introduzione al responsive design

Word Il file di questa esercitazione

respo1.html HTMLrespo2.html HTMLrespo3.html HTMLrespo4.html HTMLrespo5.html HTMLrespo6.html HTML

G5) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.