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. WebKits 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. Youll learn about WebKit and Mobile Safari, HTML5 and CSS3, vector graphics and multimedia support. Youll 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. Youll want to know about all the advantages, and Beginning iPhone & iPad Web Apps is the perfect starting point.
What youll 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 Apples 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
- Development Tools
- Development Environment
- Introducing Developer and Debugging Tools
- The Anatomy of a Web Application
- User Experience and Interface Guidelines
- Interesting CSS Features for Your Web Application User Interface
- Bitmap and Vector Graphics and Downloadable Fonts with Canvas and SVG
- Embedding Audio and Video Content in Your Web Application
- Handling Transformations, Animations, and Special Effects with CSS
- An Object-Oriented JavaScript Programming Primer
- Cross-Document Communication
- Ajax and Dynamic Content
- Using Touch and Gesture Events
- Location-Aware Web Applications
- A Better Handling of Client-Side Data Storage
- Source Code/Downloads
- 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.
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"








