Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010

Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript
Rajesh Lal, Nokia

2
Agenda
3 Demos N900
How to Build Apps
When to Use Each
3 Types of Apps
Why Mobile Apps

Why Mobile Apps
€ 4.5 Billion
€4.5 Billion: Consumers will spend in Mobile App Stores in 2010
Source Gartner: http://www.gartner.com/it/page.jsp?id=1282413

4
3 Demos N900
How to Build Apps
When to Use Each
3 Types of Apps
Why Mobile Apps

5
REACH
Web
Apps
(on Web)
Hybrid
Apps
Native
Apps
RICH
(on device)

3 Demos N900
How to Build Apps
When to Use Each
3 Types of Apps
Why Mobile Apps
6

7
Hybrid
Self distribution
App store billing
Secure
Easy to develop
maintain
Robust
Native
Web
wider market
Device APIs
Paid Content
offline
free content
lower development cost
Better functionality
Connection required
Size limit
Update is Difficult
No DRM
High development cost
Difficult monetization

8
When to Use Each Type
Web App
Native App
Hybrid App
Content Heavy
Want to Monetize
Low cost
Example
- Specialized Medical Apps
- Map Apps
Feature Heavy
Premium content
Paid Customers
Privacy is important
Examples
- Games
- Location services
- App using device data
- Premium Media
Content Heavy
Free Service
Low cost
Easy Maintenance
Example Web Apps
Bank apps
Social Networks
Search Apps

3 Demos N900
How to Build Apps
When to Use Each
3 Types of Apps
Why Mobile Apps
9

10
How to Build Mobile Apps
MeeGo is fully compatible to HTML5 & Qt
Nokia Qt SDK For Maemo/MeeGo
Works on Linux, Windows and Mac
Cross Compilation
MADDE
(Maemo App. Development & Debugging Env.)
Start Developing on N900 NOW !

11
HTML5 for Web App
web
{
Browser
CSS3 in Hybrid
Hybrid
Qt Webkit
JavaScript
Native
QML
Device
APIs, audio, video, location
N900 / MeeGo

3 Demos N900
How to Build Apps
When to Use Each
3 Types of Apps
Why Mobile Apps
12

13
Demo 1
HTML5 Web App

14
HTML 5 Powers Web App
Canvas
Validation
form controls
Video
threads
HTML5
Geolocation
HTML4 / XHTML
describe content
contenteditable
header, footer, nav
Audio
Local Storage

15
Demo 1: HTML 5 Web App
Demo Time

16
Demo 2
Hybrid App with CSS3
(In 3 steps)

17
CSS3 = Amazing styles and Animations
Animation
Gradients
@font face
RGBA Colors
CSS3
Border with Images
Text Shadow
Rounded Corners
Multiple Background Images
Box shadow
Opacity

18
Hybrid App using CSS3 and QtWebkit

19
Create new
Mobile Qt
Application
1

20
Select
N900 PR1.3
1

21
1

22
QT += webkit network
In Project.pro file add
2
In our case add this to
HybridAppCSS3.pro
3
In mainwindow.ui , in design view add QWebView
Add location of your web app in urlproperty

23
Demo Time

24
Demo3
Native App with JavaScript and QML
(In 5 steps)

25
QML = Powerful Declarative Language
Based on JavaScript
Shapes
property bindings
States
QML
Transitions
Animation
C++ Binding
Image
JavaScript expressions
Qt Declarative runtime
Audio Video

26
Native App using JavaScript and QML
Qt Container
JavaScript
QML
C++ is not Required

27
JavaScript file

28
QML file

29
Create new Mobile Qt Application NativeQMLJS
1
Select N900 PR1.3
Remove files
mainwindow.ui
mainwindow.h
mainwindow.cpp

30
QT += declarative
In Project.pro file add
2
In our case add this to
NativeQMLJS.pro
3
In main.cpp, include QtDeclarative and add the code

31
Add QML file and JavaScript File as resources
4
* Make sure your JavaScript file name is lowercase
Add the binding in QML file and call JavaScript
5
import "clock.js" as MyClock
…
Text {
id:txttime
text: MyClock.gettime()
}

32
Native App with QML & JavaScript
Demo Time

33
Mobility QML Plug-ins

34
Multimedia QML Plugins
import Qt 4.7
import QtMultimediaKit 1.1
...
Audio {
id: myMedia
source: “beethoven.wav"
}
MouseArea {
id: playArea
anchors.fill: parent
onPressed: { myMedia.play() }
}

35
Location QML Plugins
import Qt 4.7
import QtMobility.location 1.1
Rectangle {
width: 500
height: 500
focus: true
Map {
id: myMap
size.width: parent.width
size.height: parent.height
zoomLevel: 5
center: Coordinate {
latitude: 101
longitude: 202
}
}
}

Thank You
Build on N900 Now !
MADDE
http://wiki.maemo.org/MADDE/QtCreator_integration_for_windows
Qt SDK
http://qt.nokia.com/downloads/
Qt Mobility API
http://doc.qt.nokia.com/qtmobility-1.1.0/qml-plugins.html
email rajesh.lal@nokia.com

http://irajeshlal.blogspot.com	433
http://nundefined.tistory.com	251
http://blogs.in.nokia.com	165
http://aakanshaindia.blogspot.com	124
http://blog.nundefined.com	60
http://irajeshlal.blogspot.co.uk	6
http://us-w1.rockmelt.com	4
http://irajeshlal.blogspot.in	4
http://twitter.com	4
http://qa.yesengage.kineticglue.com	3
http://static.slidesharecdn.com	3
http://irajeshlal.blogspot.de	2
http://aakansha.co.in	1
http://irajeshlal.blogspot.com.br	1
http://buzzgamesnews.blogspot.com	1

Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010

by Raj Lal on Nov 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 1,062

Statistics

Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010 — Presentation Transcript