Utiliser les outils CSS et la mise en page du navigateur peut permettre de créer des visualisations époustouflantes pour le contenu Web. L'utilisation de fonctionnalités Web comme les filtres CSS, WebGL, les vidéos HTML5, le SVG et le canevas, ainsi que les technologies futures en constante évolution, comme les régions CSS, les formes CSS et les filtres personnalisés CSS, promet un paysage créatif immense. Adobe collabore depuis longtemps avec des créateurs de contenu passionnés par la mise en page et la conception. L'entreprise a donc activement mis ses connaissances en application pour le Web et a contribué à améliorer de nombreuses normes Web en constante évolution.
Avec l'aide de National Geographic, nous avons utilisé le contenu de sa fonctionnalité intitulée "Forest Giant" pour créer un prototype montrant comment ces fonctionnalités peuvent permettre une mise en page Web enrichie et des techniques réactives. Cet article explique comment nous avons créé certaines caractéristiques particulièrement intéressantes du site. Pour obtenir un aperçu rapide, n'hésitez pas à regarder la vidéo ci-dessous, dans laquelle Christian Cantrell vous présente les différentes fonctionnalités du site.
Les subtilités de la mise en page
Ce qui constitue une mise en page réussie, et les fonctionnalités associées peuvent être subtiles. C'est pourquoi nous avons créé une "superposition de l'éditeur" qui met en avant les fonctionnalités les plus intéressantes. Pour activer les marques de l'éditeur, cliquez sur la barre au bas de l'article.
Indépendante de la mise en page
Aujourd'hui, sur le Web, la mise en page est souvent dictée par notre contenu, les conteneurs qui s'agrandissent verticalement pour s'adapter au texte. Lorsque vous créez des mises en page complexes, les modifications apportées au texte ou à d'autres contenus peuvent avoir un impact indésirable sur la mise en page globale, ce qui oblige à repenser le contenu en cas de modifications inattendues. Avec les régions, nous pouvons véritablement séparer notre contenu de la mise en page en définissant un élément en tant que contenu, puis en spécifiant les parties de la mise en page dans lesquelles nous voulons que ce contenu transite.
Dans l'exemple de "Forest Giant", nous avons l'histoire dans un seul élément. Ensuite, tout au long de la page, nous avons notre échafaudage de mise en page, composé de photos et de zones de texte. Avec le CSS, nous définissons les éléments que le contenu doit traverser. Lorsque la copie atteint la fin d'un élément, elle passe au suivant dans l'ordre DOM. Cela nous permet de faire preuve de créativité concernant les colonnes, en les décalant et en adaptant leur hauteur en fonction de la conception, sans nous soucier de savoir si le texte s'adapte ou dépasse la hauteur de l'élément. Cela nous permet également d'avoir des éléments dans notre mise en page, comme des images en pleine largeur, tandis que l'histoire continue à s'enchaîner.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Dans le code CSS ci-dessus, nous créons un flux nommé appelé "story". Le contenu de ce flux nommé est l'élément portant l'ID "storyContent". Il permet ensuite de parcourir tous les éléments portant le nom de classe "story". Les régions CSS sont un excellent outil pour le responsive design, car elles permettent des fonctionnalités telles que les colonnes multicolonnes et les colonnes décalées pour une mise en page riche sur les grands écrans tout en s'adaptant à une mise en page à colonne unique sur les petits écrans. Les régions vous permettent également de définir la taille de votre région à l'aide d'unités responsives telles que vw ou vh. Cela permet de s'assurer que les colonnes ne dépassent pas la hauteur de la fenêtre d'affichage dans votre mise en page, sans craindre que le contenu soit tronqué, car il se retrouvera naturellement dans l'élément suivant de la chaîne de régions.
Gouttières
Les exclusions CSS nous permettent d'envelopper du texte ou de le placer à l'intérieur de formes irrégulières. Cela peut être utile pour les ornements de conception tels que les gouttes. Les majuscules sont des pratiques de conception courantes : la première lettre d'une histoire ou d'un chapitre est agrandie, ce qui permet au reste du texte d'encapsuler le contour du personnage. Cet effet est très semblable à la façon dont le contenu intégré encapsule autour des floats. Toutefois, avec les exclusions, nous ne sommes plus limités aux zones rectangulaires. En utilisant la forme à l'extérieur d'un float, nous pouvons définir la géométrie qui permet à notre contenu de s'entourer étroitement de la forme de notre personnage.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Cela créera une ellipse permettant au contenu de s'enrouler autour de la forme circulaire. De plus, comme nous utilisons des unités relatives pour la forme, la modification de la taille de l'élément se répercutera sur la taille de la forme.
Tracés
En plus des majuscules et des minuscules, les exclusions permettent d'envelopper du texte dans les formes à l'aide de l'en-tête Shape-Inside. Nous utilisons cette fonctionnalité sur l'ensemble du site, notamment pour les légendes d'images de grande taille, en utilisant l'espace négatif des photos pour encadrer le texte. Il nous permet également d'encapsuler du texte le long du contour d'autres images et éléments graphiques en émulant des mises en page auparavant très difficiles à réaliser sur le Web.
Les formes peuvent également fonctionner avec les mises en page responsives en utilisant des unités relatives pour définir votre forme. Ainsi, nous pouvons créer des formes qui s'étirent en fonction du conteneur ou de la fenêtre d'affichage, et même utiliser des requêtes média pour modifier complètement la forme ou la supprimer, car elle est entièrement définie en CSS. L'exemple ci-dessous présente une forme polygonale utilisée sur le site, dont les valeurs définissent les points:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Texte équilibré
Le texte équilibré est une fonctionnalité qui examine l'ensemble du bloc de texte d'un élément lorsque des lignes sont encapsulées, plutôt que mot par mot. Elle permet d'éviter les situations où un ou deux mots se trouvent sur une seule ligne en rompant les lignes de texte pour obtenir des lignes de taille uniforme au sein d'un élément. Ce niveau de contrôle nous permet de créer facilement des blocs de texte esthétiques, en particulier pour les séquences courtes comme les guillemets courbes ou les sous-titres.
C'est là que nous utilisons le texte équilibré dans l'article. Cette fonctionnalité étant une norme proposée par Adobe, nous utilisons un polyfill créé par Randy Edmunds pour obtenir les mêmes résultats. Cette fonctionnalité est particulièrement adaptée aux cas responsifs. En redimensionnant le navigateur, vous remarquerez que le bloc continue d'équilibrer le texte pour générer des lignes à peu près de la même largeur. L'utilisation du polyfill de texte équilibré est facile, car il s'agit d'un plug-in jQuery. Il suffit d'appliquer "balanceText()" à un sélecteur lorsque la mise en page change pour obtenir un texte bien équilibré, qui se présente comme suit:
$('.balance').balanceText();
Filtrer les transitions
Les transitions sont un excellent moyen d'attirer l'attention des utilisateurs et de leur faire part de l'état d'avancement de votre site. En ce qui concerne l'opacité, et plus récemment, les transformations 3D, nous avons constaté qu'elles étaient utilisées pour créer des animations et des transitions élégantes lorsque les utilisateurs font défiler des éléments de votre site ou interagissent avec elles. Nous disposons désormais de filtres qui peuvent être utilisés aux mêmes fins.
Dans "Forest Giant", nous utilisons des filtres pour passer des nuances de gris à la couleur à mesure que certaines images apparaissent. Ces filtres peuvent être associés à l'opacité ou à d'autres filtres pour créer des effets d'image et des transitions complexes. Nous pouvons utiliser la puissance des filtres personnalisés pour ajouter encore plus d'effets spectaculaires.
Les filtres personnalisés sont écrits en GLSL, le même langage d'ombrage que WebGL. Ils vous permettent d'appliquer ces nuanceurs aux éléments DOM via CSS, ce qui permet d'appliquer des effets de combinaison complexes et une distorsion 3D. Au bas du site, lorsque vous cliquez sur "Explore the President Tree" (Explorer l'arbre des présidents), vous verrez la page s'enrouler pour révéler une autre section en dessous. Ce n'est qu'un exemple de la façon dont les filtres personnalisés peuvent permettre des transitions riches entre les contenus. L'animation peut être réalisée à l'aide de transitions CSS. Toutefois, si vous souhaitez utiliser des animations ou des interactions plus robustes que les transitions, vous pouvez transmettre des valeurs à votre nuanceur en définissant le style avec JavaScript, comme illustré ci-dessous. Vous pouvez ainsi contrôler plus précisément le lissage de vitesse ou même autoriser les méthodes d'entrée utilisateur à manipuler le nuanceur.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Notre filtre rastérise le contenu sous forme de texture sur le GPU pour appliquer l'effet. Nous devons donc nous assurer de la supprimer une fois l'opération terminée, sinon notre contenu risque d'être flou.
$("#map").css("webkitFilter", "none");
Les filtres personnalisés CSS offrent des effets intéressants, comme le retour à la ligne d'une page qui ressemble à une page en cours de retournement dans un vrai livre. Elles permettent à un développeur Web de programmer des effets complexes dans un langage appelé GLSL et de l'appliquer au contenu Web. Pour plus d'informations sur les filtres personnalisés, sur l'ensemble de ces paramètres et sur leur utilisation, consultez cet excellent tutoriel.
Préafficher les textures en WebGL
Le joyau de cet article était la première image complète du président, considéré comme le deuxième plus grand arbre du monde en termes de volume. Cette image a été créée en assemblant des centaines de photos de l'arbre pour donner une image complète. Pour simuler ce processus, nous avons divisé l'image en un ensemble de petites photos qui volent en place pour créer une image complète. Pour ce faire, il a utilisé WebGL, en particulier la bibliothèque Three.js, qui est un wrapper d'API de niveau supérieur autour de WebGL.
L'affichage d'un grand nombre de textures peut rapidement entraîner des problèmes de performances chaque fois qu'une nouvelle texture tente de dessiner à l'écran, sans parler des demandes réseau supplémentaires. Pour réduire cela, nous avons rendu nos textures aussi grandes que possible et les avons décalées pour chaque tuile. Souvent appelée "mappage de sprites", cette technique est couramment utilisée dans le développement de jeux. Cela a permis de créer trois textures de grande taille pour l'intégralité de l'arbre. Pour supprimer l'appel de performance chaque fois que l'une des textures devient visible à l'écran, nous affichons un carré de 1 px avec chacune des textures avant le début de l'animation, en déplaçant l'appel de performance au début. Cela nous permet de faire voler l'arbre et de l'animer de manière fluide sur toute sa hauteur, même sur une tablette.
Pour décaler les textures, nous modifions les UV qui font correspondre la texture à la géométrie. Dans Three.js, elle se présente comme suit:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Comme vous pouvez le voir ici, nous utilisons une variable pour les décalages x et y de la texture. Le même effet peut être obtenu avec un matériau de nuanceur GLSL personnalisé qui décale les coordonnées tracées sur la géométrie.
Fonctionnalités expérimentales
Certaines des fonctionnalités utilisées par la démonstration sont encore expérimentales. Vous devez donc consulter l'article dans Chrome Canary et activer tous les indicateurs mentionnés pour Chrome Canary sur ce site Web.
Une fois que Chrome Canary est installé et correctement configuré, regardez la démo. (Notez que l'intégralité du projet est Open Source et disponible sur GitHub.)
Conclusion
Nous avons également étudié la manière dont ces fonctionnalités pourraient être utilisées dans le contexte des applications mobiles, dans le style d'un e-book. Vous pouvez voir ce prototype en cours de développement et comment nous utilisons les différents paradigmes d'interaction et du toucher pour présenter ces fonctionnalités sur une tablette.
La mise en page des navigateurs Web ne cesse d'évoluer. C'est pourquoi nous constatons l'envie de conserver la valeur de production et la qualité de mise en page auxquelles nous sommes habitués avec les anciens contenus de lecture. Grâce à des fonctionnalités comme les régions CSS, les exclusions, le texte équilibré, les filtres personnalisés et WebGL, les créateurs de contenu n'auront plus à choisir entre couverture et qualité. "Le géant de la forêt" est le signe que le Web de demain autorisera les deux.