Stage pratique de 2 jour(s) Réf : NYD Canvas, créer des animations dynamiques en HTML5 Participants HTML 5 apporte des solutions puissantes et indépendantes pour la création de contenus riches. Au cours de cette formation, vous apprendrez à développer des jeux et des éléments Rich Media en HTML 5 avec JavaScript. Vous découvrirez également les possibilités d'animation 2D et 3D. Développeurs de contenus Web riches, toutes les personnes souhaitant découvrir ou opérer une migration vers HTML 5. Pré-requis Bonnes connaissances du HTML et des technologies du Web. Connaissance du langage de programmation JavaScript. Prix 2016 : 1410€ HT OBJECTIFS PEDAGOGIQUES Dessiner, animer, créer des graphiques et des images Créer des bannières interactives et des jeux Créer des animations 3D 1) HTML 5 rappels 2) L'API Canvas avec JavaScript 3) Création d'un concept Rich Media 4) Faciliter la création avec les frameworks 5) 3D avec Three.js Méthodes pédagogiques Dates des sessions Développement, présentation et mise en oeuvre d'applications existantes. Paris Travaux pratiques 8 sep. 2016, 3 nov. 2016 En alternant programmation, pratique et théorie, vous apprendrez à concevoir et réaliser des contenus riches et connectés en HTML5. 1) HTML 5 rappels - Composants d'une application Web. - Tour d'horizon des frameworks HTML 5. - Les nouvelles API orientées médias. - Perspectives et conséquences pour les développeurs. - Le langage JavaScript : mise à niveau. Travaux pratiques Programmation autour des nouvelles API JavaScript. 2) L'API Canvas avec JavaScript - L'élément Canvas. Présentation de L'API. - Dessiner : gestion du remplissage. - Création des formes. - Importer, utiliser des images et manipuler les pixels. - Gestion du texte. Création des effets (ombres...). - Première animation et principes pratiques. - Optimiser le canvas. Travaux pratiques Révision et programmation JavaScript. Utilisation avec l'élément canvas pour réaliser des graphiques. 3) Création d'un concept Rich Media - Motivation utilisateur : "feedback", "fish bait", émotionnelle... - Gameplay : règles et ergonomie. - Structurer les écrans essentiels : ouverture, interstice, "packshot". - Intégrer un processus de conception partagée. - Intégrer une dimension sociale par les réseaux : Facebook. - Préparation et organisation des ressources. Réflexion collective Création inversée du plan conceptuel à partir d'une étude de cas concrète. Définition d'un concept personnalisé de contenu Rich Media promotionnel selon les ressources fournies. 4) Faciliter la création avec les frameworks - Quelle solution choisir ? KineticJS, PaperJS, FabricJS ... - KineticJS, présentation et concepts. Tour d'horizon de l'API. - Organisation des ressources : stage, layers, groups. - Création de tracés et importation de bitmap. - Gestion des événements. - Animation et interpolation. Drag and Drop. Travaux pratiques Création de bannières interactives et de jeux connectés. 5) 3D avec Three.js ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Défense cedex. Tél : +33 (0)1 49 07 73 73. Fax : +33(0)1 49 07 73 78 page 1 - 3D en Javascript, présentation et théorie. - Notion de scène : création. - Mise en œuvre des caméras. - Concepts clés du framework. - Gestion des lumières. - Définition et animation d'objets. - Application de textures. Travaux pratiques Création d'une animation HTML 5 en 3D avec Three.js ORSYS, La Grande Arche, Paroi Nord, 92044 Paris La Défense cedex. Tél : +33 (0)1 49 07 73 73. Fax : +33(0)1 49 07 73 78 page 2