Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

17,803 views

Published on

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

Published in: Technology
  • Njce! Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Good share Raj! Could do with a few updates now though :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Mobile Strike --- http://amzn.to/1nZstWt
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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 !

×