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

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

La petite histoire des technologies web

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

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

Nouvelles balises.. < < < <details> <header> <audio> < < <article> <video> <embed> < << <source> <aside> <mark> < < <canvas> <nav> <figure> <datalist> < <footer>

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

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

Les balises simplifiées On peut dire que l’HTML5 est beaucoup plus léger et laxiste sur l’écriture du code HTML

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

Avec HTML5, une séparation Contenu Présentation Structure

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 !

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

Des formulaires améliorés

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

<input type= ‘’tel‘’ /> Sur un Android Sur un iPhone

<input type=‘’url’’/> le champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une URL valide

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

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

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

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.

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

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 !

Qui l’utilise déjà?

Google et Apple ont déjà adopté HTML5

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