0
1

Hamdi Ben Abdesslem

Med Amine Ghodbbane
Kaouthar Ben Amor

Khoubaeib Klai

Malek Boujebli
Plan de la présentation
INTRODUCTION

QU’EST CE QUE HTML 5 ?
LES GRANDES NOUVEAUTÉS HTML 5
LES AVANTAGES DE HTML5
APPLICAT...
Introduction

3

 Le W3C tente de persévérer vers la voie du XML
(création du XHTML)
 Le WhatWG souhaite améliorer HTML
...
HTML 5 : HTML , CSS 3 et JS

4
Les navigateurs et
le support de l’HTML 5

5

12/2013

source : www.html5test.com
Le CSS

6

 Comme vu précédemment, le code CSS va
mettre en forme notre document HTML
sélecteur {
propriété : valeur;
}

...
Code HTML + CSS +JS

7

 Association des 3 langages piliers du WEB :
HTML 5
<!DOCTYPE html>
<html>
<head>
<title>HTML5</t...
Les grandes nouveautés de l’HTML 5
8
 Les nouvelles balises sémantiques (<header>,
<footer> …)
 Les principales nouveaut...
Les nouvelles balises sémantiques

9

Les nouvelles balises
sémantiques :
Les nouvelles balises sémantiques
10
Les nouvelles balises sémantiques
11
<body>
<div id="header"></div>
<div id="nav"></div>
<div class="article">
<div class=...
Le CSS 3 : les nouveautés
12

Le CSS 3
ses nouveautés
Le CSS 3 : quelques nouveautés
13
 Border Radius
 Box Shadow
 Text Shadow
 Multiple Columns
 Gradients : http://www.c...
Les nouvelles balises <audio> et <video>

14

La lecture
audio et vidéo avec
et
Les nouvelles balises <audio> et <video>

15
 Une des grandes nouveautés de l’HTML 5 est la
prise en charge sans plugins,...
La nouvelle balise <video>
 La simple syntaxe

16

<video src="video.mp4"></video>

Aperçus dans Google Chrome
La nouvelle balise <video>

17
<video width="360" height="640" poster="image.jpg" controls>
<source src="video.mp4" type="...
La nouvelle balise <audio>

18
 La syntaxe

<audio src="audio.mp3" controls></audio>

 Aperçus dans les principaux navig...
Le dessin avec Canvas

19

Le dessin avec
Le dessin avec Canvas

20

 La syntaxe HTML pour la création d’un élément
canvas est très simple :
<canvas id="dessin" wi...
La 3D avec Canvas

21
 Cette technologie est en cours d’expérimentation
et est principalement compatible avec Google
Chro...
Les avantages de HTML5

22
Application: Jeu



Présentation



Outils nécessaires



Développement



Résultat final

23
Présentation



Le jeu représente une des applications possible
de la technologie HTML5



Nom du jeu: Bunny-Bunny



T...
Outils nécessaires



Des connaissances en HTML5, JavaScript et CSS3



CreateJS qui est une suite de bibliothèques
Java...
Développement



Comment représenter les éléments graphiques du
jeu?



Comment générer les éléments du jeu?



Comment...
Objectif final

27
Conclusion



la Web App en HTML5 offre de nombreux
avantages et semble tenir toutes ses promesses,
tant sur le plan tech...
Références
www.html5doctor.com
www.html5test.com
http://dev.w3.org/html5/spec/Overview.html
www. mrdoob.com

29
Questions

?

30
Upcoming SlideShare
Loading in...5
×

HTML5 & CSS3 : Jeux

1,068

Published on

Présentation sur HTML5 et CSS3 ,

Dans le contexte d'un projet ( jeu en HTML5 )

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,068
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
78
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 & CSS3 : Jeux "

  1. 1. 1 Hamdi Ben Abdesslem Med Amine Ghodbbane Kaouthar Ben Amor Khoubaeib Klai Malek Boujebli
  2. 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. 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. 4. HTML 5 : HTML , CSS 3 et JS 4
  5. 5. Les navigateurs et le support de l’HTML 5 5 12/2013 source : www.html5test.com
  6. 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. 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. 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. 9. Les nouvelles balises sémantiques 9 Les nouvelles balises sémantiques :
  10. 10. Les nouvelles balises sémantiques 10
  11. 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. 12. Le CSS 3 : les nouveautés 12 Le CSS 3 ses nouveautés
  13. 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. 14. Les nouvelles balises <audio> et <video> 14 La lecture audio et vidéo avec et
  15. 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. 16. La nouvelle balise <video>  La simple syntaxe 16 <video src="video.mp4"></video> Aperçus dans Google Chrome
  17. 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. 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. 19. Le dessin avec Canvas 19 Le dessin avec
  20. 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. 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. 22. Les avantages de HTML5 22
  23. 23. Application: Jeu  Présentation  Outils nécessaires  Développement  Résultat final 23
  24. 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. 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. 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. 27. Objectif final 27
  28. 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
  29. 29. Références www.html5doctor.com www.html5test.com http://dev.w3.org/html5/spec/Overview.html www. mrdoob.com 29
  30. 30. Questions ? 30
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×