HTML5 for Beginners

1,795 views

Published on

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

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

No notes for slide

HTML5 for Beginners

  1. 1. HTML5 for beginners 2013/6/21 株式会社オープンウェブ・テクノロ ジー 代表取締役 白石俊平
  2. 2. 自己紹介 • 白石俊平と申します。 • コミュニティhtml5j.org管理人(会員数5000名超) • HTML5とか勉強会主催(毎月一回、100名を動員) • Google API Expert (HTML5) • Microsoft Most Valuable Professional (IE9) • Twitter: @Shumpei
  3. 3. Web技術の基礎知識
  4. 4. HTML5という「仕様」  HTML(Hyper Text Markup Language)の最新バー ジョン  W3C(World Wide Web Consortium)で標準化作業中 仕様書はWebで公開されている
  5. 5. Webを進化させつつ安定させる HTML Living Standard HTML5 WHATWGによる バージョン W3Cによる 安定バージョン HTML5.1 W3Cによる 次期バージョン
  6. 6. HTML5仕様のスケジュール 2012年Q4 HTML5.0が勧告 候補に 2014年 HTML5.0勧告 2016年 HTML5.1勧告 2012年9月20日、HTML5仕様のスケジュールが発表された!
  7. 7. 「狭義」のHTML5と「広義」のHTML5
  8. 8. Web関連技術は広く、深い。 HTML要素数:109+ JavaScript API仕様: 7o+ CSS関連仕様: 65+
  9. 9. Web関連技術は広く、深い。 HTML要素数:109+ JavaScript API仕様: 7o+ CSS関連仕様: 65+
  10. 10. HTML4でもできたこと • CSSによるスタイル定義・外部スタイル読み込み • JavaScriptによるプログラミング・外部JS読み込み • テキストの修飾 – 見出し/段落/引用/強調... • リスト • インラインフレーム • プラグインの読み込み • クリッカブルマップ • 表組み • フォーム • ...
  11. 11. HTML5でできるようになったこ と • マルチメディア • コンテンツの構造化 • ルビふり • よりリッチなフォーム要素 • 動的なグラフィック
  12. 12. マルチメディア <video src="..."></video> <audio src="..."></audio>
  13. 13. コンテンツの構造化 <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のマークアップ例
  14. 14. コンテンツの構造化 <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のマークアップ例
  15. 15. ルビふり <ruby>白石<rt>しらいし</rt></ruby>
  16. 16. よりリッチなフォーム要素 <input>要素のtype属性が大幅に拡充 tel week search time url datetime-local email number datetime range date color month HTML5 Formsデモ
  17. 17. 動的なグラフィック • <canvas>・・・2D/3Dビットマップグラ フィック – 3Dで使用される技術は特に「WebGL」と呼ば れる • <svg>・・・ベクターグラフィック
  18. 18. Webcam Toy • カメラからの画像取り込み&リアルタイ ムエフェクト
  19. 19. ChronoZoom • 全宇宙史に関する様々なリソースを参照 できるWebアプリ
  20. 20. ROME • 3D表現を効果的に活かしたインタラク ティブ・ムービー
  21. 21. ご清聴ありがとうございまし た。

×