1 / 22

HTML5 and Mobile Web Application Development

HTML5 and Mobile Web Application Development. Bio. 12+ years HTML/CSS/JavaScript. Focused on those technologies since 1999 Interface Architect at Isobar I work with cool companies- Adidas, Philips, Harvard, Gillette, Compete, Museum of Science Boston, State Street Twitter: @ robreact

leala
Download Presentation

HTML5 and Mobile Web Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 and Mobile Web Application Development

  2. Bio • 12+ years HTML/CSS/JavaScript. Focused on those technologies since 1999 • Interface Architect at Isobar • I work with cool companies- Adidas, Philips, Harvard, Gillette, Compete, Museum of Science Boston, State Street • Twitter: @robreact • Blog: htmlcssjavascript.com

  3. What is HTML5?

  4. What is HTML5? • "HTML5 is anything you want it to be as long as it's new and cool.“ – Peter Paul Koch http://www.quirksmode.org/blog/archives/2010/01/html5_means_wha.html

  5. The Web Platform • HTML5 • New Semantic elements • Video and audio • Form elements and input types • Offline Web Applications • Related Technologies • SVG • Canvas • Geolocation • Web Storage

  6. The Web Platform • WebSocket • WebGL • EcmaScript, 5th Edition (ES5) • CSS3 • 2D Transforms • 3D Transforms • CSS Animations • CSS Transitions For a full rundown on these technologies see my article HTML5, CSS3, and related technologies (http://www.ibm.com/developerworks/web/library/wa-webstandards/index.html)

  7. Add It All Up

  8. What Does That Really Mean • Much better tools for developing and deploying rich, interactive applications over the web.

  9. Front End Engineers Are Really Happy Happy Front End Engineers Group Shot! From kurafire http://www.flickr.com/photos/kurafire/4112642903/

  10. On the Desktop It’s Not Quite “The Future” Yet

  11. Although We Can (and do) Make it Work • Raphaël – SVG Support • Excanvas – Canvas Support • Amplify.js – Client Side Storage • Html5shim – New, Semantic elements • innerShiv – Dynamic Semantic elements • History.js – History API • css3pie – CSS3 Features • Flexie - Flex box support • Respond – Media Query Support • ETC

  12. And I Should Point Out… IE9 is a great browser& IE10 will be even better. Crazy Emerging Tech Demo>

  13. BUT, Still: ~50% Taking advantage of this stuff now takes dedication and a knowledgeable front end engineering team, especially if your particular audience skews toward older IE versions. Source: http://gs.statcounter.com/#browser_version-ww-monthly-201005-201105-bar

  14. Mobile is a Different Story These are REALLY Good browsers

  15. (In case you were wondering) This Will Have a Really Good Browser (that’s IE9)

  16. No Wonder We’re Excited We can now build with one common set of APIs and provide engaging experiences for iOs, Android, BlackBerry, WebOS, and Windows Phone 7 devices.

  17. Also, for better or worse iOS= (Kind of a big deal) “No Flash Photography of This Exhibit Case Please!” Leo Reynolds http://www.flickr.com/photos/lwr/12906579/

  18. We Don’t Have to Leave the Desktop Behind With an all-encompassing design approach and an intelligent implementation, your mobile web app is just a web app that works like a charm on mobile. Your potential audience just jumped from tens to hundreds of millions (or billions, depending on how global your audience is and how well you handle older versions of IE.) This is also very powerful if you’ve got a limited set of browsers/devices to target on an Intranet.

  19. Yes, There are Tools

  20. They’re Here to Help • jQuery Mobile • Dojo Mobilemobile focused versions of popular JS libraries • Sencha TouchMobile specific Model-View-Controller (MVC) platform

  21. It’s Not Perfect • You don’t have full access to the device and device APIs • “Webkit” doesn’t always what you think it means (and that’s ignoring any other mobile browser.) That means lots of testing if you’re going for broad support. • No app store

  22. But it’s Still Pretty Good …and it’s only going to get better

More Related