Building rich apps with HTML5 and friends

  • 1,292 views
Uploaded on

This is the presentation I gave at Gulltaggen as part of the "Three In One - Story, Technology and Team work" session: …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,292
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
31
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. building rich appswith html5 and friends
  • 16. “we need a n app”
  • 17. “we need a n app”
  • 18. “we need a n app”
  • 19. “we need a n app”
  • 20. “we need a n app”
  • 21. “we need a n app” etc.
  • 22. “we need a n app” etc.
  • 23. a web browser :-)
  • 24. a web browser :-) tap into web standards ecosystem cross-platform no approval process available on desktop & feature phones
  • 25. a web browser :-) “what about paid apps?”
  • 26. a web browser :-) “what about paid apps?” “what about access to device APIs and other advanced stuff?”
  • 27. “what about access todevice APIs and otheradvanced stuff?”
  • 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. div#header div#mainContent div.post div#sidebar div.post div.post div#footer
  • 30. <header> div#mainContent <article><nav> <article> <article> <footer>
  • 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. 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. <!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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. @andreasbovens
  • 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