Contenu connexe Similaire à Html5概要 & デモ (20) Html5概要 & デモ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/
12. Offline & Storage
• Application Cache … オフラインアプリケーション
• Web Storage … 簡易易ローカルストレージ
• Indexed Database … KVS型のローカルデータベース
• File APIs … ファイルの読み書き
• File System API … アプリから利利⽤用できるファイル領領域
• online/offline events … オン/オフライン状態の把握
20. Graphics, 3D & Effects
• Canvas … 2Dグラフィックス
• WebGL … 3Dグラフィックス
• SVG … ベクターグラフィックス
25. Realtime / Connectivity
• WebSocket … リアルタイム双⽅方向通信
• Server-‐‑‒Sent Events … サーバープッシュ可能な通信
(ロングポーリング/Cometを仕様化)
• Web Messaging … Webページ間のメッセージ交換
• XMLHttpRequest Level2 … クロスドメイン通信やバイ
ナリデータが送れるように
• Notifications … デスクトップに通知
• WebRTC … ⾳音声/動画でリアルタイムコミュニケーショ
ンを⾏行行う
29. Device Access
•
Geolocation API … GPS情報を取得
•
Web Speech API… ⾳音声⼊入⼒力力
•
Device Orientation …デバイスの向きや傾きを取得
•
Contacts API … アドレス帳へのアクセス
•
Calendar API … カレンダー情報の取得
•
Battery Status API … バッテリーの状態を取得
•
Network Information API … 通信環境の情報を取得
•
USB, Bluetooth など
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