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.
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
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
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
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