[MUSIC]
In questi giorni, nel mondo dello sviluppo web, sentiamo spesso persone
menzionare i termini responsive design e mobile first approach.
Proviamo a capire cosa si intende con questi termini e
come influenzano il modo in cui si progetta i siti web e le applicazioni web.
La tua domanda ovvia sarà perché considerare il design reattivo?
Per aiutarci a capire questo, consideriamo come le persone accedono ai siti web in questi giorni?
Tradizionalmente, quando i siti web sono stati progettati per la prima volta, si potrebbe presumere
che le persone esploreranno i tuoi siti web da un computer.
In questi giorni i tuoi siti web potrebbero essere visitati da uno smartphone, un tablet o
un computer con diverse dimensioni dello schermo e risoluzioni dello schermo.
Come rendiamo i nostri siti web in modo coerente su dispositivi di schermi di diverse dimensioni?
La taglia unica adatta a tutti l'approccio che i
progettisti di siti web tradizionali non hanno più preso fattura fissa.
Abbiamo bisogno di un approccio migliore, un approccio che
adegui automaticamente il tuo sito web alle dimensioni dello schermo su cui viene visualizzato.
Questo è dove dobbiamo adottare un approccio per adattarsi alla porta di visualizzazione dell'utente.
Questo deve essere integrato nel design e nello sviluppo del tuo sito web in modo
che si adatti automaticamente alla finestra di visualizzazione del dispositivo dell'utente.
Per aiutarti ad apprezzare meglio la necessità di
indirizzare dispositivi di diverse dimensioni dello schermo.
Sto prendendo l'aiuto delle opzioni di sviluppo che potrebbero
fornire il browser Safari che mi consente di visualizzare il sito web con schermi di diverse dimensioni.
Così si spera che vi convincerà del perché abbiamo reso responsive web design.
Quindi qui vedete che il sito Coursera viene
reso su un 1920 da 1080 siti schermo.
Questo sarebbe un tipico desktop di grandi dimensioni o uno schermo laptop ad alta risoluzione.
Quindi consideriamo lo stesso sito Web visualizzato utilizzando uno schermo più piccolo tale.
Quindi vedi automaticamente il layout dello schermo si sta
adattando leggermente alle dimensioni della finestra del tuo dispositivo,
stessa cosa a 800 per 600.
Quindi andiamo giù nelle dimensioni dello schermo, questa è una vista ravvicinata iPad dello stesso sito.
Si tratta di un iPad Air 2, questo è un iPad Mini 4 dimensioni,
nota la transizione da un iPad Mini 4
a un iPhone 6S Plus in modalità verticale.
Ora noterai che il Navigation Bot è ora compresso in un pulsante qui,
che quando fai clic rivelerà le opzioni dal tuo Navigation Bash.
E diamo un'occhiata alla stessa cosa nel nostro iPhone 6S
in modalità orizzontale, nota come lo schermo si adotta da solo.
Allo stesso modo per un iPhone 6S in modalità orizzontale e
andare giù a un iPhone SE, e si vede come il sito web
ha cambiato il modo in cui viene reso.
Quindi, si spera, questo esempio ti ha illustrato come e
perché abbiamo bisogno di un web design reattivo.
Il secondo concetto correlato che ascolterai è mobile prima.
Il primo approccio mobile guarda invece alla progettazione di un sito web per
un dispositivo mobile prima.
Quindi considera come soddisferesti i vincoli dello schermo del tuo dispositivo mobile.
E poi, man mano che le dimensioni dello schermo si espandono, si
avvierà automaticamente un'app sul tuo sito Web alle dimensioni dello schermo più grandi e grandi.
Forse, sei disposto sempre più del contenuto.
In modo da sfruttare il crescente schermo immobiliare.
Quindi lo stesso sito web quando si vede su un dispositivo mobile potrebbe avere solo
parti delle informazioni rivelate all'utente.
Ma poi quando viene eseguito su un desktop completo
potrebbe mostrare una versione molto più dettagliata del sito web.
Ora questo deve essere adattato automaticamente in base alle informazioni
che ottieni dal dispositivo da cui viene visualizzato il tuo sito web.
Allora, come otteniamo queste informazioni?
Fortunatamente, fare un web design reattivo è supportato da
molti dei moderni framework dell'interfaccia utente web front-end incluso Bootstrap.
Quindi, quando guardiamo la definizione di Bootstrap sulla sua pagina web, dice, il
primo approccio mobile reattivo.
Si', come facciamo a fare web design reattivo?
Quindi ci sono diversi concetti che sono incorporati nei
framework dell'interfaccia utente web frame time che vengono in aiuto quando è necessario eseguire un web design reattivo.
Prima di tutto è ciò che viene chiamato è un sistema di griglia?
Vedremo più in dettaglio il sistema Grid di Bootstrap nella prossima
lezione.
In modo da capire esattamente come possiamo sfruttare questo per essere in grado di realizzare
web design reattivo.
Il secondo aspetto sono le immagini fluide, in modo che le immagini che includi nel tuo
sito web si adattino automaticamente alle dimensioni dello schermo.
E la terza parte è ciò che viene chiamato un CSS media query dal tuo codice CSS.
È possibile interrogare le dimensioni del supporto e quindi regolare in modo appropriato le classi CSS
per adattarsi alle dimensioni dello schermo del dispositivo.
Ora come funzionano le query multimediali?
Diamo un'occhiata a quello dopo.
Le query multimediali sono supportate in CSS come questo.
Quindi la tecnologia consente di eseguire una query multimediale per specificare la larghezza minima
dello schermo in cui questo particolare insieme di classi CSS sarà attivo.
Quindi questo sarebbe specificato nel tuo file CSS come @media, e
quindi all'interno della parentesi, specifichi ad esempio, min-width.
Ci sono molte più opzioni per le query multimediali di quello che sto mostrando qui.
Questo è solo un esempio di come si costruisce una query multimediale nel codice CSS.
Dando un'occhiata al codice CSS di Bootstrap stesso,
entriamo e vediamo come le query multimediali vengono utilizzate da Bootstrap.
Quindi qui vedi un esempio di una query multimediale in cui dice, @media e
min-width 576 pixel.
E poi specifica che quei particolari contenitore di chiamata di classe CSS,
che impareremo di più nella prossima lezione,
e anche nell'esercizio che segue.
Vedremo che la larghezza del contenitore è impostata in base alla larghezza dello schermo.
Allo stesso modo, per una schermata di larghezza maggiore, la larghezza del contenitore viene regolata automaticamente.
Quindi questo è ciò che consente al framework dell'interfaccia utente web di
supportare il web design reattivo.
Quindi facendo query multimediali, il framework dell'interfaccia utente web è in grado di
stabilire quale tipo di dispositivo stai eseguendo il rendering del tuo sito web.
E regolare in modo corrispondente le classi CSS per
adattarsi alle dimensioni dello schermo dei dispositivi particolari.
Quindi, ovviamente, la prossima domanda che ti verrà in mente è come
farlo nella pratica?
Fortunatamente, se inizi con un
framework interfaccia utente web front-end ben progettato come Bootstrap, le cose diventano molto semplici.
Impareremo di più su questo nella prossima lezione e l'esercizio che segue.
[ MUSIC]