INF2005– Programmation web– A. Obaid HTML 5

INF2005– Programmation web– A. Obaid 2 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 :,,,,,… – Nouvelles balises pour la vidéo et l'audio,. – De nouveaux éléments des formulaires:,,,,, …

INF2005– Programmation web– A. Obaid 3 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é: – svg.xml

INF2005– Programmation web– A. Obaid 4 Élemens et attributs obsolètes Plusieurs éléments et attributs de HTML 4 sont devenus obsolète, dont: –,,,, accesskey name (dans img, form et a), language (dans script),,,,,,, …

INF2005– Programmation web– A. Obaid 5 Nouveaux élélements sémantiques Éléments ans style mais ayant un signification – : élément principal – : texte de domaine (ex. sur les animaux) – : article thématique (blog, bulletin, ). – : pour grouper des figures. – : pour ajouter une légende à une figure. – : en-tête d'une section ou un article. – : pied de section ou d'article – : section de liens pour la navigation. – : ajout latéral à un un article. … La programmation du web ! On montre les principes et les techniques de marquage. Ceci inclut la programmation en JavaScript

INF2005– Programmation web– A. Obaid 6 Éléments de structure Jean Salut, ca va ? Bob Tres bien et toi? Jean Ca va. Quoi de neuf? Une belle petite vache ! tag_2.html La programmation du web On montre les principes et les techniques de marquage. Ceci inclut la programmation en JavaScript

INF2005– Programmation web– A. Obaid 7 Éléments de structure Les nouveaux sites pourront être structurés avec les éléments sémantiques en adoptant les balises remplaçant les : – Meilleure exploitation des pages avec une structure commune html5.html et css4html5.css

INF2005– Programmation web– A. Obaid 8 Autres éléments Autres éléments de saisie et de présentation des données suggérés: – : permet d'accentuer (highlighter) en jaune un texte – : dessine une jauge avec min et max et une valeur choisie – : illustre un progrès. – : permet d'insérer une date. – : spécifie des éléments de détails qu'on peut montrer ou cacher. L'élément montre le titre de ces détails. – : contient le résultat d'un calcul dans un formulaire. – …

INF2005– Programmation web– A. Obaid 9 Éléments pour le multimédia et : pour les contenus multimédia. Avec la balise on peut spécifier de multiples sources avec des affichages selon la priorité. – Si un fichiern'est pas afiché, on passe au suivant. Impossible de jouer ces documents Impossible d'afficher ces documents

INF2005– Programmation web– A. Obaid 10 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+" "+"Y: "+laLongitude +" "+"Z: "+lAltitude document.getElementById("maposition").innerHTML = laPosition; } function maPosition() { navigator.geolocation.getCurrentPosition(getPosition); }

INF2005– Programmation web– A. Obaid 11 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.

INF2005– Programmation web– A. Obaid 12 L' élément HTML 5 a standardisé l'élément d'affichage des vidéo: Deux types de codage sont automatiquement supportés: – MPEG 4 – Ogg : codage en logiciel libre. Votre fureteur ne supporte pas l'affichage video !

INF2005– Programmation web– A. Obaid 13 L' élément Permet d'offrir des alternatives d'affichage avec : Attributs: – autoplay – loop – src – width – height – poster – preload Votre fureteur ne supporte pas l'affichage video ! video2.html

INF2005– Programmation web– A. Obaid 14 Attributs de 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.

INF2005– Programmation web– A. Obaid 15 L'élement É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 Téléchargez SI j'etais chanteur de Boby Lapointe (format Ogg Vorbis) audio_js.html

INF2005– Programmation web– A. Obaid 16 L'élément 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 var canvas=document.getElementById('monCannevas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF00cc'; ctx.fillRect(0,0,80,100);

INF2005– Programmation web– A. Obaid 17 Permet de dessiner en mode vectoriel. On utilise DOM/Javascript pour 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);

INF2005– Programmation web– A. Obaid 18 Propriétés des canevas La dimension du canevas est spécifiée par les attributs width et 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(), … fillRectangle crée un rectangle et le remplit