Table Of ContentHTML5
for Masterminds
(1st Edition)
J.D Gauchat
Copyright 2011 Juan Diego Gauchat All Rights Reserved Edited by: Laura Edlund www.lauraedlund.ca No
part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical,
including photocopying, recording, or by any information storage or retrieval system, without the prior
written permission of the copyright owner.
Companies, services, or products names used in this ebook are for identification purposes only. All
trademarks and registered trademarks are the property of their respective owners.
The information in this ebook is distributed on an “as is” basis, without warranty. Although every
precaution has been taken in the preparation of this work, neither the author nor Mink Books shall have any
liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or
indirectly by the information contained in this work.
The source code for this ebook is available at www.minkbooks.com
Registration Number: 1086517
Smashwords Edition 2011
Table of Contents
Introduction
Chapter 1—HTML5 Documents
Basic Components
Global Structure
<!doctype>, <html>, <head>, <body>, <meta>, <title>, <link>
The Body Structure
Organization, <header>, <nav>, <section>, <aside>, <footer>
Deep Inside the Body
<article>, <hgroup>, <figure>, <figcaption>
New and Old Elements
<mark>, <small>, <cite>, <address>, <time>
Quick Reference—HTML5 Documents
Chapter 2—CSS Styling and Box Models
CSS and HTML
Styles and Structure
Block Elements, Box Models
Basics about Styling
Inline Styles, Embedded Styles, External Files, References, Referencing by Keyword, Referencing by the Id
Attribute, Referencing by the Class Attribute, Referencing by Any Attribute, Referencing by Pseudo-
Classes, New Selectors, Applying CSS to Our Template
Traditional Box Model
Template, Universal Selector *, New Heading Hierarchy, Declaring New HTML5 Elements, Centering the
Body, Creating the Main Box, The Header, Navigational Bar, Section and Aside, Footer, Last Touches,
Box-Sizing
Flexible Box Model
Understanding the Flexible Box Model
Display, Box-Orient, Box-Direction, Box-Ordinal-Group, Box-Pack, Box-Flex, Box-Align
Quick Reference—CSS Styling and Box Models
Flexible Box Model, Pseudo-Classes and Selectors
Chapter 3—CSS3 Properties
The New Rules
CSS3 Goes Crazy, Template, Border-Radius, Box-Shadow, Text-Shadow, @font-face, Linear Gradient,
Radial Gradient, RGBA, HSLA, Outline, Border-Image, Transform and Transition, Transform: Scale,
Transform: Rotate, Transform: Skew, Transform: Translate, Transforming All at Once, Dynamic
Transformations, Transitions
Quick Reference—CSS3 Properties
Chapter 4—Javascript
The Relevance of Javascript
Incorporating Javascript
Inline, Embedded, External File
New Selectors
querySelector(), querySelectorAll()
Event Handlers
Inline Event Handlers, Event Handlers as Properties, The addEventListener() Method
APIs
Canvas API, Drag and Drop API, Geolocation API, Storage APIs, File APIs, Communication APIs, Web
Workers API, History API, Offline API
External Libraries
jQuery, Google Maps
Quick Reference—Javascript
Elements, Selectors, Events, APIs
Chapter 5—Video and Audio
Playing Video with HTML5
The <video> Element, <video> Attributes
Programming a Video Player
The Design, The Code, The Events, The Methods, The Properties,
The Code at Work
Video Formats
Playing Audio with HTML5
The <audio> Element
Programming an Audio Player
Quick Reference—Video and Audio
Elements, Attributes, Video Attributes, Events, Methods,Properties
Chapter 6—Forms and Forms API
HTML Web Forms
The <form> Element, The <input> Element, Email Type, Search Type, URL Type, Tel Type, Number Type,
Range Type, Date Type, Week Type, Month Type, Time Type, Datetime Type, Datetime-local Type, Color
Type
New Attributes
placeholder Attribute, required Attribute, multiple Attribute, autofocus Attribute, pattern Attribute, form
Attribute
New Form Elements
The <datalist> Element, The <progress> Element, The <meter> Element, The <output> Element
Forms API
setCustomValidity(), The Invalid Event, Real-Time Validation, Validity Constraints, willValidate
Quick Reference—Forms and Forms API
Types, Attributes, Elements, Methods, Events, Status
Chapter 7—Canvas API
Preparing the Canvas
The <canvas> Element, getContext()
Drawing on Canvas
Drawing Rectangles, Colors, Gradients, Creating Paths, Line Styles, Text, Shadows, Transformations,
Restoring Status, globalCompositeOperation
Processing Images
drawImage(), Images Data, Patterns
Animations on Canvas
Processing Video on Canvas
Quick Reference—Canvas API
Methods, Properties
Chapter 8—Drag and Drop API
Drag and Drop for the Web
New Events, dataTransfer, dragenter, dragleave and dragend, Selecting a Valid Source, setDragImage(),
Files
Quick Reference—Drag and Drop API
Events, Methods, Properties
Chapter 9—Geolocation API
Finding your Place
getCurrentPosition(location), getCurrentPosition(location, error), getCurrentPosition(location, error,
configuration), watchPosition(location, error, configuration), Practical Uses with Google Maps
Quick Reference—Geolocation API
Methods, Objects
Chapter 10—Web Storage API
Two Storage Systems
sessionStorage
Data Storage Implementation, Creating Data, Reading Data, Deleting Data
localStorage
storage Event, Storage Space
Quick Reference—Web Storage API
Storage Type, Methods, Properties, Events
Chapter 11—IndexedDB API
A Low-Level API
Database, Objects and Object Stores, Indexes, Transactions, Object Stores Methods
Implementing IndexedDB
Template, Opening the Database, Database Version, Object Stores and Indexes, Adding Objects, Getting
Objects, Finishing the Code and Testing
Listing Data
Cursors, Changing Order
Deleting Data
Searching Data
Quick Reference—IndexedDB API
Environment Interface (IDBEnvironment and IDBFactory), Database Interface (IDBDatabase), Object
Store Interface (IDBObjectStore), Cursors Interface (IDBCursor), Transactions Interface
(IDBTransaction), Range Interface (IDBKeyRangeConstructors), Error Interface
(IDBDatabaseException)
Chapter 12—File API
File Storage
Processing User’s Files
Template, Reading Files, File Properties, Blobs, Events
Creating Files
Template, The Hard Drive, Creating Files, Creating Directories, Listing Files, Handling Files, Moving,
Copying, Deleting
File Content
Writing Content, Adding Content, Reading Content
File System in Real Life
Quick Reference—File API
Blob Interface (File API), File Interface (File API), FileReader Interface (File API), LocalFileSystem
Interface (File API: Directories and System), FileSystem Interface (File API: Directories and System),
Entry Interface (File API: Directories and System), DirectoryEntry Interface (File API: Directories and
System), DirectoryReader Interface (File API: Directories and System), FileEntry Interface (File API:
Directories and System), BlobBuilder Interface (File API: Writer), FileWriter Interface (File API: Writer),
FileError Interface (File API and extensions)
Chapter 13—Communication API
Ajax Level 2
Retrieving Data, Response Properties, Events, Sending Data, Cross-Origin Requests, Uploading Files,
Real-life Application Cross Document Messaging Constructor, Message Event and Properties, Posting a
Message, Filters and Cross-Origin
Web Sockets
WS Server Configuration, Constructor, Methods, Properties, Events, Template, Start Communication, Full
Application
Quick Reference—Communication API
XMLHttpRequest Level 2, Web Messaging API, WebSocket API
Chapter 14—Web Workers API
Doing the Hard Work
Creating a Worker, Sending and Receiving Messages, Detecting Errors, Terminating Workers,
Synchronous APIs, Importing Scripts, Shared Worker
Quick Reference—Web Workers API
Workers, Dedicated Workers, Shared Workers
Chapter 15—History API
History Interface
Navigating the Web, New Methods, Fake URLs, Keeping Track, Real Example
Quick Reference—History API
Chapter 16—Offline API
Cache Manifest
The Manifest File, Categories, Comments, Using the Manifest File
Offline API
Errors, Online and Offline, Cache Process, Progress, Updating the Cache
Quick Reference—Offline API
Manifest File, Properties, Events, Methods
Conclusion
Working for the World
The Alternatives, Modernizr, Libraries, Google Chrome Frame
Working for the Cloud
Final Recommendations
Introduction
HTML5 is not a new version of an old markup language—not even an
improvement on this already “ancient” technology—but instead a new concept
for the construction of websites and applications in the era of mobile devices,
cloud computing and networking.
It all started a long time ago with a simple version of HTML proposed to
create the basic structure of web pages, organize their content and share
information. The language and the web itself were born primarily with the
intention of communicating information through text.
The narrow scope of HTML motivated companies to develop new languages
and software to add characteristics to the web that had never been seen before.
These initial developments grew into powerful and popular plugins. Simple
games and animated jokes soon turned into sophisticated applications, providing
new experiences that changed the concept of the web forever.
Of the options proposed, Java and Flash were the most successful; they were
massively adopted and widely considered to be the future of the Internet.
However, as soon as the number of users increased and the Internet changed
from a way to interconnect computer lovers to a primary field for business and
social interaction, limitations present in both technologies proved to be a death
sentence.
The main inconvenience of Java and Flash may be described as a lack of
integration. Both were conceived from the beginning as plugins, something that
is inserted into a structure but basically shares with that structure only some
space on the screen. There was no communication and integration between
applications and documents.
The lack of integration turned out to be critical and paved the way for the
evolution of a language that shares space in the document with HTML and that
is not affected by plugin limitations. Javascript, an interpreted language
embedded in browsers, clearly was the way to improve the user’s experience and
provide functionality for the web. However, after a few years of failed attempts
to promote it and misuses, the market never fully adopted the language and its
popularity declined. The detractors had good reasons to oppose its adoption. At
that moment, Javascript couldn’t replace the functionality of Flash and Java. And
even when it was evident that Java and Flash were limiting the scope of web
applications and isolating the web’s content, popular features such as video
streaming were becoming a big part of the web and were only effectively offered
through those technologies.
Despite this success, Java was declining. The language’s complex nature, slow
evolution and the lack of integration diminished its importance to the point that
today Java is hardly used any more in mainstream web applications. Without
Java, the market turned its attention to Flash. However, the fact that Flash shares
the same basic characteristics with its competitor on the web makes it also
susceptible to the same fate.
Meanwhile, the software to access the web continued to evolve. Along with
new features and faster techniques for Internet access, browsers also were
improving their Javascript engines. More power brought more opportunities, and
this scripting language was ready to embrace them.
At some point during this process, it became evident to some developers that
neither Java nor Flash would be enough to provide the tools they needed to
create the applications demanded by an increasing number of users. These
developers started to apply Javascript in their applications in a way that was
never seen before. The innovation and the amazing results attracted the attention
of more programmers. Soon what was called the “Web 2.0” was born, and the
perception of Javascript in the developers’ community radically changed.
Javascript was clearly the language that allowed the developers to innovate
and do things that nobody had done before on the web. Over the last years,
programmers and web designers all over the world came up with the most
incredible tricks to overcome the limitations of this technology and its initial
deficiencies in portability. Javascript along with HTML and CSS was obviously
the most perfect combination for the necessary evolution of the web.
HTML5 is, actually, the improvement of that combination, the glue that puts
everything together. HTML5 proposes standards for every aspect of the web and
also a clear purpose for each technology involved. From now on, HTML
provides the structural elements, CSS is concentrated on how to turn that
structure into something visibly attractive and usable and Javascript has all the
power necessary to provide functionality and build full web applications.
Boundaries between websites and applications have finally disappeared. The
required technologies are ready. The future of the web is promising, and the
evolution and combination of these three technologies (HTML, CSS and
Javascript) into one powerful specification is turning the Internet into the leading
platform for development. HTML5 is clearly leading the way.
IMPORTANT: At the moment, not every browser supports HTML5 features,
and most of these features are currently in the design stage. We recommend
you read the chapters and execute the codes with the latest version of Google
Chrome, Safari, Firefox or Internet Explorer. Google Chrome and Safari are
both based on WebKit, the open source browser engine that supports almost
all the features already implemented in HTML5, and they are good testing
platforms. Firefox is one of the best browsers for developers and its engine,
Gecko, provides full support for HTML5 as well. Finally, the new version of
Internet Explorer, IE9, is HTML5 ready and supports most of the new features
as well.
Whatever browser you use, always keep in mind that a good developer installs
and tests his or her codes in each program available on the market. Test the
codes provided in this ebook with each and every browser.
To download the latest versions, visit the following links:
www.google.com/chrome
www.apple.com/safari/download
www.mozilla.com
windows.microsoft.com
www.opera.com
In the ebook’s Conclusion, we explore different alternatives to making your
websites and applications accessible from old browsers and those that are not
yet HTML5-ready.
Back to Top
