itsukichang

フロントエンドが得意なエンジニア.ダーツと旅行とギターが好き

ぎゅ〜と濃縮,HTML5.

3月12日 福井県鯖江市めがね会館で開催されたHTML5勉強会にて.
また,3月20日 福井県福井市AOSSAで開催されたWCAFセミナーにて.

自己紹介


fitea fxug HTML5hit (北陸でHTML5勉強しよう) などコミュニティに所属.

what's html5

web技術からアプリケーションプラットフォームへ.
canvasとaudioをつかってwebアプリ制作できるよ

デモ

sketpad? (ペイントアプリ)
Mozilla Bespin...ブラウザ上でエディタ.
chrome://newtab

HTML5に興味を持ったのは?

RIA(Flex,Silverright)に興味有りなため.
HTML5の可能性を知ってもらう.興味を持ってもらう.

アジェンダ

概要 構文 追加 リファレンス など

今html4なう.
W3CWHATWG
HTML5とWebApplications 1.0(WHATWGでつくてた)
HTML5と関連仕様 (Webworkers Web storage websocket webSQL...)

マークアアプとAPIの使用
革新より発展を優先する.
HMLT5の仕様策定スタンス

HTML5でどうなる?

マークアップはよりセマンティックに
Webアプリはよりリッチに.

XHTMLが消えちゃう!?云々の説明comic
“Misunderstanding Markup” 日本語訳

web技術のこれから

CSS3 HTML5 JavaScript

  • CSS3 見栄え
  • HTML5 Webデータ構造を表現.
  • JS 各種API拡張.

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とか)

IE対応例

IE用にJSで対応するコードがある
とりあえず面倒い.

52Framework Template ← 定型.IE対応用テンプレートあるんで使用すれば楽かも.

入力サポート
  • データの種類

email url date password tel number range

<input name="pass" type="password">

↑タグで指定.わかりやすい
web Forms2.0 test (http://higeorange.com/tmp/testWebForms20.html) //demo

カレンダーとか,正規表現で色々やってくれたり.JS使わなくてすむ

よく騒がれるタグ

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
サーバサイドと双方向通信を実現するプロトコル

  • ?(聞き逃した><)

ブラウザ上でファイル操作するAPI
ファイル読み込みの制約 → ユーザーアクションが必用

ブラウザ対応を調べる為に...

  • When can I use...

http://a.deveria.com/caniuse/
html5以外もCSS3の対応とかも見れる

  • HTML5 Demos and Examples

http://html5demos.com/

  • Modernizr

http://www.modernizr.com/

HTML5Flashと私

Flexアプリ開発やってるよ
FxUGで活動
巷のFlash悲観論
Player ? CS ?
オーサリングツールとしてのこって,JSとかHTML5に書き換えら得れればおk

まとめ

勧告はだいぶ先.
使える部分から部分適用
iPhone/Androidでは結構イケる
IE以外では結構イケる

HTML5はデザイナ/開発者にとって魅力的.
これまでのWeb制約が変わります.

Webサイトとかアプリとか作りたくない人は,Chrome Extensionsで便利なツール作ればいいじゃん!

お勧めツール

HTML5で書いてあるかどうかわかる.

宣伝

HTML5-FIT 北陸でHTML5の普及とかをがんばるコミュニティ!

発表資料

upされたようなので.