2. Agenda
Introduction
• Mobile Apps
• Native vs Hybrid
vs Mobile Web
• Platforms/Stores
• App Builders
• PhoneGap
JS Frameworks
• Jquery Mobile
• iUI
JS Demo
• jQuery Mobile
ThemeRoller
Smartface
• Smartface Pros
• Smartface Cons
3. What is a ‘Mobile App’ ?
Mobile apps are software programs you can download and access
directly using your phone or tablet
«
Mobile App -> Software that runs on your mobile device
»
4. Native vs Hybrid vs Mobile Web
Native : Platform-based Programming Language,UI & libraries
Hybrid : Native-based HTML/JS mobile web apps.
Mobile Web : Websites that run responsive on mobile devices
6. What is ‘Hybrid’ ?
What are mobile web applications?
•
Increasingly popular way to deliver content and
business applications to mobile devices
•
Alternative to developing native mobile apps
•
Run on any OS, desktop, tablet, smartphone
•
Easy to develop using standard web technologies and frameworks
•
Advances in HTML, CSS and JavaScript allow for shifting more functionality to the
browser, providing richer user experience and better performance
•
Easy to maintain and easy roll out of upgrades
7. Limitations of Hybrid
Browsers do not typically have access to advanced functions of a device,
like GPS, camera, address book...
Web apps are often slower than native apps
Mobile web apps require permanent Internet connection
Using offline web application caching and platforms like PhoneGap,
Titanium, etc. provides ways to address these limitations
8. Platforms & Marketplaces
•
iOS – iTunes Store
•
Android – Google Play
•
Blackberry – AppWorld
•
Windows Phone & Windows 8 – Windows Store
•
Tizen – Tizen Store
12. jQuery Mobile and iUI’s Cons
jQuery Mobile
iUI
•
Page Transitions
•
Documentation
•
Large JS Files
•
No Native Support
•
Canvas Animations
13. jQuery Mobile and iUI’s Pros
jQuery Mobile
•
Familiarity with jQuery
•
Design & Layout
iUI
•
iOS UI
14. jQuery Mobile
• Touch-optimized JavaScript framework for smartphones & tablets
• Built on jQuery and jQuery UI foundation
• Unified user interface system across all popular mobile platforms
• Responsive design techniques allow the same underlying codebase to
automatically scale from smartphone to tablet and desktop-sized screens
• AJAX-based navigation system to enable animated page transitions
while maintaining back button
15. Differences between jQuery and
jQuery Mobile
• jQuery: Library that makes it easier to write JavaScript through selectors
• jQuery Mobile:
Framework built on top of jQuery
Used by developers to build mobile interfaces
Coding is done using plain HTML markup for the most part
jQuery Mobile automatically applies styles and add functionality to widgets
16. ThemeRoller for jQuery Mobile
• Customizable user interface
• Built-in theming framework
• ThemeRoller application
http://themeroller.jquerymobile.com/
17. Supported Platforms
3-level graded platform support system, supported platforms include:
• Apple iOS (iPhone, iPod Touch, iPad)
• Android
• Windows Phone
• Blackberry
18. iUI – iOS User Interface
http://www.iui-js.org/