build amazing mobile apps using html5, css3 and javascript - - meego conference dublin, ireland...
TRANSCRIPT
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
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
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{
14
HTML 5 Powers Web App
HTML5Video
Canvas
Local Storage
Geolocationform controls
describe contentcontenteditable
Audio header, footer, nav
Validation
HTML4 / XHTML
threads
17
CSS3 = Amazing styles and Animations
CSS3Gradients
Animation
Opacity
RGBA Colors@font face
Box shadow
Rounded Corners Text ShadowMultiple Background Images
Border with Images
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
25
QML = Powerful Declarative Language
QML
ShapesBased on JavaScript
Audio Video
Transitions
property bindings
JavaScript expressions
States
Image
Qt Declarative runtime
C++ BindingAnimation
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()}
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 [email protected]
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 !