Upload
docdoku
View
5.073
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Atelier du mercredi 20/04/2011 de la Mêlée Numérique 15, co-animé avec Thomas van de Velde, DG de Webinage.L’aire du tactile est plus qu’enclenchée. En outre, face au délicat problème du développement mobile multi-plateformes, comment et pourquoi HTML5 deviendra la technologie standard du web et de l'internet mobile de demain ?
Citation preview
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