Yahoo!用戶界面博客（YUIBlog）

CSS快速提示：如何防止在IE6中的“浮動下降”

10月28日，由Thierry Koblentz 2010 1:52 PM | 101的CSS ， 發展 | 4評論

儘管這種行為通常被稱為“ 浮動下降 “或”降浮“，下降並不一定是一個浮動的列...它只有比為它分配的空間更寬。 請注意，這是規範和它是一個跨瀏覽器的共同行為;如果一列是“太寬”，那麼它就會下降。

是什麼讓IE 6中脫穎而出的，是該瀏覽器不完全支持的width屬性（也為此事height ）。 因此，它可以讓容器增長，以適應其內容。 正是這種增長，創造了下降，因為盒子不能融入其設計的空間。

通常情況下，罪魁禍首是不換行（如圖片，網址等）的元素，但字體樣式（例如， IE瀏覽器和斜體 ），可能是太負責。

例如，使右列下拉YUIBlog在IE 6中，我不得不這樣做是在正確的軌道寬度大於210像素的圖像風格。 該圖像迫使IE 6中增加右列的寬度，然後可以不再適合未來的左欄。

通常的修復：

word-wrap: break-word;

字符串包裹打破框的右邊緣。

wbr wbr:after {content:"\00200B"}歌劇

wbr元素代表一行破門良機 。 插入wbr的內線長串，允許瀏覽器添加一個換行符，如果需要的話。

overflow-x:hidden;

比容器中的任何內容廣泛，是切斷說框的右邊緣。

請注意這兩個第一個解決方案，只對字符串和擴大框不會阻止圖像等。

當著名的修復失敗，短

幾個星期前，有人問我修復雅虎財經網頁上的“浮動下降”。 在現代瀏覽器，一個長字符串， 堅持正確的軌道 （截圖），但在IE 6相同的字符串右列跌幅低於倍 （截圖）。 不幸的是，這些內容來自一個供應商，所以編輯的標記是不是一種選擇。

因為字符串，這是一個逗號分隔的列表符號的性質，上述修正並不令人滿意。 在任意一個地方打破該名單是比它更好，但仍然沒有一個可行的解決方案......

使IE 6的像大男孩

使IE 6的把戲就像任何現代的瀏覽器有風格與負的右邊緣（加方塊的position:relative ）。

現場演示

未經修補程序

對於那些沒有看到這個網頁在IE 6的截圖 。

與修補程序

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

切緣陰性，可以是任何值，只要這個值是大於三角洲之間的分配寬度和擴大中的實際寬度。 這是該聲明，以防止下拉浮動。 的position:relative目的是使IE瀏覽器顯示的父容器的邊界之外的內容。

相同的一刀切的風格元素，因為我喜歡，我通常不沙箱這個規則。

需要考慮的事情

本hack保持列，但它不會阻止從該容器中越來越大。 這意味著你不能風格的背景或邊界的元素，因為他們將被包裝外畫。 這裡有一個看起來像什麼背景和邊框​​的組合使用時，應用這項技術在IE 6的截圖：

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

jQuery和YUI 3：兩個JavaScript庫的故事

10月27日，2:08 PM 2010年由馬克·拉爾在發展中， YUI實現 5評論

最近我有機會來建立我的第一個JavaScript前端應用。 下面是一個試圖使用工具，不適合於手頭的工作時，發現和演化的短篇小說。 這是一個通過收購發展相同的前端應用程序使用兩個非常不同的庫，jQuery和YUI 3學習的帳戶。 客戶和項目的詳細資料已被故意省略。

概觀

該項目涉及到一個單一的大型內容出版商的開放標準為基礎的互動應用的幾個不同的Flash工具的重構。 應用程序的高度重視，要高度優化，由於每天的網頁展示的大量客戶端收到一個小的初始腳印。 涉及幾個階段，首先是觀念的初步證明。

這個概念所涉及的發展之一，將填妥的申請。 它包括：

• 一個初始種子文件（<1KB）負責動態加載任何框架（如jQuery或YUI 3）和初次申請文件。
• jQuery插件的開發和列入支持表單元素的造型和驗證，動態圖表可視化。
• 代和人口的用戶界面，根據用戶的輸入，默認配置在出版商的網站和應用程序的位置。
• 根據用戶的輸入信息的計算和演示。

在充分披露的利益，我自己的經驗，這一點已經在開發小型，獨立的解決方案，其中通常可以作為插件描述的類型。 這些措施包括圖像旋轉木馬，交互式地圖和Twitter / Flickr的的部件，如動態UI組件。 在第一次涉足使用JavaScript時，jQuery的流行，簡單易學，並允許我趕緊拿起我工作的項目所需的基本知識。 然而，這些都是獨立的單位，有沒有必要進行互動與其他代碼或作為一個更大的應用程序的一部分。

第一次嘗試

在完成該項目的第一階段，它成為痛苦明顯，我比我用來處理一個非常不同的野獸。 有代碼組織中的一點經驗，我的代碼很快變得混亂，效率低下和重複。 因此，什麼會成為一個更大的應用程序的第一部分是緩慢的加載。 事實上，它花了8秒，產生單一的概念證明。 一個大的變化是必要的，而我曾考慮使用像小型圖書館院長愛德華基地或John Resig的簡單的JavaScript繼承模式，基於類的繼承添加到jQuery，我決定走一步。

我想要的是一個完整的，成熟的框架內發展我的第一個面向對象的應用程序。 將有效地引導整個過程我的事。 在檢討現有的圖書館，我決定採取3 YUI的，理由如下：

• 集成的，基於繼承的應用程序開發支持，包括屬性和一流的管理。
• 長遠的解決辦法：
  • 支持標準和無障礙。
  • 資助一個眾所周知的大型組織，雅虎
  • 像受人尊敬的名字道格拉斯克羅克福德 ， 尼古拉斯的Zakas ，和斯托揚STEFANOV的的關聯。
• 性能優化：
  • 只有7KB的初始種子文件。
  • 懶加載的模塊需求。
  • CDN傳輸功能。
• 多樣的和全面的文件：
  • 雅虎開發人員網絡
  • YUI的3 API文檔
  • 銳劇院
  • YUI庫
  • 銳博客
• 成熟的，一致的版本之間的進化。
• 在集成工具YUI的壓縮機 ， YUIDoc ， YUI的生成和控制台 。
• 不只是JavaScript，CSS框架。

採取兩種

整合銳3帶來了幾個項目的直接和間接的好處：

• 基於繼承的架構和一流的管理，通過屬性界面， 基地 和 Widget類，生產高性能，可重用的和有組織的代碼。
• 分離使用的模型和數據介紹部件類提供備用的意見（inline或覆蓋）的基礎上應用程序的站點內的位置。
• 沙盒和動力模塊通過YUI.use（）列入。
• 跨瀏覽器的控制台調試使用YUI控制台 。
• 在保存，在Eclipse中使用YUI壓縮機的性能優化。
• 容易包容和整合現有的jQuery插件。
• 在保存，自動代碼文件的使用YUIDoc 。

最終的結果是一個快樂的客戶端和亞秒級的負載時間（記住裝載的概念的初步證明了8秒）的成品。

經驗教訓

選擇合適的工具

在閱讀這篇文章，我敢肯定，有些讀者會看作反jQuery的。 不盡然。 jQuery是一個奇妙的項目負責許多創新。 但是，正如任何工具，它有它的長處和預期的目的。 它的力量在於正常化的瀏覽器不一致，降低了新手進入門檻和提高效率，有經驗的程序員。 來到了該項目的主要的學習，你可以不依賴於每一項工作的工具之一。 YUI的基礎上還提供一個架構的應用程序框架jQuery可以提供。 但它是公平地說，它在付出一定的代價，看到下一個點。

陡峭的學習曲線

你需要耐心，尤其是當一個陌生的圖書館，像我一樣寫你的第一應用。 然而，其回報是巨大的。 另一個庫通過學習，不僅將您的JavaScript核心技能提高，您還可以建立一個圖書館如何工作以及它們帶來的好處有更深的了解。 我嘗試新的東西有關YUI的日常學習和我學到的更多，更多，我在思想和純粹的人才，這是銳打造了敬畏。

只加載的內容，當你需要它

雖然它肯定是編程容易，只是加載所有你可能需要的前期，獲得的性能改進的延遲加載內容的直接結果，只有當你需要的是巨大的。 這是大大改善了應用程序的性能的關鍵因素之一。

盡可能少的與DOM交互

這一點，並不涉及到所使用的特定庫。 通過緩存所需的DOM元素和利用更多的HTML模板，UI的渲染時間大大下降。 節點可以被緩存節點列表可以捕獲使用Y.all（）在使用Y.one（）。 也Y.Node.create（）是非常有用，有效地轉換大量的HTML文本字符串，DOM元素之前插入。

通過例子來學習，使用了CDN

在使用YUI的CDN提供的庫，我們決定提供通過CDN的項目的所有資產。 這可能是下一個最大的因素，性能的改善。

酒吧，喧嘩子

對於那些有經驗的程序員，盡量不要在這一個笑。 經書面比插件更小，在過去，我不知道，應用程序應如何內部溝通。 即使看完“自定義事件，讓你發布有趣的時刻，或在自己的代碼的事件，使頁面上的其他組件可以訂閱這些事件並響應他們，”我還是錯過了。

事實證明，YUI的自定義事件的發布和訂閱模型精美的作品跨類和對象間的通信。 你甚至可以認購前後的事件和動態邏輯壓制冒泡，根據一定的條件。

融入您的工作流程的最佳實踐

使用Eclipse，我們能夠融入生成過程JSLint和YUI壓縮機。 簡單地說，每一次你打按Ctrl / Cmd + S的JavaScript代碼進行驗證和優化。 這意味著你對測試優化，生產高檔代碼從代碼的第一行。 這也意味著，你不會忘記，以優化在瘋狂的交貨期限的最後一場比賽。

在工作​​中學習銳

雖然每個人都有不同的學習風格，我想我會分享我用什麼樣的資源學習YUI的具體目標在心中。

• 觀看有關YUI的戲劇情節，得到一個圖書館的一般概述，或學習一個特定的模塊。 我強烈建議開始：
  • 埃里克·米拉利亞歡迎銳3
  • 托德Kloots銳3糖
  • 馬特·斯威尼的銳3性能
  • 盧克·斯密的調試銳3
  • 艾薩克Schlueter使用YUI 3對解決問題
  • 埃里克Ferraiuolo 3 YUI的Web應用程序開發
  • 盧克·斯密的活動演進
• 閱讀上銳雅虎 開發人員網絡 。 我嘗試每星期讀一點點，和學習更多的每次我重新讀它。
• 閱讀API文檔。 如果你不能找到銳劇院或開發網絡​​，深入的API。 它甚至還支付直接讀取代碼。
• 閱讀和發布問題上YUILibrary.com論壇 。
• 玩了很多，玩得開心！

結論

YUI 3是一個全功能的，成熟的和不斷變化的庫適合小型到大型項目。 作為前端Web應用程序變得更加複雜，需要像YUI的圖書館將增長。 雖然它的門外漢可以在第一個艱鉅的經驗，如果你堅持下去，你會得到回報。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

YUIConf 2010出賣;公佈兩個傍晚特別活動

10月26日，於下午3時35分2010年由珍妮·唐納利|在發展 ， YUI活動 | 評論關

YUIConf 2010年銷售一空！ 謝謝大家誰登記 - 我們期待著看到你在十一月。 我們現在把我們的計劃進行最後的潤色，但你可以在這裡有我們在商店偷看： http://yuilibrary.com/yuiconf2010/schedule.php 。

要點包括：

• 一個Node.js的跟踪，您可以在坡道上所有令人興奮的事情發生在服務器端JavaScript。 我們提出Node.js的創始人瑞安達爾和坐在一個關於未來的前端工程小組，我們有DAV玻璃，YUI的第一個證明，基於節點的逐步增強，使用現成的庫組件（從銳3），顯示未來的樣子。
• 一個YQL的軌道，讓你加快對如何利用YQL的訪問來自任何地方的數據，在互聯網上。 YQL的球隊本身將手頭上告訴你他們的最新作品。
• 案例研究，揭露現實世界中的項目實施銳在苛刻的生產環境。 從Flickr和Yahoo! Mail的工程師們將手頭上， -為他最近的工作PayPalX獎獲得者-埃里克Ferraiuolo將在這裡約說話提示的網站 ，他的最新銳3為基礎的項目。
• 如何提供移動/觸摸經驗的精闢演講。
• 深海潛水YUI的模塊，自動完成CSS網格廊貢獻。

所有會議都將被歸檔視頻和可用銳劇院會議結束後不久。

我們很高興加入雅虎開發者網絡的力量，舉辦兩個傍晚特別活動，這將是向公眾開放。 所以，雖然會議已經賣完了，任何人都可以參加晚上的事件在Meetup.com簽署。 空間是有限的，所以很快簽署了！ （YUIConf與會者不需要簽署。）

YUIConf 2010小組討論：“未來的Web開發”，由本·加爾布雷思和Dion Almaer主持
2010年11月8日，6:30 -晚上8點

報名參加小組討論http://www.meetup.com/BayJax/calendar/15239592/ 。

YUIConf已經匯聚了這一傑出的面板探索不久的將來在一個巨大的變化時的紀律。 定小組成員包括伊萊恩惠裡​​，Meebo的創始人和前端架構師道格拉斯·克羅克福德，在Yahoo!的JavaScript架構師Tantek切利克，技師和作家;瑞安達爾，Node.js的創始人喬·休伊特Facebook的Firebug的創始人之一下載次數最多的移動應用程序的所有時間（Facebook的內部監督辦公室）;在雅虎的創始人托馬斯·沙，YUI。

YUIConf 2010主題演講：“未來計劃”由Douglas Crockford
2010年11月10日，6:30 -晚上8點

註冊參加在基調http://www.meetup.com/BayJax/calendar/15239717/的 。

在軟件開發中，我們的夢想架構。 這是一個真實的故事這樣的夢想。

座位有限，所以這些特殊事件，一定要盡快簽署了！

消委會的照片：

• 翁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/

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

公佈銳2.8.2 -銳2.4.0-2.8.1所有用戶的重要安全更新

2010年10月25日，11:34上午由埃里克·米拉利亞| 開發 | 6評論

YUI團隊發布了YUI的2.8.2今天。 此版本修正了與安全有關的缺陷銳2 Flash組件的YUI 2.4.0發布的基礎設施開始推出。 這一缺陷允許JavaScript注入攻擊可以對域創建主機YUI的影響.swf文件。 銳2.8.2訪問有關如何識別和替換受影響的文件的全部細節的安全公告 。

如果您的網站承載一個YUI 2.4.0和2.8.1版本之間的分配，包括這些文件，它不受此漏洞影響。

如果你的站點載入從雅虎的CDN（銳yui.yahooapis.com ）或從谷歌的CDN（ ajax.googleapis.com ），文件上沒有自己的域名託管，你不會受到影響。 銳3不會受到這個問題。

你可以下載2.8.2（銳2.4.0-2.8.1補丁版本），銳YUILibrary.com下載頁面 。

有關如何確定您的網站是否會受到影響，如何解決這個問題，以及如何驗證該修補程序的信息，請參閱安全公告 。

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

在YUI 3畫廊：SVG的擴展，創建SVG的哇！

2010年10月18日，11:18上午由Vincent強壯，在發展中， YUI 3圖庫 | 2評論

介紹

SVG（ 可伸縮矢量圖形 ）提供了一個互動，動畫2D圖形的聲明語法：形狀，圖像和文字。 SVG支持的HTML 5規範的一部分，和SVG是由所有主要瀏覽器，包括微軟的Internet Explorer中執行第9版 。

SVG-wow.org什麼可以用SVG今天所做的網站展示。 本網站上的演示創建了SVG的開放式會議，其中SVG的哇！ 會議已經好幾年的傳統。 SVG的哇！ 會議由院長傑克遜開始，然後在與自己的合作，然後通過繼續埃里克Dahlstrom 。 Erik和我已經collorated的會議上為2009年和2010年的版本的會議。

在過去的兩年中，越來越多地用於演示AJAX框架，其功能應用到SVG，而不是（或除了）的HTML。 YUI的網站上，同時使用最廣泛使用的框架YUI的2和YUI 3 。

我將開始與快速SVG概述，然後討論，YUI的支持， 我已經添加到了YUI 3畫廊的擴展 ，使其工作與SVG類型的演示。 （現在這些擴展YUI的BSD許可證的條款下自由使用。）

SVG的概述

如HTML，SVG是W3C規範。 它提供了一個用於描述基本形狀（矩形，圓，線，多邊形，橢圓，折線），任意形狀（可以是線條，二次或三次Bezier曲線路徑段所述），文字和圖像的語法。

下面的圖像是一個屏幕捕獲SVG-wow.org備用樣式表的例子 ，並顯示在播放一些SVG的特點：豐富的渲染（陰影效果，漸變，圖案）和簡單的和複雜 ​​的形狀。

因為SVG圖像幾何和渲染屬性的定義，它有可能使他們在任何決議。 因此，SVG圖像可以縮放到任意大小，同時保持高的渲染質量，例如，在打印時（沒有更多的鋸齒邊緣）。

以下放大視圖中顯示相同的SVG圖像顯示，但呈現在一個更高的分辨率，同時保持高品質。

就像HTML，SVG支持互動：鼠標或鍵盤交互的圖形對象添加事件監聽器，它是可能的。 當然，SVG的支持，這使得它易於操作的圖形對象的不同屬性，例如其幾何形狀或渲染風格，文檔對象模型。

是SVG規範的很多先進的渲染風格（描邊，填充，圖案，漸變），濾鏡效果（模糊，陰影，色彩矩陣），CSS樣式，先進的文本功能（如路徑上的文本）和聲明動畫。 您可以檢查出在這個職位的參考，更了解SVG格式的功能。

SVG和HTML

有了HTML5 ，SVG可以在HTML文檔內聯事不宜遲。 瀏覽器開始支持該功能（例如， 火狐4 ）。 其時，所有主流瀏覽器支持XHTML中內聯SVG的，它提供了相同的功能。 在XHTML中的SVG只是需要正確聲明命名空間。

 <html xmlns="http://www.w3.org/1999/xhtml">
     <HEAD>
         ....
     </ HEAD>
     <BODY>
         <H1>內聯SVG </ H1>

         <SVG的xmlns =“htt​​p://www.w3.org/2000/svg”版本=“1.1”
          XMLNS：XLINK“http://www.w3.org/1999/xlink”
         寬度=“100％”ID =“100％”的高度=“backgroundSVG”>
             <！ - 這裡SVG內容 - >
         </ SVG>
     </ BODY>
 </ HTML>
        

所有此頁面上的代碼示例使用這種方式在XHTML中的內聯SVG的。

SVG和YUI

SVG支持聲明性動畫。 例如，你可以這樣一個半徑<circle>元素的動畫：

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

<animate>標籤從SMIL規範是借來的，連同其他動畫元素，它提供了一個非常強大的動畫引擎，為SVG。

不幸的是，直到最近，瀏覽器支持SVG動畫稀疏。 它比過去兩年有所改善，但微軟已經明確不會支持聲明在IE 9 SVG動畫。

因此，大多數對SVG-wow.org網站，演示使用，而不是聲明動畫腳本動畫。 一方面，這是不幸的，因為聲明的動畫比腳本動畫更有效。 上檔，腳本動畫可以非常靈活，他們很好地工作在各個實現。

一個很好的腳本動畫解決方案的需求是什麼驅使上使用YUI的SVG-WOW演示。 然而，演示還使用其他YUI的功能，尤其是裝載機和節點模塊。

動畫使用YUI的SVG

在演示SVG-WOW使用YUI創建彈性的鼓聲 ， 變形形狀或旋轉文本和形狀，例如。 使用SVG的銳需要幾個YUI的擴展，一會兒就好了，我將描述這些。

旋轉文本和形狀	變形形狀
彈鼓聲

下面舉例說明如何銳就派上用場了簡單的動畫和操作SVG圖形。

動畫SVG transform屬性

所有的SVG圖形元素有一個transform屬性。 該屬性指定一個二維仿射變換的元素，它可以用來縮放，傾斜，旋轉或翻譯。

SVG-wow.org YUI的擴展允許對SVG動畫transform這樣的屬性：

阿尼姆=新Y.Animate（{
    節點：'＃circleA“
    從：
        變換：{TX：0，TY：0，SX，SY：2}
     }，
     ：{
        變換：{TX：20，TY：20，SX：1，SY：1}
     }，
     transformTemplate：“翻譯（＃TX，TY＃）（＃SX，SY＃）規模”，
    持續時間：1
 }）;
        

變換動畫測試。

你會注意到，在“組件”（如變換值定義tx或ty ）相結合，形成一個價值，使用transformTemplate動畫配置對象上找到。

模板是一個靈活的機制，建設改造的價值，而單獨的組件可以很容易地計算動畫值。 這是一個例子，YUI動畫模型允許更大的靈活性（和更多的表現力）比SVG的SMIL的動畫元素（ animateTransform ）。 為了創造上述動畫，相當於SMIL的聲明本來：

 <circle ...>
     <animateTransform的attributeName =“變換”類型=“翻譯”
                       =“0,0”=“20,20”DUR =“scaleAnim.begin =”1“開始”/>
     <animateTransform ID =“scaleAnim”的attributeName =“變換”類型=“規模”
                       =“2,2”=“1,1”DUR =“1”開始“無限期”/>
 </圈>
        

注意上面的片段需要的多個animateTransform元素必須同步： begin的第一個動畫的屬性設置為scaleAnim.begin同步開始的兩個動畫。 YUI動畫引擎的一個不錯的功能是可以共享，適用於多種元素的屬性，動畫的時間（即開始，結束及持續時間）。

YUI的擴展為動畫SVG的變換被廣泛使用，如在相機和動畫歌詞的例子。 前者使用YUI的延伸，而後者則使用YUI的擴展。

動畫幾何

基本幾何

使用YUI動畫SVG的幾何是很簡單的。 下面的例子動畫一個<rect>元素的寬度，高度和圓角半徑：

阿尼姆=新Y.Animate（{
    節點：“＃直腸，
    從：
        寬度：200，
        身高：100，
         RX：5
         RY：5
     }，
     ：{
        寬度：300，
        身高：100，
         RX：10
         RY：10;
     }，
    時間：2，
    寬鬆：Y.Easing.elasticOut
 }）;
        

看到形狀動畫測試。

稍後討論，銳罩下的一些變化做這項工作。 但是，從開發商的角度來看，這個動畫作品相同的方式，為任何其他HTML屬性或CSS屬性的動畫。

<path>的d屬性

一個幾何屬性是有點特殊d d屬性<path>元素。 <path>元素用於任意複雜的幾何形狀。 一個<path>可以描述任何形狀。 其d屬性描述其幾何路徑線段可以是直線，圓弧，二次或三次Bezier曲線 （有幾個命令，但他們都映射到Bezier曲線）。

動畫d d屬性，也需要一個位擴展YUI的動畫引擎，但d d屬性與擴展，可以像其他任何動畫，如下所示。

阿尼姆=新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動畫
阿尼姆=新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的
阿尼姆=新Y.Animate（{
    節點：“＃直腸”
     ：{'中風dashoffset“的：0}，
    時間：0.25
 }）;
        

中風動畫測試。

graffitis演示使用這種技術（即使沒有YUI的動畫），使相機演示（這與YUI的動畫時間）。

YUI和SVG：引擎蓋下

SVG-wow.org網站同時使用YUI 2和YUI 3和SVG特定的擴展。 本文的以下部分，重點對YUI 3擴展。

擴展需要：

• 銳與SVG的DOM的具體工作
• 為實施差異帳戶
• 添加新的屬性類型，如SVG的轉換支持
• 增加額外的動畫定時和同步功能

為SVG DOM的具體會計

如前所述，SVG的屬性，可以聲明性元素，如<animate>動畫。 為了支持SVG的動畫模型，SVG屬性值保持動畫和基值。 例如，屬性上r r <circle>元素是定義SVGAnimatedLength如下：

接口SVGAnimatedLength {
   ReadOnly屬性SVGLength baseVal;
   ReadOnly屬性SVGLength animVal;
 };

因此，即使在不支持聲明性動畫的實現，我們需要達到的baseVal讀取屬性的值：

 VAR圈=（'＃myCi​​rcle'）;
右值= baseVal.value。circle.getAttribute（'R'）;

擴展需要考慮允許的SVG屬性的不同尋常的價值模型動畫引擎。 值得慶幸的是，YUI 3的動畫行為的概念。 行為本質屬性的具體掛鉤，這是很容易的添加處理SVG屬性值的支持。 例如， SVGAnimatedLength屬性像這樣處理：

 VAR lengthBehavior = {
    功能設置：（ANIM，ATT，過去了，時間，樂趣）{
         / / SVG的具體處理
     }，

    得到：功能（ANIM，ATTR）{
         / / SVG的具體處理
     }
 };

 / /處理<circle>“高級屬性
 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選擇器，樣式屬性和呈現屬性。

銳來到救援感謝的Node模塊，它可以延伸到隱藏這些瀏覽器的差異。 可擴展的Y.DOM.CUSTOM_STYLES Y.Node.prototype.getComputedStyle Y.DOM.CUSTOM_STYLES提供一個統一的方式來讀取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'，
       “紅”，填寫：
      行程：“無”，
      孩子：[{
          標籤：“矩形”，
           X：10，
           Y：10，
          寬度：200，
          身高：300
       {
          標籤：“圈”，
           R：10，
           CX：105
           CY：155
       {
          標籤：“形象”，
           XLINK：HREF：“圖像/ photo.png”
          寬度：200，
          高度：'300px'
       }，prevSibling）;
          

  為使不同的DOM調用（如的的速記createElementNS ， setAttributeNS和appendChild ）來創建g G的元素及其子元素之前插入prevSibling下myNode 。 該實用程序處理的屬性和元素的命名空間。

定時和同步增加的動畫引擎

許多，如果不是大多數，涉及動畫需要多個舞蹈動畫實例。 通常情況下，幾個動畫需要創造一個理想的效果，動畫的開始或結束的互相依賴，有時一個時間偏移：動畫需要同步。

例如，如果你有一組形狀需要一前一後消失在，你將需要為每個元素創建一個漸變動畫，然後鏈與偏移輕微的開始時間。

 VAR鏈= Y.all（'＃鏈圈“），
     firstAnim，previousAnim;

 chained.each（功能（圈）{
    阿尼姆=新Y.Animate（{
        節點：圓，
         ：{'補'：'白'}，
         ：{'補'：'灰色'}，
        時間：0.25
     }）;
     （previousAnim！未定義）{
         / / Synchrnoize ANIM開始，不要灰心喪氣，後一開始是0.15秒
         / /以前的圓的動畫（previousAnim）。
         previousAnim.onBegin（ANIM，0.15）;
     }否則{
         firstAnim = ANIM;
     }
     previousAnim = ANIM;
 }）;

 / /啟動後，點擊界的第一個動畫1S。
 / /注意，這是一個擴展的默認YUI run方法不
 / /時間偏移。
 chained.on（'點擊'，函數（）{
     firstAnim.run（1）;
 }）;

看到時間偏移測試。

該方法onBegin可以很容易地同步兩個動畫的開始，一個可選的偏移時間。 其實， onBegin也可以調用與偏移時間的函數。 同樣， onEnd擴展使得它容易同步動畫結束。

默認情況下，YUI的動畫事件提供了一種方法同步。 onBegin和onEnd方法更簡潔表達的同步（一個簡潔的類似的例子所示）。

此外，它有時需要與事件同步動畫，再與偏移時間。 beginOn和endOn擴展允許我們表達。 例如：

 anim.beginOn（Y.one（“＃鍵”），“點擊”，0.5）;

ID“按鈕”的元素被點擊後，將開始動畫0.5秒。 這是一個簡短的手：

 y.one（“＃鍵”）。上（'點擊'，函數（）{
     setTimeout的（500 / *毫秒* /，函數（）{anim.run（）;}）;
 }）;

動畫類的最後一個擴展的能力，使一個動畫對象的，適用其第一幀的狀態，然後才真正開始。 這通常需要創建動畫效果，涉及多個動畫開始在不同的時間偏移。

阿尼姆=新Y.Animate（{
    節點：Y.one（“＃鍵”），
    從：{R：30“，填充不透明度”：0，顏色：“深紅色”}，
     ：{R：80“，填充不透明度”：1，顏色：'金牌'}，
    時間：0.25
 }）;

 / /下面將設置目標對象上的理想狀態​​之前
 / /啟動動畫。
 anim.applyStartFrame（）;
 anim.run（2）;

圖片洗牌演示用動畫偏移一疊圖片或圖片放在棧中的傳播效果。

結論

工作的SVG和銳，和特別是銳3，已被非常愉快的體驗：很多YUI的功能適用於SVG的權利出的方塊和YUI的可擴展架構它可能要工作圍繞偶爾問題和添加所需的功能。

當然，增加銳的SVG標準的支持將是有益的，特別是使YUI的工作，獨立的SVG文檔和Node類包裝的SVG元素沒有解決方法。

也有一些改進，將是有益的。 例如，它會幫助，如果動畫可以針對多個元素。 同樣，支持多個值（如<animate> SVG例如元素）將有助於建立更為複雜的特效。

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

參考文獻

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

In the Wild for October 15, 2010

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！

YUIConf 2010: Early-bird registration ends this week

October 7, 2010 at 9:03 am by Jenny Donnelly | In Development , YUI Events | 2 Comments

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• and much, much more!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！