html5 apps cross platform - swdc 2010, stockholm
Post on 15-Jan-2015
4.318 Views
Preview:
DESCRIPTION
TRANSCRIPT
App vs. Widget
HTML5 AppsWolfram Kriesing
uxebu
Donnerstag, 3. Juni 2010
We open the mobile web.
Donnerstag, 3. Juni 2010
JavaScript AJAX
CSS
dojoBrowser
OpenSourceWeb2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 3. Juni 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Donnerstag, 3. Juni 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores2nd December 2009
26 Stores
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Objective-C JavaSymbian C
.NETJava ...
Donnerstag, 3. Juni 2010
Cross Platform
Donnerstag, 3. Juni 2010
HTML
Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Donnerstag, 3. Juni 2010
Photos
Videos
Docs
Apps
Donnerstag, 3. Juni 2010
Why Widgets?
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Donnerstag, 3. Juni 2010
App Store without Apple!
Donnerstag, 3. Juni 2010
What is a Widget?
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
}?
Donnerstag, 3. Juni 2010
Database
Designstyle.css
Layoutindex.html
AJAX Library
Donnerstag, 3. Juni 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
W3C Widget =Icon
Donnerstag, 3. Juni 2010
What is a W3C Widget?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
• rename to *.wgt
Donnerstag, 3. Juni 2010
DONE!http://www.flickr.com/photos/sundazed/2704578067/
Donnerstag, 3. Juni 2010
Tools?
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
On any phone?
Donnerstag, 3. Juni 2010
HTML
native
Donnerstag, 3. Juni 2010
HTML
native
Donnerstag, 3. Juni 2010
HTML
native
W3C Widgets
native
Donnerstag, 3. Juni 2010
...yes
W3C Widgets
not purely
but greatHTML
support
Donnerstag, 3. Juni 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Donnerstag, 3. Juni 2010
A Phone is ...
Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/kratz/1984004945/
Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/redstamp/4222841946/
Donnerstag, 3. Juni 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Address book
• Watch
• Alarm clock
• ...
Donnerstag, 3. Juni 2010
Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL Spechttp://www.jil.org/
• BONDI Spechttp://bondi.omtp.org/
Donnerstag, 3. Juni 2010
http://bit.ly/vf-jil-docs
System Info
Network Info
Phone Info
File
GPS
Contacts
Camera
Audio
SMS, MMS, ...
Donnerstag, 3. Juni 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, 3. Juni 2010
Platform adaptations
Business andApplication logic
confi
g.xml
PhoneG
ap
info.plist
Android
iP****
Nokia WRT
pure W3CWidgets
kinda W3CWidgets
Donnerstag, 3. Juni 2010
PhoneGap"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Donnerstag, 3. Juni 2010
http://phonegap.pbworks.com/Roadmap
Donnerstag, 3. Juni 2010
Some numbers
•iPhone App = 364 kB
•JavaScript, HTML, CSS, media = 124 kB
•PhoneGap+SDK = 240 kB
Donnerstag, 3. Juni 2010
Dojo mobile
Donnerstag, 3. Juni 2010
Two approaches
http://github.com/wolframkriesing/dojo-mobilecustom, simplest build script
http://github.com/klipstein/dojo-mobileusing require.js
Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/tacoekkel/25538919/
Donnerstag, 3. Juni 2010
http://www.flickr.com/photos/hugo90/3916794427/
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
build.sh
Donnerstag, 3. Juni 2010
dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Donnerstag, 3. Juni 2010
EventNinja
Donnerstag, 3. Juni 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Events,a Calendar
Donnerstag, 3. Juni 2010
http://bit.ly/webdev-events
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
Donnerstag, 3. Juni 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Donnerstag, 3. Juni 2010
Want to see it in action?
Download it from your store.
Contact us.
Donnerstag, 3. Juni 2010
thx
http://uxebu.com
Wolfram Kriesing, uxebu
wolfram@uxebu.comhttp://twitter.com/uxebu
http://twitter.com/wolframkriesing
Donnerstag, 3. Juni 2010
top related