html5 apps - mobile developer summit bangalore
DESCRIPTION
This presentation gives an overview of how we build HTML5 Apps and where you can go with them currently.TRANSCRIPT
HTML5 Apps
The mobile web taking over!
@wolframkriesing
@uxebu
Donnerstag, 11. November 2010
We open the mobile web.
@wolframkriesing
Donnerstag, 11. November 2010
http://www.flickr.com/photos/andresrueda/2276197032/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/cmoi/760513848/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/cmoi/760513848/
Donnerstag, 11. November 2010
JavaScript AJAX
CSS
dojoBrowser
OpenSourceWeb2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
HTML5 Apps
W3C Widgets
universal apps
Hybrid Apps
Mobile Web Apps
anyware
WebWorks
360 Apps
Cross Platform Mobile Apps
Opera Widgets
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 11. November 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 11. November 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores2nd December 2009
26 Stores
Donnerstag, 11. November 2010
Objective-C JavaSymbian C
.NETJava ...
Donnerstag, 11. November 2010
€€
€€
€
€€€...
Donnerstag, 11. November 2010
HTML
Donnerstag, 11. November 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Donnerstag, 11. November 2010
€
Donnerstag, 11. November 2010
€Web Technologies
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
App Store
without Apple!
App Store
without Apple!
Donnerstag, 11. November 2010
Real Use Case:
EventNinja
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
http://bit.ly/webdev-events
Donnerstag, 11. November 2010
•CSS•Help Button •Back Button•Next Page Arrow•Scrolling Area
iPhone vs. WebOS
Donnerstag, 11. November 2010
Facts
• 3 Months Investigation
• 6 SDKs (10GB?, VMs, ...)
• 6 ways to find bugs
• 6 App Stores (Account, Submit, Review, ...)
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
A Phone is ...
Donnerstag, 11. November 2010
http://www.flickr.com/photos/kratz/1984004945/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/redstamp/4222841946/
Donnerstag, 11. November 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Address book
• Watch
• Alarm clock
• ...
Donnerstag, 11. November 2010
Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL Spec / WAChttp://www.jil.org http://www.wholesaleappcommunity.com
• BONDI Spechttp://bondi.omtp.org/
Donnerstag, 11. November 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
SMS, MMS, ...
Donnerstag, 11. November 2010
if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging");}
var player = Widget.Multimedia.AudioPlayer;player.open("myAudioFile.mp3");player.play(1);
if (Widget.Device.RadioInfo.isRoaming){ alert("Money Money Money");}
Donnerstag, 11. November 2010
PhoneGap"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Donnerstag, 11. November 2010
http://phonegap.pbworks.com/Roadmap
Donnerstag, 11. November 2010
Platform adaptations
Business andApplication logic
confi
g.xml
PhoneGap
info.plist
Android
iP****
Nokia WRT
pure W3CWidgets
kinda W3CWidgets
Donnerstag, 11. November 2010
Some numbers
240 kB
124 kB
JavaScript, HTML, CSS, etc.PhoneGap
native App = 364 kB
Donnerstag, 11. November 2010
EmbedJS
Donnerstag, 11. November 2010
The Supported Devices
... and there will be more
to embed JavaScript on
Donnerstag, 11. November 2010
http://www.flickr.com/photos/tacoekkel/25538919/
Donnerstag, 11. November 2010
http://www.flickr.com/photos/hugo90/3916794427/
Donnerstag, 11. November 2010
Shrink Your API
20kB 8kB
Donnerstag, 11. November 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Full fledged queries > Full blown library function
Donnerstag, 11. November 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Full fledged queries > Full blown library function
13 LOC
~200 LOC
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
At Runtime
At Build Time
Donnerstag, 11. November 2010
dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Donnerstag, 11. November 2010
Wolfram Kriesing
http://apparat.io
http://embedjs.org
Thank you
Donnerstag, 11. November 2010