1 / 20

HTML 5

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 ?.

berget
Download Presentation

HTML 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HTML 5

  2. 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

  3. 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

  4. 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é)

  5. Balises sémantiques de structure (exemple de positionnement, source : http://www.codeproject.com/Articles/146409/Semantic-HTML5-Page-Layout)

  6. 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 • ...

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

  8. 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

  9. 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

  10. 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...)

  11. 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...)

  12. 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

  13. 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>

  14. 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> • ...

  15. 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/)

  16. 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

  17. 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

  18. 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');

  19. 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);});

  20. 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/

More Related