Vous êtes sur la page 1sur 41

03/ 02/ 2015

Lavenir du
WEB
Initiation au web et au

HTML 5

Plan de la prsentation
Introduction

Une brve histoire du WEB


Le consortium W3C et le groupe WhatWG
Le fonctionnement du WEB

Plan

Quest ce que HTML 5 ?

HTML 5 : un ensemble de technologies (HTML 5, CSS 3, JavaScript)


Son support dans les navigateurs

Une introduction au langage HTML

Premier document HTML 5


Le doctype, la validation W3C et le CSS
Un document html avec le CSS et le JavaScript

Les grandes nouveauts HTML 5

Les balises smantiques


Les nouveauts CSS 3
Les balises multimdias (audio et vido)
Le dessin avec le Canvas (dessin 2D et aperus de la 3D)

Conclusion

Perspectives

A lorigine du WEB : Tim berners-Lee


Une brve histoire du WEB

Linitiateur du premier site internet et


du premier navigateur (WWW) en 1990
est Tim berners-Lee
Il est lorigine des 3
technologies principales
du WEB : Les adresses
web, le protocole HTTP et
le HTML
Il est le fondateur et le prsident du
W3C depuis 1994.

Crations de nouvelles technologies


Une brve histoire du WEB

1993 : Le navigateur Mosaic dvelopp pour


Sun intgre la balise img pour lintgration des
images
Une partie de lquipe dveloppe lanne
suivante Netscape Navigator
Il devient par la suite ncessaire de
standardiser les langages du WEB -> Cration
du W3C par Tim
A partir de 1995, tout sacclre : cration de
Javascript, de lHTML 2.0, et de la 1re version
dinternet explorer.

Le W3C
Consortium W3C et le
WhatWG

Le W3C est un organisme indpendant qui


met des standards pour le WEB et notamment
le HTML
Ce dernier est administr par
trois entits :
Le MIT (tats-Unis)
Luniversit Keio (Japon)
LErcim (Europe)

Le W3C standardise galement de nombreuses


autres technologies comme MathML, RDF,
Soap, SVG, Smil, PNG et autres variations
autour de XML

Le WhatWG
Consortium W3C et le
WhatWG

Le W3C tente de persvrer vers la voie du


XML (cration du XHTML)
Le WhatWG souhaite amliorer HTML
et dbute son travail en 2004 avec
Ian Hickson qui sera lditeur officiel du HTML 5
Le HTML5 est soutenu devant le W3C en
2007.
Il sera retenu et son premier brouillon sera publi
lanne suivante.

Le fonctionnement du WEB
Le fonctionnement du
WEB

HTML 5 : HTML 5, CSS 3 et JavaScript


Quest ce que HTML 5 ?

Le HTML 5 est fondamentalement le langage


HTML dans sa 5me version
Mais il regroupe, par un abus de langage
justifi, le
HTML 5, le CSS 3 et le JavaScript. Le HTML 5
est donc
la pierre angulaire de cet ldifice.
On va donc avoir :
HTML -> fond du document
CSS -> forme du document
JavaScript -> dynamisme
du document

Les navigateurs et le support de lHTML 5


Quest ce que HTML 5 ?

Distinguons les navigateurs et les moteurs de


rendu.
Chaque navigateur intgre un moteur de
rendu qui peut tre commun plusieurs
autres navigateurs.
Mote
ur

Navigateurs

Dveloppement

Tride
nt

Internet Explorer

Microsoft

Webk
it

Google chrome, apple safari,


android, epiphany

Apple, Google, KDE,


Nokia, RIM, Palm et
autres

Geck
o

Mozilla firefox, Camino, K-Meleon,


Galeon, Flock

Fondation Mozilla

Prest
o

Opera, opera mobile, opera Wii

Opera Software

KHTM

Konqueror

KDE

Un petit tableau des correspondances :

Les navigateurs et le support de lHTML 5

Quest ce que HTML


5?

La frquence des mises jours des navigateurs


est telle quil devient difficile de lister toutes
les fonctionnalits HTML 5 prises en charges.
Cependant, un site tel que
http://caniuse.com ou encore
http://fmbip.com mise jour rgulirement
permet davoir des informations assez prcises
sur la prise en charge du HTML 5 de votre site
Navigateur
poin
ou de votre
navigateur. Versi
on
ts
Google Chrome

16.0

373

Mozilla Firefox

10.0

332

Opera

11.60

329

Apple Safari

5.1

302

Microsoft Internet

141

source
Explorer : http://html5test.com

Introduction au langage HTML


Premier document HTML

HTML (Hypertext Markup Language) est le


format de donnes structurant une page web.
HTML est initialement driv du SGML
(Standard Generalized Markup Language) dont
la premire publication date de 1986.
Cest un langage de balisage :
<balise>Contenu</balise>
<html>
<head>
Les en-ttes du document

</head>
<body>
Le corps du document

</body>
</html>

Exemple de
document HTML
avec les premires
balises html, head
et body

Le Doctype avant tout


Le Doctype

Le doctype est le prambule dune page


HTML, il spcifie le type de document.

Doctype HTML 4.01


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Doctype XHTML 1.1


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Doctype HTML 5
<!DOCTYPE html>

Codes HTML valides W3C


La validation W3C

Code HTML 5 valide W3C ( tester sur


http://validator.w3.org)
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta charset="UTF-8">
</head>
<body>
Vive HTML 5 ! :D
</body>
</html>

Code XHTML 1.1 valide W3C ( tester sur


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
http://validator.w3.org)

"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>XHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><span>Vive pas xHTML5 ! :D</span></p>
</body>
</html>

Le CSS
Le document HTML

Comme vu prcdemment, le code CSS va


mettre en forme notre document HTML
Syntaxe

slecteur {
gnrale : proprit : valeur;
}

Exemple
:

p {
font-size : 10px;
color : blue
}

Dans notre exemple, le contenu texte de


toutes nos balises <p> auront une taille de 10
px et une couleur grise.
<p>Le CSS !!!
Le
</p>
CSS !!!

Code HTML avec du CSS et du JavaScript


Le document HTML

Association des 3 langages piliers du WEB :


Note 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

Tableau priodique des lments


Le document HTML
http://Joshduck.com/periodic-table.html

Les grandes nouveauts de lHTML 5

Les nouveauts
HTML 5

Les nouvelles balises smantiques


(<header>, <footer> )
Les principales nouveauts CSS 3
Les balises multimdias (<audio> et
<vido>)
La balise <canvas> pour un affichage
dynamique
Le stockage hors ligne
La golocalisation

Les nouvelles balises smantiques


Les balises smantiques

Les nouvelles balises


smantiques :
<header>
<nav>
<article>
<section>
<aside>
<footer>

Les nouvelles balises smantiques


Les balises smantiques

AVANT

APRS

Les nouvelles balises smantiques


Les balises smantiques

AVANT

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

APRS

<body>
<header></header>
<nav></nav>
<article>
<section></section>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>

Le CSS 3 : les nouveauts


Les nouveauts du CSS 3

Le CSS 3,
ses nouveauts

Le CSS 3 : quelques nouveauts


Les nouveauts du CSS 3

Border Radiusborder-radius:

30px;

Box Shadow box-shadow:

10px 10px 10px 1px ;

Text Shadowtext-shadow:

2px 2px 5px #444 ;

Multiple Columnscolumn-count:

2;
column-gap: 10px;

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%);

La lecture
audio et vido
avec
<audio> et
<video>

Les nouvelles balises <audio> et <video>

Les balises audio et video

Les nouvelles balises <audio> et <video>


Les balises audio et video

Une des grandes nouveauts de lHTML 5 est la


prise en charge sans plugins, de la lecture des
flux audio et vido
Fondamentalement, les nouvelles balises
<audio> et <video> se comporte de la mme
manire et sutilisent quasiment de la mme
faon
que linclusion
dune
simple
syntaxe
minimale pour
la lecture
dunimage
fichier !
vido src="video.webm"></video>
:
<video
syntaxe minimale pour la lecture dun fichier
audio:src="audio.mp3" controls></audio>
<audio

syntaxe minimale pour linclusion dune


image
:
<img
src="image.png"
alt="Une image !">

La nouvelle balise <video>


Les balises audio et video

La simple syntaxe
<video src="video.webm"></video>
nous offre donc la possibilit de lire une vido
directement dans notre navigateur :

Aperus dans Google


Chrome

Cependant,
labsence de
lattribut controls
implique que la
lecture, la pause et
le stop doivent
seffectuer avec le
clique droit ce qui
nest pas trs
pratique.

La nouvelle balise <video>


Les balises audio et video

Code source dun lment <video> plus


complet avec le contrle, la taille, limage
dintro, les diffrentes sources et le texte
<video
width="360" height="640" poster="image.jpg" controls>
alternatif.
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
l'alternativelavido:unliendetlchargement,unmessage,etc.
</video>

Exactement la mme
vido que
prcdemment mais
avec limage dintro
et le contrleur
par le possde
client.
Lavisible
balise <video>
Aperus dans Mozilla Firefox

galement lattribut autoplay,


preload et loop

La nouvelle balise <video>


Les balises audio et video

La prise en charge par les navigateurs des


diffrents formats vidos est la suivante :
Navigateu
r

H.264/MP4/A
AC

Ogg/Theora/Vor
bis

WebM

3.5+

3.5+

4.0+

10.5

10.5+

10.6+

9.0+

9.0+

3.0+

4.1+

4.0+

3.1+

9+ avec installation dun


plugin
3.0+

6.0+
9+ avec installation dun
plugin

Pour une prise en charge simplifi par les


navigateurs, il existe de nombreux scripts
JavaScript comme : Popcorn.js, videoJS,
html5media, SublimeVideo ect
Outil de conversion vido simple (Micro Video

La nouvelle balise <audio>


Les balises audio et video

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


nous offre la possibilit de lire un fichier audio
directement dans notre navigateur tout comme
pour la vido.
Aperus dans les principaux navigateurs :

La nouvelle balise <audio>


Les balises audio et video

De mme que pour llment <video> , nous


pouvons avec llment <audio> grer
plusieurs sources pour rpondre
lincompatibilit des navigateurs.
<audio controls>
<source src="audio.oga" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.acc" type="audio/mp4" />
l'alternativelaudio:unliendetlchargement,un
message,etc.
</audio>

La balise <audio> possde galement lattribut autoplay,


preload et loop

La nouvelle balise <audio>


Les balises audio et video

La prise en charge par les navigateurs des


diffrents formats audio est la suivante :
Navigat
eur

MP3

Ogg Vorbis

ACC

WAV

3.5+

10.5

9.0+

3.0+

4.0+

De mme que pour la balise vido, vous


pouvez utiliser les scripts JavaScript vus
prcdemment pour une manipulation
simplifie de ces balises.

Activit sur les balises <audio> et <video>

Les balises audio et video

En utilisant les codes sources de cette


prsentation, essayez de faire marcher la
lecture dun fichier audio et vido sur la
mme page ds son chargement avec
lintgration des contrles.
On souhaite obtenir ce rsultat :

Le dessin avec Canvas

Le dessin avec
Canvas

Le dessin
avec
<canvas>
Canvas rider

Le dessin avec Canvas

Le dessin avec
Canvas

HTML 5 offre aujourdhui la possibilit de


dessiner, de traiter des images en allant jusqu
la possibilit de crer un jeu complet grce au
nouvel lment <canvas>
Ainsi, cette fonctionnalit devient une
alternative puissante face au flash ou encore au
Java dans la ralisation des ces diffrentes
tches
La
syntaxe HTML pour la cration dun lment
<canvas id="dessin" width="640" height="480">
Votre est
navigateur
ne support
canvas
trs simple
: pas canvas !
</canvas>

Dessiner un rectangle rouge

Le dessin avec
Canvas

Pour crer un dessin dans cet lment, on va


recourir lAPI de dessin 2D avec le langage
JavaScript
Exemple
de cration
simple rectangle
<canvas id="dessin"
width="640"dun
height="480">
Votrenavigateurnesupportpascanvas!
rouge
:
</canvas>
<script>
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.fillStyle = "red";
forme.fillRect(20, 30, 100, 50);
</script>

Aperus du rsultat :

Formes gomtriques

Le dessin avec
Canvas

Les formes primitives en Canvas ne


comprennent que des fonctions de la famille
des
rectangles : Rle
Fonction
fillRect(x, y, w, h)

Rectangle plein

strokeRect(x, y, w, h)

Rectangle surlign

clearRect(x, y, w, h)

Rectangle vide (efface)

var dessin = document.getElementById('dessin');


var forme = dessin.getContext('2d');
forme.lineWidth = 2; // Largeur du trait
forme.strokeStyle ="#ccc";// Couleur du trait
forme.fillStyle = "red";// Rectangle plein rouge
forme.fillRect(10, 10, 200, 100);// coor. + taille rectangle
forme.clearRect(100, 20, 20, 80);// rectangle qui efface
forme.clearRect(70, 50, 80, 20);// 2me rectangle qui efface
forme.strokeRect(1, 1, 220, 120);// cadre gris

Rsultat
:

Tracer un chemin

Le dessin avec
Canvas

A dfaut davoir simplement le rectangle


comme trac de primitive, Canvas possde
lavantage dune grande libert avec le trac de
chemins
Trac
<script> dun triangle avec les chemins :
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
Rsultat
forme.fillStyle = "#FFFF00"; // triangle jaune
forme.strokeStyle = "#EABB00"; // contour jaune fonc
: (100, 50)
forme.lineWidth = 5; // Largeur du contour
forme.beginPath(); // Commence le chemin
forme.moveTo(100, 50); // Se positionner
forme.lineTo(160, 150); // Se rendre ...
forme.lineTo(40, 150); // Se rendre ...
forme.closePath(); // Termine le chemin
forme.fill(); // color le fond
forme.stroke(); // trace le contour

</script>

(40, 150)

(160, 150)

Activit : tracer la triforce de Zelda

Le dessin avec
Canvas

En utilisant le code source suivant comme


base de lexercice, essayez de tracer la
triforce de Zelda.
<script>
var dessin = document.getElementById('dessin');
var forme = dessin.getContext('2d');
forme.fillStyle = "#FFFF00";
forme.strokeStyle = "#EABB00";
forme.lineWidth = 5;
var x = 200;
var y = 200;
forme.beginPath();
forme.moveTo(x, y);
forme.lineTo(x+60, y+100);
forme.lineTo(x-60, y+100);
forme.closePath();
forme.fill();
forme.stroke();
</script>

Les autres possibilits de Canvas

Le dessin avec
Canvas

Il existe de nombreuses possibilits Canvas


que vous pouvez retrouver notamment sur la
documentation de Mozilla :
https://developer.mozilla.org/fr/HTML/Canvas
Ces possibilits nous permettent de grer la
transparence, les dgrads, de faire des
transformations (chelle, rotation, translation
), de traiter des images, de modifier des
pixels, de grer les sprites, dcrire du texte
ect
Applications marquantes utilisant les canvas :
Sketchpad http://mugtug.com/sketchpad/
The Wilderness Downtown :
http://www.thewildernessdowntown.com/

La 3D avec Canvas

Le dessin avec
Canvas

Le socle canvas a permis le saut vers WebGL,


une API JavaScript spcialement conus pour la
cration 3D.
Cette technologie est en cours
dexprimentation et est principalement
compatible avec Google Chrome et Mozilla
Firefox pour le moment.
Quelques exprimentations :

Google : http://www.chromeexperiments.com/webgl
Hakim El Hattab : http://hakim.se/experiments/
Mr doob : http://mrdoob.com/
Jeu de rally : http://triggerrally.com/

La balise canvas et les navigateurs


Le dessin avec Canvas

La prise en charge par les navigateurs de la


balise canvas est la suivante :
Navigat
eur

Version

3+
9+
9+
1+
3.1+

Il existe une solution alternative pour internet


explorer < 9 avec une librairie JavaScript :
http://code.google.com/p/explorercanvas

Prsentation termine !
The end !

Cette prsentation sur le


HTML 5 est dsormais
termine !

Avez-vous des questions


?
Rfrence
utilise