2010 » 8月» Yahoo!のユーザーインターフェイスブログ（YUIBlog）

YUIシアター- Douglas Crockfordは"JavaScriptをオンクロックフォード-シーン6：Loopage"（52分）

エリックMiragliaで15:47で2010年8月30日|中YUIシアター | 8コメント

"でのDouglas Crockfordの最新作CrockfordはJavaScriptをオン "シリーズ、彼はイベントループとサーバ側のJavaScriptの重要性の役割をカバーする話は、今ビデオで利用可能です。 Flashビデオを以下に貼付けて、またはあなたができる、HDビデオを（480pの〜370メガバイト）をダウンロードしてください。最初の5つの講義からのビデオ画像は、上で使用可能ですJavaScriptのページ上にクロックフォード。

その他の最近のYUIの劇場動画：

ニコラスZakasとビクターTsaran：Yahooのホームページのアクセシビリティ -ニコラスZakas、Yahoo!のホームページの主要開発者、およびビクターTsaranの、Yahoo!のシニアアクセシビリティマネージャーは、の中で最も訪問するサイトの一つにした戦略と方法を話し合う世界完全にアクセス可能。話は、Yahooの2010年6月BayJax Meetupで行われた。
デニスLembree：JavaScriptがアクセスできるようにする方法 -デニスLembree、AccessibleTwitterのアクセシビリティの専門家やクリエーターは、JS対応のサイトにアクセスできるようにの課題について説明します。話は、Yahooの2010年6月BayJax Meetupで行われた。
ライアンダール：NodeJS入門 -ライアンダール、NodeJSの作成者は、プロジェクトやパフォーマンスの改善と新たなアーキテクチャについての講演を紹介します。話は、Yahooの2010年5月BayJax Meetupで行われた。
エリヤInsua：jsdom：DOMのCommonJS実装 -エリヤInsuaは、Yahooの2010年5月BayJax MeetupでJavaScriptのDOMのサーバー側の実装を紹介します。
ニコラスZakas、Stoyanステファノフ、ロスHarmes、ジュリアンLecomte、マットスウィーニー：高性能JavaScriptを - Yahooの2010年4月BayJax MeetupでオライリーのハイパフォーマンスJavaScriptを話し合う高度なJavaScriptとDOMスクリプティングの最適化への5つの貢献者。

YUIシアターのサブスクライブ：

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

の紹介イエティ：YUI簡単なテストインタフェース

2010年8月25日15:16でリードバークによって|中開発 | 16コメント

テストのJavaScriptは、Web開発の重要なしかし頻繁に見落とさ一部です。ウェブの開発は、複数のブラウザを標的とすることを意味するので一つの理由です。 YUIは、現在、分類し、11の異なる環境での最高のサポートレベルをお楽しみください。さらに、我々はまた、モバイルデバイスのようなXグレードの環境を新たにYUIをテストします。あなたがサポートするので、多くの異なる環境を持つときは、それだけでローカルにして開発し、最良の希望するカップル重要なものを選択する魅力的です。

YUIで、我々は使用セレンとハドソンを実行するためのYUI試験私たちの継続的な統合戦略の一環として、様々なブラウザとオペレーティングシステム構成上でベースのユニットテストを。これにより、複雑なソフトウェアスタックの他の部分と一緒に作業を統合するから問題がその結果をキャッチするための素晴らしいです。それは値段が付属しています：これらのようなCIツールをセットアップして維持するために複雑である。あなたがコミットする前に、コードとテストを開発している間、どのような場合でも、彼らはあなたを助けていない。

今日、私は、リリースに興奮しているイエティ 0.1.0、あなたがコードの行をコミットする前に、クロスブラウザのテストを容易にするために設計された実験的なコマンドラインツールを。

イエティは、自動的にブラウザでJavaScriptのユニットテストを起動し、端末を離れることなく、その結果を報告します。使い方はとても簡単です：だけ実行yeti test.htmlでYUIテストベースのテストの結果を取得するためにtest.html 。一度に複数のコンポーネントをテストするために複数のHTML文書を渡すことができます。

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

イエティの本当の力は、同時に複数のブラウザでテストを実行しています。イエティは、テストコンピュータ上で1つずつ開くことができますが、イエティには、任意のデバイスをすべて同時に上の任意のブラウザ上でテストを実行することができます。

引数なしでイエティを実行すると、それはあなたがでアクセスできるWebサーバを開始しますhttp://localhost:8000 。その後、そのURLとは、その時点から実行すべてのテストはテストページを訪れるすべてのブラウザ上で実行されるため、ネットワーク上のブラウザまたはデバイスを指すことができます。

優れたと組み合わせるとlocaltunnel 、あなたと他のコンピュータとの間のファイアウォールは、苦痛が少ないです。あなたが機密情報を扱うていない場合、それはインターネットへのイエティを使用できるようにする簡単な方法です：

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

その後、イエティにアクセスするには、そのURLにアクセスし、テストの実行を開始することができます。

これは、携帯デバイスの場合に特に便利です：あなたの開発用コンピュータと同じネットワーク上でデバイスを取得することなく、あなたのキャリアのインターネット接続を使用することができます。

イエティは、JavaScriptのテストを簡単にすることを目的としているが、それは完成には程遠いです。（軽く0.1.0バージョン番号を服用しないでください。）イエティは、YUI Testを使っていると仮定している、唯一のMac OS X上でテストされ、そしてテストシナリオのいくつかの種類では動作しない可能性があります。これらの欠点にもかかわらず、イエティは、我々はYUIのコミュニティと共有するためにもはや待つことを望んでいないことが内部的に役立っています。

コードの取得

イエティはGitHub上で利用できるとの下で提供YUIのBSDライセンス。

インストール

イエティは、JavaScriptで書かとの上で実行されているNodeJS 。すでにNodeJSとならNPMユーザー、インストールは非常に簡単です。

 $ npm install yeti@stable

あなたがNodeJSとNPMをインストールしていないし、最近のMacにしている場合でも、便利なインストーラを使用してイエティをインストールすることができます。

イエティ0.1.0インストーラのダウンロード 2.7メガバイトを
のMac OS X 10.6およびIntel Core 2プロセッサ以上が必要です。

お使いのコンピュータは、インストーラの要件を満たしていない場合にはNPMをインストールすることができるなら、あなたはまだイエティを使用することができます。より多くのインストールと使用法の説明がでご利用いただけますイエティのREADME 。

あなたの参加をお待ちしております

イエティは我々が年に開始した最初のプロジェクトであるYUIラボ、私たちの新しいアイデアと取り組みが形を取るでしょう傘のカテゴリ。このように、イエティは、当社の他のプロジェクトとして同じレベルのサポートなしで提供されます。我々はまだあなたに質問を投稿してのフィードバック提供することを奨励イエティのフォーラムをしてイエティが簡単で楽しいテストを希望する。表示されない場合は、してください私達に言い、バグを報告するかを検討イエティに貢献する。

テスト幸せ！

著者について：リードバークは（ @レイド）YUIチームの最新メンバーです。 彼は、憎むべき雪のモンスターとJavaScriptを愛し。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

アクセスつ星の評価ウィジェットを開発

中| 9:00 2010年8月24日は、ティエリKoblentzで午前アクセシビリティ、開発 | 18コメント

急いで？にスキップデモページ。

多くのeコマースサイト、ソーシャルネットワーキングサービス、およびオンラインコミュニティでは、評価や査定の機能が含まれています。勧誘の人の意見にもビジネスモデルとなっています。格付けの製品、サービス、企業、そしてより多くの専用のサイトが存在することになります。

投票を表示するために使用される最も一般的なインタフェースは、ポイントの特定の数が（しばしば星として表現される）各審査員によって項目に割り当てられている"星の評価システム、"です。私たちは、アマゾンからYelpに、多くのサイトでこのモデルを見つける。

図A.スターからの評価の例アマゾンとYelpの。

として図に示すように、両方の視覚的なインタフェースは似ていますが、どのようなこれら2つのソリューションは、 興味深いことは、そのマークアップベースです。一つは、依存<map>に、他の<img> 。

あなたは、そのほとんどの評価システムが多くのユーザエージェント間のセマンティックと"動作"であることが証明いくつかのマークアップに基づいてされると思うかもしれない - つまり、評価のシステムを1つの動作を適用するHTML要素と属性の特定のセットに基づいてされることとJSとCSSを使ってスタイル。それは理にかなっているが、それは真実にはほど遠いです。それは、マークアップになると、作者はほぼすべてを試してみてください。

<a> 、
<img> 、
<span> 、
<li> 、
<map> 、
<div> 、
<input> 、
などなど...

マイクロフォーマットの場合

定格をマークアップするいくつかのイメージベースの手法を提示する前に、私はそれが基本的でわかりやすいアプローチ（から言及する価値があると思うマイクロフォーマット 文字を使用しています ）：

 <abbr class="rating" title="3 stars">***</abbr>

プロ: それは簡単とセマンティックです。; マークアップは最小限に抑えられます。; 方法は、CSSに依存しません。; メソッドは、イメージに依存しません。; はHTTPリクエストはありません。
短所: それは、半分の値（すなわち、3.5つ星）を表現することは不可能です。; それには、アスタリスク（"星評価"）と"作品"。; スクリーンリーダーは、デフォルトでは、（この場合は大したことでないかもしれない）略語を展開しないでください。

注意：スクリーンリーダーは、（少なくともので、私は★（★）ではなく、"*"を使用JAWSとNVDA ）HTMLエンティティを無視するように思われる。

マークアップは、イメージベースの評価を表示するには

それは画像を表示するために来るとき、著者は多くのオプションがあります。

評価ごとに画像

単一のイメージを使用する：

 <img src="4stars.png" alt="4 out of five">

ワンスター
二つの星
三ツ星
四星
5つ星

プロ: 評価ごとに一つの画像の使用方法は簡単とセマンティックです。; 方法は、CSSに依存しません。; 最小限のマークアップ。
短所: 様々なイメージがあるので、それは多くのHTTPリクエストを作成します。; 著者は多くの資産（画像は、作成するためにCDNにプッシュする、ときにサイトの色の変化、などを変更する）に対処しなければならないため、パフォーマンスの問題の上に、それはメンテナンスの悪夢になることができます。; 代替テキストが無視されるようにテキスト選択は、オペラ（少なくともバージョン9.52の） では不可能です。

ユニットごとに画像

WHATWGのからワーキングドラフト：

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

ワンスター
二つの星
三ツ星
四星
5つ星

プロ: 2つのusing img評価ごとの要素は、HTTPリクエストの数を減少させる。; 方法は、CSSに依存しません。
短所: オペラではテキストはそれが少なく読みやすくなる境界でレンダリングされていること、画像が無効になっている場合、 代替テキストが選択可能ではない、と（小画面表示で）。

これは物議をワーキングドラフトから取られていることに注意してください。代替テキストは、正確かつ簡潔にイメージを記述していないので、私の考えでは、この方法は受け入れられません。また、このアプローチの基本は、これらの画像は内容を表すことである場合、その理由なしでそれらの一部を残すaltテキスト？

にAjaxian 、例えば、著者は彼がそれぞれが内容であることを考える場合道理にかなってすべての単一のイメージで代替テキストを使用しています。

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

いずれの場合でも、単一の要素を使用して対星（と同数の画像を使用してimgまたは何か他のものと）投票の仕組みを容易にする主な利点を持っています-ユーザは自分の票を投じることつ星のうちいずれかを選択場所。だから我々はこの点に注意してください...

背景画像のためのスプライト

次のテクニックは、もともとの開発者によって実装された戦略の適応です。ヤフー音楽：

マークアップ

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

ワンスター: 5件1
二つの星: 5の2
三ツ星: 5の3
四星: 5星中の4星
5つ星: 5件中5件

プロ: それは単一のスプライトイメージに依存しているとして、このメソッドは、単一のHTTPリクエストが必要です。; 最低限の"フットプリント"。
短所: コンテンツは画像オフで明らかにされていません。; 何も（印刷スタイルシートは、この問題の世話をすることができる）ページが印刷されている場合を示していない。; オペラでは、高コントラストのスタイルシートは、すべての星が表示されなくなります。同じことがで真であるハイコントラストモードの最適化。; テキストの選択は可能ですが、それは（ハイライトを介して）明白ではありません。

マークアップのスプライト

このアプローチは基づいているTIPの方法を使用する、スプライト画像をとして<img>要素ではなく、背景画像：

マークアップ

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

ワンスター: 5つ星のうち1
二つの星: 5つ星のうち2
三ツ星: 5つ星のうち3
四星: 5つ星のうち4
5つ星: 5段階中の5

プロ: このメソッドは、単一のHTTPリクエストが必要です。; この手法は、Firefoxのユーザーは"非表示の画像"または"画像を非表示にする"（開発者のツールバーから）選択すると、コンテンツを明らかに上記の4つのメソッドの1つだけです。; 画像が使用できない場合、赤い"X"は、依存する他のソリューションとの場合のようにそれぞれの最高評価（5点満点すなわち5）の代わりにのみ表示されますimg要素。
短所: 画像の表示は、CSSに依存しています。

それは、他の画像置換のテクニックとは異なり、このメソッドは許可されていることは注目に値する。

画像、テキストサイズの設定に応じて拡大縮小する。
印刷する画像。
簡単に全体像として選択される代替テキストは、（Firefoxの）ハイライト表示されます。
画像は、ハイコントラストの設定/スタイルシートで消えることに。
オペラの代替テキストの選択（画像が無効になっている場合）。
Operaのスモールスクリーン表示でボーダレス代替テキスト。

マークアップは票をキャストする

ネイティブ機構を皮切りに

投票するために、我々は、単純なユーザーの選択と提出を可能にする低レベルの投票メカニズムが必要です。このため、我々は、ラベルとコントロールを持つフォームを使用して依存することができます。

マークアップ

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

その結果

追加改行や空白文字

より読みやすくするために、我々は追加<br>と空白を。

マークアップ

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

その結果

マークアップでスプライト画像をご紹介

このソリューションでは、我々は、上記の例のものより小さいスプライトを使用しています。それは今で構成されていますつのシングルスター（"オン"と"オフ"）。

我々は置いてimgのラベル内の要素。我々は、彼らが我々が彼らを経由して特定の寸法を設定することにより、それらを"隠す"ので、CSSのサポートなしで値がないと仮定widthとheight属性。使用していることに注意してください0両方の属性を持つことは、一部のUA秒で壊れたイメージを示すであろう

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

上記のマークアップを使用して、我々はラベルの選択を介して（ほとんどのブラウザで）フィールドの選択を期待できることに注意してください。

アクセシビリティを考慮

：残念ながら、 そのまま 、このマークアップは、少なくとも2つのスクリーンリーダーでの問題作成JAWSとNVDAを（参照してテストケースこれらのバグのために）。問題は、の使用に関連しているtitle属性と代替テキストのための空の文字列。

スクリーンリーダーのユーザを混乱しないようにこの問題を回避するには、代替テキスト（のような"星"を使用することですalt ）と挿入するためにはJavaScriptを使用してtitle マウスオーバーで。

よりよいマークアップ

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

その結果

スタイリング

CSSを使って画像に寸法を与え

我々は、使用em画像がフォントサイズに応じて拡大または縮小できるようにする。

マークアップ

変更

CSS

 img { width:2.8em; height:1.4em; }

その結果

既に見ることができるように、画像をクリックすると、対応するラジオボタンを選択します。暗黙のラベル付けは、この動作を（IEを除く）生成するようにスクリプトは必要ありません。

流れから画像を削除する

スタイリングlabelとposition:relativeと、イメージposition:absoluteとtop / left値が非表示にするには十分であるinput 、ラベルの内側とテキストを。

マークアップ

変更

CSS

 ラベル{ 
   位置：相対;
 } 
 IMG {
  幅：2.8em;
  高さ：1.4em;
   位置：絶対; 
   トップ：0; 
   左：0; 
 }

その結果

ラベルごとに1つ星を表示する

我々は、スタイルのラベルを、その寸法は、シングルスターの高さと幅と一致するように。

マークアップ

変更

CSS

 label { position:relative;  高さ：1.4em;
 幅：1.4em;
 オーバーフロー：隠された;
 表示：ブロック; 
 }
 IMG {
  幅：2.8em;
  高さ：1.4em;
  位置：絶対;
  トップ：0;
  左：0;
 }

その結果

水平に星を表示する

我々は、削除するbrのを、我々は、ラベルをフロートさせます。

マークアップ

変更

CSS

  BR {
 ディスプレイ：なし;
 } 
ラベル{
  位置：相対;
  高さ：1.4em;
  幅：1.4em;
  オーバーフロー：隠された;
   表示：ブロック; 
   フロート：左; 
 }
 IMG {
  幅：2.8em;
  高さ：1.4em;
  位置：絶対;
  トップ：0;
  左：0;
 }

その結果

評価に応じて、スプライトのイメージを表示する

評価"5のうち3つを"設定するには、我々は最後の二つのラベルに同じクラスを適用します。このクラスは、ラベル内の画像の位置をシフトします。

マークアップ

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label  クラス="no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ラベル> <br>
 <ラベル  クラス="no_star"   > <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ラベル>
 </ fieldsetの>

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   。no_star IMG {
 左：- 1.4em;
 }

その結果

情報を表示するだけで画像に依存しない

画像が利用できない場合にはすべてのディスプレイの代替品を提供することが重要です。ラベルやラジオボタンは、お互いの上にスタイリングされているためです。簡単な解決方法は、移動することですinputし、テキストを画面の外（すなわち、使用してtext-indent:-999em 、ラベルに背景色を適用）。

マークアップ

変更なし

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;  背景：ティール;
 マージン右：1pxの。
 テキストインデント：- 999em; 
 }
 IMG {
  幅：2.8em;
  高さ：1.4em;
  位置：絶対;
  トップ：0;
  左：0;
 }
  。no_star {
 背景：＃cccの;
 } 
 。no_star IMG {
  左：- 1.4em;
 }

注：

text-indentも上向きには、イメージのコントロールがフォーカスを取得するたびにジャンプ修正。
右マージンは背景色が正方形ではなく長方形を（同じ背景色を共有する隣接したラベルを使用して起こるか）を作成を確認することです。

その結果

最後の仕上げ

我々は、擬似クラスを使用して:hover 、いくつかのロールオーバー効果を作成する
我々は、フィールドセットの境界線を非表示
我々は、凡例を非表示
我々は、スタイルにカーソルを。

マークアップ

変更

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;  カーソル：ポインタ; 
 }
 。no_star {
  背景：＃cccの;
 }
 。no_star IMG {
  左：- 1.4em;
 }
 ラベル：ホバー{
 不透明度：0.5;
 フィルタ：アルファ（不透明度= 50）;
 }
フィールドセット{
 国境：0;
 }
伝説{
 テキストインデント：- 999em;
 }

注： label:hover画像を通してIE6とOperaで背景色の出血では無視されます。にデモページを使用するかわりに、 opacity 、私が使用しています別のスプライト 4つの状態を示しています。

その結果

ユーザーとの対話を可能にすることなく定格を表示する

我々は、ユーザ評価を基にして追加することで、"読み取り専用"にすることができますdisabledし、 checked適切に属性をinputフィールド。

マークアップ

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"  無効になって   > 1 / 5 </ラベル> <br>
   <label>は<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ="ラジオ"名="映画"値="2_5"  無効になって   > 2 / 5 </ラベル> <br>
   <label>は<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ="ラジオ"名="映画"値="3_5"をチェック="  チェック   "> 3 / 5 </ラベル> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ="ラジオ"名="映画"値="4_5"  無効になって   > 4 / 5 </ラベル> <br>
   <label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <入力タイプ="ラジオ"名="映画"値="5_5"  無効になって   > 5 / 5 </ラベル>
 </ fieldsetの>

CSS

使用ルール:hover削除されました

H4>結果

プロセスへのより多くの考えを与える

この時点で、それはスクリプトを使用せずに投票をすることは可能ですが、目の見えるユーザーには、その選択についての見当もつかない。だから我々はためにJavaScriptを使用してください。

、彼の選択に関してユーザーにフィードバックを与える
彼らはラジオボタンをナビゲートしながら、キーボードのユーザーは視覚的な手がかりを与える。

同時に、我々は、挿入するスクリプトを使用してを活用してtitle 、ユーザーがラベル/星にカーソルを合わせると"ツールチップ"を作成する属性を。

JavaScriptを、我々のスタイルのラベルとフォームコントロールのないフィードバックに関する選択性の欠如のためにスクリプトのサポートがある場合のみ。私たちがフラグを設定するにはJavaScriptを使用してこれを行うにはhtml要素とし、我々は、そのフックを含む子孫セレクタに基づいてルールを作成します。フラグが欠落している場合、そのルールは適用されませんし、要素がスタイリングされていません 。

これは、デモページ、最終製品。このソリューションは、さまざまな設定に応じてどのように動作するかを確認するには、CSSをオフにし、そしてより多くの、JavaScriptを無効にする、画像のパスを破る、テキストサイズを大きくするためにお好みの開発ツールを使用することができます...

包む

"許容"ソリューションを考え出すことは、ユーザーのニーズ、ユーザエージェント"の特殊性、ユーザエージェントの設定や詳細情報を識別する必要があります - これは、広範なテストを意味します。

ベストプラクティスに従うことは必ずしも確実なものではないため、このプロセスでは、ユーザのフィードバックは不可欠です。例えば、のように値に設定しない、前述のようにaltラベル内の画像の属性は、実行しても安全だと思われるが、それはそれは、少なくとも2つのスクリーンリーダー（参照の問題を作成することが判明したテストケースを）。

Firefoxのアクセシビリティツールバーのレポート（に基づいて、その一つとして-また、補助装置"のユーザーからのフィードバックは、いくつかの検証エラーメッセージを無視することができますhttp://bestpractices.cita.uiuc.edu/html/nav/form/ ）。

ここでの目標は、しかし、すべてを修正することはなかった。ポインティングデバイスなしで投票をすることができるということは私の優先事項の一つであったが、外観を改善し、画像が無効になっているオペラのソリューションのルックは、私は本質的な考慮ものではありません。

この"旅"の最も興味深い部分は、次のような問題に対処する、様々な条件下で多くのユーザーがアクセスできるソリューションを作ることだった。

画像オフ、
JavaScriptをオフ、
CSSオフ、
上記の組み合わせ。

それは、この技法が依存しているかを知ることもいいですimg星ができるようにする要素ではなく、背景画像、：

、ユーザーの設定に応じて自分自身のサイズを変更
ハイコントラストモードでshow、
デフォルトで印刷される（背景画像とは異なります）。

このソリューションは、この単一のスプライトに依存しているとしてこれのすべては、パフォーマンスを犠牲にすることなく来る：

後半見つける

私は最近、Amazonがその議決権のページ用に構築したシステムを発見した。彼らはスクリプトのサポートに応じて別のソリューションを提供するとして、それはかなり興味深いものです。スクリプトのサポートがある場合、それらは画像の使用<map>彼らがラジオボタンを使用するには、スクリプトのサポートがない場合は、（興味深いアプローチを）。どちらの場合も、ソリューションは、キーボードのユーザーがアクセス可能であり、そしてこれがアマゾンのプラットフォームのための差別化コアである機能へのアクセスを最大化するのに役立ちます。

彼らは画像でラジオボタンを置き換えるためにJavaScriptを使用しないことに注意してください<map> 、代わりに、彼らが使用してnoscriptのマークアップは、ラジオボタンが含まれているテーブル内の要素を。

"アウトオブボックス"ソリューション

Dreamweaver ^®の: Spryの評価ウィジェット
YUI: YUIのためのホテルランクスクリプト; YUIとホテルランクスクリプト
jQueryの: ハーフホテルランクプラグイン; アハトのjQueryのAjax; シンプルなホテルランクシステム; PHP、MySQLとjQueryで5つ星の評価システム
ワードプレス: WordPress用のGDホテルランクシステム; GDホテルランク; レビューのためのホテルランク
フラッシュ: 5つ星評価のシステムコンポーネント
その他。: 星の評価はどうあるべきか; 星空ウィジェット2

特別な感謝

ビクターTsaranと貴重なフィードバックのためのトッドのKlootsに感謝。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

すべてのYUI 3.1.x/3.2.0pr1ユーザーのための重要なセキュリティ更新プログラム：YUI 3.1.2を発表

2010年8月19日12:35で、エリックMiragliaによって|中開発 | コメントオフ

YUIチームはYUI 3.1.2をリリースした今日、 これはYUI 3.1.xと3.2.0pr1のすべてのユーザにとって重要なセキュリティ更新プログラムである 。あなたのサイトにYUI 3.1.xのか3.2.0pr1をホスティングしている場合はYUI 3.1.x/3.2.0pr1 IOのクロスドメインの機能を使用する場合、または、あなたが影響を受けます。

YUIのIOのユーティリティのXDRは、ネイティブXDRをサポートしていないブラウザのためのフォールバックとしてフラッシュトランスポートを実装しています。 YUIのバージョン3.1.xと3.2.0pr1のフラッシュバックの我々の実装におけるエラーにより、 io.swfファイルはYahoo!の中古品や独自サーバから提供するかどうか危険な動作に。この問題の解決策は2つあります。

あなたが完全なYUI 3.1.x/3.2.0pr1は、サーバにディレクトリを構築し展開している場合は、交換してくださいbuild/io/io.swf YUI 3.1.2に含まれているバージョンと影響を受けるバージョンで、 あなたが使用しているかどうかそうでくださいIOのユーティリティまたはそのXDRの機能。
の3.1.2バージョンにアップグレードするには、IOのXDRの機能を使用している場合io-swfセキュリティの問題に対処する。のホストバージョン3.1.2をio.swf自身のサーバー上では（このファイルには、中古品を安全に操作することはできません、それは3.1.2のようにCDNに含まれていません）。あなたが描画されている場合io.swfからhttp://yui.yahooapis.com 、自分からこのドメインを削除crossdomain.xmlファイル。

この問題についての詳細はで見つけることができるIOのユーティリティのマニュアル。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

YUI 2 DataTableの簡易編集モード

8時42分時2010年8月19日ジョンリンダによって午前|中開発 | 9コメント

YUI 2 DataTableには、滑らかなインライン編集を提供します。ときにdisableBtns列の設定でオンになっている、文字列や数値のような単純な値を編集するだけでExcelのように感じている。各変更は、通常（または拒否！）新しい値を格納するためにサーバへXHRのコールを必要とするためしかし、経験は、デスクトップアプリケーションのように応答することはできません。ユーザーが表示されている値の多くを変更する必要がある場合、それは遅いとイライラする経験をすることができます。これを解決するために、私はQuickEditDataTableを開発した。これは、DataTableには、編集可能なすべての値が1つの一括操作で変更できるクイック編集モードを、追加して拡張します。

（この例で再生するためにスクリーンショットをクリックします。）

概要

クイック編集モードに入るには、呼び出しstartQuickEdit() クイック編集モードを終了するには、呼び出しcancelQuickEdit()

それは、呼び出す前に変更内容を保存する責任がありますcancelQuickEdit() このタスクを簡素化するために、QuickEditDataTableは提供getQuickEditChanges() これは、オブジェクト、行ごとに1つの配列を返します。各オブジェクトは、列のidがオフキーと、その行に変更された値のみが含まれています。例えば、テーブルが4列（タイトル、著者、年、数量）を持つ、とユーザーはわずか20に1つの行の量を変更した場合、その行のオブジェクトは次のようになります{quantity:20} 。他の値は省略されます。

QuickEditDataTableは簡単に拡張できますYAHOO.widget.ScrollingDataTable 、その機能が必要な場合。これを必要な場合は、単にソースファイルのコピーを作成し、基本クラスを変更してください。

コンフィギュレーション

クイック編集は編集可能な列のセルのフォーマッタがスワップアウトし、特殊な生成フォーマッタで置換されているモーダル状態であるinput 、 textarea 、またはselectの要素。持っている列だけquickEdit設定が編集可能になります。設定オプションは次のとおりです。

copyDown

trueの場合、列の一番上のセルは、行の残りの部分に値をコピーするボタンが表示されます。

formatter

The cell formatter which will render an appropriate form field: <input type=”text”>, <textarea>, or <select>. By default, the cell formatter YAHOO.widget.QuickEditDataTable.textQuickEditFormatter is used for all cells to produce input elements. To get a textarea element, configure a column to use YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter instead. You can also write a custom quick edit formatter — see below.

validation

Validation configuration for every field in the column.

css

CSS classes encoding basic validation rules:

yiv-required: 値が空であってはならない。
yiv-length:[x,y]: String must be at least x characters and at most y characters. xとyの少なくとも一つは指定する必要があります。
yiv-integer:[x,y]: The integer value must be at least x and at most y . x and y are both optional.
yiv-decimal:[x,y]: The decimal value must be at least x and at most y . Exponents are not allowed. x and y are both optional.

fn

A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.displayQuickEditMessage(...) to display an error and then return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required , min_length , max_length , integer , decimal , and regex . There is no default for type regex , so you must specify a message if you configure a regex validation. The default error messages for the other types are stored in YAHOO.widget.QuickEditDataTable.Strings and can be overridden and/or localized.

regex

Regular expression that the value must satisfy in order to be considered valid.

Sometimes, a non-editable column must be rendered differently during Quick Edit mode. The best example is a column containing a link, since navigating away from the page while in Quick Edit mode can be disastrous. To remove the link during Quick Edit, configure qeFormatter for the column to be YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . For email addresses, use YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . You can also write you own custom, read-only formatter. Simply follow the normal rules for constructing a DataTable cell formatter.

Custom Quick Edit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(el, oRecord, oColumn, oData) {
  var markup =
    '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>' +
    YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
    el.innerHTML = lang.substitute(markup, {
      key: oColumn.key,
      yiv: oColumn.quickEdit.validation ? (oColumn.quickEdit.validation.css || '') : ''
     }）;
    el.firstChild.value = extractMyEditableValue(oData);
    YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply(this, arguments);
 };

You can use textarea or select instead of input , but you can only create a single field.

extractMyEditableValue() does not have to be a separate function nor must it be limited to using only oData . The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.

著者について： ジョンリンダ（ @ jafl5272 Twitter上では）上での基盤構築のリードエンジニアの一人であるYahoo!を APTが構築されています。 以前、彼は、Yahoo!のPublisher Networkに取り組みました。

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

Using YUI 2 on the DuckDuckGo Search Engine

August 19, 2010 at 5:41 am by Gabriel Weinberg | In YUI Implementations | 2 Comments

DuckDuckGo is a search engine that uses YUI extensively. Here's what it uses in particular:

ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.
The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
    var ig1=new YAHOO.util.ImageLoader.group(div,'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
            set('.cid', {display: "block"}).
            set('.ci2', {display: "block"}).
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！

を搭載ワードプレスでヤフーウェブホスティング。

その他の最近のYUIの劇場動画：

YUIシアターのサブスクライブ：

コー​​ドの取得

インストール

あなたの参加をお待ちしております

マイクロフォーマットの場合

マークアップは、イメージベースの評価を表示するには

評価ごとに画像

ユニットごとに画像

背景画像のためのスプライト

マークアップ

CSS

マークアップのスプライト

マークアップ

CSS

マークアップは票をキャストする

ネイティブ機構を皮切りに

マークアップ

その結果

追加改行や空白文字

マークアップ

その結果

マークアップでスプライト画像をご紹介

アクセシビリティを考慮

よりよいマークアップ

その結果

スタイリング

CSSを使って画像に寸法を与え

マークアップ

CSS

その結果

流れから画像を削除する

マークアップ

CSS

その結果

ラベルごとに1つ星を表示する

マークアップ

CSS

その結果

水平に星を表示する

マークアップ

CSS

その結果

評価に応じて、スプライトのイメージを表示する

マークアップ

CSS

その結果

情報を表示するだけで画像に依存しない

マークアップ

CSS

その結果

最後の仕上げ

マークアップ

CSS

その結果

ユーザーとの対話を可能にすることなく定格を表示する

マークアップ

CSS

プロセスへのより多くの考えを与える

包む

後半見つける

"アウトオブボックス"ソリューション

特別な感謝

概要

コンフィギュレーション

Custom Quick Edit Formatters

TwitterでYUIライブラリ

翻訳

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

ブログロール

コメントポリシー

ヤフーになる

メタ：

コードの取得