html5とcss3で出来たすばらしいデモをご紹介。

「HTML5 presentation」はHTML5で作られたスライドです。
内容もHTML5の新しいAPIなどの技術的な内容にっています。

「SproutCore」はAppleのMobileMeで使われているオープンソースのJavaScriptフレームワークです。

デスクトップアプリ風のUIをこのフレームワークだけで作れるようです。
先日、ついにメジャーバージョンがリリースされたようなのでご紹介します。

詳しくは以下

Simple Website Layout Tutorial Using HTML 5 and CSS 3というエントリーでhtml5とcss3の使い方を説明してくれているチュートリアルがありましたのでご紹介。

サンプルはソースがダウンロードできるため、ローカル環境で詳しく確認できますね。

実際のデモとソースはこちらから

html5の<video>タグを使用すると簡単に動画を埋め込めるようになりますが、対応していないブラウザが多いのも事実です。
今回ご紹介する「html5media」はvideoタグを有効にする事ができるJavaScriptです。

videoタグを使用する事でFlashなどのプラグインが必要なくなり、設置も簡単にできるようになります。

詳しくは以下

HTML5は全てのブラウザでサポートされているわけではないですが、すでにいくつかのサイトが対応しています。HTML5で完成されたサイトを集めた12 Beautiful HTML5 Web Design Showcases « Geng Gao | the Blog | Design, Software, Gadgets blogというエントリーのご紹介。

どのサイトもJavaScriptやCSSを上手に使用して各ブラウザでレイアウトがくずれないように調整されています。

ざっといくつかご紹介。

詳しくは以下

Pluploadはオープンソースのファイルアップローダーで、jQueryを使用してファイルのアップロードやリサイズ処理を行う事が可能になっています。

アップロードには複数のプラットフォームから選択可能で、FlashやSilverlightを使用する事も可能。

作者はTinyMCEの開発者の方だそうです。これは期待できますね。

詳しくは以下

Sublime VideoはHTML5で使用できるVideoPlayerです。今までは動画の再生にはFlash Playerなどが必要でしたが、HTML５を使用する事によりFlashに頼らないサイト作りが可能になってきてます。

とはいえ、全ての環境で動くわけではないので注意は必要です。

Sublime Videoは以下の環境で動作するようです。
・Safari (v4.0.4+)
・Google Chrome (v4.0+)
・Internet Explorer with Chrome Frame installed

新しい技術に興味のある方は使ってみてはいかがでしょうか。

■2010/02/02追記
個人利用に限りフリーとなっているようです。利用にはご注意ください。

SproutCoreはHTML5で使用できるJavaScriptのフレームワークです。
HTML5に対応するアプリケーションを作成する際に気になるのが、クロスブラウザ対応です。

HTML5自体はまだまだ実案件では難しいと思いますが、
こういったフレームワークを使用することで開発に時間をかけないようにすることができるのではないでしょうか。

このフレームワークの特徴として、ボタンやチェックボックスなどのUI部品を提供してくれているようです。

サイトにはデモが設置してあるので、どんな事ができるかチェックして見てはいかがでしょうか。