HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML

Dimension: px

Commencer à balayer dès la page:

Download "HTML 5 HTML 5. Nouveau standard en développement basé sur HTML et XHTML"

Corentin Gauvin
il y a 8 ans
Total affichages :

1 HTML 5 HTML 5 Nouveau standard en développement basé sur HTML et XHTML Supporté partiellement par les navigateurs: Safari, Chrome, Firefox, et Opera supportent une partie de HTML5 Caractéristiques: Éléments de contenu et de structures tels que :, <footer>, <header>, <nav>, <section>, Nouvelles balises pour la vidéo et l'audio,. De nouveaux éléments des formulaires: <calendar>, <date>, <time>, < >, <url>, 2 1

Éléments de contenu et de structures tels que :, <footer>, <header>, <nav>, <section>, Nouvelles

2 HTML5 Combine HTML 4 et la syntaxe de XHTML. JavaScript a été et adapté enrichi pour HTML5. Utilisation des éléments ayant une sémantique. Usage simplifié du multimédia. Ajout d'outils de dessin (canevas, SVG, ) Un seul doctype simplifié: <!doctype html> svg.xml 3 Élemens et attributs obsolètes Plusieurs éléments et attributs de HTML 4 sont devenus obsolète, dont: <frame>, <frameset>, <noframes>, <acronym>, accesskey name(dans img, formet a), language(dans script), <basefont>, <big>, <center>, <font>, <strike>, <u>, 4 2

Ajout d'outils de dessin (canevas, SVG, ) Un seul doctype simplifié: <!doctype html> svg.

3 Nouveaux élélements sémantiques Éléments ans style mais ayant un signification <main>: élément principal <section> : texte de domaine (ex. sur les animaux) : article thématique (blog, bulletin, ). <figure>: pour grouper des figures. <figcaption>: pour ajouter une légende à une figure. <header>: en-tête d'une section ou un article. <footer> : pied de section ou d'article <nav> : section de liens pour la navigation. <aside> : ajout latéral à un un article. <p><a href=" La programmation du web!</a><br/> On montre les principes et les techniques de marquage. Ceci inclut la programmation en JavaScript</p> </article> 5 Éléments de structure <div> <a href=" La programmation du web</a> </div> <div> On montre les principes et les techniques de marquage. Ceci inclut la programmation en JavaScript </div> </article> tag_2.html <dialog open> <dt>jean</dt><dd>salut, ca va?</dd> <dt>bob<dd>tres bien et toi?</dd> <dt>jean<dd>ca va. Quoi de neuf?</dd> </dialog> <figure> <img src="vache.jpg" alt="une belle vache"/> <figcaption> Une belle petite vache!</figcaption> </figure> 6 3

<footer> : pied de section ou d'article <nav> : section de liens pour la navigation. <aside> : ajout latéral à un un article. <p><a href="http://www.uqam.ca/web.html"> La programmation du web!

4 Éléments de structure Les nouveaux sites pourront être structurés avec les éléments sémantiques en adoptant les balises remplaçant les <div>: <div class="section"> Meilleure exploitation des pages avec une structure commune <nav> <header> <section> <footer> <aside> html5.html et css4html5.css 7 Autres éléments Autres éléments de saisie et de présentation des données suggérés: <mark>: permet d'accentuer (highlighter) en jaune un texte <meter>: dessine une jauge avec min et max et une valeur choisie <progress>: illustre un progrès. <time>: permet d'insérer une date. <details>: spécifie des éléments de détails qu'on peut montrer ou cacher. L'élément <summary> montre le titre de ces détails. <output>: contient le résultat d'un calcul dans un formulaire. 8 4

css 7 Autres éléments Autres éléments de saisie et de présentation des données suggérés: <mark>: permet d'accentuer (highlighter) en jaune un texte <meter>: dessine une jauge avec min et max

5 Éléments pour le multimédia <audio> et <video>: pour les contenus multimédia. Avec la balise <source> on peut spécifier de multiples sources avec des affichages selon la priorité. Si un fichiern'estpas afiché, on passeau suivant. <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Impossible de jouer ces documents </audio> <audiosrc="film.ogg" controls> </audio> <videowidth="320" height="240" controls="controls"> <source src="film.ogg" type="video/ogg" /> <source src="film.mp4" type="video/mp4" /> Impossible d'afficher ces documents </video> 9 Fonctions de géo-localisation API JavaScript de géo-localisation qui permet au navigateur de déterminer la position géospatiale courante de l'utilisateur. function getposition(position) { lalatitude= position.coords.latitude; lalongitude = position.coords.longitude; laltitude= position.coords.altitude; laposition="x: "+ lalatitude+"<br/>"+"y: "+lalongitude +"<br/>"+"z: "+laltitude document.getelementbyid("maposition").innerhtml = laposition; } function maposition() { navigator.geolocation.getcurrentposition(getposition); } 10 5

mp3" type="audio/mpeg" /> Impossible de jouer ces documents </audio> <audiosrc="film.ogg" controls> </audio> <videowidth="320" height="240" controls="controls"> <source src="film.

6 Stockage local Deux méthodes permettent de stocker des données auprès du client: localstorage: stocke des données persistantes. sessionstorage: stocke des données pour une session Elles remplacent les cookies mais sans échange client /serveur. On accède à ces données à l'aide d'un script. 11 L' élément <video> HTML 5 a standardisé l'élément d'affichage des vidéo: <video> Deux types de codage sont automatiquement supportés: MPEG 4 Ogg: codage en logiciel libre. <video src="movie.ogg" width="320" height="240" controls="controls"> Votre fureteur ne supporte pas l'affichage video! </video> 12 6

On accède à ces données à l'aide d'un script.

7 L' élément <video> Permet d'offrir des alternatives d'affichage avec <source>: Attributs: autoplay loop src width height poster preload <video width="320" height="240" controls="controls"> <source src="film1.ogg" type="video/ogg" /> <source src="film2.mp4" type="video/mp4" /> Votre fureteur ne supporte pas l'affichage video! </video> video2.html 13 Attributs de <video> autoplay Pour jouer le document de manière automatique. controls Fournit des contrôles comme play/pause, barre de glissement, contrôle de volume. poster Une image utilisée pendant le téléchargement de la vidéo. height, width loop Pour faire boucler la vidéo. Preload = auto none Permet au navigateur de commencer à charger la vidéo dès l'ouverture de la page. 14 7

html 13 Attributs de <video> autoplay Pour jouer le document de manière automatique. controls Fournit des contrôles comme play/pause, barre de glissement, contrôle de volume.

8 L'élement <audio> Élément standard permettant de jouer des fichiers audio. Trois types de codages sont supportés:.ogg,.mp3 et.wav Offre la possibilité de prioriser les fichiers joués <audio> <source src="chanson1.ogg" type="audio/ogg"> <source src=chanson.aac" type="audio/aac"> <ahref=" <cite>si j'etais chanteur </cite></a> de Boby Lapointe(format Ogg Vorbis) </audio> audio_js.html 15 <canvas> L'élément <canvas> permet de créer des graphiques 2D (et bientôt 3D!). Il permet de mettre en place une zone pour les dessins ou les applications graphiques canvas id="moncannevas"> Le browser ne supporte pas le cannevas </canvas> <script type="text/javascript"> var canvas=document.getelementbyid('moncannevas'); var ctx=canvas.getcontext('2d'); ctx.fillstyle='#ff00cc'; ctx.fillrect(0,0,80,100); </script> 16 8

ogg">téléchargez <cite>si j'etais chanteur </cite></a> de Boby Lapointe(format Ogg Vorbis)

9 <canvas> Permet de dessiner en mode vectoriel. On utilise DOM/Javascriptpour manipuler les cenevas: On doit obtenir un contexte (2D par exemple) associé au canevas qui permet de dessiner: var lecanevas = document.getelementbyid( MonCanevas ); Var ctx = lecanevas.getcontext( 2d ); Avec le contexte, on peut utiliser l' API pour la manipulation des éléments graphiques Exemple: dessiner un rectangle plein ctx.fillrect(10, 20, 50, 50); 17 Propriétés des canevas La dimension du canevas est spécifiée par les attributs widthet height. Le dessin dans le canevas se fait dans ces limites en utilisant des coordonnées x et y. Un objet canevas possède plusieurs: Propriétés graphiques : linewidth, fillstyle, fillstyle est la propriété de remplissage (couleur, ) Méthodes: fillrect(), stroke(), fillrectanglecrée un rectangle et le remplit 18 9

getelementbyid( MonCanevas ); Var ctx = lecanevas.getcontext( 2d ); Avec le contexte, on peut utiliser l' API pour la manipulation des éléments graphiques Exemple: dessiner un rectangle plein ctx.

Documents pareils

Formation : WEbMaster

Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins