Your SlideShare is downloading. ×
0
HTML5概説2011.1.29 パンダの会 その参HTML5-WEST.jp 村岡 正和
自己紹介 むらおか まさかず村岡正和                   @bathtimefish【仕事】神戸でITシステム開発/コンサルティングをやってます。【活動】HTML5-WEST.jp Co-Founder, 京都GTUG, CSS ...
HTML5-WEST.jp  http://html5-west.jp/
HTML5とは?•   HTMLの次期バージョン•   現在W3Cで標準化作業中•   Draft Last Call は 2011年5月を予定•   勧告を待たず実装が進んでいる•   HTML5とその関連技術(API)の仕様群
HTML5の強化点• WEBアプリケーション開発のプ ラットフォーム• セマンティックなマークアップ• 高いアクセシビリティ• 高い互換性
WEBアプリケーション開発のプラットフォーム  •   現在のWebアプリケーションは機能不足気      味... (サーバーサイド依存、Ajax etc.)  •   よりリッチなWebアプリ(Rich Internet      Appl...
アプリケーションプラットフォームとして提供される機能の例•   マルチメディア再生コントロール(Video / Audio 要素)•   グラフィック描画(Canvas , inline SVG)•   オフライン動作(App cache)• ...
セマンティックなマークアップ •   Semantic Web •   ドキュメント上にあるデータの”意味”を明確     に定義 •   文章の構造、意味を正しく理解してマーク     アップする必要がある。 •   セマンティックなマークア...
高いアクセシビリティ•   PC以外の様々なデバイスでも動作することに    配慮されている    ひとつのHTML5ドキュメントがPC、モバイル、スクリーンリーダーで適切に表示、読み上げ    られることが期待される•   HTML5 For...
高い互換性•   フォールバックコンテンツ    <video controls>     <source src=”movie.webm”>     <embed src=”flashmovie.swf” type=”application/x...
HTML5の勉強方法
一番良い方法をお教えしましょう!!
ググれ⃝ス
仕様書を読むhttp://www.w3.org/TR/html5/
ググる• html5.jp• いろんなニュースサイト/ブログ• 個人的にはGoogleアラートが便利
本を読む• マークアップの場合 徹底解説HTML5マークアップガイド• APIの場合 HTML5&API入門 Google Api Expertが解説するHTML5ガイドブック
HTML5(と関連仕様)でWebはどう変わる?
こう変わると思う• 本格的なWebアプリケーション時代の到来• HTML5が動作する様々なデバイスの機能と の連携が容易に• より高度なSEOが可能となる• Webでやりとりされるあらゆるデータの共 通フォーマットとしてのHTML
本格的なWebアプリケーション時代の到来 アプリケーションの動作が要求される 様々なデバイスにHTML5ブラウザが実装            されるかも    (TV, Tablet, Sound Device etc)
HTML5が動作する様々なデバイスの機能との連携      Device要素, Capture API      Orientation API など 今後様々なデバイス機能とアクセスする APIが策定されるかも
より高度なSEOが可能となる• Webドキュメントの検索エンジンへの 最適化• 検索エンジンのドキュメント解析精度 が向上
Webでやりとりされるあらゆるデータ       の共通フォーマット• HTML5で機械処理しやすいデータとなる それぞれの機械に適した形に変換することが可能• 今までは用途に応じてRSS, Atom, JSONなど を使い分ける必要があった
はっきりいってもう書きはじめる時期
ご清聴ありがとうございました。
パンダの会 Html5概説
パンダの会 Html5概説
Upcoming SlideShare
Loading in...5
×

パンダの会 Html5概説

1,047

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,047
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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
  • Transcript of "パンダの会 Html5概説"

    1. 1. HTML5概説2011.1.29 パンダの会 その参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で標準化作業中• Draft Last Call は 2011年5月を予定• 勧告を待たず実装が進んでいる• HTML5とその関連技術(API)の仕様群
    5. 5. HTML5の強化点• WEBアプリケーション開発のプ ラットフォーム• セマンティックなマークアップ• 高いアクセシビリティ• 高い互換性
    6. 6. WEBアプリケーション開発のプラットフォーム • 現在のWebアプリケーションは機能不足気 味... (サーバーサイド依存、Ajax etc.) • よりリッチなWebアプリ(Rich Internet Application)を開発するための新しいプラット フォームの必要性 • Web開発に必要な機能を使いやすく実装 (JavaScript API) • HTML5 + API + CSS3 = OpenWebPlatform
    7. 7. アプリケーションプラットフォームとして提供される機能の例• マルチメディア再生コントロール(Video / Audio 要素)• グラフィック描画(Canvas , inline SVG)• オフライン動作(App cache)• クライアントサイドデータストア(Web Strage, Indexed DB)• インタラクティブ通信(Web Sockets, SSE, XHR Lv2 ...)• バックグラウンド処理(Web Workers)• ローカルファイルアクセス(File API)• クライアントサイド・バリデーション(HTML Forms)
    8. 8. セマンティックなマークアップ • Semantic Web • ドキュメント上にあるデータの”意味”を明確 に定義 • 文章の構造、意味を正しく理解してマーク アップする必要がある。 • セマンティックなマークアップによりHTMLの Web上での活用範囲が広がる
    9. 9. 高いアクセシビリティ• PC以外の様々なデバイスでも動作することに 配慮されている ひとつのHTML5ドキュメントがPC、モバイル、スクリーンリーダーで適切に表示、読み上げ られることが期待される• HTML5 Formsによりクライアントサイドバリ デーションが容易になる• WCAG 2.0に配慮• ルビ <ruby> の標準化
    10. 10. 高い互換性• フォールバックコンテンツ <video controls> <source src=”movie.webm”> <embed src=”flashmovie.swf” type=”application/x-shockwave-flash”></ embed> </video>• XML構文を使うことができる。XHTML1と互 換性がある。(XHTML5)
    11. 11. HTML5の勉強方法
    12. 12. 一番良い方法をお教えしましょう!!
    13. 13. ググれ⃝ス
    14. 14. 仕様書を読むhttp://www.w3.org/TR/html5/
    15. 15. ググる• html5.jp• いろんなニュースサイト/ブログ• 個人的にはGoogleアラートが便利
    16. 16. 本を読む• マークアップの場合 徹底解説HTML5マークアップガイド• APIの場合 HTML5&API入門 Google Api Expertが解説するHTML5ガイドブック
    17. 17. HTML5(と関連仕様)でWebはどう変わる?
    18. 18. こう変わると思う• 本格的なWebアプリケーション時代の到来• HTML5が動作する様々なデバイスの機能と の連携が容易に• より高度なSEOが可能となる• Webでやりとりされるあらゆるデータの共 通フォーマットとしてのHTML
    19. 19. 本格的なWebアプリケーション時代の到来 アプリケーションの動作が要求される 様々なデバイスにHTML5ブラウザが実装 されるかも (TV, Tablet, Sound Device etc)
    20. 20. HTML5が動作する様々なデバイスの機能との連携 Device要素, Capture API Orientation API など 今後様々なデバイス機能とアクセスする APIが策定されるかも
    21. 21. より高度なSEOが可能となる• Webドキュメントの検索エンジンへの 最適化• 検索エンジンのドキュメント解析精度 が向上
    22. 22. Webでやりとりされるあらゆるデータ の共通フォーマット• HTML5で機械処理しやすいデータとなる それぞれの機械に適した形に変換することが可能• 今までは用途に応じてRSS, Atom, JSONなど を使い分ける必要があった
    23. 23. はっきりいってもう書きはじめる時期
    24. 24. ご清聴ありがとうございました。
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×