【Google Developer Day2010】「HTML5 とウェブサイトデザイン」
発表者の矢倉 眞隆様のお話やスライドが大変分かりやすく、とても勉強になりました！
以下立ちながらタイピングして取ったメモです
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)」
"画像検索"と書かれているボタン部分のグラデーションだそうですｗｗ
chromeで要素の検証をしてみると確かに適応されていますｗ
軽く調べると綺麗なグラデーションが…
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から
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
とにかく速く。
速くて困ることはない。
[早くするコツ]
- ファイルサイズ小さく
- リクエスト少なく
- スクリプトの高速化
PC向けのみのwebはいつまで？
smart phoneの普及
アメリカでは2013にはモバイル端末がpcを超えるという予想。
2015には日本でもでも半数が。
