InnovAI DataScience HTML 5 Jimmitry PAYET Researcher Developer

Introduction • HTML 5 (Hyper. Text Markup Language 5) est la dernière révision majeure

Introduction • Le travail a été repris par le W 3 C en mars

DOM ? • Le DOM (Document Object Model) est une interface pour vos pages

DOM ? • La première étape permet de construire l'arbre de rendu (render tree),

DOM ? • Le DOM est une représentation du document HTML source. • La

DOM ? • Le DOM n'est pas votre HTML source • Bien que créé

DOM ? • Exemple 1: le DOM est corrigé • Exemple 2: Le DOM

DOM ? • Le DOM n'est pas ce que vous voyez dans le navigateur

Pourquoi des différences entre HTML et HTML 5 ? • Ce qui est sûr

Différences entre HTML et HTML 5 ? • HTML 5 supporte les SVG, et

Différences entre HTML et HTML 5 ? • HTML 5 n’est pas basé sur

Différences entre HTML et HTML 5 ? • De nouveaux éléments ont été introduits

Avantages d’HTML 5 pour les développeurs • HTML 5 se veut plus souple lors

Avantages d’HTML 5 pour les développeurs • Gestion des erreurs persistantes: • La plupart

Avantages d’HTML 5 pour les développeurs • Amélioration de la sémantique des éléments: •

Avantages d’HTML 5 pour les développeurs • Prise en charge améliorée des fonctionnalités des

Avantages d’HTML 5 pour les développeurs • Le Web sur mobile simplifié: • Même

Avantages d’HTML 5 pour les développeurs • L’élément canvas: • L’une des caractéristiques les

Avantages d’HTML 5 pour les développeurs • L’élément canvas: • Un exemple où Java.

Avantages d’HTML 5 pour les développeurs • L’élément Menu: • Les nouveaux éléments <menu>

Avantages d’HTML 5 pour les développeurs • Attributs de données personnalisables: • Il était

Avantages d’HTML 5 pour les développeurs • local. Storage: • Le support du stockage

Avantages d’HTML 5 pour les Utilisateurs • HTML 5 a entraîné un changement de

Avantages d’HTML 5 pour les Utilisateurs • L’éradication de la nécessité d’utiliser Adobe Flash

Conclusion • Il est évident qu’une version supérieure d’un langage est toujours meilleure. •

Pratique • Exercice 1 : DOM: Lire toutes les propriétés d'un élément • Écrire

Pratique • Exercice 2 : Affichage d'un texte avec tête, sections, navigation et pied

Pratique • Exercice 3 : Affichage de grandeurs dans une page HTML 5 •

Pratique • Exercice 4 : Modification d'une barre de progression par le DOM •

Pratique • Exercice 5 : page HTML reproduisant un fichier audio • Écrire une

Pratique • Exercice 6 : Choisir une vidéo You. Tube et l’intégrer dans une

Pratique • Exercice 7 : page contenant un canvas. • Écrire une page x.

Merci. Cours ici : mentdb. org/links. html Section ‘Training’

Slides: 37

Download presentation

Innov-AI Data-Science HTML 5 Jimmitry PAYET - Researcher / Developer

Introduction • HTML 5 (Hyper. Text Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). • Cette version a été finalisée le 28 octobre 2014. • HTML 5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML 5 et XHTML 5. • Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme.

Introduction • Le travail a été repris par le W 3 C en mars 2007 après avoir été lancé par le WHATWG. • Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. • Le W 3 C clôt les ajouts de fonctionnalités le 22 mai 2011, annonçant une finalisation de la spécification en 2014 • encourage les développeurs Web à utiliser HTML 5 dès ce moment. • Fin 2016, la version 5. 1 est officiellement publiée et présente plusieurs nouveautés qui doivent faciliter le travail des développeurs d'applications Web • Version recommandé https: //www. w 3. org/TR/html 52/ • Draft https: //www. w 3. org/TR/html 53/

DOM ? • Le DOM (Document Object Model) est une interface pour vos pages web. • C'est une API permettant aux programmes de lire et de manipuler le contenu de la page, sa structure et ses styles. • Le cheminement d'un navigateur partant d'un document source HTML pour finalement afficher une page stylée et interactive s'appelle le chemin critique du rendu (critical rendering path). • Ce processus peut comporter de nombreuses étapes, mais celles-ci peuvent être regroupées en deux grandes étapes. • l'analyse du document par le navigateur pour déterminer ce qui sera finalement rendu sur la page • le rendu par le navigateur.

DOM ? • La première étape permet de construire l'arbre de rendu (render tree), une représentation sous forme d'arbre des éléments HTML qui seront rendus sur la page ainsi que leurs styles associés. • Pour cela, le navigateur a besoin de deux choses : • le CSSOM, une représentation des styles associés aux éléments • le DOM, la représentation des éléments

DOM ? • Le DOM est une représentation du document HTML source. • La structure d'objet du DOM est représentée par ce qu'on appelle une "arborescence de noeuds" (node tree). • On l'appelle ainsi parce qu'il peut être considéré comme un arbre qui se ramifie en plusieurs branches enfants, chacune pouvant avoir des feuilles. • Le premier parent est l'élément racine <html>, les "branches" enfants sont les éléments imbriqués et les "feuilles" sont le contenu des éléments.

DOM ? • Exemple :

DOM ? • Le DOM n'est pas votre HTML source • Bien que créé à partir du document source HTML, le DOM n'en est pas toujours l'exact reflet. Il peut en différer dans deux cas : • Le DOM est une interface pour les documents HTML valides. Pendant le processus de création du DOM, le navigateur peut être amené à corriger des informations invalides. • En plus d'être une interface permettant de visualiser le contenu d'un document HTML, le DOM peut être modifié, ce qui en fait une ressource vivante.

DOM ? • Exemple 1: le DOM est corrigé • Exemple 2: Le DOM est modifié par javascript

DOM ? • Le DOM n'est pas ce que vous voyez dans le navigateur • Ce que vous voyez dans le viewport de votre navigateur c'est l'arbre de rendu qui, nous l'avons vu, est un mélange de DOM et de CSSOM. • Ce qui distingue le DOM de l'arbre de rendu c'est que ce dernier ne comprend que ce qui sera "peint" à l’écran. • De ce fait, il exclut les éléments visuellement cachés, par exemple ceux stylés display: none.

DOM ? • • Code HTML • Navigateur DOM

HTML dans le temps

Pourquoi des différences entre HTML et HTML 5 ? • Ce qui est sûr dans le domaine de l’information c’est que les mises à jour sont inévitables. • Aucun langage ne peut aujourd’hui échapper à ça. HTML ne fait pas exception. • HTML 5 a été publié dans le but principal d’améliorer le World Wide Web pour les développeurs et les utilisateurs. • Le plus grand avantage que HTML 5 a sur son prédécesseur est qu’il dispose d’un support audio et vidéo de très bonne qualité. • Voici les autres différences entre HTML et HTML 5:

Différences entre HTML et HTML 5 ? • HTML 5 supporte les SVG, et autres formats d’image vectorielles. Alors qu’en HTML, l’utilisation d’images vectorielles n’était possible qu’avec certaines technologies comme Flash, VML ou Silver-light. • HTML 5 utilise des bases de données Web SQL pour le stockage temporaire (en cache) des données. HTML, ne pouvait utiliser que le cache du navigateur à cette fin. • Une autre différence entre HTML et HTML 5 est que le premier ne permet pas au Java. Script de s’exécuter nativement dans un navigateur Web (il s’exécute dans un thread d’interface du navigateur) alors que le second fournit un support complet pour que Java. Script s’exécute en arrière-plan (grâce à l’API JS de HTML 5).

Différences entre HTML et HTML 5 ? • HTML 5 n’est pas basé sur SGML. Ce qui lui permet d’avoir des règles d’analyse plus poussées et donc une compatibilité améliorée. • En HTML 5, du Math. ML inline et des SVG peuvent être utilisés directement dans le texte alors que cela n’était pas possible en HTML. • Certains éléments obsolètes ont été définitivement supprimés: isindex, noframes, acronym, applet, basefont, dir, font, frameset, big, center, strike, tt. • HTML 5 prend en charge de nouveaux types de contrôles de formulaire : les dates et heures, les e-mail, les numéros, les plages (range), les téléphones, les url, les champ de recherche etc.

Différences entre HTML et HTML 5 ? • De nouveaux éléments ont été introduits en HTML. Les plus importants sont: summary, time, aside, audio, command, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

Avantages d’HTML 5 pour les développeurs • HTML 5 se veut plus souple lors de la conception de sites Web. Certaines améliorations méritent d’être mentionnées: • Gestion des erreurs persistantes • Amélioration de la sémantique des éléments • Prise en charge améliorée des fonctionnalités des applications Web • Le Web sur mobile simplifié • L’élément canvas • L’élément Menu • Attributs de données personnalisables • local. Storage

Avantages d’HTML 5 pour les développeurs • Gestion des erreurs persistantes: • La plupart des navigateurs ont un processus pour analyser les erreurs HTML mais jusque là aucun processus n’avait été standardisé. • Cela signifiait que les développeurs devaient tester leur code dans différents navigateurs afin de traiter les erreurs plus efficacement en faisant du reverse engineering. • La gestion persistante des erreurs de HTML 5 a donc fait beaucoup avancer ce domaine là. • Les algorithmes d’analyse dans le HTML 5 sont meilleurs et leurs résultats ne sont même pas quantifiables. • 90 % des sites Web sont susceptibles de repérer les erreurs plus facilement. • Gain de temps et d’argent

Avantages d’HTML 5 pour les développeurs • Amélioration de la sémantique des éléments: • Pour améliorer l’insinuation du code, des améliorations ont été apportées à la sémantique des divers éléments existants. • Section, article, nav et header sont des nouveaux éléments qui ont remplacé la plupart des éléments div maintenant obsolètes, ce qui a rendu le processus de balayage des erreurs beaucoup plus simple.

Avantages d’HTML 5 pour les développeurs • Prise en charge améliorée des fonctionnalités des applications Web: • L’un des principaux objectifs de HTML 5 était de permettre aux navigateurs de fonctionner en tant que plates-formes pour les applications. • Dans le passé les sites Web étaient bien plus simplistes. Mais avec le temps, ils sont devenus de plus en plus sophistiqués. • HTML 5 fournit aux développeurs un contrôle amélioré de la performance de leurs sites Web. Dans le passé, les développeurs ont dû utiliser des solutions de contournement car de nombreuses technologies côté serveur et extensions de navigateur n’étaient pas présentes. • Maintenant, avec HTML 5, il n’est pas utile de contourner par JS ou Flash (comme précédemment en HTML 4) car il ya des éléments intrinsèquement présents dans HTML 5 qui fournissent toutes les fonctionnalités nécessaires.

Avantages d’HTML 5 pour les développeurs • Le Web sur mobile simplifié: • Même aujourd’hui, la création d’une version mobile d’un site Web peut constituer un véritable casse-tête. • L’utilisation du smartphone a explosé et le HTML a dû suivre cette évolution. Les utilisateurs veulent être en mesure d’accéder à une ressource sur le Web à tout moment et via n’importe quel dispositif. • Ce qui rend nécessaire d’avoir des sites Web responsives • HTML 5 a rendu le support mobile beaucoup plus simple en étant capable de s’adapter à des appareils de faible puissance comme les tablettes et les smartphones.

Avantages d’HTML 5 pour les développeurs • L’élément canvas: • L’une des caractéristiques les plus utiles de HTML 5 est <canvas>. • L’introduction de cette étiquette a eu un impact énorme sur l’utilisation d’Adobe Flash. Même si de nombreux sites Web utilisent encore Flash, HTML 5 est en train de gagner une part de terrain et beaucoup d’experts s’accordent à dire que Flash va bientôt disparaître. • À l’aide de canvas, un développeur peut dessiner des éléments graphiques en utilisant différentes couleurs et formes et en utilisant du code (par exemple Java. Script). • Il faut mentionner que canvas est simplement un conteneur graphique. Pour définir un élément graphique dans un canvas un script doit être exécuté.

Avantages d’HTML 5 pour les développeurs • L’élément canvas: • Un exemple où Java. Script est utilisé en conjonction avec canvas: • <canvas id="Test. Canvas" width="200" height="100"></canvas> • var c = document. get. Element. By. Id("Test. Canvas"); • var context = c. get. Context("2 d"); • context. fill. Style = "#FF 0000"; • context. fill. Rect(0, 0, 140, 75);

Avantages d’HTML 5 pour les développeurs • L’élément Menu: • Les nouveaux éléments <menu> et <menuitem> sont des éléments qui constituent les éléments interactifs. Mais ils ne sont pas souvent utilisés par la communauté des développeurs. Toutefois, ces deux éléments peuvent être utilisés pour assurer une meilleure interactivité. • La balise <menu> est utilisée pour représenter les éléments d’un menu dans des applications mobiles et de bureau de manière plus facile.

Avantages d’HTML 5 pour les développeurs • Attributs de données personnalisables: • Il était possible d’ajouter des attributs personnalisés avant HTML 5, mais c’était compliqué. Par exemple, en HTML 4, les attributs personnalisés empêchent parfois une page de s’afficher correctement. Ils sont souvent la cause de code invalide. • L’attribut data- * de HTML 5 a mis fin à ce problème. Nous pouvons utiliser cet attribut de plusieurs manières. • Mais son but premier est le stockage d’informations supplémentaires sur différents éléments. Maintenant, des données personnalisées peuvent être incluses, et il donne aux développeurs plus de chance de rendre leurs pages Web attrayantes et efficaces sans avoir à introduire des recherches côté serveur ou des appels Ajax. • Les attributs data- * sont utilisés pour stocker des données personnalisées privées sur la page ou l’application. Les attributs data- * nous permettent d'intégrer des attributs de données personnalisés sur tous les éléments HTML. Les données stockées (personnalisées) peuvent ensuite être utilisées dans le Java. Script de la page pour créer une expérience utilisateur plus engageante (sans appel Ajax ni requête de base de données côté serveur). • Les attributs data- * se composent de deux parties: • • Le nom d'attribut ne doit pas contenir de lettres majuscules et doit être composé d'au moins un caractère longtemps après le préfixe "data-" • La valeur d'attribut peut être n'importe quelle chaîne Remarque: L'attribut utilisateur ignorera complètement les attributs personnalisés préfixés par "data-".

Avantages d’HTML 5 pour les développeurs • local. Storage: • Le support du stockage local est un ajout considérable. Dans l’ère préHTML 5, si les développeurs voulaient stocker quoi que ce soit, ils devaient utiliser des cookies. • Les cookies peuvent stocker une petite quantité de données, ce qui rend l’ajout de l’objet local. Storage à HTML 5 encore plus avantageux. • L’objet local. Storage fait partie de l’espace de noms global de la fenêtre et peut être consulté à partir de n’importe où quand vous utilisez des scripts.

Avantages d’HTML 5 pour les Utilisateurs • HTML 5 a entraîné un changement de paradigme pour les développeurs et les utilisateurs. Certains des nombreux avantages qu’elle offre aux utilisateurs finaux sont que: • Les navigateurs mobiles crashent beaucoup plus rarement qu’avant. HTML ne fournissait pas de support assez efficace pour les appareils mobiles. • L’utilisation complète des sites sur mobile est capitale, puisque près de 30% des utilisateurs mobiles détestent télécharger des applications. Donc, si un utilisateur veut utiliser les services de l’entreprise mais ne veut pas télécharger son application, il devrait pouvoir simplement se connecter sur le site Web de l’entreprise pour le faire.

Avantages d’HTML 5 pour les Utilisateurs • L’éradication de la nécessité d’utiliser Adobe Flash permet aux développeurs de fournir une expérience utilisateur riche et agréable. L’utilisation de Java. Script et de MPEG 4 en conjonction avec HTML 5 a rendu la vie bien plus facile aux utilisateurs. • La capacité à prendre en charge les éléments audio et vidéo nativement signifie que les utilisateurs n’auront pas à télécharger de plugins supplémentaires pour afficher des fichiers multimédias sur un site Web. Ce support multimédia fourni par HTML 5 est l’une des principales raisons pour lesquelles il est aujourd’hui utilisé beaucoup plus souvent que le HTML.

Conclusion • Il est évident qu’une version supérieure d’un langage est toujours meilleure. • HTML 5 ne fait pas exception. Chaque année, les développeurs découvrent de nouvelles façons de bénéficier de HTML 5. • En outre, les réseaux sociaux devraient changer de plus en plus grâce à ce langage. • L’adoption de HTML 5 par les développeurs va augmenter exponentiellement dans les années à venir. • Pour maximiser le potentiel des navigateurs modernes, il est primordial d’adopter HTML 5 aussi rapidement que possible. • Toutes les balises ici : • https: //fr. wikipedia. org/wiki/HTML 5#Changements_par_rapport_%C 3%A 0_HTML_ 4. X_et_XHTML_1. X

Pratique • Exercice 1 : DOM: Lire toutes les propriétés d'un élément • Écrire une page HTML 5 telle que celle ci : • contienne un élément de type <div> tel que : • • cet élément contienne du texte et des sous éléments de type <strong>, • cet élément ait un attribut id="ma_div", • cet élément ait un attribut class="ma_classe", affiche par un script javascript l'ensemble des attributs et des enfants de cette div dans la page HTML.

Pratique • Exercice 2 : Affichage d'un texte avec tête, sections, navigation et pied de page en HTML 5 • Écrire une page HTML 5 qui affiche : • un bloc d'entête header, • un titre de premier niveau h 1, • un groupe d'entête hgroup, • un bloc de navigation permettant d'accéder aux section définies ci-après. • au moins deux sections génériques (section) pouvant correspondre aux chapitres d'un livre. • un bloc de pied footer

Pratique • Exercice 3 : Affichage de grandeurs dans une page HTML 5 • Écrire une page HTML 5 qui affiche : • un titre (h 1), • une grandeur de valeur 30 par rapport au min de 0 et au max de 100% (meter), • une grandeur de valeur 3/4 sans préciser de limites (meter), • une grandeur de valeur médiane 50 par rapport au min de 0 et au max de 100 (meter) la valeur basse sera positionnée à 55 et la valeur haute sera positionnée à 90, • une barre de progression de valeur 80% (progress), • la date de ce jour (time), • une zone de texte en surlignage (mark)

Pratique • Exercice 4 : Modification d'une barre de progression par le DOM • Écrire une page HTML 5 qui affiche : • un titre (h 1), • une barre de progression de valeur 80% (progress), • Faire en sorte cette valeur soit progressivement modifiée au chargement de la page passant de 0 à 100% sur une durrée de 10 secondes. • Afin de vérifier le comportement de la direction du remplissage nous déclarerons l'entrée de type progress dans un paragraphe s'écrivant de droite à gauche (dir="rtl").

Pratique • Exercice 5 : page HTML reproduisant un fichier audio • Écrire une page HTML 5. 0 émettant le contenu sonore du fichier ici présent • Pour cela nous aurons recours à la balise audio • Faire en sorte que : • Les contrôles d'acvancement soien présents, • La musique démarre automatiquement, • Les contrôles d'acvancement soient présents, • La musique tourne en boucle

Pratique • Exercice 6 : Choisir une vidéo You. Tube et l’intégrer dans une page HTML 5

Pratique • Exercice 7 : page contenant un canvas. • Écrire une page x. HTML 5 : • contenant un canvas dont la couleur de fond sera rouge • afficher dans ce canvas un rectangle de couleur différente de celle du fond. • donner au rectangle un contour blanc de 10 pixels de large. • Que se passe-il lorsque le rectangle est plus grand que le canvas ?

Merci. Cours ici : mentdb. org/links. html Section ‘Training’