La Formation - Introduction à HTML5 - Animations et jeux * Durée : 1h51mn * Nombre de vidéos : 9 * Formateur : Dr Jean-Yves Plantec * Editeur : Groupe INSA * Release par : NaWraS * Présentation de la formation : Vous avez envie de développer des animations ou des petits jeux pour le web, mais sans trop savoir comment vous y prendre. Vous avez peut-être entendu parler de Flash et plus récemment d'HTML5. Vous n'avez pas de connaissance particulière des langages web. En revanche, vous avez des notions d'algorithmique et peut-être que vous programmez déjà un peu. Ce cours "Initiation à HTML5 - animations et jeux" est pour vous. Mais si vous avez déjà une expérience de développement web, ce cours est également pour vous. Il vous propose de découvrir quelques-unes des nouveautés d'HTML5 et de les mettre en oeuvre sur un projet d'animation ou de jeu. *Une première partie sera consacrée à différents langages. Nous verrons notamment qu'une page web est structurée en différents éléments et que c'est le langage HTML qui va nous permettre de décrire cette structure. Afin à la fois de positionner certains de ces éléments les uns par rapport aux autres et d'appliquer une charte graphique, nous introduirons le langage CSS. Nous verrons qu'il est possible de faire en sorte que cette structure HTML et que ce rendu graphique initial soient transformés en direct : repositionnement, création, modification du contenu et du style, etc., et ce pour l'instant sans échange avec le serveur. Ceci est rendu possible grâce au langage JavaScript. Nous verrons également, toujours grâce à JavaScript, que cette page web peut réagir et se transformer suite à un clic souris ou une action au clavier et nous introduirons pour cela les événements JavaScript. *Dans une deuxième partie, nous préciserons grâce à de nombreux exemples ce qu'HTML5 apporte de nouveau : -nous verrons comment HTML5 simplifie l'utilisation de contenus sonores et vidéo ; -nous verrons en détail comment HTML5 permet de dessiner des objets ; -nous verrons comment faire en sorte que ces dessins évoluent au cours du temps et deviennent des animations ; -nous reviendrons également sur les événements pour voir comment interagir avec les éléments dessinés. Enfin, nous verrons comment HTML5 permet d'introduire une fonctionnalité de glisser-déposer. *La troisième et dernière partie est importante. Elle sera l’occasion d'introduire des éléments de méthodologie, propres au développement de petites animations avec HTML5. Un projet sera l'occasion pour vous de mettre en oeuvre vos connaissances et d'utiliser toutes les briques mises en place. ======================= Partie 1 : HTML et CSS ======================= Leçon 1.1 : HTML. Que recouvre cet acronyme ? Un peu d'histoire. HTML5. Que recouvre cet acronyme ? Pour répondre à cette question, nous allons parcourir très brièvement une partie de l'histoire du web, qui n'est rappelons-le qu'une petite partie des services offerts par Internet. Leçon 1.2 : HTML : structure, balises Dans cette partie, nous allons donc découvrir HTML, acronyme de Hyper Text Markup Language. Nous allons voir comment est structurée une page web et introduire quelques balises, parmi les plus courantes. Leçon 1.3 : CSS Dans cette partie, nous allons introduire le langage CSS. Nous allons voir comment l'utiliser au sein d'une page web, découvrir comment écrire des règles CSS : la notion de sélecteur qui permet de cibler une ou plusieurs parties du documet HTML, la notion de propriété et la notion de valeur. Nous ferons un focus particulier sur la propriété qui permet de positionner des élements les uns par rapport aux autres. ===================== Partie 2 : JavaScript ===================== Leçon 2.1 : JavaScript : notions fondamentales C'est l'occasion de découvrir JavaScript. Ce langage est vaste et mériterait une formation à lui tout seul, mais les bases que je vous propose ici vous ouvriront le champ des possibles et sont suffisantes pour arriver au bout de cette formation. Leçon 2.2 : Quelques outils utiles Voici quelques éléments d'explication concernant les outils de développement généralement intégrés aux navigateurs usuels. Nous prendrons pour exemple Firefox et découvrirons : la console d'erreurs, le débogueur, l'inspecteur. ======================================== Partie 3 : Evénements JavaScript. jQuery ======================================== Leçon 3.1 : Evénements JavaScript Dans cette partie, nous allons voir comment introduire de l'interactivité dans une page web. Nous introduirons la notion d'événement JavaScript et nous préciserons comment il est traité par le navigateur. Nous verrons ensuite comment mettre en oeuvre des événements usuels tels que la fin du chargement de la page HTML, le clic souris, un événement clavier. Leçon 3.2 : jQuery Dans cette leçon, nous introduisons le framework jQuery. On appelle framework JavaScript une bibliothèque de fichiers JavaScript, rassemblant des fonctions qui permettent de simplifier les instructions, synthétiser certaines tâches répétitives, faire les tests qui adaptent le code aux différents navigateurs, etc. Nous allons voir comment utiliser JavaScript et très brièvement sur quelques exemples en quoi la syntaxe JavaScript est simplifiée.