HTML5 & CSS3 : Jeux
•
1 like•2,881 views
Présentation sur HTML5 et CSS3 , Dans le contexte d'un projet ( jeu en HTML5 )
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5 & CSS3 : Jeux
Similar to HTML5 & CSS3 : Jeux (20)
More from Ghodhbane Mohamed Amine
Recently uploaded
Recently uploaded (12)
HTML5 & CSS3 : Jeux
- 1. 1 Hamdi Ben Abdesslem Med Amine Ghodbbane Kaouthar Ben Amor Khoubaeib Klai Malek Boujebli
- 2. Plan de la pré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 W3C tente 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 le support de l’HTML 5 5 12/2013 source : www.html5test.com
- 6. Le CSS 6 Comme vu 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és de 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 balises sémantiques 9 Les nouvelles balises sémantiques :
- 10. Les nouvelles balises sémantiques 10
- 11. Les nouvelles balises sé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 avec Canvas 19 Le dessin avec
- 20. Le dessin avec Canvas 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 avec Canvas 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 de HTML5 22
- 24. Présentation Le jeu représente une 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 connaissances en 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
- 28. Conclusion la Web App en 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
- 30. Questions ? 30