20 Great Uses of HTML5 Techniques



As one application programming, HTML5 is widely used in some platforms script based. One of the functions that can be optimized is the use of the HTML5 web design to application development. Some of the techniques that you can try are to do some modification of the script code from a web design. With HTML5 and application of existing techniques, you can make some changes, including doing a combination of techniques HTML5 with j-Query. If you are interested in trying some of the existing functionality, is currently a lot of tutorials that can be alternatives, including how to use the HTML5 technique that suits as your needs.

Rocking HTML5

title slide1

This presentation use HTML5 techniques to create a very informative and easy to use overview of the HTML5 elements.

HTML5test

html5test1

HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect.

Wave Motion

wave1

This experiment, made by Hakim el Hattab, makes a wave motion rendered using the canvas element. Each bubble holds a tweet with the word water in it. Clicking on them we can read the tweets.

Cross Browser HTML5 Drag and Drop

dragAndDrop2

In order to save other developers from the headaches we got deciphering cross browser drag and drop, here are the following guide that shows how to do in five easy steps.

Ball Pool

dragball

This is a great example of canvas using. This script use the mouse click and mouse drag for moving or creating other balls into the page.

Browser Ball

ball

The main window should also have a beach ball. Fling that puppy around. Make neat spaces for the ball to bounce around in. Create complicated layouts that may crash your browser.

The Cloth Simulation

cloud

The cloth is really then just a collection of constraints and point masses in a never ending struggle.

Blowing up HTML5 Video and Mapping it into 3D space

html5boom

The API lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below.

Learning About HTML5 Local Storage

learning

This video tutorial shows how to build a simple to-do list with local storage. HTML5′s local storage is a new functionality which we can save data in browsers even the browser is refreshed or closed.

Tetris With HTML5

tetris

Now we can play at this game online with the experiment of Bruno Garcia developed using HTML5′s Canvas.

Video for Everybody

video

This is a simply chunk of HTML code that embeds a video into a website using the HTML5 <video> element. It works on many browser and platforms.

One Page Website Template

one page2

Single-page websites have been commonplace on the web for a few years now. First made popular by designers seeking a clean, simple way to showcase portfolios, the one-page website now has a number of uses, including advertising software and promoting events. It’s a great way to have a large impact with a small amount of content.

Hybrid Column Layout

hybrid

You can easy to make website with liquid columns that use percentage.

Design & Code a Cool iPhone App Website in HTML5

iphone

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Create an HTML5 iPhone App

iphone app

You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

Have a Field Day with HTML5 Forms

24ways

Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.

HTML5 Canvas Element Guide

canvas

In this guide, you can get started to understanding the canvas element and what kinds of things are required and expected in this associated code.

Canvas Paint

paint

CanvasPaint is a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag.

Canvas in 3D

3d

In this script we will see an amazing 3D interface with random Flickr photos loaded by clicking on surface.

Detecting HTML5 Features

detect

Sometime HTML5, cannot running well on several browsers. As we know, not all  browsers  support html5 features.  this information will let you know about how to Detecting HTML5 Features



Comments
  1. Interesting So HTML Five has come to stay.

  2. This is an excellent selection of HTML5 websites. You did a great job listing some great sources. People are really doing some great things with html5.

  3. Create a HTML5 iPhone App?! That’s amazing! Definitely checking this out!

  4. Really useful tips and even’s tips are useful.. Thanks to both of you..

  5. Its really awesome collection of Information about HTML5!!!
    Thanks for sharing:-)

  6. HTML5 will remain forever scripting language within which we can able to make above listed different things that are very awesome and effective.

  7. I love HTML 5 language , it helped me to be online on internet and it will grow in future thanks for these html techniques you posted

  8. Good info about HTML5, thanks.

  9. Alisa (Think Big Online Marketing) said:

    Excellent article. I am bookmarking it to refer to it later. Definitely things I need to do. I do some but I need to do more.

  10. I’ve been looking for this. Thanks

  11. can you also provide css great designs also please?