November 30, 2008

Web Directions East 08 カンファレンス

Web Directions East 08に行ってきた。当日の写真はFlickr: “wde08”で共有されている。

『State of the web』ブラウザの多様化でみる最良のウェブ開発

Eric Meyer（エリック・メイヤー）

Eric Meyer

RIMG0007

Google Chromeは新しくない
Safariのwebkit搭載してるから実質的にはSafari
GoogleはなぜGeckoを選ばなかったのか？
モバイルを見越して、モバイル版も対応しているwebkitにしたのではないか？
IE8はAcid2をようやく合格
Acid3でもSafariやOperaが高い評価を出してる
Googleの関係者ははHTML5は2022年頃に勧告になるのではと言ってる
しかし、使おうと思ったら今すぐHTML5は使えるよ
ベクトルデータのCanvasとか
typeface.js Canvasを使うとFlashのSIFRみたいなんができる。フォントの可能性が広がる！こうゆうのもできるようになりJSエンジンの性能が重要になってきた。 Squirrelfish Extreme高速、TraceMonkeyも高速 IE7.js IE6やIE5で対応していないセレクタなどJSでカバーしようよデザイナー側からの希望 Sizzle：jQueryのセレクターエンジン Bluff：グラフライブラリデータとしてグラフを残せる Raphaël：グラフライブラリ 280 Slides ブラウザ上のkeynoteみたいなサービス。 Objective-CをJavaScript で実現、Objective-Jを使用 processing.js：ProcessingをJavaScriptに移植 silverlight,flashのようにインストールする必要はないが JSに依存することになる。ゆえにブラウザのJSエンジンの役割は重要 Google ChromeはWebアプリケーションために作られたモバイルウェブはまだまだ発展途上質の高いユーザーエクスペリエンスを提供できていない iPhone,Andoroidどちらが勝かという問題ではない要はどちらも試してみることが大事。というわけで、JSの進化によってWeb標準がサポートされている2008年のWebの現状 Slide : WDE08 State of the web

『Bulletproof A-Z』　あらゆるデバイスに対応できるウェブデザインの考え方

Dan Cederholm（ダン・セダーホルム)

BulletProof A-Z simplebitsでも有名なダンさん craftsmanship：職人気質的なところがある私の育ったところバーモント州は品質の高さで有名ダンがコーヒー好きってコトでIced or Hot°つくった A：メタ情報付きのアンカーリンク長いテキストだろうが、いかなる時も崩れない B：border-radius CSS3 -webkit-border-radius,-moz-border-radius master.cssとenrich.css分けて管理プロトタイピングのときにでも良いのでは？ C：color trancepency opacityではなくRGBa使ったほうがよい PNG画像ならもっと広く対応できる D：Do you….(すべてのブラウザで同じ見た目じゃないとだめなのか？) 答えはノー！ readbility的に問題なければ良いのでは？ E：easy clearing hack clearfixが常套手段だけど名前がイケて無くない？ groupって名前ののほうがセマンティクじゃない？ F：framework フレームワークを賢く使って必要なものはリセットしておこう G：Grid Layout グリッドシステムのほうが記憶に残る by ヨーゼフミューラブロックマン em指定でエラスティックレイアウト究極のflexibilityじゃないか？エラスティックレイアウトをする際、font-size 62.5%は計算しやすいブラウザ幅からはみ出してしまう時もを考えてmax-widthもちゃんと指定して H：垂直グリッド垂直グリッドも対応可能、モジュールで考える I：Internet Exploer 8 J：jQuery CSSライクなJSライブラリデザイナーでも比較的使いやすい K：Kitty うちのねこ L：Last :last-childに対応していないブラウザには.lastで対応 MからRまでは時間がないので飛ばす S：Shift Background Silverbackのサイトは背景画像がクールだ T：text blennding RGBa Wilson Minerのサイトはaのhover時にrgbaでブレンドしてる U：yoUR starts? いつから使う？ When can we__? ログ解析しなさい。 Slide : WDE08 BULLETPROOF A to Z

Bulletproof 使い勝手と見やすさを両立するAjaxを使ったサイト設計

Jeremy Keith（ジェレミー・キース）

Designing Ajax Ajaxの定義バックグラウンドでサーバーと通信しページ全体をリフレッシュすることがない体感的な問題、通信速度が速くなるわけではない。ページを部分的に更新するならframe iframe flashがあるがこれはAjaxでしょうか？ XML HTTP Request はじめはMicrosoftでIE5で初めて実装そのあとMozilla, Safari, Operaがサポート

CONTENT
STRUCTURE(HTML)
PREZENTATION(CSS)
BEHAIBIOR(JavaScript)

Hijax = Ajax + Progressive Enhancement JavaScriptが使えなくても普通に使えるモジュール化したデザイン

Plan for Ajax from the start
Implement Hijax at the end

パターン認識

sign up
add to cart
rate this
add a comennt

ajaxで対応すべき

search result?
pagination?

ajaxで対応すべきではない feedback What is happening?　何が起きたのか？ What just happend?　何が起きているのか？

status indicators
yello fade
drag’n’drop

結局、どこまでやるとやりすぎなのか？ログ解析しなさい。 Slide : WDE08 Designing for interaction with Ajax

お昼休み(niconico動画) John Allsoppのグローバルナビを画像を使わず、CSS3だけで実装してみせたファイル削減 30kBから1.7KB、文字サイズ拡大に対応

『Guerilla Userbility Testing』高効率・低コストで行うユーザビリティテストの仕組み

Andy Budd（アンディ・バド）

チケット購入システムUIがひどい今のコンピュータはすごいよ月へ行った頃の全部のパソコンを集めても、今のラップトップにかなわないユーザーはマニュアルを読まない今までの経験に基づいた判断をする video,DVD,Blue-rayのプレイヤーは基本的な操作は同じマルチタスクでユーザーはウェブを見ている必ずしもデベロッパーとユーザの考えは一緒ではない Test on Real Users microsofのHalo3はHalo2の失敗を受け、600人、3000時間のユーザーテストを行った結果、3億ドルの売り上げ User test for web 時間とお金がかかる従来どおりのミラーとビデオで観察 informal test どこでもできる、簡単、すぐにフィードバック客観性が必要統計的というよりも何が問題なのか考えることが大切 Silverbackの簡単な説明パソコンの前に座って、あとはテストするだけ全部記録できる Slide : Guerilla Usability Testing