Télécharger en tant que PDF, PPTX
Téléchargé parGhodhbane Mohamed Amine
HTML5 & CSS3 : Jeux
Le document présente une introduction au HTML5, en mettant en avant ses nouveautés comme les balises sémantiques, les éléments multimédias, et le stockage hors ligne. Il souligne également les avantages de HTML5 pour développer des applications web, notamment dans le domaine des jeux. Enfin, il conclut sur la nécessité d'attendre la finalisation des normes du W3C pour maximiser l'expérience utilisateur par rapport aux applications natives.
Contenu connexe
Similaire à HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
- 1. 1 Hamdi Ben Abdesslem MedAmine Ghodbbane Kaouthar Ben Amor Khoubaeib Klai Malek Boujebli
- 2. Plan de laprésentation INTRODUCTION QU’EST CE QUE HTML 5 ? LES GRANDES NOUVEAUTÉS HTML 5 LES AVANTAGES DE HTML5 APPLICATION : JEU CONCLUSION RÉFÉRENCES 2
- 3. Introduction 3 Le W3Ctente de persévérer vers la voie du XML (création du XHTML) Le WhatWG souhaite améliorer HTML et débute son travail en 2004 avec Ian Hickson qui sera l’éditeur officiel du HTML 5 Le HTML5 est soutenu devant le W3C en 2007. Il sera retenu et son premier brouillon sera publié l’année suivante.
- 4. HTML 5 :HTML , CSS 3 et JS 4
- 5. Les navigateurs et lesupport de l’HTML 5 5 12/2013 source : www.html5test.com
- 6. Le CSS 6 Commevu précédemment, le code CSS va mettre en forme notre document HTML sélecteur { propriété : valeur; } Syntaxe générale : Exemple : p { font-size : 10px; color : ‘blue’ } <p>Le CSS !!!</p> Le CSS !!!
- 7. Code HTML +CSS +JS 7 Association des 3 langages piliers du WEB : HTML 5 <!DOCTYPE html> <html> <head> <title>HTML5</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="styles.css"> <script src="javascript.js"></script> </head> <body> HTML5 !!! </body> </html> Inclusion de notre fichier CSS Inclusion de notre fichier JavaScript
- 8. Les grandes nouveautésde l’HTML 5 8 Les nouvelles balises sémantiques (<header>, <footer> …) Les principales nouveautés CSS 3 Les balises multimédias (<audio> et <video>) La balise <canvas> pour un affichage dynamique Le stockage hors ligne La géolocalisation Une gestion des formulaires plus poussée
- 9. Les nouvelles balisessémantiques 9 Les nouvelles balises sémantiques :
- 10. Les nouvelles balisessémantiques 10
- 11. Les nouvelles balisessémantiques 11 <body> <div id="header"></div> <div id="nav"></div> <div class="article"> <div class="section"></div> <div class="section"></div> </div> <div id="aside"></div> <div id="footer"></div> </body> <body> <header></header> <nav></nav> <article> <section></section> <section></section> </article> <aside></aside> <footer></footer> </body>
- 12. Le CSS 3: les nouveautés 12 Le CSS 3 ses nouveautés
- 13. Le CSS 3: quelques nouveautés 13 Border Radius Box Shadow Text Shadow Multiple Columns Gradients : http://www.colorzilla.com/gradient-editor background: linear-gradient(left, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%);
- 14. Les nouvelles balises<audio> et <video> 14 La lecture audio et vidéo avec et
- 15. Les nouvelles balises<audio> et <video> 15 Une des grandes nouveautés de l’HTML 5 est la prise en charge sans plugins, de la lecture des flux audio et vidéo. <video src="video.mp4"></video> <audio src="audio.mp3"></audio> <img src="image.png" alt="Une image !">
- 16. La nouvelle balise<video> La simple syntaxe 16 <video src="video.mp4"></video> Aperçus dans Google Chrome
- 17. La nouvelle balise<video> 17 <video width="360" height="640" poster="image.jpg" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> l'alternative à la vidéo : un lien de téléchargement, un message, etc. </video> autoplay, preload et loop Aperçus dans Mozilla Firefox
- 18. La nouvelle balise<audio> 18 La syntaxe <audio src="audio.mp3" controls></audio> Aperçus dans les principaux navigateurs : autoplay, preload et loop
- 19. Le dessin avecCanvas 19 Le dessin avec
- 20. Le dessin avecCanvas 20 La syntaxe HTML pour la création d’un élément canvas est très simple : <canvas id="dessin" width="640" height="480"> Votre navigateur ne support pas canvas ! Bouuuu … </canvas>
- 21. La 3D avecCanvas 21 Cette technologie est en cours d’expérimentation et est principalement compatible avec Google Chrome et Mozilla Firefox pour le moment. www.triggerrally.com www. mrdoob.com
- 22. Les avantages deHTML5 22
- 23.
- 24. Présentation Le jeu représenteune des applications possible de la technologie HTML5 Nom du jeu: Bunny-Bunny Type: un jeu match three Plateforme: Web Publique cible: Toute tranche d’âge Eléments du jeu: des armes (générés automatiquement et aléatoirement) 24
- 25. Outils nécessaires Des connaissancesen HTML5, JavaScript et CSS3 CreateJS qui est une suite de bibliothèques JavaScript: EaselJS: permet la manipulation de la balise <canvas> TweenJS: permet de créer des animations fluides et personnalisables SoundJS: permet de manipuler la balise <audio> PreloadJS: permet la gestion de chargement des assets(les différents objets utilisés) jMatch keymaster 25
- 26. Développement Comment représenter leséléments graphiques du jeu? Comment générer les éléments du jeu? Comment charger le script? Comment gérer la correspondances entre les éléments de la grille? Comment calculer et mettre à jour le score? 26
- 27.
- 28. Conclusion la Web Appen HTML5 offre de nombreux avantages et semble tenir toutes ses promesses, tant sur le plan technique que économique. Les différences entre les applications web et natives ont tendances à se restreindre. Cependant, il faudra attendre que toutes les normes du W3C soient finalisées avant de pouvoir proposer aux consommateurs des expériences aussi riches que celles des applications natives. 28
- 29.
- 30.