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

So this post is for those who need to host their own video content via HTML5. We collect 5 practical HTML5 video tools to host video as HTML5 as possible.

Sothink Video Free Converter

Since modern browsers have already supported HTML5 <video> tag and the trans-platform display of HTML5 video, supporting HTML5 video for your website is an effective way to get more traffic. All you need is a helping hand to complete the task.

Sothink Video Converter is a professional video converter that capable of HTML5 video conversion. Except for the support of all the common formats, it converts video to HTML5 formats (OGG, MP4, and WebM); and more importantly, it generates HTML5 video codes directly, which means you can embed codes to website without any hand-code writing.

You can convert the video to OGG, MP4, and WebM simultaneously; and there will be an html file in the output folder, that’s where the HTML5 video code lies. The code will be looked like this:

You can embed this video code to your site; thus, the video will be displayed on any browser that supports HTML5 <video> tag. Meanwhile, you can customize the code as needed, such as add poster, skin and playlist.

HTML5 Video element maker

HTML5 Video element maker is an online application for you to generate video code for your website. If you have any online video to share, you can use this application to generate HTML5 video code.

It provides different options for you to choose. You can add URL of video source, choose video attributes as needed, set poster of video and provide the fall back video when the browser is not support HTML5 video format. It will generate the code automatically. Here is a little test of HTML5 video code generation:

You can use this code to your site directly or customize as needed.

Html5 Point

HTML5 Point is a PowerPoint plug-in. It converts professional PowerPoint presentation to HTML5 slideshow. HTML5 Point supports all versions of Microsoft PowerPoint. It grasps the trans-platforms features of HTML5. The converted output in HTML5 format allows you to view the slideshows on mobile technologies like iPad, iPhone and Android devices or easily distribute it through most of the web browsers with a web link. The output file retains the videos from the original PowerPoint presentation. You can share the slideshow with worldwide audience.

Here is an HTML5 sample converted from PowerPoint:

Video js

Video.js, builds on JavaScript and CSS, is an easy to use HTML5 video player. It provides a common controls skin, fixes cross-browser inconsistencies, adds additional features like full screen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.

To get Video.js running on web page, you need to copy following lines into your HTML document “<head>”:

And copy the code in the “<body>”:

Now, you can see the HTML5 video on your website.

Video for Everybody

Video for Everybody provides a set of HTML code to embed a video into website by using HTML5 <video>. It is one of the first cross-browser HTML5 video solutions on the web.

The most unique aspect is that is does not use JavaScript. It is especially important for users who do not support JavaScript like RSS readers or Apple device users.

The video will be played as long as the browser supports HTML5 <video>, it will fall back to Flash automatically if the browser doesn’t support HTML5. You can locally host the Flash file or embed an existing file, like a YouTube clip, for instance. There is a deprecated version that can also try to fallback to QuickTime before playing Flash.

It provides the full source code and compacted code; you can use the codes for your own site:

Conclusion:

They are easy to use tools for web developers to host their video in a HTML5 way. They generate HTML5 code for you to simply integrate to website. And it’s fortunate to find a number of other awesome tools available on the market; you are welcome to share your favorite tool in the comment.

Flickr is launching a new HTML5-based uploader today, which provides a far cleaner experience when adding your files to the image storage and sharing service. You can now upload images and videos by simply dragging them into the browser, with preview thumbnails allowing you to manage the order of photos, or crop and rotate them before they reach your Photostream. There are also a number of other pre-publication options — it’s easier to add titles, tags, groups, and edit copyright options before you share your images with the world.

Besides the new interface, Flickr has changed a couple of significant things in the backend: it promises 20-30 percent faster upload speeds for US users, or between 50-60 percent faster for international users. It’s also raised the file size cap to 30MB for free accounts or 50MB for premium, meaning that your super high-resolution panoramas can be shared in all of their glory.

The new uploader works with Chrome 6, Safari 5, and Firefox 8 (or newer), and will be rolling out to all users within the next couple of weeks. These new features are hardly cutting edge — everything from Google+ to imgur already offer this kind of system — but we’re sure it’s welcome use for dedicated Flickr users.

Via: theverge

Today’s tutorial we will code an Audio Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Step 1 – Downloading MediaElement.js

First we need to download the “MediaElement.js” script and extract it. Then from the “build” folder we need three files:

• flashmediaelement.swf
• mediaelement-and-player.min.js
• silverlightmediaelement.xap

Then copy all these three files to the same directory, I will copy for my “js” folder.

Step 2 – HTML Markup

Now, we need to link to the jQuery Library, we can host it locally or use the one hosted by Google. Then we need to link to “mediaelement-and-player.min.js” script file and the CSS file. All this three files need to be inside of the <head> tag.

To create the player we will add a <div> width the class “audio-player”. This div will be the container for our player elements. Let’s add a <h1> tag for the song title and <img> for the cover. Then we will add the <audio> tag that will link to our song and we’ll also set the id to “audio-player”.

To finish we need to add this code before the ending of the </body> tag. Also we need to add the same id as we used in the <audio> tag to load the player. You can set some settings too, for more info read the “MediaElement.js” documentation.

Step 3 – Container Styles

First let’s add some reset styles for all the elements that we will use in the container.

Now let’s style the player container, we will set the width to 400px and height to 120px. We will also add a css3 background gradient and rounded corners.

Step 4 – Title & Cover

Let’s position the title and cover on the player container and then add some typography styles for the title.

Step 5 – Controls Buttons

Now we will style the player controls (play/pause, mute/unmute). To do it we will start by giving some general styles to the buttons and then we’ll set a fixed width and height. We will position the “pause/play” buttons and “mute/unmute” buttons in the same position and they will toggle on click event.

Step 6 – Volume Slider

To style the volume slider we’ll position it, then we will give a 200px width and 8px height. We also need to set a background color, some shadows and rounded corners.

Then we need to style the “current volume”, to do it we’ll add a custom image background, rounded corners, etc.

Step 7 – Progress Bar

The progress bar styles are almost basics. We will give the same width as the player container (400px) and position it to the bottom. We will also make the left and right corner rounded. Then we will set some background colors for each time state (total, loaded and current). As you may notice we need to set the width to 0 for the loaded and current time and as the song plays or is loaded the width will increase.

Step 8 – Progres & Volume Handle

Now we will add a handle to the progress bar and volume slider. Basically we will only add a background image, set the width / height and position it.

Step 9 – Time Tooltip

To finish the audio player we will add a time tooltip that will appear when we hover over the progress bar. The styles are almost the same as in the other steps, we will position it, add a fixed width/height values and a background image. We will also add some typography styles.

Conclusion

We’ve successfully coded this Audio Player. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.