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 ...
Próxima SlideShare
Cargando en…5
×

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

17.037 visualizaciones

Publicado el

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

Publicado en: Tecnología
8 comentarios
10 recomendaciones
Estadísticas
Notas
  • Njce! Thanks for sharing.
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Good share Raj! Could do with a few updates now though :)
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • 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
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Mobile Strike --- http://amzn.to/1nZstWt
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • 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
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
Sin descargas
Visualizaciones
Visualizaciones totales
17.037
En SlideShare
0
De insertados
0
Número de insertados
1.669
Acciones
Compartido
0
Descargas
204
Comentarios
8
Recomendaciones
10
Insertados 0
No insertados

No hay notas en la diapositiva.
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
    Web Apps
    On the Browser
    Hosted at remote server
    Sandbox
    Hybrid Apps
    Thin client on device
    Embedded Browser
    Remote or local data
    Native Apps
    On the device
    Local and Remote data
    Device APIs
  • HTML5 has momentum
    Ease of developing for multiple Platforms
    Reduce the role of OEM/platform provider in the distribution of content
    HTML5 is a web standard supported by major browsers
    No advance hardware support requirement
    No revenue model, monetization of a web page is difficult
    Caching and local data storage but needs user to be connected
    Dominate for Free Content

    Advantage
    Wider addressable market reached with lower development cost
    HTML5 give one standard for all
    Ease of updating with web based content
    No DRM or protection for premium content

    Native
    1. Better Revenues all app store provide billing mechanism
    2. Better functionality
    3. Access to handset core features
    No Camera, Proximity sensor, background tasking, USB out, accelerometer and Gyrometer support which make it less compelling
    4. App works offline, no connection needed
    5. Not all user have unlimited data

    Premier Paid contents

    Biggest Challenge is expertise required for development differ for different platforms and fragmentation in the same platform. Qt take care of this Nokia platform



    Hybrid App
    Native App with embedded browser
    Thin client interface for a web based content
    Monetization potential is there
  • HTML5 has momentum
    Ease of developing for multiple Platforms
    Reduce the role of OEM/platform provider in the distribution of content
    HTML5 is a web standard supported by major browsers
    No advance hardware support requirement
    No revenue model, monetization of a web page is difficult
    Caching and local data storage but needs user to be connected
    Dominate for Free Content

    Advantage
    Wider addressable market reached with lower development cost
    HTML5 give one standard for all
    Ease of updating with web based content
    No DRM or protection for premium content

    Native
    1. Better Revenues all app store provide billing mechanism
    2. Better functionality
    3. Access to handset core features
    No Camera, Proximity sensor, background tasking, USB out, accelerometer and Gyrometer support which make it less compelling
    4. App works offline, no connection needed
    5. Not all user have unlimited data

    Premier Paid contents

    Biggest Challenge is expertise required for development differ for different platforms and fragmentation in the same platform. Qt take care of this Nokia platform



    Hybrid App
    Native App with embedded browser
    Thin client interface for a web based content
    Monetization potential is there
  • HTML5 has momentum
    Ease of developing for multiple Platforms
    Reduce the role of OEM/platform provider in the distribution of content
    HTML5 is a web standard supported by major browsers
    No advance hardware support requirement
    No revenue model, monetization of a web page is difficult
    Caching and local data storage but needs user to be connected
    Dominate for Free Content

    Advantage
    Wider addressable market reached with lower development cost
    HTML5 give one standard for all
    Ease of updating with web based content
    No DRM or protection for premium content

    Native
    1. Better Revenues all app store provide billing mechanism
    2. Better functionality
    3. Access to handset core features
    No Camera, Proximity sensor, background tasking, USB out, accelerometer and Gyrometer support which make it less compelling
    4. App works offline, no connection needed
    5. Not all user have unlimited data

    Premier Paid contents

    Biggest Challenge is expertise required for development differ for different platforms and fragmentation in the same platform. Qt take care of this Nokia platform



    Hybrid App
    Native App with embedded browser
    Thin client interface for a web based content
    Monetization potential is there
  • HTML5
  • HTML5
  • HTML5
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • Web App - In the Web Browser - Mobile Website or part of the website
    Native - Native App - everything in the device
    Hybrid - Native App + embedded browser
  • 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 !

    ×