Embed Size (px)
DESCRIPTION
Présentation sur HTML5 et CSS3 , Dans le contexte d'un projet ( jeu en HTML5 )
Citation preview
1
Kaouthar Ben Amor
Hamdi Ben Abdesslem
Khoubaeib Klai
Med Amine Ghodbbane
Malek Boujebli
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
Introduction3
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.
HTML 5 : HTML , CSS 3 et JS4
Les navigateurs et
le support de l’HTML 5
source : www.html5test.com
12/2013
5
Le CSS
Comme vu précédemment, le code CSS va
mettre en forme notre document HTML
Syntaxe générale :sélecteur {
propriété : valeur;
}
Exemple : p {
font-size : 10px;
color : ‘blue’
}
<p>Le CSS !!!</p> Le CSS !!!
6
Association des 3 langages piliers du WEB :
Code HTML + CSS +JS
<!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 CSSInclusion de notre
fichier JavaScript
HTML 5
7
Les grandes nouveautés de l’HTML 5
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
8
Les nouvelles balises
sémantiques :
Les nouvelles balises sémantiques9
Les nouvelles balises sémantiques10
Les nouvelles balises sémantiques11
<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>
Le CSS 3
ses nouveautés
Le CSS 3 : les nouveautés12
Le CSS 3 : quelques nouveautés13
Border Radius
Box Shadow
Text Shadow
Multiple Columns
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%);
Gradients : http://www.colorzilla.com/gradient-editor
La lecture
audio et vidéo avec
et
Les nouvelles balises <audio> et <video>14
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>
<img src="image.png" alt="Une image !">
<audio src="audio.mp3"></audio>
La nouvelle balise <video>16
La simple syntaxe
Aperçus dans Google Chrome
<video src="video.mp4"></video>
La nouvelle balise <video>
17
Aperçus dans Mozilla Firefox
autoplay, preload et loop
<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>
La nouvelle balise <audio>
18
La syntaxe <audio src="audio.mp3" controls></audio>
Aperçus dans les principaux navigateurs :
autoplay, preload et loop
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" width="640" height="480">
Votre navigateur ne support pas canvas ! Bouuuu …
</canvas>
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
22Les avantages de HTML5
23Application: Jeu
Présentation
Outils nécessaires
Développement
Résultat final
24Pré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)
25Outils 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
26Dé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?
27Objectif final
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.
28Conclusion
Références 29
www.html5doctor.com
www.html5test.com
http://dev.w3.org/html5/spec/Overview.html
www. mrdoob.com
30
Questions
?
