HTML5 - An Overview

Slides from an HTML5 overview session I presented at work...
This presentation has an accompanying sample webapp project: https://github.com/umnagendra/html5-playground

Transcript

1. Nagendra  Mahesh   @nagendra_um  
2. AGENDA     •  What  is  HTML5?   •  Why  HTML5?   •  The  HTML5  feature  set   •  Demos  +  Code   •  CSS3  –  A  (very)  brief  intro   •  What  I  will  NOT  discuss  today   •  References  
4.   •  HTML  +  JS  +  CSS  ~=  HTML5  !!   •  A  new  major  milestone  for  web  development   •  Focused  on  web  pages  web  sites  web  applica/ons   •  Not  “one  thing”  –  bunch  of  features   •  Combined  (ongoing)  efforts  of  W3C,  WHATWG  and  many  others   •  Eliminates  HTML  and  web  framework  fragmentaZon  
5. “The  world  is  moving  to  HTML5” - Steve Jobs
6. …because  HTML5  provides  elegant,  pragmaZc  SoluZons  to  real-­‐ world  problems.     Before     <input  type=“text”  name=“email”>   <input  type=“text”  name=“time”>   +   Loads  of  extra  js  validation   HTML5     <input  type=“email”>   <input  type=“time”>     …because  HTML5  is  simpler. Before     <!DOCTYPE  HTML  PUBLIC  "-­‐//W3C//DTD  HTML   4.01  [Transitional  |  Strict  |   Frameset]//EN  "http://www.w3.org/TR/ html4/loose.dtd">     <meta  http-­‐equiv="Content-­‐Type"   content="text/html;  charset=utf-­‐8">   HTML5     <!DOCTYPE  html>     <meta  charset=utf-­‐8>  
7. …because  HTML5  has   awesome  stuff  built-­‐in.       No  more  buggy  plugins   that  crash  your  browser,   gobble  resources  and   cause  security  issues.       …because  HTML5  makes   the  web  as  your  pla^orm   for  crazily  rich  web   applicaZon  experiences.     …because  it’s  already   everywhere  !!    
8. HTML5  feature  categories  
10. First  things  first…  Browser  Support??   •  For the latest and greatest, check http://caniuse.com •  In code, use Modernizr.js if(Modernizr.geolocation)  {    navigator.geolocation.getCurrentPosition();   }  else  {      alert(‘Geolocation  not  supported’);   }  
11. Offline/Storage  Features     •  Key-­‐value  pairs  in  the  browser  cache   •  LocalStorage  API   •  SessionStorage  API   …because  using  cookies  =  blasphemy  !!!   Use  cases:  online  shopping  carts,  client-­‐side  prefs,  UI  customizaZons  etc.     •  Web  SQL  Databases   •  Browsers  implemenZng  in-­‐memory  DB  Engines  (SQLite  etc.)   •  js  allows  you  to  write  SQL  queries  !!   •  Save  almost  all  kinds  of  typed  data   •  Secured  Data  -­‐  Datastore  access  restricted  exclusively  within  same-­‐origin   Use  cases:  rich  offline  apps,  everything  under  the  sun     •  Applica/on  cache  (appcache)   •  Cache  resources  (html,  js,  css,  images  etc.)  in  browser  -­‐>  offline  access   •  Offline/Online  Events   navigator.onLine();  //  true  if  you  are  online     document.body.addEventListener("online",  function  ()  {...}   document.body.addEventListener("offline",  function  ()  {...}  
12. File/Hardware  Access   •  Geoloca/on  -­‐  Get  the  geographical  locaZon  of  the  browser   navigator.geolocation.getCurrentPosition(successCallBack(position));     function  successCallBack(position)  {    generateMap(position.coords.latitude,  position.coords.longitude);   }   Uses  GPS,  wi-­‐fi  access  point  info,  MAC  address  (Skyhook  Wireless)     •  Na/ve  Drag  and  Drop     •  Filesystem  API   •  sandboxed  secZon  of  naZve  filesystem   window.webkitStorageInfo.requestQuota();  //  request  quota  of  ‘n’  bytes  for  this  web  app   window.requestFileSystem();  //  returns  FileSystem  object  fs  (handle)     fs.root.getFile('log.txt',  {create:  true,  exclusive:  true},  success(fileEntry){});   fs.root.getDirectory('MyPictures',  {create:  true},  successCallBack(fileEntry){});     fileEntry.createWriter();  //  returns  FileWriter  object   fileWriter.write();  //  writes  to  file     dirReader  =  fs.root.createReader();  //  returns  a  DirReader  object   dirReader.readEntries();  //  read  contents  of  the  directory  (files  and  subdirectories)  
13. File/Hardware  Access   •  Device  Control  (UserMedia)  API   •  control  +    access  input/output  devices  such  as  cameras  etc.   •  getUserMedia(); •  Orienta/on  Physics   •  Accelerometer,  etc.   •  window.addEventListener(‘deviceorientation’);   •  WebGL  (Web  Graphics  Library)   •  Leveraging  GPU  (Graphics  Processors/3D  accelerator  cards)  in  the  client  machine  to   render  mind-­‐blowing  graphics  
14. Real/me/Communica/on   Web  Workers   •  API  for  spawning  background  js  threads  !!   •  async  !=  concurrency   •  Web  workers  can  only  access  a  subset  of                  all  js  features  (no  DOM  manipulaZon)   •  Use-­‐cases:   •  Real-­‐Zme  text  formalng   •  Number/JSON  crunching   •  Background  DB  operaZons     WebSockets   •  Full-­‐duplex,  bi-­‐direcZonal  communicaZon  over  the  Web   •  Just  data,  no  HTTP  headers   •  Socket  connecZons  between  web  browser  and  server   •  Use-­‐cases:   •  MulZplayer  online  games   •  Chat  apps   •  RealZme  social  streams   •  Custom  protocol  interacZon     No/fica/ons  API  
15. Seman/cs  and  Markup   •  New  elements  and  form  input  types  introduced   •  More  meaningful  (semanZcs)  and  pracZcally  useful   •  Help  in  SEO    
16. Graphics  and  Mul/media   Canvas  API   •  a  resoluZon-­‐dependent  bitmap  canvas  which  can  be  used  for  rendering  graphs,  game   graphics,  or  other  visual  images  on  the  fly.   •  use  JavaScript  to  draw  anything  you  want  !!   •  <canvas  />  element   HTML5  Video   •  <video  />  element   •  Standard  way  to  embed  video  in  a  webpage   •  Browser  support  for  major  formats:  H.264,  MP4,  AVI,  OGG  etc.   HTML5  Audio   •  <audio  />  element   •  Standard  way  to  embed  audio  in  a  webpage   •  Browser  support  for  major  formats:  H.264,  MP3,  ALAC,  WAV  etc.  
17. CSS3   Selectors     /*  pattern  selection   */   .row:nth-­‐child(even)  {      background:  #dde;   }   .row:nth-­‐child(odd)  {      background:  white;   }   /*  Specific  attributes  */   input[type="text"]  {      background:  #eee;   }   /*  Negation  selection  */   :not(.box)  {      color:  #00c;     }                           :not(span)  {      display:  block;     }     Rounded  Corners  (border-­‐radius)     Gradients  and  shadows  (text-­‐shadow  and  box-­‐shadow)     CSS3  Anima/ons  and  Transforms              …  and  lots  more.    
18. What  I  have  NOT  discussed  today…   OrientaZon   Physics   SVG   WebGL   Web  Audio  API   3D  Canvas   Microdata   <ruby/>   WebRTC   PostMessage   HTML  Selector  API   requestAnimaZonFrame   CORS   Cross-­‐Origin   Resource  Sharing   Lots  of  CSS3  stuff   Web  Intents   XmlHtpRequest2   History  API   IndexedDB  
19. References   On  the  web:     hYp://www.w3schools.com/html5   hYp://diveintohtml5.info   hYp://html5rocks.com   If  you  want  to  fork  and  play  with  my   html5  playground  code:     hYps://code.google.com/p/html5-­‐ playground/