Download pdf - HTML5 Apps - Mobile Developer Summit Bangalore

HTML5 Apps

The mobile web taking over!

@wolframkriesing

@uxebu

Donnerstag, 11. November 2010

We open the mobile web.

@wolframkriesing


http://www.flickr.com/photos/andresrueda/2276197032/


http://www.flickr.com/photos/cmoi/760513848/








JavaScript AJAX

CSS

dojoBrowser

OpenSourceWeb2.0

FrontEnd

Usability UserExperience

mobile

TouchScroll



HTML5 Apps

W3C Widgets

universal apps

Hybrid Apps

Mobile Web Apps

anyware

WebWorks

360 Apps

Cross Platform Mobile Apps

Opera Widgets



Landscapehttp://www.flickr.com/photos/tillwe/146242691/


http://bit.ly/distimo-appstores


Landscapehttp://www.flickr.com/photos/tillwe/146242691/





30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores




Objective-C JavaSymbian C

.NETJava ...


€€

€€

€

€€€...


HTML


http://www.flickr.com/photos/robadob/88901885/

Engine of the web




€


€Web Technologies






App Store

without Apple!

App Store

without Apple!


Real Use Case:

EventNinja




http://bit.ly/webdev-events




•CSS•Help Button •Back Button•Next Page Arrow•Scrolling Area

iPhone vs. WebOS


Facts

• 3 Months Investigation

• 6 SDKs (10GB?, VMs, ...)

• 6 ways to find bugs

• 6 App Stores (Account, Submit, Review, ...)










A Phone is ...


http://www.flickr.com/photos/kratz/1984004945/




http://www.flickr.com/photos/mbiddulph/3087388964/




http://www.flickr.com/photos/redstamp/4222841946/




• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...


Multiple Ways

• W3C Spechttp://w3.org/2009/dap/

• JIL Spec / WAChttp://www.jil.org http://www.wholesaleappcommunity.com

• BONDI Spechttp://bondi.omtp.org/


http://dev.w3.org/2006/waf/widgets-api/

http://dev.w3.org/2006/waf/widgets-api/

http://www.jil.org

http://www.jil.org

http://bondi.omtp.org

http://bondi.omtp.org

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Audio

SMS, MMS, ...




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");}


PhoneGap"An express goal of the PhoneGap project

is for the project to not exist."

Open Source


http://phonegap.pbworks.com/Roadmap




Platform adaptations

Business andApplication logic

confi

g.xml

PhoneGap

info.plist

Android

iP****

Nokia WRT

pure W3CWidgets

kinda W3CWidgets


Some numbers

240 kB

124 kB

JavaScript, HTML, CSS, etc.PhoneGap

native App = 364 kB


EmbedJS


The Supported Devices

... and there will be more

to embed JavaScript on


http://www.flickr.com/photos/tacoekkel/25538919/




http://www.flickr.com/photos/hugo90/3916794427/




Shrink Your API

20kB 8kB


vs.

Simple queries > simple library functionOnly ".class" and "#id" queries

Full fledged queries > Full blown library function


vs.

Simple queries > simple library functionOnly ".class" and "#id" queries

Full fledged queries > Full blown library function

13 LOC

~200 LOC



At Runtime

At Build Time


dojo-blackberry.js

dojo-blackberry46.js

dojo-nokia-wrt.js

dojo-opera.js

dojo-webkit-mobile.js

dojo-windows-mobile.js


Wolfram Kriesing

http://apparat.io

http://embedjs.org

Thank you
