Chrome HTML5 "All Is Not Lost"

Google Chrome のHTML5の音楽のコラボレーション企画、All Is Not Lost が公開されてました。

以前公開されたArcade Fire meets HTML5 に引き続き、Chrome のデモンストレーションといった感じでしょうか。

Chrome - All Is Not Lost

清水幹太氏のSOUR / MIRROR を彷彿とさせる感じ。

デモサイトでは、自分が選んだ言葉(日本語はカタカタ)を入力すると、
ラストのページでその言語のメッセージが作成されます。

All Is Not Lostに任意のキーワード追加

今後ますますブラウザ主体 が多くなっていくでしょうし、軽くて早いブラウザとしてさらに期待したいところです。

» All Is Not Lost

via: Official Google Blog: OK Go play with Chrome

HTML5 reference – Contents Model

quote, HTML5.JP – 次世代HTML標準 HTML5情報サイト

About the contents model reference
https://www.html5.jp/tag/models/index.html#phrasing-content

■ヘッディング・コンテンツ
ヘッディング・コンテンツは、セクションのヘッダーを定義します( 明示的にセクショニング・コンテンツ要素を使ってマークアップしようが、ヘッディング・コンテンツ自身の存在によって示そうが、どちらでも構いません。 )。
h1 h2 h3 h4 h5 h6 hgroup

■セクショニング・コンテンツ
要素やセクショニング・ルート要素のアウトライン
セクショニング・コンテンツは、見出しやフッターの範囲を定義するコンテンツです。
article aside nav section
セクションとは、本来の DOM ツリーのいくつかのノードに相当するコンテナのことです。各セクションは、それに結びづけられた見出しをひとつ持つことができます。そして、さらに多くのネストしたセクションを含むことができます。 アウトラインに対して、このアルゴリズムはまた、DOMツリー内の各ノードを、特定のセクションおよび潜在的な見出しと結びづけます。

■テキストノード
要素ノードとテキストノードの関係は「親と子供」に似ています。
要素ノードは「親ノード」、テキストノードは「子ノード」と区別されます。
<親ノード>子ノード</親ノード>

■コンテンツ・モデル
本仕様で定義されている要素は、それぞれに、その要素に期待されるコンテンツの種類を表すコンテンツ・モデルを持ちます。HTML 要素には、その要素のコンテンツ・モデルで記述される要件に一致するコンテンツを入れなければいけません。

■エンベッディッド・コンテンツ
エンベッディッド・コンテンツとは、ドキュメントに他のリソースを組み込むコンテンツ、もしくは、ドキュメントに挿入される他の語彙のコンテンツのことです。
audio canvas embed iframe img math object svg video

■フォールバックコンテンツ
フォールバックとは、もしブラウザーが該当の要素に対応していない場合に、完全なものではないにせよ、何かしらの手段を提供することを意味します。同等の代替手段がない場合は、もしかしたら、「ご利用頂けません。」というメッセージになるかもしれませんが、これでも、何も表示されない状況と比べれは、いくらかはマシと言えるでしょう。

1
2
3
<canvas width="300" height="150">
  <!-- ここにフォールバックコンテンツを入れます。 -->
</canvas>

このように、canvas 要素の開始タグと終了タグの間に、フォールバックコンテンツを入れます。こうすることで、もしブラウザーが canvas 要素に対応していなかったり、JavaScript を無効にしていれば、フォールバックコンテンツが表示されることになります。
フォールバックコンテンツをどのようなものにするかは決まっていない。製作者次第。

■擬似要素使用
基本的にはclass 属性

W3CがHTML5普及促進のためのロゴを公開

HTML5推進ステッカー
W3C HTML5 Logo

そろそろ使われ始めていくのかなぁと思っている『HTML5』ですが、
W3C より、技術促進のためのロゴが公開されてました。

それ以外も、もっといろいろあるのでしょうけど、
取り急ぎ『ロゴ』を推していくって、けっこう好きだったりしますが。

セマンティック やCSS3 の関連ロゴのアイコンも用意されており、
なんと、Tシャツ(ネタ用?)まで販売されてました。

一応、まだ公式ロゴではないそうで、
ロゴの方も、受け入れられ方次第で、正式採用となるらしいです。

HTML5(+JavaScript(+CSS3)))が普及すれば、
デバイス間や各種垣根も越えられたりするのでしょうし、個人的には楽しみなんですけどね。

Googleのウェブとブラウザについて学ぶ、HTML5サイト「20 Things I Learned About Browsers & The Web」が素敵

Google が、Web とブラウザ について学ぶ、「20 Things I Learned About Browsers & The Web」を公開。
しかも、HTML5 のブック風解説書サイトということで、その使用感に感動です。

以前公開された、Google のHTML5 を使ったミュージックムービーもかなり感動モノでしたが、

実際の使用感や、ライトの点灯など、ちょっとおどろきですが、
一度サイトを離れて(ブラウザを閉じて)、再度訪れると「resume reading」まで!
※URLも..

Google - 20 Things I Learned About Browsers & The Web

20 Things I Learned About Browsers and the Web

ぜんぜんまだアレですけど、いやはや、HTML5 がさらに楽しみになりました。

Official Google Blog: A curious guide to browsers and the web

Firefox 4 Beta 5。HTML5のインタラクティブ要素満載

Firefox 4 Beta 5 が公開されたそうです。

今回さらに、html 5の、「video」タグや「audio」タグでの、「Audio Data API」など、
インタラクティブな使用が進んでいるそうです。

しかしながら、ますます高速なグラフィックの描画なども進んでいくようで、
「HTML 5」(と、JavaScript)が、実際に使用されていくようになると、ますますデザイナー・開発者の方々は楽しそうですよね。

https://www.youtube.com/watch?v=oJ1UsLoPX3E&hl=ja&fs=1

Firefoxは4 BetaはHTML5のでインタラクティブ音声を取得

Google TV も、この秋にも色々と始まるようですが、「テレビ」だとどうなんでしょうかね。
※デモで使用されているテレビが、日本企業の「Sony」というのもちょっと嬉しい..

change_history