Html5でできること。そこからwebの未来を考える。

1,680 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,680
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html5でできること。そこからwebの未来を考える。

    1. 1. HTML5でできること。そこからWebの未来を考える。 2010.9.18 オープンセミナー2010@香川 HTML5-WEST.jp 村岡 正和
    2. 2. 自己紹介 むらおか まさかず村岡正和 @bathtimefish【仕事】神戸でITシステム開発/コンサルティングをやってます。【活動】HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSCKansai実行委員, 中国ニュースブログ「Shanghai Watch」運営【好きなもの】HTML5, Python, JavaScript, 中国拳法
    3. 3. HTML5-WEST.jp http://html5-west.jp/
    4. 4. HTML5とは?• HTMLの次のバージョン• 現在W3Cで標準化作業中• 正式勧告は2022年?• 正式勧告を待たず実装が進んでいる• 今までに比べて大幅な改良が施されている
    5. 5. HTML5の強化点• 要素の刷新 新規追加される要素、なくなる要素 section, header, nav, footer, article ... frameset, applet, dir, center ...• 様々なAPIの追加 ビデオ、オーディオコントロール、2D&3Dグラフィック制御、 オフライン動作、バックグラウンド処理、双方向通信...• ユニバーサル・アクセス 様々なデバイスで利用されることが考慮されている。 障がい者対応などWebアクセシビリティにも配慮されている。 できるだけ簡単な記述で強力な機能を使えるよう設計されている。
    6. 6. アクセシビリティ
    7. 7. アクセシビリティに関するWebの未来とHTML5の取り組みについて考えてみた
    8. 8. アクセシビリティに関するWebの未来とHTML5の取り組みについて考えてみた今日は2点ご紹介します。
    9. 9. Semantic Web
    10. 10. Semantic Webmachine-readable
    11. 11. Semantic Web• Webの利便性を向上させるための取り 組み。• Webコンテンツにメタデータを付加す ることでコンピュータが効率よくデー タを処理できるようにする。
    12. 12. HTML5
    13. 13. コンテンツ・モデルhttp://www.html5.jp/tag/models/index.html
    14. 14. Example• セクショニング・コンテンツ article, aside, nav, section• ヘッディング・コンテンツ h1, h2, h3, h4, h5, h6, hgroup• フレージング・コンテンツ abbr, cite, code, small, ruby ...• フロー・コンテンツ header, footer ...
    15. 15. nav articlenav nav article aside aside header article
    16. 16. nav articlenav nav article aside aside header article
    17. 17. nav articlenav nav article aside aside header article
    18. 18. Microdata<div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p></div> http://www.w3.org/TR/html5/microdata.html
    19. 19. custom data attribute<div id=sunflower data-leaves=47 data-plant-height=2.4m></div><script>var plant = document.getElementById(sunflower);var leaves = plant.dataset.leaves; // leaves = 47;var tallness = plant.dataset.plantHeight; // plant-height -> plantHeightplant.dataset.plantHeight = 3.6m;  // Cracking fertiliser</script>http://www.w3.org/TR/html5/elements.html#custom-data-attribute
    20. 20. machine-readable• 機械がWebコンテンツの内容を理解する。• データ解析の精度向上、自動化。
    21. 21. One Web
    22. 22. One Webmulti-device one source
    23. 23. HTML Device<p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></p><video autoplay></video><script> function update(stream) { document.getElementsByTagName(video)[0].src = stream.url; }</script> http://dev.w3.org/html5/html-device/
    24. 24. Ericsson’s Demohttps://labs.ericsson.com/blog/beyond-html5-implementing-device-and-stream-management-webkit
    25. 25. WebPC Mobile
    26. 26. Consumer electronic SensorHomecontrol Web Future Device PC Mobile
    27. 27. W3C Web on TV
    28. 28. Future of the Web.
    29. 29. Point. 1Accessible & Automatic
    30. 30. Point. 2Ubiquitous Web
    31. 31. あなたは何をしますか?
    32. 32. ご清聴ありがとうございました。

    ×