HTML5 for Beginners
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 for Beginners

on

  • 1,673 views

 

Statistics

Views

Total Views
1,673
Views on SlideShare
1,028
Embed Views
645

Actions

Likes
5
Downloads
7
Comments
0

4 Embeds 645

http://sadah.github.io 344
http://localhost 297
http://kirabosi.hatenablog.com 3
http://10.75.74.3 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

HTML5 for Beginners Presentation Transcript

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