Safari® and WebKit Development for iPhone® OS 3.0

Safari® and WebKit Development for iPhone® OS 3.0

Released November 2009
Publisher(s): Wrox
ISBN: 9780470549667

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

The iPhone offers a compelling Web-based application development platform revolving around its built-in browser, Safari, which is built upon the open source WebKit framework. This must-have book serves as a hands-on guide to developing iPhone and iPod touch Web applications.

Beginning with an introduction to Web application development for iPhone, this unique book then covers invaluable information on working with mobile and touch technologies, utilizing iPhone UI frameworks, and designing, styling, and programming the interface. You'll discover how to move Web apps to native apps and much, much more.

  • Walks you through the process of developing Web applications for iPhone and iPod touch

  • Covers how to design and develop applications that emulate the look and feel of native iPhone apps.

  • Instructs on how your Web app can respond to finger touch events that are a core part of the iPhone event model.

  • Shows you how to create Web-based offline applications using the latest HTML 5 cache technologies

  • Explains the unique process of moving Web apps to native apps

  • Features a bonus chapter on optimizing and developing for third-party browsers

Completely compliant with the new iPhone OS 3.0, as well as latest enhancements to Safari on iPhone, this indispensable book is a must-have resource.

Note: CD-ROM/DVD and other supplementary materials are not included as part of eBook file.

Table of contents

  1. Copyright
  2. About the Author
  3. Credits
  4. Acknowledgments
  5. Introduction
    1. Who This Book Is For
    2. What This Book Covers
    3. What You Need to Use This Book
    4. Conventions
    5. Source Code
    6. Errata
  6. 1. Introducing Safari/WebKit Development for iPhone 3.0
    1. 1.1. Discovering the Safari/WebKit Platform
    2. 1.2. What's New in iPhone OS 3.0 for Web App Developers
    3. 1.3. Four Ways to Develop Web Apps for iPhone
    4. 1.4. The Finger Is Not a Mouse
    5. 1.5. Limitations and Constraints
    6. 1.6. Setting Up Your Development Environment on a Local Network
    7. 1.7. Summary
  7. 2. Working with Core Technologies
    1. 2.1. Exploring HTML 5 Media Elements
    2. 2.2. Scripting JavaScript
      1. 2.2.1. Syntax and Basic Rules
      2. 2.2.2. Variables
        1. 2.2.2.1. Declaring and Assigning Variables
        2. 2.2.2.2. Hanging Loose with Variable Types
        3. 2.2.2.3. Naming Variables
        4. 2.2.2.4. Accessing a Variable
        5. 2.2.2.5. Scope
        6. 2.2.2.6. JavaScript Naming Conventions
        7. 2.2.2.7. Working with Constants
      3. 2.2.3. Operators
      4. 2.2.4. Reserved Words
      5. 2.2.5. Basic Conditional Expressions
        1. 2.2.5.1. The if Statement
        2. 2.2.5.2. The if/else Statement
        3. 2.2.5.3. Chaining if and if/else
        4. 2.2.5.4. The switch Statement
      6. 2.2.6. Loops
        1. 2.2.6.1. The for Loop
        2. 2.2.6.2. while and do/while Loops
      7. 2.2.7. Comments
        1. 2.2.7.1. Single-Line Comments
        2. 2.2.7.2. Multiline Comments
        3. 2.2.7.3. Using JSDoc Comments
      8. 2.2.8. Functions
        1. 2.2.8.1. Creating a Function
        2. 2.2.8.2. Creating an Inline Function
        3. 2.2.8.3. Overloading Functions
      9. 2.2.9. Data Types
        1. 2.2.9.1. Strings
        2. 2.2.9.2. Numbers
        3. 2.2.9.3. Boolean Values
        4. 2.2.9.4. Null Values
        5. 2.2.9.5. Undefined Values
        6. 2.2.9.6. Arrays
          1. 2.2.9.6.1. Creating an Array
          2. 2.2.9.6.2. Adding Items to an Array
          3. 2.2.9.6.3. Storing Multiple Types in an Array
          4. 2.2.9.6.4. Getting and Setting the Size of an Array
          5. 2.2.9.6.5. Accessing Items in an Array
          6. 2.2.9.6.6. Passing by Reference or Value?
    3. 2.3. The Document Object Model
      1. 2.3.1. The DOM as a Tree
      2. 2.3.2. Understanding Node Types
      3. 2.3.3. Accessing the DOM from JavaScript
        1. 2.3.3.1. Accessing a Specific Element
        2. 2.3.3.2. Accessing a Set of Elements
        3. 2.3.3.3. Accessing Family Members
        4. 2.3.3.4. Retrieving Attributes
          1. 2.3.3.4.1. Accessing All Attributes
          2. 2.3.3.4.2. Accessing a Specific Attribute
      4. 2.3.4. Manipulating the DOM
        1. 2.3.4.1. Creating an Element and Other Nodes
        2. 2.3.4.2. Adding a Node to the DOM
        3. 2.3.4.3. Creating Other Elements
        4. 2.3.4.4. Setting a Value to an Attribute
        5. 2.3.4.5. Moving a Node
        6. 2.3.4.6. Cloning a Node
        7. 2.3.4.7. Removing a Node from the DOM
        8. 2.3.4.8. Removing an Attribute
    4. 2.4. Summary
  8. 3. Building with Web App Frameworks
    1. 3.1. iWebKit
      1. 3.1.1. Enabling iWebKit
      2. 3.1.2. Core UI Elements
        1. 3.1.2.1. The Top Bar
        2. 3.1.2.2. The Content Region
        3. 3.1.2.3. The Content Box Container
        4. 3.1.2.4. The Text Box
        5. 3.1.2.5. The Text Box Header
        6. 3.1.2.6. Menu Items
        7. 3.1.2.7. The Gray Header
        8. 3.1.2.8. The Footer
      3. 3.1.3. Special Page Types
        1. 3.1.3.1. A Simple List Page with Groupings
          1. 3.1.3.1.1. The Simple Text List Item
          2. 3.1.3.1.2. The Image List Item
          3. 3.1.3.1.3. The Nonlinked List Item
          4. 3.1.3.1.4. Pagination
          5. 3.1.3.1.5. The Group Title
        2. 3.1.3.2. The Music List Page Type
      4. 3.1.4. Form Elements
      5. 3.1.5. Popup Dialogs
    2. 3.2. iUI
      1. 3.2.1. Structuring the App
      2. 3.2.2. Enabling iUI
      3. 3.2.3. The Top Bar
      4. 3.2.4. The Main Screen
      5. 3.2.5. A Simple List Page
      6. 3.2.6. Form Controls
    3. 3.3. UiUIKit
      1. 3.3.1. Enabling UiUIKit
      2. 3.3.2. The Top Bar
      3. 3.3.3. The Side-to-Side Menu List Page
      4. 3.3.4. The Destination Page
      5. 3.3.5. The Plastic Page
    4. 3.4. Summary
  9. 4. Designing a Usable and Navigable UI
    1. 4.1. The iPhone Viewport
    2. 4.2. Exploring Native iPhone Applications
      1. 4.2.1. Navigation List-Based UI Design
      2. 4.2.2. Application Modes
    3. 4.3. Screen Layout: Emulating Apple Design
      1. 4.3.1. The Title Bar
      2. 4.3.2. Edge-to-Edge Navigation Lists
      3. 4.3.3. Rounded Rectangle Design Destination Pages
      4. 4.3.4. The Button Bar
    4. 4.4. Designing for Touch
    5. 4.5. Working with Fonts
    6. 4.6. Best Practices in iPhone UI Design
    7. 4.7. Finishing Touches: Making It Look Like a Native App
      1. 4.7.1. Launching in Full-Screen Mode
      2. 4.7.2. Customizing the Status Bar
      3. 4.7.3. Adding a WebClip Icon
    8. 4.8. Summary
  10. 5. Styling with CSS
    1. 5.1. CSS Selectors Supported in Safari
    2. 5.2. Text Styles
      1. 5.2.1. Controlling Text Sizing with -webkit-text-size-adjust
      2. 5.2.2. Handling Overflowed Text with text-overflow
      3. 5.2.3. Subtle Shadows with text-shadow
    3. 5.3. Styling Block Elements
      1. 5.3.1. Image-Based Borders with -webkit-border-image
      2. 5.3.2. Rounded Corners with -webkit-border-radius
      3. 5.3.3. Gradient Push Buttons with -webkit-appearance
      4. 5.3.4. Multiple Background Images
    4. 5.4. Setting Transparencies
    5. 5.5. Creating CSS-Based iPhone Buttons
    6. 5.6. Identifying Incompatibilities
    7. 5.7. Summary
  11. 6. Programming the Interface
    1. 6.1. Top Level of Application
      1. 6.1.1. Creating index.html
      2. 6.1.2. Examining Top-Level Styles
      3. 6.1.3. Adding the Top Toolbar
      4. 6.1.4. Adding a Top-Level Navigation Menu
    2. 6.2. Displaying a Panel with an Internal URL
    3. 6.3. Displaying Ajax Data from an External URL
    4. 6.4. Designing for Long Navigation Lists
    5. 6.5. Creating a Destination Page
    6. 6.6. Adding a Dialog
    7. 6.7. Designing a Contact Us Page with Integrated iPhone Services
    8. 6.8. Scripting UI Behavior
      1. 6.8.1. On Document Load
      2. 6.8.2. Loading a Standard iUI Page
      3. 6.8.3. Handling Link Clicks
      4. 6.8.4. Handling Ajax Links
      5. 6.8.5. Loading a Dialog
    9. 6.9. Summary
  12. 7. Handling Touch Interactions and Events
    1. 7.1. The Three Types of Touch Events
      1. 7.1.1. Mouse-Emulation Events
        1. 7.1.1.1. Many Events Are Handled by Default
        2. 7.1.1.2. Conditional Events
        3. 7.1.1.3. Mouse Events: Think "Click," Not "Move"
        4. 7.1.1.4. Click-Enabling Elements
        5. 7.1.1.5. Event Flow
        6. 7.1.1.6. Unsupported Events
        7. 7.1.1.7. Capturing Two-Finger Scrolling
      2. 7.1.2. Touch Events
      3. 7.1.3. Gesture Events
    2. 7.2. Orientation Change
      1. 7.2.1. Detecting an Orientation Change
      2. 7.2.2. Changing a Style Sheet When the Orientation Changes
      3. 7.2.3. Changing Element Positioning Based on Orientation Change
    3. 7.3. Trapping for Key Events with the On-Screen Keyboard
    4. 7.4. Summary
  13. 8. Programming the Canvas
    1. 8.1. Identifying the User Agent
    2. 8.2. Programming the iPhone Canvas
    3. 8.3. Defining the Canvas Element
    4. 8.4. Getting a Context
    5. 8.5. Drawing a Simple Rectangle
    6. 8.6. Drawing Other Shapes
    7. 8.7. Drawing an Image
    8. 8.8. Adding Color and Transparency
    9. 8.9. Creating an Image Pattern
    10. 8.10. Summary
  14. 9. Special Effects and Advanced Graphics
    1. 9.1. Gradients
      1. 9.1.1. Creating CSS Gradients
      2. 9.1.2. Creating Gradients with JavaScript
    2. 9.2. Adding Shadows
    3. 9.3. Adding Reflections
    4. 9.4. Working with Masks
    5. 9.5. Creating Transform Effects
    6. 9.6. Creating Animations
    7. 9.7. Summary
  15. 10. Integrating with iPhone Services
    1. 10.1. Preparing the iProspector Application Shell
      1. 10.1.1. Creating the Contact Header
      2. 10.1.2. Creating the cui.css Style Sheet
    2. 10.2. Making Phone Calls from Your Application
      1. 10.2.1. Creating Service Links
    3. 10.3. Sending E-Mails
    4. 10.4. Sending SMS Messages
    5. 10.5. Pointing on Google Maps
      1. 10.5.1. Creating a Contacts Address Box
      2. 10.5.2. Creating Service Buttons
    6. 10.6. Summary
  16. 11. Offline Applications
    1. 11.1. The HTML 5 Offline Application Cache
      1. 11.1.1. Creating a Manifest File
      2. 11.1.2. Referencing the Manifest File
      3. 11.1.3. Programmatically Controlling the Cache
      4. 11.1.4. Checking the Connection Status
      5. 11.1.5. Putting It All Together
    2. 11.2. Using Key-Value Storage
      1. 11.2.1. Saving a Key-Value
      2. 11.2.2. Loading Key-Value Data
      3. 11.2.3. Deleting Key-Value Data
      4. 11.2.4. Putting It All Together
    3. 11.3. Going SQL with the JavaScript Database
      1. 11.3.1. Opening a Database
      2. 11.3.2. Querying a Table
    4. 11.4. Summary
  17. 12. Enabling and Optimizing Web Sites for the iPhone and iPod Touch
    1. 12.1. Tier 1: iPhone/iPod touch Compatibility
    2. 12.2. Tier 2: Navigation-Friendly Web Sites
      1. 12.2.1. Working with the Viewport
      2. 12.2.2. Turning Your Page into Blocks
      3. 12.2.3. Defining Multiple Columns (Future Use)
    3. 12.3. Tier 3: Custom Styling
      1. 12.3.1. Media Queries
      2. 12.3.2. Text Size Adjustment
      3. 12.3.3. Case Study
    4. 12.4. Tier 4: Parallel Sites
      1. 12.4.1. Avoid Handcuffs, Offer Freedom
      2. 12.4.2. Transform a Site to an iPhone Design
    5. 12.5. Summary
  18. 13. Bandwidth and Performance Optimizations
    1. 13.1. Optimization Strategies
    2. 13.2. Best Practices to Minimize Bandwidth
      1. 13.2.1. General
      2. 13.2.2. Images
      3. 13.2.3. CSS and JavaScript
    3. 13.3. Compressing Your Application
      1. 13.3.1. Gzip File Compression
      2. 13.3.2. JavaScript Code Compression
    4. 13.4. JavaScript Performance Optimizations
      1. 13.4.1. Smart DOM Access
        1. 13.4.1.1. Cache DOM References
        2. 13.4.1.2. Offline DOM Manipulation
        3. 13.4.1.3. Combining document.write() Calls
        4. 13.4.1.4. Using the Window Object
    5. 13.5. Local and Global Variables
    6. 13.6. Dot Notation and Property Lookups
      1. 13.6.1. Avoiding Nested Properties
      2. 13.6.2. Accessing a Named Object
      3. 13.6.3. Property Lookups Inside Loops
      4. 13.6.4. String Concatenation
    7. 13.7. What to Do and Not to Do
    8. 13.8. Summary
  19. 14. Packaging Apps as Bookmarks: Bookmarklets and Data URLs
    1. 14.1. Bookmarklets
      1. 14.1.1. Adding a Bookmarklet to Safari for iPhone
      2. 14.1.2. Exploring How Bookmarklets Can Be Used
    2. 14.2. Storing an Application in a Data URL
      1. 14.2.1. Constraints and Issues with Using Data URLs
      2. 14.2.2. Creating a Data URL App
        1. 14.2.2.1. Encoding Images
        2. 14.2.2.2. Converting Your Application to a Data URL
    3. 14.3. Summary
  20. 15. Debug and Deploy
    1. 15.1. Simulating the iPhone on Your Development Computer
      1. 15.1.1. The SDK's iPhone Simulator
      2. 15.1.2. iPhoney
      3. 15.1.3. Using Safari for Mac or Windows
        1. 15.1.3.1. Changing Safari's User Agent String
        2. 15.1.3.2. Changing the Window Size
    2. 15.2. Working with Desktop Safari Debugging Tools
      1. 15.2.1. Working with the Develop Menu
      2. 15.2.2. Working with the Safari Web Inspector
      3. 15.2.3. Working with the Scripts Inspector
    3. 15.3. Debugging the iPhone
      1. 15.3.1. The Debug Console
      2. 15.3.2. The DOM Viewer
        1. 15.3.2.1. Starting the DOM Viewer
        2. 15.3.2.2. Specifying a Root Node
    4. 15.4. Summary
  21. 16. The iPhone SDK: From Web App to Native App
    1. 16.1. Comparing the Strengths of Web Apps and Native Apps
      1. 16.1.1. Web App Advantages
      2. 16.1.2. Native App Advantages
    2. 16.2. Knowing When It's Time to Port Your App
    3. 16.3. Peeking into the iPhone SDK
      1. 16.3.1. The SDK Process
      2. 16.3.2. iPhone SDK Tools
    4. 16.4. PhoneGap: A Hybrid Solution
    5. 16.5. Summary

Product information

  • Title: Safari® and WebKit Development for iPhone® OS 3.0
  • Author(s):
  • Release date: November 2009
  • Publisher(s): Wrox
  • ISBN: 9780470549667