O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Mobile Apps with jQuery Mobile - Second Edition

Book Description

Create fully responsive and versatile real-world apps for smartphones with jQuery Mobile 1.4.5

In Detail

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.

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.

What You Will Learn

  • Check and monitor the user's position with the Geolocation API
  • Automate repetitive tasks with Grunt
  • Integrate your jQuery Mobile app into popular content management systems such as WordPress, Drupal, and HarpJS
  • Incorporate third-party APIs such as Google's Analytics, Maps, and Feeds
  • Leverage HTML5 video and audio, including a jQuery Mobile player interface
  • Auto validate your mobile forms with jQuery Validate on both page-by-page and multi-page views
  • Use jQuery Mobile to create a fully responsive web design for photographers using the lightGallery plugin

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

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