HTML5 Conferenceメモ

2015年1月25日 22:41

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などでセマンティクスを補う

ユーザに伝えることが重要

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

カテゴリー: event html/css 

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment