読者です 読者をやめる 読者になる 読者になる

【Google Developer Day2010】「HTML5 とウェブサイトデザイン」

GDD2010

発表者の矢倉 眞隆様のお話やスライドが大変分かりやすく、とても勉強になりました!
以下立ちながらタイピングして取ったメモです


Html5は使う段階にある

  • アジェンダ
    • HTml5 performance
    • css3 smartphone


デザイン→情報を適切なかたちに変換して組み替える
 情報の構造や意味を印付ける

目標:誰でもhtml5で構造化しよう



特定ブラウザにhtmlパーサ搭載
ちなみに、パーサを使わなくてもcss
display: block;
とかでもできるけれど。

formタグの新機能として、今までよりtypeが追加された


UIの実装はoperaが進んでいる。


formのデザインもデバイスによって変わる

  • formのtypeによって、iphoneではキーボードに@が追加される等

CSS3

プロパティが拡張された

レイヤー機能

参考サイト
「Stunning CSS3(http://www.stunningcss3.com/)」
Windowのサイズをクリックしながら変えてみると分かるのですが、背景の水玉部分が、それぞれ動きます。
つまり、1つの画像で書かれているのではなく、いくつもの水玉画像が合わせられています。

border-image

今までは、borderはsolidなどの設定しか出来ませんでしたが、画像の指定ができるようになります。
→セロハンテープみたいなのを作れる
参考サイト
「365 Days of Astronomy(http://365daysofastronomy.org/)」
このサイトのどこにborder-imageか忘れてしまいました;


個人的にぐぐったかんじでは、http://2xup.org/blog/2009/11/css3-border-image
が分かりやすく、参考になりそうです。
一番下の方にセロハンテープあります。

cssだけでグラデーション

参考サイト「google画像検索(http://www.google.co.jp/imghp)」
"画像検索"と書かれているボタン部分のグラデーションだそうですww
chromeで要素の検証をしてみると確かに適応されていますw


軽く調べると綺麗なグラデーションが…
http://www.css-lecture.com/log/css3/css3-gradient.html


CSSだけでグラデーションという機能は、各ベンダーが独自実装
CSS imagesで標準化されていて、来年ぐらいから標準されたものが使えるのではないか


(以下Appleから提案されたもの)

2D transforms

cssだけで拡大、縮小、歪みなど

Transitions

段階的に値を変化させる

  • □から◯に変化させるなど


参考サイト
「for a beautiful web(http://forabeautifulweb.com/buy/dvds)」

  • マウスオーバーでDVDが出てきます。

Opera対応 FFは4から

3D transforms

パースを定義して立体的に
safariで使える
chromeFireFoxも実装中

animation
  • キーフレームを定義してアニメーションを行う


参考サイト
Star Wars HTML and CSS(http://www.gesteves.com/experiments/starwars.html)」
「HTMLとCSSスターウォーズ!(http://www.ideaxidea.com/archives/2009/12/html_and_css_starwars.html)」

sfaとchのみ。web kitのみ対応
標準化あまり進んでない


HTML5とCSS3が使われることによって

これまで以上に、簡単に作れる範囲が広がってしまうため、どこをどのような動きにするかなどといった、カンプの作成が必要になるのでは?

performance

とにかく速く。
速くて困ることはない。

[早くするコツ]
  • ファイルサイズ小さく
  • リクエスト少なく
  • スクリプトの高速化
具体例


改善に正解はない。バランスを取って改善していく。
ちゃんとtestして、動作確認をする

PC向けのみのwebはいつまで?

smart phoneの普及

アメリカでは2013にはモバイル端末がpcを超えるという予想。
2015には日本でもでも半数が。

モバイル端末では多くのプラットフォームに高性能なブラウザが搭載

webkit

  • 画面サイズ+解像度(PCよりも)
    • 小さい+高解像度→色々小さくなる

例:
USのYahooの画面 見やすい 使いやすい

  • 小さい画面で最適な情報量にする。
    • ナビゲーションを考えないと。動線が要る。UIデザイン
  • 高解像度だときれいだけど
    • ピクセル密度

→端末によってバラバラ…

  • デバイスピクセルとCSSピクセルの違い

 E.X. android csspx:dpx=1:1.5

1:1でないと画像がぼやける

対策

1.ボタンなどCSSで作る
2.SVGを使う
 対応情報がまちまち 
 ex.new york timesiphone

    • ロゴのみに使うとか
  • parserだけでsvgを直接書き込める様に
    • andoroidでは未対応…


キャッシュとか、dataurlを使って変換した画像を直接埋め込んで、回線の弱さをカバーする


多少手直ししましたが…
メモはこんな感じです…。
間違いなど有りましたらご指摘よろしくお願い致します!