Book Image

HTML5 Data and Services Cookbook

Book Image

HTML5 Data and Services Cookbook

Overview of this book

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!
Table of Contents (21 chapters)
HTML5 Data and Services Cookbook
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

Index

A

  • addHeaders function / How to do it...
  • advanced rich text input
    • about / Advanced rich text input, How to do it...
    • working / How it works...
  • AJAX / Creating an HTTP GET request to fetch JSON
  • Ajax Push
    • used, for real-time update creation / Making real-time updates with Ajax Push, How to do it..., How it works..., There's more...
  • align setting / How it works...
  • Angular
    • routing / Routing, filters, and backend services in Angular
    • filters / Routing, filters, and backend services in Angular
    • backend services / Routing, filters, and backend services in Angular
    • client-side validation, using / Using Angular's client-side validation, How it works...

  • Angular app
    • writing / How to do it...
  • Angular controllers
    • using / Rendering lists and using Angular controllers, How to do it..., How it works..., There's more...
  • Angular directives
    • used, for making chart component / Making a chart component with Angular directives, How to do it..., How it works...
  • API
    • versioning / Versioning your API, How to do it..., There's more...
  • application
    • structuring, in Meteor.js / Structuring applications for Meteor.js, How it works...
  • area chart
    • about / Creating an area chart
    • creating / Creating an area chart, How to do it...
    • working / How it works...
  • array
    • rendering, Handlebars used / Rendering arrays using Handlebars, How to do it..., How it works...
    • rendering, EJB used / Rendering arrays using EJS, How to do it..., How it works...
    • rendering, Jade used / Rendering arrays using Jade, How to do it..., How it works...
  • Array.filter function / How it works...
  • ArrayBuffer class / Decoding base64 encoded binary data
  • arrayToString function / How to do it...
  • ASCIIMath method / There's more...
  • asynchronous server-side validation
    • using / Using asynchronous server-side validation, Getting ready, How to do it..., How it works...
  • atobuf function / How it works...
  • attribute directives / There's more...
  • audio files
    • playing / Playing audio files, How it works..., Playing video files
    • working / How to do it..., How it works..., There's more...
  • autocomplete for input
    • creating / Creating autocomplete for input, How to do it..., How it works...
  • autoplay attribute / How it works...
  • autorun function / How it works...

B

  • base64 encoded binary data
    • about / Decoding base64 encoded binary data
    • decoding / Getting ready, How to do it..., How it works...
  • basic Angular view
    • creating, data binding used / Creating a basic Angular view with data binding, How to do it..., How it works...
  • binary data
    • encoding, into base6 / Encoding binary data or text into base64, How to do it..., How it works...
    • serializing, into JSON / Serializing binary data into JSON, How to do it..., There's more...
  • binary file
    • posting, to server / Posting a binary file to the server, How to do it...
  • blocks
    • using, in Jade / Using layouts and blocks in Jade, How to do it..., How it works...
  • bound method / How it works...
  • browser history
    • manipulating / Manipulating the browser history, How to do it..., How it works...
  • built-in constraints
    • advanced use / Advanced use of built-in constraints and custom validations, How to do it..., How it works..., There's more...
  • built-in pattern validation
    • about / Using the built-in pattern validation
    • validating / How to do it..., How it works..., There's more...

C

  • .color() method / How it works...
  • CartoDB / There's more...
  • Certificate Signing Request (CSR) / Getting ready
  • change function / How to do it...
  • chart
    • zooming / Zooming and panning a chart, How it works...
    • panning / Zooming and panning a chart, How it works...
  • chart component
    • making, Angular device used / Making a chart component with Angular directives, How to do it..., How it works...
  • checkValidity() method / How it works...
  • children attribute / How to do it...
  • Chosen / Getting ready
  • clearWatch method / How it works...
  • Client-side filtering / How it works...
  • client-side validation
    • combining, with server-side validation / Combining client-side and server-side validation, How to do it..., How it works...
  • client-side validation, Angular
    • using / Using Angular's client-side validation, How it works...

  • client side
    • file inputs, using / Using file inputs at the client side, How to do it..., There's more...
    • XML documents, serializing / Serialization of XML document at the client side, How to do it..., How it works..., There's more...
  • code
    • displaying, in HTML / Displaying code in HTML, How to do it..., There's more…
  • color picker input
    • about / Color picker input
    • working / How it works...
  • combined charts
    • about / Displaying combined charts
    • displaying / How to do it...
  • combined complex filters
    • about / Creating combined complex filters
    • creating / Creating combined complex filters, Getting ready, How it works...
  • Comet / Making real-time updates with Ajax Push
  • comet streaming / Exchanging real-time messages using WebSockets
  • Commonwealth of Nations / Creating interactive Geo charts from a dataset
  • config parameter / How to do it...
  • Connect
    • URL / Getting ready
  • contentEditable
    • used, for basic rich text input / Using contentEditable for basic rich text input, How to do it..., How it works...
    • used, for advanced rich text input / Advanced rich text input, How to do it..., How it works...
  • controls attribute / How it works...
  • cookie.set function / How it works...
  • cookies
    • serializing / Serializing and deserializing cookies, Getting ready, How to do it..., There's more...
    • deserializing / Serializing and deserializing cookies, Getting ready, How to do it..., There's more...
  • Cross-origin resource sharing (CORS) / How to do it...
  • Cross Origin Resource Sharing (CORS) / How it works...
  • custom dialogs
    • about / Creating custom dialogs
    • creating / Getting ready, How to do it...
    • working / How it works...
  • custom headers
    • used, for creating request / Creating a request with custom headers, How to do it..., How it works...
  • custom single-selection list
    • about / Creating a custom single-selection list
    • creating / How to do it..., How it works...
  • custom validations / Advanced use of built-in constraints and custom validations, How to do it..., How it works..., There's more...

D

  • d3.behavior.zoom() method / How it works...
  • d3.geo.path() method / How it works...
  • data
    • validating / Introduction
    • text, validating by length / Validating text by length
    • reading, from files / Reading data from files, How to do it..., How it works..., There's more...
  • data()function / How to do it...
  • data-measurement property / How to do it...
  • data-v-pluginName attributes / How to do it...
  • data binding
    • used, for basic Angular view creating / Creating a basic Angular view with data binding, How to do it..., How it works...
  • data property / How it works...
  • dataset
    • interactive Geo charts, creating / Creating interactive Geo charts from a dataset, Getting ready, How to do it..., How it works..., There's more...
  • Data URI
    • about / Data URI, Getting ready, How to do it...
    • working / How it works...
  • Date.parse method / Getting ready
  • dates
    • inputting / Inputting dates, How it works...
  • db.collection.insert() function / How to do it...
  • dialog function / How it works...
  • directive.link property / There's more…
  • document / How it works...
  • document.execCommand function / How it works...
  • document.queryCommandState function / How it works...
  • DOMParser
    • used, for reading XML documents / Reading XML documents with DOMParser, How to do it..., How it works...
    • used, for reading XML documents / How to do it...
  • drag-and-drop file area
    • using / Using a drag-and-drop file area, How to do it..., There's more...
  • dragstart event / There's more...
  • drop-down menu
    • about / Creating a drop-down menu
    • creating / Getting ready, How to do it...
    • working / How it works...
  • dynamic elapsed time
    • dispalying / Displaying the dynamic time that has elapsed, How to do it..., How it works…

E

  • .eot version / How it works…
  • EJB
    • used, for array rendering / Rendering arrays using EJS, How to do it..., How it works...
    • templates reusing, with helpers / Reusing templates with partials in EJS, How to do it..., How it works...
  • EJS
    • used, for object rendering / Rendering objects using EJS, Getting ready, How it works...
  • Embedded JavaScript Templates (EJS) / Creating custom dialogs
  • endless scrolling list
    • creating / Creating an endless scrolling list, How to do it..., How it works...
  • expires property / How it works...

F

  • fetchData function / There's more...
  • fields
    • auto updating / Autoupdating fields, How it works…, There's more...
  • file inputs
    • using, on client side / Using file inputs at the client side, How to do it..., How it works..., There's more...
  • files
    • data, reading from / Reading data from files, How to do it..., How it works..., There's more...
  • filters
    • using, in Jade / Using filters in Jade, How to do it..., How it works...
    / Routing, filters, and backend services in Angular, How to do it..., How it works...
  • find() function / How to do it...
  • Flash of Unstyled Text (FOUT) / There's more...
  • FontSquirrel / How it works…
  • force.drag() method / How it works...
  • force directed graph
    • about / Displaying a force directed graph
    • displaying / Getting ready, How to do it...
    • working / How it works...
  • form
    • serializing, into request strings / Serializing a form into request strings, How to do it..., There's more...
  • formatted dates
    • displaying, in user’s time zone / Displaying formatted dates in the user's time zone, Getting ready, How to do it..., There's more...
  • FormData interface
    • about / Using the FormData interface
    • using / How to do it..., How it works...
  • full-width-latinvalue / There's more...

G

  • gauges
    • about / Displaying gauges
    • displaying / How to do it...
    • working / How it works...
  • geographical location input
    • about / Getting geographical location input, How it works...
  • geographic location input
    • maps, using / Geographic location input using maps, Getting ready, How to do it..., How it works...
  • GeoJSON / There's more...
  • getCurrentPosition method / How it works...
  • getItems method / How it works...
  • getMetaData function / How to do it...
  • Google code prettify
    • using / How to do it...
  • grid property / How it works...

H

  • Handlebars
    • about / Rendering objects using Handlebars
    • using, for object rendering / Rendering objects using Handlebars, How to do it..., How it works...
    • used, for array rendering / Rendering arrays using Handlebars, How to do it..., How it works...
    • template simplification, with helpers / Simplifying templates with helpers in Handlebars, How to do it..., How it works...
    • templates reusing, with helpers / Reusing templates with partials in Handlebars, How to do it..., How it works...
  • helpers
    • used, for template simplification in Handlebars / Simplifying templates with helpers in Handlebars, How to do it..., How it works...
  • Hickson
    • URL / WHATWG
  • Highlight.js / There's more…
  • hiragana / There's more...
  • history.length variable / How it works...
  • HTML
    • code, displaying / Displaying code in HTML, How to do it..., There's more…
  • HTML5 audio
    • text, convertin to speech / Converting text to speech using HTML5 audio, How it works..., There's more..
  • HTML5 rocks / Other resources
  • HTML5 test / Other resources
  • HTTP GET request
    • creating, for JSON fetch / Creating an HTTP GET request to fetch JSON, How to do it..., How it works..., There's more...
  • Hypermedia as the Engine of Application State (HATEOAS) / How it works...

I

  • IDBKeyRange methods
    • upperBound / How it works...
    • lowerBound / How it works...
    • bound / How it works...
    • only / How it works...
  • image carousel
    • creating / Making an image carousel, How to do it..., How it works...
  • imperial measurements
    • displaying / Displaying metric and imperial measurements, How to do it..., How it works...
  • IndexedDB
    • about / Using IndexedDB
    • using / How to do it..., How it works..., There's more...
  • Input modalities / There's more...
  • installation
    • node.js / Installing Node.js
    • local package / Installing a local package
    • global package / Installing a global package
  • install subcommand / Installing a global package
  • interactive Geo charts
    • creating, from dataset / Creating interactive Geo charts from a dataset, Getting ready, How to do it..., How it works..., There's more...
  • ISO 8601 / There's more...

J

  • Jade
    • about / Rendering objects using Jade
    • used, for object rendering / Rendering objects using Jade, How it works...
    • used, for array rendering / Rendering arrays using Jade, How it works...
    • filters, using / Using filters in Jade, How to do it..., How it works...
    • mixins, using / Using mixins in Jade, How to do it..., How it works...
    • layouts, using / Using layouts and blocks in Jade, How to do it..., How it works...
    • blocks, using / Using layouts and blocks in Jade, How to do it..., How it works...
  • JavaScript objects
    • JSON, deserializing / Deserializing JSON to JavaScript objects, How to do it..., How it works...
  • jQueryUI / Getting ready
  • JSON
    • deserializing, to JavaScript objects / Deserializing JSON to JavaScript objects, How to do it..., How it works...
    • binary data, serializing / Serializing binary data into JSON, How to do it..., There's more...
  • JSON data
    • fetching, with JSONP / Fetching JSON data with JSONP, How to do it..., How it works...
  • JSONP
    • used, for JSON data fetching / Fetching JSON data with JSONP, How to do it..., How it works...
  • JSON string
    • objects, serializing / Serializing objects to a JSON string, How it works..., There's more...
  • JXON / There's more...

K

  • kana / There's more...
  • kanji / There's more...
  • katakana / There's more...
  • keyup event / How it works…
  • kind attribute values
    • subtitles / How it works...
    • captions / How it works...
    • descriptions / How it works...
    • chapters / How it works...
    • metadata / How it works...
  • KML (Keyhole Markup Language) / How to do it...

L

  • label attribute / How it works...
  • label property / How it works...
  • latin-name value / There's more...
  • latin-prose value / There's more...
  • latin value / There's more...
  • layouts
    • using, in Jade / Using layouts and blocks in Jade, How to do it..., How it works...
  • Leaflet library / Getting geographical location input
  • LED scoreboard
    • creating, web fonts used / LED scoreboard using web fonts, Getting ready, How to do it..., How it works…, There's more...
  • line setting / How it works...
  • lines property / How it works...
  • liszt*updated event / There's more...
  • local storage
    • about / Session and local storage, How to do it..., How it works..., There's more...
    • limits / Limits of the storage and how to ask for more, How to do it..., How it works..., There's more...
  • loop attribute / How it works...
  • lowerBound method / How it works...

M

  • map
    • with path, displaying / How it works...
  • maps
    • used, for geographic location input / Geographic location input using maps, How to do it..., How it works...
  • Markdown
    • about / Rendering Markdown
    • rendering / How to do it..., How it works...
  • Math
    • dispalying / Displaying Math, How to do it..., How it works…
  • MathML / Getting ready
  • media elements controls
    • customizing / Customizing controls for media elements, How to do it...
    • working / How it works...
  • mediagroup attribute / How it works...
  • mediatype attribute / How it works...
  • Mercator projection / How it works...
  • Meteor.js
    • application, structuring / Structuring applications for Meteor.js, How it works...
    • reactive programming / Reactive programming and data in Meteor.js, How to do it..., How it works...
    • live HTML / Live HTML and user-specific data in Meteor.js, How to do it..., How it works...
    • user-specific data / Live HTML and user-specific data in Meteor.js, How to do it..., How it works...
    • security mechanisms / Security mechanisms in Meteor.js, How to do it..., How it works..., There's more...
  • metric measurements
    • displaying / Displaying metric and imperial measurements, How to do it..., How it works...
  • minLength attribute / How to do it...
  • mixins
    • using, in Jade / Using mixins in Jade, How to do it..., How it works...
  • Moment.js / There's more...
  • motion chart
    • creating / Making a motion chart, How to do it..., How it works...
  • move() function / How to do it..., How it works...
  • move() method / How to do it...
  • Mozilla Developer Network (MDN) / Other resources
  • multimedia
    • embedding / Embedding multimedia, How to do it..., There's more...
  • multiple-choice filters
    • creating / Creating multiple-choice filters, Getting ready
    • working / How it works...
  • multiple-choice select lists
    • using / Using multiple-choice select lists, How to do it..., How it works...
  • multiple selection list
    • creating / Creating a multiple-selection list, Getting ready, How it works...
  • muted attribute / How it works...

N

  • ng attributes / There's more...
  • node.js
    • installing / Installing Node.js
  • Node.js
    • used, for creating SSL connection / Creating an SSL connection with Node.js, Getting ready, How to do it..., How it works...
  • Nominatim / Getting ready
  • npm
    • about / Introduction
    • using / Using npm
    • local package, installing / Installing a local package
    • global package, installing / Installing a global package
  • Number.prototype.toFixed() function / There's more...
  • numbers
    • rounding / Rounding numbers for display, How it works…, There's more...
    • padding / Padding numbers, How to do it..., How it works…
    • validating, by range / Validating numbers by range, How to do it..., How it works...
  • numeric value / There's more...

O

  • object
    • rendering, Handlebars used / Rendering objects using Handlebars, How to do it..., How it works...
    • rendering, EJS used / Rendering objects using EJS, Getting ready, How it works...
    • rendering, Jade used / Rendering objects using Jade, How to do it..., How it works...
  • objects
    • serializing, to JSON string / Serializing objects to a JSON string, How it works..., There's more...
  • Ogg Theora
    • URL / How it works...
  • onabort event / How it works...
  • onerror event / How it works...
  • onloadend method / How it works...
  • onload event / How it works...
  • onloadstart method / How it works...
  • only method / How it works...
  • onprogress method / How it works...
  • onupgradeneeded function / How to do it...
  • openCursor method / How it works...
  • OpenType Font (OTF) / How it works…
  • optgroup element / How to do it...
  • OWASP
    • URL / There's more...

P

  • panRange option / How it works...
  • partials
    • used, for templates reusing in Handlebars / Reusing templates with partials in Handlebars, How to do it..., How it works...
    • used, for templates reusing in EJB / Reusing templates with partials in EJS, How to do it..., How it works..., There is more...
  • password strength
    • calculating / Calculating password strength
    • determination conditions / Getting ready, How to do it..., How it works...
  • perspective property / How to do it...
  • pie chart
    • working / How it works...
    • innerRadius option / There's more...
    • combine property / There's more...
  • play method / How it works...
  • poseter attribute / How it works...
  • position setting / How it works...
  • PouchDB / There's more...
  • preflight request / How it works...
  • preload attribute / How it works...
  • prettyprint class / How it works…
  • prettyPrint function / How to do it...
  • Prototype JS / How it works...

R

  • .render() method / How it works...
  • Rainbow / There's more…
  • range chart filter
    • creating / Making a live range chart filter, How to do it..., How it works...
  • range filters
    • creating / Getting ready, How it works...
  • range input field
    • about / Range input field
    • using / How to do it..., How it works..., There 's more...
  • reactive context / How it works...
  • reactive programming / How it works...
  • real-time messages
    • exchanging, WebSockets used / Exchanging real-time messages using WebSockets, Getting ready, How to do it...
  • real-time updates
    • creating, with Ajax Push / Making real-time updates with Ajax Push, How to do it..., How it works..., There's more...
  • replaceState method / How it works...
  • request
    • creatng, custom headers used / Creating a request with custom headers, How to do it..., How it works...
  • request strings
    • form, serializing into / Serializing a form into request strings, How to do it..., There's more...
  • required attribute / How it works...
  • restify / Getting ready, Getting ready
  • reviver function / How it works...
  • Rickshaw / Getting ready
  • romaji / There's more...
  • routing / Routing, filters, and backend services in Angular, How to do it..., How it works...

S

  • .svg version / How it works…
  • .svgz version / How it works…
  • security mechanisms
    • in Meteor.js / Security mechanisms in Meteor.js, How to do it..., How it works..., There's more...
  • serialize() function / How it works...
  • server
    • XML data, reading from / Reading XML data from server, How to do it..., How it works...
    • binary file, posting to / Posting a binary file to the server, How to do it...
  • server-side and client-side filtering / How it works...
  • Server-side filtering / How it works...
  • server-side validation
    • combining, with client-side validation / Combining client-side and server-side validation, Getting ready, How to do it..., How it works...
  • services / How it works...
  • session / Session and local storage, How to do it..., How it works..., There's more...
  • setCustomValidity() method / How it works...
  • Set location link / How it works...
  • showSelectedImages method / How to do it...
  • simpleNotification.show() method / How to do it...
  • simple to-do list
    • rendering / Rendering lists and using Angular controllers, How to do it..., How it works..., There's more...
  • single-choice dropdowns
    • about / Using single-choice dropdowns
    • using / Using single-choice dropdowns, How to do it..., How it works...
  • size setting / How it works...
  • slider property / How it works...
  • Smart Packages / Structuring applications for Meteor.js
  • Socket.IO / Getting ready
  • sortable paginated table
    • creating / Creating a sortable paginated table, Getting ready, How to do it..., How it works...
  • spiderable / There's more...
  • SSL
    • about / Creating an SSL connection with Node.js
  • SSL connection
    • creating, Node.js / Creating an SSL connection with Node.js, Getting ready, How to do it..., How it works...
  • start() method / How it works...
  • stringify function / There's more...
  • sudo command / Installing a global package
  • SyntaxHighliger / There's more…

T

  • telephone input / Telephone input, There's more...
  • Template.hello.events event / How it works...
  • templates
    • simplifying, with helpers in Handlebars / Simplifying templates with helpers in Handlebars, How to do it..., How it works...
    • reusing, with partials in Handlebars / Reusing templates with partials in Handlebars, How to do it..., How it works...
    • reusing, with partials in EJB / Reusing templates with partials in EJS, How to do it..., How it works...
  • text
    • validating, by length / Validating text by length, How to do it..., How it works..., There's more...
    • encoding, into base6 / Encoding binary data or text into base64, How to do it..., How it works...
    • adding, to video / Adding text to your video, How to do it..., How it works..., There's more...
  • text area
    • using / Using textarea, How it works...
  • textarea element / How it works...
  • text input field
    • about / Using the text input field
    • using / How to do it..., There's more...
  • threshold plugin / How to do it...
  • time
    • inputting / Inputting time, How it works...
  • timeago / Getting ready
  • Timed Text Markup Language (TTML) / There's more...
  • toFixed() method / How it works…
  • TopoJSON / There's more...
  • tree
    • displaying / Displaying a tree, Getting ready, How to do it..., How it works…
  • TrueType Font (TTF) / How it works…

U

  • unescape function / How it works...
  • updateCounter() / How to do it...
  • updateScore() function / How to do it...
  • upperBoun method / How it works...
  • URI
    • about / Data URI
  • URL / Data URI
  • user’s time zone
    • formatted dates, dispalying / Displaying formatted dates in the user's time zone, Getting ready, How to do it..., There's more...
  • US zip codes
    • validating / Validating US zip codes, Getting ready, How to do it..., How it works...

V

  • validate function / How it works...
  • verbatim value / There's more...
  • versioned routes / How to do it...
  • versioning
    • API / Versioning your API, How to do it..., There's more...
  • vertical setting / How it works...
  • void readAsArrayBuffer(blob) method / How it works...
  • void readAsDataUrl(blob) method / How it works...
  • void readAsText(blog, optionalEncoding) method / How it works...

W

  • W3C
    • about / WHATWG
    • website / World Wide Web Consortium
  • watchCurrentPosition method / How it works...
  • web fonts
    • used, for creating LED scoreboard / LED scoreboard using web fonts, Getting ready, How to do it..., How it works…, There's more...
  • web notifications API
    • using / Using the web notifications API, Getting ready, How to do it...
    • working / How it works...
  • Web Open Font Format (WOFF) / How it works…
  • WebSockets
    • used, for real-time message exchange / Exchanging real-time messages using WebSockets, Getting ready, How to do it...
    • working / How it works...
  • Web Speech API / There's more...
  • WHATWG
    • about / WHATWG
  • withScope / How to do it...
  • World Wide Web Consortium
    • about / World Wide Web Consortium

X

  • xaxis property / How it works...
  • XML data
    • reading, from server / Reading XML data from server, How to do it..., How it works...
  • XML documents
    • reading, with DOMParser / Reading XML documents with DOMParser, How to do it..., How it works...
    • serializing, at client side / Serialization of XML document at the client side, How to do it..., How it works...
  • XMLHttpRequest Level 2 / There's more...
  • XMLSerializer() method / How it works...
  • XPath (XML Path Language) / There's more...
  • XSTL / Reading XML data from server

Y

  • yepnope function / There's more...

Z

  • zoomRange option / How it works...