You are previewing HTML5 iPhone Web Application Development.
O'Reilly logo
HTML5 iPhone Web Application Development

Book Description

An introduction to web application development for mobile within the iOS Safari browser

  • Simple and complex problems will be covered with examples and resources that backup the approach and technique.

  • Real world solutions that are broken down for multiple target audiences; from beginner developers to technical architects.

  • Learn to build true web applications using the latest industry standards for iOS Safari.

In Detail

Create compelling web applications specifically tailored for distribution on iOS Safari. Work through real world examples with references, and in-depth discussions on the approach; including its benefits and drawbacks.

"HTML5 iPhone Web Application Development" strives to teach all levels of developers, beginners and professionals, the process of creating web applications for iOS Safari. Utilizing current industry standards for frontend development, learn to take advantage of HTML5, CSS3 and JavaScript to create compelling software.

Start with reviewing current industry standards for frontend development, and end with creating a native application using the same codebase.

Your journey will begin with an overview of current industry standards for frontend technology, quickly moving to solve real world issues; from creating a resizable or responsive gallery, to creating a single page application that utilizes the popular Backbone.js framework.

"HTML5 iPhone Web Application Development" aims to make you an expert in developing web applications for the iOS Safari platform.

Table of Contents

  1. HTML5 iPhone Web Application Development
    1. Table of Contents
    2. HTML5 iPhone Web Application Development
    3. Credits
    4. About the Author
    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. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Application Architecture
      1. Implementing the HTML5 Mobile Boilerplate
        1. Downloading and installing the HTML5 Mobile Boilerplate
        2. Integrating the build script
      2. Creating our application framework
        1. Modifying the boilerplate
        2. Customizing our markup
      3. Customizing our framework
      4. Creating semantic markup
        1. Creating the header
        2. Creating the footer
        3. Clearing up section
      5. Structuring our stylesheets
        1. Global styling
        2. Defining our global fonts
        3. Our page layout
        4. Using content with :before and :after
        5. Styling our navigation
      6. Responsive design principles
        1. Media queries to the rescue
        2. Responsive images
          1. Fluid images
            1. Fluid width images
            2. Full width images
      7. Establishing our JavaScript architecture
        1. Structuring our app functionality
          1. Namespacing our application
          2. Immediately Invoked Function Expressions
          3. Use strict
          4. Default options
          5. Defining the constructor
          6. The prototype
          7. Defining public methods
          8. Returning our constructor/function
      8. Integrating a custom module template
        1. Including our scripts
        2. Initializing our framework
      9. Routing to a mobile site
        1. Redirecting via PHP
        2. Redirecting via htaccess
      10. Home screen icons
      11. Introducing our build script
        1. Configuring our build script
          1. Minifying and concatenating scripts
          2. Minifying and concatenating styles
        2. Creating multiple environments
          1. Navigating our directories
          2. Building our project
      12. Summary
    9. 2. Integrating HTML5 Video
      1. Configuring the server
        1. Video formats
        2. Video format directives
      2. A simple HTML5 video
        1. Single video format
        2. Supporting multiple formats
      3. Listening to HTML5 video events
        1. Video markup review
        2. Attaching video events
        3. Initializing our video
      4. Creating a JavaScript video library
        1. Centralizing our events
          1. Scope in JavaScript
        2. Exposing functionality
        3. Integrating callbacks
          1. Extending callbacks
          2. Using callbacks
        4. Tying it all up
      5. Customizing HTML5 video controls
      6. Summary
    10. 3. HTML5 Audio
      1. Server configuration
        1. Audio formats
        2. Audio format directives
      2. Simple HTML5 audio integration
      3. MediaElement abstraction
        1. Creating App.MediaElement.js
        2. Initializing App.MediaElement.js
      4. Extending the MediaElement API for audio
        1. The base template
        2. Creating an instance of MediaElement
          1. Finding and caching an audio element
          2. Initializing MediaElement
      5. Dynamic audio player
        1. The select element
        2. Switching audio tracks
          1. The change event listener
          2. The change event handler
          3. Refactoring our code
          4. Initializing our Audio class
      6. Customizing HTML5 audio controls
        1. Creating custom media controls
        2. Adding interactivity to our customized controls
        3. Sequential playback
          1. The markup
          2. The JavaScript
      7. iOS considerations
        1. Volume
        2. Autoplay
        3. Simultaneous playback
      8. Summary
    11. 4. Touch and Gestures
      1. Simplifying the navigation
        1. Navigation markup and styling
          1. The basic template
          2. Styling a select component
        2. Navigation interactivity
          1. The basic template
          2. Caching our navigation
          3. Listening and handling the change event
          4. Initializing the navigation
      2. Touch and Gesture events
        1. Touch events
          1. On scroll
          2. On touch and hold
          3. On double-tap zoom
          4. Supported touch events and how they work
        2. Gestures
      3. Creating a responsive photo gallery
        1. Gallery markup and styling
          1. The basic gallery slide list
          2. Adding simple gallery controls
          3. Making images responsive
          4. Styling our gallery
          5. Using CSS3 transitions
        2. Gallery interactivity
          1. The basic template
          2. Caching the gallery
          3. Connecting our controls
            1. Attaching the events
            2. Handling our events
              1. Caching variables, again
          4. Gallery responsiveness
            1. Setting the gallery styles
            2. Resetting the gallery styles
            3. Initializing the gallery styles
        3. Extending the gallery for touch
          1. The basic template
          2. Default options and modularizing swipe events
          3. Listening to touch events
          4. Handling touch events
        4. Putting it all together
          1. The JavaScript
          2. The markup
      4. Summary
    12. 5. Understanding HTML5 Forms
      1. HTML5 input types
      2. HTML5 attributes for forms
      3. Form layout for iPhone
      4. Sample HTML5 forms
        1. Setup work
          1. Including our forms styling
          2. Updating the navigation
          3. Including our navigation and forms scripts
        2. The forms
          1. The login form
          2. The registration form
          3. The profile form
            1. The datetime type
            2. The number type
            3. The range type
      5. Form validation
        1. The basic template
        2. Initializing our forms
          1. Attaching events
          2. Event handlers
        3. Validating our input
      6. Form styling for iOS
        1. Basic styling
        2. Custom styling
      7. Summary
    13. 6. Location-aware Applications
      1. Geolocation specification
        1. Implementation
        2. Scope, security, and privacy
        3. API descriptions
          1. The Geolocation interface
            1. The getCurrentPosition method
            2. The watchPosition method
            3. The clearWatch method
          2. The PositionOptions interface
            1. The enableHighAccuracy option
            2. The timeout option
            3. The maximumAge option
          3. The Position interface
          4. The Coordinates interface
          5. The PositionError interface
        4. Use cases
          1. Points of interest
          2. Route navigation
          3. Latest information
      2. Google Maps API
        1. The API(s)
        2. Obtaining an API key
          1. Activating the service
          2. Retrieving the key
      3. Geolocation and Google Maps
        1. Markup preparation
        2. The Geolocation wrapper
        3. Geolocation with Google Maps
      4. Summary
    14. 7. One-page Applications
      1. Model-View-Controller or MVC
        1. Models
        2. Views
        3. Controllers
        4. Relationships
      2. Introduction to Underscore.js
        1. Implementation
          1. _.extend
          2. _.each
          3. _.template
      3. Introduction to Backbone.js
        1. MVC and Backbone.js
        2. Backbone models
        3. Backbone views
        4. Backbone collections
        5. Server-side interactions
      4. Our sample application
        1. Application architecture
          1. Basic sample architecture
          2. Application markup
            1. Creating templates
          3. Application scripts
            1. The BaseView
            2. Music application
              1. The router
              2. The collection
              3. The model
              4. The view(s)
                1. The playlist view
                2. The audio player view
                3. The song view
            3. User application
              1. The router
              2. The collection
              3. The model
              4. The view(s)
                1. The dashboard view
                2. The profile view
      5. Summary
    15. 8. Offline Applications
      1. Application Cache
        1. The manifest file
        2. Manifest implementation
        3. A simple example
          1. The markup
          2. The JavaScript
      2. Debugging the cache manifest
        1. Debugging in the browser
        2. Debugging using JavaScript
      3. Handling offline applications
        1. A simple use case
        2. Detecting network connectivity
        3. The localStorage API
      4. Summary
    16. 9. Principles of Clean and Optimized Code
      1. Optimizing stylesheets
        1. Validating our CSS
          1. W3C CSS Validator
          2. Customizable options
          3. Validating a successful example
          4. Validating an unsuccessful example
          5. CSS Lint
          6. Customizable options
            1. Validating a successful example using CSS Lint
            2. Validating an unsuccessful example using CSS Lint
            3. Integrating CSS Lint
        2. Profiling our CSS
        3. Optimizing our CSS
          1. Avoid universal rules
        4. Don't qualify ID or Class rules
          1. Never use !important
          2. Modularize styles
      2. Optimizing JavaScript
        1. Validating JavaScript using JSLint
          1. Validating a successful example using JSLint
          2. Validating an unsuccessful example
          3. Customizable options
          4. Integrating JSLint
        2. Profiling our JavaScript
        3. Optimizing our JavaScript
          1. Avoid globals
          2. Leave the DOM alone
          3. Use literals
          4. Modularize functionality
      3. Summary
    17. 10. Creating a Native iPhone Web Application
      1. Setting up the development environment
        1. Getting started with Xcode
          1. Installing Xcode
          2. Xcode IDE overview – the basics
            1. The Xcode workspace
            2. The Xcode toolbar
        2. Setting up PhoneGap
          1. Installing PhoneGap
          2. Creating a PhoneGap project
          3. The PhoneGap license
        3. Configuring our project
      2. Transferring a web application
        1. Transferring our assets
          1. Including our markup
          2. Incorporating our styles
          3. Inserting our scripts
        2. Debugging our application
          1. Logging out our code
          2. Using the Safari developer tools
        3. Extending our application with native functionality
          1. Configuring our application
          2. Setting up our contacts functionality
            1. Creating the ContactsView class
            2. Implementing the ContactsView template
            3. Integrating the Contacts API
      3. Summary
    18. Index