Mobile Development with jQuery Mobile and PhoneGap Premnath Thimma
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Mobile Development
with jQuery Mobile and PhoneGap
Premnath Thimma
Agenda
• Introduction
• Mobile Background/Architecture
• jQuery Mobile
• PhoneGap
• Demo
• Questions?
Introduction
• About meo Premnath Thimma
• Experienceo 14+ years of experienceo Wear multiple hats – Developer, Lead, Manager, Technical
Project Managero Development done in all layers (Full Stack Developer)o Java, Pega, TIBCO and nowo Lately Mobile/HTML5/CSS3 Development
Mobile Background
• Global internet usage will more than double by 2015, and most of these users will be mobile
• 64% of mobile phone time is spent on apps
• In 2012, the U.S. saw a 55% increase in smartphone subscriptions to make for 98 million smartphone subscribers, representing nearly 42% of all U.S. mobile users
Mobile Background (Cont.)
• 61% of smartphone users make local searches from a device
• 79% of smartphone users use their phones to help with shopping and 74% make a purchase as a result
• Mobile was responsible for US $2.6 billion in travel booking value in 2011
Mobile Background (Cont.)
Mobile Architecture
• Mobile Applicationo Stripped down version of Web Applicationo Developed using server side technology (PHP, .Net)
• Native o iOS (Objective-C, iOS SDK, C#, MonoTouch)o Android (Java, Android SDK, C#, MonoTouch)o Windows (C#/.Net Framework 4)
• Hybrid Applicationo jQuery Mobile/JavaScript and PhoneGap like
Frameworks
Which one to choose?
Why jQuery Mobile?
• Top-of-the-line JavaScript in a unified User Interface
• Works across the most-used mobile devices
• Supports mobile browsers
• Treating mobile web browsers exactly the same as desktop web browsers
• Build on top of jQuery, knowledge is readily available in the industry
• Large user base
• Used by many large companies
Who is using jQuery Mobile?
jQuery Mobile (Sample Site)<!DOCTYPE html>
<html>
<head> <title>Page Title</title>
</head>
<body>
<section data-role="page">
<header data-role="header">
<h1>Header</h1>
</header>
<article data-role="content">
<h1>Content</h1>
</article>
<footer data-role="footer">
<h1>Footer</h1>
</footer>
</section>
</body></html>
jQuery Mobile Data-*
• data-role o header, page, footer, listview, button etc.
• data-transitiono slide, slideup, slidedown, pop, fade, flip
• data-icono home, delete, refresh, plus, minus etc
• data-theme (a-z)
• data-mini (true/false)
• data-iconposo left, right, top, bottom, notext
PhoneGap
• One code base, multiple platforms
• Reuse existing web developer skills
• Shorter learning curve
• Faster development
• Mobile site and app with same code
• Reusable web code and infrastructure
• Code portable to other environments
• Based on open standards
• Active and growing community
Demo
Questions?
References
1. https://snaphop.com/2012-mobile-marketing-statistics/
2. http://jquerymobile.com/test/docs/api/data-attributes.html
3. http://docs.phonegap.com/en/2.1.0/index.html
jQuery Plug-in - DynaTree
Related Documents
