04 December 2009

HTML5を使ってみよう! に行ってきました

f:id:cou929_la:20091203223732j:image

The Opera blog

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?)に使う, など
  • 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?
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;
  • 困ったときはhtml5.jpのリファレンスを見るといいよ


HTML5: Web Sockets

Mike Smithさん, W3C, HTML 担当主任

mike at w3.org

@sideshowbarker

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
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 (全二重)
  • 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