4 façons de créer des expériences Web plus riches
Le Web a beaucoup évolué pour devenir un simple référentiel de documents, et nous avons désormais des navigateurs capables d'interactions visuelles riches sur le bureau et sur le mobile.
Comme je voudrais parler de la direction que prend le Web dans cet article, la plupart des fonctionnalités que je vais couvrir peuvent avoir un support limité. Il est donc important d'utiliser des ressources telles que caniuse.com qui a une liste robuste de fonctionnalités et de graphiques spécifiant où ils sont pris en charge.
Jetons un coup d’œil aux quatre façons dont vous pouvez améliorer votre site UX:
1. CSS
Le CSS est le langage de style de nos documents, nous avons tendance à penser à des termes simples comme changer la taille ou la couleur de la police, mais il devient de plus en plus puissant avec des fonctionnalités telles que les transformations et les animations. Nous obtenons également de nouvelles fonctionnalités pour le rendre encore plus puissant.
Si vous avez utilisé des masques vectoriels dans des outils tels que Photoshop, vous devriez vous familiariser avec l'idée Chemin de clip CSS. Cette fonctionnalité vous permet de définir une forme en CSS qui définit les parties transparentes et opaques de votre contenu HTML. Celles-ci fonctionnent très bien avec Transitions CSS pour cacher et révéler des éléments d'interface utilisateur. De même, les masques CSS se dirigent vers le Web, ce qui vous permet de définir les parties transparentes de votre contenu à l'aide d'une image. Cela vous permet d'utiliser la transparence plus efficacement dans vos conceptions pour un intérêt visuel ou des textures.
2. SVG
La plupart des images que nous trouvons sur le Web sont des images matricielles, composées de pixels. Cela signifie qu'au fur et à mesure que nous les adaptons ou que nous les visualisons sur des périphériques de résolution supérieure, ils sont pixélisés.
Les graphiques vectoriels sont géniaux car ils sont constitués de primitives géométriques qui conservent leurs bords nets à toutes les tailles.
SVG est le format vectoriel pour le Web. Nous pouvons l'utiliser pour afficher des graphiques et même manipuler et animer ses propriétés avec CSS. Là où SVG devient vraiment puissant, c'est quand on le combine avec le script. Casser est une bibliothèque JavaScript qui facilite la manipulation et l’animation du contenu SVG. Il est axé sur les navigateurs modernes et prend donc en charge les nouvelles fonctionnalités SVG, telles que les groupes et les chemins de clip. Snap est ouvert sur GitHub et nous l'avons même utilisé pour créer une bannière publicitaire animée riche, vous pouvez en savoir plus à ce sujet dansmon blog.
Et voici un échantillon d'un annonce que nous avons fait en utilisant SVG.
3. Toile 2D
2D Canvas est une autre fonctionnalité puissante du Web optimisée pour dessiner des formes et des images. Il fournit une API JavaScript qui vous donne un contrôle granulaire sur votre élément canvas. Il vous offre également la liberté d’intégrer d’autres formes de médias, telles que la vidéo, ce qui crée un potentiel de boutons interactifs riches permettant de lire, de mettre en pause ou de nettoyer des séquences vidéo. 2D Canvas prend désormais en charge les modes de fusion, qui vous permettent de mélanger les couleurs des calques de manière visuellement intéressante, ce que vous pouvez en savoir plus sur ici.
Nous commençons également à prendre en charge la vidéo alpha, qui nous permet d’intégrer de manière plus transparente la vidéo dans notre contenu. Un exemple amusant de vidéo alpha est dans Le clip de OK Go 'WTF' .
OK Go est connu pour ses vidéos musicales élaborées et dans cette vidéo particulière tourné une chorégraphie devant un écran vert. Ensuite, l'utilisation du post-traitement a continué à rendre les images sur elles-mêmes créant un effet d'écho sympa où la transparence était. Nous pouvons reproduire cet effet en utilisant 2D Canvas, mais nous pouvons aller plus loin et le rendre interactif en utilisant des fonctionnalités telles que les modes de fusion des toiles pour créer de nouveaux effets visuels en temps réel.
4. WebGL
WebGL fournit une API de bas niveau pour dessiner des graphiques 2D et 3D accélérés par le matériel. Le potentiel ici est des jeux de style console, comme Grand Theft Auto 5 fonctionnant directement dans votre navigateur. Comme vous pouvez l'imaginer, WebGL devient un peu compliqué, heureusement que les bibliothèques open-source Three.js fournir un excellent point d'entrée avec d'excellents exemples pour vous aider à démarrer.
GitHub est devenu une excellente ressource pour la communauté open source. Vous pouvez trouver Three.js et Snap sur GitHub, ainsi que d’autres excellentes bibliothèques, ce qui facilite le travail sur le Web. Je mets souvent des expériences et des outils sur GitHub, comme outil de spline de caméra J'avais l'habitude de créer des chemins de caméra pour Three.js pour traverser des mondes 3D.
Comme nous pouvons voir que le Web devient de plus en plus diversifié et puissant, il est passionnant de devenir développeur Web. La variété des technologies et des ressources auxquelles nous avons accès ne cesse de croître, et il est amusant de voir les expériences enrichissantes que les gens créent avec eux.