Building rich apps with HTML5 and friends

1,644 views

Published on

This is the presentation I gave at Gulltaggen as part of the "Three In One - Story, Technology and Team work" session: http://www.gulltaggen.no/2011/conference/day-1-12th-of-april/three-in-one-story-technology-and-team-work

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,644
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
33
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Building rich apps with HTML5 and friends

  1. 1. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  2. 2. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  3. 3. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  4. 4. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  5. 5. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  6. 6. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  7. 7. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  8. 8. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  9. 9. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  10. 10. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  11. 11. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  12. 12. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  13. 13. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  14. 14. AndreasBovensGroup Leader Developer RelationsOpera Software ASA Phone: +47 23 69 26 68Waldemar Thranes gate 98 Fax: +47 23 69 24 01P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 590131 Oslo E-mail: andreasb@opera.comNorway Web site: www.opera.com
  15. 15. building rich appswith html5 and friends
  16. 16. “we need a n app”
  17. 17. “we need a n app”
  18. 18. “we need a n app”
  19. 19. “we need a n app”
  20. 20. “we need a n app”
  21. 21. “we need a n app” etc.
  22. 22. “we need a n app” etc.
  23. 23. a web browser :-)
  24. 24. a web browser :-) tap into web standards ecosystem cross-platform no approval process available on desktop & feature phones
  25. 25. a web browser :-) “what about paid apps?”
  26. 26. a web browser :-) “what about paid apps?” “what about access to device APIs and other advanced stuff?”
  27. 27. “what about access todevice APIs and otheradvanced stuff?”
  28. 28. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3SVG viewport + media queries touch events
  29. 29. div#header div#mainContent div.post div#sidebar div.post div.post div#footer
  30. 30. <header> div#mainContent <article><nav> <article> <article> <footer>
  31. 31. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3SVG viewport + media queries touch events
  32. 32. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3SVG viewport + media queries touch events
  33. 33. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><p id="mainContent">...</p><!DOCTYPE html><meta charset=utf-8><p id=mainContent>...
  34. 34. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  35. 35. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  36. 36. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  37. 37. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  38. 38. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  39. 39. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  40. 40. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  41. 41. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  42. 42. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  43. 43. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  44. 44. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  45. 45. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3viewport + media queries SVG touch events
  46. 46. @andreasbovens
  47. 47. Credits:Wood texture by naomiyakihttp://www.flickr.com/photos/naomiyaki/4583474627/in/photostream/HTML5 poster by Will Phillips Jrhttp://sleekdesignstudio.com/html5poster/iPad image by Kevin Anderssonhttp://kevinandersson.deviantart.com/art/Apple-iPad-Fully-editable-PSD-152146899Phone icons from PSD Tuts+http://psd.tutsplus.com/freebies/icons/exclusive-freebie-mobile-phone-icon-pack/HTML5 icons from Iconscockhttp://www.iconshock.com/html5-icons/Iceberg photo by Rita Willaerthttp://www.flickr.com/photos/rietje/76566707/Twitter icon by Icondockhttp://icondock.com/free/vector-social-media-icons

×