Download as PDF, PPTX
Uploaded byyoshikawa_t
Html5概要 & デモ
Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。
Html5概要 & デモ
- 1. HTML5概要 & デモ 2013/10/27 Technology& Entrepreneurship TOKUSHIMA Toru Yoshikawa (@yoshikawa_t)
- 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t html5j／HTML5とか勉強会スタッフ Google Developer Experts (Chrome) HTML5 Experts.jp エキスパートNo.3 ビギナー部 (副部⻑⾧長)／Web先端技術味 ⾒見見部 (顧問)／⽇日本jQuery Mobileユーザ ー会 (管理理⼈人)／Sublime Text 2 Japan Users Group (管理理⼈人) Blog: http://d.hatena.ne.jp/pikotea/
- 3.
- 4. HTML5とは？ 1999年年に勧告された HTML4.01 の10数年年ぶり のアップデート WHATWG の Web Applications 1.0 と Web Forms 2.0という仕様が W3C に採⽤用されたもの 2014年年の勧告を⽬目指して、現在策定中
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. HTML5の大まかなカテゴリ Semantics Offline & Storage Multimedia 3D,Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
- 11. 仕様の一部を ピックアップして紹介します Semantics Offline & Storage Multimedia 3D,Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
- 12. Offline & Storage •Application Cache … オフラインアプリケーション • Web Storage … 簡易易ローカルストレージ • Indexed Database … KVS型のローカルデータベース • File APIs … ファイルの読み書き • File System API … アプリから利利⽤用できるファイル領領域 • online/offline events … オン/オフライン状態の把握
- 13. Offline & Storage Demo •HTML5 Terminal • online/offline events
- 14.
- 15.
- 16. Multimedia • video/audio … 動画/⾳音楽再⽣生 • WebVTT … 字幕・トラック情報を追加 • Web Audio API … ⾳音声処理理・合成 • HTML Media Capture … メディアの取込み
- 17. Multimedia Demo • Blowing apart fragments of video • Using WebSRT to create video captions • HTML5 Wow Visualizer
- 18. Blowing apart fragments of video http://craftymind.com/factory/html5video/CanvasVideo.html
- 19.
- 20. Graphics, 3D & Effects • Canvas … 2Dグラフィックス • WebGL … 3Dグラフィックス • SVG … ベクターグラフィックス
- 21. Graphics, 3D & Effects Demo • Hello Racer • BananaBread • MapsGL
- 22.
- 23.
- 24.
- 25. Realtime / Connectivity •WebSocket … リアルタイム双⽅方向通信 • Server-‐‑‒Sent Events … サーバープッシュ可能な通信 （ロングポーリング/Cometを仕様化） • Web Messaging … Webページ間のメッセージ交換 • XMLHttpRequest Level2 … クロスドメイン通信やバイ ナリデータが送れるように • Notifications … デスクトップに通知 • WebRTC … ⾳音声/動画でリアルタイムコミュニケーショ ンを⾏行行う
- 26. Realtime / Connectivity Demo •Browser Quest • Webcam Toy
- 27.
- 28.
- 29. Device Access • Geolocation API … GPS情報を取得 • Web Speech API… ⾳音声⼊入⼒力力 • Device Orientation …デバイスの向きや傾きを取得 • Contacts API … アドレス帳へのアクセス • Calendar API … カレンダー情報の取得 • Battery Status API … バッテリーの状態を取得 • Network Information API … 通信環境の情報を取得 • USB, Bluetooth など
- 30. Device Access Demo • Ball Pool • Google Gravity • Web Speech API Demonstration
- 31.
- 32.
- 33. Styling (CSS3) • CSS3 Selectors … :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利 • border-‐‑‒radius … ⾓角が丸く！ • text-‐‑‒shadow/box-‐‑‒shadow … 影がつく！ • gradient … グラデーション • Webfonts … 外部フォントを扱えるように • Transforms … 変形 • Transitions/Animations … CSSだけでアニメーションが可 な擬似クラスなどが増えた 能
- 34. CSS3 / Styling Demo •Button Maker • Round corners -‐‑‒ HTML5Rokcs • CSS3 Patterns Gallery • CSS Clock
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.