Les nouveautés d'HTML 5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Les nouveautés d'HTML 5

on

  • 1,204 views

Formation organisée par l'association Strasweb, qui a eu lieu mercredi 11 décembre 2013.

Formation organisée par l'association Strasweb, qui a eu lieu mercredi 11 décembre 2013.
Pour toute question, n'hésitez pas à nous envoyer un mail à : contact@strasweb.fr
A bientôt !

Statistics

Views

Total Views
1,204
Views on SlideShare
299
Embed Views
905

Actions

Likes
0
Downloads
11
Comments
0

5 Embeds 905

https://strasweb.fr 575
http://strasweb.fr 302
http://127.0.0.1 24
http://localhost 3
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Les nouveautés d'HTML 5 Presentation Transcript

  • 1. Les nouveautés de HTML5 11 décembre 2013 Pierre Rudloff
  • 2. HTML5 | 11 décembre 2013 HTML5 ? Première mise à jour depuis HTML 4.01 (sorti en 2000) Élaboré à partir de 2008, en évolution constante depuis (living standard) Ajout de fonctionnalités pour la construction d'applications web Nouvelles balises Nouvelles API (JavaScript) Simplification de la syntaxe
  • 3. HTML5 | 11 décembre 2013 Simplification HTML5 HTML 4.01 <!Doctype HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dt d"> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script src="script.js"></script> <script src="script.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" type="text/css">
  • 4. HTML5 | 11 décembre 2013 Canevas La balise <canvas> permet de définir une surface vide sur laquelle on peut dessiner grâce à une API JavaScript. On peut y placer des images, du texte, des formes géométriques et les animer. Exemples : http://html5demos.com/canvas-grad https://rudloff.pro/parazitor/
  • 5. HTML5 | 11 décembre 2013 Vidéo/audio Les balises <audio> et <video> permettent de s'affranchir des plugins comme Flash ou QuickTime pour la lecture de média. De plus, les vidéos sont contrôlables par JavaScript et modifiables par CSS. Exemples : http://html5demos.com/video http://camendesign.com/code/video_for_everybody/tes t.html http://www.videojs.com/
  • 6. HTML5 | 11 décembre 2013 Formulaires HTML5 ajoute plusieurs types à la balise <input> : search Un champ imitant le champ de recherche du système e-mail Champ pour un e-mail (le navigateur vérifiera si cela ressemble bien à une adresse e-mail) range Une glissière number Pour des nombres uniquement (avec des boutons + et dans certains navigateurs) date Un calendrier color Un sélecteur de couleur (au format hexadécimal)
  • 7. HTML5 | 11 décembre 2013 Formulaires Il ajoute également de nouveaux attributs : autofocus Le champ est sélectionné automatiquement à l'ouverture de la page placeholder Un texte à afficher tant que le champ n'est pas rempli required Il faut remplir ce champ pour pouvoir valider le formulaire Exemples : https://ie.microsoft.com/TEStdrive/HTML5/Forms/Default.html http://bradshawenterprises.com/tests/formdemo.php
  • 8. HTML5 | 11 décembre 2013 Balises sémantiques header En-tête de la page ou d'une section footer Pied de page nav Menu de navigation section Une section d'un document (généralement avec son propre en-tête) article Un article ou un contenu qui se suffit à lui-même aside Un contenu indirectement relié au contenu principal de la page
  • 9. HTML5 | 11 décembre 2013 Balises sémantiques time Permet d'indiquer une date et son équivalent au format ISO (via l'attribut datetime) mark Permet de surligner un mot-clef mis en avant comme un résultat de recherche
  • 10. HTML5 | 11 décembre 2013 Géolocalisation La fonction navigator.geolocation.getCurrentPosition permet d'obtenir les coordonnées de l'utilisateur, ce qui permet, par exemple, de les afficher sur une carte. Pour déterminer la localisation, le navigateur utilise, selon ce qui est disponible : L'adresse IP ; Une triangulation avec les réseaux wi-fi ; Une triangulation avec les bornes GSM. Exemples : http://html5demos.com/geo http://www.openstreetmap.org/
  • 11. HTML5 | 11 décembre 2013 Stockage local L'objet JavaScript localStorage permet de stocker des chaînes (voire des objets plus complexes si on les convertit en JSON) avec d'enregistrer des informations sur l'utilisateur, des préférences, un historiques, etc. L'avantage de cette fonctionnalité, par rapport à d'autres technologies comme les cookies, est de pouvoir fonctionner hors-ligne. Exemples : http://html5demos.com/storage http://html5demos.com/storage-events
  • 12. HTML5 | 11 décembre 2013 Pages hors ligne La variable navigator.onLine permet de vérifier si le navigateur est connecté à Internet et, dans le cas contraire, de travailler localement en attendant de pouvoir synchroniser les données avec le serveur. Il est également possible de stocker toute une application localement avec un manifeste de cache. Exemples : http://html5demos.com/offline http://html5demos.com/offlineapp
  • 13. HTML5 | 11 décembre 2013 Micro-données Les micro-données permettent de donner des indications supplémentaires aux moteurs de recherche sur le contenu de la page. On utilise pour cela des propriétés issues d'un vocabulaire commun. Le vocabulaire le plus utilisé est celui de Schema.org. Exemples : https://www.google.com/search?q=rich+snippet+example&star
  • 14. HTML5 | 11 décembre 2013 WebSockets La technologie WebSockets permet des communications simultanées entre plusieurs utilisateurs. Elle est particulièrement utile pour les jeux vidéo et les applications de chat. Exemples : http://html5demos.com/web-socket http://browserquest.mozilla.org/
  • 15. HTML5 | 11 décembre 2013 Drag'n'drop HTML5 permet de rendre des éléments déplacables par l'utilisateur. Exemples : http://html5demos.com/drag-anything http://edu.makery.ch/projects/dart-html5-drag-and-drop/
  • 16. HTML5 | 11 décembre 2013 Liens utiles http://code.google.com/p/html5shiv/ http://modernizr.com/ http://caniuse.com/ https://developer.mozilla.org/en-US/docs/HTML/HTML5 http://www.w3.org/TR/html51/
  • 17. HTML5 | 11 décembre 2013 Bibliographie Keith, Jeremy, HTML5 for Web Designers Pilgrim, Mark, HTML5: Up and Running Pilgrim, Mark, Dive Into HTML5 Rodolphe Rimelé, HTML5 : une référence pour le développeur web Raphaël Goetter, CSS avancées - Vers HTML5 et CSS3