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

2
00:00:04,717 --> 00:00:09,290
De nos jours dans le monde du développement web, nous entendons souvent

3
00:00:09,290 --> 00:00:14,721
parler des termes responsive design et mobile first approach.

4
00:00:14,721 --> 00:00:18,558
Essayons de comprendre ce que l'on entend par ces termes et

5
00:00:18,558 --> 00:00:23,480
comment ils affectent la façon dont vous concevez vos sites Web et vos applications Web.

6
00:00:25,490 --> 00:00:30,745
Votre question évidente va être pourquoi envisager un design réactif ?

7
00:00:30,745 --> 00:00:38,040
Pour nous aider à comprendre cela, considérons comment les gens accèdent aux sites Web de nos jours ?

8
00:00:38,040 --> 00:00:42,980
Traditionnellement, lorsque les sites Web ont été conçus pour la première fois, vous pourriez à peu près supposer

9
00:00:42,980 --> 00:00:47,100
que les gens navigueront sur vos sites Web à partir d'un ordinateur.

10
00:00:48,170 --> 00:00:55,694
Ces jours-ci, vos sites Web peuvent être consultés à partir d'un smartphone, d'

11
00:00:55,694 --> 00:01:02,250
une tablette ou d'un ordinateur avec différentes tailles d'écran et résolutions d'écran.

12
00:01:02,250 --> 00:01:09,350
Comment rendre nos sites Web de manière cohérente sur des appareils de différentes tailles d'écran ?

13
00:01:10,530 --> 00:01:14,570
La taille unique s'adapte à toutes les approches que les

14
00:01:14,570 --> 00:01:19,020
concepteurs de sites Web traditionnels ont pris plus facture fixe.

15
00:01:19,020 --> 00:01:24,338
Nous avons besoin d'une meilleure approche, une approche qui

16
00:01:24,338 --> 00:01:30,940
adaptera automatiquement votre site Web à la taille de l'écran sur lequel il est visualisé.

17
00:01:30,940 --> 00:01:38,190
C' est là que nous devons adopter une approche pour nous adapter au port de vue de l'utilisateur.

18
00:01:38,190 --> 00:01:42,890
Cela doit être intégré dans la conception et le développement de votre site Web afin

19
00:01:42,890 --> 00:01:49,000
qu'il s'adapte automatiquement à la fenêtre d'affichage de l'appareil de l'utilisateur.

20
00:01:50,260 --> 00:01:53,437
Pour vous aider à mieux apprécier la nécessité d'

21
00:01:53,437 --> 00:01:57,170
adresser des appareils de différentes tailles d'écran.

22
00:01:57,170 --> 00:02:03,273
Je prends l'aide des options de développement qui pourrait navigateur Safari

23
00:02:03,273 --> 00:02:10,110
fournit qui me permet de voir le site Web avec des écrans de différentes tailles.

24
00:02:10,110 --> 00:02:15,470
Donc, j'espère que vous convaincrez de la raison pour laquelle nous avons fait de la conception web responsive.

25
00:02:15,470 --> 00:02:19,622
Donc ici, vous voyez que le site Coursera étant

26
00:02:19,622 --> 00:02:24,476
rendu sur un 1920 par 1080 sites écran.

27
00:02:24,476 --> 00:02:32,088
Ce serait un grand ordinateur de bureau typique ou un écran d'ordinateur portable haute résolution.

28
00:02:32,088 --> 00:02:38,810
Ensuite, considérons le même site Web étant vu à l'aide d'un écran plus petit tel.

29
00:02:38,810 --> 00:02:44,126
Ainsi, vous voyez automatiquement votre disposition d'écran

30
00:02:44,126 --> 00:02:49,214
s'ajuste légèrement à la taille de la fenêtre d'affichage de votre appareil,

31
00:02:49,214 --> 00:02:52,281
même chose à 800 par 600.

32
00:02:52,281 --> 00:02:59,708
Donc, nous allons descendre dans les tailles d'écran, c'est une vue de fermeture iPad du même site.

33
00:02:59,708 --> 00:03:05,826
Il s'agit d'une taille d'iPad Air 2, il s'agit d'une taille d'iPad Mini 4,

34
00:03:05,826 --> 00:03:10,125
notez la transition d'une

35
00:03:10,125 --> 00:03:15,610
taille d'iPad Mini 4 à un iPhone 6S Plus en mode portrait.

36
00:03:15,610 --> 00:03:23,090
Vous remarquerez maintenant que le Bot de navigation s'est maintenant réduit en un bouton ici,

37
00:03:23,090 --> 00:03:28,850
qui, lorsque vous cliquez sur, révélera les options de votre Navigation Bash.

38
00:03:28,850 --> 00:03:35,027
Et regardons la même chose dans notre iPhone 6S

39
00:03:35,027 --> 00:03:40,990
en mode paysage, notez comment l'écran s'adopte lui-même.

40
00:03:40,990 --> 00:03:46,578
De même pour un iPhone 6S en mode paysage et

41
00:03:46,578 --> 00:03:52,300
descendre vers un iPhone SE, et vous voyez comment le site

42
00:03:52,300 --> 00:03:56,941
a changé la façon dont il est rendu.

43
00:03:56,941 --> 00:04:03,395
Donc, j'espère que cet exemple vous a illustré comment et

44
00:04:03,395 --> 00:04:07,357
pourquoi nous avons besoin d'un design web réactif.

45
00:04:07,357 --> 00:04:12,240
Le deuxième concept connexe que vous entendrez est d'abord mobile.

46
00:04:12,240 --> 00:04:17,749
La première approche mobile se penche plutôt sur la conception d'un site Web pour

47
00:04:17,749 --> 00:04:19,725
un appareil mobile d'abord.

48
00:04:19,725 --> 00:04:27,465
Alors considérez comment vous pourriez satisfaire les contraintes d'écran de votre appareil mobile.

49
00:04:27,465 --> 00:04:32,472
Et alors que la taille de votre écran augmente, vous

50
00:04:32,472 --> 00:04:38,162
lancerez automatiquement une application sur votre site Web pour les tailles d'écran plus grandes et plus grandes.

51
00:04:38,162 --> 00:04:41,548
Peut-être, vous êtes prêt de plus en plus du contenu.

52
00:04:41,548 --> 00:04:47,050
Afin de profiter de l'immobilier de l'écran de plus en plus.

53
00:04:47,050 --> 00:04:51,974
Ainsi, le même site Web lorsqu'il est vu sur un appareil mobile peut avoir seulement

54
00:04:51,974 --> 00:04:56,091
des parties de l'information être révélée à l'utilisateur.

55
00:04:56,091 --> 00:05:00,754
Mais alors, lorsqu'il est rendu sur un bureau à part entière, il

56
00:05:00,754 --> 00:05:05,960
peut afficher une version beaucoup plus détaillée du site Web.

57
00:05:05,960 --> 00:05:11,020
Maintenant, cela doit être automatiquement adapté en fonction des informations

58
00:05:11,020 --> 00:05:16,180
que vous obtenez de l'appareil à partir duquel votre site Web est consulté.

59
00:05:16,180 --> 00:05:18,519
Alors, comment obtenons-nous cette information ?

60
00:05:18,519 --> 00:05:23,610
Heureusement, la conception web réactive est prise en charge par

61
00:05:23,610 --> 00:05:29,950
de nombreux frameworks d'interface utilisateur web frontale modernes, y compris Bootstrap.

62
00:05:29,950 --> 00:05:37,230
Donc, quand nous regardons la définition de Bootstrap sur sa page Web, il est dit,

63
00:05:37,230 --> 00:05:41,128
responsive mobile première approche.

64
00:05:41,128 --> 00:05:43,985
Ouais, comment allons-nous en faisant du web design réactif ?

65
00:05:43,985 --> 00:05:49,858
Il existe donc plusieurs concepts qui sont intégrés à vos

66
00:05:49,858 --> 00:05:57,170
frameworks d'interface utilisateur Web de temps d'image qui viennent à l'aide lorsque vous avez besoin de faire une conception Web réactive.

67
00:05:57,170 --> 00:06:00,819
D' abord et avant tout est ce qu'on appelle un système Grid ?

68
00:06:00,819 --> 00:06:05,624
Nous allons examiner le système de grille de Bootstrap plus en détail dans la prochaine

69
00:06:05,624 --> 00:06:06,319
conférence.

70
00:06:06,319 --> 00:06:11,201
Pour que nous comprendrions exactement comment nous pouvons tirer parti de cela pour être en mesure de réaliser un

71
00:06:11,201 --> 00:06:13,720
design web réactif.

72
00:06:13,720 --> 00:06:21,110
Le second aspect est des images fluides, de sorte que vos images que vous incluez dans votre

73
00:06:21,110 --> 00:06:26,940
site Web s'adaptent automatiquement à la taille de l'écran.

74
00:06:26,940 --> 00:06:34,890
Et la troisième partie est ce qu'on appelle une requête de médias CSS à partir de votre code CSS.

75
00:06:34,890 --> 00:06:41,110
Vous pouvez interroger la taille du média, puis ajuster correctement vos classes CSS

76
00:06:41,110 --> 00:06:46,230
pour s'adapter à la taille de l'écran du périphérique.

77
00:06:46,230 --> 00:06:48,730
Maintenant, comment fonctionnent les requêtes multimédias ?

78
00:06:48,730 --> 00:06:50,950
Regardons ça ensuite.

79
00:06:50,950 --> 00:06:55,080
Les requêtes de médias sont prises en charge dans CSS comme ceci.

80
00:06:55,080 --> 00:07:00,930
Ainsi, la technologie vous permet de faire une requête multimédia pour spécifier la largeur minimale

81
00:07:00,930 --> 00:07:07,730
de l'écran sous lequel cet ensemble particulier de classes CSS sera actif.

82
00:07:07,730 --> 00:07:12,267
Donc, cela serait spécifié dans votre fichier CSS comme @media,

83
00:07:12,267 --> 00:07:17,187
puis entre crochets, vous spécifiez par exemple, min-width.

84
00:07:17,187 --> 00:07:21,231
Il y a beaucoup plus d'options aux requêtes des médias que ce que je montre ici.

85
00:07:21,231 --> 00:07:28,750
Ce n'est qu'un exemple de la façon dont vous construiriez une requête multimédia dans votre code CSS. En

86
00:07:30,060 --> 00:07:34,990
regardant le code CSS de Bootstrap lui-même,

87
00:07:34,990 --> 00:07:40,910
allons voir comment les requêtes multimédias sont utilisées par Bootstrap.

88
00:07:40,910 --> 00:07:45,789
Donc, ici, vous voyez un exemple d'une requête multimédia où il est dit, @media et

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

90
00:07:47,854 --> 00:07:54,906
Et puis il spécifie que ce conteneur d'appel de classe CSS particulier,

91
00:07:54,906 --> 00:07:59,960
que nous allons en apprendre plus dans la prochaine conférence,

92
00:07:59,960 --> 00:08:04,150
et aussi dans l'exercice qui suit.

93
00:08:04,150 --> 00:08:12,640
Nous verrons que la largeur du conteneur est définie en fonction de la largeur de l'écran.

94
00:08:12,640 --> 00:08:17,590
De même, pour un écran de largeur supérieure, la largeur du conteneur est automatiquement ajustée.

95
00:08:17,590 --> 00:08:22,251
C' est donc ce qui permet à votre infrastructure d'interface utilisateur Web de

96
00:08:22,251 --> 00:08:25,604
prendre en charge la conception Web réactive.

97
00:08:25,604 --> 00:08:30,762
Ainsi, en effectuant des requêtes multimédias, votre infrastructure d'interface utilisateur Web est capable

98
00:08:30,762 --> 00:08:36,928
d'établir le type de périphérique sur lequel vous effectuez le rendu de votre site Web.

99
00:08:36,928 --> 00:08:41,849
Et ajustez en conséquence les classes CSS pour

100
00:08:41,849 --> 00:08:46,401
s'adapter à la taille d'écran des périphériques particuliers.

101
00:08:46,401 --> 00:08:50,821
Donc, évidemment, la prochaine question qui va vous venir à l'esprit est de savoir comment

102
00:08:50,821 --> 00:08:52,870
faire cela dans la pratique ?

103
00:08:52,870 --> 00:08:56,540
Heureusement, si vous commencez avec un

104
00:08:56,540 --> 00:09:01,700
framework d'interface utilisateur web frontale bien conçu comme Bootstrap, les choses deviennent très simples.

105
00:09:01,700 --> 00:09:08,023
Nous en apprendrons plus à ce sujet dans la prochaine conférence et l'exercice qui suit.

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