HTML  5  ou  l'évolu-on  majeure  du  web  et  de  l'internet  mobile  

Toulouse  JUG,  jeudi  21  avril  2011  

Co-­‐fondateur  de  DocDoku  Société  innovante  IT  hJp://www.docdoku.com  

   

Co-­‐fondateur  du  JUG  de  Toulouse  Ouvert  à  tous,  les  technologies  Java  hJp://www.toulousejug.org  

   

Auteur  du  livre  :  «  Concevoir  et  développer  des  applica-ons  mobiles  et  tac-les  »,  2ème  édi-on  

Florent  Garin  

1.   HTML5  2.   Le  cas  d’usage  Webinage  3.   HTML5  :  Retour  d’expérience  4.   Conclusion  &  Ques-ons  -­‐  Réponses  

Agenda  

HTML  :  l’historique  

HTML5  vs  XHTML2  

XHTML2  •  Focalisé  sur  la  sépara-on  de  la  présenta-on  

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

 Clairement  orienté  document  

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

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

applica-ons  web  &  desktop  

 Clairement  orienté  applica-on  

 et  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  (ges-on  de  

l’état  sur  le  client)      •  Web  SQL  Database  •  1  seule  implémenta-on  SQLite  (encore…)  •  Difficulté  des  migra-ons  de  schémas  

•  AJen-on  à  la  confiden-alité  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  

Ges-on  fine  du  cache  

CACHE  MANIFEST  style/default.css  images/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  communica-on  entre  threads  s’opère  par  

messages  

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

   

Web  Workers  

•  Offre  une  véritable  fonc-on  de  push  •  Remplace  avantageusement  Comet  (long  

polling)  •  Communica-on  Bidirec-onnelle  et  full-­‐duplex  •  Fonc-onne  sur  une  seule  connexion  TCP  •  Proxy  et  firewall  friendly  grâce  au  mécanisme  

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

•  AJen-on  au  problème  de  -meout  !      

Web  Socket  

•  Tags  vidéo  et  audio  •  API  JS  

   •  Tag  canvas  •  Zone  de  dessin  

•  Support  du  format  SVG    •  WebGL  •  Portage  JavaScript  d’OpenGL  

Fonc-onnalités  mul-média  

CSS3  

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

 •  Des  anima-ons  •  Agrandissement  •  Transla-on  •  Rota-on…  

•  De  nouveaux  champs  de  formulaires  •    Autocomplé-on  •  Valida-on  des  données  

•  La  géolocalisa-on  •  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  

Conclusion  &  Ques-ons  -­‐  Réponses  

DocDoku  &  Webinage  recrutent