HTML 5 ou l'évolution majeure du webet de l'internet mobile

Mercredi 20 avril 2011

Co-fondateur de DocDokuSociété innovante IThttp://www.docdoku.com

Co-fondateur du JUG de ToulouseOuvert à tous, les technologies Javahttp://www.toulousejug.org

Auteur du livre : « Concevoir et développer des applications mobiles et tactiles », 2ème édition

Florent Garin

1. HTML52. Le cas d’usage Webinage3. HTML5 : Retour d’expérience4. Conclusion & Questions - Réponses

Agenda

HTML : l’historique

HTML5 vs XHTML2

XHTML2• Focalisé sur la séparation de la présentation

et de la structure• S’appuie sur XForms, XML Events, etc…• Abandonne l’héritage SGML• Bonne internationalisation

Clairement orienté document

• AJAX a prouvé qu’il était possible de développer de vraies applications sur le web

• HTML5 poursuit le chemin• En formalisant les « bidouilles » ajaxiennes• En réduisant la barrière entre les

applications web & desktop

Clairement orienté applicationet c’est ce qu’on veut !

AJAX a tué XHTML2

Qu’est-ce qu’HTML5 ?

HTML5 = HTML + CSS + JavaScript APIs

• Web Storage (session et local)• Facilite la montée en charge (gestion de

l’état sur le client) • Web SQL Database• 1 seule implémentation SQLite (encore…)• Difficulté des migrations de schémas

• Attention à la confidentialité des données

Stockage de données

• Se fait via un fichier manifest

• API JS• Pour déterminer le mode courant• Déclencher la MAJ atomique du cache

• Cache + Web Storage = Mode Offline

Gestion fine du cache

CACHE MANIFESTstyle/default.cssimages/logo.png

NETWORK:buy.do

• Enfin des threads en JavaScript• Comme toujours le thread en arrière plan ne

peut pas manipuler l’IHM (ici le DOM)• La communication entre threads s’opère par

messages

• Permet les traitements longs côté client sans figer la page

Web Workers

• Offre une véritable fonction de push• Remplace avantageusement Comet (long

polling)• Communication Bidirectionnelle et full-duplex• Fonctionne sur une seule connexion TCP• Proxy et firewall friendly grâce au mécanisme

d’upgrade HTTP…du moins en théorie !

• Attention au problème de timeout !

Web Socket

_ws = new WebSocket(_location);

_ws.onopen = function(evt){ … SendLog("logging","info","presence websocket","is opened");}

_ws.onmessage = function(m) { var presence = $.evalJSON(m.data).presence; SendLog("logging","info","presence status","updated to : "+presence); switchStatusUI(presence);} _ws.onclose = function(){ websocketStatus.presenceStatus="close"; websocketStatus.updateLogo(); SendLog("logging","info","presence websocket","is closing"); }

Côté JavaScript

• Plusieurs implémentations disponibles• Jetty 7• Glassfish 3.1• Netty (Framework Java client-serveur)• JWebSocket

• Non standardisé dans Java EE 6 qui ne propose que les servlets asynchrones pour Comet ;=(

Web Socket côté serveur

class MyWebSocket implements WebSocket {

private Outbound outbound; public void onConnect(Outbound outbound) { this.outbound = outbound; } public void onMessage(byte frame, byte[] data, int offset, int length) { } public void onMessage(byte frame, String data) { } public void sendPresenceStatus(PresenceStatus status) throws IOException { if(outbound!=null && outbound.isOpen()){

outbound.sendMessage(« message JSON»); } public void onDisconnect() { }}

protected WebSocket doWebSocketConnect(HttpServletRequest req, String protocol){..}

Exemple Jetty 7

• Tags vidéo et audio• API JS

• Tag canvas• Zone de dessin

• Support du format SVG

• WebGL• Portage JavaScript d’OpenGL

Fonctionnalités multimédia

CSS3

• Nouveaux sélecteurs • Eléments de présentation• Nouvelles polices• Dégradés• Bords arrondis…

• Des animations• Agrandissement• Translation• Rotation…

• De nouveaux champs de formulaires• Autocomplétion• Validation des données

• La géolocalisation• mobile & desktop (basée sur l’IP, GPS)

• Le glisser-déposer• A l’intérieur de la page• Depuis l’extérieur du navigateur

Et aussi…

HTML5 : Retour d’expérience

REX Webinage

Le projet

Applications innovantes &Communications associées à Internet

BIEN ÊTRE& AUTONOMIEpour lespersonnes fragilisées

RELATION fortifiée et efficacepour l’entourage local et distant

Nouvellesergonomiesabordables

Ré-enchanter à l’ère du numériqueles relations intergénérationnelles

En échangeant et s’entraidant comme en présence

• Besoin de portabilité universelle• PC, MAC, Linux• Tablettes tactiles : Android, iOS, WebOS • Smartphones…

• Réutiliser au maximum l’interface utilisateur• Design, Ergonomie, Esthétique

• Gérer les spécificités du projet • Beaucoup de mise au point IHM => facile en HTML• Séparer métier / exécution => architecture JEE – JSON - JS • Appels entrants, évènements => push • Echanges M2M directs => websocket• Affichage vidéo, activités communes => video tag, canvas

• Fondations pour de nombreuses années

• Choix de HML5 – CSS3 – JS en Juillet 2010

HTML5 : Motivations

HTML5: les Leçons

WebsocketMarche parfaitement!! Gestion manuelle de la maintenance des connexions (keep-alive, reconnexion)

VidéoVidéo et autres flux multimédia super simple et intégré (aucun plugin !!)!! Codecs limités H264, ogg, aac transcodage de média en amont?? Future de H264 versus VP8

Plusieurs heureuses surprisesCSS3 = téléchargement intégré des fontes spécifiques Canvas, drag & drop, local storage = parfaitEn exploration 3D OpenGL

Outillage = très fonctionnelIntégrée à Chrome lui-mêmeFacilité de mise au point de l’IHM

Différences entre Navigateurs– Comportements très variables, difficiles

à prévoir entre les navigateurs– Et même entre OS avec 1 navigateur– Résolu en embarquant un Chrome

propre ; environnement maîtrisé– ?? Smartphone et Android 3.0

Pas de Tag Device– !! Pas de support des webcams et autres

périphériques dans JS

Performance– Parfait sur PC-Mac-Linux– Mais attente de la compilation JS Just-In-

Time pour tablettes et Smartphone

Equipe de Développement– JS moins contraignant que Java– !! Besoin d’une vraie discipline de

développement

Points Positifs Limites

Conclusion & Questions - Réponses

DocDoku & Webinage recrutent