book

Safari® and WebKit Development for iPhone® OS 3.0

Name: Safari® and WebKit Development for iPhone® OS 3.0
Author: Richard Wagner
ISBN: 9780470549667

by Richard Wagner

November 2009

Intermediate to advanced

407 pages

8h 16m

English

Wrox

Read now

Unlock full access

Copyright
About the Author
Credits
Acknowledgments
Introduction
Who This Book Is ForWhat This Book CoversWhat You Need to Use This BookConventionsSource CodeErrata
1. Introducing Safari/WebKit Development for iPhone 3.0
1.1. Discovering the Safari/WebKit Platform1.2. What's New in iPhone OS 3.0 for Web App Developers1.3. Four Ways to Develop Web Apps for iPhone1.4. The Finger Is Not a Mouse1.5. Limitations and Constraints1.6. Setting Up Your Development Environment on a Local Network1.7. Summary
2. Working with Core Technologies
2.1. Exploring HTML 5 Media Elements2.2. Scripting JavaScript2.2.1. Syntax and Basic Rules2.2.2. Variables2.2.2.1. Declaring and Assigning Variables2.2.2.2. Hanging Loose with Variable Types2.2.2.3. Naming Variables2.2.2.4. Accessing a Variable2.2.2.5. Scope2.2.2.6. JavaScript Naming Conventions2.2.2.7. Working with Constants2.2.3. Operators2.2.4. Reserved Words2.2.5. Basic Conditional Expressions2.2.5.1. The if Statement2.2.5.2. The if/else Statement2.2.5.3. Chaining if and if/else2.2.5.4. The switch Statement2.2.6. Loops2.2.6.1. The for Loop2.2.6.2. while and do/while Loops2.2.7. Comments2.2.7.1. Single-Line Comments2.2.7.2. Multiline Comments2.2.7.3. Using JSDoc Comments2.2.8. Functions2.2.8.1. Creating a Function2.2.8.2. Creating an Inline Function2.2.8.3. Overloading Functions2.2.9. Data Types2.2.9.1. Strings2.2.9.2. Numbers2.2.9.3. Boolean Values2.2.9.4. Null Values2.2.9.5. Undefined Values2.2.9.6. Arrays2.2.9.6.1. Creating an Array2.2.9.6.2. Adding Items to an Array2.2.9.6.3. Storing Multiple Types in an Array2.2.9.6.4. Getting and Setting the Size of an Array2.2.9.6.5. Accessing Items in an Array2.2.9.6.6. Passing by Reference or Value?2.3. The Document Object Model2.3.1. The DOM as a Tree2.3.2. Understanding Node Types2.3.3. Accessing the DOM from JavaScript2.3.3.1. Accessing a Specific Element2.3.3.2. Accessing a Set of Elements2.3.3.3. Accessing Family Members2.3.3.4. Retrieving Attributes2.3.3.4.1. Accessing All Attributes2.3.3.4.2. Accessing a Specific Attribute2.3.4. Manipulating the DOM2.3.4.1. Creating an Element and Other Nodes2.3.4.2. Adding a Node to the DOM2.3.4.3. Creating Other Elements2.3.4.4. Setting a Value to an Attribute2.3.4.5. Moving a Node2.3.4.6. Cloning a Node2.3.4.7. Removing a Node from the DOM2.3.4.8. Removing an Attribute2.4. Summary
3. Building with Web App Frameworks
3.1. iWebKit3.1.1. Enabling iWebKit3.1.2. Core UI Elements3.1.2.1. The Top Bar3.1.2.2. The Content Region3.1.2.3. The Content Box Container3.1.2.4. The Text Box3.1.2.5. The Text Box Header3.1.2.6. Menu Items3.1.2.7. The Gray Header3.1.2.8. The Footer3.1.3. Special Page Types3.1.3.1. A Simple List Page with Groupings3.1.3.1.1. The Simple Text List Item3.1.3.1.2. The Image List Item3.1.3.1.3. The Nonlinked List Item3.1.3.1.4. Pagination3.1.3.1.5. The Group Title3.1.3.2. The Music List Page Type3.1.4. Form Elements3.1.5. Popup Dialogs3.2. iUI3.2.1. Structuring the App3.2.2. Enabling iUI3.2.3. The Top Bar3.2.4. The Main Screen3.2.5. A Simple List Page3.2.6. Form Controls3.3. UiUIKit3.3.1. Enabling UiUIKit3.3.2. The Top Bar3.3.3. The Side-to-Side Menu List Page3.3.4. The Destination Page3.3.5. The Plastic Page3.4. Summary
4. Designing a Usable and Navigable UI
4.1. The iPhone Viewport4.2. Exploring Native iPhone Applications4.2.1. Navigation List-Based UI Design4.2.2. Application Modes4.3. Screen Layout: Emulating Apple Design4.3.1. The Title Bar4.3.2. Edge-to-Edge Navigation Lists4.3.3. Rounded Rectangle Design Destination Pages4.3.4. The Button Bar4.4. Designing for Touch4.5. Working with Fonts4.6. Best Practices in iPhone UI Design4.7. Finishing Touches: Making It Look Like a Native App4.7.1. Launching in Full-Screen Mode4.7.2. Customizing the Status Bar4.7.3. Adding a WebClip Icon4.8. Summary
5. Styling with CSS
5.1. CSS Selectors Supported in Safari5.2. Text Styles5.2.1. Controlling Text Sizing with -webkit-text-size-adjust5.2.2. Handling Overflowed Text with text-overflow5.2.3. Subtle Shadows with text-shadow5.3. Styling Block Elements5.3.1. Image-Based Borders with -webkit-border-image5.3.2. Rounded Corners with -webkit-border-radius5.3.3. Gradient Push Buttons with -webkit-appearance5.3.4. Multiple Background Images5.4. Setting Transparencies5.5. Creating CSS-Based iPhone Buttons5.6. Identifying Incompatibilities5.7. Summary

6. Programming the Interface
6.1. Top Level of Application6.1.1. Creating index.html6.1.2. Examining Top-Level Styles6.1.3. Adding the Top Toolbar6.1.4. Adding a Top-Level Navigation Menu6.2. Displaying a Panel with an Internal URL6.3. Displaying Ajax Data from an External URL6.4. Designing for Long Navigation Lists6.5. Creating a Destination Page6.6. Adding a Dialog6.7. Designing a Contact Us Page with Integrated iPhone Services6.8. Scripting UI Behavior6.8.1. On Document Load6.8.2. Loading a Standard iUI Page6.8.3. Handling Link Clicks6.8.4. Handling Ajax Links6.8.5. Loading a Dialog6.9. Summary
7. Handling Touch Interactions and Events
7.1. The Three Types of Touch Events7.1.1. Mouse-Emulation Events7.1.1.1. Many Events Are Handled by Default7.1.1.2. Conditional Events7.1.1.3. Mouse Events: Think "Click," Not "Move"7.1.1.4. Click-Enabling Elements7.1.1.5. Event Flow7.1.1.6. Unsupported Events7.1.1.7. Capturing Two-Finger Scrolling7.1.2. Touch Events7.1.3. Gesture Events7.2. Orientation Change7.2.1. Detecting an Orientation Change7.2.2. Changing a Style Sheet When the Orientation Changes7.2.3. Changing Element Positioning Based on Orientation Change7.3. Trapping for Key Events with the On-Screen Keyboard7.4. Summary
8. Programming the Canvas
8.1. Identifying the User Agent8.2. Programming the iPhone Canvas8.3. Defining the Canvas Element8.4. Getting a Context8.5. Drawing a Simple Rectangle8.6. Drawing Other Shapes8.7. Drawing an Image8.8. Adding Color and Transparency8.9. Creating an Image Pattern8.10. Summary
9. Special Effects and Advanced Graphics
9.1. Gradients9.1.1. Creating CSS Gradients9.1.2. Creating Gradients with JavaScript9.2. Adding Shadows9.3. Adding Reflections9.4. Working with Masks9.5. Creating Transform Effects9.6. Creating Animations9.7. Summary
10. Integrating with iPhone Services
10.1. Preparing the iProspector Application Shell10.1.1. Creating the Contact Header10.1.2. Creating the cui.css Style Sheet10.2. Making Phone Calls from Your Application10.2.1. Creating Service Links10.3. Sending E-Mails10.4. Sending SMS Messages10.5. Pointing on Google Maps10.5.1. Creating a Contacts Address Box10.5.2. Creating Service Buttons10.6. Summary
11. Offline Applications
11.1. The HTML 5 Offline Application Cache11.1.1. Creating a Manifest File11.1.2. Referencing the Manifest File11.1.3. Programmatically Controlling the Cache11.1.4. Checking the Connection Status11.1.5. Putting It All Together11.2. Using Key-Value Storage11.2.1. Saving a Key-Value11.2.2. Loading Key-Value Data11.2.3. Deleting Key-Value Data11.2.4. Putting It All Together11.3. Going SQL with the JavaScript Database11.3.1. Opening a Database11.3.2. Querying a Table11.4. Summary
12. Enabling and Optimizing Web Sites for the iPhone and iPod Touch
12.1. Tier 1: iPhone/iPod touch Compatibility12.2. Tier 2: Navigation-Friendly Web Sites12.2.1. Working with the Viewport12.2.2. Turning Your Page into Blocks12.2.3. Defining Multiple Columns (Future Use)12.3. Tier 3: Custom Styling12.3.1. Media Queries12.3.2. Text Size Adjustment12.3.3. Case Study12.4. Tier 4: Parallel Sites12.4.1. Avoid Handcuffs, Offer Freedom12.4.2. Transform a Site to an iPhone Design12.5. Summary
13. Bandwidth and Performance Optimizations
13.1. Optimization Strategies13.2. Best Practices to Minimize Bandwidth13.2.1. General13.2.2. Images13.2.3. CSS and JavaScript13.3. Compressing Your Application13.3.1. Gzip File Compression13.3.2. JavaScript Code Compression13.4. JavaScript Performance Optimizations13.4.1. Smart DOM Access13.4.1.1. Cache DOM References13.4.1.2. Offline DOM Manipulation13.4.1.3. Combining document.write() Calls13.4.1.4. Using the Window Object13.5. Local and Global Variables13.6. Dot Notation and Property Lookups13.6.1. Avoiding Nested Properties13.6.2. Accessing a Named Object13.6.3. Property Lookups Inside Loops13.6.4. String Concatenation13.7. What to Do and Not to Do13.8. Summary
14. Packaging Apps as Bookmarks: Bookmarklets and Data URLs
14.1. Bookmarklets14.1.1. Adding a Bookmarklet to Safari for iPhone14.1.2. Exploring How Bookmarklets Can Be Used14.2. Storing an Application in a Data URL14.2.1. Constraints and Issues with Using Data URLs14.2.2. Creating a Data URL App14.2.2.1. Encoding Images14.2.2.2. Converting Your Application to a Data URL14.3. Summary
15. Debug and Deploy
15.1. Simulating the iPhone on Your Development Computer15.1.1. The SDK's iPhone Simulator15.1.2. iPhoney15.1.3. Using Safari for Mac or Windows15.1.3.1. Changing Safari's User Agent String15.1.3.2. Changing the Window Size15.2. Working with Desktop Safari Debugging Tools15.2.1. Working with the Develop Menu15.2.2. Working with the Safari Web Inspector15.2.3. Working with the Scripts Inspector15.3. Debugging the iPhone15.3.1. The Debug Console15.3.2. The DOM Viewer15.3.2.1. Starting the DOM Viewer15.3.2.2. Specifying a Root Node15.4. Summary
16. The iPhone SDK: From Web App to Native App
16.1. Comparing the Strengths of Web Apps and Native Apps16.1.1. Web App Advantages16.1.2. Native App Advantages16.2. Knowing When It's Time to Port Your App16.3. Peeking into the iPhone SDK16.3.1. The SDK Process16.3.2. iPhone SDK Tools16.4. PhoneGap: A Hybrid Solution16.5. Summary

Content preview from Safari® and WebKit Development for iPhone® OS 3.0

Introduction

The amazing success of the iPhone over the past two years clearly indicates that application developers are entering a brave new world of sophisticated, multifunctional mobile applications. No longer do applications and various media need to live in separate silos. Instead, mobile Web-based applications can bring together elements of Web 2.0 apps, traditional desktop apps, multimedia video and audio, and cell phones.

This book covers the various aspects of developing Web-based applications for the iPhone and iPod touch. Specifically, you will discover how to create a mobile application from the ground up, utilize existing open source frameworks to speed up your development times, emulate the look and feel of built-in Apple applications, capture finger touch interactions, use Ajax to load external pages, and optimize applications for WiFi and 3G networks.

Who This Book Is For

This book is aimed primarily for Web developers already experienced in Web technologies who want to build new applications for iPhone or migrate existing Web apps to this platform. In general, readers should have a working knowledge of the following technologies:

HTML/XHTML
CSS
JavaScript
Ajax

However, if you are less experienced working with these technologies, be sure to take advantage of the primer at the start of this book.

What This Book Covers

This book introduces readers to the Web application platform for iPhone OS 3.0. It guides readers through the process of building new applications from scratch ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Extending MFC Applications with the .NET Framework

Publisher Resources

ISBN: 9780470549667Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design