Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
Download as PPTX, PDF12 likes12,118 views
This document discusses building mobile apps using HTML5, CSS3, and JavaScript. It presents three types of mobile apps: web apps, hybrid apps, and native apps. It then demonstrates building each type of app through examples on the Nokia N900: 1) a HTML5 web app using video, canvas, and other features, 2) a hybrid app with CSS3 styles and animations built using QtWebKit, and 3) a native app using JavaScript and QML to create interfaces and bind to native device APIs. The document encourages developers to start building on the N900 immediately using these techniques and tools.
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
- 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
- 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 [email protected] 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 !
Editor's Notes
- #3: 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
- #5: 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
- #6: 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
- #7: 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
- #8: 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
- #9: 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
- #10: HTML5
- #11: HTML5
- #12: HTML5
- #25: 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
- #30: 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
- #31: 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
- #32: 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
- #33: 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
- #34: 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
- #35: 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
- #36: 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