While starting a web project, we usually use a set of resources like CSS-reset, various JS hacks for IE, etc. to overcome browser incompability issues.

HTML5 Reset is a project which aims to offer a base for the HTML5-CSS3 projects which covers these issues by default.

Besides the standard HTML tags, it has rules to reset the new tags like title, header, footer and JavaScript-powered fixes for IE.

The set comes in 2 versions:

• Bare Bones (stripped down to the essentials)
• Kitchen Sink (when we want the option to remove features, rather than add them)

Inside the download package, there is also a sample content provided to help you get started.

HTML5 video is great as it doesn't require any 3rd party plugins and works in most mobile browsers. However, it is not supported in every browser.. yet.

Also, browsers supporting the <video> – <audio> tags require different codecs and have inconsistent player UIs.

MediaElement.js is a jQuery plugin which enables you to use the <video> tag with one H.264 file (you can also include OGG or WebM, but you don't have to).

If the player doesn't support it, the plugin replaces the player with a Flash or Silverlight-powered one.

There is also MediaElementPlayer.js for building a complete player that looks and functions the same in all browsers.

Moovie is a free MooTools custom controls library for the HTML5 video element.

It includes all the features of a player: play, pause, stop, a volume control which mimics the Youtube's control and progress bar.

On initial load and when the video is paused, the player displays a "big play button" and a replay button at the end of the file.

Moovie has playlist (for multiple videos) and captions support. And, with the help of a settings panel, it is possible to enable or disable various options such as looping, captions and auto-hiding of controls bar.

P.S. The download can be currently found within the source of the demo.

Sencha (previously known as Ext JS) has released Sencha Touch, an HTML5 Mobile App. Framework, which allows you to develop web applications that look and feel native on Apple iOS and Google Android touchscreen devices.

It makes use of HTML5 for delivering audio/video or localStorage and CSS3 for maximum styling like rounded corners, background gradients, and shadows.

The code created is resolution independent. It uses a method which allows developers to change the overall scale of their interfaces on the fly with no pixellation.

Sencha Touch has a powerful animation system that makes flexible animations between screens and views possible.

Slide, pop, and fade animations are included with the library, each with a robust set of options to change attributes like direction and masking style.

And, as they are created with CSS, building custom animations is a joy.

Also, it includes a set of common icons for using them in toolbars and tab bars.

HumbleFinance is an HTML5 data visualization tool that looks and functions similar to the Flash chart in Google Finance.

It makes use of the Prototype and Flotr libraries and is not limited to displaying financial data but any two 2d data sets which share an axis.

The data needs to be stored in JavaScript variables and requires 3 parameters to be set before running the function to create the chart.

It is possible to manually select a part of the data (with a slider-like interface) and zoom to that part. This is a very useful function when working with large datasets,

jMediaelement is a jQuery HTML audio-video development kit with can fallback to Flash and VLC for incompatible browsers.

It makes creating a media element so easy by just calling a function and also controlling it on every level (play-pause-mute, getting the duration, etc.).

The player is totally CSS stylable from the frame to the images of the controls.

jMediaElement supports all major file formats including; ogg (theora/vorbis), mp4/mov (h.264), WebM (VP8/vorbis), flv, Youtube videos and more.

We are pretty bored with the current limits of the HTML-CSS and it is clear that the HTML5-CSS3 is the cure to let the creativity flow.

And, browser compatibility is no more a big issue as there are various resources like Modernizr, ExplorerCanvas or IE7.js that empower incompatible browsers.

If you didn't already, it is a good idea to warm your hands on HTML5 and CSS3 as they offer so much.

Here are 10+ free HTML5-CSS3 website templates to help you get inspired and started:

HTML5 Starter Pack

HTML5 Starter Kit is an impressive template that doesn't force you to build a specific type of website but shape it how you want.

This free HTML5 template is cross-browser (including IE6), tablet/netbook ready, can instantly use Cufón and includes some structural/re-usable classes.

And, it includes the layout as a .PSD file.

Gotta’ love HTML5 & CSS3

An image gallery layout with HTML5-CSS3 which includes:

• animated transitions, like a hover animated description for the images, using only CSS
• a tabbed interface for different galleries using CSS3’s :target element

Read the rest of this entry »

Video JS is a JavaScript-based HTML5 video player that falls back to Flowplayer for unsupported browsers .

The player supports H.264, Theora OGG and the new Google-powered WebM formats.

It is lightweight, doesn't use any images and can be totally skinned with CSS.

Also, it does not depend on any JavaScript frameworks, has support for fullscreen and volume controls.

With the latest discussions on Flash (whether it is dying or will become more powerful), here is an interesting project that Flash and HTML developers may both find useful:

Frontal is an intuitive markup and scripting language that generates Flash and enables you to create interactive content, sites or apps. with a few lines of code.

It can embed and work seamlessly with HTML, HTML5, JavaScript, Ajax or any other web technology and supports deep linking.

For Flash Developers

It definitely adds value to the development process with:

• decreasing the development time by building more with less code
• reviewing designs in real-time
• creating fluid layouts
• updating and reusing the code easier

For HTML Developers

It is a language that will help you build Flash (almost) without learning something new.

The popular web player JW Player now has a HTML5 version after its well-known Flash and Silverlight ones.

JW Player For HTML5 is a totally skinnable and configurable player based on the <video> tag of HTML5.

It is built with jQuery, and for any browser without HTML5 support, falls back to the JW Player for Flash automatically.

The player can be set to display a poster image before and/or after the video.

Also, it is possible to make it auto-play, auto-repeat, start with a pre-defined volume and much more.

Considering the player falls back to Flash, the formats supported are also the ones that can be played by Flash:

• H264 baseline video / AAC low-complexity audio in the MP4 or MOV container
• Theora video / Vorbis audio in the OGG container
• VP6 video / MP3 audio in the FLV container
• Spark (H263) video / MP3 audio in the FLV container

P.S. The player is currently in beta status, does not have all the features of JW players but works pretty stable.