Aller au contenu | Aller au menu | Aller à la recherche


html 5

Par PlaceOweb le dimanche, avril 1 2012, 20:31 - Outils Internet - Lien permanent

Qu'est que l'HTML5 ? Quels principaux navigateurs sont compatibles html 5 ? xhtml 5 ?

Test compatibilité HTML 5

Selon le test de Test et démo de Canvas, si vous voyez 2 formes (rectangle bleu et cercle vert) c'est que votre navigateur prends en charge la nouvelle balise "canvas". Cette balise "canvas" permet d'afficher du graphisme en 2D dans le navigateur et ainsi faire de celui-ci une plateforme d'applications web riches.

  • Compatible html5 canvas
    • (octobre 2010)
      • Google chrome (6.0.472.63)
      • Mozilla firefox (3.6.10)
    • (avril 2012)
      • Internet explorer (9.0.8112.xxx)
      • Opera/9.80 Version/11.61
  • NON compatible html5 canvas
    • (octobre 2010)
      • Internet explorer (8.0.7600.xxx)

Egalement le support des fonctionnalités HTML5 par navigateur et version

Afficher un rectangle bleu

Non reconnu!

Afficher un cercle vert

Non reconnu!

Test de la compatibilité de votre navigateur

  • html5test.com The HTML5 test – how well does your browser support HTML5?
    • 2017
      • Chrome Dev 55.0.2883.87 on Windows 7 : 507 out of 555 points
      • Firefox 50.0 on Windows 7 : 466 out of 555 points
      • Internet Explorer 11.0 on Windows 7
    • Avant 2017
      • Chrome 49 on Windows 7 : 521 out of 555 points
      • Firefox 45.0 on Windows 7 : 478 out of 555 points
      • Chrome 16 on Windows 7 : 374 and 13 bonus points out of a total of 475 points
      • Firefox 10.0 on Windows 7 : 332 and 9 bonus points out of a total of 475 points
      • Internet Explorer 9.0 on Windows 7 : 141 and 5 bonus points out of a total of 475 points
      • Opera 11.61 on Windows 7 : 329 and 9 bonus points out of a total of 475 points
      • Safari 5.1.2 on Windows 7 : 261 and 2 bonus points out of a total of 475 points
  • html5demos.com HTML 5 Demos and Examples
  • <html5> par l'exemple : Le site français de démo des balises HTML5 et de test du support des navigateurs.
    • sessionStorage : Démo HTML5 particulièrement utile lorsqu'on remplie un formulaire sur plusieurs pages, et que l'on ne veut envoyer les informations saisies qu'à la fin.
    • localStorage : Démo HTML5 Contrairement à sessionStorage, il y a persistante des données entre plusieurs pages, et après réouverture du navigateur.

Les changements html 5

Brièvement et non exhaustif :

  • Canvas : Canvas est totalement ignoré par Internet Explorer 8. C'est normal, c'est un concurrent à Silverlight, une technologie propriétaire de Microsoft. Le fonctionnement des deux objets est assez proche.
  • Ajax et domaines multiples: HTTP access control
  • ...

HTML5 - Geolocation (localisation géographique HTML5)

[javascript]
	if (navigator.geolocation)
	{
		function successCallback(position){
			console.log("Latitude : " + position.coords.latitude + ", longitude : " + position.coords.longitude);
		};

		function errorCallback(error){
		  switch(error.code){
		    case error.PERMISSION_DENIED:
		      alert("L'utilisateur n'a pas autorisé l'accès à sa position");
		      break;
		    case error.POSITION_UNAVAILABLE:
		      alert("L'emplacement de l'utilisateur n'a pas pu être déterminé");
		      break;
		    case error.TIMEOUT:
		      alert("Le service n'a pas répondu à temps");
		      break;
		    }
		};

		navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {enableHighAccuracy: true, timeout: 10000, maximumAge: 600000});
	}

HTML5 base de données (Session Storage, Local Storage, SQL Database, Indexed Database) pour stocker vos données localement sur le navigateur client

Les différents types de stockage pour le html5

Base de données WEB : Web SQL Database et Indexed Database API

HTML5 - Web SQL Database (obsolète)
  • W3C Web SQL Database Méfiez-vous, depuis 2010, cette spécification n'est plus dans la maintenance active et le groupe de travail W3C des applications Web n'a pas l'intention de le maintenir dans le futur. Citant le manque de mises en œuvre indépendantes (ne pas utiliser SQLite comme backend) est la raison pour laquelle le cahier des charges ne pouvait pas devenir une recommandation du W3C
  • Web SQL Database Cette API est supportées par Google Chrome, Opera et Safari, mais n'a pas été implémentée par Mozilla Firefox qui à la place, prend en charge l'API Indexed Database API (base de données indexées).
HTML5 - Indexed Database API (IndexedDB)

HTML5 - localStorage

Conclusion rapide au 1er avril 2012 (et ce n'est pas un poisson !)

Les bases de données : "openDatabase"

html5 demo : database

Incompatible :

  • IE 9
  • Firefox 11

Compatible :

  • Chrome 17
  • Opera/9.80 Version/11.61 (SQLite 3.6.23)
  • Safari 5.1.2

HTML5 - Websocket et SSE (Server Sent Events)

HTML5 Offline

Patch pour les navigateurs non compatibles html5

  • Et IE, s'il ne comprend pas nativement les nouvelles balises, n'est pas à exclure... il suffit de rajouter 1 tout petit script de rien du tout : html5shim HTML5 IE enabling script

Ressources

Autre HTML5

Input

placeholder pour marquer une info d'aide dans le champ : <input type="text" placeholder="ici, mon info placeholder affichée tant que l'utilisateur l'alimente, ne saisit pas ce champ" />

input type tel : <input type="tel" pattern="^(\d{10})$" />

Dekstop

Colorié en cas d'erreur et bloquant le formulaire au submit (pas en JavaScript) seulement si des données ont été saisies, donc un champs vide ne sera ni vérifié, ni bloquant !

  • Chrome 18 : "Veuillez respecter le format requis."
  • Firefox 11 : "Veuillez modifier la valeur pour correspondre au format demandé."
  • Opera 11.62 : "Veuillez utiliser le format requis"
  • Internet Explorer 9 : non pris en charge
  • Safari 5.1.5 : non pris en charge

Mobile

Sur Mobile (Android 2.2, AppleWebKit/533.1) : ouverture du pavé numérique. Aucun visuel d'erreur, ni de blocage de soumission du formulaire.

input type email : <input type="email" />

Dekstop

Colorié en cas d'erreur et bloquant le formulaire au submit (pas en JavaScript) seulement si des données ont été saisies, donc un champs vide ne sera ni vérifié, ni bloquant !

  • Chrome 18 : "Veuillez saisir une adresse e-mail."
  • Firefox 11 : "Veuillez saisir une adresse courriel valide."
  • Opera 11.62 : "Veuillez entrer une adresse email correcte"

Mobile

Sur Mobile (Android 2.2, AppleWebKit/533.1) : ouverture du de la saisie texte classique. Aucun visuel d'erreur, ni de blocage de soumission du formulaire.

input type date, time, datetime, month et week : <input type="date" />

Malheureusement fonctionnel (à ce jour) uniquement sous Opera et Safari.

input type number : <input type="number" />

Permet principalement l'ouverture du pavé numérique sur les mobiles.

Le cas de la balise <br>, <br/>, <br />

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet