Web programmers, are you ready to meet HTML5?

HTML5 as the next generation of web development standards, its features have slowly appeared in the mainstream browser, this new HTML will let the browser no longer rely on Flash, QuickTime, Silverlight and other plug-ins, but also simplifies the original need a lot of JS to achieve the effect. Although HTML5 is still in the process of discussion, but its superior features have been recognized by everyone, major browser vendors, some well-known content publishing sites are also actively promoted, especially the forthcoming release of IE9 will fully support HTML5. As a web developer, what we need to do is to transform HTML5 into a variety of web applications and how to make existing Web applications transition to HTML5. The following describes the HTML5 features that you must know as a web developer, and the possible scenarios for each feature.

1. Draw a graphic with canvas

There is no doubt that this 3D picture is painted with canvas.

The advent of canvas overturned the traditional way of drawing in Web applications, the traditional way to draw pictures on the server side, and then send the pictures to the browser, or with flash, but also useful third-party plug-ins. But these methods are not native HTML, HTML5 canvas provides a way to draw graphics through JavaScript, simple but powerful, as a development engineer can use the Canvas API to control the picture at will.

Click here to view Canvas's Api:canvas API

Creating a canvas element is simple:

<canvas id= "MyCanvas" width= "height=" >
Your browser is old-fashioned, don't support canvas, throw it away.
</canvas>

Click here to view a Canvas display of the Helloworld:canvas-helloworld

Developers need to note that in order to apply the canvas object in JavaScript, you need to set the ID of the element, usually also set its height and width, in order to be friendly to the site, you need to add an unsupported text description to the element, in a browser that does not support canvas to remind users.

Canvas is one of the most anticipated features in HTML5, and currently most web browser support (Chrome,firefox,safari,opera support, IE8 not supported), canvas can be applied to game design, enhanced graphical user interface.

Here are some very cool canvas applications:

Very cool game app: Best HTML5 Canvas Games

Amazing Canvas animation effects: 8 Simply amazing HTML5 canvas and Javascript animations

2, multimedia audio and video

<audio> and <video> are the first tags added to the HEML5 specification. Their addition makes it possible for web browsers to process audio and video files in a more convenient way, ending the history of installing the playback plugin in a Web browser. The more troubling is that the major browser vendors on the audio and video formats have a major disagreement, Firefox insisted on the open Ogg standards, and Safari is expected to be MP3 and MP4 standards, which resulted in our development process need to provide multiple versions of audio and video files to compatible with the browser.

You can see the formats supported by the major browsers and multimedia sharing sites:

Current browser support for audio files:

Format	IE8	Firefox 3.6	Opera 10.5	Chrome 5.0	Safari 5.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	No	No	No	Yes	Yes
Wav	No	Yes	Yes	No	Yes

Current browser support for video files:

Format	IE8	Firefox 3.6	Opera 10.5	Chrome 5.0	Safari 5.0
Ogg	No	Yes	Yes	Yes	No
MPEG 4	No	No	No	Yes	Yes

Click here to view audio and video properties: HTML5 audio HTML5 Video

To create the audio and vedio elements:

<audio controls= "Controls" >
<source src= "Song.ogg" type= "Audio/ogg"/>
<source src= "Song.mp3" type= "Audio/mpeg"/>
Your browser does not support audio tags!

</audio>

<video width= "height=" controls= "Controls" >
<source src= "Movie.ogg" type= "Video/ogg"/>
<source src= "Movie.mp4" type= "Video/mp4"/>
Your browser does not support video tags!
</video>

Click here to see the effects of audio and video tags in the browser: Audio-vedio

For developers, the current situation is that we need to prepare multiple versions of audio and video and add the file paths to audio and vedio, and the Web browser skips the unsupported formats, plus, It's a good idea to add text hints or other multimedia playback options for browsers that don't support audio and vedio.

Audio and vedio are two simple and powerful tags, and there are several multimedia sharing sites at home and abroad that have started to support or test HTML5.

Here are some HTML5 vedio experience resources:

Video Showcase from Apple

Google United Arcade Fire launched a HTML5 interactive movie: The Wilderness Downtown, click here to access its page in Chrome experiment

HTML5 VideoPlayeryoutube-broadcast yourself (oh, sorry, this is a non-existent website)

3,web Storage

With the development of Web application, more and more scenes need to be stored in the client, traditional client storage method has cookie, Firefox has globalstorage, Flash has its own storage mode under the support of plugin, But there are some limitations (security and compatibility) in these ways. HTML5 provides in the client storage methods: Web database and Web Storage,web database adaptation and client complex data storage, its standard is not mature, browser support is very limited, need further attention of web developers, If you are storing simple data, you can use the Web Storage mode without bandwidth and support from the mainstream browser, including IE8.

There are two ways of Web Storage: Localstorage and Sessionstorage, refer to the detailed definition here, the difference between the two is simple, localstorage can permanently save the data, that is, close the browser, the next time you open the browser can also get stored data, The Sessionstorage is only available in the current session.

The following example shows how many times a user visits a Web site:

<script type= "Text/javascript" >if (typeof (Localstorage) = = "undefined") {document.write ("Your browser does not support Web Storage");} else {if (localstorage.pagecount) {localstorage.pagecount=number (Localstorage.pagecount) +1;} Else{localstorage.pagecount=1;} document.write ("You have been to the site" + Localstorage.pagecount + "times."); </script>

Click here to see how it works: Demo

In development, it should be noted that the WEB storage has security rights, do not store private data in it, in addition, the stored data can not be read across the browser, that is, a browser to open the site saved data, with other browsers is not available.

Although the Web storage has such a flaw, but this feature allows the application to work offline, and when the program needs to process a large amount of data, you can avoid the data frequently on the client and server side, for mobile devices, can greatly reduce the consumption of traffic.

Here's a good article about Web Storage: Web Storage full parsing

4, the other simplifies the development of the HTML5 features

• Some common input types: email,url,number,date pickers, etc.
• Some standard properties: contenteditable, etc.
• Some input properties: Placeholder,required,autofocus,min,max,step,

Here are two articles that introduce these HTML5 features, please refer to: 28 HTML5 features, tips and techniques you must know and 30 HTML5 learning resources for web designers

These HTML5 features are currently supported by the browser better features, but also a very high degree of attention HTML5 features, this article is from a web developer's perspective to understand HTML5, the purpose is to hope that more web developers can be integrated into the HTML5 development as soon as possible, Recently Youku has begun to apply HTML5 and HTTP Live streaming technology, so that more users can share multimedia on the mobile platform, which has played a positive role in the promotion of domestic HTML5, Microsoft promised IE9 will fully support HTML5, The promotion of the HTML5 is an exciting news. Predictably, the next few years HTML5 will develop rapidly, as web developers, we should be familiar with the various features of HTML5 as soon as possible, in the project development process should also consider how to take advantage of HTML5 features to enhance the ease of use and portability of Web applications.

Web programmers, are you ready to meet HTML5?