Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 par Florent Garin, au Toulouse JUG

2,274 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html5 par Florent Garin, au Toulouse JUG

  1. 1. HTML  5  ou  lévolu-on  majeure  du  web  et  de  linternet   mobile   Toulouse  JUG,  jeudi  21  avril  2011  
  2. 2. Florent  Garin  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  
  3. 3. Agenda  1.  HTML5  2.  Le  cas  d’usage  Webinage  3.  HTML5  :  Retour  d’expérience  4.  Conclusion  &  Ques-ons  -­‐  Réponses  
  4. 4. HTML  :  l’historique  
  5. 5. 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  
  6. 6. AJAX  a  tué  XHTML2  •  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  !  
  7. 7. Qu’est-­‐ce  qu’HTML5  ?  HTML5  =  HTML  +  CSS  +  JavaScript  APIs  
  8. 8. Stockage  de  données  •  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  
  9. 9. Ges-on  fine  du  cache  •  Se  fait  via  un  fichier  manifest   CACHE  MANIFEST   style/default.css   images/logo.png     NETWORK:   buy.do    •  API  JS   •  Pour  déterminer  le  mode  courant   •  Déclencher  la  MAJ  atomique  du  cache  •  Cache  +  Web  Storage  =  Mode  Offline  
  10. 10. 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  communica-on  entre  threads  s’opère  par   messages  •  Permet  les  traitements  longs  côté  client  sans   figer  la  page      
  11. 11. Web  Socket  •  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  !      
  12. 12. Fonc-onnalités  mul-média  •  Tags  vidéo  et  audio   •  API  JS      •  Tag  canvas   •  Zone  de  dessin  •  Support  du  format  SVG    •  WebGL   •  Portage  JavaScript  d’OpenGL  
  13. 13. 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…  
  14. 14. Et  aussi…  •  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    
  15. 15. HTML5  :  Retour  d’expérience   REX  Webinage  
  16. 16. Conclusion  &  Ques-ons  -­‐  Réponses  DocDoku  &  Webinage  recrutent  

×