Building rich apps with HTML5 and friends
•
2 gostaram•646 visualizações
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
Recomendados
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
Building rich apps with HTML5 and friends
- 1. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 2. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 3. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 4. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 5. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 6. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 7. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 8. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 9. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 10. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 11. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 12. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 15. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 16. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
- 17. building rich apps with html5 and friends
- 18. “we need a n app”
- 19. “we need a n app”
- 20. “we need a n app”
- 21. “we need a n app”
- 22. “we need a n app”
- 23. “we need a n app” etc.
- 24. “we need a n app” etc.
- 25. a web browser :-)
- 26. a web browser :-) tap into web standards ecosystem cross-platform no approval process available on desktop & feature phones
- 27. a web browser :-) “what about paid apps?”
- 28. a web browser :-) “what about paid apps?” “what about access to device APIs and other advanced stuff?”
- 29. “what about access to device APIs and other advanced stuff?”
- 33. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 SVG viewport + media queries touch events
- 34. div#header div#mainContent div.post div #sidebar div.post div.post div#footer
- 35. <header> div#mainContent <article> <nav> <article> <article> <footer>
- 36. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 SVG viewport + media queries touch events
- 37. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 SVG viewport + media queries touch events
- 38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.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>...
- 39. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 viewport + 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 CSS3 viewport + 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 CSS3 viewport + 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 CSS3 viewport + 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 CSS3 viewport + 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 CSS3 viewport + 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 CSS3 viewport + media queries SVG touch events
- 46. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 viewport + media queries SVG touch events
- 47. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 viewport + media queries SVG touch events
- 48. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 viewport + media queries SVG touch events
- 49. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 viewport + media queries SVG touch events
- 50. new elements easier coding + error handling improved web forms built-in video & audio canvas offline capabilities native webcam orientation events geolocation CSS3 viewport + media queries SVG touch events
- 52. @andreasbovens
- 53. Credits: Wood texture by naomiyaki http://www.flickr.com/photos/naomiyaki/4583474627/in/photostream/ HTML5 poster by Will Phillips Jr http://sleekdesignstudio.com/html5poster/ iPad image by Kevin Andersson http://kevinandersson.deviantart.com/art/Apple-iPad-Fully-editable- PSD-152146899 Phone icons from PSD Tuts+ http://psd.tutsplus.com/freebies/icons/exclusive-freebie-mobile-phone- icon-pack/ HTML5 icons from Iconscock http://www.iconshock.com/html5-icons/ Iceberg photo by Rita Willaert http://www.flickr.com/photos/rietje/76566707/ Twitter icon by Icondock http://icondock.com/free/vector-social-media-icons