Réalisée par : Ferjani Mayssa Guiras Zouhour Le HTML 5.
-
Upload
mathieu-joly -
Category
Documents
-
view
112 -
download
3
Transcript of Réalisée par : Ferjani Mayssa Guiras Zouhour Le HTML 5.
Réalisée par :
Ferjani MayssaGuiras Zouhour
Le HTML 5
2
Sommaire
• La chronologie des technologies Web• Qu’est ce que c’est le HTML5 ?• Qu’est ce qui va changer avec HTML5?• HTML5,quels apports dans le monde mobile? • HTML5 vs Flash!• Qui l’utilise déjà?• Conclusion
3
La petite histoire des technologies web
4
le HTML5 est..
• Comme son nom l’indique, HTML5 est une évolution de HTML 4.0
• Le travail sur HTML5 a commencé fin 2003• En 2007 , le W3C officialise HTML5• A partir de la s’est fait un gros travail afin de permettre a
html5 d’etre compatible avec ses ancêtres ce qui a quelque peu ralenti son développement
Tout ce que vous savez faire en HTML reste valide
5
L’ambition de HTML5
• Supprimer les balises obsolètes• Remplacer certaines balises• Introduire de nouvelles balises afin de donner
une structure sémantique plus cohérente aux pages web
6
Nouvelles balises..
<<header>
<figure>
<
<<
<<aside>
<audio>
<canvas><nav>
<source>
<<video>
<<footer>
<
<
<<
<datalist>
<details>
<embed>
<mark>
<article>
7
Balises obsolètes..
<applet>
<acronym>
<frame>
<center><center>
<big>
<font>
<dir>
8
Les nouveautés de HTML5..
• Un allégement de code• Les balises à utilisation sémantique • Les balises à utilisation multimédia• Les nouveaux champs de formulaire• L’élément Canvas
9
Les balises simplifiées
On peut dire que l’HTML5 est beaucoup plus léger et laxiste sur l’écriture du code HTML
10
Les balises de structurations<div> avec un id=”header” est remplacée par
la balise <header>
• <header> : Qui indique que l’élément est une en-tête
• <footer> : Qui indique que l’élément est un pied-de-page
• <nav> : Qui indique un élément de navigation tel qu’un menu
• <aside> : Qui correspond à une zone secondaire non liée au contenu principal de la page
• <article> : Qui représente une portion de la page qui garde un sens même séparée de l’ensemble de la page
11
Avec HTML5, une séparation
Contenu
Présentation Structure
12
Les balises à utilisation multimedia..
<video>
Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré à votre page et natif au navigateur !
13
<audio>
• En 3 lignes de code vous avez un lecteur MP3 !
• D’ailleurs chaque navigateur utilise un design qui lui est propre pour styliser son lecteur
Les balises à utilisation multimedia..
14
Des formulaires améliorés
15
Nouveaux types de champs input
<input type=‘’date’’/> Il permet d’afficher un champ de saisir de date avec une nouvelle présentation graphique, affichage de calendrier pour aider au choix
16
<input type= ‘’tel‘’ />
Sur un Android Sur un iPhone
17
<input type=‘’url’’/>
• le champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une URL valide
18
Autre nouveaux types..
• Search : champ de saisi dédié à la recherche
• Placeholder : texte à afficher par défaut dans la zone de saisi, il sera masqué quand le curseur sera sur le champ, valable pour les champs de saisi
• Email : champ de saisi texte qui vérifie automatiquement que la valeur saisie est un email valide
19
Nouveaux attributs..
• Multiple: attribut pour le type «File» qui
permet le téléchargement de plusieurs fichiers simultanément
• Pattern: attribut pour le type «text» qui permet de définir le modèle que devra respecter la valeur Saisi dans le champ
20
21
Canvas
• Canvas permet d'intégrer des dessins vectoriels dans une page.
• Il peut aussi être utilisé pour l'interface d'une application
et remplace ainsi Flash.
• Il s’agit d’une surface sur laquelle il est possible de tracer des formes et de les animer.
• En résumé… C’est dans cette zone que sont réalisées des animations ou des jeux
22
HTML5 dans l’univers des mobiles
• Avec la croissance soutenue du marché des smartphones (iPhone, Android, Nokia)
• Le HTML5 apporte des solutions aux problèmes qui bloquaient jusqu'à présent nombre d'innovations sur l'internet mobile, motivant ainsi son adoption.
23
HTML5,quels apports pour le monde mobile?
• Lecteur de vidéo grâce aux APIs de video & audio
• Des images dynamiques en HTML5 grâce à l'élément Canvas
Lire des vidéos directement au sein du navigateur web, sans nécessiter la présence d’un plug-in supplémentaire tel que Flash d’Adobe
24
HTML5 vs Flash
• Scribd « le Youtube des documents » avait annoncé passer l’intégralité de son contenu de Flash vers HTML5.
• Le plus impressionnant c’est que en passant de Flash à HTML5, Scribd double son temps de visite !
25
26
Qui l’utilise déjà?
27
• Google et Apple ont déjà adopté HTML5
28
En conclusion..
• HTML5 propose de nouveaux éléments très pratiques qui ont pour objectif d'harmoniser les médias et de structurer la mise en page par des éléments plus "sémantiques".