Creating Mobile Apps with jQuery Mobile

Table of Contents

• Preface

• Chapter 1: Prototyping jQuery Mobile
• The game has changed
• The mobile usage pattern
• HTML prototyping versus drawing
• Getting our hands dirty with small business
• The rest of the site
• Requirements
• Alternates to paper prototyping
• Summary

• Chapter 2: A Mom-and-Pop Mobile Website
• A new jQuery Mobile boilerplate
• Meta viewport differences
• Full-site links beyond the industry standard
• The global JavaScript
• .live versus .on
• 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
• Page curl shadow effects for our list items
• 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

• Chapter 3: Analytics, long forms, and frontend validation
• Google Static Maps
• Adding Google Analytics
• Long and multi-page forms
• Integrating jQuery Validate
• E-commerce tracking with Google Analytics
• Summary

• Chapter 4: QR Codes, Geolocation, Google Maps API, and HTML5 Video
• QR codes
• Geolocation
• Integrating the Google Maps API
• Geek-out moment—GPS monitoring
• Linking and embedding video
• Summary

• Chapter 5: Client-side Templating, JSON APIs, and HTML5 Web Storage
• Client-side templating
• Patching into JSON APIs (Twitter)
• Programmatically changing pages
• Generated pages and DOM weight management
• Leveraging RSS feeds
• Forcing responsive images
• HTML5 Web Storage
• Browser-based databases (a work in progress)
• JSON to the rescue
• Leveraging the Google Feeds API
• Summary

• Chapter 6: HTML5 Audio
• HTML5 Audio
• Fixed position persistent toolbars (really!?)
• Controlling HTML5 Audio with JavaScript
• HTML5 Audio in iOS is different
• The all-in-one solution (multipage made useful)
• Saving to the home screen with HTML5 manifest
• Summary

• Chapter 7: Fully Responsive Photography
• Creating a basic gallery using PhotoSwipe
• 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

• Chapter 8: 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

• Chapter 9: Content Management Systems 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 – Golden Apples jQM Theme
• Drupal – jQuery Mobile Theme

• Adobe Experience Manager
• Summary

• Chapter 10: Putting It All Together – Flood.FM
• 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
• PhoneGap versus Apache Cordova
• Summary

• Index