[MUSIC]
De nos jours dans le monde du développement web, nous entendons souvent
parler des termes responsive design et mobile first approach.
Essayons de comprendre ce que l'on entend par ces termes et
comment ils affectent la façon dont vous concevez vos sites Web et vos applications Web.
Votre question évidente va être pourquoi envisager un design réactif ?
Pour nous aider à comprendre cela, considérons comment les gens accèdent aux sites Web de nos jours ?
Traditionnellement, lorsque les sites Web ont été conçus pour la première fois, vous pourriez à peu près supposer
que les gens navigueront sur vos sites Web à partir d'un ordinateur.
Ces jours-ci, vos sites Web peuvent être consultés à partir d'un smartphone, d'
une tablette ou d'un ordinateur avec différentes tailles d'écran et résolutions d'écran.
Comment rendre nos sites Web de manière cohérente sur des appareils de différentes tailles d'écran ?
La taille unique s'adapte à toutes les approches que les
concepteurs de sites Web traditionnels ont pris plus facture fixe.
Nous avons besoin d'une meilleure approche, une approche qui
adaptera automatiquement votre site Web à la taille de l'écran sur lequel il est visualisé.
C' est là que nous devons adopter une approche pour nous adapter au port de vue de l'utilisateur.
Cela doit être intégré dans la conception et le développement de votre site Web afin
qu'il s'adapte automatiquement à la fenêtre d'affichage de l'appareil de l'utilisateur.
Pour vous aider à mieux apprécier la nécessité d'
adresser des appareils de différentes tailles d'écran.
Je prends l'aide des options de développement qui pourrait navigateur Safari
fournit qui me permet de voir le site Web avec des écrans de différentes tailles.
Donc, j'espère que vous convaincrez de la raison pour laquelle nous avons fait de la conception web responsive.
Donc ici, vous voyez que le site Coursera étant
rendu sur un 1920 par 1080 sites écran.
Ce serait un grand ordinateur de bureau typique ou un écran d'ordinateur portable haute résolution.
Ensuite, considérons le même site Web étant vu à l'aide d'un écran plus petit tel.
Ainsi, vous voyez automatiquement votre disposition d'écran
s'ajuste légèrement à la taille de la fenêtre d'affichage de votre appareil,
même chose à 800 par 600.
Donc, nous allons descendre dans les tailles d'écran, c'est une vue de fermeture iPad du même site.
Il s'agit d'une taille d'iPad Air 2, il s'agit d'une taille d'iPad Mini 4,
notez la transition d'une
taille d'iPad Mini 4 à un iPhone 6S Plus en mode portrait.
Vous remarquerez maintenant que le Bot de navigation s'est maintenant réduit en un bouton ici,
qui, lorsque vous cliquez sur, révélera les options de votre Navigation Bash.
Et regardons la même chose dans notre iPhone 6S
en mode paysage, notez comment l'écran s'adopte lui-même.
De même pour un iPhone 6S en mode paysage et
descendre vers un iPhone SE, et vous voyez comment le site
a changé la façon dont il est rendu.
Donc, j'espère que cet exemple vous a illustré comment et
pourquoi nous avons besoin d'un design web réactif.
Le deuxième concept connexe que vous entendrez est d'abord mobile.
La première approche mobile se penche plutôt sur la conception d'un site Web pour
un appareil mobile d'abord.
Alors considérez comment vous pourriez satisfaire les contraintes d'écran de votre appareil mobile.
Et alors que la taille de votre écran augmente, vous
lancerez automatiquement une application sur votre site Web pour les tailles d'écran plus grandes et plus grandes.
Peut-être, vous êtes prêt de plus en plus du contenu.
Afin de profiter de l'immobilier de l'écran de plus en plus.
Ainsi, le même site Web lorsqu'il est vu sur un appareil mobile peut avoir seulement
des parties de l'information être révélée à l'utilisateur.
Mais alors, lorsqu'il est rendu sur un bureau à part entière, il
peut afficher une version beaucoup plus détaillée du site Web.
Maintenant, cela doit être automatiquement adapté en fonction des informations
que vous obtenez de l'appareil à partir duquel votre site Web est consulté.
Alors, comment obtenons-nous cette information ?
Heureusement, la conception web réactive est prise en charge par
de nombreux frameworks d'interface utilisateur web frontale modernes, y compris Bootstrap.
Donc, quand nous regardons la définition de Bootstrap sur sa page Web, il est dit,
responsive mobile première approche.
Ouais, comment allons-nous en faisant du web design réactif ?
Il existe donc plusieurs concepts qui sont intégrés à vos
frameworks d'interface utilisateur Web de temps d'image qui viennent à l'aide lorsque vous avez besoin de faire une conception Web réactive.
D' abord et avant tout est ce qu'on appelle un système Grid ?
Nous allons examiner le système de grille de Bootstrap plus en détail dans la prochaine
conférence.
Pour que nous comprendrions exactement comment nous pouvons tirer parti de cela pour être en mesure de réaliser un
design web réactif.
Le second aspect est des images fluides, de sorte que vos images que vous incluez dans votre
site Web s'adaptent automatiquement à la taille de l'écran.
Et la troisième partie est ce qu'on appelle une requête de médias CSS à partir de votre code CSS.
Vous pouvez interroger la taille du média, puis ajuster correctement vos classes CSS
pour s'adapter à la taille de l'écran du périphérique.
Maintenant, comment fonctionnent les requêtes multimédias ?
Regardons ça ensuite.
Les requêtes de médias sont prises en charge dans CSS comme ceci.
Ainsi, la technologie vous permet de faire une requête multimédia pour spécifier la largeur minimale
de l'écran sous lequel cet ensemble particulier de classes CSS sera actif.
Donc, cela serait spécifié dans votre fichier CSS comme @media,
puis entre crochets, vous spécifiez par exemple, min-width.
Il y a beaucoup plus d'options aux requêtes des médias que ce que je montre ici.
Ce n'est qu'un exemple de la façon dont vous construiriez une requête multimédia dans votre code CSS. En
regardant le code CSS de Bootstrap lui-même,
allons voir comment les requêtes multimédias sont utilisées par Bootstrap.
Donc, ici, vous voyez un exemple d'une requête multimédia où il est dit, @media et
min-width 576 pixels.
Et puis il spécifie que ce conteneur d'appel de classe CSS particulier,
que nous allons en apprendre plus dans la prochaine conférence,
et aussi dans l'exercice qui suit.
Nous verrons que la largeur du conteneur est définie en fonction de la largeur de l'écran.
De même, pour un écran de largeur supérieure, la largeur du conteneur est automatiquement ajustée.
C' est donc ce qui permet à votre infrastructure d'interface utilisateur Web de
prendre en charge la conception Web réactive.
Ainsi, en effectuant des requêtes multimédias, votre infrastructure d'interface utilisateur Web est capable
d'établir le type de périphérique sur lequel vous effectuez le rendu de votre site Web.
Et ajustez en conséquence les classes CSS pour
s'adapter à la taille d'écran des périphériques particuliers.
Donc, évidemment, la prochaine question qui va vous venir à l'esprit est de savoir comment
faire cela dans la pratique ?
Heureusement, si vous commencez avec un
framework d'interface utilisateur web frontale bien conçu comme Bootstrap, les choses deviennent très simples.
Nous en apprendrons plus à ce sujet dans la prochaine conférence et l'exercice qui suit.
[ MUSIQUE]