Réalisée par : Ferjani Mayssa Guiras Zouhour

Présentation au sujet: "Réalisée par : Ferjani Mayssa Guiras Zouhour"— Transcription de la présentation:

1 Réalisée par : Ferjani Mayssa Guiras Zouhour
Le HTML 5 Réalisée par : Ferjani Mayssa Guiras Zouhour

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.. < < < <details> <header>
<audio> < < <article> <video> <embed> < << <source> <aside> <mark> < < <canvas> <nav> <figure> <datalist> < <footer>

7 Balises obsolètes.. <applet> <big> <font>
<center> <center> <acronym> <dir> <frame>

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 Les balises à utilisation multimedia..
<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

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 champ de saisi texte qui vérifie automatiquement que la valeur saisie est un 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".