ぎゅ〜と濃縮,HTML5.
3月12日 福井県鯖江市めがね会館で開催されたHTML5勉強会にて.
また,3月20日 福井県福井市AOSSAで開催されたWCAFセミナーにて.
自己紹介
fitea fxug HTML5hit (北陸でHTML5勉強しよう) などコミュニティに所属.
アジェンダ
概要 構文 追加 リファレンス など
今html4なう.
W3CとWHATWG
HTML5とWebApplications 1.0(WHATWGでつくてた)
HTML5と関連仕様 (Webworkers Web storage websocket webSQL...)
マークアアプとAPIの使用
革新より発展を優先する.
HMLT5の仕様策定スタンス
html5構文とか
doctypeがシンプルに
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
これが
<!DOCTYPE html>
これに
- 追加要素
section article header footer aside nav canvas audio
- 削除要素
applet font frame strike/s tt
CSSでできるものは削除 //boldにする
div idで無理矢理してたのをsectionタグでわかりやすく(headerとかarticleとか)
入力サポート
- データの種類
email url date password tel number range
<input name="pass" type="password">
↑タグで指定.わかりやすい
web Forms2.0 test (http://higeorange.com/tmp/testWebForms20.html) //demo
カレンダーとか,正規表現で色々やってくれたり.JS使わなくてすむ
よく騒がれるタグ
- canvasタグ
jsで描画する.canvasはあくまで領域指定.
基本的に2Dのみ3D一部対応operaとか
グラフィクス グラフ デモ アニメーション
http://www.benjoffe.com/code/demos/canvascape/
canvasで作ってます↑
IE用のライブラリとかある → 一部扱えるように
explorerCanvas ←これ.(IE対応)
- videoタグ
W3Cはタグの規定のみ
コーデック/コンテナは規定してない
src属性に動画ファイルのパスを指定.
ブラウザ前にサポートフォーマットが違う.→複数のフォーマットを指定しておくのが有効. //統一しろし.
http://www.youtube.com/html5
JS API拡張.アプリケーション向けの話.
- Application きゃっしゅ
オフラインアプリケーションを実現するAPI
- Geolocation API 位置情報
対応してるのはFFとかくろむ. スマートフォンのブラウザでも対応してたり
ブラウザ経由で位置情報を取得.
ウィンドウ毎のデータを保持するストレージ
- web sql detabase
ローカルデータベースを扱うAPI
SQLを使い,データベースにアクセス
- WebSockets
リアルタイムデータ通信
サーバサイドと双方向通信を実現するAPI
サーバサイドと双方向通信を実現するプロトコル
- ?(聞き逃した><)
ブラウザ対応を調べる為に...
- When can I use...
http://a.deveria.com/caniuse/
html5以外もCSS3の対応とかも見れる
- HTML5 Demos and Examples
- Modernizr
HTML5とFlashと私
Flexアプリ開発やってるよ
FxUGで活動
巷のFlash悲観論
Player ? CS ?
オーサリングツールとしてのこって,JSとかHTML5に書き換えら得れればおk