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

HTML 5 ou l'évolution majeure du web
et de l'internet mobile
Mercredi 20 avril 2011

Florent Garin
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

Agenda
HTML5
Le cas d’usage Webinage
HTML5 : Retour d’expérience
Conclusion & Questions - Réponses

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 tué XHTML2
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é application et c’est ce qu’on veut !

Qu’est-ce qu’HTML5 ?
HTML5 = HTML + CSS + JavaScript APIs

Stockage de données
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

Gestion fine du cache
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
CACHE MANIFEST
style/default.css
images/logo.png
NETWORK:
buy.do

Web Workers
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 Socket
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 !

Côté JavaScript
_ws= new WebSocket(_location);
_ws.onopen= function(evt){
…
SendLog("logging","info","presencewebsocket","isopened");
}
_ws.onmessage= function(m) {
var presence = $.evalJSON(m.data).presence;
SendLog("logging","info","presencestatus","updated to : "+presence);
switchStatusUI(presence);
}
_ws.onclose= function(){
websocketStatus.presenceStatus="close";
websocketStatus.updateLogo();
SendLog("logging","info","presencewebsocket","isclosing");
}

Web Socket côté serveur
Plusieurs implémentations disponibles
Jetty7
Glassfish 3.1
Netty (Framework Java client-serveur)
JWebSocket
Non standardisé dans Java EE 6 qui ne propose que les servlets asynchrones pour Comet ;=(

Exemple Jetty 7
protectedWebSocketdoWebSocketConnect(HttpServletRequestreq, String protocol){
..
}
class MyWebSocketimplementsWebSocket{
privateOutboundoutbound;
public voidonConnect(Outboundoutbound) {
this.outbound = outbound;
}
public voidonMessage(byte frame, byte[] data, int offset, intlength) {
}
public voidonMessage(byte frame, String data) {
}
public voidsendPresenceStatus(PresenceStatusstatus) throwsIOException {
if(outbound!=null && outbound.isOpen()){
outbound.sendMessage(« message JSON»);
}
public voidonDisconnect() {
}
}

Fonctionnalités multimédia
Tags vidéo et audio
API JS
Tag canvas
Zone de dessin
Support du format SVG
WebGL
Portage JavaScript d’OpenGL

CSS3
Nouveaux sélecteurs
Eléments de présentation
Nouvelles polices
Dégradés
Bords arrondis…
Des animations
Agrandissement
Translation
Rotation…

Et aussi…
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

HTML5 : Retour d’expérience
REX Webinage

Nouvelles
ergonomies
abordables
Le projet
Applications innovantes &
Communications associées à Internet
Ré-enchanter à l’ère du numériqueles relations intergénérationnelles
En échangeant et s’entraidant comme en présence
RELATION fortifiée et efficace
pour l’entourage local et distant
BIEN ÊTRE
& AUTONOMIE
pour les
personnes fragilisées

HTML5 : Motivations
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: les Leçons
Points Positifs
Limites
Websocket
Marche parfaitement
!! Gestion manuelle de la maintenance des connexions (keep-alive, reconnexion)
Vidéo
Vidé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 surprises
CSS3 = téléchargement intégré des fontes spécifiques
Canvas, drag & drop, local storage = parfait
En exploration 3D OpenGL
Outillage = très fonctionnel
Intégrée à Chrome lui-même
Facilité 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

Conclusion & Questions - Réponses
DocDoku & Webinage recrutent

http://www.docdoku.com	2683
http://www.linkedin.com	1
http://www.google.fr	1

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

by DocDoku

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 2,685

Statistics