HTML5: Not Just for Breakfast

2,725
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,725
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • And we all know Google Loves HTML – Google Apps is a web based version of an office suite, but if that’s not enough, they also wrote a love story about HTML5And recently, on Google has been re-mixing their logo using adding HTML5 – this one is an interactive tribute to 20,000 leagues under the sea
  • Silverlight FirestarterGu, Tim Heuer, John Papa, Jesse Liberty and other cogniscenti all to try and convince everyone that MS loved Silverlight and that seemed to have worked for a while, until last week’s MVP summit where the ASP.NET team were spotted rollin like this. Anyhow Microsoft clearly loves HTML5 AND Silverlight
  • Native is for “high touch” things. Web is for low touch.
  • FaceBook supports 18 native applications – too much! Moving to HTML5… even farmville!
  • So we have 4 of the largest technology companies agreeing (to some degree) that HTML5 is the future… but
  • What IS HTML5
  • For the purposes of this talk I’t really 3
  • So if we look at a typical page layout… divs and pretty common ID’s and Classes – which mean things to you and I, but not to the machine…
  • With HTML5, we get new DOM elements, which have semantic meaning.
  • Allows computers to “understand” the content better
  • Gradients and rounded corners – help avoid using images on pages. We also have much wider support for web fonts, which now allows
  • Also WebDB – relational database in the browser.
  • As well as some other less widely implemented stuff
  • Google Body Browser in Chrome to see what this is all about.
  • So – HTML5 brings unicorsand rainbows to the world. Great… just
  • There are two things to contend with
  • The second problem is IE
  • It’s not just that IE does not support HTML5 in any meaningful way, even more important is javascript performanceSo – the latest version of IE is >5 times slower than other more modern browsers. And IE 6 and 7 are more than double that!So the simple answer has been to use Flex of Silverlight
  • Desktopvs tablets vs phones – very different screen sizes, and user xpectations
  • This alone means that you need a separate “view” for touch devices – also note that Flex on Android != same app for desktop and mobile!
  • So – what do we do? Multiple devices, form factors, javascript environments
  • Since we have different needs for different client devices, lets drop the idea that we can create ONE thing and run it everywhere – use some infrastructure to create optimized views for each device.
  • Ags2.dtsagile.com/arcstache
  • WURFL
  • Ags2.dtsagile.com/arcstache
  • 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 />

    ×