Preface

HTML5 is everywhere, from PCs to tablets, smartphones, and even modern TV sets. The web is the most ubiquitous application platform and information medium. More recently, HTML5 has become a first-class citizen in established operating systems such as Microsoft Windows 8, Firefox OS, and Google Chrome OS.

Openness is one of the important aspects of the web. HTML5 is one of the primary ways to oppose private and proprietary solutions that force the usage of certain technologies. There is a true revolution happening in the past few years. JavaScript has risen to the lead position in web application development for both server side and client side.

In the past, it was very common to get half done scripts and poorly written JavaScript, thus the language formed a bad reputation. HTML5 features are already available and widely underused. There is a huge deal of web applications that reinvent the wheel, when there is already a feature in HTML5 that they need.

This book will get you on the fast track to learning modern HTML5 features. By the end of the book, you should have a solid understanding of JavaScript in the browser and server. On top of that, you will end up creating cool, little applications using new HTML5 technologies, and learn how to adapt your existing applications to use these great new features.

What this book covers

Chapter 1, Display of Textual Data, covers what you need to know about displaying text in HTML5. This includes formatting numbers, displaying math formulas, and measurements. Additionally, there are sections on displaying tabular data and rendering Markdown that show some of the everyday development functionality.

Chapter 2, Display of Graphical Data, begins by covering the creation of charts using the Flot chart library, as well as the more modern data-driven D3.js. Displaying maps with routes and markers is also covered in this chapter.

Chapter 3, Animated Data Display, explores the creation of animated and interactive visualizations. Most of the chapter visualization are based on D3.js, but there are also examples that start from scratch or use technology such as the notifications API.

Chapter 4, Using HTML5 Input Components, begins by covering the use of simple text input elements, and moves to the new input types that are added by HTML5. It also covers the use of the new attributes, as well as making more advanced input that uses geolocation or drag-and-drop areas.

Chapter 5, Custom Input Components, continues with the topics from the preceding chapter, with the main focus shifting to the creation of custom controls that add new functionality, or mimic components available in the desktop applications. This chapter explains how to create controls, such as menus, dialogs, list selection, and rich-text input.

Chapter 6, Data Validation, introduces the HTML5 way of handling form validation. The chapter will cover validation of text and numbers, built-in validations for e-mail and numbers. Furthermore, it also covers server-side validation with Node.js, and shows how to combine client and server-side validation.

Chapter 7, Data Serialization, provides an in-depth look into the creation of JSON, base64, and XML from client-side JavaScript, as well as the reverse process of making the JavaScript objects from the formats.

Chapter 8, Communicating with Servers, gets you started with Node.js and the creation of REST API's. The chapter also contains detailed information on how to make HTTP calls from pure JavaScript, how to handle binary files, as well as communication security.

Chapter 9, Client-side Templates, introduces the use of the popular client-side template languages Handlebars, EJS, and Jade. It covers and compares the basic uses of these languages, as well as their more advanced features, such as partials, filters, and mixins.

Chapter 10, Data Binding Frameworks, gets you started with two different types of web frameworks. On the one hand we have Angular, a powerful representative of the many different client-side MVC frameworks, and on the other hand we have Meteor, a reactive framework that cuts down the development time in certain domains.

Chapter 11, Data Storage, explores the new client-side storage APIs available in HTML5, as well as the new APIs for working with files. These new features enable us to persist data beyond page refresh, and save client-side information that will not be transferred back and forth on each request.

Chapter 12, Multimedia, covers some of the ways for playing video and audio files in the browser, something that was done by external plugins in the past.

Appendix A, Installing Node.js and Using npm, gives a simple introduction on installing Node.js and using its package manager npm.

Appendix B, Community and Resources, contains a short history and references to the main organizations that empower the development of HTML5.

What you need for this book

All you need to get started is a modern browser, such as Firefox, Chrome, Safari, Opera, or Internet Explorer 9, a simple text editor such as Notepad++, Emacs, or Vim, and an Internet connection.

In Chapter 7, Data Serialization and later chapters, you will also need to install Node.js to try out some of the recipes. The installation process is covered in Appendix A, Installing Node.js and Using npm.

Who this book is for

This book is for programmers who already have used JavaScript in one way or the other. It's for people who work with a lot of backend code, and want to get up to speed with the world of HTML5 and JavaScript. It's for people who have used copy/paste to patch up a part of a page and want to know more about how things work in the background. It's for JavaScript developers who would like to update their knowledge with new techniques and capabilities made possible with HTML5.

The book is for both beginners and seasoned developers, assuming that you will have some experience in HTML, JavaScript, and jQuery already, but not necessary an in-depth knowledge.

Conventions

In this book, you will find a number of styles of text that distinguish among different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "The d3.behavior.zoom() method enables us to add automatic zoom functionality to our projection type with the given scale and range of zoom in scaleExtent."

A block of code is set as follows:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Chart example</title>
  </head>
  <body>
    <div id="chart" style="height:200px;width:800px;"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="flot/jquery.flot.js"></script>
    <script src="flot/jquery.flot.navigate.js"></script>
    <script type="text/javascript" src="example.js"></script>
  </body>
</html>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

#carousel {
  perspective: 500px;
  -webkit-perspective: 500px;
  position:relative; display:inline-block;
  overflow:hidden;
}

Any command-line input or output is written as follows:

Object:
  color: "#00cc00"
  data: Array[50]
  name: "one"

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Also we can add an attribute data-placeholder that will contain default text, such as Occupation in our example. If this is not specified, it will default to Select Some Option for single select."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really find useful.

To send us general feedback, simply send an e-mail to <[e-mail]>, and mention the book title via the subject of your message.

If there is a topic in which you have expertise, and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[e-mail]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[e-mail]> if you are having a problem with any aspect of the book, and we will do our best to address it.