CSS : Positionnement et mise en page

Exploiter les régions

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Voyez que les régions vont ouvrir un grand nombre de portes. Ces portes risquent fortement de venir modifier la manière dont vous approchez et bâtissez le web, et de surcroît, le mode responsif.
08:19

Transcription

Les régions, c’est bien parce que cela permet d’alimenter des balises vides par des balises pleines. Pourquoi pas, cela peut être sympa mais on peut ne pas voir les portes que cela peut ouvrir. Donc on va essayer d’explorer deux-trois cas de figures qui pourraient être intéressants, qui pourraient nous apporter une autre approche sur la manière dont on conçoit le web, le web responsive et les stratégies de contenu que l’on va pouvoir dispatcher. Regardez-ici on a une balise div qui s’appelle classe écran ici, qui contient deux articles, id=«large», id= « petit », avec des titres h1 à chaque fois et en bas de page deux zones de réception, qui sont déjà pré formatées et qui sont visuelles dans ce contenu mais vide. Alors ce qu’on va faire ici, c’est refaire ce qu’on avait déjà fait, c’est-à-dire qu’on va se dire que dans la classe écran, jusqu’à présent, on va associer une propriété flow. On va envoyer le contenu dans un flux qu’on appellera fluxdetexte par exemple. Et pour les balises header et la balise section, on pourrait directement attribuer une classe à ces éléments-là de façon à ne pas venir lister balise par balise dans la classe destination par exemple, et on attribuerait ces classes destination à la volée, par du javascript, par ce que vous voulez. Mais déjà on commence à ouvrir quelques portes-là. On pourrait dire flow-from ici, et dans ce flow-from on pourrait dire que ça vient de fluxdetexte. Ce qui fait que si maintenant je vois ma page, je m’aperçois que je n’ai plus la balise div qui est présente mais c’est les deux balises qui étaient prévues à destination qui vont se peupler. Si on repart dans cet exemple-là, on est bien dans notre balise header et section ici, qui proviennent du flux. Pourquoi j’ai mis le flux en dessous ? Parce que, regardez, on pourrait très bien se dire qu’on ne va pas aller piocher dans la même pioche en fonction de certains contextes. Imaginons que l’on se place dans du CSS attention on n’est pas dans du javascript, on n’est pas dans du langage conditionnel if then else, on utilise un media query. On lui dit dans le media scren and dans le cas où on est en min width, 481 pixels par exemple, pour que cela puisse se voir sur cet écran ici. Donc cela veut dire 30.0625 em, rappelez-vous toujours du proportionnel à ce niveau-là. Si on place ça on pourrait très bien dire qu’à ce moment-là, pourquoi pas injecter écran fluxdetexte. Mais je ne veux pas de flux de texte. Si je regarde le fluxdetexte, il est constitué de deux articles, un article id=large et un article id=petit. Et là je vais lui dire, dans le cas où je suis au minimum, c’est-à-dire au minimum à 481 pixels, dans un grand écran, je vais lui dire de piocher dans large. Mais attention, il y a une petite condition aussi, c’est que le petit lui aussi sera toujours dans le contenu, puisque n’oublions pas qu’il n’est pas chargé à la volée, qu’il n’est pas dynamique, il est dans la page. On va lui dire, petit, il faut que tu me fasses un display none, pour qu’on soit sûr qu’il ne vienne pas interférer avec ce contenu. Comme ça je vais le copier ici, je vais venir le coller et ce n’est plus un min, mais un max. Ce n’est plus 30.0625 mais 30 tout court, 480 pixels, et ici je ne veux pas prendre large mais petit, par contre ici au niveau de petit c’est large que je vais devoir interférer. Et voilà ici on a bien notre contenu qui est placé, ici j’ai une petite coquille. Ici petite coquille 2, c'est le cas de le dire. Ici on a bien notre contenu large qui s’affiche, et si je réduis mon écran, on a un autre contenu qui s’affiche. Donc on vient de faire du responsive qui n’est plus effectif sur du visuel, mais sur du contenu, un peu comme si on avait fait un match média un javascript qui pourrait changer le contenu, mais là ce n’est pas changé par du javascript mais c’est changé par du CSS. Alors on pourrait très bien également envisager une autre approche, c’est-à-dire ici avoir deux contenus externes provenant d’une base de donnée, d’un fichier html mort, comme vous le souhaitez, ici on a id=large et ici on a id=petit. On a un fichier html, un détecteur pour javascript ici, qui va être un sélecteur avec deux value , soit je vais vers le 21 soit je vais vers le 22. Par contre ici en dessous j’ai bien mes deux zones d’accueil qui sont pré formatées, qui sont prêtes à recevoir du contenu. Et ici je vais lui dire qu’on va prendre dans l’écran et on va l’injecter dans la section. Et c’est simplement un javascript qui va faire le rôle, un javascript , c’est très simple, on met un écouteur au chargement de la page sur le sélecteur ici sur cet élément selecteur, id=selecteur ici, on lui met un écouteur, on lui dit, addEventListener change, tu appelles changeSource, source c’est une variable externe ici qui sera la source, et la source. Si je reviens dans mon code, la source c’est cet élément div id, classe=écran, je lui dis qu’on change de source tu as un petit xml http request qui va invoquer directement l’appel de ce fichier, ou de ce fichier, pour le placer dans la source, tout simplement. De ce fait quand je regarde ici sur mon fichier de rendu, quand je vais basculer sur le navigateur, je peux balancer soit le contenu d’un fichier, soit le contenu d’un second fichier dans mon contenu. Encore une fois vous pouvez coupler ces deux techniques, celles qu’on a vu juste avant et celles-ci, ensemble de façon à pouvoir voir évoquer media query, invoquer match media javascript qui va télécharger une source différente. Donc cela vous évite d’avoir à tout télécharger dans la page, par contre toute votre maquette de page est prête, et vous allez injecter les titres, les sous-titres, les images, les catégories etc, au sein du contenu de la page qui a été pré formaté. Une autre approche regardez qui pourrait être très intéressante. Ici j’ai simplement une section globale qui contient tout un article. Tout cet article contient ici des petites notes de lecture, vous voyez ici j’ai une étoile qui correspond à cette note de lecture étoile ici, et ici j’ai deux étoiles qui contiennent une autre note de lecture. Ces deux éléments se trouvent pour un dans un élément inline ici, sous la forme de class=notes, dans un span, et le deuxième dans un class=notes toujours mais dans un élément de type bloc p. Ici en dessous j’ai une section qui n’ a pas de classe mais qui ne contient rien, qui est simplement pré formatée, qui se trouve en bas de page. On a la section qui n’a pas de flux, aucun flux n’a été dégagé, il nous suffit de dire que chaque fois qu’on rencontre une classe-note, on fait un flow-into. On va l’injecter dans fluxdetexte, encore une fois je le redis, bien entendu, fluxdetexte, c’est purement arbitraire donc je vais tout le temps utiliser le même, bien entendu qu’on peut utiliser tout ce qu’on veut comme valeur ici. Donc je vais faire un flow-from ici, et je vais dire fluxdetexte. Et là à cet instant-là, on a notre texte qui se lit, on a des petites étoiles ici, on a une petite double étoile ici, et les deux sont parties dans ce qu’on appelle des notes de pied de page. Vous voyez que le fait d’utiliser des régions va nous permettre de redispatcher les contenus en fonction des éléments, et bien entendu qu’on peut coupler toutes les techniques entre elles, c’est-à-dire dire que c’est du chargement dynamique, c’est fait en fonction à la volée, en fonction de la taille de l’écran on va pouvoir peupler les choses différemment etc, Vous voyez que donc on a ouvert une dimension avec les régions sur la conception des pages web qui n’est pas négligeable et qui peut avoir sa valeur ajoutée qui certainement va modifier la conception de nos sites web dans les années à venir.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !