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(ダン・セダーホルム) RIMG0009 1

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(ジェレミー・キース) RIMG0020 1

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

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

Andy Budd(アンディ・バド) RIMG0025 1

チケット購入システム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

Web標準的ブラウザのグラフィックのススメ

Doug Schepers(ダグ・シェパーズ) SVG and Canvas : Standards based open graphics ■SVG

  • Google Mapsでも使われているよ
  • XMLベースだよ
  • wikipediaの画像
  • パーツごとに独立している
  • Lively Kernel
  • Dojo
  • Star Maker
■Canvas JavaScriptが使えれば、いろんなことができる。 JIS化されれば日本でももっと広まっていくと思う

Visualization A Web Of Data─Web上における情報データの可視化

Mike Migurski(マイク・ミジャースキー) RIMG0026 1

Visualization A Web Of Data 地図デザイン、情報のビジュアライゼーションのstamen designの人 データの可視化の三原則

  • LIVE:常に最新であること
  • VAST:広範囲でデータをカバー
  • DEEP:どの程度まで情報を掘り下げれるか
制作事例

FiveThirtyEight.com Casualties of War - New York Times MoveOn.org digg labs Trulia Hindsight Trulia Snapshot SFMOMA Modest Maps Oakland Crimespotting Native to a Web of Data Slide : WDE08 Visualizing Web of Data