Today in this article, I will go deep dive to the HTML5 Canvas, one of the most remarkable features of HTML5. I will introduce the Canvas element and position the Canvas as a powerful technology for your Web applications.  With that in mind, I’ll focus on the various areas that HTML5 Canvas applied as well as the related applications and tools.

What’s the HTML5 <Canvas> element?

According to Wikipedia, the Canvas element is part of HTML5 and allows for dynamic and scriptable rendering of 2D shapes and bitmap images. As a drawing surface with a rich set of JavaScript APIs, HTML5 Canvas gives you the power to create and manipulate images and animations on the fly.

Actually, the <Canvas> element is only a container for graphics with height and width attributes. That’s why you need a script to draw the graphics. Canvas provides several approaches for drawing paths, circles, boxes, characters and adding images. To create a Canvas, you need to specify the id, width, and height of the <Canvas> element. You may see the following syntax:

<Canvas id=”Canvas1″ width=”300″ height=”200″>

Fallback content

</Canvas>

The content between the <Canvas></Canvas> tags is “fallback content”, namely, it will be displayed only if the Canvas cannot be displayed. Also you can apply multiple Canvas elements in a web page by individualizing each Canvas with an id to target a specific Canvas through JavaScript.

As a HTML5 technology, the Canvas’ cross-platform support is promising. It works perfectly across most modern Web browsers of Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror and Opera as well as the mobiles of iPhone/iPad and Android.

What is HTML5 Canvas used for?

Canvas enables you to draw directly in the web browser without the use of third-party plug-ins like Adobe Flash. Working with JavaScript libraries and CSS3, HTML5 Canvas helps you create charts and graphs, special image effects, photo slideshows, animations and web-based games.

The examples provided below will give you some clear ideas what you can do with <Canvas> element before you start building your own implementations.

1.   Graphics Design

Canvas allows you to draw all kinds of graphics – shapes, images, text, lines, etc, almost anything you want. HTML5 Canvas can be used as basic drawings of rectangles, coordinates, gradient fills, opacity, paths, text and advanced graphic drawings like transforms, state saving, clipping. Thus many people try to use Canvas in the areas of charts, graphs and even 3D website design.

Another hidden power of HTML5 Canvas is the special image manipulation. This is also the difference between Canvas and SVG. With the Canvas element, you can perform image effects on pixel based artworks. It is easy to design a new image or import an image in the Canvas and operate it as you want. In web design, you may employ Canvas to design awesome images with special effects like sepia, glow, grayscale image hover, emboss, page turn effects, blur, white & black, and etc.

The Canvas graphic applications below would give you some inspiration of what Canvas can do for graphic design.

FlowerPower

FlowerPower is a JavaScript experiment developed by mhepekka using JavaScript and Canvas. This Canvas application inspired by nature uses blooms as brushes. With this simple and beautiful drawing tool, you can design different typography or images for your web design project.

Lucid Chart

I was deeply impressed by this Canvas application – Lucid Chart. It features the visual collaboration that makes drawing diagrams fast and easy. This HTML5-based Web app includes many of the UI elements. If you are a Visio user, you should really give this professional Canvas application a try.

iGrapher

As a Canvas application as well as a Canvas tool, iGrapher is used for charting, analysis and prediction of different stock, currency and commodity markets. This free web-based financial market visualization tool uses Canvas to draw the graphs of financial data.

Gartic Canvas Sketch

This is another graphic drawing application of Canvas. It is called Gartic Canvas Sketch and released by Gartic. It uses Canvas tag for featuring the usual pencil, eraser, line and shape tools, flood fill, color picker, undo, etc, Gartic Canvas Sketch also enables you to watch an animation of how you sketched your artwork and the output formant is PNG, GIF or JPG.

SketchPad

Sketchpad by Mugtug is an excellent HTML5 Canvas application. This effective sketching tool helps users create painting applications using Javascript and Canvas element. Sketchpad consists of the most popular options of brush, pencil, fill, text items and tools for spirographs, unusual shapes or stamps. You may apply this no-flash-required Canvas application to paint any color in any shade or opacity.

Canvas Cycle

This demo is a Canvas applications showcasing different weather effects. It is an implementation of a full 8-bit color cycling engine. You may choose many color cycling scenes with some ambient environmental soundtracks to match.

2.   Images and Photo galleries

It is very easy to create much more beautiful image or photo galleries with HTML5 Canvas. To animate using the Canvas tag, you should create a loop and then set the times per second that you redraw the entire Canvas. For example, if you want to animate an image or photos, you need to hold a proper reference to that image and then redraw the image by placing it in a different position on the Canvas on every tick of the loop. Such images or photo galleries by Canvas may be used for web picture showcasing, product displaying or even for customers to drop products into a shopping cart.

Here are 3 Canvas applications used for images or photo gallery. Some are developed with amazing interactions, which gives a fabulous experience to users.

Dynamic Image Collage

Dynamic Image Collage is built using Canvas element, allowing you search for images from Flickr. This application will automatically create the images or photos you added to Canvas as a new layer. You can manipulate the layers in various ways, including: move, scale, rotate, move layer up and down, remove layer, change opacity, change blending mode and enable or disable shadow. It helps you create a personal image gallery.

Surface Photo Gallery

This Canvas photo experiment is created by Ernest Delgado. It’s a UI Canvas implementation that closely follows the “photo table” application of Microsoft Surface. This HTML5 Canvas application allows users to create surface photo gallery with drag & drop instead of redrawing every image each time when one of them is dragged

Coulisse photo slideshow

Coulisse is a Canvas slideshow created by Elmer. This is a Canvas application with cover flow effect using the Canvas element. Click the photos in the demo, and you will enjoy a new and exciting type of slideshow with its own animated transitioning effect.

3.   Animations

HTML5 Canvas has changed the way JavaScript used to be and allows JavaScript to operate like paint. To create animation with the HTML5 Canvas tag, you need to know the basic structure of the animation loop in HTML5 Canvas, including: initializations, determine the frame rate, evaluate the current state, modify sprite data and redraw all sprites. Now, With HTML5 Canvas technology, designers can animate things up on the Canvas without plug-ins of Flash.  The best thing is that Canvas animation is supported in most modern browsers and mobiles, which help the web animation to win much more viewers.

Take a look at the following three Canvas applications and get inspired by the powerful Canvas animation.

Leaf Transform

This simple 3D simulation of a leaf floating within the forest is created by Andrés Fernández . He places the leaf in a Canvas on the forest background modifying its transformation matrix to show the animation of leaf floating.

Fish IE Tank

FishIE Tank is also a Canvas animation. It is an adaptation of the Microsoft embedded in a PowerBASIC application instead of running it in a browser.

Crazier Tentacles

Crazier Tentacles is a physics-based version of Canvas animation. This HTML5 application uses the same formula to generate the target shape and elastic rod physics, making it go towards that shape.

4.   Games

The Canvas element contains a drawable region defined in HTML code with height and width attributes, allowing for dynamically generated graphics. Due to this feature, HTML5 Canvas is popularly used for gaming development. Now, with the advent of the HTML5 Canvas element, you can create snazzy looking web games easier than ever before without using Flash.

Here are two of my favorite games by HTML5 Canvas. Check out and you will be amazed that Canvas is really capable of powering online games.

Pirates Love Daisies

Pirates Love Daisies is a Canvas game about pirates fighting all kinds of sea creatures (and seagulls) to protect their daisy patch.

Mayhem

This math based HTML5 Canvas game will stress your brain while having a nice game experience. The idea is to select the number tiles to give the exact total that has been asked. Therefore, the more bricks you use, the more points you’ll get.

Other useful free online HTML5 Canvas tools

Since HTML5 Canvas is definitely change the way we create website and web apps, there are plenty of Canvas resources and tutorials online. Although one can easily integrate Canvas into the web pages, you will require some programming and mathematical skills for creating the interactive effects, graphs, games, animations and functions. Here, I just show you some free online Canvas tools for you to simplify or optimize your HTML5 Canvas project in the above areas.

Online 3D Sketch Tool – A sketching tool uses HTML5 Canvas to make 3D drawing.

Paper.js – An open source HTML5 Canvas vector graphics scripting tool.

Harmony – An HTML5-based tool lets you draw on white Canvas using different brushes.

Cloud Canvas – A HTML5 image creator and editor.

SVG to Canvas – A tool converts SVG into HTML5 Canvas JavaScript.

Canvas Creator – A HTML5 game tool needs your login in.

CanvasLoader Creator – A tool for you to generate scripted preloaders and create spinners using the HTML5 Canvas object.

What do you think?

Alright, we will come to the end of this part. The Canvas element really represents a big forward in graphics capabilities in the web development. Hopefully this deep dive into HTML5 Canvas introducing its usage areas as well as applications and tools is helpful for you. If you have any ideas about the HTML5 Canvas technology, feel free to share with us in the comment.

This fantastic free Canvas application – Lucid Chart has a big impact on me. It shows us how an HTML5 Web app can offer functionality comparable to a desktop application on any platform. It uses canvas to simplify the online creation of professional flowcharts, diagrams, graphs and representations. This online software is easy to use with a few clicks. It is loaded with diagram tools, collaborate flow charts, sitemaps, wireframes, network diagrams, mind maps, iPhone mockups, business process diagrams, UML models and etc. Lucid Chart also supports Microsoft Visio import.

This HTML5-based visual collaboration tool allows you to work together with an unlimited number of others to create and edit diagrams in real time. Thus, it is great for team collaboration or working with clients. Moreover, with this freeware, you may drag new lines out of any object, add your own images, export to PDF, PNG and JPG, embed diagrams in blogs or wikis and much more. Since this HTML5 tool provides you large numbers of features and functionalities, you can draw diagrams with clarity and precision. If you are a Visio user, you should really give this professional Canvas application a try.

The Web Storage API defines two types of storage areas ― local storage and session storage. Local storage is persistent data which remains until it is explicitly deleted, or until the browser’s cache is cleared. According to the specification, browsers should allocate at least 5MB of local storage per domain. The second storage type, session storage, is also persistent data, however the data is tied to a “top-level browsing context” (i.e. a browser tab or window). Session data remains until it is either deleted or the browsing context is closed. Session storage is particularly useful when a user is interacting with multiple instances of the same website. In such a situation, using local storage could result in the different instances overwriting each others data.

The two types of storage areas are accessed through global objects named “localStorage” and “sessionStorage”.  Both storage areas implement the exact same API.  Data is stored as key/value pairs, and all data is stored in string form.  When adding data to storage, it is implicitly converted to a string.  However, when the string data is retrieved from storage it needs to be explicitly converted to the appropriate data type using functions such as parseInt().  When dealing with objects, the JSON.parse() and JSON.stringify() methods should be used for serialization and deserialization.

Detecting Storage Support

The Web Storage API, like many other HTML5 features, is not supported by all browsers.  To check if a browser supports storage, use the function shown below.  The function checks for the existence of the global “localStorage” object.  A similar function could be created to check for session storage, but it can be safely assumed that if one storage area exists, then so does the other.

function localStorageSupported() {
  try {
    return "localStorage" in window && window["localStorage"] !== null;
  } catch (e) {
    return false;
  }
}

Storing Data

Data is added to storage using the setItem() method.  setItem() takes a key and value as arguments.  If the key does not already exist in storage, then the key/value pair is added.  If the key is already present, then the value is updated.  Several example setItem() usages are shown below.  The examples show how to add data of various types to local and session storage.  Notice that the “key” argument must always be a string, while the type of “value” can vary.

localStorage.setItem("key", "value");
sessionStorage.setItem("foo", 3.14);
localStorage.setItem("bar", true);
sessionStorage.setItem("baz", JSON.stringify(object));

Data can also be added to storage using object property assignment statements.  The previous setItem() examples have been rewritten below using assignment statements. Note that the assignment to “key” on the first line will fail silently.  This is because the storage areas have a built in function named key() that will be covered later.  For this reason, the API methods are the preferred way to access storage.

localStorage.key = "value"; // this fails silently
sessionStorage.foo = 3.14;
localStorage["bar"] = true;
sessionStorage["baz"] = JSON.stringify(object);

If a site attempts to store too much data, eventually the browser’s storage quota will be exceeded and an exception will be thrown.  To handle this case, try-catch blocks should be used when storing data.  An example of this is shown below.

try {
  localStorage.setItem("key", "value");
} catch (e) {
  alert("Exceeded Storage Quota!");
}

Reading Stored Data

To read data from storage, the getItem() method is used.  getItem() takes a lookup key as its sole argument.  If the key exists in storage, then the corresponding value is returned.  If the key does not exist, then null is returned.  The following examples use the getItem() method to retrieve the data stored in the setItem() examples.

var string = localStorage.getItem("key");
var number = sessionStorage.getItem("foo");
var boolean = localStorage.getItem("bar");
var object = JSON.parse(sessionStorage.getItem("baz"));

Stored data can also be accessed by reading properties of the “localStorage” and “sessionStorage” objects.  The previous getItem() examples have been rewritten below using object property syntax.

var string = localStorage.key;
var number = sessionStorage.foo;
var boolean = localStorage["bar"];
var object = JSON.parse(sessionStorage["baz"]);

Iterating Over Stored Data

Often times, it is necessary to programmatically loop over all of the items in storage.  The loop’s upper bound is determined by the “length” property of the particular storage area.  The stored keys can be retrieved one at a time using the key() method.  key() takes a single integer parameter that acts as an index to the storage area.  An example of looping over each key/value pair in “localStorage” is shown below.  Of course, session storage can be processed in a similar fashion by substituting “sessionStorage” for “localStorage”.

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  var value = localStorage.getItem(key);
  // do something with the key and value
}

Deleting Stored Data

When data is no longer needed, it should be explicitly removed.  This is especially true for local storage, as it will persist even after the browser is closed.  To delete individual key/value pairs from storage, the removeItem() method is used.  The removeItem() method takes the key to be deleted as its only parameter.  If the key is not present then nothing will happen.  Examples of the removeItem() method are shown below.

localStorage.removeItem("key");
sessionStorage.removeItem("foo");
localStorage.removeItem("bar");
sessionStorage.removeItem("baz");

The delete operator can also be used to remove stored data.  The previous example is rewritten below using delete instead of removeItem().

delete localStorage.key;
delete sessionStorage.foo;
delete localStorage["bar"];
delete sessionStorage["baz"];

While removeItem() is used to delete individual pieces of data, the clear() method is used to delete all stored data.  Usages of the clear() method are shown below.

localStorage.clear();
sessionStorage.clear();

The storage Event

A user can potentially have several instances of the same site open at any given time.  Changes made to a storage area in one instance need to be reflected in the other instances.  The Web Storage API accomplishes this synchronization using the “storage” event.  When a storage area is changed, a “storage” event is fired for any other tabs/windows that are sharing the storage area.  Note that a “storage” event is not fired for the tab/window that changes the storage area.

Storage areas can be changed by calls to setItem(), removeItem(), and clear().  However, not all calls to these methods actually change the storage area.  For example, calling clear() on an empty storage area or removeItem() on a key that does not exist will not change the storage area, and therefore will not fire an event.

The “storage” event object has several fields of interest which are described below.  Following the description of the fields is an example “storage” event handler.

• “key” ― This field is the key argument of setItem() or removeItem(), or null when clear() caused the event to be fired.
• “newValue” ― The “value” argument to setItem() is reflected in this field.  Calls to removeItem() and clear() cause this field to be null.
• “oldValue” ― This field holds the key’s value prior to a call to setItem() or removeItem().  Calls to clear() cause this field to be null.
• “url” ― The “url” field stores the address of the page whose storage area was affected.
• “storageArea” ― The “storageArea” field corresponds to the local or session storage area that was changed.

window.addEventListener("storage", function(event) {
  var key = event.key;
  var newValue = event.newValue;
  var oldValue = event.oldValue;
  var url = event.url;
  var storageArea = event.storageArea;
  // handle the event
});

Example Page

The following code implements a sample page for manipulating local storage.  The page is also available online here.  The example covers the entire local storage API, including the “storage” event.  In order to see the “storage” event in action, the page must be open in at least two separate tabs/windows of the same browser.  The “storage” event will also only work if the page is served over HTTP (i.e. the file:// protocol will not work).

<!DOCTYPE html>
<html>
<head>
  <title>Web Storage Example</title>
  <meta charset="UTF-8" />
  <script>
    "use strict";
    window.addEventListener("load", function(event) {
      var key = document.getElementById("key");
      var value = document.getElementById("value");
      var add = document.getElementById("add");
      var remove = document.getElementById("remove");
      var clear = document.getElementById("clear");
      var content = document.getElementById("content");
      add.addEventListener("click", function(event) {
        if (key.value !== "") {
          try {
            localStorage.setItem(key.value, value.value);
          } catch (e) {
            alert("Exceeded Storage Quota!");
          }
          refreshContents();
        }
      });
      remove.addEventListener("click", function(event) {
        if (key.value !== "") {
          localStorage.removeItem(key.value);
          refreshContents();
        }
      });
      clear.addEventListener("click", function(event) {
        localStorage.clear();
        refreshContents();
      });
      window.addEventListener("storage", function(event) {
        var k = event.key;
        var newValue = event.newValue;
        var oldValue = event.oldValue;
        var url = event.url;
        var storageArea = event.storageArea;
        alert("EVENT:\n" + k + "\n" + newValue + "\n" + oldValue + "\n" + url + "\n" + storageArea);
        refreshContents();
      });
      function refreshContents() {
        var str = "";
        for (var i = 0, len = localStorage.length; i < len; i++) {
          var k = localStorage.key(i);
          var v = localStorage.getItem(k);
          str += "'" + k + "' = '" + v + "'<br />";
        }
        key.value = "";
        value.value = "";
        content.innerHTML = str;
      }
      refreshContents();
    });
  </script>
</head>
<body>
  Key:  <input type="text" id="key" /><br />
  Value: <input type="text" id="value" /><br />
  <input type="button" id="add" value="Add to Storage" />&nbsp;
  <input type="button" id="remove" value="Remove from Storage" />&nbsp;
  <input type="button" id="clear" value="Clear Storage" /><br />
  Contents of Local Storage:<br />
  <span id="content"></span>
</body>
</html>

Things to Remember

• Local storage persists until it is explicitly deleted or the browser’s cache is cleared.
• Session storage persists until it is explicitly deleted or the browsing context is closed.
• Data stored by one browser is not accessible by another browser.  For example, data stored by Chrome is not seen by Firefox.
• Objects should be stored as JSON strings.
• For security reasons, sensitive data should not be stored, especially in local storage.
• Changes to a storage area cause a “storage” event to be fired.
• As with many other HTML5 features, web storage is not yet implemented consistently.

via: sitepoint

HTML5 outliner is a great tool that allows you check Your HTML Structure. By examining the outline of your HTML5 markup, you will get an overview of your document. Thus, you may make sure whether you have used headings and sections elements correctly.

This HTML5 tool enables you paste in your code, point it to a URL or upload a file easily. With these new elements, you are able to make your content flow in a logical manner. As a web designer or developer, the HTML5 outliner is truly another useful tool to have in your toolkit.

Moreover, there is another HTML5 outliner (h5o), which is an implementation of the algorithm in JavaScript. This tool aims to produce outlines in decent browsers and has a Google Chrome extension, which uses the HTML5 outline algorithm to create a table of contents. Try it if necessary.

Don’t stress … there’s a new kid on the block to help you out: the HTML5 sandbox. But before I get to that, let’s quickly review iframe element issues.

A Black Box

Embedding content with an iframe is like announcing a party publicly on Facebook. You think you know who you invited, but really you have no idea who passed it on and who’ll show up.

The same is true for framing content. You know what you are referencing, but you have no clue how the site will evolve in the future. Content or functionality (or both) can change any time. Without you knowing … and without your approval.

Security Concerns Using Iframe

Browsers handle pages that use iframe just like any other web page. Forms can be used to retrieve user input, scripts can be executed, the page can navigate within the browser window, and browser plugins can be executed. And just like the party crashers who get out of hand, you have no control what the hosted content will do.

There is one mechanism in place by default that prevents some kinds of attacks: the cross-domain policy.

Re-hosting Content From Another Domain

If hosted content is coming from another domain, cross-domain policy comes into play and it prohibits the “foreign” content from accessing the parent’s document object model.

So, the embedded page is not able to read, for instance, cookies or the browser’s local storage for the hosted domain. But there are still risks left.

Hosted content can still re-navigate on the top level. By displaying content the user would expect, the site could attempt to phish confidential information from the user. Or, by using a similarly styled form, attempt to maliciously capture user information that way.

That’s why, even with the cross-domain policy in place, there are still big security risks.

Re-hosting Content From the Same Domain

The case for re-hosting content from the same domain is even worse.

When the content comes from the same domain, there are no default security restrictions in place. Embedded content can access the complete loaded browser DOM and manipulate everything.

It kind of makes sense that content on the same domain should be safe. The risk here primarily stems from user-generated content that is re-hosted in the iframe.

A Sandboxed Approach

These valid security concerns hadn’t been properly addressed by a standards body for a long time. Without a clear W3C standard, it was essential to somehow secure the host from framed content. For example, Microsoft provided a proprietary implementation of iframe security in Internet Explorer 8. Others picked it up and discussed it as the baseline for their browsers as well. But standards have matured greatly since IE8.

Modern browsers including Chrome, Firefox, and IE10 Platform Preview are based on the W3C iframe sandbox attribute.

Here’s what we’ll build today with sandbox. See the demo here.

Let’s begin by applying the sandbox. Just add it as empty attribute to the iframe element:

<iframe sandbox src="http://somewebsite.com/default.html"></iframe>

That’s it!

Now, iframe sandboxed content is re-hosted in the browser with the following restrictions:

• Plugins are disabled. Any kind of ActiveX, Flash, or Silverlight plugin will not be executed.
• Forms are disabled. The hosted content is not allowed to make forms post back to any target.
• Scripts are disabled. JavaScript is disabled and will not execute.
• Links to other browsing contexts are disabled. An anchor tag targeting different browser levels will not execute.
• Unique origin treatment. All content is treated under a unique origin. The content is not able to traverse the DOM or read cookie information.

This means that even content coming from the same domain is treated with the cross-domain policy, as each iframe content will be viewed as a unique origin.

Embedded content is only permitted to display information. No other actions can be done inside the iframe that could compromise the hosting website or take advantage of the users’ trust.

Checking for the Sandbox Attribute

We know that an iframe is an open gate. We know that the sandbox attribute locks down security of hosted content. The decision is clear: Use iframe elements just with the sandbox attribute!

You can confirm that the browser supports the iframe sandbox attribute with a simple check in JavaScript:

if("sandbox" in document.createElement("iframe")) {
  // render the iframe element ...
} else {
  // embed content through other ways,
  // as the browser does not support the sandbox
}

If it is supported, just use the sandbox attribute. If not, try to embed the content through other ways or encourage the user with a message that they should upgrade to a modern browser.

Customizing the Sandbox

There are cases where you’ll need some level of customization on the restrictions, which is absolutely possible.

Several attribute values relax the standard sandbox policy …

allow-forms

If you want to enable forms post back within the iframe element, you just specify the allow-forms value for the sandbox attribute.

<iframe sandbox="allow-forms" src="xyz.html"></iframe>

If this value is present, the embedded page is allowed to post back using a form submit within the frame.

allow-scripts

JavaScript is a powerful language and is often used to have dynamic interactions on the client side without resending information to the server. But that power also brings risks when re-hosting foreign web pages.

Therefore, you should carefully consider whether you really want to enable JavaScript in iframe scenarios—especially when the content is from an unknown source.

Enabling JavaScript is done through the allow-scripts value.

<iframe sandbox="allow-scripts" src="xyz.html"></iframe>

allow-same-origin

By default, an IFRAME page from the same domain has the possibility to access the parent’s document object model.

With the sandbox attribute in place, the page will be treated as not being from the same origin. This page has no access to the resources, even when coming from the same domain.

To re-enable same-origin treatment in a sandboxed scenario, you have to specify the allow-same-origin attribute.

<iframe sandbox="allow-same-origin" src="xyz.html"></iframe>

The value itself is not very helpful, as you need some script capabilities to make use of it.

For example, if you want to access the local storage of the current domain like this:

function loadFromStorage(key) {
  if(localStorage) {
    return localStorage.getItem(key);
  }
});

… you also need the allow-scripts value:

<iframe sandbox="allow-scripts allow-same-origin" src="xyz.html"></iframe>

Now access works!

But be warned: allowing multiple scripts in the same sandbox can lead to security vulnerabilities. For example, your hosted content can manipulate the attributes of the sandbox and remove further restrictions.

allow-top-navigation

When you use the sandbox attribute, anchor targeting other browsing contexts are ignored and not executed by default. This protects the website hosting the iframe content from being replaced by the hosted content.

For example, this link would not be executed in the default sandbox, as the target would replace the complete web page:

<a href="xyz.html" target="_top">Click me</a>

Relaxing this policy is only recommended if you trust the content you host.

<iframe sandbox="allow-top-navigation" src="xyz.html"></iframe>

ms-allow-popups

Sometimes it is useful to allow embedded content opening up new popup windows. A perfect example is a mapping service like Bing Maps.

When embedding Bing Maps, additional functionality like driving directions or destination details can be looked up in popup windows. But since sandbox prohibits this, there’s a setting in Internet Explorer 10 that will enable popups without compromising the sandbox.

The following code shows how to set up ms-allow-popups:

<iframe sandbox="ms-allow-popups" src="xyz.html"></iframe>

When setting this value, embedded sites are able to display information in a new window.

<a href="xyz.html" target="_new">Show Info</a>

Putting it all together

You can combine several attribute values on one sandbox. For instance, if you want to enable forms post-back, top-level navigation, and JavaScript, just specify:

<iframe sandbox="allow-forms allow-top-navigation allow-scripts" src="xyz.html"></iframe>

It is also good to know that the sandbox behaves correctly when used in hierarchical situations, using several nested iframes with different sandbox attribute values. The top-level sandbox always dominates down the hierarchy.

Get Hands On!

You can play around with the HTML sandbox in this demo. And you can download a copy of this demo from GitHub. To enable the form post-back demo, just open the project folder in WebMatrix and start the project from there.

Then, download a modern browser (like Internet Explorer 10 Platform Preview) and familiarize yourself with the sandbox by reading the IE developer guide. This single attribute is a big step toward a more secure web … and modern browsers are finally ready to sandbox embedded content.

via: sitepoint

Cloudkick Viz is another HTML5 canvas tool. Built on HTML5, canvas, and JavaScript, it displays cloud server monitoring information when checking your servers. Servers are plotted in 3D space in real time on basis of performance metrics like CPU usage, Memory usage, and Ping latency. Each server will blink when monitoring data is updated, and if there is a check goes critical, it shakes and turns an angry red. What’s more, if you hover over a server, this canvas tool will show you its name and a ghost trail based on performance history. If you click it, you will get detailed monitoring data.

As you can see from the screenshot, the circles represent your servers. And of cause that more powerful servers will be larger than less powerful ones. The help page of this app will inform you that red pulsing circles indicate servers in a warning or critical state, and flashing circles indicate a server being updated with new data. With this HTML5 canvas tool, you can also rotate the view by clicking and dragging in an empty area or by operating with the arrow keys.

Just as its name implies, Visual Form Builder allows you to build and manage all kinds of beautiful HTML5 forms for your website. This HTML5 tool is a plug-in to create fully functional contact forms with a few clicks using a simple and clean interface. No PHP, CSS, or HTML coding requirement. These forms include jQuery validation, a basic logic-based verification system, and entry tracking. Something to keep in mind is using Visual Form Builder requires a modern browser. However, the forms built by this HTML5 application are compatible with all browsers.

Visual Form Builder enables client and server side validation, and each form you create has its integrated side validation built in. With the powerful and simple validation options, the script will automatically validate HTML5 fields based on their type. This HTML5 form creator supports all field type (Text, Text Area, Select, Radio, Checkbox, Password, File, Email, Number, URL, Date, and Range) and even HTML5 fields. In addition, you can easily add your own additional themes to this application.

iGrapher is a HTML5 canvas tool, also we may call it a canvas app. It is used for charting, analysis and prediction of different stock, currency and commodity markets. With this tool, you are able to make a schematic and technical drawing of different international stocks from the major markets. These stocks range from the FTSE to Dow Jones against different commodities including gold and global currencies. At the same time, you can also plot the news activity of a stock to make clear of the correlations between news reports and stock market movements.

iGrapher has many more features like algorithmic analysis of the trends. This web based financial market visualization tool is free of charge and employs canvas to draw the graphs of those financial data. The best thing is this HTML5 tool is very easy to use. What you need to do is make some selections from the right hand menu, then iGrapher will help you draw a graph to compare each selection. Meanwhile, you can check out the value of each selection on the highlighted date by hovering over the graph.

View demo Download source

In this tutorial, we are going to create a slideshow with a parallax effect with the help of some CSS3 properties. We’ll use radio buttons and sibling combinators for controlling which slide is shown. There will be two backgrounds and the idea is to change the background positions and the position of the slider with transitions in order to create a slight parallax effect.

The graphics used in the demo are by: 5Milli (Global Vector Map) and by WeGraphics (Free Vector Infographic Kit).

The Markup

We will “connect” the input elements to the division with the class sp-content by using the general sibling combinator. For that we will leave the inputs on the same level like the sp-content div. When we click on an input we will change the background color and background position of it (grid pattern) and also the background-position of the sp-parallax-bg div (the world map) with transitions. The respective slide will be shown by moving the sp-slider ul to the right position. The markup looks as follows:

The list elements are the wrappers for each slide and although we are using simply images here, you can use any kind of content.

The CSS

We’ll set the width of the main container to 80% and set the width of the divisions with class sp-content and class sp-parallax-bg to 100%. The sp-content div will have a background color and a background image (grid) that we will move whenever we slide the slider ul. The sp-parallax-bg div will have a map as background image and we will also move the background position.

The styles of the inputs and the labels:

We’ve set the opacity of the inputs to 0 so that they are not visible. The labels are under the radio button and we will make it look like a little circle. All the inputs and labels will be positioned absolutely and we will place them next to each other by applying a left margin.

Next, we will style the arrows which are simply labels with the respective for attribute. Note, that clicking on a label to active an associated input might not work in mobile browsers. But anyway, you can navigate using the dots since we are actually clicking on the inputs.

The arrow labels have the following style:

Now, let’s define when each arrow is shown. On the first slide we, for example, don’t want to show the left arrow. And on the last slide we don’t want to show the right arrow:

When an input is selected, the sp-content div will have a transition for the background-position and the background-color. The second transition is going to take a bit longer:

The div with the world map (sp-parallax-bg) will also have a transition for the background-position:

In this way we can add a background parallax effect.

Let’s define the changes to color and background-position for the sp-content div:

… and the sp-parallax-bg div:

The unordered list with the class sp-slider will have a width of 500%. This is because we have 5 slides. It will have a transition for the left value, that we will change depening on the input that is checked:

Each list element is a slide and it will also have a transition for the opacity. We will give both, the slide and the image inside the box-sizing property of “border-box”. This will allow us to set a padding but also use 100% values for heights and widths and not worry about any overflow:

Now we need to set the correct left values for each selected slide:

Each current slide will then get opacity 1:

That’s all, hope you like it!

View demo Download source

Via: codrops