Creating Mobile Apps with jQuery Mobile Second Edition
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
What we will cover
Why jQuery Mobile
Progressive enhancement and graceful degradation
Accessibility
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Prototyping jQuery Mobile
The game has changed
The mobile usage pattern
HTML prototyping versus drawing
Getting our hands dirty with small businesses
Designing the remaining components
Design requirements
Alternates to paper prototyping
Summary
2. Making a Mom-and-pop Mobile Website
Writing a new jQuery Mobile boilerplate
Meta viewport differences
Full-site links beyond the industry standard
The global JavaScript
The global CSS
Breaking the HTML into a server-side template
What we need to create our site
Getting Glyphish and defining custom icons
Linking to phones, e-mails, and maps
Custom fonts
Optimization - why you should be thinking of it first
The final product
The custom CSS
The resulting first page
Getting the user to our mobile site
Detecting and redirecting using JavaScript
Detecting on the server
Summary
3. Analytics, Long Forms, and Frontend Validation
Google Static Maps
Adding Google Analytics
Tracking and firing page views
Creating long and multi-page forms
Integrating jQuery Validate
Creating the first page of our multi-page form
Validating each page
The meta.php file
E-commerce tracking with Google Analytics
Summary
4. QR Code, Geolocation, Google Maps API, and HTML5 Video
QR codes
Geolocation
Using JSON
Picking a user's location
Driving directions with the Google Maps API
Geek out moment - GPS monitoring
Linking and embedding video
Summary
5. Client-side Templating, JSON APIs, and HTML5 Web Storage
Client-side templating
Patching into JSON APIs (GitHub)
Passing query params to jQuery Mobile
Programmatically changing pages
Generated pages and DOM weight
Leveraging RSS feeds
Forcing responsive images
HTML5 Web Storage
Browser-based databases (work in progress)
JSON to the rescue
Summary
6. Automating Your Workflow with Grunt
Introducing Grunt - a JavaScript task runner
Installing Grunt
A brief aside about Node.js
Installing Node.js
Installing Grunt using NPM
Configuring Grunt
Common tasks and their plugins
Concatenation using grunt-contrib-concat
Minification using grunt-contrib-uglify
CSS preprocessors using grunt-contrib-sass / grunt-contrib-less
LiveReloading using grunt-contrib-watch
Comparing Grunt, Gulp, and Broccoli
Summary
7. Working with HTML5 Audio
HTML5 Audio
Fixed position persistent toolbars
Controlling HTML5 Audio with JavaScript
HTML5 Audio in iOS
Multipage jQuery Mobile apps made useful
Saving to the home screen with HTML5 manifest
Summary
8. Fully Responsive Photography
Creating a basic gallery using lightGallery
Supporting the full range of device sizes – responsive web design
Text readability and responsive design
Smartphone-sized devices
Tablet-sized devices
Desktop-sized devices
Cycling background images
Another responsive approach – RESS
The final code
Summary
9. Integrating jQuery Mobile into Existing Sites
Detecting mobile – server-side, client-side, and the combination of the two
Browser sniffing versus feature detection
WURFL – server-side database-driven browser sniffing
JavaScript-based browser sniffing
JavaScript-based feature detection using Modernizr
JavaScript-based lean feature detection
Server-side plus client-side detection
Mobilizing full-site pages – the hard way
Know your role
Step 1 of 2 – focus on content, marketing cries foul!
Step 2 of 2 – choose global navigation style and insert
Global nav as a separate page
Global nav at the bottom
Global nav as a panel
The hard way – final thoughts
Mobilizing full-site pages – the easy way
Summary
10. Content Management Systems, Static Site Generators, and jQM
The current CMS landscape
WordPress and jQuery Mobile
Manually installing the mobile theme switcher
Automatically installing the mobile theme switcher
Configuring the mobile theme switcher
Drupal and jQuery Mobile
Updating your WordPress and Drupal templates
WordPress – jQMobile theme
Drupal – jQuery Mobile theme
Static Site Generators
How do they work?
The Harp server
Setting up Harp locally
The rules of HarpJS
Adding your first page
Getting the client involved
The Harp platform
Publishing your project
Adobe Experience Manager
Summary
11. Putting It All Together – Community Radio
A taste of Balsamiq
Organizing your code
MVC, MVVM, MV*
MV* and jQuery Mobile
The application
The events
The model
Introduction to the Web Audio API
Prompting the user to install your app
New device-level hardware access
Accelerometers
Camera
APIs on the horizon
To app or not to app, that is the question
Raining on the parade (take this seriously)
Three good reasons for compiling an app
The project itself is the product
Access to native only hardware capabilities
Push notifications
Supporting current customers
Adobe PhoneGap versus Apache Cordova
Summary
Index