1 / 28

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.

sarila
Download Presentation

Réalisée par : Ferjani Mayssa Guiras Zouhour

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Le HTML 5 Réalisée par : Ferjani Mayssa GuirasZouhour

  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> < < <video> <embed> <article> < << <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

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

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

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

  23. 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 !

  24. Qui l’utilise déjà?

  25. Google et Apple ont déjà adopté HTML5

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

More Related