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 2010
Source Gartner: http://www.gartner.com/it...
4
Why Mobile Apps
3 Types of Apps
How to Build Apps
3 Demos N900
When to Use Each
5
REACH
RICH
Web
Apps
Hybrid
Apps
Native
Apps
(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 Difficult
High development cost
Easy to develop
Self distribution
maintain
Diff...
8
Native App Web AppHybrid App
Content Heavy
Free Service
Low cost
Easy Maintenance
Example Web Apps
Bank apps
Social Netw...
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, Windo...
11
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
HTML5
Video
Canvas
Local Storage
Geolocation
form controls
describe contentcontenteditable
Audio ...
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
CSS3
Gradients
Animation
Opacity
RGBA Colors
@font face
Box shadow
Rounded Corners...
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
Select
N900 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 ...
23
Hybrid App with CSS3
Demo Time
24
Demo3
Native App with JavaScript and QML
(In 5 steps)
25
QML = Powerful Declarative Language
QML
Shapes
Based on JavaScript
Audio Video
Transitions
property bindings
JavaScript...
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
• mainw...
30
Native App with JavaScript and QML
QT += declarativeIn Project.pro file add2
In our case add this to
NativeQMLJS.pro
3 ...
31
Add QML file and JavaScript File as resources4
Native App with JavaScript and QML
* Make sure your JavaScript file name...
32
Native App with QML & JavaScript
Demo Time
33
Mobility QML Plug-ins
QML Plug-ins Qt Mobility API
Gallery Document Gallery API
Location Location API
Multimedia API in...
34
Multimedia QML Plugins
import Qt 4.7
import QtMultimediaKit 1.1
...
Audio {
id: myMedia
source: “beethoven.wav"
}
Mouse...
35
Location QML Plugins
import Qt 4.7
import QtMobility.location 1.1
Rectangle {
width: 500
height: 500
focus: true
Map {
...
Presented by:
Thank You
email rajesh.lal@nokia.com
MADDE
http://wiki.maemo.org/MADDE/QtCreator_integration_for_windows
Qt ...
Nächste SlideShare
Wird geladen in …5
×

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

17.404 Aufrufe

Veröffentlicht am

Learn how to build amazing Mobile Apps using HTML5, CSS#, and JavaScript in MeeGo - Rajesh Lal

Veröffentlicht in: Technologie
  • Njce! Thanks for sharing.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Good share Raj! Could do with a few updates now though :)
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • The Mobile App Masterplan: Learn how to make excellent money selling apps and quit your job (no coding required) (Online Business Collection Book 1) --- http://amzn.to/1ZgA0hd
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Mobile Strike --- http://amzn.to/1nZstWt
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Mobile Apps Made Simple: The Ultimate Guide to Quickly Creating, Designing and Utilizing Mobile Apps for Your Business - 2nd Edition (mobile ... android programming, android apps, ios apps) --- http://amzn.to/1nZsrOk
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  1. Presented by: Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript Rajesh Lal, Nokia
  2. 2 Why Mobile Apps 3 Types of Apps How to Build Apps 3 Demos N900 When to Use Each Agenda
  3. Why Mobile Apps € 4.5 Billion: Consumers will spend in Mobile App Stores in 2010 Source Gartner: http://www.gartner.com/it/page.jsp?id=1282413 0 5000 10000 15000 20000 25000 "2009" "2010" "2013" Mobile App Store Worldwide Downloads in M Revenue in €M € 4.5 Billion
  4. 4 Why Mobile Apps 3 Types of Apps How to Build Apps 3 Demos N900 When to Use Each
  5. 5 REACH RICH Web Apps Hybrid Apps Native Apps (on Web) (on device)
  6. Why Mobile Apps 3 Types of Apps How to Build Apps 3 Demos N900 When to Use Each 6
  7. 7 Native Web Hybrid free content Update is Difficult High development cost Easy to develop Self distribution maintain Difficult monetization Connection required wider market lower development cost No DRM App store billing Better functionality Robust Device APIs Paid Content offline Secure Size limit
  8. 8 Native App Web AppHybrid App Content Heavy Free Service Low cost Easy Maintenance Example Web Apps Bank apps Social Networks Search Apps 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 When to Use Each Type
  9. Why Mobile Apps 3 Types of Apps How to Build Apps 3 Demos N900 When to Use Each 9
  10. 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. 11 HTML5 for Web App CSS3 in Hybrid JavaScript {
  12. Why Mobile Apps 3 Types of Apps How to Build Apps 3 Demos N900 When to Use Each 12
  13. 13 Demo 1 HTML5 Web App
  14. 14 HTML 5 Powers Web App HTML5 Video Canvas Local Storage Geolocation form controls describe contentcontenteditable Audio header, footer, nav Validation HTML4 / XHTML threads
  15. 15 Demo 1: HTML 5 Web App Demo Time
  16. 16 Demo 2 Hybrid App with CSS3 (In 3 steps)
  17. 17 CSS3 = Amazing styles and Animations CSS3 Gradients Animation Opacity RGBA Colors @font face Box shadow Rounded Corners Text Shadow Multiple Background Images Border with Images
  18. 18 Hybrid App using CSS3 and QtWebkit CSS3 Web App Qt Webkit Qt Container
  19. 19 Hybrid App with CSS3 Create new Mobile Qt Application 1
  20. 20 Hybrid App with CSS3 Select N900 PR1.3 1
  21. 21 Hybrid App with CSS3 1
  22. 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. 23 Hybrid App with CSS3 Demo Time
  24. 24 Demo3 Native App with JavaScript and QML (In 5 steps)
  25. 25 QML = Powerful Declarative Language QML Shapes Based on JavaScript Audio Video Transitions property bindings JavaScript expressions States Image Qt Declarative runtime C++ Binding Animation
  26. 26 Native App using JavaScript and QML Qt Container QMLJavaScript C++ is not Required
  27. 27 JavaScript file
  28. 28 QML file
  29. 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. 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. 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 JavaScript5 import "clock.js" as MyClock … Text { id:txttime text: MyClock.gettime() }
  32. 32 Native App with QML & JavaScript Demo Time
  33. 33 Mobility QML Plug-ins QML Plug-ins Qt Mobility API Gallery Document Gallery API Location Location API Multimedia API includes audio and video Service Framework Discovering and connecting to services Messaging Messaging , email ,sms etc
  34. 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. 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 } } }
  36. Presented by: Thank You email rajesh.lal@nokia.com 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 Build on N900 Now !

×