HTML	  5	  ou	  lévolu-on	  majeure	  du	  web	  et	  de	  linternet	                                    mobile	          ...
Florent	  Garin	  Co-­‐fondateur	  de	  DocDoku	       Société	  innovante	  IT	       hJp://www.docdoku.com	  	  	  Co-­‐...
Agenda	  1.    HTML5	  2.    Le	  cas	  d’usage	  Webinage	  3.    HTML5	  :	  Retour	  d’expérience	  4.    Conclusion	  ...
HTML	  :	  l’historique	  
HTML5	  vs	  XHTML2	  XHTML2	       •  Focalisé	  sur	  la	  sépara-on	  de	  la	  présenta-on	          et	  de	  la	  st...
AJAX	  a	  tué	  XHTML2	  •  AJAX	  a	  prouvé	  qu’il	  était	  possible	  de	            développer	  de	  vraies	  appl...
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	  (...
Ges-on	  fine	  du	  cache	  •  Se	  fait	  via	  un	  fichier	  manifest	             CACHE	  MANIFEST	             style/d...
Web	  Workers	  •  Enfin	  des	  threads	  en	  JavaScript	     •  Comme	  toujours	  le	  thread	  en	  arrière	  plan	  n...
Web	  Socket	  •  Offre	  une	  véritable	  fonc-on	  de	  push	  •  Remplace	  avantageusement	  Comet	  (long	     pollin...
Fonc-onnalités	  mul-média	  •  Tags	  vidéo	  et	  audio	           •  API	  JS	  	  	  •  Tag	  canvas	           •  Zon...
CSS3	  •  Nouveaux	  sélecteurs	  	  	  •  Eléments	  de	  présenta-on	           •  Nouvelles	  polices	           •  Dég...
Et	  aussi…	  •  De	  nouveaux	  champs	  de	  formulaires	     • 	   Autocomplé-on	     •  Valida-on	  des	  données	  • ...
HTML5	  :	  Retour	  d’expérience	      REX	  Webinage	  
Conclusion	  &	  Ques-ons	  -­‐	  Réponses	  DocDoku	  &	  Webinage	  recrutent	  
Prochain SlideShare
Chargement dans…5
×

Html5 par Florent Garin, au Toulouse JUG

2 217 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 217
Sur SlideShare
0
Issues des intégrations
0
Intégrations
578
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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  

×