Presented by:

Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript

Rajesh Lal, Nokia

2

Why Mobile Apps

3 Types of Apps

How to Build Apps

3 Demos N900

When to Use Each

Agenda

Why Mobile Apps

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

"2009" "2010" "2013"0

5000

10000

15000

20000

25000

Mobile App Store Worldwide

Downloads in M Revenue in €M

€ 4.5 Billion

4

Why Mobile Apps

3 Types of Apps

How to Build Apps

3 Demos N900

When to Use Each

5

REACH

RICH

Web Apps

HybridApps

NativeApps

(on Web)

(on device)

Why Mobile Apps

3 Types of Apps

How to Build Apps

3 Demos N900

When to Use Each

6

7

Native Web

Hybrid

free content

Update is DifficultHigh development cost

Easy to develop

Self distribution

maintain

Difficult monetization

Connection required

wider market

lower development cost

No DRM

App store billing

Better functionality

RobustDevice APIs

Paid Content offline

Secure

Size limit

8

Native App Web AppHybrid App

Content HeavyFree ServiceLow cost Easy Maintenance

Example Web Apps Bank apps Social Networks Search Apps

Content HeavyWant to MonetizeLow cost

Example- Specialized Medical Apps- Map Apps

Feature HeavyPremium contentPaid CustomersPrivacy is important

Examples - Games - Location services - App using device data - Premium Media

When to Use Each Type

Why Mobile Apps

3 Types of Apps

How to Build Apps

3 Demos N900

When to Use Each

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

Browser

Qt Webkit

Hybrid

QML

NativeN900 / MeeGo

Device

APIs, audio, video, location

web

HTML5 for Web App

CSS3 in Hybrid

JavaScript{

Why Mobile Apps

3 Types of Apps

How to Build Apps

3 Demos N900

When to Use Each

12

13

Demo 1

HTML5 Web App

14

HTML 5 Powers Web App

HTML5Video

Canvas

Local Storage

Geolocationform controls

describe contentcontenteditable

Audio header, footer, nav

Validation

HTML4 / XHTML

threads

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

CSS3Gradients

Animation

Opacity

RGBA Colors@font face

Box shadow

Rounded Corners Text ShadowMultiple Background Images

Border with Images

18

Hybrid App using CSS3 and QtWebkit

CSS3 Web App

Qt Webkit

Qt Container

19

Hybrid App with CSS3

Create new Mobile Qt Application

1

20

Hybrid App with CSS3

SelectN900 PR1.3

1

21

Hybrid App with CSS3

1

22

Hybrid App with CSS3

QT += webkit networkIn Project.pro file add2

3 In mainwindow.ui , in design view add QWebView

Add location of your web app in url property

In our case add this to HybridAppCSS3.pro

23

Hybrid App with CSS3

Demo Time

24

Demo3

Native App with JavaScript and QML(In 5 steps)

25

QML = Powerful Declarative Language

QML

ShapesBased on JavaScript

Audio Video

Transitions

property bindings

JavaScript expressions

States

Image

Qt Declarative runtime

C++ BindingAnimation

26

Native App using JavaScript and QML

Qt Container

QMLJavaScript

C++ is not Required

27

JavaScript file

28

QML file

29

Native App with JavaScript and QML

Create new Mobile Qt Application NativeQMLJS1

Select N900 PR1.3

Remove files • mainwindow.ui• mainwindow.h• mainwindow.cpp

30

Native App with JavaScript and QML

QT += declarativeIn Project.pro file add2

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 resources4

Native App with JavaScript and QML

* 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

QML Plug-ins Qt Mobility APIGallery Document Gallery APILocation Location APIMultimedia API includes audio and videoService Framework

Discovering and connecting to services

Messaging Messaging , email ,sms etc

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.7import 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 } }}

Presented by:

Thank You

email rajesh.lal@nokia.com

MADDEhttp://wiki.maemo.org/MADDE/QtCreator_integration_for_windows

Qt SDKhttp://qt.nokia.com/downloads/

Qt Mobility APIhttp://doc.qt.nokia.com/qtmobility-1.1.0/qml-plugins.html

Build on N900 Now !