ぎゅ〜と濃縮,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
HTML5勉強会まとめ "HTML5を書いて動かすよ" @rch850
HMTL5は幅広い!
- タグ
canvas video audio...
webサイトもアプリも!
どのブラウザで作るか
- 向いてるタグとか
Opera → Form
FireFox → GeoLocation, FileAPI
googleChrome → Video
Safari
IE → (笑)
フォーム使いたいならOpera
見栄えを素敵にするならFireFox
FireFoxなら大体おk.
新しい機能はChromeの方が早く対応するかも.
iPhoneのsafariでもhtml5が割と動く.
html5でアプリ作るオーサリングツールがあるとかなんとか.
Geolocationはどうやって位置情報とってるん?
実装C++
findmebyip.com
http://www.findmebyip.com/
見てるブラウザのhtml5,css3の対応確認できるよ.
こんな感じに表示.ex) MacOSX FireFox3.5の場合.
デモ
- HTML 5 Demos and Examples
http://www.w3.org/2010/Talks/0119-next-web-plh/
いっぱいデモあるんで,これみたら大体把握できる..かも
jig.jp 福野さんミニセッション
スマートフォンアプリ作ろう!
html5勉強会in福井まとめ記事
3月12日 福井県鯖江市めがね会館で開催.
とりあえずまとめ速報.
レイアウト調整とか写真とか文章添削とかあとでします.
- 3月20日 写真つけました!
jig.jp 福野さんミニセッション - いつきの技的日記
HTML5勉強会まとめ "HTML5を書いて動かすよ" @rch850 - いつきの技的日記
ぎゅ〜と濃縮,HTML5. - いつきの技的日記