Html5でできること。そこからwebの未来を考える。
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,886 views

 

Statistics

Views

Total Views
1,886
Views on SlideShare
1,886
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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の未来を考える。 Presentation Transcript

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