La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


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

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

2 Sommaire La chronologie des technologies Web Quest ce que cest le HTML5 ? Quest ce qui va changer avec HTML5? HTML5,quels apports dans le monde mobile? HTML5 vs Flash! Qui lutilise déjà? Conclusion 2

3 La petite histoire des technologies web 3

4 le HTML5 est.. Comme son nom lindique, 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 sest fait un gros travail afin de permettre a html5 detre compatible avec ses ancêtres ce qui a quelque peu ralenti son développement Tout ce que vous savez faire en HTML reste valide 4

5 Lambition 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 5

6 Nouvelles balises.. < < < < < < < < < << 6

7 Balises obsolètes.. 7

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 8

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

10 Les balises de structurations avec un id=header est remplacée par la balise : Qui indique que lélément est une en-tête : Qui indique que lélément est un pied-de-page : Qui indique un élément de navigation tel quun menu : Qui correspond à une zone secondaire non liée au contenu principal de la page : Qui représente une portion de la page qui garde un sens même séparée de lensemble de la page 10

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

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

13 En 3 lignes de code vous avez un lecteur MP3 ! Dailleurs chaque navigateur utilise un design qui lui est propre pour styliser son lecteur Les balises à utilisation multimedia.. 13

14 Des formulaires améliorés 14

15 Nouveaux types de champs input Il permet dafficher un champ de saisir de date avec une nouvelle présentation graphique, affichage de calendrier pour aider au choix 15

16 Sur un AndroidSur un iPhone 16

17 le champ de saisi texte qui permet de vérifier automatiquement que la valeur saisie est une URL valide 17

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 18

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 19

20 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 sagit dune surface sur laquelle il est possible de tracer des formes et de les animer. En résumé… Cest dans cette zone que sont réalisées des animations ou des jeux 21

22 HTML5 dans lunivers 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

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 dun plug-in supplémentaire tel que Flash dAdobe 23

24 HTML5 vs Flash Scribd « le Youtube des documents » avait annoncé passer lintégralité de son contenu de Flash vers HTML5. Le plus impressionnant cest que en passant de Flash à HTML5, Scribd double son temps de visite ! 24

25 25

26 Qui lutilise déjà? 26

27 Google et Apple ont déjà adopté HTML5 27

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


Télécharger ppt "Réalisée par : Ferjani Mayssa Guiras Zouhour Le HTML 5."

Présentations similaires


Annonces Google