Introduction

THE BASIC TECHNOLOGIES BEHIND THE WEB are now almost a quarter of a century old. HTML dates all the way back to 1993, the same year the first popular web browser, Mosaic, appeared on the scene.

You may have thought, therefore, that the technologies behind the Web would have entered a comfortable middle-age-still improving around the edges maybe-but not innovating with the pace and excitement of their early years.

In fact, nothing could be further from the truth. The last ten years have been some of the most ­exciting and innovative in the history of the Web, and this pace of change is continuing to ­accelerate. As a result, the Web is no longer the preserve of simple "websites." It is the realm of "web ­applications": feature-rich applications that just happen to run inside web browsers.

A whole new class of computing devices has accentuated the pace of this change. Web browsers are no longer the preserve of desktops and laptops: They now appear on a myriad of devices from smart phones to smart TVs. The fact that web browsers are the one universal feature across these diverse devices has served to enhance the appeal of browser-based web applications: You write the web application once, and your users use it from any device they choose.

This innovation of the last decade did not happen by accident. Various standards committees have been hard at work for more than a decade devising a set of standards that have been grouped under the umbrella of "HTML5." These standards have now made their way into all the major web-browsers.

If you are familiar with HTML, the term HTML5 may simply imply a new version of the HTML markup language-which may be interesting-but not revolutionary. In fact, HTML5 is far more than a markup language; it is a set of programming APIs, implemented by browsers, that allow web pages to perform tasks that had never before been possible.

For example, it is now possible for an HTML page to store massive amounts of data in your browser, operate without a network connection, request more information from a web server as and when it needs it, and perform complex computations in the background without interfering with your browsing experience.

The goal of this book is to teach you how to write web applications. In order to achieve this, you need to understand more than HTML5. You need to understand a set of related technologies. More importantly, however, you need to understand how these technologies work together.

HTML5, for instance, is closely tied to JavaScript. In many cases, if you want to use HTML5, you need to do so through a JavaScript API. It is thus not possible to master HTML5 without also mastering JavaScript.

JavaScript is also approaching middle age, yet it too continues to evolve in tandem with HTML5. Historically considered something of an oddity, JavaScript has turned into a rich and expressive programming language, capable of much more than the simple tasks (such as form validation) that it was consigned for so many years.

A large part of the appeal of JavaScript is the myriad of enormously useful, freely available libraries that are written in the language. Chief among these is jQuery, a JavaScript library that has taken on a life of its own and come to redefine the way programmers add dynamic features to their web pages. You can write web applications without learning jQuery, but your code will lack the conciseness of expression the jQuery library affords.

Finally, in order to produce visually appealing web applications you will need to learn Cascading Style Sheets. Just like all other web technologies, CSS also continues to grow and evolve, and the newest version of CSS-called CSS3-means that web pages can achieve dazzling visual effects.

Who This Book Is For

This book is for anyone who wants to learn how to build dynamic websites and web applications using standards-based technologies.

You may have experience with HTML4, although that is not required because the early lessons provide an in-depth look at all of the most important features of HTML. More experienced readers may, on the other hand, choose to skip these lessons.

This book contains many code examples based on JavaScript. It is expected that you have some programming experience before reading this book, although not necessarily with JavaScript. If you have no experience with programming, you may want to prepare with some online tutorials and exercises before beginning.

Finally, this book is for programmers who want to learn by doing.

What This Book Covers

HTML5 is a "versionless" standard. The specifications behind HTML5 continue to grow and evolve, but this evolution is not matched with "official" or versioned releases.

As such, this book does not focus on a specific version of HTML5; instead, it focuses on the aspects of HTML5 that have achieved widespread adoption in all of the most common web browsers.

The JavaScript language does contain versioned releases, but unlike most programming languages, you have no control over the version that your users will choose because this is a byproduct of the browser that they select. As a result, this book will not focus on a specific version of JavaScript: It will focus on the features that are universally available in all the major browsers.

This book will use a number of JavaScript libraries that are subject to change over time. Whenever a library is used, a specific version will be specified. In many cases, a more recent version of the library will work without issue, although the code is only guaranteed to work with the specified version.

This book is intended as a hands-on guide. Each lesson includes code and exercises that you can follow along with, and even augment if you choose. It is important that you follow along with these exercises because it is this process that will consolidate your understanding of how the technologies really work.

How This Book Is Structured

This book is split into five sections. The first two sections are intended to be read in order because they provide you with the foundation knowledge required to add more complex functionality. The remaining three sections can be read in any order you choose.

The first section of the book provides an introduction to HTML and CSS and looks at how to build static web pages with these technologies. By the end of this lesson, you will have a solid foundation on which to start adding more complex functionality.

In the second section, you turn your attention to JavaScript and jQuery, and look at how a static web page can be converted into a dynamic web application.

The third section of the book looks at the multimedia capabilities of web browsers and how you can harness these through technologies such as the Canvas API and CSS3.

Once you have an understanding of JavaScript, you can turn your attention to the HTML5 APIs that allow you to store data inside the browser, access data from web servers, and execute tasks on background processes. It is these features that truly turn your website into a feature-rich web application.

In the final section of the book, you will turn your attention to mobile devices and address the question of how you can convert your web application into a mobile web application that functions on any mobile device your users may choose to use.

A large portion of this book is structured around the development of a sample web application. If you choose to skip a lesson, you will therefore need to download a completed version of that lesson's web application before starting the next lesson.

What You Need to Use This Book

In order to complete most of the exercises in this book, you will need nothing more than a text editor and the Chrome web browser.

If you have a favorite text editor, you can continue to use it for this book. If you do not have a text editor installed, Notepad++ (http://notepad-plus-plus.org) is a good option for Windows, Text Wrangler (http://www.barebones.com/products/textwrangler) is a good choice for Macs, and EMacs is a good choice for Linux. You may also choose to use an Integrated Development Environment (IDE) such as Eclipse.

The Chrome web browser has been chosen for this book not so much for the capabilities of the browser itself, but for the developer tools that accompany it. You can choose to use an alternative web browser if you wish, but the examples will focus on Chrome.

The Chrome web browser is subject to frequent updates, and it is assumed that you will use the latest version of the browser.

In later sections of this book, you will also need a web server. A lesson is provided to guide you through the process of installing and configuring a web server.

The source code for the samples is available for download from the Wrox website at:

www.wrox.com/go/html5jsjquery24hr

Conventions

To help you get the most from the text and keep track of what's happening, we've used a number of conventions throughout the book.

Warning

Warnings hold important, not-to-be-forgotten information that is directly relevant to the surrounding text.

Note

Notes indicate notes, tips, hints, tricks, or asides to the current discussion.

As for styles in the text:

• We highlight new terms and important words when we...