yahoo! open technologies @ncu
DESCRIPTION
TRANSCRIPT
NSYSU MIS2009/3/5
科技 開放 雅虎站在巨人的肩膀上、開發網站
josephj
• 2.5 年前端工程師（F2E）
• 0.5 年科技推廣傳教士（Evangelist）
•目前在無名小站擔任工程師（RD）
@josephj6802http://josephj.com
Hi! 我是 josephj（啊嗚）
2008.5 跑步環島
Question 1：建立一個成功網站最基本且
重要的元素為何？
Open APIs輕鬆取得 Yahoo! 上的資料
Open API
AJAX API
Open API
Yahoo! 的許多服務都提供了各式各樣的輸出 Format（以全世界最受歡迎的相簿 Flickr 為例）
http://www.flickr.com/photos/tags/中山資管
http://api.flickr.com/services/feeds/photos_public.gne?tags=中山資管&lang=en-us&format=rss_200
http://api.flickr.com/services/feeds/photos_public.gne?tags=中山資管&lang=en-us&format=php
http://api.flickr.com/services/feeds/photos_public.gne?tags=中山資管&format=json&jsoncallback=getFlickrData<script src=”
”></script>
http://api.flickr.com/services/feeds/photos_public.gne?tags=twopenhack08&format=lol
每當碰到要結合多個 API 的 Feed，格式、Schema 都不一樣！ 頭大！
從不同 Service 取得資料...
JavaScript 組合成 HTML ...
抓取資料、處理 Schema 得寫超多的程式有可能不寫 Code 就做到嗎？
是的！用 Pipes 來 Remix Feed
拖拉、填寫、完成
多個中山正妹的 RSS Feed
利用 Union 結合為一個
以日期做排序
輸出最後結果：各種格式
但... 開發者的要求：CLI
YQL 滿足你的需求Yahoo! Query Language
把 Yahoo! 當成是你的資料庫！
Question 2：有資料了，要怎麼樣把網頁
做出來？
YUI Library快速開發功能強大的 Web2.0 網站
在瀏覽器上建立使用者 UI（控制項）
Def. But.Button
Label Menu
Label Text Field
Label
Label
Text Area
click me
傳統內建 UI 使用 YUI 所建立的 UI
YUI 有哪些優點？
最符合使用者需求你每天都在用的網站是？
所有的 Library 必需符合使用者經驗的設計
Problem Summary
The user needs to enter an item into a text box which could ambiguous or hard to
remember and therefore has the potential to be mis-typed.
EXAMPLE:
Auto completion of contacts in Yahoo! Mail Beta
Use When
The suggestions can be pulled from a manageable set of data.
The input item can be entered in multiple ways.
The input item can be matched with a specific data item in the system.
Speed and accuracy of entry is an important goal.
The total number of items would be too large or inconvenient for displaying in a
standard drop down box.
Solution
Layout
Use a standard text box for input.
Label the text box to match the user's expection of what field will be searched against.
Interaction
As the user types, display a list of suggested items that most closely match what the
user has typed. Continue to narrow or broaden the list of suggested items based on the
user's input.
Display the suggested items list in a drop down box directly underneath the text box.
The suggested items list may be based on the complete set of data or more narrowly
based on other criteria such as each item's frequency of use.
When available, show multiple fields of information for each suggested item. In the
Yahoo! Mail example above, two fields are presented: the contact's full name and the
contact's email address.
Highlight the closest matching item within the suggested items list.
Show the matched item as first in the list.
Highlight the background of the matched item.
When multiple fields are shown for each suggested item the match may occur
with the initial characters of any of the fields presented.
For each suggested item in the suggest items list show the characters that exactly
match the user's input. When multiple fields are shown in a suggested item the
matching characters may appear in any of the fields presented. In the example below,
the characters 'Yu' have been typed by the user. The match is on three items. Notice
that the first item matched on the contact's email address '<yuiblogger.com>' whereas
the second and third items are matched on the contact's name (e.g., 'Yusef Jones'.)
Allow the user to delete a character of input and display the previous suggested items
list.
Allow the user to complete the input field by pressing the Tab key or Enter; key. The
current matched item in the suggested items list will be accepted as the value for the
input field.
Allow the user to optionally highlight an item of their choice from the suggested item list
with the mouse or with the up and down arrow keys.
Allow the user to cancel the suggested items list by pressing the Esc key. The drop
down list will close. Subsequently pressing the Tab key or Enter key will accept the
value from the input field. However, typing more characters after hitting the Esc key will
restart the auto completion behavior displaying the suggested items list.
If multiple input items are allowed in a single input field, allow the user to use the
Comma key to separate each input item.
Pressing the comma key will complete an individual item match.
The auto complete behavior restarts when the user begins typing characters for
the next input item.
Rationale
Reducing the number of keystrokes allows for faster user input.
Showing additional formatting information in the suggested items list (like the email
address in the example above) removes ambiguity.
Continual feedback helps the user narrow in on the correct choice.
Accessibility
Label the text box to match the user's expection of what field will be searched against.
Allow the user to highlight a desired match either using a mouse or navigating to it with
the up or down arrow keys.
Allow the user to complete the form by pressing the Tab or Enter keys.
Allow the user to cancel suggestions by pressing the Esc key.
Allow the input field to receive keyboard focus by pressing the Tab key.
Once the edit field is in focus make sure that the focus stays in the edit field during
autocomplete.
Do not send any page refreshes when updating the field (page refreshes will signal
assistive technology to start reading the page again.)
The insertion cursor should move as the left/right arrow keys are pressed in the text
field.
QUICK JUMP
Solution
Rationale
Accessibility
RELATED PATTERNS
Calendar Picker
AS USED ON YAHOO!
Yahoo! Mail Beta
Yahoo! Maps Beta
Yahoo! My Web 2
BLOG
Blog Article
Y! UI CODE EXAMPLES
Auto Complete
Component
Y! Search (JSON)
Y! Search (XML)
In-Memory (array)
In-Memory (function)
Flickr (XML)
Flat data
Playground
Show with revisions
This work is licensed under a
Creative Commons Attribution 2.5
License.
Design Pattern Library
Auto Complete
Copyright © 2005-2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings
Developer Network Home Help Site Search
Yahoo! Developer Network > Design Pattern Library > Auto Complete
超完整的範例目前在 YUI 官網上超過 300 個範例
客製化容易
密碼強度顯示器
跟桌面一樣的選取方式
用 YUI 製作 Web 簡報系統（為前年的 OSDC 所做的）
翻頁（Carousel）模組
手風琴模組
用於「知識+名片」的手風琴模組
用 YUI 做的俄羅斯方塊
提供專業視覺設計師的樣式
YUI 有著最好的瀏覽器支援度
http://blogs.computerworld.com/nytimes_iphone_browser_marketshare
即使是 iPhone 上的瀏覽器，YUI 也支援
http://marketshare.hitslink.com/report.aspx?sample=21&qprid=43&qpcustom=Chrome+0.2
Google Chrome 也一視同仁 ;)
Rich Text Editor
結構複雜、但使用起來簡單愉快
保證在每個主流瀏覽器都支援
無障礙網頁（Accessbility）
YUI 必學招式
1. HTML 模組在 Yahoo! 每一頁都是由許多的模組所構成
<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>
<div id=”nav”> <div class=”hd”> <h2>標題</h2> </div> <div class=”bd”> <p>內文</p> </div> <div class=”ft”> <a href=”...”>更多... </a> </div></div>
模組的結構
一個 ID 代表一個模組不能重複
.hd, .bd, .ft 分別代表模組的header、body、footer
＃yhtw_masthead
＃ykpmt
＃ykpsb
＃ykpimt
＃ykpimqa ＃ykpimr
＃ykpadv
＃ykpug
＃ykpiht＃ykpiht
＃ykpsb
•ykp 為知識+ 的 prefix
•sb 為 search box 的縮寫
•檔案：inc/search_box.php
<div id=”ykpsb”> <div class=”bd clearfix”> <form ...> ... </form> <div class=”extra”> ... </div> </div></div>
form .extra
[HTML]<style>#ykpsb { margin-bottom:10px;}#ykpsb form { float:left;}#ykpsb .extra { float:right;}</style>
[CSS]
因每個模組有 id，所以 CSS 可以寫得很 namespace
好處就是很安全，不同模組不會互相干擾
練習 1：HTML 模組 （3 Mins）http://josephj.com/training/yzu/html-module.html
1. 替此文章模組取個適合的 id2. 加上 hd, bd, ft 的 class3. 利用前頁的方法設定 CSS
color:#369;background:#ffe;
font:bold 16px;
2. YUI Grids快速 DIV + CSS 版面產生器
側邊欄寬度為 240px
平均分配 50%, 50%
版面寬度 950px
http://developer.yahoo.com/yui/grids/builder/
YUI Grid Builder
3. YUI AJAXhttp://josephj.com/training/yzu/yui-ajax.html
Web 2.0 的基礎
YUI AJAXYUI 用來做 AJAX 叫做 Connection Manager
使用者瀏覽器
A 網站
1. 發出 Request
A 網站伺服器
2. 伺服器處理 Request
3. 伺服器回傳
4. 整份網頁重新整理
傳統流程：
使用者瀏覽器
A 網站
1. 用 JavaScript 發出 Request
A 網站伺服器
2. 伺服器處理 Request
3. 伺服器回傳
4. 只有小部分更新
AJAX流程：
YUI AJAX
練習 3：YUI Connectionhttp://josephj.com/training/yzu/yui-ajax.html
4. YUI Get Utilityhttp://josephj.com/training/yzu/yui-get.html
存取跨網域的資料
http://api.flickr.com/services/feeds/photos_public.gne?tags=yzu&lang=en-us&format=json<script src=”
“></script>
練習 4：YUI Gethttp://josephj.com/training/yzu/yui-get.html
5. YUI 選單輕鬆地做出巢狀式浮動選單
練習 5：YUI 選單http://josephj.com/training/yzu/yui-menu.html
1.請以 new YAHOO.widget.MenuBar([模組id]); 新增一個 YUI 選單物件
2.執行這個物件的 render() 方法
練習 5：YUI 選單http://josephj.com/training/yzu/yui-menu.html
autosubmenudisplay (true 或 false) 是否自動顯示子選單
hidedelay （毫秒）滑鼠移開 n 毫秒後才隱藏
lazyload (true 或 false) 是否滑過去時才建立子選單
常用屬性：
6. YUI 按鈕輕鬆做出互動性豐富的按鈕 UI
YUI Button
一個按鈕該有的互動效果， YUI Button 都提供
更提供各種形式的按鈕
HTML 預設的按鈕醜又缺乏互動
練習 6：YUI 按鈕http://josephj.com/training/yzu/yui-button.html
1.請以 new YAHOO.widget.Button([連結 id]); 將連結轉換為按鈕
7. YUI 視窗Web 2.0 的「開新視窗」
YUI Container 家族
YAHOO.widget.Panel
YAHOO.widget.Panel
YAHOO.widget.Dialog
YAHOO.widget.SimpleDialog
練習 7：YUI 視窗http://josephj.com/training/yzu/yui-panel.html
1. 請以 var oPanel = new YAHOO.widget.Panel([模組 id], [屬性]); 將 #panel 模組轉換為視窗（屬性設定請看下一頁）
2. oPanel.render(document.body)： 將模組 append 到最外層3. oButton.addListener(‘click’, onButtonClick)
onButtonClick 函式：oPanel.show();
練習 7：YUI 視窗http://josephj.com/training/yzu/yui-panel.html
close 是否要有關閉的按鈕
fixedcenter 是否要置中對齊
modal 是否為獨佔模式
underlay shadow’, ‘matte’
visible 預設是否顯示
width 視窗的寬度
{屬性1 : 屬性值 1, 屬性 2 : 屬性值 2}
YUI Compressor
有哪些網站使用 YUI？
問：YUI 是否會收費？
YUI 是基於最鬆散的 BSD License 條款授權
你可以自由引用、修改、甚至放在商業軟體販售
問：為什麼 Open Source ?
• Fasten Improvement 回應使用者的需求
• Fun 與使用者互動
• Innovation 有更多創新的應用
• Recruiting 培養前端工程師
• 也沒辦法不開放，檢視原始碼就看光了
• 現在你可以簽約成為 YUI Contributor
問：跟別的函式庫
jQuery、Prototype、Dojo、GWT
有何差別？
• 純 JavaScript 函式庫
• 最齊全的文件
• 不改變 JavaScript 原本的結構
• 不污染、違反網頁標準化的精神
• 客製化最容易
• 經過完整的 QA 流程測試
• 在標準瀏覽器上皆能正常運作
問：有沒有 IDE 編輯器？為什麼不體驗一下打字的爽快感呢...？
IDE 編輯器：Aptana
問：有沒有跟後端程式
結合的計劃？
no.
• 無法滿足所有族群需求
• ASP, PHP, RoR, Python, JAVA...
• 必需考慮後續維護的問題
• 但有 3rd Party 自行研發
Open at Yahoo!
開放平台，越多人用越值錢
http://www.bnext.com.tw/LocalityView_6980
... 以地圖日記為例，技術長郭家齊就是那
個到各家廚房找材料的廚師。他用 Google
Maps 的圖資顯示在自家網站上，搭配了雅
虎的網頁美化元件，以及單一帳號登入
（用雅虎帳號即可登入地圖網站），加上
自己的巧手輕易地就能打造出像樣的網
站...
註：地圖日記已在近期更換為 Yahoo! Map
讓 Yahoo! 前所未見地開放給 3rd Party
Social
為什麼正妹都離我如此遙遠啊... orz...
ilove7388 在無名的名片
ilove7388 在無名的好友列表
Social = 人與人之間的關係
名片（個人資料）+ 我的好友（人際關係）構成了 Social、也就是社群
有數不盡的社群網站（ Social Platform）
Following
Follower
Social Open Social
2007/5/24：Facebook 創辦人 開放了平台： F8
http://www.flickr.com/photos/kk/2327597086/
Social 平台的開放是很令人興奮的一件事！
FQL FBML FBJS
只要會學會以下三種，我就可以寫 Facebook 程式了！
但.. 想像一下，每個社群網站都有一套
OpenSocial 為 Social Applications 制定了統一的 API Spec，可通用於所有社群網站
開發者只需寫一次就可以用在所有網站上
有那些知名網站支援 OpenSocial？
Yahoo! 也是 OpenSocial 的成員之一
10/17 上線！Yahoo! Profile
開發者可存取使用者 Profile 的資料及人際關係。
開發者可存取 Address Book、Messenger、Relationship 等聯絡資訊
開發者可讀取 / 寫入使用者活動
開發者可取得使用者目前是否在線上
Social Directory
Contacts
User Status
Updates
http://developer.yahoo.com/social/
你明明就不是我 Twitter 的聯絡人，為什麼可以看到我的 Twitter 內容?
Yahoo! Messenger應用程式產生的 Updates
http://manage.community.yahoo.com/vitality/
原來是我在 MyBlogLog 有設定 Twitter 帳號，而且這邊又設了分享，才會顯示在 Y!M 上
使用者 / 內容 / 時間
Next?
Application Platform應用程式平台：YAP
將你的程式放在全世界最多人使用的頁面
Yahoo! 美國新版首頁
Yahoo! 電子郵件信箱
利用 Mail/Contact API 做 Local 的建議
Pat Jameson 邀請朋友可共享晚餐
Yahoo! 個人頁Pat Jameson 的部落格
Pat Jameson 的留言板
Yahoo! 運動頻道？知識+？拍賣？
結合 Y!Sports 與某家售票系統
YAP Developer StudioYAP 應用程式的開發工具
寬度 高度 存放位置 說明
Application 760px 不限制開發者的
Web Server
可用 Sever-side Script 產生 YAP 所需之格式
User 可操作此 App 主頁面
Small View 300px+ 250px Yahoo!只能用 HTML 與 YML
User 可看到此 App 基本資訊也是 Application 的入口
兩種不同的 ViewLightbox View ApplicationSmall View
撰寫 App 的程式語言HTML、CSS、JavaScript、YML、YQL
開發方式就是 HTML + CSS + JavaScript
但 YAP 多提供了 YML 與 YQL 兩種語言
協助開發時間減低
YML：Yahoo! Markup Language
利用 YML 可豐富 UI 介面、快速取得資料
Text
<!-- 取得檢視者的朋友列表 --><yml:friend-selector uid="viewer"/>
還嫌不夠？YAP 提供了 SDK！
PHP SDK
簡化 OAuth 認證、使用 YQL 與 Social API
Text
我們有非常多的使用者，也會想盡辦法
讓他們彼此建立 Connection了解 Social Networking 的好處
在 Yahoo! 上開發應用程式給成千上萬人使用？
Cool！
YAP 對於 Open 標準的支援
• OpenSocial
• Hadoop
• OpenID
• oAuth
BluePrint：在手機上開發程式
SearchMonkey：改變搜尋外觀
Fire Eagle：地址定位系統
OpenID：SSO 的統一作法
BBAuth 可以準備 Retire 了...
Quick Summary
• Open APIs：把 Yahoo! 當成你的資料庫
• Social：使用者資料與人際關係
• YAP：在 Y 放置你開發的程式
善用 Yahoo! 工具，可讓你的網站更 Powerful
Questions?
http://www.flickr.com/photos/phploveme/2847931240/