HTML5 for Masterminds: How to take advantage of HTML5 to create responsive websites and revolutionary applications

885 Pages·2017·5.83 MB·English

by  J D Gauchat

HTML5
for Masterminds

How to take advantage of HTML5
to create responsive websites
and revolutionary applications

J.D Gauchat
www.jdgauchat.com

Cover Illustration by Patrice Garden
www.smartcreativz.com
HTML5 for Masterminds
Copyright © 2017 by John D Gauchat
All Rights Reserved

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’s owner.

Companies, services, or products’ names used in this book are for identification
purposes only. All trademarks and registered trademarks are the property of their
respective owners.

For information on translations, please visit www.formasterminds.com.

The information in this book is distributed without warranty. Although every
precaution has been taken in the preparation of this work, neither the author nor
the publisher shall have any liability to any person or entity concerning 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 book is available at www.formasterminds.com

Registration Number: 1086517

1st Edition 2011
1st Edition 2011 Revised Edition
2nd Edition 2012
2nd Edition 2014 Revised Edition
3rd Edition 2017
3rd Edition 2017 Revised Edition
iOS Apps for Masterminds
How to take advantage of Swift to create
insanely great apps for iPhones and iPads

www.formasterminds.com
Table of Contents

CHAPTER 1 - WEB DEVELOPMENT
1.1 Websites
Files, Domains and URLs, Hyperlinks, Absolute and Relative URLs
1.2 Languages
HTML, CSS, JavaScript, Server-Side Languages
1.3 Tools
Editors, Domain Registration, Web Hosting, FTP Software, MAMP
CHAPTER 2 - HTML
2.1 Structure
Document Type, Structural Elements, Global Attributes
2.2 Content
Text, Links, Images, Lists, Tables, Global Attributes
2.3 Forms
Definition, Elements, Submission, Global Attributes
CHAPTER 3 - CSS
3.1 Styles
Applying Styles, Cascading Style Sheets
3.2 References
Keywords, Id Attribute, Class Attribute, Other Attributes, Pseudo-Classes
3.3 Properties
Text, Colors, Sizes, Background, Borders, Shadows, Gradients, Filters, Transformations, Transitions,
Animations
CHAPTER 4 - WEB DESIGN
4.1 Boxes
Display
4.2 Traditional Box Model
Floating Content, Floating Boxes, Absolute Positioning, Columns, Real-life Application
4.3 Flexible Box Model
Flex Container, Flexible Elements, Organizing Flexible Elements, Real-life Application
CHAPTER 5 - RESPONSIVE WEB DESIGN
5.1 Mobile Web
Media Queries, Breakpoints, Viewport, Flexibility, Box-sizing, Fixed and Flexible, Text, Images, Real-
life Application
CHAPTER 6 - JAVASCRIPT
6.1 Introduction to JavaScript
Implementing JavaScript, Variables, Strings, Booleans, Arrays, Conditionals and Loops, Control Transfer
Instructions
6.2 Functions
Declaring Functions, Scope, Anonymous Functions, Standard Functions
6.3 Objects
Declaring Objects, Methods, The this Keyword, Constructors, The new Operator, Inheritance
6.4 Standard Objects
String Objects, Array Objects, Date Objects, Math Object, Window Object, Document Object, Element
Objects, Creating Element Objects
6.5 Events
The addEventListener() Method, Event Objects
6.6 Debugging
Console, Console Object, Error Event, Exceptions
6.7 APIs
Native Libraries, External Libraries
CHAPTER 7 - FORMS API
7.1 Processing Forms
7.2 Validation
Custom Errors, The invalid Event, The ValidityState Object
7.3 Pseudo-Classes
Valid and Invalid, Optional and Required, In-range and Out-of-range
CHAPTER 8 - MEDIA
8.1 Video
Video Formats
8.2 Audio
8.3 Media API
Video Player
8.4 Closed Captioning
8.5 TextTrack API
Reading Tracks, Reading Cues, Adding Tracks
CHAPTER 9 - STREAM API
9.1 Capturing Media
The MediaStreamTrack object
CHAPTER 10 - FULLSCREEN API
10.1 Modern Applications
Full Screen, Full Screen Styles
CHAPTER 11 - CANVAS API
11.1 Graphics
The Canvas, The Context
11.2 Drawing
Rectangles, Colors, Gradients, Paths, Lines, Text, Shadows, Transformations, Status, The
GlobalCompositeOperation Property
11.3 Images
Patterns, Image Data, CrossOrigin, Extracting Data
11.4 Animations
Simple Animations, Professional Animations
11.5 Video
Real-Life Application
CHAPTER 12 - WEBGL
12.1 3D Canvas
12.2 Three.js
Renderer, Scene, Camera, Meshes, Geometric Primitives, Materials, Implementation, Transformations,
Lights, Textures, UV Mapping, Canvas Textures, Video Textures, 3D Models, 3D Animations
CHAPTER 13 - POINTER LOCK API
13.1 Custom Pointer
Mouse Capture
CHAPTER 14 - WEB STORAGE API
14.1 Storage Systems
14.2 Session Storage
Storing Data, Reading Data, Deleting Data
14.3 Local Storage
Storage Event
CHAPTER 15 - INDEXEDDB API
15.1 Data Structure
Database, Objects and Object Stores, Indexes, Transactions
15.2 Implementation
Opening the Database, Defining Indexes, Adding Objects, Retrieving Objects
15.3 Listing Data
Cursors, Order
15.4 Deleting Data
15.5 Searching Data
CHAPTER 16 - FILE API
16.1 Files
Loading Files, Reading Files, Properties, Blobs, Events
CHAPTER 17 - DRAG AND DROP API
17.1 Drag and Drop
Validation, Thumbnail, Files
CHAPTER 18 - GEOLOCATION API
18.1 Locations
Getting the Location, Watching the Location, Google Maps
CHAPTER 19 - HISTORY API
19.1 History
Navigation, URLs, The state Property, Real-Life Application
CHAPTER 20 - PAGE VISIBILITY API
20.1 Visibility
State, Full Detection System
CHAPTER 21 - AJAX LEVEL 2
21.1 The XMLHttpRequest Object
Properties, Events, Sending Data, Uploading Files, Real-Life Application
CHAPTER 22 - WEB MESSAGING API
22.1 Cross-Document Messaging
Posting a Message, Filters and CrossOrigin
CHAPTER 23 - WEBSOCKET API
23.1 Web Sockets
WebSocket Server, Connecting to the Server
CHAPTER 24 - WEBRTC API
24.1 Web Paradigms
ICE Servers, Peer Connection, ICE Candidate, Offer and Answer, Session Description, Media Streams
Events
24.2 Configuration
Configuring the Signaling Server, Configuring the ICE Servers
24.3 Implementing WebRTC
24.4 Data Channels
CHAPTER 25 - WEB AUDIO API
25.1 Audio Structure
Audio Context, Audio Sources, Connecting Nodes
25.2 Audio Applications
Loops and Times, Audio Nodes, AudioParam, GainNode, DelayNode, BiquadFilterNode,
DynamicsCompressorNode, ConvolverNode, PannerNode and 3D Sound, AnalyserNode
CHAPTER 26 - WEB WORKERS API
26.1 Background Processing
Workers, Sending and Receiving Messages, Errors, Terminating Workers, Synchronous APIs, Importing
JavaScript Code, Shared Workers
Introduction

The Internet is a fundamental part of everyone's life these days, and the Web has
become the centerpiece of every technology involved. From news and
entertainment to mobile applications and video games, everything revolves
around the Web. We need a website to open an account for almost every service
we use, to connect our mobile applications and devices together, to work, or to
share the score of our favorite video game. The Web is the hub of our daily
activities, and HTML5 is what makes it all possible.
It all started a long time ago with a simple version of a computer language
called HTML. The language, along with identifiers and communication
protocols, was developed to provide the basis for the creation of the Web. The
initial purpose of HTML was to structure text to share documents between
remote computers. Over time, the introduction of better systems and multicolor
displays forced the language to evolve to work with other types of media besides
text, such as pictures and customized fonts. This expansion made it more
difficult for developers to create and maintain large websites using HTML alone.
The problem was solved by the incorporation to browsers of a new language
called CSS that helps developers to prepare the document that will be displayed
on the screen.
The association between HTML and CSS simplified the work for developers,
but the ability of these languages to respond to the user or perform tasks such as
playing video or audio was still very limited. At first, independent companies
offered their own alternatives. Programming languages and plugins like Java and
Flash became very popular, but they were incapable of providing a definitive
solution. The tools produced by these technologies were still disconnected from
the content and only sharing with the document a space on the screen. This weak
association paved the way for the evolution of a language that was already
embedded in browsers and therefore tightly integrated with HTML. This
language, called JavaScript, allowed developers to access and modify the
document's content dynamically, request additional data from the server, process
information, and show the results on the screen, turning websites into small
applications. Originally, browsers' performance was not good enough to execute
some of these tasks, but with the incorporation of better JavaScript engines,
developers found ways to take advantage of the language's capabilities and
create useful applications, confirming JavaScript as the best option to
complement HTML and CSS.
With the combination of HTML, CSS, and JavaScript, the technologies
required to build the Web we enjoy today were ready, but there was still a
problem to be solved. These languages were independently developed and
therefore they were following their own path. The solution was found in the
definition of a new specification called HTML5. HTML5 is the glue that holds
everything together, proposing standards to every aspect of the Web as well as a
clear purpose for each technology involved. Now, HTML defines the document's
structure, CSS prepares that structure and its content to be shown on the screen,
and JavaScript brings the power and functionality necessary to build full web
applications.
The integration of HTML, CSS, and JavaScript under the HTML5 umbrella
changed the Web forever. Innovative companies and new markets were created
overnight, generating a golden era for web development that is still underway.
The opportunities are endless. The Web is here to stay, and you can be part of it.

IMPORTANT: At the time of writing, most browsers support HTML5
features. We recommend you to execute the examples in this book with the
latest versions of Google Chrome and Mozilla Firefox
(www.google.com/chrome/ and www.mozilla.org). You can also check the
state of the current implementations at www.caniuse.com. To find examples,
resources, links and videos, visit our website at www.formasterminds.com.