Mobile HTML5
Estelle Weyl
Beijing Cambridge Farnham Kln Sebastopol Tokyo
Special Upgrade Offer
If you purchased this ebook directly from oreilly.com, you have the following benefits:
DRM-free ebooksuse your ebooks across devices without restrictions or limitations
Multiple formatsuse on your laptop, tablet, or phone
Lifetime access, with free updates
Dropbox syncingyour files, anywhere
If you purchased this ebook from another retailer, you can upgrade your ebook to take advantage of all these benefits for just $4.99. to access your ebook upgrade.
Please note that upgrade offers are not available from sample content.
Introduction
Were going to learn how to develop mobile web applications. Note the word web. This book focuses on web application development for mobile devices like Android, iPod, iPhone, BlackBerry, and tablets. This book is not about native application development requiring the iOS or Android SDK. Nothing we will learn is operating system specific.
Mobile web applications are websites or web applications that leverage the markup of desktop web applications with the functionality of touch-enabled devices. Web applications, whether accessed via a phone, tablet, or laptop, are built with HTML, CSS, and JavaScript, optionally with image, video, and audio assets and server-side technologies.
By upgrading to using newer HTML5, CSS3, and JavaScript features, we can create web applications with the look and feel of native applications. Because mobile web apps are web based, they are compatible with desktops, smartphones, tablets, and any other device that has a modern browser. Because our web applications are web based, we can distribute them directly to our users, with no need to be listed in the Apple App Store or Google Play, with their sometimes complex, expensive, and lengthy approval processes.
This book will teach you what you need to know to create applications that work in a browser using CSS3, HTML5,[] and JavaScript. This is about technologies you already know: technologies that are portable to most devices. Everything discussed is operating system agnostic.
In other words, what we learn will not only work on the iPhone, the iPad, and Android devices, but also on other mobile platforms, including Firefox OS and Windows Phone, and on modern desktop browsers and other devices that have a modern browser (such as gaming consoles like the Wii). Yes, this book is focusing on developing for mobile, but what you learn here is usable on a plethora of devices, big and small, as long as that device has a browser that adheres to modern web standards.
The abilities of applications on native platforms stayed rather consistent for over 10 years, but the past several years have seen the web platform increase its ability to handle web applications, with almost the same fidelity as native applications.
The iPhone added canvas, application cache, database, and SVG. Safari 4.0 included those features, adding video, audio, and web workers. Later in 2009, we saw the addition of geolocation and canvasnot just to the iPhone, but to Chrome, Opera, Firefox, Internet Explorer, and Android.
With web browsers, weve been able to take advantage of HTML, CSS, the DOM, SVG, and XHR for years. In this book, we expand our horizons to include HTML5 and CSS3: the skills needed to make web applications that are comparable to native applications, features that are already supported in modern mobile and desktop browsers.
Native Applications Versus Web Applications
Yes, you can sell ] annual fees, and sales fees, and market directly to your consumer base via your website and through other marketing channels. Yes, you miss the very slim opportunity of having your application noticed among the hundreds of thousands of applications available through the app store, but the benefits of web application versus native application development greatly outweigh the costs.
With web applications, it is easier to build and iterate. You can make changes to your live web application whenever you wantmultiple times a day if need be.
With a native iPhone app for example, you have the 3-week+ approval process. Once your application is approved and pushed to production, you have to wait for users to sync and update their application. With web applications built using CSS3 and HTML5, your changes are live basically immediately, but can also be accessible when the user is offlinejust like native applications.
If you accidentally forget to include your boss or misspell your mothers name in the credits of your native application, those oopsies are going to haunt you not only until you are able to push the correction through the app store, but theyll stick around until the user syncs your app with an updated iTunes download. That could be a long time.
Note
I am skilled at becoming obsolete. I never updated from the original versions of Bump, Twitterific, and Gowalla on my original iPhone. I assume I am not the only one who has antique iPhone applications. Dont assume that your native application users update their applications.
By using HTML5 to develop your web applications, your application can be available offline, just like a native application. Although the native application can take weeks to update, the web application can be forced to update itself the next time your application is used when connected to the Internet. Well cover this when we discuss offline applications in .
HTML5 web application development takes advantage of the HTML and CSS skills you already know. Were building upon your existing skills rather than asking you to learn completely new ones. Not a different technology, not a different platform. Not a new language that only works on one platform!
Using browser markup of HTML5 and CSS3 gives you the potential to be cross-platform over time. Native iPhone applications work on the iPod touch and on ithe Phone, and most likely on the iPad, but not on Windows, BlackBerry, or Android (and they never will). Native Android applications work only on Android devices, not on iOS-based products. Native GoogleTV applications will never work on iOS either. Et cetera. Unlike native applications, your HTML5/CSS3 web applications can be made to work on all WebKit, IE10, Blink, Opera Mobile (not mini), and Firefox mobile browsers. And your web applications will work on other devices that have modern browsers that by default support features of HTML5 and CSS3.
Web applications built with HTML5 and CSS3, for the most part, already work in modern browsers. While not supported in Internet Explorer 8 or earlier versions, Internet Explorer 9 has support for some, but not all, of HTML5 and CSS3. Internet Explorer 10 has come a long, long way in supporting many features in the ever-evolving specifications.
Since the release of the iPhone SDK in 2008, most of the applications for the iPhone have been created as native apps. Before the release of the SDK, we only had web applications. People moved from web applications to native applications because HTML5 just wasnt ready. Now that mobile browsers support many HTML5 APIs, we are able to create fast, responsive, and visually appealing web applications.
One last reason: video! The iPhone, iPod, and iPad do not support Flash, and they never will. However, all iOS devices have the Safari WebKit browser that supports the HTML5 element, which well discuss in .
Pep Talk (or Leaving Old Internet Explorer Behind)