J. D. Gauchat - HTML5 for Masterminds, Revised: How to take advantage of HTML5 to create responsive websites and revolutionary applications

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 copyrights 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

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 multi-color 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 .

Websites are files that users download with their browsers from remote computers. When users want to access a website, they tell the browser where it is located, and the program downloads the website's files, processes their content, and show it on the screen.

Because websites are publicly accessible and the Internet is a global network, these files must be available all the time. For this reason, websites are not stored in personal computers but in specialized computers designed to deliver their files. The computer that stores the website's files and data is called Server and the computer that accesses the information is called Client, as shown in Figure 1-1.

Figure 1-1: Clients and Servers

Servers are very similar to personal computers, but they are connected to the network all the time and run software that allows them to respond to users' requests. The most widely adopted programs for servers are Apache, for Linux systems, and IIS ( Internet Information Server ), created by Microsoft for Windows systems. Among other processes, these programs are responsible for establishing the connection between client and server, controlling user access, managing files, and dispatching the documents to the clients.

Websites are composed of multiple documents that the browser downloads upon user request. The documents that make up a website are called pages, and the process of opening new pages is called navigation (the user navigates through the pages of a website). To develop a website, we have to create a file for each page we want the website to contain. Along with these files, we also have to include the files with the images and any other media we want to show inside the pages (images and other media are stored in separate files). Figure 1-2 illustrates what the files and folders of a simple website may look like once they are uploaded to the server.