NOT JUST FOR BREAKFAST ANYMORE.Dave Bouwman, Head GeekMike Juniper, Javascript Ninja
I’ve seen theFUTUREand it’s myBROWSER
WeBob Muglia, VP, Microsoft
vs.native web
Bret Taylor, CTO, FaceBook
WTF?
4things
1) SEMANTIC MARKUP
<div id=“header”><div id=“nav”><div class=“article”><div id=“sidebar”><div class=“section”><div id=“footer”>
<header><nav><article><aside><section><footer>
http://www.flickr.com/photos/benhusmann/5126029229
2) CSS3
Where is MAI Kitteh!
DEMO
3) Javascript (duh!)
4) Browser Extensions
GeolocationLocal storageWebGL, Canvas*, WebWorkers, SVG*, Drag & Drop Geolocationhttp://www.flickr.com/photos/hendry/3642114424
key : valueLocal Storage
Canvas & SVG
WebGL
Rainbows and Unicorns
Die. Die. Die.
tehsuk.
Device Differences
!=Touch vs. Point
Client Specific Viewshttp://www.flickr.com/photos/gray_macbook/5371234004
ViewControllerViewEngineRequestViewViewNormal Request/Response
ControllerCustomViewEngineRequestViewPhoneViewTabletViewDesktopViewUserAgent?Custom ViewEngine
I think in code…
EsriChangeMatters
ControllerCustomViewEngineRequestViewMobileViewiPadViewDesktopViewSorry!HTML + JavascriptFlexUserAgent?Views
CODE SCREEN CAP
Demo time!
WxMappr.com
ControllerCustomViewEngineRequestViewMobileViewiPadViewDesktopViewHTML + JavascriptjQueryMobileHTML + JavascriptOrientation AwareHTML + JavascriptUserAgent?Views
@media (orientation:landscape)
Demo time!
maps.SafeRoutesInfo.org
ControllerCustomViewEngineRequestViewSmall ScreenViewLarge ScreenViewHTML + JavascriptHTML + JavascriptUserAgent +WURFLViews
Browser Capabilities added in CustomViews
Demo time!
Aw man… I hate server side code
Modernizr + Jquery + partials
I’ve seen theFUTUREand it’s myBROWSER
Resources & QuestionsWxMappr.comhttp://github.com/dtsagileMaps.saferoutesinfo.org

HTML5: Not Just for Breakfast

Editor's Notes

  • #4 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
  • #7 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
  • #9 Native is for “high touch” things. Web is for low touch.
  • #10 FaceBook supports 18 native applications – too much! Moving to HTML5… even farmville!
  • #11 So we have 4 of the largest technology companies agreeing (to some degree) that HTML5 is the future… but
  • #12 What IS HTML5
  • #13 For the purposes of this talk I’t really 3
  • #15 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…
  • #16 With HTML5, we get new DOM elements, which have semantic meaning.
  • #17 Allows computers to “understand” the content better
  • #19 Gradients and rounded corners – help avoid using images on pages. We also have much wider support for web fonts, which now allows
  • #24 Also WebDB – relational database in the browser.
  • #25 As well as some other less widely implemented stuff
  • #26 Google Body Browser in Chrome to see what this is all about.
  • #27 So – HTML5 brings unicorsand rainbows to the world. Great… just
  • #28 There are two things to contend with
  • #29 The second problem is IE
  • #32 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 &gt;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
  • #33 Desktopvs tablets vs phones – very different screen sizes, and user xpectations
  • #34 This alone means that you need a separate “view” for touch devices – also note that Flex on Android != same app for desktop and mobile!
  • #35 So – what do we do? Multiple devices, form factors, javascript environments
  • #36 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.
  • #49 Ags2.dtsagile.com/arcstache
  • #52 WURFL
  • #53 Ags2.dtsagile.com/arcstache