HTML5 Conferenceに参加して、気になったことのメモ。
HTML5マークアップについて矢倉先生に聞いてみよう
auto-prefixerやhtml5shiv.jsなど、不要になったら外せばいい。
メンテナンス的に工数が少なくて済む。
参考に見ておきたいドキュメント
Web Componentsのアクセシビリティ
Webアクセビリティ
- Point
- セマンティック
- 代替コンテンツ
- インタラクション
- デバイス
- PC
- スマホ
- touch screen…
- 一時的な制約の対応
- 日が当ったところでの見え方
- 電波が不安定 etc
Web Components
- コンポーネント化
- カプセル化
- 機能や意味の切り出し
- アクセシビリティ
- コンポーネントの質が高い：ページのアクセシビリティも上がる
- コンポーネントの質が低い：ページのアクセシビリティも下がる
- セマンティクス
- Custom Elements
- W3C既存要素の拡張
- Shadow DOM
- 独自要素
- 適切な要素(html)を使う
- 適切な要素が使えない場合、WAI-ARIAなどでセマンティクスを補う
- Custom Elements
ユーザに伝えることが重要
2015年これからの日本のWebサイトパフォーマンスについて
取り組み
- 納品前のパフォーマンステスト
- 定期的なパフォーマンステスト ←大事
アプローチ
- ビジネス（社内共有）
- 技術的
オライリー本
「ハイパフォーマンスWebサイト」「続・ハイパフォーマンスWebサイト」は情報が古い
統計学
- 中西塾
- データを見る上で有効
表示時間
- USでは0.5秒以内がマジックナンバー
- それ以外は不良品
どうするか？
- イメージファイルの最適化
- concat + uglify (js,css)
- ネットワーク数最適化
- アニメーション
- モバイル向けweb
- レイアウトデザイン
- USのサイトは画像数激減
- 集中と選択
- マルチバイトとwebフォント
制限の指針
- PCサイト：1M
- スマホサイト：100K
Open Web Platform推進に、日本の Web Developerはどう関わっていくか
そもそもExtensible Webを知らなかったので、下記とか見てなるほどと思った。
開発者によるWeb標準化を可能とする「Extensible Web」とは？
Polymer で作る次世代ウェブサイト
Web Components
- HTML imports
- Custom Elements
- Shadow DOM
- template
Polymer
- Web Componentsのラッパーライブラリ
- Polyfill:未実装ブラウザで利用可能になる
- Polymer要素群
Point
- スコープ（自分の担当範囲にフォーカスできる）
- データバインディング
- コンポーネントの再利用性
予定
- 0.8 : プレビュー中
- 0.9 : Q1
- 1.0 : Q2 2015