Campensato O. - jQuery, CSS3, and HTML5 for Mobile/Desktop Devices: A Primer

jQuery, CSS3, AND HTML5 FOR MOBILE AND DESKTOP DEVICES

LICENSE, DISCLAIMER OF LIABILITY, AND LIMITED WARRANTY

By purchasing or using this book (the Work), you agree that this license grants permission to use the contents contained herein, but does not give you the right of ownership to any of the textual content in the book or ownership to any of the information or products contained in it. This license does not permit uploading of the Work onto the Internet or on a network (of any kind) without the written consent of the Publisher. Duplication or dissemination of any text, code, simulations, images, etc. contained herein is limited to and subject to licensing terms for the respective products, and permission must be obtained from the Publisher or the owner of the content, etc., in order to reproduce or network any portion of the textual material (in any media) that is contained in the Work.

MERCURY LEARNING AND INFORMATION LLC (MLI or the Publisher) and anyone involved in the creation, writing, or production of the companion disc, accompanying algorithms, code, or computer programs (the software), and any accompanying Web site or software of the Work, cannot and do not warrant the performance or results that might be obtained by using the contents of the Work. The author, developers, and the Publisher have used their best efforts to insure the accuracy and functionality of the textual material and/or programs contained in this package; we, however, make no warranty of any kind, express or implied, regarding the performance of these contents or programs. The Work is sold as is without warranty (except for defective materials used in manufacturing the book or due to faulty workmanship).

The author, developers, and the publisher of any accompanying content, and anyone involved in the composition, production, and manufacturing of this work will not be liable for damages of any kind arising out of the use of (or the inability to use) the algorithms, source code, computer programs, or textual material contained in this publication. This includes, but is not limited to, loss of revenue or profit, or other incidental, physical, or consequential damages arising out of the use of this Work.

The sole remedy in the event of a claim of any kind is expressly limited to replacement of the book, and only at the discretion of the Publisher. The use of implied warranty and certain exclusions vary from state to state, and might not apply to the purchaser of this product.

jQuery, CSS3, AND HTML5 FOR MOBILE AND DESKTOP DEVICES

Oswald Campesato

MERCURY LEARNING AND INFORMATION

Dulles, Virginia
Boston, Massachusetts
New Delhi

Copyright 2013 by MERCURY LEARNING AND INFORMATION LLC. All rights reserved.

This publication, portions of it, or any accompanying software may not be reproduced in any way, stored in a retrieval system of any type, or transmitted by any means, media, electronic display or mechanical display, including, but not limited to, photocopy, recording, Internet postings, or scanning, without prior permission in writing from the publisher.

Publisher: David Pallai

MERCURY LEARNING AND INFORMATION

22841 Quicksilver Drive

Dulles, VA 20166

www.merclearning.com

1-800-758-3756

O. Campesato. jQuery, CSS3, and HTML5 for Mobile and Desktop Devices.

ISBN: 978-1-938549-03-8

The publisher recognizes and respects all marks used by companies, manufacturers, and developers as a means to distinguish their products. All brand names and product names mentioned in this book are trademarks or service marks of their respective companies. Any omission or misuse (of any kind) of service marks or trademarks, etc. is not an attempt to infringe on the property of others.

Library of Congress Control Number: 2012956350

131415321 Printed in the United States of America

This book is printed on acid-free paper.

Our titles are available for adoption, license, or bulk purchase by institutions, corporations, etc. For additional information, please contact the Customer Service Dept. at 1-800-758-3756 (toll free).

The sole obligation of MERCURY LEARNING AND INFORMATION to the purchaser is to replace the book and/ or disc, based on defective materials or faulty workmanship, but not based on the operation or functionality of the product.

Id like to dedicate this book to my parentsmay this bring joy and happiness into their lives.

CONTENTS

The HTML5Element

HTML

PREFACE

THE GOALS OF THIS BOOK

This book is a primer for jQuery, CSS3, and HTML5 for mobile devices and its goal is to show you how to leverage HTML5 and related technologies in order to create Web pages and mobile applications. This is a daunting task because there are many technologies that are often associated with HTML5, even though they are not formally included in the specification.

The approach of this book is to start with aspects of HTML5 (discussed in ) that do not have significant dependencies on other technologies. After you finish reading the jQuery chapters, then you will learn about additional HTML5-related technologies from the jQuery perspective. This strategy enables you to learn how to use jQuery plugins that provide a layer of abstraction over the associated HTML5 technology. In addition, these HTML5 technologies will be illustrated with code samples for desktop browsers and for Android-based mobile devices with browsers that support these HTML5 technologies.

There are several points to keep in mind about the code samples. First, every code sample in this book works in Google Chrome (version 17) and Safari (version 5.1.2) on a Macbook. Barring any Webkit-specific issues, these code samples will work on Webkit-based browsers on other platforms. Second, many screenshots throughout this book were taken from an Asus Prime 10 tablet with Android ICS (Ice Cream Sandwich) or from a Sprint Nexus S 4G with Android ICS. Third, the HTML5 Canvas, CSS3, and SVG code samples in this book are supported on iPhone 4/iPad and also on Android 4.x or higher. shows you how to create HTML5-based mobile applications for reproducing the screenshots in this book. Incidentally, the official name for the iPad 3 is the New iPad, but this book uses iPad 3 in order to differentiate from the iPad 2. As this book goes to print, the iPad Mini has already been released, and the successor to the New iPad might become available in the near future (so the older model will no longer be new).

A QUICK OVERVIEW OF THIS BOOK

In , you will learn about new HTML5 elements (semantic tags, audio, and video), HTML5 Forms, HTML5 localStorage, HTML5 databases, and Geolocation. The theme of the main code sample in this chapter involves creating a list of words in English with their counterparts in various languages. The first version of this example uses an HTML5 Form, and a subsequent version incorporates HTML5 localStorage. We will use some simple CSS3 selectors to show you how to make HTML5 pages more vivid than their counterparts that do not use CSS selectors.

In and then re-visit the HTML5/CSS3 code samples in this chapter.

Since jQuery and jQuery Mobile comprise more than half the content of this book, the basic use of several APIs are discussed in a high-level fashion in .

Chapter 2 and shows you how to create Android applications that render HTML5 pages with Canvas-based and CSS3-based graphics effects, which will enable you to create Android mobile applications for the code samples in this book.

One more point involves the WebKit engine, which is an open source project that you can download here: