An Overview of the Web Storage API

May16
2012 Leave a Comment

Written by Sophie.Y

Web developers have long yearned for a way to store data long term. Cookies are an option, but they can only store 4KB of data. Additionally, cookies are sent to the server with each HTTP request. This means that cookies, especially large ones, can consume considerable network bandwidth. There have been other attempts to implement storage techniques, but for the most part they have been hacks. Then, along came HTML5 and the Web Storage API to the rescue.

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.

Posted in HTML5 Basics - Tagged html5, HTML5 features, Stored Data, Web Storage API

HTML5 Tool Of The Day – HTML 5 Outliner

May10
2012 Leave a Comment

Written by Sophie.Y

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.

Posted in HTML5 Tools - Tagged html5, HTML5 markup, HTML5 outliner, html5 tool

How to Safeguard Your Site with HTML5 Sandbox

May08
2012 Leave a Comment

Written by Sophie.Y

Today’s web applications are mash ups of new experiences into one experience. Think Twitter widgets showing the latest tweets about a product. Or Facebook comments discussing an article. Or even just integrated web pages through an iframe element. These experiences can increase security breaches to your site.

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.

Posted in HTML5 Tools, HTML5 Tutorials - Tagged html5, HTML5 sandbox, Sandbox

HTML5 Tool Of The Day – Cloudkick Viz

May04
2012 Leave a Comment

Written by Sophie.Y

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.

Posted in HTML5 Tools - Tagged canvas, html5, HTML5 canvas tool, html5 tool

HTML5 Tool Of The Day – Visual Form Builder

May03
2012 Leave a Comment

Written by Sophie.Y

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.

Posted in HTML5 Tools - Tagged HTML coding, html5, HTML5 application, HTML5 forms, html5 tool

HTML5 Tool Of The Day – iGrapher

May02
2012 Leave a Comment

Written by Sophie.Y

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.

Posted in HTML5 Tools - Tagged HTML5 canvas, HTML5 canvas tool, html5 tool

Fluid CSS3 Slideshow with Parallax Effect

May02
2012 Leave a Comment

Written by Sophie.Y

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:

Posted in HTML5 & CSS3 - Tagged CSS3 properties, CSS3 tutorial, parallax effect

Five HTML5 Tools to Manage Video like a Geek

Apr27
2012 Leave a Comment

Written by Sophie.Y

HTML5 <video> tag is one of those features that drive people exciting. It is often presented as an alternative to flash on browsers. No matter where you sit in the HTML5-Flash debate, the fact is HTML5 video is supported by major browsers; mobile devices are being shipped without support for Flash video and web developers are adjust strategy accordingly.

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.

Posted in HTML5 Tools - Tagged html5, html5 video, HTML5 Video element, HTML5 video tools

Flickr’s new HTML5-based uploader lets you upload bigger files faster

Apr26
2012 Leave a Comment

Written by Sophie.Y

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.

Posted in HTML5 News - Tagged Flickr, html5, HTML5 uploader

How to Create an Audio Player in HTML5 & CSS3 [Tutorial]

Apr26
2012 Leave a Comment

Written by Sophie.Y

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.

1 <head>

`2`	`<title>Audio Player</title>`

3

`4`	`<script` `src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>`

`5`	`<script` `src="js/mediaelement-and-player.min.js"></script>`

`6`	`<link` `rel="stylesheet"` `href="css/style.css"` `media="screen">`

7 </head>

Posted in HTML5 Tutorials - Tagged css3, html5, html5 audio, html5 tutorial, jQuery

An Overview of the Web Storage API

HTML5 Tool Of The Day – HTML 5 Outliner