HTML5 et les portables

HTML5 et les portables

HTML5 présente quelques particularités pour son utilisation dans les téléphones mobiles, les tablettes tactiles, et autres dispositifs nomades.

Sommaire

Caractéristiques principales

Mémoire locale

Le stockage de données en cache (AppCache) par le navigateur permet, entre autres choses, de donner l'impression à l'utilisateur d'une continuité de la connexion dans certains cas où il y aurait eu des interruptions[1].

Pour que cela soit activé, il est nécessaire de créer un offline manifest la première fois et d'avoir le type MIME : text/cache-manifest[2].

Le fichier du manifest contient les dépendances qui sont requises pour qu'une application tourne bien.

CACHE MANIFEST
# Version 0.1
offline.html
/iui/iui.js
/iui/iui.css
/iui/loading.gif
/iui/toolbar.png
/iui/whiteButton.png
/images/gymnastics.jpg
/images/soccer.png
/images/gym.jpg
/images/soccer.jpg

Après la création du manifeste, il faut une connexion au navigateur, qui est réalisée par la balise html avec l'attribut manifest contenant l'URL du fichier du manifeste.

<html manifest="manifest.mf">

Dessin

Un espace peut être affecté sur une page pour des images, des courbes, des graphes, des éléments ludiques, et toutes les autres choses qui peuvent être dessinées, soit par programmation, soit par l'interaction de l'utilisateur. Ceci est possible sans recourir à de la programmation via Adobe Flash ou d'autres plugins[3].

Flux vidéo et audio

Il devient possible de gérer des flux vidéo et audio directement, sans Adobe Flash[3].

Geolocalisation

Il existe une API de Géolocalisation récupère la position géographique de l'utilisateur. Cette API n'est pas incluse dans les spécifications de HTML5, mais elle peut être utilisée en complément. La latitude et la longitude sont alors disponible dans le JavaScript de la page, qui peut ensuite l'envoyer éventuellement au serveur. Cela pourrait être utilisé, par exemple, pour montrer les édifices touristiques ou commerciaux qui se trouvent proche de l'utilisateur[4].

Voici une ligne de code typique pour la géolocalisation :

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

La recherche de la position est une opération asynchrone, qui nécessite l'accord de l'utilisateur. Il faut donc fournir des fonctions de rappel pour les cas d'acceptation et de refus[5].

Formulaires avancés

Les champs des formulaires en HTML5 ont des attributs qui facilitent l'interface avec l'utilisateur, et qui réduisent la taille de la page HTML en enlevant la nécessité de certaines lignes de code javascript habituellement utilisées pour des contrôles locaux avant envoi au serveur[3].

Problèmes connus

Vidéo

Android

  • Android 2.2 et les versions inférieures ne gèrent par l'attribut controls. Cela oblige a fournir sa propre interface vidéo, contenant au minimum un script pour le démarrage de la vidéo. Ce bug est corrigé dans Android 2.3[6].
  • Android 2.2 et les versions inférieures ne gèrent pas correctement l'attribut type dans tous les cas, et notamment s'il manque l'extension ".mp4" pour une source MP4. Par contre, avec une source H.264, cela passe bien. Ce bug a été corrigé dans Android 2.3.

iPhones et iPads

  • iOS 3.2 et les versions inférieures ne reconnaissent pas la vidéo si l'attribut poster est présent. Cet attribut devrait permettre d'afficher une image lors du chargement de la vidéo. Ce bug a été corrigé dans iOS 4.0.
  • S'il y a plusieurs sources, iOS 3.2 et les versions inférieures ne prendront en compte que la première. Or, comme iOS n'accepte que les codecs H.264+AAC+MP4, cela signifie que la première source sera presque obligatoirement MP4. Ce bug est corrigé dans iOS 4.0[6].

Détection de la disponibilité d'HTML5 et du type fixe/mobile

Avant de créer une page au standard HTML5, le serveur peut souhaiter vérifier si le HTML5 sera admis par le poste client. Cette détection, ainsi que celle du type fixe/mobile se fait habituellement grâce au user-agent.

Tous les appareils qui dialoguent en HTTP doivent envoyer un user-agent qui est une chaîne de caractères identifiant le navigateur web et le système d'exploitation du poste client.

Pour le serveur de pages web, il est possible de détecter si HTML5 est supporté, en examinant la version du navigateur dans le user-agent. Et il est possible de détecter le type de matériel du client en examinant le système d'exploitation du user-agent.

Cela peut se faire de manière simple en comparant le nom à une liste préétablie qu'il faut maintenir. Ou bien cela peut se faire à l'aide de fonctions additionnelles ajoutées au serveur, par exemple, si le serveur est Apache, alors il existe le module AMFWurflFilter (Open Source) qui donne des attributs (is_wireless_device, is_tablet, ...) facilitant la détection des mobiles et facilitant le choix du format de page (resolution_width, resolution_height, ...)[7].

Voir aussi

References

  1. HTML5 from a Mobile Perspective July 22nd, 2009 by Jason Grigsby
  2. Make mobile Web applications work offline with HTML 5, Michael Galpin, 29 Jun 2010
  3. a, b et c How HTML5 will change the use of web Dec 1, 2009 by Kevin Purdy
  4. GeoLocation API Mark Pilgrims ,Dive Into HTML5
  5. Java Script Geo location Framework for the Mobile Web code.google.com
  6. a et b Mark Pilgrim: Dive Into HTML5
  7. http://wurfl.sourceforge.net/help_doc.php

Sources


Wikimedia Foundation. 2010.

Contenu soumis à la licence CC-BY-SA. Source : Article HTML5 et les portables de Wikipédia en français (auteurs)

Игры ⚽ Нужно решить контрольную?

Regardez d'autres dictionnaires:

  • HTML5 — Extension HTML5: .html, .htm XHTML5: .xhtml, .xht, .xml Type MIME HTML5: text/html XHTML5: application/xhtml+xml, application/xml Dévelo …   Wikipédia en Français

  • Hypertext Markup Language — L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer… …   Wikipédia en Français

  • iPad — Développeur Apple Fabricant Foxconn (sous traitance) Type …   Wikipédia en Français

  • .htm — Hypertext Markup Language L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également… …   Wikipédia en Français

  • .html — Hypertext Markup Language L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également… …   Wikipédia en Français

  • HTML — Hypertext Markup Language L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également… …   Wikipédia en Français

  • Html — Hypertext Markup Language L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également… …   Wikipédia en Français

  • HyperText Markup Language — L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer… …   Wikipédia en Français

  • Hypertext markup language — L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer… …   Wikipédia en Français

  • Langage HTML — Hypertext Markup Language L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet également… …   Wikipédia en Français

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”