1
00:00:00,000 --> 00:00:04,717
[MUSIC]

2
00:00:04,717 --> 00:00:09,290
In questi giorni, nel mondo dello sviluppo web, sentiamo spesso persone

3
00:00:09,290 --> 00:00:14,721
menzionare i termini responsive design e mobile first approach.

4
00:00:14,721 --> 00:00:18,558
Proviamo a capire cosa si intende con questi termini e

5
00:00:18,558 --> 00:00:23,480
come influenzano il modo in cui si progetta i siti web e le applicazioni web.

6
00:00:25,490 --> 00:00:30,745
La tua domanda ovvia sarà perché considerare il design reattivo?

7
00:00:30,745 --> 00:00:38,040
Per aiutarci a capire questo, consideriamo come le persone accedono ai siti web in questi giorni?

8
00:00:38,040 --> 00:00:42,980
Tradizionalmente, quando i siti web sono stati progettati per la prima volta, si potrebbe presumere

9
00:00:42,980 --> 00:00:47,100
che le persone esploreranno i tuoi siti web da un computer.

10
00:00:48,170 --> 00:00:55,694
In questi giorni i tuoi siti web potrebbero essere visitati da uno smartphone, un tablet o

11
00:00:55,694 --> 00:01:02,250
un computer con diverse dimensioni dello schermo e risoluzioni dello schermo.

12
00:01:02,250 --> 00:01:09,350
Come rendiamo i nostri siti web in modo coerente su dispositivi di schermi di diverse dimensioni?

13
00:01:10,530 --> 00:01:14,570
La taglia unica adatta a tutti l'approccio che i

14
00:01:14,570 --> 00:01:19,020
progettisti di siti web tradizionali non hanno più preso fattura fissa.

15
00:01:19,020 --> 00:01:24,338
Abbiamo bisogno di un approccio migliore, un approccio che

16
00:01:24,338 --> 00:01:30,940
adegui automaticamente il tuo sito web alle dimensioni dello schermo su cui viene visualizzato.

17
00:01:30,940 --> 00:01:38,190
Questo è dove dobbiamo adottare un approccio per adattarsi alla porta di visualizzazione dell'utente.

18
00:01:38,190 --> 00:01:42,890
Questo deve essere integrato nel design e nello sviluppo del tuo sito web in modo

19
00:01:42,890 --> 00:01:49,000
che si adatti automaticamente alla finestra di visualizzazione del dispositivo dell'utente.

20
00:01:50,260 --> 00:01:53,437
Per aiutarti ad apprezzare meglio la necessità di

21
00:01:53,437 --> 00:01:57,170
indirizzare dispositivi di diverse dimensioni dello schermo.

22
00:01:57,170 --> 00:02:03,273
Sto prendendo l'aiuto delle opzioni di sviluppo che potrebbero

23
00:02:03,273 --> 00:02:10,110
fornire il browser Safari che mi consente di visualizzare il sito web con schermi di diverse dimensioni.

24
00:02:10,110 --> 00:02:15,470
Così si spera che vi convincerà del perché abbiamo reso responsive web design.

25
00:02:15,470 --> 00:02:19,622
Quindi qui vedete che il sito Coursera viene

26
00:02:19,622 --> 00:02:24,476
reso su un 1920 da 1080 siti schermo.

27
00:02:24,476 --> 00:02:32,088
Questo sarebbe un tipico desktop di grandi dimensioni o uno schermo laptop ad alta risoluzione.

28
00:02:32,088 --> 00:02:38,810
Quindi consideriamo lo stesso sito Web visualizzato utilizzando uno schermo più piccolo tale.

29
00:02:38,810 --> 00:02:44,126
Quindi vedi automaticamente il layout dello schermo si sta

30
00:02:44,126 --> 00:02:49,214
adattando leggermente alle dimensioni della finestra del tuo dispositivo,

31
00:02:49,214 --> 00:02:52,281
stessa cosa a 800 per 600.

32
00:02:52,281 --> 00:02:59,708
Quindi andiamo giù nelle dimensioni dello schermo, questa è una vista ravvicinata iPad dello stesso sito.

33
00:02:59,708 --> 00:03:05,826
Si tratta di un iPad Air 2, questo è un iPad Mini 4 dimensioni,

34
00:03:05,826 --> 00:03:10,125
nota la transizione da un iPad Mini 4

35
00:03:10,125 --> 00:03:15,610
a un iPhone 6S Plus in modalità verticale.

36
00:03:15,610 --> 00:03:23,090
Ora noterai che il Navigation Bot è ora compresso in un pulsante qui,

37
00:03:23,090 --> 00:03:28,850
che quando fai clic rivelerà le opzioni dal tuo Navigation Bash.

38
00:03:28,850 --> 00:03:35,027
E diamo un'occhiata alla stessa cosa nel nostro iPhone 6S

39
00:03:35,027 --> 00:03:40,990
in modalità orizzontale, nota come lo schermo si adotta da solo.

40
00:03:40,990 --> 00:03:46,578
Allo stesso modo per un iPhone 6S in modalità orizzontale e

41
00:03:46,578 --> 00:03:52,300
andare giù a un iPhone SE, e si vede come il sito web

42
00:03:52,300 --> 00:03:56,941
ha cambiato il modo in cui viene reso.

43
00:03:56,941 --> 00:04:03,395
Quindi, si spera, questo esempio ti ha illustrato come e

44
00:04:03,395 --> 00:04:07,357
perché abbiamo bisogno di un web design reattivo.

45
00:04:07,357 --> 00:04:12,240
Il secondo concetto correlato che ascolterai è mobile prima.

46
00:04:12,240 --> 00:04:17,749
Il primo approccio mobile guarda invece alla progettazione di un sito web per

47
00:04:17,749 --> 00:04:19,725
un dispositivo mobile prima.

48
00:04:19,725 --> 00:04:27,465
Quindi considera come soddisferesti i vincoli dello schermo del tuo dispositivo mobile.

49
00:04:27,465 --> 00:04:32,472
E poi, man mano che le dimensioni dello schermo si espandono, si

50
00:04:32,472 --> 00:04:38,162
avvierà automaticamente un'app sul tuo sito Web alle dimensioni dello schermo più grandi e grandi.

51
00:04:38,162 --> 00:04:41,548
Forse, sei disposto sempre più del contenuto.

52
00:04:41,548 --> 00:04:47,050
In modo da sfruttare il crescente schermo immobiliare.

53
00:04:47,050 --> 00:04:51,974
Quindi lo stesso sito web quando si vede su un dispositivo mobile potrebbe avere solo

54
00:04:51,974 --> 00:04:56,091
parti delle informazioni rivelate all'utente.

55
00:04:56,091 --> 00:05:00,754
Ma poi quando viene eseguito su un desktop completo

56
00:05:00,754 --> 00:05:05,960
potrebbe mostrare una versione molto più dettagliata del sito web.

57
00:05:05,960 --> 00:05:11,020
Ora questo deve essere adattato automaticamente in base alle informazioni

58
00:05:11,020 --> 00:05:16,180
che ottieni dal dispositivo da cui viene visualizzato il tuo sito web.

59
00:05:16,180 --> 00:05:18,519
Allora, come otteniamo queste informazioni?

60
00:05:18,519 --> 00:05:23,610
Fortunatamente, fare un web design reattivo è supportato da

61
00:05:23,610 --> 00:05:29,950
molti dei moderni framework dell'interfaccia utente web front-end incluso Bootstrap.

62
00:05:29,950 --> 00:05:37,230
Quindi, quando guardiamo la definizione di Bootstrap sulla sua pagina web, dice, il

63
00:05:37,230 --> 00:05:41,128
primo approccio mobile reattivo.

64
00:05:41,128 --> 00:05:43,985
Si', come facciamo a fare web design reattivo?

65
00:05:43,985 --> 00:05:49,858
Quindi ci sono diversi concetti che sono incorporati nei

66
00:05:49,858 --> 00:05:57,170
framework dell'interfaccia utente web frame time che vengono in aiuto quando è necessario eseguire un web design reattivo.

67
00:05:57,170 --> 00:06:00,819
Prima di tutto è ciò che viene chiamato è un sistema di griglia?

68
00:06:00,819 --> 00:06:05,624
Vedremo più in dettaglio il sistema Grid di Bootstrap nella prossima

69
00:06:05,624 --> 00:06:06,319
lezione.

70
00:06:06,319 --> 00:06:11,201
In modo da capire esattamente come possiamo sfruttare questo per essere in grado di realizzare

71
00:06:11,201 --> 00:06:13,720
web design reattivo.

72
00:06:13,720 --> 00:06:21,110
Il secondo aspetto sono le immagini fluide, in modo che le immagini che includi nel tuo

73
00:06:21,110 --> 00:06:26,940
sito web si adattino automaticamente alle dimensioni dello schermo.

74
00:06:26,940 --> 00:06:34,890
E la terza parte è ciò che viene chiamato un CSS media query dal tuo codice CSS.

75
00:06:34,890 --> 00:06:41,110
È possibile interrogare le dimensioni del supporto e quindi regolare in modo appropriato le classi CSS

76
00:06:41,110 --> 00:06:46,230
per adattarsi alle dimensioni dello schermo del dispositivo.

77
00:06:46,230 --> 00:06:48,730
Ora come funzionano le query multimediali?

78
00:06:48,730 --> 00:06:50,950
Diamo un'occhiata a quello dopo.

79
00:06:50,950 --> 00:06:55,080
Le query multimediali sono supportate in CSS come questo.

80
00:06:55,080 --> 00:07:00,930
Quindi la tecnologia consente di eseguire una query multimediale per specificare la larghezza minima

81
00:07:00,930 --> 00:07:07,730
dello schermo in cui questo particolare insieme di classi CSS sarà attivo.

82
00:07:07,730 --> 00:07:12,267
Quindi questo sarebbe specificato nel tuo file CSS come @media, e

83
00:07:12,267 --> 00:07:17,187
quindi all'interno della parentesi, specifichi ad esempio, min-width.

84
00:07:17,187 --> 00:07:21,231
Ci sono molte più opzioni per le query multimediali di quello che sto mostrando qui.

85
00:07:21,231 --> 00:07:28,750
Questo è solo un esempio di come si costruisce una query multimediale nel codice CSS.

86
00:07:30,060 --> 00:07:34,990
Dando un'occhiata al codice CSS di Bootstrap stesso,

87
00:07:34,990 --> 00:07:40,910
entriamo e vediamo come le query multimediali vengono utilizzate da Bootstrap.

88
00:07:40,910 --> 00:07:45,789
Quindi qui vedi un esempio di una query multimediale in cui dice, @media e

89
00:07:45,789 --> 00:07:47,854
min-width 576 pixel.

90
00:07:47,854 --> 00:07:54,906
E poi specifica che quei particolari contenitore di chiamata di classe CSS,

91
00:07:54,906 --> 00:07:59,960
che impareremo di più nella prossima lezione,

92
00:07:59,960 --> 00:08:04,150
e anche nell'esercizio che segue.

93
00:08:04,150 --> 00:08:12,640
Vedremo che la larghezza del contenitore è impostata in base alla larghezza dello schermo.

94
00:08:12,640 --> 00:08:17,590
Allo stesso modo, per una schermata di larghezza maggiore, la larghezza del contenitore viene regolata automaticamente.

95
00:08:17,590 --> 00:08:22,251
Quindi questo è ciò che consente al framework dell'interfaccia utente web di

96
00:08:22,251 --> 00:08:25,604
supportare il web design reattivo.

97
00:08:25,604 --> 00:08:30,762
Quindi facendo query multimediali, il framework dell'interfaccia utente web è in grado di

98
00:08:30,762 --> 00:08:36,928
stabilire quale tipo di dispositivo stai eseguendo il rendering del tuo sito web.

99
00:08:36,928 --> 00:08:41,849
E regolare in modo corrispondente le classi CSS per

100
00:08:41,849 --> 00:08:46,401
adattarsi alle dimensioni dello schermo dei dispositivi particolari.

101
00:08:46,401 --> 00:08:50,821
Quindi, ovviamente, la prossima domanda che ti verrà in mente è come

102
00:08:50,821 --> 00:08:52,870
farlo nella pratica?

103
00:08:52,870 --> 00:08:56,540
Fortunatamente, se inizi con un

104
00:08:56,540 --> 00:09:01,700
framework interfaccia utente web front-end ben progettato come Bootstrap, le cose diventano molto semplici.

105
00:09:01,700 --> 00:09:08,023
Impareremo di più su questo nella prossima lezione e l'esercizio che segue.

106
00:09:08,023 --> 00:09:13,999
[ MUSIC]