Introduction à l'HTML5 et ses API JavaScript

La spécification Canvas au sein du langage html5
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Animate CC 2019 - Les fondamentaux
Revoir le teaser Je m'abonne
3,0
Transcription

89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
89,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont d'apprendre à utiliser HTML5 avec ses API JavaScript pour créer des animations interactives et enrichir les applications web.

Apprenez comment le HTML5 et ses API JavaScript transforment la création de contenu web interactif.

On pourrait penser à tort que le HTML5 est un simple langage de programmation comme l'étaient les précédentes versions du HTML telles que le XHTML ou le HTML4 qui étaient principalement axés sur le contenu des pages web. Dans cette continuité, HTML5 fait bien plus que ses prédécesseurs. Il envisage plus globalement les applications web et l'interactivité. En outre, le HTML5 est constitué d'un ensemble de composantes qui peuvent travailler indépendamment ou de paire pour enrichir les pages web et créer des animations. La base du HTML5 est bien sûr le langage de balise HTML. Des contenus texte, images, sons, vidéos sont balisés par des balises spécifiques. Le langage CSS vient s'ajouter au HTML pour définir l'aspect des balises et de leurs contenus, couleurs, tailles, etc.

Enfin, et c'est l'élément le plus important qui va donner au HTML5 sa véritable dimension, le langage JavaScript peut être utilisé en association avec le HTML et le CSS. Cette interaction existait déjà dans les précédentes versions du HTML mais la véritable nouveauté c'est l'utilisation d'API JavaScript. Les API, on parle aussi de bibliothèque ou framework, sont des ensembles d'objets, de propriétés et de méthodes associés à des attributs HTML5 rassemblés dans une bibliothèque en vue d'utilisation spécifique. Par exemple, gérer l'interactivité de menus avec des effets de survol, gérer des drag-and-drop, gérer de la vidéo, des déplacements dans l'animation, etc. En gros, permettre de faire en HTML5 ce qu'on faisait avant avec des technologies propriétaires comme Adobe Flash et ActionScript.

Il existe actuellement plusieurs API très performantes comme jQuery, Greensock ou Create.js. La plupart du temps, elles permettent de faire la même chose mais avec plus ou moins de simplicité ou de fluidité. Pour son logiciel Animate.cc, Adobe a misé au départ sur l'API Create.js qui existait depuis plusieurs années et qu'Adobe a intégré dès la version Flash TC Pro lorsqu'il a introduit dans Flash la possibilité de produire du HTML5. Et HTML5 Canvas, dans tout ça, c'est quoi ? La balise Canvas fait partie des nouvelles balises apportées par le HTML5. C'est donc un nouvel élément HTML5 qui intègre diverses API JavaScript qui vont permettre de générer et afficher de façon dynamique images, textes, animations.

Canvas fournit notamment des fonctions de dessin 2D et on comprend donc pourquoi Adobe a choisi de le mettre à profit lorsqu'il a voulu faire évoluer Flash pour produire à la fois du Flash et du HTML5. À la différence d'autres logiciels d'animation HTML5 comme Edge Animate.cc ou Google Web Designer, Animate.cc pour produire du HTML5 n'anime pas l'ensemble des éléments du DOM de la page mais anime des éléments essentiellement au sein de la balise Canvas qui définit un espace de pixels, une fenêtre initialement transparente dans la page HTML. En sortie d'Animate.cc, une animation HTML5 Canvas agit comme un moteur de rendu bitmap, c'est-à-dire que tout ce que nous animons dans l'interface utilisateur Animate.cc que ce soit du bitmap ou du vectoriel est rendu en pixels.

Côté programmation, le framework Create.js intégré à l'interface permet de gérer l'interactivité ou différentes fonctions d'animation par programmation. Animate.cc compile donc en sortie du code HTML et JavaScript pour tous les contenus de l'animation créée sur la scène, dessin vectoriel, image bitmap, son, interpolation etc. L'utilisation de Canvas pour produire de l'animation interactive présente donc de nombreux avantages, il fonctionne bien en association avec les autres standards HTML et JavaScript, il est très bien supporté par les périphériques mobiles et côté performance il est accéléré matériellement sur quasi tous les navigateurs et systèmes.

Voir plus
Questions réponses
Quelle est la principale nouveauté de HTML5 par rapport à ses prédécesseurs?
La principale nouveauté de HTML5 par rapport à ses prédécesseurs est l'utilisation d'API JavaScript pour gérer des fonctionnalités avancées comme l'interactivité et les animations.
Pourquoi Adobe a-t-il choisi de mettre à profit Canvas dans Flash?
Adobe a choisi de mettre à profit Canvas dans Flash car Canvas permet de générer et afficher dynamiquement des images, des textes et des animations, offrant ainsi une alternative open-source aux technologies propriétaires comme Flash et ActionScript.
Quels sont les avantages d'utiliser Create.js avec Animate.cc?
Les avantages d'utiliser Create.js avec Animate.cc incluent la gestion facile de l'interactivité et des animations par programmation, ainsi que la compatibilité avec les autres standards HTML et JavaScript, et le support accru sur les périphériques mobiles.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
bernard.sastrada
Il y a 2 mois
Je ne vois pas de possibilté de communiquer avec le formateur quand on rencontre des problèmes bloquants