Zend Certified Engineer

phpguru.org

Quality PHP and Javascript code
Download RGraph: HTML5 canvas graph library... Home ~ Downloads ~ FAQs ~ Licensing
RSS Feed RSS Feed
Follow me on Twitter Follow me on Twitter

Add to Google...

HTML5 & CSS3

Articles

Javascript

PHP5

PHP4






Bookmark with delicious tweet this site Post to Google Buzz! Stumble! this site

HTML5 examples

Here's a collection of HTML5 examples and demonstrations. It's constantly being added to and if you have one that you'd like to see here, email it to me.

HTML5 canvas examples

The canvas tag is a Javacript controlled 2D drawing area. There's more information on it here.

Graphs and data visualisation

Applications

Games

Clocks

Other

HTML5 Video

This will be rather useful. A simple way to embed video in your pages. An example of the code is: 

<video controls width="300" height="300" loop>
    <source src="/html5/video.webm">
    <source src="/html5/video.ogg">
</video>

Possible attributes include:

Note about codecs

A group of "biggies" recently announced WebM - a free video codec for web video. Some browsers already have support for it - I've tried Chrome 6 and Opera 10.5. Firefox 3.6 and Chrome 5 (to name two) don't appear to support WebM (so you'll see the Ogg squid video).

HTML5 Audio

Also potentially very useful is the new <audio> tag. It makes embedding audio in your pages a very simple affair. It shares a lot of the <video> tag attributes: 

<audio src="/html5/audio.mp3" controls ></audio>

HTML5 GeoLocation

One of the features of HTML5 is location tracking called GeoLocation. It works by using geographical data which is associated with internet hardware (routers/switches/repeaters etc). There's a more detailed example of this here. This example also demonstrates how you can use the geographical data and plug it into a mapping service to get something usable.

HTML5 DOM storage

As used by the RGraph annotations feature to facilitate persistence, HTML5 DOM storage is an alternative to cookies for local storage. It has key advantages, like more storage space and the fact that it's not transmitted over the wire. There's more on HTML5 DOM storage here.

HTML5 Form elements

range input

Currently a mixed bag regarding support, however Chrome support is good. This input type is rendered as a slider bar:

Possible attributes include min and max, which don't really need explaining, do they?

Placeholder text

Commonly done with Javascript, this new attribute for text inputs puts text in the input until you focus on the element.

The autofocus attribute

Also commonly done with Javascript, this attribute can bring focus to the element automatically. Care should be taken though when using this attribute as if it is on an element that is not in view by default, it can cause the page to "jump". 

<input type="text" autofocus >

WebKit Desktop notifications

Webkit desktop notifications

Not strictly speaking an HTML5 thing (rather, it's a WebKit thing), but it's been present in Google Chrome since version 4. There's a more detailed article about this here: http://www.phpguru.org/article/html5-webkit-desktop-notifications-example


CSS Box shadow

CSS3 now sports the box-shadow: property which makes adding drop shadows to your elements very easy. There are currently a few proprietary properties that you might want to use alongside this to try and get maximum coverage. Even Internet Explorer 9 supports this property, and previous versions have a drop shadow effect available using DirectX and the filter: property. The values of the ox-shadow property are the X and Y offsets (which can be negative too) and the severity of the blurring. 

box-shadow: black 3 3 3;
-moz-box-shadow: black 3 3 3;
-webkit-box-shadow: black 3 3 3;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135);
A DIV with a shadow!

CSS Border radius

The CSS border radius allows you to very easily achieve curvy corners without using images. Instead of the drudgery of producing curvy corners with images, it's now simply a case of specifying a few CSS properties. 

border-radius: 5px;
-moz-border-radius: 5px;
border: 2px solid black;
A DIV with curvy corners!

CSS opacity

CSS3 opacity allows you to specify the opacity (transparency) of an element. You can read more about it here: http://www.phpguru.org/static/css3

CSS Gradients

WebKit and Firefox support creating and using gradients in CSS. Even MSIE has had this facility for a while, albeit in a non-standard limited fashion: http://www.phpguru.org/article/css3-gradients

CSS Reflections

WebKit based browsers (currently Chrome and Safari) support something called CSS reflections. This means you can produce a mirror image of an element (supposedly any). There's an article on reflections here: http://www.phpguru.org/webkit-css-reflections

CSS @font-face

@font-face was first prposed for CSS2 and has been implemented by Internet Explorer since version 5. It used the .eot format though. Now you can use .ttf and .otf. It simply allows you to specify fonts that the user doesn't have on their computer. These fonts are then downloaded by the users browser and used. 

@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}
@font-face {
    font-family: Delicious;
    font-weight: bold;
    src: url('Delicious-Bold.otf');
}
Some text in Delicious Roman

Tutorials and resources

Here's a collection of tutorials and resources for HTML5 in general.



RGraph: HTML5 canvas graph library

 Example graph made using RGraph

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.