Downloaded 212 times
Uploaded byRaj Lal
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
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.
More Related Content
Similar to Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
- 1. Presented by: Build AmazingMobile Apps using HTML5, CSS3 and JavaScript Rajesh Lal, Nokia
- 2. 2 Why Mobile Apps 3Types 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 3Types of Apps How to Build Apps 3 Demos N900 When to Use Each
- 5.
- 6. Why Mobile Apps 3Types of Apps How to Build Apps 3 Demos N900 When to Use Each 6
- 7. 7 Native Web Hybrid free content Updateis 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 WebAppHybrid 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 3Types of Apps How to Build Apps 3 Demos N900 When to Use Each 9
- 10. 10 How to BuildMobile 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 WebApp CSS3 in Hybrid JavaScript {
- 12. Why Mobile Apps 3Types of Apps How to Build Apps 3 Demos N900 When to Use Each 12
- 13.
- 14. 14 HTML 5 PowersWeb App HTML5 Video Canvas Local Storage Geolocation form controls describe contentcontenteditable Audio header, footer, nav Validation HTML4 / XHTML threads
- 15. 15 Demo 1: HTML5 Web App Demo Time
- 16. 16 Demo 2 Hybrid Appwith CSS3 (In 3 steps)
- 17. 17 CSS3 = Amazingstyles 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 usingCSS3 and QtWebkit CSS3 Web App Qt Webkit Qt Container
- 19. 19 Hybrid App withCSS3 Create new Mobile Qt Application 1
- 20. 20 Hybrid App withCSS3 Select N900 PR1.3 1
- 21. 21 Hybrid App withCSS3 1
- 22. 22 Hybrid App withCSS3 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 withCSS3 Demo Time
- 24. 24 Demo3 Native App withJavaScript and QML (In 5 steps)
- 25. 25 QML = PowerfulDeclarative 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 usingJavaScript and QML Qt Container QMLJavaScript C++ is not Required
- 27.
- 28.
- 29. 29 Native App withJavaScript and QML Create new Mobile Qt Application NativeQMLJS1 Select N900 PR1.3 Remove files • mainwindow.ui • mainwindow.h • mainwindow.cpp
- 30. 30 Native App withJavaScript 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 fileand 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 withQML & JavaScript Demo Time
- 33. 33 Mobility QML Plug-ins QMLPlug-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 importQt 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 importQt 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 emailrajesh.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 !
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