Tutorial HTML5

Michel Buffa
Juin 2014

buffa@unice.fr

Informations importantes

Page web de support du cours avec exercices, resources, exemples : http://tinyurl.com/p83rhw2

Cette présentation reprend des exemples d'un cours HTML5 du W3C, donné sur W3DevCampus

C'est la sixième édition de ce cours...

Pouvons-nous utiliser HTML5 aujourd'hui ?

Oui ! Le support augmente tous les jours, et il existe de nombreuses solutions de fallback/shyms pour les vieux navigateurs.

http://www.caniuse.com donne le détail du support.

http://html5please.us liste les fallbacks au cas par cas, pour les anciens navigateurs.

Modernizr est une librairie qui propose des solutions globales de rétro-compatibilité

La plupart des exemples / exercices fonctionnent sur les principaux navigateurs, quelques features récentes uniquement sur quelques navigateurs.

HTML5 ajoute de la simplicité, mais surtout beaucoup d'APIs JavaScript !

A minimal HTML5 document

<!-- Wow ! -->
<!doctype html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <title>Page title</title>
  <!-- Notice the rel attribute ! -->
  <link rel="stylesheet" href="style.css"> 
  <!-- Notice : no attribute type= -->
  <script src="script.js"></script> 
</head>

<body>
   <!-- Some content -->
</body>
</html>

HTML5 c'est...

  • Nouveaux éléments de structure, nouveaux attributs, Microdatas
  • Multimedia (audio, video, sous-titres, effets spéciaux, APIs...)
  • Améliorations importantes sur les formulaires
  • Dessin / animation avec l'élément canvas et ses APIs 2D/3D
  • La persistence: applications offline, cache, bases de données côté client...
  • Nombreuses APIs JavaScript : géo-localisation, orientation, validation de formulaires, DOM api++, autres...
  • On ajoute aussi CSS3, WebRTC (WebSockets) dans le panier HTML5...

Mais...qu'est-ce qu'une WebApp en fait ?

HTML5 a rendu ceci possible...