HTML5 for beginners

2013/6/21株式会社オープンウェブ・テクノロジー

代表取締役白石俊平

自己紹介

• 白石俊平と申します。• コミュニティ html5j.org 管理人（会員数 5000 名

超）• HTML5 とか勉強会主催（毎月一回、 100 名を動

員）• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei

Web 技術の基礎知識

HTML5 という「仕様」

HTML （ Hyper Text Markup Language ）の最新バージョンW3C （ World Wide Web Consortium ）で標準化作業中

仕様書は Webで公開されている

Web を進化させつつ安定させる

HTMLLiving

StandardHTML5

WHATWG によるバージョン

W3C による安定バージョン

HTML5.1

W3C による次期バージョン

HTML5 仕様のスケジュール

2012 年 Q4 HTML5.0が勧告候補に

2014 年 HTML5.0 勧告

2016 年 HTML5.1 勧告

2012 年 9 月 20 日、 HTML5 仕様のスケジュールが発表された！

「狭義」の HTML5 と「広義」の HTML5

Web 関連技術は広く、深い。

HTML要素数 :109+

JavaScript API仕様 : 7o+

CSS関連仕様 : 65+

Web 関連技術は広く、深い。

HTML要素数 :109+

JavaScript API仕様 : 7o+

CSS関連仕様 : 65+

HTML4 でもできたこと• CSS によるスタイル定義・外部スタイル読み込み• JavaScript によるプログラミング・外部 JS 読み込み• テキストの修飾

– 見出し / 段落 / 引用 / 強調 ...

• リスト• インラインフレーム• プラグインの読み込み• クリッカブルマップ• 表組み• フォーム• ...

HTML5 でできるようになったこと

• マルチメディア• コンテンツの構造化• ルビふり• よりリッチなフォーム要素• 動的なグラフィック

マルチメディア

<video src="..."></video><audio src="..."></audio>

コンテンツの構造化<div class=”header”>  <h1>Site Title</h1>  <div class=”site-nav”>    <ul><li>Home</li><li>Profile</li><li>Settings</li></ul>  </div></div><div class=”content”>  <div class=”article”>Main Content    <div class=”date”>2009/11/23 に投稿 </div>    <div class=”address”> 連絡は <a href=”mailto:a@a.jp”> こちら </a></div>  </div></div><div class=”footer”>  <div class=”copyright”>Copyright ...</div></div>

HTML4 のマークアップ例

コンテンツの構造化<header>  <h1>Site Title</h1>  <nav class=”site-nav”>    <ul><li>Home</li><li>Profile</li><li>Settings</li></ul>  </nav></header><div class=”content”>  <article class=”article”>Main Content    <time datetime="2009/11/23">2009/11/23 に投稿 </time>    <address class=”address”> 連絡は <a href=”mailto:a@a.jp”> こちら </a></address>  </article></div><footer>  <small class=”copyright”>Copyright ...</small></footor>

HTML5 のマークアップ例

ルビふり<ruby> 白石 <rt> しらいし </rt></ruby>

よりリッチなフォーム要素<input> 要素の type 属性が大幅に拡充

tel week

search time

url datetime-local

email number

datetime range

date color

month

HTML5 Formsデモ

動的なグラフィック• <canvas> ・・・ 2D/3D ビットマップグラ

フィック– 3D で使用される技術は特に「 WebGL 」と

呼ばれる• <svg> ・・・ベクターグラフィック

Webcam Toy

• カメラからの画像取り込み＆リアルタイムエフェクト

ChronoZoom

• 全宇宙史に関する様々なリソースを参照できる Web アプリ

ROME

• 3D 表現を効果的に活かしたインタラクティブ・ムービー

ご清聴ありがとうございました。