Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript

Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript

Released November 2010
Publisher(s): Apress
ISBN: 9781430230458

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

It seems that everyone and her sister has developed an iPhone App—everyone except you, the hard-working web professional. And now with the introduction of the iPad, you may even feel farther behind. But the time has come where you don't need to struggle through Objective-C or master Apple's Cocoa touch APIs. WebKit's support for HTML5 means any ambitious web developer can join Apple's second mobile App wave and create compelling apps that address the unique features of both the iPhone and the larger iPad.

Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript takes you through every aspect of the latest Mobile Web Standards as well as the specific features of the iPhone and iPad. You'll go beyond Web 2.0 and Ajax to learn about WebKit and Mobile Safari, HTML5 and CSS3, Vector Graphics and Multimedia support. You'll discover what built-in hardware features of the iPhone and iPad you can use and how to take advantage of these device-specific capabilities.

The market for Web apps is expanding and the combination of iPhone and iPad makes this a very hot area—as well as a competitive one. You'll want to know about all the advantages available to get ahead and stay ahead, and Beginning iPhone and iPad Web Apps is the perfect starting point.

Table of contents

  1. Copyright
  2. About the Authors
  3. About the Technical Reviewer
  4. Acknowledgments
  5. Introduction
    1. Who This Book Is For
    2. What You Need to Know
    3. What's in This Book
    4. Are You Ready?
  6. I. Getting Started with Web App Development
    1. 1. Development Tools
      1. 1.1. The Source Editor
        1. 1.1.1. Varanus Komodoensis
        2. 1.1.2. Make Yourself Comfortable
      2. 1.2. What About Dashcode?
      3. 1.3. Using the Right Browser
        1. 1.3.1. The WebKit
        2. 1.3.2. The Gecko and the Fox
        3. 1.3.3. Opera
        4. 1.3.4. Internet Explorer, Lost at Sea
      4. 1.4. Developing Web-Wise
        1. 1.4.1. Acid...Acid...Acid
        2. 1.4.2. HTML5 Conformance
        3. 1.4.3. A Satellite in Your Browser
      5. 1.5. Developing for iOS
        1. 1.5.1. Using the iPhone and iPad Simulator
        2. 1.5.2. Using a Real Device Anyway
        3. 1.5.3. The ADC Is Your Friend
      6. 1.6. Summary
    2. 2. Development Environment
      1. 2.1. Serving the Web Application
      2. 2.2. Mac OS, Making Things Easy
        1. 2.2.1. An Apache in Your Mac
        2. 2.2.2. The Script Engine
      3. 2.3. Windows, Choose Your Weapons
        1. 2.3.1. An All-in-One Installation Process
        2. 2.3.2. Security Settings
      4. 2.4. Linux, Take Control
      5. 2.5. Handling Multiple Hosts
        1. 2.5.1. Unix-Based System
        2. 2.5.2. Windows-Based System
      6. 2.6. Configuring Multiple Web Sites
        1. 2.6.1. Apache 2: Get Carried Away
          1. 2.6.1.1. Checking the Configuration
          2. 2.6.1.2. Configuring Your First Virtual Host
        2. 2.6.2. The Windows Case
      7. 2.7. Have You Made It?
      8. 2.8. Bet You Have!
    3. 3. Introducing Developer and Debugging Tools
      1. 3.1. Making Friends with WebKit's Developer Tools
        1. 3.1.1. Enabling the Develop Menu
        2. 3.1.2. The Develop Menu Exposed
        3. 3.1.3. Developing on Mobile Safari
      2. 3.2. Overview of the Web Inspector
        1. 3.2.1. The Developer Tools Window
        2. 3.2.2. Error Notifications
      3. 3.3. Master Your Code
        1. 3.3.1. Make the Document Yours
        2. 3.3.2. Dig Your Style
        3. 3.3.3. Editing Styles
        4. 3.3.4. Metrics
          1. 3.3.4.1. Properties
          2. 3.3.4.2. Event Listeners
        5. 3.3.5. Advanced Search
      4. 3.4. The Resources Viewer
      5. 3.5. Debugging JavaScript
        1. 3.5.1. Logging to the Console
        2. 3.5.2. Using the Interactive Shell
        3. 3.5.3. Let the Debugger Do the Job
          1. 3.5.3.1. Breakpoints
          2. 3.5.3.2. Stepping
          3. 3.5.3.3. Watch Expressions
          4. 3.5.3.4. Call Stack
          5. 3.5.3.5. Scope Variables
          6. 3.5.3.6. Exceptions
      6. 3.6. The Life Cycle of Your Page
      7. 3.7. Profiling Your Scripts
        1. 3.7.1. Understanding the Profiles
        2. 3.7.2. Filtering with the Search Field
      8. 3.8. Client-Side Data Storage
        1. 3.8.1. Database Storage
        2. 3.8.2. Cookies
        3. 3.8.3. Other Storage Features
      9. 3.9. Auditing Your Page
      10. 3.10. Still Unsure?
      11. 3.11. Summary
  7. II. Web App Design with HTML5 and CSS3
    1. 4. The Anatomy of a Web Application
      1. 4.1. The iPhone Revolution
        1. 4.1.1. Belief in Web Apps
        2. 4.1.2. But What is a Web App Exactly?
      2. 4.2. Planet of the Apps: Who Rules
        1. 4.2.1. Cross-Platform Master
        2. 4.2.2. Hardware Access Is No Forbidden Weapon Anymore
        3. 4.2.3. Free Your Content
        4. 4.2.4. Release Model
        5. 4.2.5. Web Apps: Not the Little Brother Anymore
      3. 4.3. Web Apps on Mobile Safari
        1. 4.3.1. Master the Browser
        2. 4.3.2. Browser Metrics
        3. 4.3.3. Think "Web App"
      4. 4.4. Configuring the Viewport
      5. 4.5. Seriously Appy: Using Stand-Alone Mode
        1. 4.5.1. Showcasing a Proper Icon
        2. 4.5.2. Running Your Application Full-Screen
        3. 4.5.3. An Awesome Startup
        4. 4.5.4. Tweaking the Status Bar
        5. 4.5.5. Staying in Stand-Alone Mode
      6. 4.6. Build Your First Web App Base Project
        1. 4.6.1. Your Document Template in Komodo Edit
        2. 4.6.2. Hiding Mobile Safari's Address Bar
        3. 4.6.3. Handling Screen Orientation Changes
        4. 4.6.4. Final Touch
      7. 4.7. Ready to Go
    2. 5. User Experience and Interface Guidelines
      1. 5.1. From the Web on the Desktop to the Mobile Web
        1. 5.1.1. Forget the Desktop
        2. 5.1.2. Change Navigation Habits
        3. 5.1.3. Show Ads Thoughtfully
        4. 5.1.4. Let Users Decide by Themselves
      2. 5.2. Simplicity and Ease of Use
        1. 5.2.1. Avoid Clutter
        2. 5.2.2. User Interface
          1. 5.2.2.1. Adapt to Touch
          2. 5.2.2.2. Adapt to Size
      3. 5.3. Avoid Unnecessary Interaction
        1. 5.3.1. Make Use of New Input Types Capabilities
        2. 5.3.2. Ponder Upon User-Supplied Information
        3. 5.3.3. Avoid Multiplying Steps
      4. 5.4. The Spirit: Be Focused
      5. 5.5. Make Things Responsive
        1. 5.5.1. Make Your Web App Responsive
        2. 5.5.2. Make Your Web App Reactive
      6. 5.6. iOS Interface Design Good Practices
        1. 5.6.1. Adaptability
        2. 5.6.2. List vs. Icon Approach
      7. 5.7. Considering UI Alternatives
        1. 5.7.1. Mimicking the iOS UI
        2. 5.7.2. Building the iPad Experience
          1. 5.7.2.1. Not a Laptop, Not an iPhone
          2. 5.7.2.2. Creating the Interface for the iPad
      8. 5.8. Be Creative and Innovative
      9. 5.9. Summary
    3. 6. Interesting CSS Features for Your Web Application User Interface
      1. 6.1. Improving the User Experience with CSS
        1. 6.1.1. User Feedback
        2. 6.1.2. Disabling Copy/Paste Functionalities
        3. 6.1.3. Control Over Callout
      2. 6.2. Selectors
        1. 6.2.1. Overview of Available CSS Selectors
        2. 6.2.2. Position in Suite Selectors: Structural Pseudoclasses
      3. 6.3. Advanced Handling of Backgrounds
        1. 6.3.1. Origin of the Background
        2. 6.3.2. Global Background Clipping
        3. 6.3.3. Text-Based Background Clipping
        4. 6.3.4. Sizing the Background
        5. 6.3.5. Developing a Photos-Like Gallery
        6. 6.3.6. Multilayer Backgrounds
      4. 6.4. Colors
        1. 6.4.1. The Alpha Channel
        2. 6.4.2. New Color Definitions
      5. 6.5. Using Gradients
        1. 6.5.1. Basic Syntax
        2. 6.5.2. Changing the Size of the Gradient
        3. 6.5.3. Complete Gradient Syntax
        4. 6.5.4. Advanced Color Handling
      6. 6.6. Boxes and Borders
        1. 6.6.1. Box Sizing
        2. 6.6.2. Rounded Box Corners
        3. 6.6.3. Borders Drawn with Images
      7. 6.7. Shadows
        1. 6.7.1. Box Shadows
        2. 6.7.2. Text Shadows
        3. 6.7.3. Text Effect with Shadows and Outline
      8. 6.8. Adding a Button to Your Header
      9. 6.9. Columns Layout
        1. 6.9.1. CSS Column Properties
        2. 6.9.2. Porting Press Content to the Web
      10. 6.10. The Flexible Box Model
        1. 6.10.1. A Clean and Flexible Way to Handle Column Layouts
        2. 6.10.2. Ordering Boxes
        3. 6.10.3. Flexibility
        4. 6.10.4. Packing and Alignment
      11. 6.11. Targeting WebKit Specifically
      12. 6.12. Summary
    4. 7. Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG
      1. 7.1. Working with the Canvas Area
        1. 7.1.1. The Drawing Context
        2. 7.1.2. Drawing Simple Shapes
        3. 7.1.3. Colors, Gradients, and Patterns
          1. 7.1.3.1. Using Gradients
          2. 7.1.3.2. Defining Patterns
        4. 7.1.4. More Complex Shapes with Paths
          1. 7.1.4.1. Drawing Arcs
          2. 7.1.4.2. Drawing Curves
          3. 7.1.4.3. Line Styles
          4. 7.1.4.4. Enhancing Your Menus with Style
        5. 7.1.5. Applying Transformations
        6. 7.1.6. Simplifying Drawing State Modifications
        7. 7.1.7. Using Text
          1. 7.1.7.1. Drawing the Text
          2. 7.1.7.2. Text Baseline
          3. 7.1.7.3. Text Alignment
        8. 7.1.8. Shadows
        9. 7.1.9. Clipping and Compositing
          1. 7.1.9.1. Clipping to the Drawing Area
          2. 7.1.9.2. Compositing and Global Transparency
        10. 7.1.10. Working with Canvas Pixels
      2. 7.2. Using Vector Graphics
        1. 7.2.1. Inserting SVG into Your Documents
        2. 7.2.2. Understanding the Coordinates System
        3. 7.2.3. Drawing Shapes
        4. 7.2.4. Interoperability
        5. 7.2.5. Communication
        6. 7.2.6. Animation with and Without Scripting
        7. 7.2.7. Coping with Temporary Bugs
      3. 7.3. Preinstalled and Downloadable Fonts
      4. 7.4. Summary
    5. 8. Embedding Audio and Video Content in Your Web Application
      1. 8.1. Embedding Video Content
        1. 8.1.1. Getting Information About the Video
        2. 8.1.2. The Video Placeholder
        3. 8.1.3. Playing the Video
      2. 8.2. Embedding Audio Content
      3. 8.3. Keep Things Reasonable
      4. 8.4. Take Control Over Your Content
        1. 8.4.1. Understanding and Using Ranges
        2. 8.4.2. A Number of Supported Events
      5. 8.5. Adding Subtitles and Chapters to Your Media
        1. 8.5.1. Creating Your Own Custom Subtitles
          1. 8.5.1.1. Displaying Subtitles
          2. 8.5.1.2. Language Auto-selection
          3. 8.5.1.3. Let the End User Choose
        2. 8.5.2. Easier Media Browsing with Chapters
      6. 8.6. Workarounds...Let's Go
      7. 8.7. Media Content for the iPhone and iPad
        1. 8.7.1. Understanding Video Formats
        2. 8.7.2. Dealing with Supported Audio Formats
        3. 8.7.3. Encoding for the Web
          1. 8.7.3.1. Using QuickTime Player
          2. 8.7.3.2. An Encoder Alternative
      8. 8.8. Summary
    6. 9. Handling Transformations, Animations, and Special Effects with CSS
      1. 9.1. Transform Your Elements
        1. 9.1.1. Checking Transform Support
        2. 9.1.2. Applying Rotations
        3. 9.1.3. Translating Element Coordinates
        4. 9.1.4. Scaling Page Contents
        5. 9.1.5. Distorting Elements
        6. 9.1.6. Custom Transformations with Matrices
        7. 9.1.7. The Origin of the Transformation
      2. 9.2. Working in a Three-Dimensional Environment
        1. 9.2.1. New Transform Functions
        2. 9.2.2. Setting the Perspective
        3. 9.2.3. Preserving the 3D Aspect
        4. 9.2.4. Back Face Visibility
      3. 9.3. Combining Styles with JavaScript
        1. 9.3.1. Accessing Current Styles
        2. 9.3.2. A Native Object to Compute Matrices
      4. 9.4. Transitions
        1. 9.4.1. The transition CSS Property
        2. 9.4.2. Initiating a Transition
        3. 9.4.3. Timing Function Curve
        4. 9.4.4. Telling When the Transition Is Completed
      5. 9.5. Getting Ready for a Cover Flow–Like Experience
        1. 9.5.1. The Main Document
        2. 9.5.2. The Cover Flow Animation
        3. 9.5.3. Flipping the Current Cover
        4. 9.5.4. Final Touch to the Animation
        5. 9.5.5. Double-Check: Preventing Unexpected Behavior
      6. 9.6. Advanced Animations and Key Frames
        1. 9.6.1. Key Frames
        2. 9.6.2. Starting and Timing the Animation
        3. 9.6.3. Animation Properties
        4. 9.6.4. The Evolution Curve
        5. 9.6.5. Working with Events
      7. 9.7. Special Effects with CSS
        1. 9.7.1. Creating Reflections
        2. 9.7.2. Using Real Masks
      8. 9.8. Create an iOS-Like Tab Bar Using Masks
        1. 9.8.1. Getting the Initial Tab Bar Ready
        2. 9.8.2. A Placeholder for Icons
        3. 9.8.3. Icons Management
        4. 9.8.4. Creating Icons
        5. 9.8.5. Custom Icons Using an Image
      9. 9.9. Summary
  8. III. Going Futher with JavaScript and Web Standards
    1. 10. An Object-Oriented JavaScript Programming Primer
      1. 10.1. From the Procedural Model...
      2. 10.2. ...to Object-Oriented Programming
        1. 10.2.1. A First Custom Object
        2. 10.2.2. Using a Proper Constructor
        3. 10.2.3. Better Performance with Prototype
      3. 10.3. Implementing Inheritance
        1. 10.3.1. Prototype-Based Inheritance
        2. 10.3.2. Shared Properties
        3. 10.3.3. The Prototype Chain
      4. 10.4. The Execution Context
        1. 10.4.1. Using the call() and apply() Methods
        2. 10.4.2. Taking Care of the Execution Context
        3. 10.4.3. Setting the Proper Context with Handlers and Callbacks
      5. 10.5. Accessing Properties and Methods
      6. 10.6. Defining Getters and Setters
      7. 10.7. Code Isolation and Libraries
        1. 10.7.1. Isolating Your Code
        2. 10.7.2. Creating a Library
      8. 10.8. Enhancing Your Spinner Animation
      9. 10.9. Summary
    2. 11. Cross-Document Communication
      1. 11.1. Cross-Document Communication Limitations
      2. 11.2. Communication, the HTML5 Way
        1. 11.2.1. The Cross-Document Messaging API
        2. 11.2.2. Data Type Support and Handling
        3. 11.2.3. Security Considerations
      3. 11.3. Case Study
        1. 11.3.1. The Main Document
        2. 11.3.2. The Hosted Document
        3. 11.3.3. Let's Send a Message
        4. 11.3.4. Handling the Response
      4. 11.4. Specific Mobile Safari Behavior with <iframe>
      5. 11.5. Working with Proper Windows
        1. 11.5.1. Notify the Page Is Loaded
        2. 11.5.2. Properties of the Window Object
      6. 11.6. Encapsulating the API to Ease Communication
        1. 11.6.1. An Object for the Host Document
        2. 11.6.2. An Object for the Widget
        3. 11.6.3. The Host Document and the Widgets
      7. 11.7. Relaxing Subdomain Communication
        1. 11.7.1. Changing the Domain
        2. 11.7.2. Security
      8. 11.8. The Last Message
    3. 12. Ajax and Dynamic Content
      1. 12.1. Building an HTTP Request
        1. 12.1.1. Requests Using the XMLHttpRequest Object
        2. 12.1.2. The open() Method
        3. 12.1.3. Sending Requests Using GET or POST
        4. 12.1.4. Handling the Request State
        5. 12.1.5. Handling Progress Events
        6. 12.1.6. Checking the Response
      2. 12.2. Handling Return Formats
        1. 12.2.1. Most Common Return Formats
        2. 12.2.2. Parsing XML for Use in HTML Documents
          1. 12.2.2.1. Parsing the DOM with JavaScript
          2. 12.2.2.2. Using XML Style Sheet Transformations
        3. 12.2.3. Specificities When Parsing JSON
        4. 12.2.4. JSON Security Considerations
      3. 12.3. Client-Side Rendering Using Returned Data
        1. 12.3.1. Handling Template Variables
        2. 12.3.2. Formatting Variables
      4. 12.4. Cross-Origin Communication
        1. 12.4.1. Using Proxies
        2. 12.4.2. The JSONP Way
        3. 12.4.3. The Cross-Origin Resource Sharing
      5. 12.5. Real-Life Example: Display Twitter Trends
        1. 12.5.1. The Twitter Trends Feed
        2. 12.5.2. Fetching and Rendering Data
      6. 12.6. Be Kind to the Waiting User
        1. 12.6.1. Adding Visual Feedback
        2. 12.6.2. Handling Excessive Waiting Times
      7. 12.7. Summary
    4. 13. Using Touch and Gesture Events
      1. 13.1. How to Handle Events
        1. 13.1.1. Calling Priority of Handlers
        2. 13.1.2. The Capture Stage
        3. 13.1.3. Control Over Event Propagation
        4. 13.1.4. Preventing Default Behavior
        5. 13.1.5. Handlers and Object Methods
      2. 13.2. Classic Events with Mobile Safari
        1. 13.2.1. Behavior of Mouse Events
        2. 13.2.2. Scrolling Information
      3. 13.3. Multi-Touch Events
        1. 13.3.1. New Interaction Processes
        2. 13.3.2. Handling Multi-Touch Events
        3. 13.3.3. Unlimited Touch Points
        4. 13.3.4. Cancelled Touch Events
      4. 13.4. A Page View Built with Touch and Transform
        1. 13.4.1. What We Are Going to Do
        2. 13.4.2. The Container
        3. 13.4.3. Bring Elements and Interaction
        4. 13.4.4. Creating Custom Events
        5. 13.4.5. Handling Custom Events
      5. 13.5. Working with Precomputed Gestures
      6. 13.6. Create Your Own Gestures
        1. 13.6.1. One Code, Many Strokes
        2. 13.6.2. The Bounding Box Object
        3. 13.6.3. Registering User Strokes
        4. 13.6.4. Using the Recognizer Object
        5. 13.6.5. Improve Accuracy
      7. 13.7. Summary
    5. 14. Location-Aware Web Applications
      1. 14.1. The Geolocation API
        1. 14.1.1. Privacy Considerations
        2. 14.1.2. Setup Considerations
      2. 14.2. Getting the Current Position
        1. 14.2.1. Longitude, Latitude, and More
        2. 14.2.2. Handling Errors from Requests
        3. 14.2.3. Accuracy, Timeout, and Cached Location
      3. 14.3. Putting the User on a Map with Google Maps
        1. 14.3.1. Showing the Map
        2. 14.3.2. Centering the Map on the Location of the User
        3. 14.3.3. Marking the Position of the User
        4. 14.3.4. Showing Accuracy
      4. 14.4. Tracking the User's Position
        1. 14.4.1. Registering for Updates
        2. 14.4.2. Specific Behavior of the Watcher
        3. 14.4.3. Watching Position on Google Maps
      5. 14.5. From Data to Math
        1. 14.5.1. Distance Between Two Points
        2. 14.5.2. Sharper Distance Between Two Points
        3. 14.5.3. The Direction to Take
      6. 14.6. Building a Compass Web App
        1. 14.6.1. Create the Mobile Elements
        2. 14.6.2. The Graduations
        3. 14.6.3. The Needles
        4. 14.6.4. The Dial Shine
        5. 14.6.5. Render the Compass
        6. 14.6.6. Add Elements to the Document
        7. 14.6.7. Prepare the Document to Receive Location Data
        8. 14.6.8. Use Location Data
        9. 14.6.9. Animate the Compass
        10. 14.6.10. Prevent Staggering Needles
      7. 14.7. Summary
    6. 15. A Better Handling of Client-Side Data Storage
      1. 15.1. Different Storage Areas
        1. 15.1.1. How to Use New Storage Capabilities
        2. 15.1.2. Specific Behavior of sessionStorage
        3. 15.1.3. Being Notified of Storage Area Modification
        4. 15.1.4. Security and Privacy Considerations
        5. 15.1.5. Caching Ajax Requests
          1. 15.1.5.1. The Base Document
          2. 15.1.5.2. Adding Caching Capabilities
        6. 15.1.6. Sending Client Data to the Server
      2. 15.2. SQL Local Database
        1. 15.2.1. Opening the Database
        2. 15.2.2. Creating Tables
        3. 15.2.3. Adding Data to Tables
        4. 15.2.4. Querying Data from the Tables
        5. 15.2.5. Updating Data
        6. 15.2.6. Using Database in Place of Storage
        7. 15.2.7. Handling Transaction and Query Errors
        8. 15.2.8. Maintaining Coherent Access with Versioning
        9. 15.2.9. Deleting the Database
          1. 15.2.9.1. With Desktop Safari
          2. 15.2.9.2. With Mobile Safari
        10. 15.2.10. Security Again
      3. 15.3. Offline Web Application Cache
        1. 15.3.1. How Does It Work?
        2. 15.3.2. The Manifest File
          1. 15.3.2.1. The CACHE Sections
          2. 15.3.2.2. The NETWORK Sections
          3. 15.3.2.3. The FALLBACK Sections
        3. 15.3.3. Controlling the Cache with JavaScript
        4. 15.3.4. Reacting to Events Sent by the Application Cache
        5. 15.3.5. Deleting Cache
        6. 15.3.6. Is the User Online?
      4. 15.4. Summary

Product information

  • Title: Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript
  • Author(s):
  • Release date: November 2010
  • Publisher(s): Apress
  • ISBN: 9781430230458