Formation HTML5

Objectifs

• Connaitre les contraintes des navigateurs
• Structurer un document
• Intégrer des médias
• Collecter des données
• Donner de la pertinence au contenu
• Mettre en place une géolocalisation
• Interagir avec les éléments
• Dessiner dans un document

PROGRAMME

• Introduction à HTML5
  • Une évolution du HTML 4
  • Le HTML5 aujourd'hui
  • Choisir son environnement de développement
  • Les outils d'aides au développement
  • Les frameworks
• Les navigateurs
  • Les différents navigateurs du marché
  • Prise ne charge du HTML5
  • Unifier son travail
• Les éléments du HTML5
  • Simplification de la structure de base
  • Les éléments de Section : section, article, header, footer, ...
  • Les conteneurs embarqués : figure, figcaption
  • Les éléments interactifs : detail, summary, command et menu
• Embarquer de l'audio et vidéo
  • Les éléments audio et video
  • Utiliser plusieurs sources
  • Piloter les médias à partir de Javascript
• Les nouveaux éléments de formulaire
  • Nouveaux types pour l'élément input
  • Afficher un message d'aide dans les champs : placeholder
  • Activer ou non l'auto-completion d'un champ : autocomplete
  • Permettre la saisie de multiples valeurs : multiple
  • Utilisation d'attributs pour la validation : required, pattern, min, max et step
  • Externaliser la validation avec CSS 3
  • Nouveaux types liés aux temps : date et datetime
• Les microdonnées (Microdata)
  • Un référencement plus pertinent
  • Utilisation des attributs : itemscope, itemprop, itemtype, ...
  • Les vocabulaires Google, Microsoft et Yahoo
  • Les extraits enrichis (Rich Snippets)
• La persistance côté-client (local storage)
  • Mode de stockage : session ou local
  • Gestion des données avec Javascript
  • Stocker les données au format JSON
• La géolocalisation
  • Qu'est ce que la géolocalisation
  • Test la prise en charge du navigateur
  • Obtenir les coordonnées de géolocalisation
  • Mode GPS
  • Se positionner sur une carte (Google Maps)
• Le glisser/déposer (Drag & Drop)
  • Un mécanisme natif
  • Permettre de glisser un élément : draggable
  • Gestion du déposer :
  • Gestion des événements liés au mécanisme
  • Gestion des données associées au mécanisme (DataTransfert)
• Dessiner avec le Canvas