HTML5 Data and Services Cookbook

Book description

Take the fast track to the rapidly growing world of HTML5 data and services with this brilliantly practical cookbook. Whether building websites or web applications, this is the handbook you need to master HTML5.

Key Features

  • Learn to effectively display lists and tables, draw charts, animate elements and use modern techniques such as templates and data-binding frameworks through simple and short examples.
  • Examples utilizing modern HTML5 features such as rich text editing, file manipulation, graphics drawing capabilities, real time communication.
  • Explore the full power of HTML5 - from number rounding to advanced graphics to real-time data binding - we have it covered.

In Detail

HTML5 is everywhere. From PCs to tablets to smartphones and even TVs, the web is the most ubiquitous application platform and information medium bar. Its becoming a first class citizen in established operating systems such as Microsoft Windows 8 as well as the primary platform of new operating systems such as Google Chrome OS.

"HTML5 Data and Services Cookbook" contains over 100 recipes explaining how to utilize modern features and techniques when building websites or web applications. This book will help you to explore the full power of HTML5 - from number rounding to advanced graphics to real-time data binding.

"HTML5 Data and Services Cookbook" starts with the display of text and related data. Then you will be guided through graphs and animated visualizations followed by input and input controls.

Data serialization, validation and communication with the server as well as modern frameworks with advanced features like automatic data binding and server communication will also be covered in detail.This book covers a fast track into new libraries and features that are part of HTML5!

What you will learn

  • Making charts using flot or HTML5 canvas.
  • Creating awesome visualizations with D3.js
  • Common helpers when working with input
  • Making animated and iteractive visualzations
  • Using the HTML5 input helpers
  • Creating custom input components
  • Client-side templating to simplify HTML generation
  • Manipulating and storing data on the client side

Who this book is for

This book is for programmers and developers who work with a lot of backend code and want to get fast tracked into the world of HTML5 and Javascript. It is also for JavaScript developers who would like to update their knowledge with new techniques and capabilities made possible with HTML5.Some experience in HTML and jQuery is assumed.

Table of contents

  1. HTML5 Data and Services Cookbook
    1. Table of Contents
    2. HTML5 Data and Services Cookbook
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Display of Textual Data
      1. Introduction
      2. Rounding numbers for display
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
      3. Padding numbers
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
      4. Displaying metric and imperial measurements
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Displaying formatted dates in the user's time zone
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
      6. Displaying the dynamic time that has elapsed
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
      7. Displaying Math
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
      8. Creating an endless scrolling list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Creating a sortable paginated table
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Creating multiple-choice filters
        1. Getting ready
        2. How to do it...
        3. How it works...
      11. Creating range filters
        1. Getting ready
        2. How to do it...
        3. How it works...
      12. Creating combined complex filters
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      13. Displaying code in HTML
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more…
      14. Rendering Markdown
        1. How to do it...
        2. How it works...
        3. There's more...
      15. Autoupdating fields
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
    9. 2. Display of Graphical Data
      1. Introduction
      2. Creating a line chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Creating a bar chart
        1. Getting ready
        2. How to do it...
        3. How it works...
      4. Creating a pie chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Creating an area chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Displaying combined charts
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Creating a bubble chart
        1. How to do it...
        2. How it works...
        3. There's more...
      8. Showing a map with a marked location
        1. How to do it...
        2. How it works...
      9. Showing a map with a path
        1. How to do it...
        2. How it works...
      10. Displaying gauges
        1. How to do it...
        2. How it works...
      11. Displaying a tree
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
      12. LED scoreboard using web fonts
        1. Getting ready
        2. How to do it...
        3. How it works…
        4. There's more...
    10. 3. Animated Data Display
      1. Introduction
      2. Making a motion chart
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Displaying a force directed graph
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Making a live range chart filter
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Making an image carousel
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Zooming and panning a chart
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Using the web notifications API
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Creating interactive Geo charts from a dataset
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    11. 4. Using HTML5 Input Components
      1. Introduction
      2. Using the text input field
        1. How to do it...
        2. How it works...
        3. There's more...
      3. Using textarea
        1. How to do it...
        2. How it works...
      4. Inputting dates
        1. How to do it...
        2. How it works...
      5. Inputting time
        1. How to do it...
        2. How it works...
      6. Telephone input
        1. How to do it...
        2. How it works...
        3. There's more...
      7. Range input field
        1. How to do it...
        2. How it works...
        3. There 's more...
      8. Color picker input
        1. How to do it...
        2. How it works...
      9. Using single-choice dropdowns
        1. How to do it...
        2. How it works...
        3. There's more...
      10. Using multiple-choice select lists
        1. How to do it...
        2. How it works...
      11. Getting geographical location input
        1. How to do it...
        2. How it works...
        3. There's more...
      12. Using file inputs at the client side
        1. How to do it...
        2. How it works...
        3. There's more...
      13. Using a drag-and-drop file area
        1. How to do it...
        2. How it works...
        3. There's more...
    12. 5. Custom Input Components
      1. Introduction
      2. Using contentEditable for basic rich text input
        1. How to do it...
        2. How it works...
      3. Advanced rich text input
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more…
      4. Creating a drop-down menu
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Creating custom dialogs
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Creating autocomplete for input
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Creating a custom single-selection list
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Creating a multiple-selection list
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Geographic location input using maps
        1. Getting ready
        2. How to do it...
        3. How it works...
    13. 6. Data Validation
      1. Introduction
      2. Validating text by length
        1. How to do it...
        2. How it works...
        3. There's more...
      3. Validating numbers by range
        1. How to do it...
        2. How it works...
      4. Using the built-in pattern validation
        1. How to do it...
        2. How it works...
        3. There's more...
      5. Advanced use of built-in constraints and custom validations
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Calculating password strength
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Validating US zip codes
        1. Getting ready
        2. How to do it...
        3. How it works...
      8. Using asynchronous server-side validation
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Combining client-side and server-side validation
        1. Getting ready
        2. How to do it...
        3. How it works...
    14. 7. Data Serialization
      1. Introduction
      2. Deserializing JSON to JavaScript objects
        1. How to do it...
        2. How it works...
        3. There's more...
      3. Serializing objects to a JSON string
        1. How to do it...
        2. How it works...
        3. There's more...
      4. Decoding base64 encoded binary data
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Encoding binary data or text into base64
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Serializing binary data into JSON
        1. How to do it...
        2. How it works...
        3. There's more...
      7. Serializing and deserializing cookies
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Serializing a form into request strings
        1. How to do it...
        2. How it works...
        3. There's more...
      9. Reading XML documents with DOMParser
        1. How to do it...
        2. How it works...
      10. Serialization of XML document at the client side
        1. How to do it...
        2. How it works...
        3. There's more...
    15. 8. Communicating with Servers
      1. Creating an HTTP GET request to fetch JSON
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      2. Creating a request with custom headers
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Versioning your API
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Fetching JSON data with JSONP
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      5. Reading XML data from server
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Using the FormData interface
        1. Getting ready
        2. How to do it...
        3. How it works...
      7. Posting a binary file to the server
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more…
      8. Creating an SSL connection with Node.js
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Making real-time updates with Ajax Push
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Exchanging real-time messages using WebSockets
        1. Getting ready
        2. How to do it...
        3. How it works...
    16. 9. Client-side Templates
      1. Introduction
      2. Rendering objects using Handlebars
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Rendering objects using EJS
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Rendering objects using Jade
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Rendering arrays using Handlebars
        1. Getting ready
        2. How to do it...
        3. How it works...
      6. Rendering arrays using EJS
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Rendering arrays using Jade
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Simplifying templates with helpers in Handlebars
        1. Getting ready
        2. How to do it...
        3. How it works...
      9. Reusing templates with partials in Handlebars
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Reusing templates with partials in EJS
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There is more...
      11. Using filters in Jade
        1. Getting ready
        2. How to do it...
        3. How it works...
      12. Using mixins in Jade
        1. Getting ready
        2. How to do it...
        3. How it works...
      13. Using layouts and blocks in Jade
        1. Getting ready
        2. How to do it...
        3. How it works...
    17. 10. Data Binding Frameworks
      1. Introduction
      2. Creating a basic Angular view with data binding
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Rendering lists and using Angular controllers
        1. How to do it...
        2. How it works...
        3. There's more...
      4. Routing, filters, and backend services in Angular
        1. How to do it...
        2. How it works...
        3. There's more…
      5. Using Angular's client-side validation
        1. How to do it...
        2. How it works...

      6. Making a chart component with Angular directives
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more…
      7. Structuring applications for Meteor.js
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      8. Reactive programming and data in Meteor.js
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      9. Live HTML and user-specific data in Meteor.js
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      10. Security mechanisms in Meteor.js
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
    18. 11. Data Storage
      1. Introduction
      2. Data URI
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      3. Session and local storage
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Reading data from files
        1. How to do it...
        2. How it works...
        3. There's more...
      5. Using IndexedDB
        1. How to do it...
        2. How it works...
        3. There's more...
      6. Limits of the storage and how to ask for more
        1. How to do it...
        2. How it works...
        3. There's more...
      7. Manipulating the browser history
        1. Getting ready
        2. How to do it...
        3. How it works...
    19. 12. Multimedia
      1. Introduction
      2. Playing audio files
        1. Getting ready
        2. How to do it...
        3. How it works...
      3. Playing video files
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      4. Customizing controls for media elements
        1. Getting ready
        2. How to do it...
        3. How it works...
      5. Adding text to your video
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      6. Embedding multimedia
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
      7. Converting text to speech using HTML5 audio
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more..
    20. A. Installing Node.js and Using npm
      1. Introduction
      2. Installing Node.js
      3. Using npm
        1. Installing a local package
        2. Installing a global package
    21. B. Community and Resources
      1. WHATWG
      2. World Wide Web Consortium
      3. Other resources
    22. Index

Product information

  • Title: HTML5 Data and Services Cookbook
  • Author(s): Gorgi Kosev, Mite Mitreski
  • Release date: September 2013
  • Publisher(s): Packt Publishing
  • ISBN: 9781783559282