book

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

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

by Chris Apers, Daniel Paterson

November 2010

Intermediate to advanced

508 pages

11h 58m

English

Apress

Read now

Unlock full access

Copyright
About the Authors
About the Technical Reviewer
Acknowledgments
Introduction
Who This Book Is ForWhat You Need to KnowWhat's in This BookAre You Ready?
I. Getting Started with Web App Development
1. Development Tools
1.1. The Source Editor1.1.1. Varanus Komodoensis1.1.2. Make Yourself Comfortable1.2. What About Dashcode?1.3. Using the Right Browser1.3.1. The WebKit1.3.2. The Gecko and the Fox1.3.3. Opera1.3.4. Internet Explorer, Lost at Sea1.4. Developing Web-Wise1.4.1. Acid...Acid...Acid1.4.2. HTML5 Conformance1.4.3. A Satellite in Your Browser1.5. Developing for iOS1.5.1. Using the iPhone and iPad Simulator1.5.2. Using a Real Device Anyway1.5.3. The ADC Is Your Friend1.6. Summary
2. Development Environment
2.1. Serving the Web Application2.2. Mac OS, Making Things Easy2.2.1. An Apache in Your Mac2.2.2. The Script Engine2.3. Windows, Choose Your Weapons2.3.1. An All-in-One Installation Process2.3.2. Security Settings2.4. Linux, Take Control2.5. Handling Multiple Hosts2.5.1. Unix-Based System2.5.2. Windows-Based System2.6. Configuring Multiple Web Sites2.6.1. Apache 2: Get Carried Away2.6.1.1. Checking the Configuration2.6.1.2. Configuring Your First Virtual Host2.6.2. The Windows Case2.7. Have You Made It?2.8. Bet You Have!
3. Introducing Developer and Debugging Tools
3.1. Making Friends with WebKit's Developer Tools3.1.1. Enabling the Develop Menu3.1.2. The Develop Menu Exposed3.1.3. Developing on Mobile Safari3.2. Overview of the Web Inspector3.2.1. The Developer Tools Window3.2.2. Error Notifications3.3. Master Your Code3.3.1. Make the Document Yours3.3.2. Dig Your Style3.3.3. Editing Styles3.3.4. Metrics3.3.4.1. Properties3.3.4.2. Event Listeners3.3.5. Advanced Search3.4. The Resources Viewer3.5. Debugging JavaScript3.5.1. Logging to the Console3.5.2. Using the Interactive Shell3.5.3. Let the Debugger Do the Job3.5.3.1. Breakpoints3.5.3.2. Stepping3.5.3.3. Watch Expressions3.5.3.4. Call Stack3.5.3.5. Scope Variables3.5.3.6. Exceptions3.6. The Life Cycle of Your Page3.7. Profiling Your Scripts3.7.1. Understanding the Profiles3.7.2. Filtering with the Search Field3.8. Client-Side Data Storage3.8.1. Database Storage3.8.2. Cookies3.8.3. Other Storage Features3.9. Auditing Your Page3.10. Still Unsure?3.11. Summary
II. Web App Design with HTML5 and CSS3

4. The Anatomy of a Web Application
4.1. The iPhone Revolution4.1.1. Belief in Web Apps4.1.2. But What is a Web App Exactly?4.2. Planet of the Apps: Who Rules4.2.1. Cross-Platform Master4.2.2. Hardware Access Is No Forbidden Weapon Anymore4.2.3. Free Your Content4.2.4. Release Model4.2.5. Web Apps: Not the Little Brother Anymore4.3. Web Apps on Mobile Safari4.3.1. Master the Browser4.3.2. Browser Metrics4.3.3. Think "Web App"4.4. Configuring the Viewport4.5. Seriously Appy: Using Stand-Alone Mode4.5.1. Showcasing a Proper Icon4.5.2. Running Your Application Full-Screen4.5.3. An Awesome Startup4.5.4. Tweaking the Status Bar4.5.5. Staying in Stand-Alone Mode4.6. Build Your First Web App Base Project4.6.1. Your Document Template in Komodo Edit4.6.2. Hiding Mobile Safari's Address Bar4.6.3. Handling Screen Orientation Changes4.6.4. Final Touch4.7. Ready to Go
5. User Experience and Interface Guidelines
5.1. From the Web on the Desktop to the Mobile Web5.1.1. Forget the Desktop5.1.2. Change Navigation Habits5.1.3. Show Ads Thoughtfully5.1.4. Let Users Decide by Themselves5.2. Simplicity and Ease of Use5.2.1. Avoid Clutter5.2.2. User Interface5.2.2.1. Adapt to Touch5.2.2.2. Adapt to Size5.3. Avoid Unnecessary Interaction5.3.1. Make Use of New Input Types Capabilities5.3.2. Ponder Upon User-Supplied Information5.3.3. Avoid Multiplying Steps5.4. The Spirit: Be Focused5.5. Make Things Responsive5.5.1. Make Your Web App Responsive5.5.2. Make Your Web App Reactive5.6. iOS Interface Design Good Practices5.6.1. Adaptability5.6.2. List vs. Icon Approach5.7. Considering UI Alternatives5.7.1. Mimicking the iOS UI5.7.2. Building the iPad Experience5.7.2.1. Not a Laptop, Not an iPhone5.7.2.2. Creating the Interface for the iPad5.8. Be Creative and Innovative5.9. Summary
6. Interesting CSS Features for Your Web Application User Interface
6.1. Improving the User Experience with CSS6.1.1. User Feedback6.1.2. Disabling Copy/Paste Functionalities6.1.3. Control Over Callout6.2. Selectors6.2.1. Overview of Available CSS Selectors6.2.2. Position in Suite Selectors: Structural Pseudoclasses6.3. Advanced Handling of Backgrounds6.3.1. Origin of the Background6.3.2. Global Background Clipping6.3.3. Text-Based Background Clipping6.3.4. Sizing the Background6.3.5. Developing a Photos-Like Gallery6.3.6. Multilayer Backgrounds6.4. Colors6.4.1. The Alpha Channel6.4.2. New Color Definitions6.5. Using Gradients6.5.1. Basic Syntax6.5.2. Changing the Size of the Gradient6.5.3. Complete Gradient Syntax6.5.4. Advanced Color Handling6.6. Boxes and Borders6.6.1. Box Sizing6.6.2. Rounded Box Corners6.6.3. Borders Drawn with Images6.7. Shadows6.7.1. Box Shadows6.7.2. Text Shadows6.7.3. Text Effect with Shadows and Outline6.8. Adding a Button to Your Header6.9. Columns Layout6.9.1. CSS Column Properties6.9.2. Porting Press Content to the Web6.10. The Flexible Box Model6.10.1. A Clean and Flexible Way to Handle Column Layouts6.10.2. Ordering Boxes6.10.3. Flexibility6.10.4. Packing and Alignment6.11. Targeting WebKit Specifically6.12. Summary
7. Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG
7.1. Working with the Canvas Area7.1.1. The Drawing Context7.1.2. Drawing Simple Shapes7.1.3. Colors, Gradients, and Patterns7.1.3.1. Using Gradients7.1.3.2. Defining Patterns7.1.4. More Complex Shapes with Paths7.1.4.1. Drawing Arcs7.1.4.2. Drawing Curves7.1.4.3. Line Styles7.1.4.4. Enhancing Your Menus with Style7.1.5. Applying Transformations7.1.6. Simplifying Drawing State Modifications7.1.7. Using Text7.1.7.1. Drawing the Text7.1.7.2. Text Baseline7.1.7.3. Text Alignment7.1.8. Shadows7.1.9. Clipping and Compositing7.1.9.1. Clipping to the Drawing Area7.1.9.2. Compositing and Global Transparency7.1.10. Working with Canvas Pixels7.2. Using Vector Graphics7.2.1. Inserting SVG into Your Documents7.2.2. Understanding the Coordinates System7.2.3. Drawing Shapes7.2.4. Interoperability7.2.5. Communication7.2.6. Animation with and Without Scripting7.2.7. Coping with Temporary Bugs7.3. Preinstalled and Downloadable Fonts7.4. Summary
8. Embedding Audio and Video Content in Your Web Application
8.1. Embedding Video Content8.1.1. Getting Information About the Video8.1.2. The Video Placeholder8.1.3. Playing the Video8.2. Embedding Audio Content8.3. Keep Things Reasonable8.4. Take Control Over Your Content8.4.1. Understanding and Using Ranges8.4.2. A Number of Supported Events8.5. Adding Subtitles and Chapters to Your Media8.5.1. Creating Your Own Custom Subtitles8.5.1.1. Displaying Subtitles8.5.1.2. Language Auto-selection8.5.1.3. Let the End User Choose8.5.2. Easier Media Browsing with Chapters8.6. Workarounds...Let's Go8.7. Media Content for the iPhone and iPad8.7.1. Understanding Video Formats8.7.2. Dealing with Supported Audio Formats8.7.3. Encoding for the Web8.7.3.1. Using QuickTime Player8.7.3.2. An Encoder Alternative8.8. Summary
9. Handling Transformations, Animations, and Special Effects with CSS
9.1. Transform Your Elements9.1.1. Checking Transform Support9.1.2. Applying Rotations9.1.3. Translating Element Coordinates9.1.4. Scaling Page Contents9.1.5. Distorting Elements9.1.6. Custom Transformations with Matrices9.1.7. The Origin of the Transformation9.2. Working in a Three-Dimensional Environment9.2.1. New Transform Functions9.2.2. Setting the Perspective9.2.3. Preserving the 3D Aspect9.2.4. Back Face Visibility9.3. Combining Styles with JavaScript9.3.1. Accessing Current Styles9.3.2. A Native Object to Compute Matrices9.4. Transitions9.4.1. The transition CSS Property9.4.2. Initiating a Transition9.4.3. Timing Function Curve9.4.4. Telling When the Transition Is Completed9.5. Getting Ready for a Cover Flow–Like Experience9.5.1. The Main Document9.5.2. The Cover Flow Animation9.5.3. Flipping the Current Cover9.5.4. Final Touch to the Animation9.5.5. Double-Check: Preventing Unexpected Behavior9.6. Advanced Animations and Key Frames9.6.1. Key Frames9.6.2. Starting and Timing the Animation9.6.3. Animation Properties9.6.4. The Evolution Curve9.6.5. Working with Events9.7. Special Effects with CSS9.7.1. Creating Reflections9.7.2. Using Real Masks9.8. Create an iOS-Like Tab Bar Using Masks9.8.1. Getting the Initial Tab Bar Ready9.8.2. A Placeholder for Icons9.8.3. Icons Management9.8.4. Creating Icons9.8.5. Custom Icons Using an Image9.9. Summary
III. Going Futher with JavaScript and Web Standards
10. An Object-Oriented JavaScript Programming Primer
10.1. From the Procedural Model...10.2. ...to Object-Oriented Programming10.2.1. A First Custom Object10.2.2. Using a Proper Constructor10.2.3. Better Performance with Prototype10.3. Implementing Inheritance10.3.1. Prototype-Based Inheritance10.3.2. Shared Properties10.3.3. The Prototype Chain10.4. The Execution Context10.4.1. Using the call() and apply() Methods10.4.2. Taking Care of the Execution Context10.4.3. Setting the Proper Context with Handlers and Callbacks10.5. Accessing Properties and Methods10.6. Defining Getters and Setters10.7. Code Isolation and Libraries10.7.1. Isolating Your Code10.7.2. Creating a Library10.8. Enhancing Your Spinner Animation10.9. Summary
11. Cross-Document Communication
11.1. Cross-Document Communication Limitations11.2. Communication, the HTML5 Way11.2.1. The Cross-Document Messaging API11.2.2. Data Type Support and Handling11.2.3. Security Considerations11.3. Case Study11.3.1. The Main Document11.3.2. The Hosted Document11.3.3. Let's Send a Message11.3.4. Handling the Response11.4. Specific Mobile Safari Behavior with <iframe>11.5. Working with Proper Windows11.5.1. Notify the Page Is Loaded11.5.2. Properties of the Window Object11.6. Encapsulating the API to Ease Communication11.6.1. An Object for the Host Document11.6.2. An Object for the Widget11.6.3. The Host Document and the Widgets11.7. Relaxing Subdomain Communication11.7.1. Changing the Domain11.7.2. Security11.8. The Last Message
12. Ajax and Dynamic Content
12.1. Building an HTTP Request12.1.1. Requests Using the XMLHttpRequest Object12.1.2. The open() Method12.1.3. Sending Requests Using GET or POST12.1.4. Handling the Request State12.1.5. Handling Progress Events12.1.6. Checking the Response12.2. Handling Return Formats12.2.1. Most Common Return Formats12.2.2. Parsing XML for Use in HTML Documents12.2.2.1. Parsing the DOM with JavaScript12.2.2.2. Using XML Style Sheet Transformations12.2.3. Specificities When Parsing JSON12.2.4. JSON Security Considerations12.3. Client-Side Rendering Using Returned Data12.3.1. Handling Template Variables12.3.2. Formatting Variables12.4. Cross-Origin Communication12.4.1. Using Proxies12.4.2. The JSONP Way12.4.3. The Cross-Origin Resource Sharing12.5. Real-Life Example: Display Twitter Trends12.5.1. The Twitter Trends Feed12.5.2. Fetching and Rendering Data12.6. Be Kind to the Waiting User12.6.1. Adding Visual Feedback12.6.2. Handling Excessive Waiting Times12.7. Summary
13. Using Touch and Gesture Events
13.1. How to Handle Events13.1.1. Calling Priority of Handlers13.1.2. The Capture Stage13.1.3. Control Over Event Propagation13.1.4. Preventing Default Behavior13.1.5. Handlers and Object Methods13.2. Classic Events with Mobile Safari13.2.1. Behavior of Mouse Events13.2.2. Scrolling Information13.3. Multi-Touch Events13.3.1. New Interaction Processes13.3.2. Handling Multi-Touch Events13.3.3. Unlimited Touch Points13.3.4. Cancelled Touch Events13.4. A Page View Built with Touch and Transform13.4.1. What We Are Going to Do13.4.2. The Container13.4.3. Bring Elements and Interaction13.4.4. Creating Custom Events13.4.5. Handling Custom Events13.5. Working with Precomputed Gestures13.6. Create Your Own Gestures13.6.1. One Code, Many Strokes13.6.2. The Bounding Box Object13.6.3. Registering User Strokes13.6.4. Using the Recognizer Object13.6.5. Improve Accuracy13.7. Summary
14. Location-Aware Web Applications
14.1. The Geolocation API14.1.1. Privacy Considerations14.1.2. Setup Considerations14.2. Getting the Current Position14.2.1. Longitude, Latitude, and More14.2.2. Handling Errors from Requests14.2.3. Accuracy, Timeout, and Cached Location14.3. Putting the User on a Map with Google Maps14.3.1. Showing the Map14.3.2. Centering the Map on the Location of the User14.3.3. Marking the Position of the User14.3.4. Showing Accuracy14.4. Tracking the User's Position14.4.1. Registering for Updates14.4.2. Specific Behavior of the Watcher14.4.3. Watching Position on Google Maps14.5. From Data to Math14.5.1. Distance Between Two Points14.5.2. Sharper Distance Between Two Points14.5.3. The Direction to Take14.6. Building a Compass Web App14.6.1. Create the Mobile Elements14.6.2. The Graduations14.6.3. The Needles14.6.4. The Dial Shine14.6.5. Render the Compass14.6.6. Add Elements to the Document14.6.7. Prepare the Document to Receive Location Data14.6.8. Use Location Data14.6.9. Animate the Compass14.6.10. Prevent Staggering Needles14.7. Summary
15. A Better Handling of Client-Side Data Storage
15.1. Different Storage Areas15.1.1. How to Use New Storage Capabilities15.1.2. Specific Behavior of sessionStorage15.1.3. Being Notified of Storage Area Modification15.1.4. Security and Privacy Considerations15.1.5. Caching Ajax Requests15.1.5.1. The Base Document15.1.5.2. Adding Caching Capabilities15.1.6. Sending Client Data to the Server15.2. SQL Local Database15.2.1. Opening the Database15.2.2. Creating Tables15.2.3. Adding Data to Tables15.2.4. Querying Data from the Tables15.2.5. Updating Data15.2.6. Using Database in Place of Storage15.2.7. Handling Transaction and Query Errors15.2.8. Maintaining Coherent Access with Versioning15.2.9. Deleting the Database15.2.9.1. With Desktop Safari15.2.9.2. With Mobile Safari15.2.10. Security Again15.3. Offline Web Application Cache15.3.1. How Does It Work?15.3.2. The Manifest File15.3.2.1. The CACHE Sections15.3.2.2. The NETWORK Sections15.3.2.3. The FALLBACK Sections15.3.3. Controlling the Cache with JavaScript15.3.4. Reacting to Events Sent by the Application Cache15.3.5. Deleting Cache15.3.6. Is the User Online?15.4. Summary

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

Chapter 9. Handling Transformations, Animations, and Special Effects with CSS

Desktop Safari has long enabled you to make advanced visual effects directly from the style sheets, and logically Mobile Safari inherits these capabilities. Not only is it possible to apply two- and three-dimensional effects to many elements of your pages, but it is now also possible to precisely define advanced animations to make your web applications visually more lively and attractive—all of this without using a single line of JavaScript or relying on external plug-ins. Again, Flash no longer is a necessity when moving away from still pages. These enhancements are available thanks to the new CSS3 specification, and there are some extra treats from WebKit itself, such ...

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

CSS3: Visual QuickStart Guide, Fifth Edition

Publisher Resources

ISBN: 9781430230458Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

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

by Chris Apers, Daniel Paterson

Chapter 9. Handling Transformations, Animations, and Special Effects with CSS

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.