jQuery, CSS3, and HTML5 for Mobile/Desktop Devices: A Primer

807 Pages·2016·30.68 MB·English

by  Campensato O.

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
[email protected]
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.
I’d like to dedicate this book to my parents—may this bring joy and happiness into
their lives.
CONTENTS
Preface
Acknowledgments
Chapter 1 New Features in HTML5
HTML5 and Various Working Groups
HTML5 Specifications: W3C or WHATWG?
What is HTML5?
Browser Support for HTML5
What Technologies are Included in HTML5?
Differences between HTML4 Tags and HTML5 Tags
Useful Online Tools for HTML5 Web Pages
Modernizr
YepNope.js
Caniuse
HTML5 on Mobile
HTML5 BoilerPlate
Designing HTML5 Web Pages
Graceful Degradation
Progressive Enhancement
Responsive Design
A Simple HTML5 Web Page
New HTML5 Elements
Semantic Markup HTML5 Elements
Article Versus Section: How Are They Used?
Why Use Semantic Markup?
A Simple Web Page with Semantic Markup
The HTML5 <hgroup> Element
Custom Attributes in HTML5
The HTML5 <audio> Element
The HTML5 <video> Element
Popcorn.js: HTML5 Media Framework
HTML5 <video> and Web Camera Support
HTML5 Forms
New Input Types
New Attributes
A Simple HTML5 Form Example
The HTML5 FormData Object
Using HTML5 Web Storage
HTML5 Web Storage versus IndexedDB
HTML5 Web Storage versus Cookies
HTML5 Web Storage and Security
An Example of HTML5 localStorage
LocalStorage and iOS 5.1
Storing Images in localStorage
HTML5 Web Databases
Using An HTML5 IndexedDB Database
Storing Twitter Tweets in a Web Database
Web Database and Mobile Devices
Performance, Debugging, and Testing Tools
Blaze
Chrome Speed Tracer
PageSpeed
WEINRE
Firebug for Firefox
jsconsole
Socketbug
Adobe Shadow
Additional Useful Links
Summary
Chapter 2 Introduction to CSS3
CSS3 Support and Browser-Specific Prefixes for CSS3 Properties
A Quick Overview of CSS3 Features
CSS3 Pseudo-Classes, Attribute Selection, and Relational Symbols
CSS3 Pseudo-Classes
CSS3 Attribute Selection
CSS3 Relational Symbols
CSS3 Shadow Effects and Rounded Corners
Specifying Colors with RGB and HSL
CSS3 and Text Shadow Effects
CSS3 and Box Shadow Effects
CSS3 and Rounded Corners
CSS3 Gradients
Linear Gradients
Radial Gradients
Online Tools For Creating CSS3 Gradients
CSS3 2D Transforms
Zoom In/Out Effects with Scale Transforms
Rotate Transforms
Skew Transforms
Translate Transforms
CSS3 Media Queries
Detecting Orientation with CSS3 Media Queries
Detecting Orientation with Simple JavaScript
Working with Web Fonts
Online Resources for Fonts
CSS3 and Presentation Tools
Summary
Chapter 3 CSS3 2D/3D Animation and CSS Frameworks
A CSS3-Based Cube
CSS3 Transitions
Simple CSS3 Animation Effects
Animation Effects with CSS3 keyframes
Glowing Effects
Image Fading and Rotating Effects with CSS3
Bouncing Effects
CSS3 Effects for Text
Rendering Multi-Column Text
3D Effects in CSS3
CSS3 3D Animation Effects
CSS3 Animation and CSS Sprites
Sliding Panels with CSS3 Animation
CSS Frameworks
The Compass/Sass Framework
Sass Variables
Sass Mixins
The Blueprint Framework
The LESS Framework
LESS Variables
LESS mixins
Using LESS in Client-Side and Server-Side Code
CSS3 Performance
Useful Links
Summary
Chapter 4 CSS3 and SVG
New CSS3 Features
CSS Canvas Backgrounds
CSS Device Adaptation
CSS Exclusions
CSS Filters
CSS Flexbox (Flexible Box)
CSS Grid
CSS Regions
CSS Shaders
Simple Vertex CSS Shaders
Animation Effects with CSS Shaders
CSS Shaders and Detached Tiles
CSS Shaders and Curtain Effects
CSS3 and SVG
CSS3 and SVG Bar Charts
Rendering 3D Surfaces in SVG
Similarities and Differences Between SVG and CSS3
CSS3 Toolkits and IDEs
Sencha Animator
Adobe Edge
AliceJS
Summary
Chapter 5 Fundamentals of jQuery
What is jQuery?
Referencing jQuery Files in HTML5 Web Pages
HTML Web Pages without jQuery
Using jQuery to Find Elements in Web Pages
A “Hello World” Web Page with jQuery
jQuery Qualifiers versus jQuery Methods
Using Web Storage with jQuery
Querying and Modifying the DOM with jQuery
Find and Modify Elements With :first and :last Qualifiers
Finding Elements with :even and :odd Qualifiers
Finding Elements with :eq, :lt, and :gt Qualifiers
Finding HTML Elements by class or id
Finding and Setting Element Attributes
Finding Form Elements and Their Attributes
Using nth-child() for Finding Elements
Using jQuery to Remove Elements
Creating DOM Elements
Other jQuery Methods for Inserting DOM Elements
Useful jQuery Code Blocks
jQuery Element Navigation Methods
The next()/prev()/closest()/parent() Methods
Other jQuery Navigational Selection Methods
Caching Results of jQuery Invocations