Download
1 / 20
210 likes | 374 Views
HTML 5. Introduction. Pré-requis : XHTML CSS Javascript But du cours : Aperçu des nouveautés HTML5 Survol des fonctionnalités principales pour savoir ce qu'on peut faire Vous n'aurez aucun mal à trouver les détails, par exemple sur www.html5rocks.com. Qu'est-ce que HTML 5 ?.
E N D
Introduction • Pré-requis: • XHTML • CSS • Javascript • But du cours : • Aperçu des nouveautés HTML5 • Survol des fonctionnalités principales pour savoir ce qu'on peut faire • Vous n'aurez aucun mal à trouver les détails, par exemple sur www.html5rocks.com
Qu'est-ce que HTML 5 ? • Une révision majeure d'HTML • En remplacement de XHTML 2.0 • Pas encore adoptée (prévu fin 2014) • Mais déjà partiellement traitée par les navigateurs récents (mais pas toujours les mêmes éléments...) • S'appuie sur les standards existants • Simplifie la syntaxe • Ajoute des balises sémantiques de structure
Simplification de la syntaxe • Déclaration <!DOCTYPE html> • Attribut lang <html lang= "fr"> • Encodage <metacharset="UTF-8"> • Insensible à la casse • (mais la convention est d'utiliser les minuscules) • Fermer les balises est optionnel • (mais conseillé)
Balises sémantiques de structure (exemple de positionnement, source : http://www.codeproject.com/Articles/146409/Semantic-HTML5-Page-Layout)
Balises sémantiques de structure • <article> • Un élément ayant un contenu indépendant • Un article de journal, un post dans un blog ou un forum • … • <section> • Une partie d'article • Des chapitres • Des pages à onglets • ...
Balises sémantiques de structure • <header> • Bloc d'entête • Chapeau ou métadonnées • <footer> • Pied de page ou de section • Section de conclusion
Balises sémantiques de structure • <nav> • Un menu • <hgroup> • Pour grouper des titres et des sous-titres et faciliter la création de table des matières (pas très clair) • <aside> • Relatif au contenu principal mais pas indispensable au lecteur • Un glossaire • Un « voir aussi » • Des liens
Balises sémantiques de structure • <figure> • Une figure ! • <figcaption> • La légende de la figure • <aside> • Relatif au contenu principal mais pas indispensable au lecteur • Un glossaire • Un « voir aussi » • Des liens
Balises sémantiques de structure • <canvas> • Pour afficher des éléments graphiques, animés par un script • <video>, <audio> • Du contenu multimédia • <embed> • Du contenu incorporé (plug-in...)
Balises sémantiques de structure • Et autres bricoles : • <meter>, <progress> (jauge, barre de progression) • <time> (date et heure) • <mark> (texte marqué) • <command> (bouton) • <details> (détails masquables) • <keygen> (génération de clé sécurisée) • <output> (résultat d'un calcul) • <ruby>, <rt>, <rp> (annotations Ruby...)
De nouveaux types d'entrée de formulaire • Pour faciliter la vérification de format des données saisies : • datetime • datetime-local • date • month • week • time • tel • number • range(avec les valeurs min et max) • email • url • search • color • formaction, formmethod et formenctype remplacent action, method, enctype
Mais aussi • Des entrées de formulaire pour la reconnaissance vocale (sur Androïd / Chrome seulement) • Les « microdata », pour relier du texte à des données (Web sémantique) <input type="text" x-webkit-speech /> <div itemscopeitemtype="http://example.org/band"> <p>Mynameis <spanitemprop="name">Neil</span>.</p> <p>My band iscalled <spanitemprop="band">Four Parts Water</span>.</p> <p>I am <spanitemprop="nationality">British</span> .</p> </div>
Autres • De nombreux nouveaux attributs pour les balises existantes • Voir la page Wikipedia de HTML5 ou n'importe quel autre site décrivant ces informations de façon exhaustive • Et la suppression de balises et d'attributs • Ne concernant que la forme (et donc à gérer par le CSS) : <big>, <center>, <tt>, <u>, <basefont>, <font>, <strike> • Obsolètes : <frame>, <frameset>, <noframes>, <acronym>, <applet>, <isindex>, <dir> • ...
De nouvelles API • Dessin 2D (balise canvas) • Vidéo/audio (balises video et audio) • Applications hors-ligne • Édition de contenu • Drag and drop • Accès à l'historique • (Des démos ainsi que le support des navigateurs pour chaque fonctionnalité sur http://html5demos.com/)
Canvas 2D • Permet de faire du dessin 2D dans des éléments <canvas> <canvas id="myCanvas" width="800" height="600"> Le canvas HTML5 ne fonctionne pas avec votrebrowser</canvas> HTML varcanvas = $('#myCanvas'); // c’est du jQueryif (canvas && canvas.get(0).getContext){varcontext = canvas.get(0).getContext('2d'); context.beginPath(); context.moveTo(50, 25); // x, y context.lineTo(250, 25); // x, y context.closePath() context.stroke(); context.fillRect(50, 75, 50, 50); // x, y, width, heightcontext.strokeRect(200, 175, 100, 50); context.arc(100, 325, 50, 0, Math.PI*2, false);context.fillStyle = '#0000FF'; context.fillRect(50, 400, 100, 50); // x, y, width, height // ... } Javascript
Web Storage • Interface Storage, implémentée par tous les navigateurs récents • Remplace les cookies (stockage côté client) • Permet la protection des données • Activable ou désactivable par l'utilisateur • Paires clés-valeurs liées à un domaine • Méthodes key(), getItem(), setItem(), removeItem(), clear() • Attribut length • Objets : • sessionStorage, lié à une session • localStorage, lié à un domaine
Web Storage • Exemple : Javascript // localStorage pour du stockage persistant// (utiliser sessionStorage pour stockage de session)saveButton.addEventListener('click', function () {window.localStorage.setItem('value', area.value);window.localStorage.setItem('timestamp', (new Date()).getTime()); }, false);textarea.value= window.localStorage.getItem('value');
Web SQL Storage • Implémentation incomplète var db = window.openDatabase("DBName", "1.0", "description",5*1024*1024); // 5 Mo db.transaction(function(tx) {tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);});
Application Cache • Implémentation incomplète • Une API pour : • Accéder à un site en mode hors-ligne • Réduire les accès au serveur (en ne rechargeant que les ressources nouvelles) • http://www.html5rocks.com/en/tutorials/appcache/beginner/
