HTML5

SEMANTICS

HTML5 のセクションとアウトライン

HTML5 ではアウトラインとセクションに関する要素が追加されました: <section>、 <article>、 <nav>、 <header>、 <footer>、 <aside>、 <hgroup>.

HTML5 の audio 要素と video 要素の利用

<audio> 要素と <video> 要素はマルチメディアコンテンツの埋め込みや操作を可能にします。

Forms in HTML5

HTML5 では Web フォームに様々な改善が施されています。制約バリデーション API、多数の新しい属性、<input> 要素の属性の新しい type の値の追加。そして新要素として <output> が追加されています。

新しいセマンティック要素

セクションやメディア、フォーム要素のほかに、<mark>、<figure>、<figcaption>、 <data>、<time>、 <output>、 <progress>、 あるいは <meter>のような多くの新しい要素、妥当なHTML5 の要素はますます増えています。

<iframe> の改善

sandbox、seamless、 srcdoc 属性を使用することで、著者は今やセキュリティレベルを明確にし、望まれた <iframe> 要素の描画が可能となりました。

MathML

HTML 文書に数式を直接埋め込むことができます。

HTML5 の紹介

この記事では、Web デザインや Web アプリケーションでの HTML5 の利用方法を紹介します。

HTML5 に準拠したパーサ

バイト単位の HTML 文書を DOM に変換するパーサは、拡張され、あらゆるケース、たとえ妥当ではない HTML に直面したときであっても、させるべき明確な動作を定義し、 HTML5 に準拠したブラウザの間ではるかに高い予測可能性と相互運用性へ導きます。

Connectivity

Web Sockets

ページとサーバーが永続的な接続を作成し、 HTML ではないデータを交換することが可能になります through that mean。

サーバーが送出するイベント

サーバーがクライアントからのリクエストに対するレスポンスとしてのみデータを送ることができたという、古典的な枠組みより、サーバーがクライアントにイベントを送出することが可能になります。

WebRTC

この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。

Offline & storage

アプリケーションのキャッシュとしての、オフラインリソース

Firefox は HTML5 のオフラインリソースの仕様を完全にサポートしています。その他のほとんどは、いくつかのレベルでオフラインリソースをサポートしています。

オンライン及びオフラインのイベント

Firefox 3 は WHATWG の、アプリケーションや拡張機能にアクティブなインターネット接続があるかどうかを検出させ、接続の成功やダウンも検出する、オンライン及びオフラインのイベントをサポートしています。

WHATWG のクライアントサイドセッションと、 DOM Storage として知られる永続的なストレージ

クライアントサイドセッションと永続的なストレージは、 Web アプリケーションが、構築されたデータをクライアントサイドに保存することを可能とします。

IndexedDB

IndexedDB は、インデックスを使って、ブラウザで大量に構造化されたデータの保存と、このデータの高性能な検索のための Web 標準です。

Web アプリケーションからファイルを扱う

新しい HTML5 File API のサポートは Gecko に加えられており、 Web アプリケーションはユーザーによって選択されたローカルファイルにアクセスすることができるようになっています。これは、type が file である  <input> HTML 要素の新しい multiple 属性を使った、複数のファイル選択のサポートを含みます。 FileReader もあります。

Multimedia

HTML5 の audio 要素 と video要素の利用

<audio> 要素と <video> 要素はマルチメディアコンテンツの埋め込みと操作を可能にします。

WebRTC

この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。

Camera API の利用

コンピューターのカメラの使用、操作、およびカメラ画像を格納することができます。

3D, graphics & effects

Canvas チュートリアル

新しい <canvas> 要素についてと、 Firefox でどのようにグラフや他のオブジェクトを描画するかを学習します。

HTML5 text API for <canvas> elements

HTML5 の text API が <canvas> 要素によってサポートされます。

WebGL

WebGL は、 HTML5 の <canvas> 要素で利用できる、OpenGL ES 2.0 に厳密に従った API を提供することで、 3D グラフィックスを Web にもたらします。

SVG

ベクター画像の XML ベースのフォーマット。HTML5 では SVG を直接文書に埋め込む事が可能になりました。

Performance & integration

Web Workers

JavaScript の評価をバックグラウンドのスレッドに委譲することを可能にして、これらの動作がインタラクティブなイベントを低速にすることを防ぐことを可能にします。

XMLHttpRequest Level 2

ページのいくつかのパーツの非同期に取得することを可能にして、時間とユーザーのアクションによって変化する、動的なコンテンツを表示することを可能とします。これは Ajax の背後にある技術です。

JIT-compiling JavaScript engines

新世代 の JavaScript エンジンは以前よりはるかに強力で、パフォーマンスの向上を導きます。

History API

ブラウザの閲覧履歴の操作ができます。特に対話的に新しい情報を読み込むページに於いて有益な API です。

contentEditable 属性で、あなたの Web サイトが wiki に変身！

HTML5 は contentEditable 属性を標準化しました。この機能についてより学びます。

ドラッグ＆ドロップ

HTML5 の ドラッグ＆ドロップ API は、 Web サイト内部あるいは Web サイト間の、アイテムのドラッグ及びドロップのサポートを可能にします。これはまた、拡張機能や Mozilla ベースのアプリケーションで使用するための、よりシンプルな API 提供します。

HTML でのフォーカスの管理

新しい HTML5 の activeElement と hasFocus 属性がサポートされています。

Web ベースのプロトコルハンドラ

navigator.registerProtocolHandler() メソッドを使って、 Web アプリケーションをプロトコルのハンドラとして登録することができます。

requestAnimationFrame

アニメーションのレンダリングのに最適なチューニングが施された新しいメソッド。

Fullscreen API

ブラウザの UI を表示せずに、 Web ページやアプリケーションがスクリーン全体の使用を制御します。

Pointer Lock API

ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。

オンライン及びオフラインのイベント

オフラインで有能な良い Web アプリケーションを構築するため、アプリケーションが実際にオフラインであるときのことを知る必要があります。ついでに、アプリケーションが再度オンライン状態を返したときのことも知る必要があります。

Device access

Camera API の利用

コンピュータのカメラからの画像の使用、操作、保存が可能になります。

Touch events

閲覧者のタッチスクリーン押下によって発生するイベントに対応するハンドラ。

Geolocation の利用

ブラウザが閲覧者の現在位置を取得し、これを利用する事が出来ます。

デバイスの方向の検出

ブラウザを起動しているデバイスが方向を変えたときに、その情報を得られるようにします。例えば、デバイスの姿勢に反応するゲームを作るための入力デバイス、あるいは縦長または横長というスクリーンの方向に、ページのレイアウトを適応するために利用できます。

Pointer Lock API

ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。

Styling

CSS は、さらに複雑な方法で要素を形成することができるように拡張されてきました。 CSS はもう一枚岩の仕様ではなく、異なるモジュールがすべてレベル 3 ではありませんが、これはしばしば CSS3 として参照されます。いくつかのモジュールはレベル 1 、あるモジュールはレベル 4 で、その中間のすべてのレベルをカバーしています。

背景のスタイリングの為の新機能

box-shadow を使ってボックスに影を付けることや、複数の背景を設定することが可能です。

面白い border 関連 CSS プロパティ

border-image 及びそれに関連付いた非省略形のプロパティを使って枠線の形成に画像を使うことができるだけでなく、 border-radius プロパティを通じて角丸の枠線がサポートされます。

スタイルのアニメーション

異なる状態にアニメーションするための CSS Transitions の使用、またはイベントの引き金無くページのパーツをアニメーションするための CSS Animations の使用により、ページの可動要素を操作することができます。

タイポグラフィの改善

著者には、より良いタイポグラフィに到達するための、より良いコントロールがあります。 text-overflow やハイフネーションはもちろん、影もコントロールでき、またはその装飾はより明確にコントロールすることができます。新しい @font-face @規則のおかげで、特別な書体をダウンロードし、適用することができます。

新しい表象的なレイアウト

デザインの柔軟性の向上のため、 2 つの新しいレイアウトが加えられました。 CSS マルチカラムレイアウトと、 CSS フレキシブルボックスレイアウトです。