Libérer le potentiel de HTML5 et CSS3

La sortie de HTML5 et de CSS3 n’était rien de moins qu’un saut dans l’évolution, mais peu de concepteurs exploitent beaucoup les nouvelles fonctionnalités offertes par cette technologie. Cela s'explique en partie par le fait que les potentialités de HTML5 et de CSS3 ont été totalement ignorées. Les personnes continuent donc de développer plus ou moins les mêmes sites, avec quelques différences mineures de codage.

Il n’ya rien de particulièrement faux en cela, mais il existe de nombreux éléments que HTML5 et CSS3 mettent à votre disposition et dont vous pourriez tirer parti pour créer des créations plus étonnantes que jamais auparavant.

Ne pas ignorer la toile

La prise en main de l’objet canvas est l’une des tâches les plus difficiles à accomplir pour un nouveau codeur HTML5, en particulier lorsque ce codeur a déjà codé dans d’autres versions de HTML et n’a pas d’expérience en programmation graphique.

Apprendre à utiliser l’objet canvas, même si vous avez rarement l’intention de dessiner, est une compétence précieuse que tout développeur sérieux devrait prendre le temps d’apprendre. Il peut être utilisé pour toutes sortes de choses, y compris la création d’infographies animées, de diaporamas, de graphiques (y compris de graphiques interactifs) et bien d’autres encore.

illustration courtoisie de

Utiliser le canevas consiste simplement à créer l'objet dans HTML5, puis à le remplir avec JavaScript. Les techniques impliquées sont un sujet pour un autre jour, mais vous pouvez déjà trouver quelques tutoriels ici sur ce site qui vous aideront à démarrer.

Vous n'avez plus besoin de Flash

La plupart de nos utilisations antérieures de Flash ne nécessitent pas Flash. Maintenant, vous pouvez tout faire avec les transitions CSS3, le dessin HTML5, l'animation HTML5, la vidéo HTML5 et l'audio HTML5.

La seule chose que nous ne faisons pas dans HTML5 et que Flash vous a permis de faire est d'espionner vos utilisateurs et de violer leur vie privée, mais ce n'est pas quelque chose que vous souhaitez faire, n'est-ce pas?

La plupart des utilisateurs ont trouvé Flash très ennuyeux, bien que la plupart l’aient également installée à contrecoeur comme une nécessité inévitable. Jusqu'à ce que les graves problèmes de sécurité et de confidentialité associés à Flash en fassent maintenant quelque chose que la plupart des utilisateurs n'installent pas du tout ou n'activent qu'au cas par cas lorsque cela est strictement nécessaire pour une tâche à exécuter. .

CSS3 vous donne de nouvelles pseudo-classes

Certaines pseudo-classes existaient déjà dans CSS2, mais avec CSS3, vous pouvez utiliser d'importantes pseudo-classes de position pour obtenir plus de contrôle. Ils sont principalement utilisés avec du texte, comme l'indiquent les pseudo-noms de classe: avant, après, première lettre, première ligne…

Vous avez également accès aux transitions, qui peuvent être utilisées pour modifier n'importe quoi, y compris le texte. Ces transitions animent ou transforment ce que l'utilisateur voit à l'écran.

Vos pages Web peuvent communiquer directement avec le GPU

Vous devez le faire avec prudence, car toute accélération matérielle va épuiser la durée de vie de la batterie des appareils mobiles, mais il est tout de même cool que vous puissiez le faire.

L'accélération GPU fonctionne lorsque vous utilisez des transitions, des transformations 3D, une zone de dessin en mode 3D et WebGL 3D. Ce dernier est mon préféré, mais vous aurez besoin de beaucoup de lecture pour comprendre tout ce qui concerne WebGL. Cela vous laissera cependant beaucoup de possibilités pour créer des animations et des jeux.

L'accélération GPU ne fonctionne pas avec les anciens navigateurs, même s'ils prennent en charge HTML5 et CSS3.

gif courtoisie de

Utilisez les moteurs de jeu pour simplifier le travail graphique 3D

Les programmeurs de jeux utilisent depuis toujours des moteurs de jeu pour simplifier la tâche de programmation, mais ce n’est que depuis un an ou deux que de véritables moteurs de jeu HTML5 vraiment capables ont émergé et pourraient faire face à la tâche de créer des jeux 3D de haute qualité un environnement basé sur un navigateur.

PlayCanvas est l’un des moyens les plus simples de commencer à utiliser et, même s’il est gratuit et que l’expérience est vraiment peu coûteuse, il n’est pas léger. Voici Rafle, un jeu créé dans PlayCanvas:

Et cela est RoboStorm:

Pourriez-vous créer des jeux comme celui-ci? Absolument, et c'est beaucoup plus facile maintenant que jamais.

Pour une expérience de construction de jeu rétro, essayez Construct2 or Construct3. Il contient tout ce dont vous avez besoin pour créer des jeux par glisser-déposer (même si certains trouveront cela trop contraignant). Vous créez vos jeux en ligne et les gens les jouent en ligne. C'est un moteur pour ceux qui ne connaissent aucune programmation et ne veulent pas s'embêter à apprendre.

Voici Histoire de kiwi, un jeu de plateforme 2D à l'ancienne créé dans Construct3:

Vous n'êtes pas limité aux jeux avec ces moteurs. Pour faire des films entiers et des présentations, il serait préférable d’utiliser mixer or Maya, et pour les jeux dédiés à une plate-forme spécifique, il est généralement préférable d’utiliser un environnement de programmation natif dédié à cette plate-forme. Pour les jeux interactifs multiplateformes, les contes, les logiciels éducatifs ou les présentations, les moteurs HTML5 constituent une excellente option.

HTML5 et CSS3 vous donnent plus de puissance

Avec HTML5 et CSS3, vous avez maintenant un contrôle total sur tous les éléments qui apparaissent sur votre page, y compris la possibilité de manipuler chaque objet de la manière que vous souhaitez.

Bien que l'unité de base de la construction reste le rectangle, vos sites Web ne doivent plus suivre la linéarité rectangulaire. Vous pouvez placer les objets à n’importe quel angle, les faire pivoter, les incliner, les tordre et les plier, et votre navigateur Web ne se plaindra pas du tout.

Vous pouvez maintenant également contrôler l'opacité et la mise à l'échelle beaucoup plus facilement qu'auparavant, et les techniques fonctionneront dans tous les principaux navigateurs.

Au moment où nous écrivions au début de 2018, il existait encore quelques problèmes de redimensionnement entre différents navigateurs. Certains navigateurs étaient capables de redimensionner avec précision tandis que d'autres donnaient des résultats extrêmement différents pour la même page.

Cela signifie qu'au moins pour l'instant, nous sommes toujours obligés de programmer différentes versions d'un site si nous voulons utiliser la mise à l'échelle à des fins de réactivité.

Heureusement, vous en aurez rarement besoin, mais votre objectif principal sera parfois de placer quelque chose à l'écran, aussi petit soit-il. Dans ces cas, le manque de normalisation normalisée sur différents navigateurs restera un problème.

Néanmoins, ces problèmes ne sont pas des problèmes HTML5 ou CSS3, mais bien des développeurs de navigateur qui ne prennent pas en charge correctement les fonctionnalités fournies par HTML5 et CSS3.

À mesure que le temps passe, nous devrions voir des améliorations dans les navigateurs, et tout fonctionnera comme prévu. D'ici là, il est peut-être temps de commencer à apprendre HTML6 et CSS4, mais au moins, c'est un pas dans la bonne direction.

image d'en-tête avec la permission de

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.