Les apports d'HTML 5
pour l'interopérabilité desapplications géospatialesGaëtan LAVENU - Esri FranceThierry PEUZIN - Business GeograficEléments d'introduction
à propos d'HTML 5

HTML 5, qu'est ce que c'est ?
HTML5 (HyperText Markup Language 5) est ladernière révision majeure d'HTML (format dedonnées conçu pour représenter les pages web).

 Une spécification duWorld Wide Web Consortium (W3C)
et WHATWG
 Destiné à remplacer HTML 4, XHTML,et HTML DOM Level 2.

HTML 5, un Buzz Word ?
 Au delà du langage de balises HTML, HTML 5 est utilisé pour qualifier une série detechnologies modernes supportées par les navigateurs récents

Ce qui est nouveau...
 Nouveaux éléments d'IHM (formulaire) Nouveaux éléments de structure et de sémantique Support complet de CSS3
 Géolocalisation
 Plus d'intégration Multimédia (Vidéo et Audio) Nouvelles capacités graphiques 2D/3D
 Options pour le stockage de données locales Adaptation aux applications Mobiles
 Interface utilisateur / Ergonomie

Statut
 Spécifications d'HTML 5:
 2012: Candidate Recommendation
 2013: Call for Review
 2014: Recommendation

 HTML 5.1:
 2014: Last Call
 2015: Candidate Recommendation
 2016: Recommendation

Les apports d'HTML 5pour les applications
Géospatiales

Géolocalisation et orientation

API de Géolocalisation
 Les navigateurs implémentant HTML 5 peuvent fournir la position
Latitude/Longitude/Altitude/Direction de l'utilisateur GPS, triangulation GSM, triangulation Wifi ou Adresse IP
 Via une API de Géolocalisation normalisée

Orientation et accélération (mobiles)
 window.DeviceOrientationEvent (Gyroscope)!

 window.DeviceMotionEvent (Accéléromètres)!

Démo• Centrer la carte sur sa localisation couranteHTML 5 pour une meilleureergonomie des applications

HTML 5 offre plus de contrôles d'IHM
 13 nouveaux contrôles

 14 nouveaux attributs

Opéra 10.5

BlackberryDe nouvelles options pour l'ergonomie Nombreuses avancées avec CSS3
 Nouveaux types de sélecteurs pour atteindre plus précisément
certains éléments DOM de la page
 Arrières plans multiples et dégradés Les transitions / animations
 L'incorporation de polices externes (non-standards)
 Le multi-colonnes
 Les transformations (effets) 3D ...

 Le support de vidéos et de fichiers audio sans plugin Le support du Drag-and-Drop File API / FileReader APICSS3 et Responsive Design
 CSS3 Media Queries
 Tester le média de sortie et ses caractéristiques Appliquer différents styles CSS selon le contexte

DémoStockage local et travail
en mode déconnecté

L'option "Web Storage"
 Appelé aussi "localStorage"
 Consiste à pouvoir stocker en local des paires Clé/Valeur!
 Valeur de type Objet dans la recommandation
 Stockés localement et persistent après fermeture du navigateur A la différence des cookies, ces derniers ne sont pas transmis au serveur

 Une variante "sessionStorage" permet d'effacer le contenu lors de lafermeture du navigateur PRO: API très simple, implémentée dans de nombreux navigateurs
 CON: Pas de langage de requête, pas de notion de schéma, ni detransaction, limitation à 2,5 ou 5 Mo de données.

L'option "Web SQL Database" Stocker des données dans une base de données locale (SQLite)
 Qui peuvent être interrogées en SQL

 PRO: Une même implémentation SQL performante et riche (join,inner selects, ...). La possibilité d’accéder à la base en direct (pourfaire des synchros sans passer par du code JS)
 CON: Travaux de spécification stoppés par le W3C depuis 2010,Supportées par Chrome, Safari, Opera, Blackberry
mais pas IE, ni Firefox

L'option "Indexed Database" IndexedDB permet de stocker des paires Clé/Valeur!
 Valeur: Objet structuré / Clé: Propriété de cet objet La base de données Orientée Objet Transactionnel (et essentiellement asynchrone) Indexes, Tables, Curseurs, ...

 PRO: Basé sur les concepts des bases NoSQL, un bon
moyen pour persister des objets JavaScripts,
Une alternative intéressante à "Web SQL Database" CON: Pas encore implémenté dans tous les navigateurs(Safari), pas d'accès SQL, et implémentation récente chez
les autres (Android >= 4.4, IE >= 10)

Démo

Cache d'application avec "Manifest"
 La page HTML principale référence un fichier "Manifest"

 Celui-ci liste les fichiers à mettre en cache Tous les chargements suivants se ferontà partir du cache (sauf si le "Manifest" a été
modifié sur le serveur) L'objet window.applicationCache permetl'accès au cache avec JavaScriptRendus Carto 2D/3D
performants sans plugin

Une nouveauté majeure: Les "Canvas" Plutôt pour la 2D
 Elément standard d'HTML 5
 Un espace de pixels pilotable en JavaScript pour réaliser des rendus
graphiques (bitmaps)
 Formes, images, textes

 Supporté par tous les principaux navigateurs récents (y compris mobiles)

SVG (Scalable Vector Graphics)
 Plutôt pour la 2D
 Format de données (XML) standardisé par le W3C
 Permet de décrire des éléments graphiques vectoriels
 Souvent utilisé dans le domaine du Web Mapping Supporté par les principaux navigateurs récents (y compris mobiles)

WebGL Plutôt pour la 3D
 Spécification d'interface pour la programmation (JavaScript)
d'affichages dynamiques dans une page HTML5
 Exploite les capacités de la carte graphique du poste client
via le standard OpenGL ES Ne nécessite pas de plugin dans le navigateur Supporté par Chrome, Firefox, Safari, Opera et IE (>11)

DémosCartographie en temps réelHTML 5 propose les "WebSockets"
 Spécification d'HTML 5 permettant l'ouverture d'uneconnexion réseau entre un serveur et une page web Une alternative aux multiples appels Ajax
 Cette connexion est
 Bi-directionnelle
 Persistente Faible consommationde bande passante Idéale pour: Notification en temps-réel Données issues de capteurs
 Positionnement en temps-réelServer-Sent Events
 Cette API permet à un serveur de renvoyer des évènements à ducode JavaScript en minimisant le trafic réseau
 Similaire aux WebSockets car les évènements arrivent en « temps
réel », mais la communication est monodirectionnelle (Serveur versclient).
 Protocole HTTP standard, avec reconnexion automatique si laconnexion est perdue. Pas besoin d’une implémentation spécifiquecoté serveur.
 Le serveur peut renvoyer un « ID » pour chaque message. En cas deperte de connexion, le navigateur renvoie dans un entête le dernier IDreçu pour que le serveur puisse renvoyer les messages « perdus »Server-Sent Events
var source = new EventSource(“notification.php");
source.addEventListener('message', function(e){var data = JSON.parse(e.data);
console.log(data.msg);}, false);
source.addEventListener('userlogon', function(e){var data = JSON.parse(e.data);
console.log('User login:' + data.username);}, false);
Le serveur renvoie un flux texte text/event-stream
data: {"msg": "First message"}\n\nevent: userlogon\ndata: {"username": "John123"}\n\nServer-Sent Events

Démo

Performance et Multi-Threading

HTML 5 propose les "Web Workers" Permet l'exécution de processus en arrière-plan (en dehors duprocessus principale de la page) Permet de sous-traiter, en asynchrone, certaines tâches
consommatrices en temps
 Pour les paralléliser Pour ne pas ralentir l'exécution de la page et l'expérience utilisateur (UI)

 Une alternative intéressante à l'enchainement d'appels Ajax et defonctions de Callback (=> complexité du code) Usages: Echanges multiples entre le serveur et la page
 Calculs intensifs: compression/décompression, projections, ...
 Pour l'envoi de données volumineuses vers un serveur (pour éviter qu'unchangement de page n'interrompe le processus)

HTML 5 propose les "Web Workers"
 Un exemple simple

worker.js

HTML 5 propose les "Web Workers"
 Supporté par les principaux navigateurs récents (y compris mobiles) Limitations
 Ils s'exécutent en dehors du thread principal du navigateur Ils n'ont pas d'accès direct au DOM
 Ils n'ont pas d'accès direct aux variables globales de la page
 Ils n'ont pas d'accès direct aux fonctions JS de la page

 Communiquent avec la page par des messages (Listeners)

Pertinence du choixd'HTML5 en termesd'interopérabilité ?

HTML 5, des apports indéniables
 HTML5, c’est d’abord une évolution des technologies àdisposition des développeurs et des designers
 Convergence vers une plateforme de développement client: Unifiée, Consistante, Cross-Platform.

 Règle de nombreux problèmes liés aux développements
d'interface web
 Des interfaces utilisateurs riches
 Des capacités à fonctionner online et offline L'intégration multimédia, cartes 2D et 3D

Une interopérabilité avec des limites...
 HTML 5 introduit plus d'interopérabilité dans les APIs fournies pas
les navigateurs (formulaires, SVG, canvas, websockets, CSS3, ...)
 Cependant cette compatibilité n'est pas parfaite

http://caniuse.com/

HTML 5, risque ou opportunité pour lanormalisation spatiale ?
 Architecture technique Les évolutions d'HTML 5 (WebSocket, Server-Event) ne remettent pas encause les architectures et les standards actuels mais proposent desalternatives très intéressantes
 Abandonner HTTP pour certains types d'échanges, oui/non ?

 Plateforme d'exécution
 Dépend du support des navigateurs Point critique car on ne maîtrise pas toujours l'environnement cible
 Opportunités du coté de la mobilité et du fonctionnement déconnecté:
Pour bientôt un IndexedDB Spatial ?

HTML 5, risque ou opportunité pour lanormalisation spatiale ?
 Frameworks/Bibliothèques
 HTML 5 ouvre la possibilité de partager des bibliothèques de fournisseurs
différents. Exemple: Bibliothèques de rendus graphiques SVG/Canvas
 Comment passer de ces bibliothèques à des standards ?
 Compatibilité des Frameworks de base, Licences, ...

 Exploitation de données géospatiales
 HTML 5 ne remet rien en cause en termes d'interopérabilités Au contraire HTML 5 renforce l'intérêt des formats comme GeoJSON,
TopoJSON, ...
 Les nouvelles capacités disponibles coté client rendent encore plus
pertinent l'utilisation d'API/Services Rest ...
... sans remettre en cause l'utilisation de services plus classiques baséssur XML
 XML ou Rest, ce sont plus les API offertes par les composantes serveur
qui assurent l'interopérabilité

Questions / Réponses