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

CSSクイックヒント：どのようにIE6の"浮動小数点数の低下"を防ぐために

ティエリーKoblentzによって13:52に2010年10月28日|でCSS 101 、開発 | 4コメント

この現象はしばしば"と呼ばれているにもかかわらず、フロートドロップ "または"ドロップフロート"を、低下の列はfloat型である必要はありません...それだけに割り当てられた領域よりも広くする必要があります。これは仕様であり、それはブラウザに共通の行動だということに注意してください。列は、 "広すぎる"である場合、それはドロップされます。

どのようなIE 6が目立つことは、このブラウザを完全にサポートされていないということであるwidthプロパティを（また、 heightそのことについては）。それゆえ、コンテナがそのコンテンツに対応するために成長することができます。ボックスは、その設計スペースに収まらないことができるので、ドロップを作成し、この成長である。

通常、犯人は（例えば、画像、URLなど）をラップしない要素ですが、フォントスタイル（例えば、 IEとイタリック）も責任があるかもしれません。

たとえば、右側の列のドロップすることYUIBlog IE 6で、私がしなければならなかったすべてのスタイルを210ピクセルより大きい幅を持つ右側のレールのイメージの一つです。そのイメージは、もはや左の列の隣に適合することはできません右の列の幅を増加させるIE 6を強制します。

通常の修正：

word-wrap: break-word;: ボックスの右端で改行で文字列の折り返し。
wbrとwbr:after {content:"\00200B"}オペラ: wbr要素は、改行の機会を表しています。挿入wbrの内側に長い文字列は、必要に応じて、ブラウザが改行を追加することができます。
overflow-x:hidden;: コンテナより広い任意のコンテンツは、前記ボックスの右端にカットオフされています。

最初の2つのソリューションでは、文字列のみで動作し、ボックスを拡大してから画像などを防ぐことはできませんので注意してください。

既知のフィックスは、短い障害が発生した場合

数週間前、私はヤフーファイナンスのページのいずれかに "フロートドロップ"を修正するように頼まれた。近代的なブラウザでは、長い文字列は、された右側のレールから突き出て（スクリーンショット）が、IE 6で同じ文字列が右側の列のドロップ作った倍以下（スクリーンショット）。残念ながら、その内容は、マークアップはオプションではありませんでした編集は、プロバイダから来ました。

ための記号のカンマ区切りのリストであった文字列の性質上、上記の修正は十分ではありませんでした。任意の場所に、そのリストを壊すことはまだ実行可能な解決策ではありませんそれを切断するよりも優れていたが...

IE 6は、大きな男の子のように振る舞う作る

負の右マージン（プラスのボックススタイルにありますアウトIE 6は、任意のモダンなブラウザのように振る舞うようにするトリックposition:relative ）。

ライブデモ

修正せず

スクリーンショット IE 6でこのページが表示されていない人のために。

Loremイプサム嘆き座るamet、consectetur adipiscing elit。 Etiamモリスfacilisis viverra。 Curabitur luctus、NIBH交流rhoncusのultrices、turpis mauris mattis DUI、quis pharetra odio orci履歴書笑い。ヌンクultricies妊婦facilisis。

Curabitur luctus、quis orci履歴書笑い。

修正を含む

Curabitur luctus、quis orci履歴書笑い。

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; }

負のマージンは、任意の値からこの値が割り当てられた幅と拡張ボックスの実際の幅の間のデルタよりも大きい限り、することができます。それは、ドロップフロートを防ぐことがその宣言です。目的のposition:relative IEは親コンテナの境界の外のコンテンツを表示するようにすることです。

私は同じボード全体のスタイルの要素を好きなので、通常はこのルールをサンドしません。

考慮すべき事項

このハックは、代わりに列を保持しますが、それは広いなってから、そのコンテナを防ぐことはできません。彼らはラッパーの外に描画されるので、これは、背景または境界線のスタイル要素をできないことを意味します。ここではIE 6でこの技術との組み合わせで適用した場合にどのようなものか、背景と境界のスクリーンショットは次のとおりです。

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

jQueryやYUI 3：2つのJavaScriptライブラリの物語

マークRallによって14:08に2010年10月27日|での開発、 YUIの実装 | 5コメント

最近、私は私の最初のJavaScriptフロントエンドアプリケーションを構築する機会を得ました。以下は、手元の仕事には適していないツールを使用しようとしたときにしかならないのだ発見と進化のショートストーリーです。これは、2つの非常に異なるライブラリ、jQueryとYUI 3を使用して、同じフロントエンド·アプリケーションを開発するを介して取得学習のアカウントです。クライアントとプロジェクトの詳細は、意図的に省略されています。

概要

プロジェクトは、大規模なコンテンツ·パブリッシャのオープンスタンダードに基づいて単一の対話型アプリケーションにいくつかの異なるフラッシュツールのリファクタリングを含んだ。重要度の高い、アプリケーションは非常に、クライアントが受信した毎日のページの表示回数の数が多いため、小さな初期のフットプリントで最適化する必要がありました。いくつかのフェーズは、概念の最初の証拠である最初で、関与していた。

コンセプトが完成したアプリケーションをどのようになるかのいずれかのビューの開発に関与。それはから成っていた：

任意のフレームワーク（例えば、jQueryやYUI 3）と初期アプリケーション·ファイルの動的ローディングの責任最初のシードファイル（<1KB）。
jQueryプラグインの開発とを含めることはフォーム要素のスタイリングと検証、および動的なチャートのビジュアライゼーションをサポートしています。
ユーザー入力、設定のデフォルトと出版社のサイト内のアプリケーションの場所に基づいてUIの生成と人口、。
ユーザーの入力に基づいて情報の計算、プレゼンテーション。

完全な情報開示の利益のために、この点に私自身の経験上、小型でスタンドアロンのソリューションでは、通常のプラグインとして記述することができているのタイプを開発していた。これらは、画像カルーセル、インタラクティブな地図やTwitter / Flickrのウィジェットのような動的なUIコンポーネントが含まれています。最初のJavaScriptで水遊びの時に、jQueryには、習得が容易人気があったと私はすぐに私が働いていたプロジェクトのために必要な基礎を拾うことができました。しかし、これらのすべてのスタンドアロンのユニットであったと他のコードや大規模なアプリケーションの一部として、対話する必要はありませんでした。

最初の試み

プロジェクトの第一段階を完了するに、それは私がに使用されたものより私は非常に異なる獣を扱ったことを痛いほど明らかになりました。コードの組織にはほとんど経験があったので、私のコードはすぐに、無秩序な非効率的で反復的になりました。結果として、より大きなアプリケーションになるかの最初の部分は、ロードに時間がかかりました。実際にはコンセプトの、単一の証明を生成するために8秒かかりました。私のような小さなライブラリを使用していると考えていた間に大きな変化が必要だったとディーンエドワードのベースまたはJohn Resigの簡単なJavaScriptの継承 jQueryのにクラスベースの継承を追加するパターンが、私はさらに一歩進んですることにしました。

私が欲しかったのは私の最初のオブジェクト指向アプリケーションを開発する内に完了し、成熟したフレームワークでした。効果的なプロセスを介して私を導くだろうか。利用可能なライブラリを見直す際に、私は次のような理由YUI 3を採用することにしました。

属性およびクラスの管理を含む統合され、継承ベースのアプリケーション開発をサポートしています。
長期的な解決策：
- 標準とアクセシビリティをサポートしています。
- 大規模なよく知られている組織は、Yahoo!によって資金を供給
- のような尊敬される名に関連付けられたダグラスクロックフォード、ニコラスZakas 、とストヤンステファノフ。
パフォーマンスの最適化：
- 唯一の7キロバイトの最初のシードファイルを作成します。
- オンデマンドでレイジーロードされたモジュール。
- CDNの配信。
多様かつ包括的なドキュメント：
リリース間の成熟した、一貫性の進化。
に統合されたツールYUIコンプレッサー、 YUIDoc 、 YUIビルダー、およびコンソール。
すぎないだけのJavaScript、CSSフレームワークです。

2つを取る

YUI 3を統合することにより、プロジェクトにいくつかの直接的および間接的な利益をもたらした。

継承ベースのアーキテクチャとクラスの管理を介して属性インタフェース、およびベースとウィジェットパフォーマンスに優れ、再利用可能と組織コードを生成するクラスです。
モデルを使用してデータからプレゼンテーションを分離するウィジェットサイト内のアプリケーションの場所に基づいて別のビュー（インラインまたはオーバーレイ）をレンダリングするクラスを。
サンドボックスと動的モジュール YUI.use（）を介して封入。
を使用してクロスブラウザコンソールのデバッグYUIコンソールを。
上のセーブ使用して、パフォーマンスの最適化YUI Compressorを Eclipseで。
既存のjQueryプラグインを簡単に含めることと統合。
保存時に、自動化されたコードのドキュメントを使用YUIDocを。

最終結果は、サブ秒のロード時間（それは概念の初期の証拠をロードするために8秒かかった覚えている）と満足してクライアントと完成した製品でした。

教訓

ジョブに適したツールを選択

この記事を読んで、私は一部の読者は、抗jQueryのとしてこれを見ると確信しています。全然。 jQueryは多くの技術革新の責任素晴らしいプロジェクトです。しかし、任意のツールと同様に、その長所と本来の目的を持っています。その強さは、初心者のための参入障壁を下げ、経験豊富なプログラマの効率を改善、正常化ブラウザの不一致にあります。プロジェクトから出てきた主要な学習では、すべてのジョブの1つのツールに頼ることはできませんということでした。 YUI、jQueryのもよくアーキテクチャーのアプリケーション·フレームワークを提供することにより提供することができるものに基づいています。しかし、それはコストで来ることを言っても過言だが、次の点を参照してください。

習得の困難さ

あなたは、私が行ったようになじみのないライブラリとあなたの非常に最初のアプリケーションを書く場合は特に、忍耐を必要としています。しかし、ペイオフは計り知れない。別のライブラリを学習することで、コアJavaScriptのスキルは、あなたも図書館の仕事と彼らがもたらす利益方法の理解を深めましょう、向上させるだけでなく。私はYUI日常について何か新しいことを学ぼうとすると私は学び、より多くの私は建物に入ったYUIの思想と全く才能に畏敬の念を抱いているんだ。

あなたがそれを必要とする場合にのみコンテンツをロードする

それはちょうどあなたが前払いが必要な場合がありますすべてのものをロードするためには確かに、プログラムが簡単ですが、パフォーマンスの向上は、あなたはそれが巨大である必要がある場合にのみ、レイジーローディングコンテンツの直接の結果として得た。これは、大幅にアプリケーションのパフォーマンスを向上させるための重要な要因の一つであった。

できるだけ少なくDOMとの対話

この点は、使用される特定のライブラリには関係ありません。必要なDOM要素をキャッシュし、複数のHTMLテンプレートを利用することにより、UIのレンダリング時間が大幅に下落した。ノードは、ノードリストはY.all（）を使用してキャプチャすることができますがY.one（）を使用してキャッシュすることができます。（）もY.Node.create効率的に挿入する前にDOM要素にHTMLの大規模なテキスト文字列を変換する際に非常に有用であった。

例で学ぶ、CDNを使用し

YUIのCDN配信ライブラリを使用しているではCDNを経由して、プロジェクトのすべての資産を提供することを決めた。これはおそらく、パフォーマンスの改善に次ぐ要因だった。

パブ、サブ騒動

そこにそれらの経験を積んだプログラマには、このいずれかで笑ってしないようにしてください。過去にプラグインより少しを書き込むために使用されているので、私は、アプリケーション内部での通信方法を知りませんでした。でも、読んだ後、 "カスタムイベントは、ページ上の他のコンポーネントは、これらのイベントをサブスクライブし、それらに応答できるようにあなた自身のコード内で面白い瞬間やイベントを発行できるように、"私はまだそれを逃した。

それは結局のところ、YUIのカスタムイベントがパブリッシュおよびサブスクライブモデルではクラス間とオブジェクト間通信のために美しい作品。あなたもイベントに前後のサブスクライブして、特定の条件に基づいてバブルを抑制するために動的なロジックを含めることができます。

あなたのワークフローにベストプラクティスを統合

Eclipseを使用して我々は、ビルドプロセスにJSLintとYUI Compressorを統合することができました。簡単に言えば、あなたは、Ctrl / Cmdを押すたびに+ Sは、JavaScriptコードを検証し、最適化されています。あなたはコードの最初の行から最適化され、生産グレードのコードに対してテストしていることを意味します。また、納期に必死の最後のレースで最適化することを忘れないことを意味します。

仕事でYUIを学ぶ

誰もがさまざまな学習スタイルを持っていますが、私は私の心に特定の目的でYUIを学習するために使用されるどのようなリソースを共有しようと思いました。

ライブラリの概要を取得したり、特定のモジュールを学ぶために、関連するYUI劇場のエピソードを見てください。私は非常に始まるお勧めすることができます。
でYUIをよく読んでヤフー Developer Networkの。私は毎週少しずつ読んで、より多くの私はそれを再読み込みするたびに学習してみてください。
読み込みAPIのドキュメントを。あなたはYUI劇場やDeveloper Networkでそれを見つけることができない場合は、APIを掘る。それも、直接コードを読み取るために支払っている。
に質問を読んで、ポストYUILibrary.comに関するフォーラム。
たくさんプレイして楽しんでください！

結論

YUI 3は、大規模なプロジェクトに適した小型のフル機能を備えた、成熟しており、常に進化するライブラリです。フロントエンドのWebアプリケーションが複雑になるにつれ、YUIなどのライブラリの必要性が大きくなります。初心者のために最初は大変な経験をすることができているときにそれに固執するなら、あなたは報われる。

著者について：Mark がシニアのフロントエンド開発者であるVI 、デザインの方向で1981年に設立され、学際的コミュニケーションエージェンシー。 今日代理店は、B2CとB2Bクライアントの幅広い測定可能な成果を実現するために、デジタル、ダイレクト、デザイン分野でその作業を融合しています。

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

YUIConf 2010売り切れ、2つの特別な夜のイベントを発表

ジェニードネリーによって15:35に2010年10月26日|での開発、 YUIのイベント | コメントオフ

YUIConf 2010は完売です！登録された皆さんのおかげで - 私たちは、11月にあなたのすべてを楽しみにしています。今、私たちはスケジュールの最後の仕上げを入れているが、ここの店で持っているものでかいま見を取ることができます： http://yuilibrary.com/yuiconf2010/schedule.phpを。

ハイライトは以下を含む：

あなたがサーバサイドJavaScriptで起こってすべてのエキサイティングなものに増加させることができNode.jsのトラック。我々はNode.jsのクリエイターライアン·ダールが提示し、フロントエンド·エンジニアリングの未来についてのパネルの上に座っており、我々はYUIのDAVガラス、YUIから既製のライブラリコンポーネントを（使用して、ノードベースのプログレッシブ·エンハンスメントを示すために、最初の一つを持っている3）将来がどのように見えるかを示している。
どのようにインターネット上のどこからでもデータにアクセスすることがYQLを活用する上で高速化するためにあなたを取得するYQLトラック。 YQLチーム自体が彼らの最新作をご紹介する手になります。
現実世界のプロジェクトでは、本番環境を求めてでYUIを実装する方法を公開ケーススタディ。 FlickrやYahoo!メールからのエンジニアが手になり、エリックFerraiuolo -彼の最近の仕事のためのPayPalX賞の勝者は-話をここになりますヒントのWebは、彼の最新のYUI 3ベースのプロジェクトを。
携帯電話/タッチ体験を提供する方法についての洞察に満ちたプレゼンテーション。
オートコンプリートからCSSグリッドギャラリーへの貢献にYUIモジュールの深いダイブ、。

すべてのセッションは、上のビデオと使用可能にアーカイブされますYUIシアターまもなく会議の後。

我々は、一般に公開される2つの特別な夜のイベントをホストするためにYahoo!の開発者ネットワークと力を合わせることに興奮している。会議は既に完売されていますがので、誰もがMeetup.comでサインアップすることによって夜のイベントに出席することができます。スペースが限られているので、すぐにサインアップ！（YUIConf参加者がサインアップする必要はありません。）

YUIConf 2010パネルディスカッション： "Web開発の未来"ベンガルブレイスとディオンAlmaer司会
2010年11月8日、6:30 -午後8時

でのパネルディスカッションに出席するためにサインアップhttp://www.meetup.com/BayJax/calendar/15239592/を。

YUIConfは大きな変化の時に規律の近未来を探るために、この識別パネルを一緒にもたらしています。ダグラスクロックフォード、ヤフーでは、JavaScriptの建築家; Tantekチェリック、技術者、作家、ライアン·ダール、Node.jsのの生みの親、FacebookのJoe Hewittが、Firebugのクリエイターとの1つのスケジュールのパネリストはエレインウェリー、Meeboの創設者で、フロントエンドアーキテクトを含むトーマス社、Yahoo!のYUIの創設者、ほとんどすべての時間（IOSのFacebook）のモバイルアプリケーションをダウンロードしました。

YUIConf 2010基調講演：ダグラスクロックフォードによる "プロジェクト未来"
2010年11月10日、6:30 -午後8時

で基調講演に出席するためにサインアップhttp://www.meetup.com/BayJax/calendar/15239717/ 。

ソフトウェア開発では、我々はアーキテクチャについて夢を見る。これは、このような夢の本当の物語である。

座席は、これらの特別なイベントに限られているので、すぐにサインアップしてください！

CCの写真：

ディオンAlmaer： http://www.flickr.com/photos/seanosh/3306058997/
Tantekチェリック： http://www.flickr.com/photos/thomashawk/409672754/
ライアン·ダール： http://www.flickr.com/photos/blank22763/4089950858/
エレインウェリー： http://www.flickr.com/photos/drewm/3016944830/
ベンガルブレイス： http://www.flickr.com/photos/seanosh/3306056383/

親切な許可によって使用される写真：

ダグラスクロックフォード： http://www.flickr.com/photos/allenr/4482834276/
ダグラスクロックフォード： http://www.flickr.com/photos/allenr/4341338168/

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

YUI 2.4.0-2.8.1のすべてのユーザーのための重要なセキュリティ更新プログラム- YUI 2.8.2を発表

中| 11:34 2010年10月25日には、Eric Miragliaによって午前開発 | 6コメント

YUIチームは今日YUI 2.8.2をリリースしました。このリリースでは修正され、セキュリティ関連の欠陥 YUI 2.4.0リリースでは、YUI 2フラッシュコンポーネントインフラストラクチャの初めに導入されました。この不具合は、JavaScriptインジェクション攻撃は、ホストの影響を受けるYUIているドメインに対して作成することができます.swfファイルが。影響を受けるファイルを識別し、交換する方法に関する完全な詳細についてはYUI 2.8.2のためにセキュリティ情報をご覧ください。

あなたのサイトにこれらのファイルを含むバージョン2.4.0と2.8.1の間にYUI 2の配布をホストしている場合は、この脆弱性の影響を受けます。

YahooのCDN（からあなたのサイトに負荷YUI 2の場合yui.yahooapis.com ）またはGoogleのCDN（からajax.googleapis.comファイルがあなた自身のドメインでホストされていません）、そして、あなたは影響を受けません。 YUI 3は、この問題の影響を受けません。

あなたから（そして、YUI 2.4.0-2.8.1のパッチを適用したバージョン）YUI 2.8.2をダウンロードすることができますYUILibrary.comのダウンロードページ。

参照してください。セキュリティ情報の問題を解決する方法を、あなたのサイトが影響を受けているかどうかを確認すると、修正を確認する方法方法についてです。

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

YUI 3ギャラリーで：SVGうわー用に作成されるSVGの拡張、！

中| 11:18 2010年10月18日には、ヴィンセントハーディによって午前の開発、 YUI 3ギャラリー | 2コメント

はじめに

SVG（ Scalable Vector Graphicsは、図形、イメージとテキスト：）、インタラクティブなアニメーション2Dグラフィックスの宣言構文を提供します。 SVGサポートは一部のHTML 5仕様とSVGは、MicrosoftのInternet Explorerなどのすべての主要なブラウザによって実装されているバージョン9 。

SVG-wow.org今日SVGで行うことができますどのようなウェブサイトのショーケース。このWebサイト上のデモはのために作成されたSVGファイルを開く会議では、SVGワウ！セッションは、数年の伝統でした。 SVGうわー！セッションは、自分とのコラボレーションで、ディーン·ジャクソンによって開始した後で継続したエリック·ダールストローム。エリックと私のセッションでcolloratedた2009年と2010年の会議のエディション。

過去2年間、デモがますますSVGにその機能を適用する代わりに（またはそれに加えて）、HTML、AJAXフレームワークを使用しています。 YUIが両方使用するWebサイト上で最も広く使用されているフレームワークであるYUI 2とYUI 3 。

私は、簡単なSVGの概要から始めて、YUIがサポートしていたデモのタイプと説明します私はYUI 3ギャラリーに追加した拡張子は、SVGで動作するようにします。（これらの拡張は、今の条件の下で自由に使用できますYUIのBSDライセンス）。

SVGの概要

HTMLと同様に、SVGは、W3Cの仕様です。それは基本的な図形（四角形、円、線、多角形、楕円、ポリライン）、任意の形状（線、二次または三次のベジェ曲線になりますパスセグメントの用語で説明します）、テキストや画像を記述するための構文を提供します。

次の図は、の画面キャプチャです。 SVG-wow.orgの代替スタイルシートの例と遊びにいくつかのSVG機能を示しています。豊富なレンダリング（シャドウエフェクト、グラデーション、パターン）を、シンプルかつ複雑な形状を。

SVG画像は、ジオメトリとレンダリング属性の用語で定義されているので、任意の解像度でそれらをレンダリングすることが可能です。高いレンダリング品質を維持しながら、印刷時に（これ以上のギザギザ）の結果として、SVG画像は、例えば、任意のサイズにスケーリングすることができます。

次のビューをズームインでは、同じSVGイメージが以前に示したが、高品質を維持しながら、より高い解像度でレンダリングを示しています。

ちょうどHTMLのように、SVGインタラクティビティをサポートしています：それは、マウスまたはキーボードの相互作用のためのグラフィック·オブジェクトにイベントリスナーを追加することが可能です。もちろん、SVGは、簡単にそのような彼らのジオメトリやレンダリングスタイルなどのグラフィックオブジェクトのさまざまなプロパティを操作できるようになり、ドキュメントオブジェクトモデルをサポートしています。

高度なレンダリングスタイル（なでる、充填、パターン、グラデーション）、フィルタ効果（ぼかし、影、カラーマトリックス）、CSSスタイル、高度なテキスト機能（例えば、パス上のテキストなど）および宣言的アニメーション：SVG仕様にたくさんある。あなたは、SVG形式の機能の詳細については、この記事の最後に参照をチェックアウトすることができます。

SVGとHTML

とHTML5 、SVGは前置きなしで、HTMLドキュメントにインライン化することができます。ブラウザはその機能（例えば、サポートし始めているFirefoxの4 ）。当分の間、すべての主要なブラウザでは、同じ機能を提供するXHTMLでインラインSVGをサポートしています。 XHTMLにSVGは単なる名前空間が正しく宣言されている必要があります。

 <html xmlns="http://www.w3.org/1999/xhtml">
     <HEAD>
         ....
     </ HEAD>
     <BODY>
         <H1>インラインSVGます</ h1>

         <SVGのxmlns = "http://www.w3.org/2000/svgは" version = "1.1"
          xmlns名前：XLINK = "http://www.w3.org/1999/xlink"
         幅= "100％"高さ= "100％"はid = "backgroundSVG">
             <！ - ここでSVGコンテンツ - >
         </ SVG>
     </ BODY>
 </ HTML>

すべてのコードサンプルこのページでは、XHTMLにSVGをインライン化するこの方法を使用しています。

SVGとYUI

SVGは、宣言的アニメーションをサポートしています。たとえば、半径アニメートすることができ<circle>このような要素は：

 cx="50" cy="100" r="40">を<circle
     attributeName="r" values="40,60,20,40" dur="1.5s"を<animate />
 </円>

<animate>タグから借用されているSMIL仕様と、他のアニメーション要素と一緒に、それはSVGに非常に強力なアニメーションエンジンを提供します。

残念なことに、最近まで、SVGアニメーションのブラウザのサポートが疎であった。それは、過去2年間で改善されましたが、Microsoftはそれを明確にしているそれはIE 9の宣言SVGアニメーションをサポートしていません。

結果として、SVG-wow.org Webサイト上のデモのほとんどは、スクリプトによるアニメーションの代わりに、宣言型アニメーションを使用しています。宣言型アニメーションはスクリプトアニメーションよりも効率的であるため、一方で、これは残念なことです。逆さまに、スクリプトアニメーションが非常に柔軟に対応することができ、彼らは非常によく実装上で動作します。

良いスクリプトアニメーションのソリューションの必要性がでYUIの使用を行なったものであるSVG-WOWデモ。しかし、デモはまた、特に他のYUIの機能を使用するローダーとノードのモジュール。

YUIとSVGのアニメーション化

のデモSVG-WOW作成するためにYUIを使用して弾性ドラムのビート、モーフィング形状または回転するテキストや図形を、たとえば。 SVGでYUIを使用すると、いくつかのYUIの拡張を必要とし、私は一瞬でこれらを説明します。


回転するテキストや図形	モーフィング形状

弾性ドラムのビート

以下は、YUIは、単にアニメーションとSVGグラフィックスを操作するために便利になる方法を示しています。

SVGアニメーションを`transform`属性を

すべてのSVGのグラフィカルな要素は持っているtransform属性。 2Dを指定し、その属性アフィン変換のスケールに使用することができる要素は、上では、スキュー、回転、または変換されます。

SVGのSVG-wow.org YUIの拡張子はアニメーションできるようにtransformこのような属性を。

 VARのAnim =新しいY.Animate（{
    ノード： "＃circleA '、
    から{
        変換：{TX：0、TY：0、SX：2、SY：2}
     }
    へ：{
        変換：{テキサス州：20、TY：20、SX：1、SY：1}
     }
     transformTemplate： "（＃TX＃TY）を変換スケール（＃SX、＃SY）"、
    期間：1
 }）;

参照変換のアニメーションのテストを。

あなたは、変換値が"コンポーネント"（などの点で定義されていることに注意しましょうtxまたはty使用して値を形成するために結合されています） transformTemplateアニメーション構成オブジェクトにあります。

テンプレートは、個別のコンポーネントは、それが簡単にアニメーション値を計算するために作る間変換値を構築するための柔軟なメカニズムです。これは、YUIのアニメーションモデルはSVGのSMILアニメーション要素（よりも柔軟性（そして、より表現力）が許可例であるanimateTransform ）。上記のアニメーションを作成するために、同等のSMIL宣言がされています：

 ...>を<circle
     <のAnimateTransformにattributeName = "変換"タイプ= "translate"という
                       = "0,0"から= "20,20" DURへ= "1"で始まる= "scaleAnim.begin" />
     <AnimateTransformにはid = "scaleAnim"にattributeName = "変換"タイプ= "スケール"
                       = "2,2"から= "1,1" DURへ= "1"で始まる= "不定" />
 </円>

上記のスニペットが複数必要とする方法に注意してくださいanimateTransform同期されなければならない要素を： begin最初のアニメーションの属性が設定されているscaleAnim.begin 2アニメーションの開始を同期させる。 YUIのアニメーションエンジンの便利な機能は、アニメーションのタイミング（すなわち、開始、終了と期間）は、複数の要素のプロパティに適用するために共有することができることである。

SVG変換をアニメーション化するためのYUIの拡張子は、そのようなのように、広く使用されているカメラとアニメの歌詞の例を示します。後者はYUI 2の拡張機能を使用して前者はYUI 3の拡張子を使用しています。

ジオメトリをアニメーション化

基礎幾何学

YUIとSVGのジオメトリをアニメーション化するのはとても簡単です。次の例では、アニメーション<rect>要素の幅、高さと隅の半径：

 VARのAnim =新しいY.Animate（{
    ノード： "＃rectumの複数形"、
    から{
        幅：200、
        高さ：100、
         RX：5、
         RY：5
     }
    へ：{
        幅：300、
        高さ：100、
         RX：10、
         RY：10;
     }
    期間：2、
    緩和：Y.Easing.elasticOut
 }）;

参照してください。形状アニメーションのテストを。

後で説明したように、YUIボンネットの下にいくつかの変更は、この作業を行いました。しかし、開発者の視点から、このアニメーションは、他のHTML属性またはCSSプロパティのアニメーションとまったく同じように動作します。

`<path>`の`d`属性

ひとつのジオメトリ属性は少し特殊です： dの属性<path>要素。 <path>要素は任意の複雑な幾何学のために使用されます。 <path>任意の形状を記述することができます。そのd属性は、線分、円弧、二次または三次することができますパスセグメントの面で、その幾何学を記述するベジエ曲線（さらにいくつかのコマンドがありますが、ベジェ曲線に彼らはすべてのマップ）。

アニメートd属性もまたYUIのアニメーションエンジンの拡張機能のビットを必要としますが、その拡張子を持つ、 d以下に示すように、属性は、他のものと同じようにアニメートすることができます。

 VARのAnim =新しいY.Animate（{
    ノード： "＃pathA"
    から：{D： "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"}、
    へ：{D： "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"}、
    持続時間1秒、
    緩和：Y.Easing.bounceBack
 }）;

参照パスアニメーション、とりわけ、以下の画像で表されるように、時間をかけてクロスにモーフィングにチェックマークを見せて、テストを。

ガンジー引用符デモでは、アニメーションのこのテクニックを使用しdガンジーの姿に変形図形に属性を。

他のSVGの属性をアニメーション化

もちろん、YUIアニメーション、ジオメトリ属性に限定されるものではない。任意のSVG属性は、アニメーション化することができます。たとえば、次のアニメーションをアニメーション化する水平方向のぼかしフィルタのぼかしの半径です。

 / / SVGスニペット
 <フィルタ..
     <feGaussianBlur ID = "のBlurFilter" stdDeviation = "10" ...  />
 </フィルタ>

 / / JavaScriptのアニメーション
 VARのAnim =新しいY.Animate（{
    ノード： '＃のBlurFilter'、
    から：{stdDeviation：[0、20]}、
    へ：{stdDeviation：[0、0]}
 }）;

参照してください。フィルタアニメーションテストを。次の画像は、ガウスぼかしをアニメーション化し、ボタンの状態間の遷移に使用することができる方法を示しています。

効果のこのタイプで使用されている高速のぼかし効果そのデモでは、（前述したようにのみ、その機能をサポートしているブラウザで実行されているのを犠牲にして）YUIのアニメーションが宣言型SMILアニメーション要素を使用していないにもかかわらず、デモ。

CSSプロパティをアニメーション化する

HTMLと同様に、SVG要素は属性もCSSプロパティを持っています。 SVGは、いくつか持って特定のCSSプロパティを。これらのプロパティは、驚くべき効果を作成することも、アニメーション化することができます。たとえば、 stroke-dashoffsetプロパティは、図形の描画シミュレートするために使用することができます。

 / / SVGスニペット
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScriptを
 VARのAnim =新しいY.Animate（{
    ノード： "＃rectumの複数形"
    へ：{'ストロークdashoffset'：0}、
    期間：0.25
 }）;

参照してください。ストロークアニメーションテストを。

graffitisのデモでは、このテクニックを（にもかかわらず、YUIアニメーションなし）を使用しており、そうするカメラのデモでは、（YUIアニメーションで、この時間）。

YUIとSVG：ボンネットの下に

SVG-wow.orgウェブサイトは、YUI 2、YUI 3の両方を使用して、両方のSVG固有の拡張機能を持っています。この記事の次のセクションでは、YUI 3の拡張機能に焦点を当てています。

拡張子が必要でした。

YUIは、SVGのDOM特異性で動作させる
実装の違いを考慮
そのようなSVGの変換のような新しい属性タイプのサポートを追加
追加のアニメーションのタイミングと同期機能を追加

SVG DOM特異性に関する会計処理

前述したように、SVGの属性は、次のような宣言型の要素をアニメーション化することができます<animate> 。 SVGのアニメーションモデルをサポートするために、SVGの属性値は、 アニメーションと基本値の両方を保持します。たとえば、 r上の属性<circle>要素がSVGAnimatedLength次のように定義されます。

インタフェースSVGAnimatedLength {
  読み取り専用SVGLengthがbaseVal属性。
  読み取り専用SVGLength animValの属性。
 };

その結果、さらに宣言的アニメーションをサポートしない実装では、我々は下に到達する必要がbaseVal属性の値を読み取るために：

 VAR円=のdocument.getElementById（ '＃にmyCircle'）;
 VAR右辺= circle.getAttribute（ 'R'）baseVal.value。

拡張機能は、SVGの属性 '珍しい価値モデルを考慮するためにアニメーションエンジンを可能にするために必要であった。ありがたいことに、YUI 3は、アニメーションの動作の概念があります。行動は、本質的属性に固有のフックであり、それはSVGの属性値を処理するためのサポートを追加するのはかなり簡単でした。たとえば、 SVGAnimatedLength属性は次のように処理されます。

 VAR lengthBehavior = {
    セット：関数（Animは、ATT、経過、期間、楽しく、へ、から）{
         / / SVG固有の処理
     }

    取得：関数（アニム、ATTR）{
         / / SVG固有の処理
     }
 };

 / / <circle> 'srの属性を処理する
 Y.Animate.behaviors.r = lengthBehavior。

などの他のSVGの属性の値の複数の拡張機能がありますtransform （のような属性、色属性値fill 、 strokeまたはstop-colorなどと属性） stdDeviation前述したように。

いくつかの同様の調整は、例えば、必要とされたY.Node.prototype.toString SVGのを考慮して、再度、方法baseVal （この時間classNameノードプロパティ）。別の例は、デフォルトのノード·セッターであるNodeモジュールです。

ブラウザの違いの会計処理

以前の拡張が原因でHTMLとSVGの間で仕様の違いにより必要とされていますが、次のようにするためのブラウザ間で実装のバリエーションが要求されている。

SVGは、属性と呼ばれる特別なカテゴリの持つプレゼンテーション属性を。また、CSSスタイルを（すべてのブラウザのサポート）をサポートする実装では、これらのプレゼンテーション属性は非常に低いとCSSプロパティを指定するもう一つの方法です特異性を。 SVG仕様から：

彼らはゼロの特異性を有する著者スタイルシートの先頭に置か対応するCSSスタイル規則によって置き換えられたかのようにプレゼンテーション属性は、このようにCSS2カスケードに参加します。プレゼンテーション属性は、著者スタイルシートまたは 'スタイル'属性に指定された他のCSSスタイルルールよりも低い優先順位を持っていることを一般的には、このことを意味します。

残念ながら、一部のブラウザでは正しく仕様を実装していないとwindow.getComputedStyleすべての可能なSVG、CSSのプロパティを設定するためのソースには常に考慮されていない：CSSセレクタ、スタイル属性とプレゼンテーション属性。

YUIはに救助に来たおかげでNodeこれらのブラウザの違いを隠すために拡張することができるモジュールです。 Y.DOM.CUSTOM_STYLESとY.Node.prototype.getComputedStyle SVGのスタイルプロパティを読み取るための統一的な方法を提供するために拡張することができます。

拡張`Y.DOM`

YUIは、経由するすべてのDOMへのアクセスをラップNodeインターフェースを提供します。結果として、など、いくつかのSVG特有のDOMメソッドは、 getBBox （SVG要素の境界を計算するために使用）、ラップされたオブジェクトにアクセスすることはできません。

SVGのプログラムに物事を容易にするためには、デフォルトのY.DOMモジュール（これまでの拡張は、 Node使用しています）のいずれかSVG DOMの機能を公開したり、コンテンツを操作する際に一般的に必要とされる便利なメソッドを追加するために追加されました。

firstElement/lastElement/prevElement/nextElement/removeAllChildren （SVG固有ではありません）
getMatrix/setMatrix 。 SVG要素の変換を簡単に操作する方法は、標準のSVG DOMで悪名高い困難な何かを提供しています
getBBox/getViewportBBox要素の座標系でビューポート空間でのバウンディングボックスにアクセスする簡単な方法を提供しています。

loadContent 。 DOMフラグメントを挿入するためのユーティリティは、JavaScriptのオブジェクトリテラルを使用して説明します。たとえば、次のように

 myNode.loadContent（{
    タグ： 'g'は、
    記入してください： '赤'、
    ストローク： 'none'に、
    子供：[{
        タグ： "RECT"
         X：10、
         Y：10、
        幅：200、
        高さ：300
     }、{
        タグ： '円'、
         R：10、
         CX：105、
         CY：155
     }、{
        タグ： 'イメージ'、
         'のxlink：HREF'： '画像/ photo.png'、
        幅：200、
        高さ：'300px '
     }、prevSibling）;

様々なDOM呼び出しを（例えば、製造を簡略化したものですcreateElementNS 、 setAttributeNSとappendChildを作成する） g要素とその子要素をとする前にそれを挿入するprevSibling下myNode 。ユーティリティは、属性と要素の名前空間を扱っています。

タイミングと同期のアニメーションエンジンに追加

アニメーションを含む多くの、そうでない場合、ほとんどの効果は、複数の振り付けアニメーションのインスタンスを必要とします。一般的に、いくつかのアニメーションは、所望の効果を作成するために必要とされ、開始またはアニメーションの終了オフセットを時間と、時にはお互いに依存します。アニメーションを同期する必要があります。

あなたが他の後に1をフェードインする必要がある図形のセットを持っている場合たとえば、あなたはわずかなオフセットと連鎖し、その開始時間を各要素のフェードアニメーションを作成し、する必要があります。

 VARの連鎖= Y.all（ '＃の連鎖サークル'）、
     firstAnim、previousAnim。

 chained.each（関数（円）{
     VARのAnim =新しいY.Animate（{
        ノード：円、
         {'塗りつぶし'： 'ホワイト'}から、
         {'塗りつぶし'： 'グレー'}、へ
        期間：0.25
     }）;
     {（previousAnim！==未定義）の場合
         / / beginingの後0.15秒になるのAnimの開始をSynchrnoize
         /前のサークルのアニメーション（previousAnim）の/。
         previousAnim.onBegin（アニム、0.15）;
    する} else {
         firstAnim =アニム。
     }
     previousAnim =アニム。
 }）;

 / /円のいずれかをクリックした後に最初のアニメーションの1を起動します。
これはしないデフォルトYUIのrunメソッドの拡張であることを/ /メモ
 / /オフセット時間がかかります。
 chained.on（ 'クリック'、関数（）{
     firstAnim.run（1）;
 }）;

参照してください。時間オフセットのテストを。

メソッドonBeginそれが簡単にオフセットを任意の時間で、2つのアニメーションの開始を同期させることができます。実際に、 onBeginまたタイムオフセットを持つ関数を呼び出すことができます。同様に、 onEnd拡張子は、アニメーションの終了と同期することが容易になります。

デフォルトでは、YUIアニメーションを同期する方法を提供するイベントがあります。 onBeginとonEnd方法（簡潔の同様の例を以下に示します）、より簡潔に、同期を表現しています。

また、オフセット時間の経過とともに再び、イベントでアニメーションを同期させるためにいつか必要があります。 beginOnとendOn拡張子は、私たちがいることを表現することができます。たとえば、次のように

 anim.beginOn（Y.one（ '＃ボタン'）、 'クリック'、0.5）;

ID 'ボタン'を持つ要素がクリックされた後、アニメーションの0.5秒を開始します。これは短い手です。

 Y.one（ '＃ボタン'）（ 'クリック'、関数（）{上の
    たsetTimeout（500 / *ミリ秒* /、関数（）{anim.run（）;}）;
 }）;

アニメーションクラスに対して行われた最後の拡張子は、それが実際に開始される前に、アニメーションオブジェクトは、その最初のフレームの状態を適用する能力であった。異なる時間オフセットから開始し、複数のアニメーションを含むアニメーション効果を作成するときに、これはしばしば必要とされる。

 VARのAnim =新しいY.Animate（{
    ノード：Y.one（ '＃ボタン'）、
    から：{R：30、 '塗りつぶし不透明度'：0、カラー： '深紅'}、
    へ：{R：80、 '塗りつぶし不透明度'：1、カラー： '金'}、
    期間：0.25
 }）;

 / /以下は、前にターゲットオブジェクト上で目的の状態を設定します
 / /実際にアニメーションを開始する。
 anim.applyStartFrame（）;
 anim.run（2）;

画像shuffleのデモでは、写真のスタックを広げる、またはスタックに戻す画像を置く効果をアニメーションのオフセットを使用しています。

結論

SVGとYUIを使用した作業、特にYUI 3は、非常に楽しい経験をされています：YUIの機能の多くは、箱からSVG右へ適用され、YUIの拡張可能なアーキテクチャは、それが可能で時折問題を回避し、必要な機能を追加しました。

もちろん、YUIのSVGの増加の標準サポートは、特定の一人でSVGドキュメントをスタンドでYUIの仕事を作り、作る際に、参考になるNode回避策はなく、クラスのラップSVG要素を。

参考になるいくつかの拡張もあります。アニメーションは複数の要素をターゲットにできれば例えば、それは役立つだろう。同様に、複数の値を（のようにサポートすること<animate>例えばSVG要素）をより洗練されたエフェクトを作成するために役立つだろう。

SVG-wow.org上のデモはYUI 3.1に書かれており、このブログの目的のために3.2に移植されました。 3.2では、遷移はネイティブの使用している導入されたCSSトランジションのブラウザで利用可能な場合。また、パフォーマンスの向上をもたらすべきである利用できる（この記事の執筆時点でオペラは、FirefoxとWebKit）と同様に活用するSMILアニメーションにYUIのアニメーションエンジンのために可能であるかもしれません。

SVG-wow.orgウェブサイト上のSVG拡張機能は、YUI 3ギャラリーモジュールとして利用可能です YUIとSVGでの作業の楽しさを満喫したい人のために。

参照

SVGうわー！
SVGの仕様
SVGのチュートリアル
AdobeのSVGゾーン（少し古いですが、それでも良い例があります）
carto.netの例
KevLinDev

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

2010年10月15日のために野生の

10時03分に2010年10月15日には、Eric Miragliaによって午前|で野生の | 2コメント

YUIConf 2010右上隅の周りで、我々はそのイベントと今後のYUI 3.3.0リリースに取り組んでダウン私たちの頭を持ち続ける。その間に、ここで我々は過去数週間のコミュニティに記載されたものです。私たちに知らせて@ yuilibrary我々は逃したもの（または、コメント欄で）！

アンドリューウールドリッジ、 "学習YUI：PT。 2 -ロギングのコミュニティ、およびコンソール" ：学習YUI "ブログ·シリーズアンドリューウールドリッジ（@トリプティック）は彼の新しいのパート2に戻ってきた"。私が特に好き（と同意）YUIコミュニティの彼のテイク： "一言で言えば、 コミュニティは YUIはJavaScriptライブラリとして私に目立つものは本当にです。あなたはYUIで作業支援が必要な場合は、あるコミュニティフォーラム、 IRCチャネルと同様に、営業時間は、YUIの開発者と直接対話することができます。あなたは、スマートの人々の有用なグループを発見するので、私は特にIRCチャネルで 、あなたは初期の段階であなたの学習体験で接続されてしまうことをお勧めしますそこにたむろし、任意の質問、どんなに一見平凡に答えるために喜んでいる。また、従うべきyuilibraryをあなたがそこに最新のYUIのニュースにタップされるように、Twitter上で" 詳細については、完全にブログの投稿をチェックアウト。私はパート1をカバーし、列"野生の"前で。＃
NetTutsにYUI 2グリッド上でアンドリュー·バージェスの"クラッシュコース" ：YUI 2グリッド上のアンドリュー·バージェスの"クラッシュコース" は、まず昨年五月に記載され、されていますNetTutsによってピックアップしたものに注目の新しい波をもたらしている歴史的にYUIの最も人気のあるプロジェクトの一つである。＃
GoogleスプレッドシートとYUI3とブログロールを作成します：アンドリュー·ウールドリッジ（@トリプティック）は一緒にYUI 3とGoogle Docsを結びつける、新しいエントリでYUIの3に焦点を当てた記事の彼のシリーズを続けています。 "私はそれを認める：私は触発されたこの記事 Codeinfront.comで。誰もが共有、更新、およびから学ぶことができるコードのスニペットを作成するためのアイデアは、単に非常に魅力的で喜ばしいことです。だから、私はあなたにあなたが考えたことがないかもしれない何かを提供します。あなたは、JSONデータソースとしてGoogleスプレッドシートを使用することができます。 YUI3のJSONPモジュールは、このJSONデータ·ソースへの非常にきれいに話し、あなたが本質的にデータを駆動し、まだあなたは、複雑なPHPのMyAdminセットアップまたはMySQLデータベースを持っている必要はありませんできるサイトを作成することができます。あなたは、すべてのクライアントサイドの技術やGoogleスプレッドシートからいくつかの助けを介してそれを行うことができます。あなたは、Gスプレッドシートのフォーム機能と組み合わせる場合は、あなたも、あなたが作成し、いくつかの調査に基づいてクールレポートページを作成することができます。コードに降りてみましょう。 "コードに降りてココのブログ記事で＃
YUI 3を使用してビデオのリミックスサイトDragontape ：ビデオリミックスサイトDragontapeはYUI 3の広範な使用を行っています。ここでは、サイトの作者がプロジェクトを説明する方法は次のとおりです。 "Dragontapeは、あなたのお気に入りのオンラインビデオのミックステープを作成することができますWebアプリケーションなので、連続的なショーとしてそれらを見ることができます。作成したテープは、単一のURLを介してアクセスされるので、簡単に友達と共有したり、Webページにそれらを埋め込むことができます。ソースクリップがDragontapeは、単にどこにそれらを見つけるために覚えて、元の場所に残っています。 " ＃
エリック·エルドリッジ、 "ヤフーのログインのための簡単なYUI 3モジュール" ：YDNエバンジェリストエリックEldrigeはどのように活用するYUI 3、簡単かつ効率的にYahoo!のOpenIDのシステムに示します。自身のブログで素敵なチュートリアルを書きました。エリックは書いている： "見てYDNサイトにOpenIDのランディングページがヤフーIDを使用してサイトにユーザーを記録することが困難であるという印象を与えるかもしれません。次の条件が与えられた、しかし、あなたのサイトにヤフーのログインを追加する非常にシンプルにすることができます。
1. 我々は唯一のYahoo!のアカウントを対象にしているので、https://open.login.yahooapis.com/openid/op/authにプリセットされたログインの場所ができます
2. 我々は、ポップアップ経由でユーザーをログインさが、親ページ上のJavaScriptを経由してすべてを管理している場合、私たちは "ヤフーから戻ってくるレスポンスの検証をスキップすることができます
ここで完全なチュートリアルを見つけることができます。＃
偉そうに、リード·バークによる新YUI 3パワードHTML5プレゼンテーションシステム： @ Reidさんはちょうどこのプロジェクト進行を取得しているが、すでに好きに多数あります。過去数年間に発売された標準ベースのプレゼンテーションツールのシリーズの後を継いで、舞台後方には、ジャンルにYUI 3ひねりを入れます。コードはGitHub上にある - ダウンロード、フォーク、そして楽しみを持っています。（オリジナルのソース。）＃
YUI 3、YQLのシンプルなTwitterのウィジェット（@ codeinfrontによる）：@ codeinfront TwitterのマッシュアップにYUI 3、YQLを使っての新しいチュートリアルを投稿しています。 "プロジェクトの間の間、私は相対的な時間への変換を含む、JavaScriptの日付で遊んできました。そして、これはTwitterのウィジェットのコンテキスト内で機能をテストに私をリードしています。私はYUI 3とYQLを使ってTwitterのウィジェットになってしまった。以下のコードは興味深い概念のいくつかを探る... " 完全な詳細についてはブログ投稿をチェックしてください。＃
"YUI、どのように私は再考を確認デア..." ：ミシガン州の技術屋は、YUI 3は悪い習慣を破るように設計されている書き込み、新しい、できればよりよいコーディングパターンを見つけるために彼に挑戦します。 "あなたがYUI3使用するときは、YUI（）を持っています。（）を使用し、すべてはコードのそのビット内にカプセル化されます。私はYUIブロックにMyAppのコードを移動した場合ので、私はもはや私がJSを実行したいコンテンツのページからアクセスすることができるよん。ので、これはありませんJSのグローバル、良いですが、それは悪いです...方法は、私は物事を行ってきません。 "あなたはMTの見ることができますここで完全なひらめきを。＃
Jeez.euはYUIを使用したカスタム検索エンジンの構築に：カスタム検索エンジンを構築することにJeez.euのチュートリアルをYUI 2ウィジェットとユーティリティに大きく依存しています＃
@ codeinfrontからNode.jsのリソースリストには、クロックフォード、DAVガラスが含まれています：BloggerのマークRall（@ codeinfront）は彼のお気に入りのNode.jsの関連リソースのセットをまとめた。それらの間の鍵は、ダグラス·クロックフォードとDAVガラスからの最近の二つのYUI Theaterの会談があります。彼の他のお気に入りの、彼のブログに上のヘッドの場合。＃
ErisDSは、2.8.xのための彼女のカルーセルカスタムナビゲーションの例を更新しました：ノーザンプトンブロガーErisDSはYUI 2.8.x.をサポートするために、YUI 2カルーセル用のカスタムナビゲーション彼女の仕事を更新しました "昨年私はYUI 2.7.0カルーセルで働いYUI2カルーセルウィジェットに3部構成のチュートリアル（DOH）の二つの部分を公開しました。その時以来、YUI2の新しいバージョンの新しいカップル：カルーセル·ウィジェットは（2.8.0および2.8.1）をリリースし、それは私の例では、更新されたコードでは動作しませんようされています。この記事は、問題が発生する理由とその解決方法をカバーしています。 " ここで完全なポストをチェックアウト。＃
今週のつぶやき：から@ bartt ： "クライアントとサーバの両方で＃YUIを使用することができることはとても素敵です。 JavaScriptの+フェンスの両側には私のお気に入りのライブラリ！==コンテキストスイッチ。 " ＃

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

YUIConf 2010：早期鳥の登録は今週で終了

中| 9時03分に2010年10月7日には、ジェニー·ドネリーによって午前の開発、 YUIイベント | 2コメント

素晴らしいラインナップのための場所でYUIConf 2010この11月8日から10日までYahoo!のサニーベール、カリフォルニア州のキャンパスで開催されます。ダグラスクロックフォードは、 "プロジェクト未来"と題する新しい話を戻すとなり、ディオンAlmaerとベンガルブレイスは、規律の将来についてパネルの司会をされます。我々は、YQL、NodeJS、とYUIにまたがる話題、今年表彰台を取って、キリスト教のハイルマン、DAVガラス、ニコラスZakasなど、スピーカーの恒星のラインナップがあります。

YQLの紹介
YQL + YUI：建物エンドツーエンドのアプリケーション
YQLとYQLオープン·データ·テーブルを構築することは実行
データのフィルタリングと照合、キャッシングのために（悪用されません）YQLを使って
NodeJS + YUI 3
サーバーまたはブラウザのサイドビューのレンダリングのためにNodeJSとYUI 3を使用して
サーバサイドJavaScriptを使用してスパゲッティコードを回避する
YUIとプログレッシブ·エンハンスメントを理解する：よりを書き、多くを達成
YUI 3を使用して国際化アプリケーション
エディタ：次世代
オートコンプリート：ディープ·スペース·ナイン
アイデアからYUI 3ウィジェットに機能への旅
指のヒント：タッチベースのエクスペリエンスの構築から学んだ教訓
とはるかに、はるかに！

35ドルの早期鳥率を受け取るために今週にサインアップしてください。 10月8日の後、チケットは50ドル。

ベイエリアの外からの旅行の人々のために、私たちはカップル近くのホテルで利用可能ヤフーレートしてきた。チェックアウトhttp://yuilibrary.com/yuiconf2010/の詳細については、。

ディオンAlmaerのCC写真を Flickrのseanoshによって。

更新日：早朝の価格が間違っていました。チケットは10月8日を通して35ドルを要した。

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

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

通常の修正：

既知のフィックスは、短い障害が発生した場合

IE 6は、大きな男の子のように振る舞う作る

ライブデモ

修正せず

修正を含む

考慮すべき事項

概要

最初の試み

2つを取る

教訓

仕事でYUIを学ぶ

結論

YUIConf 2010パネルディスカッション： "Web開発の未来"ベンガルブレイスとディオンAlmaer司会 2010年11月8日、6:30 -午後8時

YUIConf 2010基調講演：ダグラスクロックフォードによる "プロジェクト未来" 2010年11月10日、6:30 -午後8時

CCの写真：

親切な許可によって使用される写真：

はじめに

SVGの概要

SVGとHTML

SVGとYUI

YUIとSVGのアニメーション化

SVGアニメーションをtransform属性を

ジオメトリをアニメーション化

基礎幾何学

<path>のd属性

他のSVGの属性をアニメーション化

CSSプロパティをアニメーション化する

YUIとSVG：ボンネットの下に

SVG DOM特異性に関する会計処理

ブラウザの違いの会計処理

拡張Y.DOM

タイミングと同期のアニメーションエンジンに追加

結論

参照

TwitterのYUIライブラリ

翻訳する

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

ブログロール

ポリシーのコメント

ヤフーになる

メタ：

YUIConf 2010パネルディスカッション： "Web開発の未来"ベンガルブレイスとディオンAlmaer司会
2010年11月8日、6:30 -午後8時

YUIConf 2010基調講演：ダグラスクロックフォードによる "プロジェクト未来"
2010年11月10日、6:30 -午後8時

SVGアニメーションを`transform`属性を

`<path>`の`d`属性

拡張`Y.DOM`