Book Image

Creating Mobile Apps with jQuery Mobile - Second Edition

By : Andy Matthews, Shane Gliser
Book Image

Creating Mobile Apps with jQuery Mobile - Second Edition

By: Andy Matthews, Shane Gliser

Overview of this book

<p>jQuery Mobile is a mobile-centric web framework developed by the jQuery team. The project focuses on building a framework compatible with the ever-increasing variety of smartphones and tablet computers on the market. The jQuery Mobile framework plays well with other frameworks and platforms, such as PhoneGap and Backbone.</p> <p>Automate repetitive tasks easily and painlessly with the Grunt task runner, build a fully responsive, gorgeous photography website, and learn how to mix and match jQuery Mobile 1.4.5 into existing websites and how to deploy those changes to content management systems such as WordPress, Drupal, and HarpJS. jQuery Mobile aims to reach everyone, and so does this book. It will enhance your mobile knowledge and help you to create versatile, unique sites quickly and easily.</p>

Related Content you might be interested in

Current Title:

Small book image
Creating Mobile Apps with jQuery Mobile - Second Edition
Andy Matthews | Shane Gliser
Feb, 2015 | 288 pages
No titles found
Table of Contents (18 chapters)
Creating Mobile Apps with jQuery Mobile Second Edition
Creating Mobile Apps with jQuery Mobile Second Edition
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Prototyping jQuery Mobile
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
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
Analytics, Long Forms, and Frontend Validation
Google Static Maps
Creating long and multi-page forms
Integrating jQuery Validate
E-commerce tracking with Google Analytics
Summary
4
QR Code, Geolocation, Google Maps API, and HTML5 Video
QR Code, Geolocation, Google Maps API, and HTML5 Video
QR codes
Geolocation
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, JSON APIs, and HTML5 Web Storage
Client-side templating
Patching into JSON APIs (GitHub)
Programmatically changing pages
Generated pages and DOM weight
Leveraging RSS feeds
HTML5 Web Storage
Summary
6
Automating Your Workflow with Grunt
Automating Your Workflow with Grunt
Introducing Grunt - a JavaScript task runner
Installing Grunt
Summary
7
Working with HTML5 Audio
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
Fully Responsive Photography
Creating a basic gallery using lightGallery
Supporting the full range of device sizes – responsive web design
Text readability and responsive design
Cycling background images
Another responsive approach – RESS
The final code
Summary
9
Integrating jQuery Mobile into Existing Sites
Integrating jQuery Mobile into Existing Sites
Detecting mobile – server-side, client-side, and the combination of the two
Mobilizing full-site pages – the hard way
Mobilizing full-site pages – the easy way
Summary
10
Content Management Systems, Static Site Generators, and jQM
Content Management Systems, Static Site Generators, and jQM
The current CMS landscape
WordPress and jQuery Mobile
Updating your WordPress and Drupal templates
Static Site Generators
Adobe Experience Manager
Summary
11
Putting It All Together – Community Radio
Putting It All Together – Community Radio
A taste of Balsamiq
Organizing your code
Introduction to the Web Audio API
Prompting the user to install your app
New device-level hardware access
To app or not to app, that is the question
Adobe PhoneGap versus Apache Cordova
Summary
Index
Index

Saving to the home screen with HTML5 manifest

With great power comes great responsibility. This is a power feature. If you properly leverage the HTML5 manifest and a few other meta tags, your application will become a fullscreen, chromeless app:

To make your apps save down and launch as fullscreen apps, you'll need icons for your home screen. They'll be squares in sizes of 144, 114, 72, and 57 pixels respectively. Link to them like so:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/album144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/album114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/album72.png">
<link rel="apple-touch-icon-precomposed" href="images/album57.png">
<link rel="shortcut icon" href="images/album144.png">

The user's navigation buttons can be made to disappear on iOS. Be aware, that if you choose to do this, you need to provide full navigation within your app. This...

Previous Section
End of Section 7
Next Section