HTML 5

HTML 5
HyperText Markup Language 5
Module : Technologies web 1

UP WEB ESPRIT 2014-2015
PLAN
Structure dun document HTML5
Une nouvelle smantique
Les nouveaux lments de formulaire
Les nouveaux lments pour les mdias
Web Storage
Golocalisation
Plus dAPS
2
UP WEB ESPRIT
UP WEB ESPRIT
Le DOCTYPE
HTML 4.01 Strict
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
UP WEB ESPRIT
Nouvelle Structure
<div<header>
id="header">
<div class="article">
<article>
<div
<nav>
id="nav">
<div<section>
id="content">
<div<footer>
id="footer">
UP WEB ESPRIT
<div
<aside>
id="right">

<header>
len-tte
<footer>
le pied-de-page
<nav> les principaux liens de navigation

Menus du site
<section>
les parties thmatiques de la page
<aside>
les informations complmentaires
<article>
Souvent un lment dune section
UP WEB ESPRIT
UP WEB ESPRIT
Nouvelle smantique en HTML5
UP WEB ESPRIT
Nouvelle smantique
Le HTML5 offre de nouvelles balises pour amliorer la hirarchisation et la
structuration de votre document.
<canvas>
<datagrid>
<meter>
<progress>
<details>
<svg>
Et
encore
...
<dialog>
<time>
<embed>
<figure>
<command>
<menu>
Rating:
UP WEB ESPRIT

Balise
Meter
Progress
Description
Dfinit une unit de mesure
Dfinit une progression
lment graphique permettant d'afficher des donnes rcupres sur une Base de
Datagrid
Donnes.
Utilisation trs simple et rendu final agrable.
Time
Dfinit une unit de temps
Svg
Dfinit une image vectorielle
10
UP WEB ESPRIT

Balise
Menu
Command
11
Description
Dfinit un menu en liste
Dfinit un bouton de commande
Embed
Dfinit un contenu extrieur (audio, vido )
Figure
Dfinit un groupe dlment multimdia
Details
Dfinit les dtails dun lment
UP WEB ESPRIT

Balise
Description
Signale une conversation.
Dialog
Contient des lments dt que l'on utilise pour identifier un locuteur, et des lments
dd qui contiennent les paroles du locuteur.
Mark
Employe pour mettre en avant une partie d'un contenu en appliquant un style surlign
jaune sur le texte qu'elle dcrit.
wbr
12
Dfinit un saut de ligne possible.
UP WEB ESPRIT
Une Nouvelle smantique

Exemple dialog
<dialog>
<dt>Haythem</dt>
<dd>Bienvenu Esprit !</dd>
<dt>Mohamed</dt>
<dd>
Merci, vous tes notre enseignant?
</dd>
<dt>Haythem</dt>
<dd>Oui, je le suis! </dd>
<dt>Mohamed</dt>
<dd>
Quesque vous allez nous enseigner?
</dd>
<dt>Haythem</dt>
<dd>le HTML 5<dd>
</dialog>
13
UP WEB ESPRIT
Les nouveaux lment de formulaire
14
UP WEB ESPRIT

<input type="datetime">
<input type="text" list="list">
<datalist id="list">
<option value="Mr">
...<input
<input
type="number">
type="range">
<input
type="url">
<input
type="email">
</datalist>
Et encore
15
UP WEB ESPRIT
Minimum
and
Maximum
Values
Regular
MaxLength
Expressions
for
textarea
Required
Fields
Et encore
<input
type="text"
pattern="[A-Za-z0-9_\-]+">
<input
type="email"
required="required">
<input
type="range"
min="20" max="80">
<textarea
maxlength="2000"></textarea>
16
UP WEB ESPRIT
Les nouveaux lments de mdia
17
UP WEB ESPRIT
Les nouveaux lments pour les

mdias
Balise
18
Description
<audio>
Dfinit un contenu audio
<video>
Dfinit une vido ou un film
<source>
Dfinit de multiples ressources pour les mdias <video> et <audio>
<embed>
Dfinit un conteneur pour une application externe ou un contenu interactif (un

plug-in)
<track>
Dfinit des pistes de texte pour les mdias <video> et <audio>

Insre un sous-titre (au format Web Video Text Tracks (WebVTT)
WebVTT) une vido affiche avec la balise video
UP WEB ESPRIT
Les nouveaux lments de mdia

Exemple Balise Video
19
UP WEB ESPRIT
La balise Canvas en HTML5
20
UP WEB ESPRIT
La balise <canvas>
Balise
Description
Utilis pour dessiner des graphiques, des dessins, la vole, via des
scripts (habituellement en JavaScript)
<canvas>
a fournit une API en JavaScript qui permet de faire du dessin

vectoriel, a fournit une surface sur laquelle on peut dessiner au niveau
binaire un peu la manire des bitmaps.
21
UP WEB ESPRIT
La balise <canvas>
.
Le canvas est une zone rectangulaire dans une page HTML
22
UP WEB ESPRIT
La balise <canvas>
23
UP WEB ESPRIT
La balise <canvas>
24
UP WEB ESPRIT
La balise <canvas>
25
UP WEB ESPRIT
La balise SVG
SVG est une recommendation W3C
SVG est labrviation de Scalable Vector Graphics.
SVG est utilis pour dfinir des graphics bass sur des vecteurs sur
le Web
26
UP WEB ESPRIT
La balise SVG
Image vectorielle (ou image en mode trait).
Image numrique compose d'objets gomtriques individuels (segments de
droite, polygones, arcs de cercle, etc.)

Objets dfinis chacun par divers attributs de forme, de position, de couleur, etc.
Se diffrencie des images matricielles (ou bitmap ), dans lesquelles on
travaille sur des pixels.
27
UP WEB ESPRIT
La balise SVG
Les graphiques SVG conservent limage telle quelle est mme
quand elle est agrandie ou rduite de taille.

Chaque lement peut tre anim.
Les images SVG peuvent tre imprimes avec une grande qualit
quelque soit la rsolution.
28
UP WEB ESPRIT
Les lments supprims ou dprcis en HTML5
29
UP WEB ESPRIT
Les lments supprims ou dprcis en HTML5
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
30
UP WEB ESPRIT
<u>
Drag & Drop
31
UP WEB ESPRIT
Drag & Drop

Le Drag & Drop est une caractristique trs courante. C'est
le fait d attraper un objet et faites-le glisser vers un autre
emplacement.
En HTML5, Drag and Drop fait partie de la norme, et tout
lment peut tre dplac.
<img draggable="true">
32
UP WEB ESPRIT
Web Storage
33
UP WEB ESPRIT
Web Storage
Les pages Web peuvent stocker des donnes localement dans le
navigateur de l'utilisateur.
Avec HTML5, le stockage devient plus sr et plus rapide..

Les donnes ne sont pas inclus avec chaque requte serveur mais utilis
uniquement lorsque demand.
34
UP WEB ESPRIT
Web Storage
Possibilit de stocker un grand nombre dinformations sans affecter
les performances du site
Les donnes sont stockes dans paires cl / valeur, et une page Web
ne peut accder aux donnes stockes par elle-mme
35
UP WEB ESPRIT
Web Storage
Il y a deux objets pour sauvegarder les informations cot client:
LocalStorage :
Sauvegarde les informations sans date dexpiration
SessionStorage :
Sauvegarde les informations pour une seule session
36
UP WEB ESPRIT
Golocalisation
37
UP WEB ESPRIT
Golocalisation
LAPI de Geo-localisation de HTML 5 est utilise pour avoir la position gographique de lutilisateur.
La position ne peut pas tre obtenue que lorsque lutlisateur accepte de partager
sa localisation.
38
UP WEB ESPRIT
Golocalisation
La mthode getCurrentPosition()
Traitement des erreurs et des rejections
Afficher le rsultat sur un Map
39
UP WEB ESPRIT
Golocalisation
40
UP WEB ESPRIT
Golocalisation
getCurrentPosition() method sert indiquer la position de lutilisateur (exemple1)
41
UP WEB ESPRIT
Golocalisation
EXEMPLE BASIQUE
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()"> Try It </button>
</body>
<script>//A faire</script>
</html>
42
UP WEB ESPRIT
Golocalisation
<script>
var x=document.getElementById ("demo");
function getLocation()
{ if (navigator.geolocation)
{ navigator.geolocation.getCurrentPosition(showPosition); }
else {x.innerHTML="Geolocation is not supported by this browser.";} }
function showPosition (position)
{ x.innerHTML="Latitude: " + position.coords.latitude +
position.coords.longitude; }
</script>
43
UP WEB ESPRIT
"<br>Longitude: " +
Golocalisation
44
UP WEB ESPRIT
Golocalisation
function showError(error)
{
switch(error.code)
{ case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out." break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred." break; }
}
45
UP WEB ESPRIT
Golocalisation
46
UP WEB ESPRIT
Golocalisation
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
47
UP WEB ESPRIT
Plus dApis (Web Workers)
48
UP WEB ESPRIT
Web Workers
En excutant des scripts dans une page HTML la page ne rpond pas
jusqu la fin du script.
Le Web Worker correspond un script " Javascript " qui tourne en "background " indpendamment des autres scripts sans perturber les performances
de la page.
Possibilit de cliquer, slectionner et faire les autres fonctionnalits quand
le web worker tourne en "back-ground".
49
UP WEB ESPRIT

HTML 5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

HTML 5

HyperText Markup Language 5

Module : Technologies web 1

Structure dun document HTML5

HTML 4.01 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

Structure dun document HTML5

<nav> les principaux liens de navigation

les parties thmatiques de la page

les informations complmentaires

Souvent un lment dune section

Structure dun document HTML5

Nouvelle smantique en HTML5

Une nouvelle smantique

Dfinit une unit de temps

Dfinit une image vectorielle

Une nouvelle smantique

Dfinit un contenu extrieur (audio, vido )

Dfinit un groupe dlment multimdia

Dfinit les dtails dun lment

Une nouvelle smantique

jaune sur le texte qu'elle dcrit.

Dfinit un saut de ligne possible.

Une Nouvelle smantique

Les nouveaux lment de formulaire

Les nouveaux lments de formulaire

Les nouveaux lments de formulaire

Les nouveaux lments de mdia

Les nouveaux lments pour les

Dfinit un contenu audio

Dfinit une vido ou un film

Dfinit de multiples ressources pour les mdias <video> et <audio>

Dfinit un conteneur pour une application externe ou un contenu interactif (un

Dfinit des pistes de texte pour les mdias <video> et <audio>

Les nouveaux lments de mdia

La balise Canvas en HTML5

a fournit une API en JavaScript qui permet de faire du dessin

binaire un peu la manire des bitmaps.

droite, polygones, arcs de cercle, etc.)

travaille sur des pixels.

quand elle est agrandie ou rduite de taille.

quelque soit la rsolution.

Les lments supprims ou dprcis en HTML5

Les lments supprims ou dprcis en HTML5

Drag & Drop

Drag & Drop

le fait d attraper un objet et faites-le glisser vers un autre

lment peut tre dplac.

Les pages Web peuvent stocker des donnes localement dans le

Avec HTML5, le stockage devient plus sr et plus rapide..

Possibilit de stocker un grand nombre dinformations sans affecter

les performances du site

Traitement des erreurs et des rejections

Afficher le rsultat sur un Map

Traitement des erreurs et des rejections

Afficher le rsultat sur un Map

Traitement des erreurs et des rejections

Afficher le rsultat sur un Map

Traitement des erreurs et des rejections

Afficher le rsultat sur un Map

Plus dApis (Web Workers)

Vous aimerez peut-être aussi