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

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

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).

PER CHI LAVORA SUL TABLET IN MODALITA' ALTERNATIVA

Se stai svolgendo questa esercitazione in MA usando un tablet, non è possibile ridimensionare la finestra del browser o usare Strumenti per sviluppatori di Chrome.

Potrai invece vedere l'effetto responsive anche sul tablet usando Responsive Design Simulator (domanda B5)

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

B1) Collegati con http://clearairchallenge.com/ e poi ridimensiona la dimensione orizzontale finestra del browser, riducendola.

Osserva anzitutto il menu di navigazione orizzontale:

Dovresti osservare che, riducendo le dimensioni della finestra del browser, a un certo punto il menu orizzontale si trasforma in un menu verticale.

B2) Incolla qui sotto una schermata in cui si veda il menu in verticale (dopo il ridimensionamento):

Guarda adesso a cosa succede alla striscia orizzontale con le diverse icone:

Dovresti osservare che le immagini delle icone cambiano di dimensione più volte via via che si riduce la dimensione orizzontale della finestra del browser:

B3) Incolla qui sotto più schermate nelle quali si vedano le diverse dimensioni assunte dalle icone via via che si riduce la dimensione orizzontale della finestra del browser:

Infine osserva questa parte della pagina:

Riducendo le dimensioni della finestra del browser vedrai che KNOW THE CODES scompare e la striscia sotto a HERE'S HOW IT WORKS si dispone in verticale.

B4) Incolla qui sotto una schermata in cui si vedano gli effetti precedenti:

RESPONSIVE DESIGN

Questo è un esempio di responsive design in azione! Riducendo le dimensioni della finestra del browser simuli l'effetto della pagina visualizzata su un computer (dimensioni grandi), su un tablet (dimensioni intermedie) e su uno smartphone (dimensioni piccole).

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

B5) Copia e incolla in Responsive Design Simulator l’indirizzo del sito precedente 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

B6) Apri di nuovo http://clearairchallenge.com/ 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:

Infine, possiamo verificare il funzionamento responsive con Strumenti per Sviluppatori di Chrome.

B7) Apri Strumenti per Sviluppatori nella pagina precedente.

B8) Separa la finestra di Strumenti per Sviluppatori dalla finestra principale di Chrome scegliendo Undock into separate window:

B9) Scegli Toggle device toolbar come mostrato in figura:

B10) Osserva adesso come cambia la visualizzazione del sito. In pratica Chrome simula come la pagina verrebbe visualizzata con schermi con dimensioni diverse e con diversi dispositivi:

B11) Incolla qui sotto una schermata in cui si veda come la pagina verrebbe visualizzata su un iPad:

B12) Per tornare alla visualizzazione normale basta chiudere la finestra di Strumenti per Sviluppatori.

C) LA NOSTRA PRIMA PAGINA RESPONSIVE

https://youtu.be/ZF-LuN37BoU Vuoi creare anche tu un video come questo e guadagnare PerloCoin? Leggi qui per sapere come si fa (Speedy Movie): https://www.classiperlo.altervista.org/regole/speedy.php

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;}

ATTENZIONE

Se non metti un <div></div> vuoto dentro il BODY della pagina non vedrai nulla!

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; } }

PER CHI LAVORA SUL TABLET IN MODALITA' ALTERNATIVA

Se stai svolgendo questa esercitazione in MA usando un tablet, come ti ho detto prima non puoi ridurre le dimensioni della finestra del browser.

Puoi però fare così. Per prima cosa copia e incolla il codice html in https://htmlpasta.com/ in modo tale da mettere la tua pagina di prova online.

Poi usa http://responsivedesignsimulator.com/ per vedere l'effetto responsive con diverse dimensioni dello schermo.

Puoi usare questo metodo per tutta la parte seguente dell'esercitazione, allo scopo di provare il funzionamento delle tue pagine responsive. Se non ti è chiaro, domanda al prof!

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.

COME FUNZIONA

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 o usando lo Zoom per una prova veloce. Se il DIV non cambia colore come richiesto, c'è un errore e devi correggerlo.

Se hai fatto tutto correttamente, vedrai che il quadrato non si colora mai di rosso e quindi puoi eliminare lo stile con quel colore dalla pagina (sei riuscito a capire perché succede questo?).

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 + respo2.css (pagina html con foglio stile per il posizionamento):

SUGGERIMENTO

Non serve nessun posizionamento. Basta mettere i 4 div uno sotto l’altro.

E2) → Schermata browser

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

SUGGERIMENTO

Il modo più semplice è usare float:left su tutti e 4 i div. Poi, negli stili del div azzurro (tre), aggiungi clear:both

E4) → Schermata browser

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

SUGGERIMENTO

Il modo più semplice è usare float:left su tutti e 4 i div.

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+respo2.css in respo5.html+respo5.css.

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.css) 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.css 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.css.

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.css 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 di respo5.css 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.css:

CONTROLLA!

Non limitarti a incollare il codice senza ragionare! Prova il funzionamento della pagina cambiando le dimensioni della finestra del browser oppure zoomando. 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 (EL5-1_3AST_Struttura_della_pagina_in_HTML5) 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+respo6.css 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:

F2) Racchiudi tutti gli stili di respo6.css in una media query per gli schermi più piccoli di 400px:@media screen and (max-width: 400px){...}

Partendo da respo6.html+respo6.css col menu verticale e la media query precedente, aggiungiamo un'altra media query per trasformare il menu in orizzontale quando lo schermo è più largo di 401px.

ATTENZIONE

Non devi creare due classi diverse, una di nome orizzontale e l'altra di nome verticale! È sufficiente che applichi i tuoi stili all'elemento UL.

Cioè devi fare qualcosa del genere:

@media screen and (max-width: ...px) {

ul{...

}...}

@media screen and (min-width: ...px){

ul { ...

}...}

F3) Aggiungi a respo6.css una media query che applica alla lista UL gli stili per il menu orizzontale quando lo schermo è più largo di 401px:

@media screen and (min-width: 401px)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 oppure zoomando. 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 e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

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) 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 HTML+CSSrespo2.html+respo2.css HTML+CSSrespo3.html+respo3.css HTML+CSSrespo4.html+respo4.css HTML+CSSrespo5.html+respo5.css HTML+CSSrespo6.html+respo6.css HTML+CSS

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