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.
NOT JUST FOR <br />BREAKFAST ANYMORE.<br />Dave Bouwman, Head Geek<br />Mike Juniper, Javascript Ninja<br />
I’ve seen the<br />FUTURE<br />and it’s my<br />BROWSER<br />
We<br />Bob Muglia, VP, Microsoft<br />
vs.<br />native <br />web<br />
Bret Taylor, CTO, FaceBook<br />
WTF?<br />
4<br />things<br />
1) SEMANTIC MARKUP<br />
<div id=“header”><br /><div id=“nav”><br /><div class=“article”><br /><div id=“sidebar”><br /><div class=“section”><br /><...
<header><br /><nav><br /><article><br /><aside><br /><section><br /><footer><br />
http://www.flickr.com/photos/benhusmann/5126029229<br />
2) CSS3<br />
Where is MAI Kitteh!<br />
DEMO<br />
3) Javascript (duh!)<br />
4) Browser Extensions<br />
Geolocation<br />Local storage<br />WebGL, Canvas*, WebWorkers, SVG*, Drag & Drop <br />Geolocation<br />http://www.flickr...
key : value<br />Local Storage<br />
Canvas & SVG<br />
WebGL<br />
Rainbows and Unicorns<br />
Die. Die. Die.<br />
tehsuk.<br />
Device Differences<br />
!=<br />Touch vs. Point<br />
Client Specific Views<br />http://www.flickr.com/photos/gray_macbook/5371234004<br />
View<br />Controller<br />ViewEngine<br />Request<br />View<br />View<br />Normal Request/Response<br />
Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Phone<br />View<br />Tablet<br />View<br />Desktop<br /...
I think in code…<br />
EsriChangeMatters<br />
Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Mobile<br />View<br />iPad<br />View<br />Desktop<br />...
CODE SCREEN CAP<br />
Demo time!<br />
WxMappr.com<br />
Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Mobile<br />View<br />iPad<br />View<br />Desktop<br />...
@media (orientation:landscape)<br />
Demo time!<br />
maps.SafeRoutesInfo.org<br />
Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Small Screen<br />View<br />Large Screen<br />View<br /...
Browser Capabilities added in CustomViews<br />
Demo time!<br />
Aw man… I hate server side code<br />
Modernizr + Jquery + partials<br />
I’ve seen the<br />FUTURE<br />and it’s my<br />BROWSER<br />
Resources & Questions<br />WxMappr.com<br />http://github.com/dtsagile<br />Maps.saferoutesinfo.org<br />
Upcoming SlideShare
Loading in …5
×

HTML5: Not Just for Breakfast

3,119 views

Published on

Presented at the 2011, Esri Developer Summit, this talk focuses on designing appropriate "experiences" for target platform - desktop, tablet or mobile, as well as how we can leverage HTML5 to do this efficiently.

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2F7hN3u ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

HTML5: Not Just for Breakfast

  1. 1. NOT JUST FOR <br />BREAKFAST ANYMORE.<br />Dave Bouwman, Head Geek<br />Mike Juniper, Javascript Ninja<br />
  2. 2. I’ve seen the<br />FUTURE<br />and it’s my<br />BROWSER<br />
  3. 3.
  4. 4. We<br />Bob Muglia, VP, Microsoft<br />
  5. 5.
  6. 6.
  7. 7.
  8. 8. vs.<br />native <br />web<br />
  9. 9. Bret Taylor, CTO, FaceBook<br />
  10. 10.
  11. 11. WTF?<br />
  12. 12. 4<br />things<br />
  13. 13. 1) SEMANTIC MARKUP<br />
  14. 14. <div id=“header”><br /><div id=“nav”><br /><div class=“article”><br /><div id=“sidebar”><br /><div class=“section”><br /><div id=“footer”><br />
  15. 15. <header><br /><nav><br /><article><br /><aside><br /><section><br /><footer><br />
  16. 16. http://www.flickr.com/photos/benhusmann/5126029229<br />
  17. 17. 2) CSS3<br />
  18. 18. Where is MAI Kitteh!<br />
  19. 19. DEMO<br />
  20. 20. 3) Javascript (duh!)<br />
  21. 21. 4) Browser Extensions<br />
  22. 22. Geolocation<br />Local storage<br />WebGL, Canvas*, WebWorkers, SVG*, Drag & Drop <br />Geolocation<br />http://www.flickr.com/photos/hendry/3642114424<br />
  23. 23. key : value<br />Local Storage<br />
  24. 24. Canvas & SVG<br />
  25. 25. WebGL<br />
  26. 26. Rainbows and Unicorns<br />
  27. 27.
  28. 28. Die. Die. Die.<br />
  29. 29.
  30. 30.
  31. 31. tehsuk.<br />
  32. 32. Device Differences<br />
  33. 33. !=<br />Touch vs. Point<br />
  34. 34.
  35. 35. Client Specific Views<br />http://www.flickr.com/photos/gray_macbook/5371234004<br />
  36. 36. View<br />Controller<br />ViewEngine<br />Request<br />View<br />View<br />Normal Request/Response<br />
  37. 37. Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Phone<br />View<br />Tablet<br />View<br />Desktop<br />View<br />UserAgent?<br />Custom ViewEngine<br />
  38. 38. I think in code…<br />
  39. 39. EsriChangeMatters<br />
  40. 40. Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Mobile<br />View<br />iPad<br />View<br />Desktop<br />View<br />Sorry!<br />HTML + Javascript<br />Flex<br />UserAgent?<br />Views<br />
  41. 41. CODE SCREEN CAP<br />
  42. 42.
  43. 43.
  44. 44. Demo time!<br />
  45. 45. WxMappr.com<br />
  46. 46. Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Mobile<br />View<br />iPad<br />View<br />Desktop<br />View<br />HTML + Javascript<br />jQueryMobile<br />HTML + Javascript<br />Orientation Aware<br />HTML + Javascript<br />UserAgent?<br />Views<br />
  47. 47. @media (orientation:landscape)<br />
  48. 48. Demo time!<br />
  49. 49. maps.SafeRoutesInfo.org<br />
  50. 50. Controller<br />Custom<br />ViewEngine<br />Request<br />View<br />Small Screen<br />View<br />Large Screen<br />View<br />HTML + Javascript<br />HTML + Javascript<br />UserAgent +<br />WURFL<br />Views<br />
  51. 51. Browser Capabilities added in CustomViews<br />
  52. 52. Demo time!<br />
  53. 53. Aw man… I hate server side code<br />
  54. 54. Modernizr + Jquery + partials<br />
  55. 55.
  56. 56.
  57. 57. I’ve seen the<br />FUTURE<br />and it’s my<br />BROWSER<br />
  58. 58. Resources & Questions<br />WxMappr.com<br />http://github.com/dtsagile<br />Maps.saferoutesinfo.org<br />

×