加強與銳，基於應用的音頻

2009年6月30日8時41斯科特·席勒| 開發 | 4評論

斯科特·席勒 aboot將作者：斯科特·席勒（ @希爾 ）是一個Flickr上的前端工程師於2005年加入雅虎，來自加拿大的歡呼。 SoundManager 2是他個人的副作用項目之一。 由於Flickr的自我宣稱的駐場DJ，他可以看到偶爾的Web 2.0黨之間擺弄時間推移錄像和拍照，共享網上的事情了。 斯科特的實驗的DHTML網站偶爾更新。 在這篇文章中，斯科特告訴你如何使用SoundManager，以配合用戶的具體行動或事件中銳的聲音效果。

聲音是主要的感官和日常生活的一個重要組成部分之一，但在很大程度上忽略網頁上。 Web開發人員都知道，當涉及到HTML，音頻添加到一個網站，因為它應該是不容易的。 這是為什麼？ 以下是與嵌入的聲音，一些想法和一些演示使用YUI的JavaScript嵌入和控制聲音的歷史遺留問題的一些想法。

演示

如果你像我一樣，你可能希望看到一些有趣的東西的前端，因為閱讀是工作 ， 工作是枯燥的！ ;)隨意發揮先演示，然後讀取的細節。

一個HTML和“多媒體”的簡史

該網站是相當不錯的視覺表現。 這是很容易在HTML文檔中創建，設計和嵌入圖像，文字和鏈接。 今天在HTML 4，音頻和視頻原生支持的媒體格式 - 或者更確切地說，<audio>和<video> - 顯眼失踪。

HTML 5應該把音頻和視頻嵌入到<img />在不那麼遙遠的未來簡單。 在此期間，我們不得不求助於創造性的工作解決的HTML-5-般的音頻/視頻功能域橫跨今天常見的HTML 4支持瀏覽器。

嵌入音頻的問題（HTML 4中）

音頻網站上的今天，開發商往往顯示一個HTML鏈接直接到MP3文件的列表。 這種方法是簡單的，普遍的理解和被搜索引擎索引，但讓一個混亂和不一致的默認的瀏覽體驗。

一般提示用戶右鍵單擊“另存為”，終於從他們的桌面上打開的文件，或點擊鏈接，並有自己的瀏覽器下載和打開的MP3文件。 常規的“點擊”在新的頁面嵌入播放器打開或啟動外部應用程序如QuickTime或Windows媒體播放器。

不僅是“赤裸裸”的MP3鏈接額外的工作，並為用戶混淆，瀏覽器的處理方法是一種干擾，而且從他們離開你的網站的經驗。

是使用<OBJECT> / <EMBED>另一種通用的方法來直接嵌入到MP3或其他內容，但再次遭受不一致的問題，開發商將不知道什麼可能會顯示在該網頁的面積，由於用戶可以任何可能載入以處理該文件類型的應用程序的陣列 - 在這種情況下，可能有相同的QuickTime或Windows媒體播放器將處理直接下載將發生在你的頁面顯示。 再次，不是一個偉大的解決方案。

有時用作閃光燈部件嵌入MP3內容的解決方案，但界面和外觀往往是100％基於Flash的，而不是HTML和CSS的基礎，從而為大多數Web開發人員定制更加困難。 HTML 5的標準為基礎，CSS-換膚和腳本化的音頻/視頻元素，應該改變。

在此期間，一些有創意的解決方案可以被用來獲得更多的“網絡開發人員友好的”音頻部件。

製作的MP3鏈接“只是工作”：銳+ SoundManager 2

“漸進增強”鏈接的MP3，將在原地發揮單擊時，有事必須攔截瀏覽器的正常下載行動，隨後處理請求;通過結合JavaScript和Flash處理負荷和演奏的MP3內容，這可以非常有效地進行。

在個人的追求，跨瀏覽器的DHTML遊戲早在2002年的音頻控制，我開發了一個JS +閃存音頻API調用SoundManager。 因為發展到包括視頻， SoundManager 2實現和擴展Flash的本地聲音API和公開的JavaScript。 結果是cross-browser/platform的腳本音頻功能，它可以幫助彌合差距JS驅動的聲音，直到得到廣泛支持的HTML 5。

結合YUI的SoundManager 2 DOM和事件公用事業，你有一個有效的解決方案嵌入和控制音頻，這能優雅地降低到瀏覽器下載或嵌入播放器。

實際的例子：可播放的MP3鏈接

下面的演示使用YUI和SoundManager 2，以提高MP3鏈接，使其可玩聯。 YUI的事件公用事業攔截點擊鏈接指向MP3文件然後使用SoundManager的API加載和播放，然後返回“假”的有關網址，防止瀏覽器加載鏈接。 隨後點擊切換播放/暫停狀態。

在事件的JavaScript / Flash是不存在，或者如果一切順心，瀏覽器只會落空，並加載像往常一樣的MP3鏈接。

你的UI添加音頻

基於JavaScript的動畫，過渡和動畫效果的網頁界面設計和增加流動性越來越普遍。 巧妙的應用於音頻，可以補充和進一步增強的用戶界面，使我們的經驗變得更有意義。

在某些應用中，在UI的反饋形式的聲音可以適當和有益的用戶體驗。 音效是常見的基於Flash的網站和基於網絡的遊戲，桌面遊戲音頻通常是一個講故事的重要組成部分。

.. 但也不要做

重要的是要知道何時停止。 回想一下動畫片“正在建設中”。的GIF？ 如何眨眼標籤？ 跑馬燈文字？ 有些東西是最好的獨處。 不是每一個HTML頁面，需要移動，閃爍，幻燈片，閃光燈和嘈雜的是在同一時間，甚至是“好玩”是最好的適度應用。 惱人的自動播放音樂或噪音的用戶可以迅速導致放棄你的網站。

有可能是很好的理由，如標準的HTML表單控件和元素沒有音效或與之相關的通知。 也許是“沉默是金”，這是最好的網站是默認情況下，安靜的地方，不被惱人的分散。

作為一個值得注意的例外，以“沉默的網頁”為主題，Internet Explorer通常會使得“咔嗒”聲時發生頁面導航，大概是為了通知用戶已經開始行動。 這在近年來變得更加柔和，但仍然存在，似乎仍然困擾一些用戶這一天。

“趣”為例：在嘈雜的DOM

儘管沉默參數，以下是一個例子，它可能是像有“噪音”的形式元素，​​按鈕和提供聲音反饋，他們正在使用的DOM元素。 新穎性，是一定要快速穿脫，但它確實增加了一個孩子氣的有趣的UI元素。

展望：HTML 5的

本地<audio>和<video>支持將意味著無需依靠第三方插件嵌入和控制更多的媒體格式，在瀏覽器內，它會容易得多。 此外，廣泛的Ja​​vascript API，應鼓勵開發商創造越來越多的創新經驗。

找到的談話： bloglines technorati

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

在為2009年6月29日，野生

2009年6月29日9時07分上午埃里克米拉利亞|在野生 | 3評論

上週從YUI團隊的大新聞是YUI的3.0.0 Beta 1的版本 ，移動銳3 GA的一個重要的一步。 以下是一些其他的消息在過去的幾個星期從YUI社區。 一如往常，請使用的意見，讓我們知道我們已經錯過了。

找到的談話： bloglines technorati

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

銳3.0.0 Beta 1中可供下載

2009年6月24日，由埃里克·米拉利亞在2:35 PM | 發展 | 19評論

銳3.0.0 Beta 1中是可用現在從YUILibrary.com下載 。

這釋放銳3預覽階段，到附近的一個最終狀態，並帶來了它的API。 對於那些打算實施銳3，3.0.0 Beta 1版本開始的過渡是一個好地方。 如果你已經用最新的預覽版本，喬治·帕克特提供了一個全面的測試1 3.0.0變更來指導你。 我們期待著聽到您的反饋，當你開始與1 3.0.0測試工作，我們將努力為GA版本，因為我們準備在未來幾個月內解決這些反饋。

本新聞稿中提煉銳3週期的核心要素，我們花了很多時間- YUI ， 節點和事件 -以確保我們有正確的API前進。 性能得到改善，我們改進我們的模塊/子模塊結構。 在某些情況下，我們添加了顯著的新功能，包括代表團在事件包事件的內在支持，但重點是基庫移動到生產質量。

幾個銳2.x的組件使他們3銳的亮相，在此版本中：

  1. 數據源 ：YUI的數據抽象層到數據集提供了一個標準的接口，不論數據的來源（本地，XHR的不同，XSS等）和格式（XML的，JSON的，CSV格式，等等）;
  2. ImageLoader ：ImageLoader允許你延遲加載的圖像是在視口中時的頁面油漆，節流帶寬使用，提高性能;
  3. 歷史 ：歷史的組件給你的瀏覽器的後退按鈕控制在一個單頁的Web應用程序的背景下;
  4. 樣式表 ：樣式表很容易創建和修改動態CSS規則，讓你用更少的重繪動態頁面元素的樣式。

作為在新的代碼行更精細包裝的一部分，我們已經建立了單獨的銳銳2，與其他組件捆綁在一起的房子功能模塊。 緩存 ，數據類型和DataSchema在此版本中首次 ​​亮相，這些曾經是一個部分的DataSource。

揮筆銳3

開始使用YUI 3的最好辦法是潛入的文檔和例子 -特別是為核心的YUI ， 節點和事件組件的例子。

我們還建議德賽Satyen的高新技術講座銳3的設計目標和體系結構提供了一個很好的概述新的代碼行花費一些時間。 下面嵌入視頻高清版本，連同成績單，是從YUI劇院網站 。


satyen德賽：“銳3：設計目標和體系結構” @ 雅虎 視頻

CSS的網格和YUI 3

你那些使用YUI的CSS組件可能會注意到，我們已經刪除了YUI CSS網格3.0.0 Beta 1的文件的引用，雖然電網仍存在下載（當然，你可以繼續使用銳2.7 .0版本的網格 ）。

我們已經過時的網格實施，包括在預覽版本，我們期望顯著重新設計這個組件之前重新引入YUI的3部分。

路線圖

3.0.0 Beta 1版本是YUI的重要里程碑。 在這一點上，我們鼓勵所有YUI的實施者，使用3 YUI的新項目，特別是不使部件大量使用的項目。

現在我們的注意力轉向3 YUI的遺傳地位。 我們希望這種情況發生在第三季度，在以下幾部分組成，將促進對GA：

  • ：YUI的核心節點，事件
  • 組件的基礎屬性，相應的，插件
  • 公用事業：動畫，餅乾，拖放和刪除，獲取，歷史，ImageLoader，IO中，JSON的，隊列，樣式表
  • CSS：復位，相應的，字體

3.0.0遺傳算法後，下一個主要版本將是3.1.0，目前預定第四季度。 3.1.0版本會帶來對GA的widget的基礎，包括以下組件：

  • 部件的基礎：小工具和Widget擴展
  • 公用事業：數據源，數據類型，緩存DataSchema

在3.1.0的發布週期，我們也開始引進建成後，YUI 3代碼行的特定部件。 注意部件，其擴展和樣品部件航運與3.0.0 Beta 1中，預計在未來數月顯著發展，我們開始重點庫的一部分，更多的關注。

詳細路線圖，參考YUILibrary.com YUI 3.x的路線圖上 。 該網頁是保持目前對我們的計劃和進展的最新信息。 YUI 3.x的儀表板也為那些希望跟踪我們的進步，走向主要銳3發布有用的資源。

找到的談話： bloglines technorati

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

閃光的SOL：持久性數據與本地SharedObjects

2009年6月23日下午在1:05由阿拉里克科爾| 開發 | 5評論
阿拉里克科爾，雅虎Flash平台的工程師

作者簡介：， 阿拉里克科爾已經在Flash的ActionScript問世以來，目前是雅虎的Flash平台團隊的開發人員。 你可以說他成長的語言。 當然，他在他的手獨立電影 。 是啊，他寫了一本書 。 但他平日的儀式與Flash仍然嘴硬。

當他不超過蹲在一台電腦，你會發現他騎在特派團brakeless。

我一直在工作與馬特·斯奈德的Mint.com發展YUI的一個新的本地存儲工具 。 該實用程序將使用層疊存儲系統，允許開發人員比一個典型的瀏覽器cookie中存儲的數據更有效地檢測到的最好的方式來存儲信息通過瀏覽器 - 和更大的數額。 存儲機制之一，採用的Adobe Flash Player ，這個使用案例一直是我最近的工作重點。

Flash有內置稱為SharedObjects ，可以認為是“超級曲奇”，允許開發人員默認情況下，存儲在持久存儲系統，100KB -或更多，如果用戶允許。 SharedObjects的好處之一，除了自己的能力，是他們可以存儲核心ActionScript類型，並在用戶的硬盤上的二進制格式，甚至整個定制類。 SharedObjects使用ActionScript消息格式（AMF），使他們高效和緊湊。

這些SharedObjects不加密而難以閱讀，所以，他們不是你叫什麼安全存儲。 我們從來沒有建議，除非你已經實現了自己的加密機制，如用戶名，密碼或其他私人數據存儲的重要數據通過一個SharedObject。 此外，SharedObjects比能力更方面的Cookie不同 - SharedObjects一般不會被連接到一個特定的瀏覽器，但獨立存儲。

這些差異的Flash存儲系統的開發商和最終用戶提供了許多好處。 然而，極為方便，同時，他們也可以是普通用戶來說，很多是不知道，這樣的數據甚至他們的機器上存在誤導。 雖然竭盡全力提供對私人數據的透明度和控制，通過他們的瀏覽器（Firefox和Safari瀏覽器提供了一個很好的工具的集合，查看，編輯和刪除各種網站的Cookie），閃存存儲系統的用戶，由於已採取其插件的性質，存儲在一個單獨的位置信息。 這意味著，清除瀏覽器的cookie不清除這些SharedObjects。

如果你有興趣查看您的計算機上存儲這些位，你可以檢查出下列地點：

Linux操作系統： 

  / .macromedia / Flash_Player /

MAC： 

  /圖書館/預置/ Macromedia的/閃存播放機/

Windows系統： 

  /應用數據/的Macromedia / Flash播放器/

SharedObjects存儲在單獨的文件夾，通常在這些地點，等描述性的名稱的目錄8GKWKDQM和227MDWL4 。 根據這些文件夾到域，在其中的SharedObject來自相應的子目錄。

有實際的文件*.sol擴展，並有可能超過每個域一個。 例如，我發現我的機器上的三個獨立的YouTube.com的文件夾下的SharedObject文件。 他們不是人類可讀的，因為它們是存儲在二進制。

此存儲工具時，我希望能夠看到在其原始的形式存儲的實際數據 - 但我沒有時間去解析它使用ByteArray，所以我看了一個工具來完成這項工作。 我發現一個方便的AIR應用程序名為密涅瓦 ，它可以打開一個*.sol文件，並顯示其信息。 作為這個寫作，目前的版本不容許編輯存儲的實際值，但有可能是其他一些應用程序在那裡，我沒有找到。

密涅瓦應用截圖

如果你想刪除部分或所有這些“閃光曲奇”，你可以簡單地刪除的文件或目錄的需要。 注意，但是，一些網站SharedObjects廣泛使用，以便消除它們可能會導致意外的行為。 金融機構，特別是他們的優勢，以幫助在其網站的安全性。 所以一定要確保你知道你在做什麼，或肆虐之前創建一個備份。

通過目錄瀏覽的另一種方法是使用Adobe的設置管理 。 這是一個具有特殊權限的基於Flash的工具，使您可以查看您的計算機上存儲的信息，刪除部分或所有的商店，和對未來的存儲設置的限制。

所以，下一次你想要一個乾淨的石板您的瀏覽器，請記住，有可能是潛伏在你的機器的瀏覽器不能得到一些額外的信息。

找到的談話： bloglines technorati

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

耦合銳和YQL的建立動態構件

2009年6月17日，11:14上午由喬納森·勒布朗| 開發 | 14評論

雅虎開發者網絡佈道者喬納森·勒布朗 作者簡介： 喬納森·勒布朗（嘰嘰喳喳： jcleblanc ）的工作夥伴整合組在雅虎 作為一名高級軟件工程師/技術推廣 開發網絡 。 合作夥伴關係和培訓，以及外部開發一體化為重點，喬納森與促進新興技術，以幫助在新的社會發展技術的採用和利用。 作為一個軟件工程師，喬納森工程廣泛與社會在網絡上的互動發展，發展聯繫起來的社會網絡來推動一個開放的網絡的理想的新方法。 雅虎之前，喬納森媒體CBSSports.com，在那裡他開發的產品上，如榮獲艾美獎殊榮的視頻點播播放器上瘋狂三月的生產和幻想的產品開發團隊內工作。 喬納森在加拿大出生和長大，畢業於阿岡昆的應用藝術與技術學院計算機科學學士學位，並與他的妻子目前住在都柏林，CA。

YUI有一個非常豐富的數據操縱和公用事業在其圖書館的UI列表，但同樣豐富有趣的數據，一般是作為實施者的責任。 YQL的同樣的道理，有豐富的數據抓取和互動的能力，但它缺乏YUI的可視化工具。 以YUI的可視化和控制功能和耦合YQL的原始數據管他們，我們可以建立無需創建任何可視化的數據存儲機制自己的令人難以置信的豐富的，互動的部件。

我給你一個建在這個崗位與YUI和YQL的兩個部件的巡演。 一個顯示公開可用的內容後，服務器端PHP組件通過使用OAuth認證用戶的私人數據顯示，與原有的部件和其他版本。

訪問公共數據

使用YUI的獲取效用 ，我們能夠向公眾請求YQL的疼痛，是不是對相同來源政策問題的處理，通常會阻止我們的XHR基於請求到服務器，而無需查詢網址同一域發起請求。 下面是一個小的展示你將如何調用YQL的使用YUI的獲取實用的代碼示例： 
 <script type="text/javascript">
 VAR getYQLData =功能（查詢）
     / /準備YUI的GET請求的URL：
     VAR yqlPublicQueryURL =“htt​​p://query.yahooapis.com/v1/yql？”;
     VAR SURL = yqlPublicQueryURL +“Q =”查詢
         +“＆格式= json的回調= yqlWidget.getYQLDataCallback”;
        
     / /使GET請求提供查詢YQL
     transactionObj = YAHOO.util.Get.script（SURL，{
        的onSuccess：onYQLReqSuccess，
         onYQLReqFailure onFailure處：
        適用範圍：本
     }）;

    返回transactionObj;
 }
 </ SCRIPT>

查詢網址（ sURL ）幾個不同的部分組成，以彌補請求。 yqlPublicQueryURL變量包含要求YQL的公共URI。 也有三個查詢參數，我們傳遞這個URI。 q參數是YQL的查詢使用，我們在我們的要求（如select * from flickr.photos.search where text="YDN" ） format是我們想從請求返回（JSON或XML）的格式，如果我們要包裝的JSON返回一個函數中的數據（ JSONP ）使用callback參數，我們可以定義一個回調函數。 此功能運行時，獲取實用工具將一個請求query.yahooapis.com指定的查詢。 成功，調試消息將顯示在get工具，然後在YQL的查詢定義的回調將被稱為解析返回的JSON結果onSuccess回調。

設立自己的網站或博客上的部件，如下載代碼從github上的簡單js-yql-display在文件夾http://github.com/jonleblanc/yql-utilities/tree/master和實例部件如這樣的： 

 <！ -  widget文件包括： - >
 <script type="text/javascript" src="yql_js_widget.js"> </ SCRIPT>

 <！ - 小部件樣式 - >
 <STYLE>
 div.imgCnt {邊界：1px固體RGB（96，96，96）; 
    保證金：5PX 5PX 5PX 0pt;浮動：左;
	背景顏色：RGB（241，241，241）;寬度：100像素;
	高度：140px單擊;}
 div.imgCnt IMG {邊界：0;保證金：5PX;}
 div.imgCnt div.imgTitle {填充：5PX的字體大小：11px;
    文本對齊：中心;}
 </ STYLE>

 <script type="text/javascript">
 CONFIG = {'調試'：真};
 VAR格式=的<div class="imgCnt" ALIGN="CENTER">
     +“的<a href =”{雇主} / {id}的http://www.flickr.com/photos/ /“”
     +“目標=”_blank“> <IMG SRC =”http://farm3.static。
     + flickr.com / {服務器} / {id}的{秘密}。JPG？V = 0“
     +“寬度=”80“=”80“/> </ A>
     + <div class="imgTitle">“
     +“的<a href =”http://www.flickr.com/photos/ {業主} /
     + {ID} /“> {標題} </ A>
     +'</ DIV> </ DIV>';
 VAR yqlQuery =
     “選擇*從flickr.photos.search的文本=”YN系列“;
 insertEl ='widgetContainer“;
 yqlWidget.push（yqlQuery，配置，格式，insertEl）;
 </ SCRIPT>

可以使用上面的例子-如何配置腳本的作品，可以發現所有的文件github上任何公共YQL的查詢數量。 如果我們運行上面的代碼，我們可以很容易地顯示我們最新的Flickr照片：

Flickr照片顯示

那麼，為什麼這樣比使用YQL的和YUI一起上做文章？ 嗯，對我來說這些公​​用事業帶給我相當接近傳統的MVC（模型 - 視圖 - 控制器）設計模式的類型。 YQL是一個精彩的數據匯總和操縱的工具，但在這一天結束，它只是數據。 我們獲取實用程序或連接管理器使用YUI的公用事業，如插入控制器的功能，那麼我們就可以使用類似部件上建立我們的表現層數據表和圖表 。

私人更新流

訪問私有的用戶數據

讓我們來探討YUI和YQL的遠一點的配對，以建立公眾的JavaScript查詢部件的基礎和附加服務器端組件，驗證和存儲OAuth的會議。 使用的Y！操作系統的PHP SDK ，我們是能夠擴展的JavaScript小部件顯示更新流和原本身份驗證部件的用戶的個人徽章 ​​細節。 由於我們使用相同的域上為我們的部件，使我們的認證呼籲YQL的的PHP SDK，我們不再需要擔心的相同來源政策問題。 這意味著我們可以交換使用銳獲取實用 YUI連接管理 。 使用的效益連接管理器 ，我們可以使用一個標準的Ajax請求的事件處理程序和實用工具，而不是在YQL的查詢回調。 我們新的請求函數看起來像這樣： 

 <script type="text/javascript">
 VAR getYQLData =功能（查詢）
     / /準備銳連接管理器POST URL後的數據：
    var sURL = "private_data_fetch.php";
    var postData = "q=" + query;

    //define Connection Manager event callbacks
    var callback = {
        success:parseYQLResults,
        failure:onYQLReqFailure
     };
		
    //make POST request to YQL with provided query
    var transactionObj = YAHOO.util.Connect.asyncRequest('POST',
	    sURL, callback, postData);
		
    return transactionObj;
 }
 </ SCRIPT>

The Connection Manager is used to make AJAX requests to the PHP SDK (whose references are housed in private_data_fetch.php within the above code) with the query as a POST parameter. The SDK in turn makes an authenticated request for the user's personal data and dumps out a JSON string as the return of the request. Then all you need to do is parse the JSON string using the YUI JSON Utility ; after you've called YAHOO.util.JSON.parse() on the transaction results, your data can be treated in the same manner as the data in the first example.

Since YQL generates results when the request is called, there is no need to house this data for yourself. YQL can pull data from any available source so you can build widgets such as these to display dynamic results with each refresh.

Both of the widgets showcased in this post are freely available for download and contribution on github at http://github.com/jonleblanc/yql-utilities/tree/master . These widgets are:

  • js-yql-display : JavaScript widget to display public YQL data
  • php-yql-display : JavaScript / PHP widget to display private YQL data

找到的談話： bloglines technorati

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

Implementation Focus: Squarespace

June 9, 2009 at 8:08 am by Jenny Donnelly | In YUI Implementations | 2 Comments

Squarespace.com started in the dorm room of Anthony Casalena and has grown into a sizable company and a formidable service that serves the needs of tens of thousands of customers every day — including Mark Ecko and Kevin Rose. Squarespace allows its customers to create and manage their web sites using a polished interface without having to install software — it's all done through the browser. Squarespace is defined by our insistence on software that provides an unparalleled user experience from a robust core. Every pixel of Squarespace's software is engineered and animated to be flawless.

Members of Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Members of the Squarespace team: (From left to right) Paolo DeDios, Erica Reitman, Dane Atkinson, Jonathan Snook, Anthony Casalena, Tyler Thompson, Davin Chew, Rolando Berrios.

Can you provide a background of projects where you've used YUI? What problems are you trying to solve for users?

Squarespace has two different audiences that have to be served in different ways. We have Squarespace customers who use the tools that we provide and we have the people who visit the sites that our customers create. YUI is used to drive a lot of the functionality that we provide to our customers and do that in a way that works reliably cross-browser. If we don't provide a reliable in-browser experience, we'll hear about it with support requests.

We also have YUI available for our customers to use on the sites that they build (although it's never been a requirement). Our customers get to rely on a stable and reliable library for any of their own site-building needs.

Screenshot of Squarespace overview page.

你選擇了YUI的JavaScript庫，以幫助推動的UI。 是什麼促使你做出這樣的選擇呢？

At the time the decision was made, YUI was the best choice. YUI is a well-designed library that considered the requirements of multiple scenarios, not limiting itself to one or two use cases. It was also one of the few libraries that had an integrated and supported set of widgets.

Also, the fact that YUI is actively maintained and tested so extensively with the Yahoo! homepage is a massive win. No other library we looked at was receiving that sort of extensive testing and coverage. When we have run into speed issues, it's turned out to be cross-browser issues unrelated to our use of YUI.

What YUI components are in use on which projects?

Of course the standard DOM and Event stuff along with Drag and Drop , Animation , and Connection Manager . On the widget side of things, we take advantage of Calendar , ColorPicker , and Slider .

設計和接口質量是創業的巨大差異化。 What are the features you have prioritized in your interfaces and what have you build on top of YUI?

For Squarespace, design and interface quality is a big part of our success. We really work to create a polished in-browser experience so that customers can design and manage their sites all from one place. We're trying to replace desktop tools. The browser and YUI have allowed us to do that.

We pull in dynamic overlays allowing our customers to move content around, edit content on the spot, or add new content without requiring a page refresh. Squarespace also allows them to edit the look and feel of their sites dynamically. Change colours, images, or other CSS properties from the interface or have direct access to specify whatever CSS you want. It's really quite flexible, and we're very proud of how well it has been received.

Screenshot of Squarespace design view page.

What are the next interface challenges you are tackling for upcoming releases?

We have some great features that we're working on right now that will increase the flexibility that our customers will have to modify their content and design right from the browser but the challenge with doing more stuff within the browser is ensuring that you're creating a snappy and responsive interface. We definitely don't want them to be sitting there while we load up large assets. We want them to be able to jump in and play with their sites as quickly and easily as possible.

We plan to stick with YUI and will be watching the progress of YUI 3 very closely to see how it'll fit into our future plans.

找到的談話： bloglines technorati

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

YUI Theater — Charles McCathieNevile: “Opera Dragonfly”

June 1, 2009 at 9:04 am by Eric Miraglia | In YUI Theater | Comments Off

Charles McCathieNevile of Opera; May 26, 2009, at Yahoo!

One of the first YUI Theater videos years ago was published after Joe Hewitt came to Yahoo! to talk about the 1.0 release of Firebug , and back in those days Firebug was a paradigm shift — it had a convenient interface that combined DOM inspection and debugging, and it allowed developers to finally put the venerable Venkman on the shelf.

The Firebug model has penetrated into other browser families today, and today IE8 and Safari both have capable developer tools while Firebug soldiers on in service to Firefox. None of the tools is perfect, but Firebug has served as a good proof-of-concept for what a multipurpose, extensible inspector/debugger toolkit can do.

Opera is now innnovating on this front as well, and Charles McCathieNevile, Chief Standards Officer, stopped by Yahoo! on May 26 to tell us about their latest effort : Opera Dragonfly . Dragonfly will work with Opera 9.5 and later, and it's a novel approach — implemented as a widget using JavaScript and CSS and proposing a new “Scope API” that (if agreed upon by browser makers) could allow for a common debugging platform. Dragonfly is fully open-sourced.

Slides from Charles's talk are available as zipped HTML files .

The embed from Yahoo Video follows; a higher-resolution version, along with a transcript, is available from the YUI Theater site .


Charles McCathieNevile: "Opera Dragonfly" @ Yahoo! 視頻

下載（M4V）

如果你錯過了......

一些最近從其他視頻銳影院系列 ：

訂閱銳戲劇：

找到的談話： bloglines technorati

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

主辦雅虎

©2006-2012雅虎公司所有權利保留。 隱私政策 - 服務條款

支持WordPress的關於雅虎 虛擬主機 。