Apress

Beginning iPhone and iPad Web Apps

Scripting with HTML5, CSS3, and JavaScript

By Chris Apers , Daniel Paterson

Beginning iPhone and iPad Web Apps Cover Image

Everything a web professional needs to stay ahead in the hot area of iPhone and iPad web app development.

Full Description

  • ISBN13: 978-1-4302-3045-8
  • 512 Pages
  • User Level: Intermediate to Advanced
  • Publication Date: December 14, 2010
  • Available eBook Formats: EPUB, MOBI, PDF
  • Print Book Price: $39.99
  • eBook Price: $27.99
Buy eBook Buy Print Book Add to Wishlist

Related Titles

Full Description

This book will help you join the thousands of successful iPhone apps developers without needing to learn Objective-C or the Cocoa touch APIs. If you want to apply your existing web development skills to iPhone and iPad development, then now you can. WebKit’s support for HTML5 means any web developer can create compelling apps for both the iPhone and the larger-screen iPad.

Beginning iPhone & iPad Web Apps takes you through the latest mobile web standards as well as the specific features of the iPhone and iPad. You’ll learn about WebKit and Mobile Safari, HTML5 and CSS3, vector graphics and multimedia support. You’ll discover the built-in hardware features of the iPhone and iPad and how best to take advantage of them.

The market for web apps for the iPhone and iPad is expanding rapidly. You’ll want to know about all the advantages, and Beginning iPhone & iPad Web Apps is the perfect starting point.

What you’ll learn

  • How to take your existing web skills and deploy them on iPad and iPhone
  • User interface design basics for both the smaller iPhone screen and the larger iPad display
  • The keys to web app development built into HTML5, WebKit, and Mobile Safari
  • How to support mobile-media with iPhone- and iPad-specific features
  • How to take advantage of advanced features of CSS3 for graphics
  • How to address Apple’s touch screen interface and interact with Cocoa touch APIs

Who this book is for

This book is for web designers and developers who want to use their hard-earned skills and knowledge to create compelling mobile web experiences for iPhone and iPad users.

Table of Contents

Table of Contents

  1. Development Tools
  2. Development Environment
  3. Introducing Developer and Debugging Tools
  4. The Anatomy of a Web Application
  5. User Experience and Interface Guidelines
  6. Interesting CSS Features for Your Web Application User Interface
  7. Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG
  8. Embedding Audio and Video Content in Your Web Application
  9. Handling Transformations, Animations, and Special Effects with CSS
  10. An Object-Oriented JavaScript Programming Primer
  11. Cross-Document Communication
  12. Ajax and Dynamic Content
  13. Using Touch and Gesture Events
  14. Location-Aware Web Applications
  15. A Better Handling of Client-Side Data Storage
Source Code/Downloads

Downloads are available to accompany this book.

Your operating system can likely extract zipped downloads automatically, but you may require software such as WinZip for PC, or StuffIt on a Mac.

Errata

If you think that you've found an error in this book, please let us know about it. You will find any confirmed erratum below, so you can check if your concern has already been addressed.

* Required Fields

On page 76:

Error in code:

<meta name="viewport" content="width=device-width;...>

The value of the "content" attribute is separated with ";" but that does not work. It should be ",".

On page 84:

The code on the page main.css is ok.
But in the source file there is missing a last ) on line 35

to(rgba(255,255,255,.05)) ) <<<<<

On page 86 and 88:

On page 86 the last parameter to addEventListener is "false" (appears twice on the page).

On page 88, the same parameter is now "true".
false was kept when testing the code and found to be working

On page 87:

The "case -90:" should set "landscape", not "portrait".

On page 92:

The code under "show ads thoughtfully" is not working well; click on the collapse ad does not show the ad.

The problem is the .ads class' "z-index:-1". Readjusting the z-index to 20 for example (and also adding a z-index : 40 to the .header-wrapper class - p.84) solves the issue.

On page 93:

Not possible to show advertising after it is closed.
The .ads style sheet has an index = -1 so you never touch it. I got it working like this:

<style>
.ads {
z-index: -1;
position: relative;
-webkit-transition: margin-top 0.35s ease-out;
border-bottom: 0;
margin: 0 auto 34px;
width: 320px;
}

.ads img { display: block; }

.tab:before {
color: red;
content: 'AD ';
}

.tab {
position: relative;
top: -34px;
background-image:-webkit-gradient(
linear, left top, left bottom,
from(black), to(#666));
color: white;
font: bold 11px/24px verdana;
height: 24px;
bottom: -24px;
left: 0;
width: 100%;
padding: 0 5px;
-webkit-box-sizing: border-box;
}
</style>
<script>
function hideAds() {
setTimeout(hide, 5000);
}

function hide() {
var ads = document.querySelector(".ads");
ads.style.marginTop = (-ads.offsetHeight) + "px";
}

function reveal() {
var ads = document.querySelector(".ads");
ads.style.marginTop = "";
hideAds();
}
</script>
</head>

<body onload="hideAds()" >
<div class="view">
<div class="header-wrapper">
<h1>Web App Header</h1>
</div>

<div class="ads">
<img src="some-ad.gif" alt="Advertising" width="320" height="50" />
</div>
<div class="tab" onclick="javascript:reveal();">
Apress sales. 20% off on all books.
</div>

<div class="group-wrapper">
<h2>iPhone</h2>
<p>Hello Aren!</p>
</div>

</div>

On page 168:

The svg spinner example is not working under iOS 4. It works fine in Safari 5.1 on Windows. No solution yet.

On page 209:

"xlink:herf" should read "xlink:href"