ヤフーユーザーインターフェイスブログ（YUIBlog）

YUI：営業時間木曜9月1日

YUI Loaderは、シードファイルの変更に加えて、ローダーのヒントとトリック

戻る7月上旬に、 ダヴガラスに関する記事掲載ローダーとシードファイルへの変更 3.4.0にします。 そこのコメントにいくつかの質問に、フォーラムとの＃ユイチャンネル内の他のいくつかあったFreenodeのIRCは 、私は公共のQ＆AのホーンでDAVを取得したい

私は、それがその後、我々は、ローダーのベストプラクティスやヒントやトリックの話をするつもりなので、しかし、全体の時間がかかります期待してはいけません。 時間に応じて、私はカバーすることを望んでいるいくつかのものは、次のとおりです。

• ローダーは、非YUIのファイルを取得する方法
• モジュールグループ、およびそれらを使用して多くの利点を設定する
• ホスティング、独自のコンボのサービスを指す
• Loaderは、ファイルを探します。ここで各設定がどのように影響するか

あなたはローダーについての質問を燃焼している場合は、共有したいトリックを持っているか、まだ素晴らしいLoaderがどれだけ実現していませんが、ご参加ください！

時間と詳細

今週はオーディオを含む、Adobe Connectのに完全にセッションをホストするつもりだ。 我々は質問を管理したり、より詳細に議論のための接続のオーディオ·サポートが組み込まれてを使用するには、Connectチャットを使用します。

我々は、オンラインだろうオープン時間ルーム午前10時から午前11時PDT木曜日まで 。

更新

録音は可能です私たちのYouTubeチャンネルで 。

会話を検索： Bloglinesの | テクノラティ

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

2011年オープンソースの賞にYUIを指名！

あなたはYUIが大好きです（私たちはあなたが希望！）場合は、時間を割いてください私たちを指名するために2011年オープンソース·アワード置くPacktパブリッシング主催。 で、私たちのピカピカの新しいウェブサイトを指すようにしてくださいhttp://yuilibrary.com ！

推薦フォームは、 9月9日を通してオープンしました。

会話を検索： Bloglinesの | テクノラティ

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

YUI 3.4.0および新しいYUILibrary.com発表

YUIチームは、1つを持っていないと、しかし、2つの発表が今日共有することができます。 まず、我々は完全に改訂開始したYUILibrary.comを 。 新しいサイトは、すべてのYUIのドキュメント、クリ​​ーナーUI、および堅牢な新しいアーキテクチャの上に、より直感的な組織のための統一された宛先を提供して書き換えまでグランドです。 見て回るには時間がかかる。 我々は、あなたが何を参照してください非常に喜んでいただければ幸いです。

さらに、YUI 3.4.0は現在、CDNなどで利用可能ですダウンロード 。 このリリースのいくつかのハイライトは次のとおりです。

• アプリケーションフレームワーク（ベータ版）： YUI 3.4.0は、ライアン·グローブとエリックFerraiuoloによってアプリケーションフレームワークのデビューを迎える。 アプリケーションフレームワークでは、プログラムのロールアップです。 コントローラ 、 モデル 、 モデルのリストと、 ビューの単一ページのJavaScriptアプリケーションを書くための単純なMVCスタイルのフレームワークを提供するコンポーネント。 これらのコンポーネントは、URLベースのルーティング、データバインディング、完全なクライアント·サーバの同期との単純な非対話型のビューからの豊富なアプリケーションに何かを作成するために別々にまたは一緒に使用することができます。
• カレンダー（ベータ版）：アレンラビノビチは3.4.0リリースでは、ウィジェットのYUI 3のコレクションにカレンダーを追加しました。 カレンダーは月から月へのナビゲーション、単一または複数の日付を選択すると、カスタムの書式設定と国際化を提供する柔軟なウィジェットです。 また、ネストされたルールセットを使用して、フィルタリングこれまでに斬新なアプローチ、および開発者が迅速かつ容易に様々な用途に合わせてカスタマイズすることができ、完全にテンプレートベースのレンダリングを、紹介しています。
• ローダ： YUI Loaderは、パフォーマンスを向上させるに焦点を当てて、DAVガラスで3.4.0のための重要なアップデートを受けています。 シードファイルには、ローダーとそのメタデータのすべての要件が、既にページ上にあるので、モジュールのロードが速くなり、そのメタデータが含まれています。 ロールアップは、Loader設定をfalseにシステムとallowRollupデフォルトから削除されました。 結果として、YUIは今だけプログラムのロールアップの一部として含まれている追加モジュールではなく、指定されたモジュールをロードします。 最後に、ビルドディレクトリは爆発されており、サブモジュールは、依​​存関係の計算ではローダーによって実行される反復回数を削減するコアシステムから削除されました。 あなたが参照することができます3.4.0でローダーの変更についてのブログ記事詳細。
• グラフィックス（ベータ版）：トリップブリッジはYUI 3.4.0のグラフィックモジュールを導入しています。 このコンポーネントは、さまざまな形式のフィルとストロークのプロパティ値を定義済み図形とフリーフォームのポリゴンを作成することができ、JavaScriptのAPIを提供します。 ブラウザとデバイスの機能に基づいて、グラフィックスSVG、HTML、キャンバス、またはVMLを使用してシェイプを描画します。
• パネル（ベータ版）とウィジェット： YUIインターンティロ·ミトラは、パネルの書き換えに取り組んでカリフォルニア州内の別の生産的な夏を過ごした。 彼はまた、拡張機能にプラグインからウィジェット·自動的に隠すとウィジェット-モダリティの変換を含むウィジェットにいくつかの機能強化をとなっていること、そしてWidgetButtonsの導入、任意のヘッダとフッタのCSSスタイルのボタンを配置することができ、新しいウィジェットの拡張標準モジュールのサポートを実装してウィジェット。
• ScrollView：ティロは、垂直ページングをサポートし、即時のリスト要素にCSSクラス名を追加するには、scrollviewリストプラグインを含むように3.4.0のためのScrollViewを強化しました。

YUILibrary.com、YUIの開発者やデザイナー、ジェフConiff、のデザインを提供することに加えて、3.4.0リリースのアイテムの数を貢献した。 拡張機能は、モバイルデバイス上で優れた外観と使いやすさのためのウィジェットのいくつかのデザインとレンダリングが行われました。 彼はまた、などの新しい多くの例の作成 ​​で動作するように芸術的才能で入れているグラフィックスのヴァイオリンの例：複雑な図面 ​​。

YUI 3.4.0では、いくつかのコンポーネントは、ベータ版からGAのステータスに昇格しました ユーティリティ 、 TabView 、とYQLクエリー 。 また、歴史 - 非推奨となり、CSSGrids - 非推奨に加えてライブラリから互換コンポーネントを除去することに気づくでしょう。

我々は非常にYUI 3.4.0とYUIコミュニティとの新しいウェブサイトを共有することに興奮している。 あなたのドキュメントを見直すことでYUI 3.4.0の詳細について学ぶことができYUILibrary.com 。 また、確認することができますすることができますYUI 3.4.0のコンポーネントの履歴ファイルに記載されたすべての変更の概要だけでなく、 YUI 3.4.0開発時の対処チケットの完全なリストを 。 いつものように、我々はあなたがすべてのあなたが持つかもしれない提案するか、私たちのチケットデータベースに明らかにするかもしれない欠陥を提出することがいただければ幸いです。 YUI 3.4.0のフィードバックは、で入力することができますYUI 3チケットデータベース 。 YUILibrary.comのチケットは、で入力することができますYUILibraryリポジトリ 。 あなたは舞台裏に興味がある場合は、新しいYUILibrary.comのために私達を結合するようにしてくださいの作成 ​​を見て木曜日営業時間、8月18日我々は設計と実装を検討されます。

会話を検索： Bloglinesの | テクノラティ

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

YUI：営業時間木8月18日

新しいyuilibrary.comへようこそ！

3.4.0のリリースと並行して、新規および改良されたYUILibrary.comのサイトは生きて起こっている！ 新しいサイトは統一され、より良い組織され、新鮮なルックアンドフィールを持っています。

サイトの詳細については今後の記事を探したが、参加する営業時間は部屋を接続することでガイドツアーを最初に見て取得するには、この木曜日の朝ライアングローブとこの現実を作った他の人々 。 我々は、サイトのデザイン、バックエンドのセットアップ、将来の計画、コミュニティの機会について話して、新しいAPIドキュメントインターフェイスを含めた我々は時間に詰め込むことができるすべての新機能を、チェックアウトされます。

我々は、起動すると我々はそれが最終的にyuilibrary.comにその家を作る見て幸せになることができませんでしたこの事の準備ができて得るために私達のしっぽを切っ取り組んできました。 、就任を祝う来て（良い面と悪い面）は、フィードバックを与え、あなたは新しいサイトにそれがあなたのために、より大きなYUIコミュニティのためにできる最善を助けることができる方法を学びます。

時間と詳細

今週、我々 は 、 会議ブリッジを使用するつもりはない 。 代わりに、我々はオーディオを含む、Adobe Connectのに完全にセッションをホストするつもりだ。 我々は質問を管理したり、より詳細に議論のための接続のオーディオ·サポートが組み込まれてを使用するには、Connectチャットを使用します。

我々は、オンラインだろうオープン時間ルーム午前10時から午前11時PDT木曜日まで 。

アップデート：ダウンロード可能なビデオ

高解像度、IOSフレンドリー記録はダウンロードすることができます 。

会話を検索： Bloglinesの | テクノラティ

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

YUI：営業時間木8月11日

検索のダイレクトアクセス

我々は以前にフォローアップするつもりだ検索ダイレクトについての記事 。 そこについて話して検索直行価値について多くのことがだが、まず第一に、アクセシビリティを得ることの経験は、右の興味深く重要でもあります。 ビクターTsaranとCaridyマカコは、プロジェクトについて話をするの呼び出し時にご参加され、実装の ​​詳細を確認し、あなたが約直接またはアクセシビリティのベストプラクティスを検索したすべての質問に答えます。

時間と詳細

我々は、この週の形式を変更している。 我々は、Adobe Connectで完全にセッションをホストしようとしている。 にダイヤルインする会議ブリッジはありません。 オーディオにも接続を介してになります。 我々は質問を管理するには、Connectチャットを使用します。

我々は、で午前10時から午前11時PDT木曜日にいつものようにオンラインになるだろう部屋を接続します営業時間 。

アップデート：われわれは依然として、会議ブリッジ上にあるよ

皮肉のストロークでは、Connectは盲目の参加者のための優れたアクセシビリティを持っていないことが判明したので、画面共有といつものようにオーディオのための会議ブリッジの接続を使用することがあります。 接続の詳細は、次のとおりです。

1. 1-888-371-8922（Skypeは米国以外の参加者*のために偉大な作品）へのダイヤル
2. 参加者コード47188953を入力してください＃
3. 画面共有セッションに参加する （これはそれを初めて使用する場合は、このは、Adobe Connectのプラグインをインストールするプロンプトが表示されます）

第2位を更新します。録音可能

ここだ、この営業時間のためのダウンロード可能な記録が 。

会話を検索： Bloglinesの | テクノラティ

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

検索直接アクセスできるように

数ヶ月前に我々は、直接検索の最初のベ​​ータリリースを発表しました。 この新製品は、即座に各キーストロークを持つユーザへの回答を提供し、リアルタイムのフィードバックの概念を探ります。 Yahoo!の聴衆の多様性を考えると、我々は可能な限りアクセスできるように検索をダイレクトにしたかった。 最初に、我々は、この製品はYUI 3、そのDNAに組み込まアクセシビリティを持つJavaScriptライブラリに基づいてされるので、これは容易な作業であろうと信じていました。 エンジニアとしての私の予想に反して、このタスクは、我々が予想以上に困難であることが判明した。

直接導入検索

検索直行がYUIのコンポーネントのインフラストラクチャを使用して、地上から構築されていますが、その最も目に見える顕著なインターフェースが基づいているYUIオートコンプリートウィジェットの右箱から出して、多くのアクセシビリティ機能が含まれています。 特定のクエリに関連した提案は、このオートコンプリート実装に表示されます。 検索Directは、コンテンツパネルを備え、提案に関連したコンテンツが表示されている豊富なパネルを 、別名。 豊富なパネルの意図は、オートコンプリートリストからの提案が選択されている場合、ユーザーに直接的な答えを提供することです。

提案の新しいセットは、すべてのキーストロークのリストに表示され、最初の提案は、デフォルトで選択されています。 このデフォルトの選択は、 ソフト選択と呼ばれています。 ソフトの選択と提案リストを持つ後続の相互作用は、豊富なパネルにレンダリングされるコンテンツを決定する。 現実には、物事が（パフォーマンスの最適化、追加のキャッシュ層など）が少し複雑ですが、簡単のために我々は、これは一般的なワークフローであると仮定することができます。

アクセシビリティ機能

検索は、ダイレクトアクセスできるようにするためのクエストでは、検索アシスタント、Yahoo!は数年前に開拓した技術と同様に、YUIのネイティブのアクセシビリティ機能の実装を見ました。

この調査の後、主要な3つのアクセシビリティ機能は、検索ダイレクトのために提案されました。

• 使用して、 YUIの国際化ユーティリティをローカライズされたコンテンツを提供する。
• 設定roleとaria-*スクリーンリーダーによって識別され、処理する必要が自動入力補完ウィジェット内の要素上の属性を。
• 隠されたを使用してdivライブリージョンを表します（ aria-live何かが起こるユーザーに通知する）。 たとえば、利用可能な提案、選択された提案の数など

計画では、検索のダイレクトインタフェースの変更をユーザに通知し、次のビジュアル·コンポーネントを移動するキーボードショートカットのセットを提供することでした。

• サーチ
• [Submit]ボタンを
• 候補リスト
• 豊富なパネル

そよ風のような音、右か？ さて、のバックステップをみましょう。

問題

対応する答えを取得するための提案セットと、もう一方を更新するためにそれらの1つ- -私たちがここにあると、2つの非同期プロセスであり、彼らは両方とも非常に高速だ。 我々は、終了するには250msの最後の話をしている。 インタフェースは維持し、そのような急速なペースで変化しているので、すべてのトラックは、スクリーンリーダーのユーザーのために困難な場合があります。 それは、リアルタイムに近い方法で、更新は非同期に発生したときに大きさの順序が複雑になります。 スクリーンリーダーは、インターフェイスのすべての変更が通知されていたため、結果のおしゃべりは、それが困難な上に何が起こっていたかの意味を理解するために行った。

受け入れ可能な解決策を欠いている、我々はYahoo!の居住者のアクセシビリティの第一人者、ビクターTsaran（とのコラボレーションを開始@ vick08しようとするとよりよい何かを思い付くために）。

我々はビクター検索直接やり取り見て初めて、それは彼の焦点の大部分が代わりに提案リストの豊富なパネルであったことを私にすぐに明らかになった。 我々は "真実の源"としてリストを見て、これは私にとって驚きだった。 私たちのセッションのいずれかの間に、我々はリストのすべてのアクセシビリティ機能を無効にするには、たまたま運のストロークを持っていた。 できるだけ早くリストによって導入されたノイズを切り出したように、検索の直接ビクターに意味を持つようになってき！

スクリーンリーダーのユーザーは検索ダイレクト認識する方法

我々は間違った問題を解決しようとしていたことに気付いた後、我々は元のユーザーの話に戻りました： "私は、入力として、ユーザーとして、私は答えを得ることができます。" ユーザに渡って答えを得ることは優先事項でした。 問題を再定義した後、我々は、スクリーンリーダーが候補リスト上の豊富なパネルの内容を優先し、実装上の私たちのアクセシビリティへの取り組みを集中させた。

ユーザーの種類たとえば、 "miami wea"スクリーン·リーダーは、それら二つのことを教えてくれます。

• 10の提案。
• WEATHER MIAMI、FL。 TODAY、散乱雷雨、89°F 77°F. TOMORROW、孤立した雷雨、90°F 74°F ...

その後、豊富なパネルの内容の残りの部分を読んでいきます。 ユーザは毎回リストを更新し、前線全10の提案を知る必要はありません。 彼らが知りたいのであれば、情報は、キーボードナビゲーションを経由して容易にアクセスすることができます。

候補リストは、経験に付加価値をされていることを確認するために、我々は豊かなパネルの最初のフレーズが密接にそれに対応する提案に関連していることを確認してください。 たとえば、前の例に基づいて、 "weather miami" "マイアミの天気"の提案のための豊富なパネルの最初のフレーズです。

ビクターTsaranは、ヤフーのアクセシビリティラボから、それはスクリーンリーダーNVDAでFirefox上で動作する方法を示しています。

私たちのアプリケーションのスクリーン·リーダーの経験は、我々は今だけ、次の2つのビジュアル·コンポーネントに焦点を当てるので、フォローする方が簡単です。

• サーチ
• 豊富なパネル

全体としてのオートコンプリートリストへの変更が追跡されなくなり、ユーザは常に現在のクエリの入力を押すか、キーボードショートカットを使用することができますので、submitボタンは無視されます（ティルダアクセスキーを： [control, alt or shift] + ~ input要素と豊富なパネルを切り替えることができます。 これらのキーボード·ナビゲーション·オプションは、検索ボックスがスクリーンリーダーによって認識されているユーザーに明らかにされています。

エンジニアリングの観点から、この変更は非常に物事を単純化しました。 最もアクティブなコンポーネントのDOM操作の量が大幅に直接検索の全体的なパフォーマンスを向上させ、減少した。 ここでの実装例は次のとおりです。

機能SDAAria（）{
     VARノード= this._liveRegion = Y.Node.create（ '<div role="status" class="off-screen" aria-live="assertive"> </ DIV>'）;
     / / ARIAライブリージョンを作成します。...
     Y.one（ 'ボディ'）追加（ノード）;
     / / ARIAのリスニング：ライブのメッセージをライブリージョンを更新する
     this.on（ 'アリア：ライブ'、this._handlerMsg、この）;
     / /ゴシップをリッスンする：リフレッシュはどのように多くの提案を発表する
     this.on（ 'ゴシップ：リフレッシュ "、this._handleGossipRefresh、この）;
 }
 SDAAria.ATTRS = {
     文字列：{
          valueFn：関数（）{
             リターンY.Intl.get（ 'SD-アリア'）;
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay：関数（stringId、サブルーチン）{
         VARメッセージ= this.get（ '文字列。' + stringId）| |'';
         this._liveRegion.setContent（？潜水艦Y.Lang.sub（メッセージ、サブルーチン）：メッセージ）;
     }
     _handlerMsg：関数（E）{
         IF（e.id）{
             this._ariaSay（e.id、e.subs）;
         }
     }
     _handleGossipRefresh：関数（）{
         varのサイズ= this.get（ '提案'）サイズ（）;
         this._ariaSay（（サイズは> 0 '提案'？ 'NO_SUGGESTIONS'）、{
             N：サイズ
         }）;
     }
 };

学んだ教訓

アクセス可能なインタフェースを作成するとき、それは適切な質問をすることが重要です。 アクセス可能なアプリケーションのすべてのビットを作るのは正しいアプローチではありません。

スクリーンリーダーのユーザーから早期のフィードバックを要求する - あなたには、いくつかのユーザーからのフィードバックを得るまで、あなたの拠点をカバーしていることを前提としていません。 あなたの処分ですべてのツールや機能を利用することは意図した効果がない可能性があります。

スクリーンリーダーのユーザーは、スクリーンリーダーが通知が殺到している場合は特に、難易度のリアルタイム更新を追跡することがあります。 これらのシナリオでは、以下でより多くのことができます。 識別し、代わりにスクリーンリーダー用のアプリケーションの生の体験を複製しようとするユーザーのために重要であるかに焦点を当てています。

Caridyマカコ、ヤフー検索の直接のプリンシパルフロント：著者について 。 彼は長年のYUIコントリビュータとライブラリYUI Extensionをバブリングと同様に、YUIBlog.comのゲストブロガーは、高パフォーマンスのWebアプリケーションを構築するの豊富な経験の一部を共有するためのクリエーターであった。 ロード方法は、イベント駆動型アーキテクチャとSSJSはCaridyは、これらの日、彼のほとんどの時間を費やしている科目の一部です。

会話を検索： Bloglinesの | テクノラティ

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