HTML5を使ってみよう! に行ってきました
OperaのHTML5イベント, HTML5を使ってみよう! に行ってきました. 以下メモです.
矢倉さんあいさつ
html5 japanese interest group
HTML5 Japanese Interest Group - W3C
- html5へのニーズを集めて, 仕様へ反映
- 誰にでもオープン
いまは議論のトピックを集めている段階
- ruby
- input mode
- web seckoets
ライブでウェブページのHTML5化: new capabilities, new markup
Daniel Davisさん, Opera Software, ウェブエヴァンジェリスト
html5のmarkupについてプレゼン. わりと初級レベル.
user-agents - not just browsers
- botなどのプログラムも
Why use new markup?
- いまhtml5でマークアップしても, 見た目は変わらない, でも...
- accessibility
- easily indexable
- future-proof
- cool
Create wonderful websites with HTML5
- かならずしもよくなるわけではない. markup次第
- html4時代と同じふうにもできる
- hmtl5はhtml4, xhtmlの(ほぼ完全な)スーパーセット
- 無理して使わなくてもいい
欠点
- 仕様の範囲がひろい
- 難しい
- user agentごとの対応度の違い
なくなった要素
- center
- font
- strike
- u
- frame, frameset
- applet
- etc...
- presentationのタグはなくなった
- b, i はpresentationなんだけどなくなってない
- 意味が付与されている
- smallは法律上の表示のため(small print?)に使う, など
- b, i はpresentationなんだけどなくなってない
- accsessibility上の理由でframeとかはなくなった
追加された要素
- article
- setion
- aside
- hgroup
- header
- footer
- nav
- time
- video, audio
- codecがまだ定まってない. ogg, mp4
- canvas
- 減った要素より増えた要素のほうが多い
- 全部でだいたい160要素
- どうやって使うんだろうと混乱したときは使わなくてok!
pave the cowpaths, 牛の通り道を舗装する
実装が崎で仕様が決まってきた歴史
layout
contentタグはいちいちいらないだろってことで無い
<header>header> <nav> nav> <div id="content"> <article /> <article /> div> <footer> footer>
flexible syntax
- ＜br＞ vs ＜br/＞
- ＜div id="example"＞ vs ＜div id=example＞
if you like it, you can keep it
- 今のままがいいのであれば, 今のままでいい
what about unsupported elements?
- ie意外は, 非対応のタグに対してもcss指定できる
- ieにはjsのhackで対応
- no title
- footerなどはデフォルトでinlineになる
- cssで display: block; 指定
- HTML5 Reset Stylesheet | HTML5 Doctor
live demo
- doctype宣言
- ＜!DOCTYPE html＞
- ＜html＞はなくてもいい(入れた方がいいけど)
- xmlの指定は不要
- ＜html lang="ja"＞
- ＜meta＞
- http-equivは不要
- ＜link＞でのstylesheet指定, ＜script＞でのjs指定
- type指定が不要
- ＜head＞＜body＞も必須ではなくなった
- ＜article＞や＜section＞内では＜h1＞を使える.
- これらのタグごとに, ひとつの意味的な塊になるようだ
- globalのh1と＜article＞内のh1があった場合, article下のh1はglobal h1のよりも子の要素と認識される.
- portabilityの向上 (タイトルがh1から始まっているので, article内をそのまま別の場所で使うことができる)
- ＜time＞
- 属性で＜time datetime="2009-12-03"＞とかやる
- 表記はiso format
- navはいくつあってもok
- footerはinlineと解釈されちゃう場合があるので注意
- desplay: block;
- ie対応
- 困ったときはhtml5.jpのリファレンスを見るといいよ
HTML5: Web Sockets
Mike Smithさん, W3C, HTML 担当主任
mike at w3.org
W3c focus on client side techs
- web app
- サーバからのデータを抽象化(dom, css)し, apiを提供
- server sideの技術は標準化するひつようなくて, クライアントサイドのapiを標準化
the open web pltform
- html, css, js
- server side is a black box
- also include api
- device independent
open web platform = formats + apis
- format に svg も加わりそう
- html5: application runtime env
- other runtimes
- java
- brew
- symbian
- native os
- flash
- other runtimes
goals of html5
- adding new application features
- web sockets
- offline web app
- client-side data storage
- web worker
- geolocation
web sockets
- http はステートレス
- request / response
- ある種類のappに対しては役不足
- realtime messaing application (chatやgameなど)
- 現在は polling hacks で対応
- jsはtcp socket communicationのネイティブサポートはない
- other platformはサポート
- web socketsはこれに対応(完全互換ではない)
- full-duplex (全二重)
- realtime messaing application (chatやgameなど)
- web sockets = network protocol + browser api
- 現在以下のブラウザでサポート
- chrome
- fx (as a patch)
web sockets are going to be the coolest thing
- since Ajax/XHR
- 複雑にはなる
resources
- 仕様
- プロトコル
- 訳
detail
ホワイトボードによる説明. web socketsを使うと, クライアントとアプリが直接双方向に通信ができるようになる.
google japan のエンジニアによるweb socketsの実装(python)
GitHub - google/pywebsocket: WebSocket server and extension for Apache HTTP Server for testing