Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Html5 Apps

on

  • 2,479 views

Slides of talk I gave at appworks in Oslo

Slides of talk I gave at appworks in Oslo

Statistics

Views

Total Views
2,479
Views on SlideShare
2,478
Embed Views
1

Actions

Likes
6
Downloads
60
Comments
0

1 Embed 1

https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Apps Html5 Apps Presentation Transcript

  • HTML5 Apps Appworks 2010 Oslo Nikolai Onken uxebu Friday, October 29, 2010
  • Friday, October 29, 2010
  • @nonken Friday, October 29, 2010
  • Friday, October 29, 2010
  • We open the mobile web. Friday, October 29, 2010
  • Friday, October 29, 2010
  • JavaScript AJAX FrontEnd Usability UserExperience CSS mobile Browser Web2.0 dojo TouchScroll OpenSource Friday, October 29, 2010
  • Friday, October 29, 2010
  • Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  • Landscape http://www.flickr.com/photos/tillwe/146242691/ Friday, October 29, 2010
  • 30th July 2009 14 Stores http://bit.ly/distimo-appstores Friday, October 29, 2010
  • 30th July 2009 14 Stores 23rd September 2009 23 Stores http://bit.ly/distimo-appstores Friday, October 29, 2010
  • 30th July 2009 14 Stores 23rd September 2009 23 Stores 2nd December 2009 26 Stores http://bit.ly/distimo-appstores Friday, October 29, 2010
  • October 2010 96 Apptores - WOA http://www.wipconnector.com/appstores Friday, October 29, 2010
  • Cross Platform Friday, October 29, 2010
  • Friday, October 29, 2010
  • Objective-C Friday, October 29, 2010
  • Objective-C Symbian C Friday, October 29, 2010
  • Objective-C Symbian C Java Friday, October 29, 2010
  • Objective-C Symbian C Java Java Friday, October 29, 2010
  • Objective-C Symbian C Java Java .NET Friday, October 29, 2010
  • Objective-C Symbian C Java Java .NET ... Friday, October 29, 2010
  • HTML Friday, October 29, 2010
  • Engine of the web http://www.flickr.com/photos/robadob/88901885/ Friday, October 29, 2010
  • iPhone - First usable mobile browser http://www.flickr.com/photos/chris_radcliff/2947219465/ Friday, October 29, 2010
  • http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/ Friday, October 29, 2010
  • Friday, October 29, 2010
  • http://bit.ly/tomiahonen-2010-almanac Friday, October 29, 2010
  • 71% of all phones have a modern xTML web browser. http://bit.ly/tomiahonen-2010-almanac Friday, October 29, 2010
  • App Store without Apple! Friday, October 29, 2010
  • Your Appshop facts Friday, October 29, 2010
  • Your Appshop facts • 100% HTML5 Friday, October 29, 2010
  • Your Appshop facts • 100% HTML5 • Apps work offline Friday, October 29, 2010
  • Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 Friday, October 29, 2010
  • Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway Friday, October 29, 2010
  • Your Appshop facts • 100% HTML5 • Apps work offline • 43.000.000 downloads since december 2009 • Payment gateway • It feels native Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • What is a HTML5 App? Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • } Friday, October 29, 2010
  • }? Friday, October 29, 2010
  • Types of "Apps" Friday, October 29, 2010
  • Types of "Apps" • Preinstalled Friday, October 29, 2010
  • Types of "Apps" • Preinstalled • Native App (from "some" app store) Friday, October 29, 2010
  • Types of "Apps" • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources Friday, October 29, 2010
  • Types of "Apps" • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources • HTML5 App access by a capable runtime Friday, October 29, 2010
  • Friday, October 29, 2010
  • Layout index.html Friday, October 29, 2010
  • Layout index.html Design style.css Friday, October 29, 2010
  • Layout index.html Design style.css AJAX Library Friday, October 29, 2010
  • Layout index.html Design style.css AJAX Library Database Friday, October 29, 2010
  • PhoneGap Friday, October 29, 2010
  • PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Friday, October 29, 2010
  • PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Friday, October 29, 2010
  • PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Friday, October 29, 2010
  • http://phonegap.pbworks.com/Roadmap Friday, October 29, 2010
  • PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Friday, October 29, 2010
  • PhoneGap Chromeless Browser browser.eval(“document.geolocation...”) Low level APIs Camera Accelerometer Push Notifications ... Friday, October 29, 2010
  • Device support Friday, October 29, 2010
  • Pros Cons Friday, October 29, 2010
  • Pros Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • Pros • Good browsers Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • Pros • Good browsers • Many device APIs Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • Pros • Good browsers • Many device APIs • Extendable webview in most cases Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • Pros • Good browsers • Many device APIs • Extendable webview in most cases • Open source Cons • Not a standard (but based on standards) Friday, October 29, 2010
  • W3C Widgets Friday, October 29, 2010
  • Layout index.html Design style.css AJAX Library Database Friday, October 29, 2010
  • Layout index.html Design style.css AJAX Library Database Friday, October 29, 2010
  • Layout index.html Design style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • Layout index.html Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • Layout index.html = Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • Layout index.html W3C Widget = Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • What is a W3C Widget? Friday, October 29, 2010
  • What is a W3C Widget? Friday, October 29, 2010
  • What is a W3C Widget? • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Friday, October 29, 2010
  • Devices? ...yes Friday, October 29, 2010
  • Pros Cons Friday, October 29, 2010
  • Pros Cons • Only few device APIs Friday, October 29, 2010
  • Pros Cons • Only few device APIs • No possibility to introduce custom APIs Friday, October 29, 2010
  • Pros Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • Pros • Very simple to create Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • Pros • Very simple to create • Easy to test Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • Pros • Very simple to create • Easy to test • For certain application usecaes the Cons • Only few device APIs • No possibility to introduce custom APIs • Sometimes annoying browser quirks Friday, October 29, 2010
  • Other runtimes? Friday, October 29, 2010
  • Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • Runtimes Nokia S60 • JIL Spechttp://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ iPhone • W3C Spec http://w3.org/2009/dap/ Android • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ Windows Mobile Friday, October 29, 2010
  • Almost for free Friday, October 29, 2010
  • Almost for free • Facebook widget Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Friday, October 29, 2010
  • A Phone is ... Friday, October 29, 2010
  • http://www.flickr.com/photos/kratz/1984004945/ Friday, October 29, 2010
  • http://www.flickr.com/photos/mbiddulph/3087388964/ Friday, October 29, 2010
  • http://www.flickr.com/photos/redstamp/4222841946/ Friday, October 29, 2010
  • • Camera • Compass • GPS • Accelerometer • Calendar • Email • Address book • Watch • Alarm clock • ... Friday, October 29, 2010
  • Multiple Ways • W3C Spec http://w3.org/2009/dap/ • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • Your own Spec :) http://phonegap.com/ Friday, October 29, 2010
  • Cross Platform? Friday, October 29, 2010
  • EventNinja Friday, October 29, 2010
  • Layout index.html Design Icon style.css Configuration AJAX Library config.xml Database Friday, October 29, 2010
  • Layout index.html Design Icon style.css Database Configuration AJAX Library config.xml Friday, October 29, 2010
  • Events, Layout index.html a Calendar Design Icon style.css Database Configuration AJAX Library config.xml Friday, October 29, 2010
  • http://bit.ly/webdev-events Friday, October 29, 2010
  • http://bit.ly/webdev-events Friday, October 29, 2010
  • http://bit.ly/webdev-events Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Testing Friday, October 29, 2010
  • Best Practices Friday, October 29, 2010
  • Best Practices • test on the desktop Friday, October 29, 2010
  • Best Practices • test on the desktop • test on the desktop Friday, October 29, 2010
  • Best Practices • test on the desktop • test on the desktop • test on the desktop Friday, October 29, 2010
  • Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot Friday, October 29, 2010
  • Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot • alert() IS your friend! Friday, October 29, 2010
  • Best Practices • test on the desktop • test on the desktop • test on the desktop • try-catch a lot • alert() IS your friend! • simplify your CSS Friday, October 29, 2010
  • Ripple Friday, October 29, 2010
  • Libraries Friday, October 29, 2010
  • What is out there? Friday, October 29, 2010
  • What is out there? •XUI Friday, October 29, 2010
  • What is out there? •XUI •Sencha Touch Friday, October 29, 2010
  • What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) Friday, October 29, 2010
  • What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) •Dojo mobile Friday, October 29, 2010
  • What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS Friday, October 29, 2010
  • What is out there? •XUI •Sencha Touch •jQuery Mobile (coming) •Dojo mobile •EmbedJS •... Friday, October 29, 2010
  • EmbedJS an approach to cross platform development Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • The Supported Devices ... and there will be more to embed JavaScript on Friday, October 29, 2010
  • http://www.flickr.com/photos/tacoekkel/25538919/ Friday, October 29, 2010
  • http://www.flickr.com/photos/hugo90/3916794427/ Friday, October 29, 2010
  • Shrink Your API 20kB 8kB Friday, October 29, 2010
  • Simple queries > simple library function Only ".class" and "#id" queries Friday, October 29, 2010
  • Simple queries > simple library function Only ".class" and "#id" queries vs. Friday, October 29, 2010
  • Simple queries > simple library function Only ".class" and "#id" queries vs. Full fledged queries > Full blown library function Friday, October 29, 2010
  • 13 LOC Simple queries > simple library function Only ".class" and "#id" queries vs. Full fledged queries > Full blown library function ~200 LOC Friday, October 29, 2010
  • Friday, October 29, 2010
  • At Runtime At Build Time Friday, October 29, 2010
  • dojo-blackberry.js dojo-blackberry46.js dojo-nokia-wrt.js dojo-opera.js dojo-webkit-mobile.js dojo-windows-mobile.js Friday, October 29, 2010
  • Tooling Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • Friday, October 29, 2010
  • The future Friday, October 29, 2010
  • HumanApi Friday, October 29, 2010
  • HumanApi • The browser accessing hardware Friday, October 29, 2010
  • HumanApi • The browser accessing hardware • Reading your heartrate Friday, October 29, 2010
  • HumanApi • The browser accessing hardware • Reading your heartrate • All JavaScript/HTML/CSS Friday, October 29, 2010
  • http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/ Friday, October 29, 2010
  • http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/ Friday, October 29, 2010
  • Turn on the lights Friday, October 29, 2010
  • Turn on the lights • http://github.com/nonken/arduinojs Friday, October 29, 2010
  • thank you http://uxebu.com Nikolai Onken, uxebu nikolai@uxebu.com @uxebu @nonken Friday, October 29, 2010