1. HTML Language Update

    白石俊平@OpenWeb Technology

  2. HTML Language Update

    • 文法、変りました
    • 要素、増えました
    • API、増えました

  3. 文法変りました

    • DOMのAPIで語彙を定義
    • HTMLやXHTMLは単なる「表記方法」
    • HTML≠SGML
    • DOMのAPIで語彙を定義
    • HTMLやXHTMLは単なる「表記方法」
    • HTML≠SGML
    • DOMのAPIで語彙を定義
    • HTMLやXHTMLは単なる「表記方法」
    • HTML≠SGML

  7. meta要素の例

    • APIとして要素を定義
    • HTMLやXHTMLは単なる「表記方法」
      HTML文法で書くと
      <meta charset=UTF-8>
      XML文法で書くと
      <meta charset="UTF-8"/>

  8. 要素増えました

  9. 要素増えました

    • <section>
    • <article>
    • <aside>
    • <nav>
    • <footer>
    • <header>
    • <hgroup>
    • <figure>
    • <figcaption>
    • <details>
    • <summary>
    • <datalist>
    • <progress>
    • <meter>
    • <time>
    • <mark>
    • <video>
    • <audio>
    • <source>
    • <canvas>
    • <keygen>
    • <output>
    • <menu>
    • <command>

  10. これらの要素を使うと

    こんなコードが
    
<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>

  11. これらの要素を使うと

    こうなります。
    
<header>
  <h1>Site Title</h1>
  <nav>
    <ul><li>Home</li><li>Profile</li><li>Settings</li></ul>
  </nav>
</header>
<div class="content">
  <article>Main Content
    <time datetime="2009-11-23">2009/11/23に投稿</time>
    <div>連絡は<address><a href="mailto:a@a.jp">こちら</a></address></div>
  </article>
</div>
<footer>
  <small class="copyright">Copyright ...</small>
</div>

  12. API増えました

    • 2D & 3Dグラフィック
    • 動画・音声の再生
    • オフラインWebアプリケーション
    • クロスドメイン通信
    • クライアントサイドストレージ
    • バックグラウンド処理
    • サーバプッシュ・双方向通信
    • ファイルの読み（書き）
    • 位置情報取得
    • 通知
    • ...

  13. API増えました

    • 2D & 3Dグラフィック HTML5 <canvas> element and API, SVG
    • 動画・音声の再生 HTML5 <video>/<audio> element and API
    • オフラインWebアプリケーション HTML5 <html manifest="attribute"> and ApplicationCache API
    • クロスドメイン通信 HTML5 Cross Document Messaging, XHR Level2
    • クライアントサイドストレージ Web Storage, Web SQL Database, Indexed Database API
    • バックグラウンド処理 Web Workers
    • サーバプッシュ・双方向通信 Server-Sent Events, WebSocket
    • ファイルの読み（書き） File API
    • 位置情報取得 Geolocation
    • 通知 Web Notification
    • ...
  14. これらのAPIを使い倒したデモといえば・・・

  15. QuakeII GWT-Port

    使用しているHTML5 API

    • WebGL (Canvas 3D)
    • Video/Audio
    • WebSocket
    • LocalStorage

  16. DaViniciPadなんてツールもあります（宣伝）。

    使用しているHTML5 API

    • Offline Web Application
    • Rich Editing API
    • LocalStorage

  17. ご静聴ありがとうございました。

    • Twitter: @Shumpei
    • Blog: http://d.hatena.co.jp/Syunpei
    • mailto: shumpei.shiraishi [at] gmail.com