Yahoo Open Source - The Tour & Mystery of AppDevKit (MOPCON 2016)
Josephj Open At Yahoo Nsysu2
94
NSYSU MIS 2009/3/5 科技 開放 雅虎 站在巨人的肩膀上、開發網站 josephj
-
Upload
joseph-chiang -
Category
Documents
-
view
1.271 -
download
2
description
Transcript of Josephj Open At Yahoo Nsysu2
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 的特點
最佳的瀏覽器支援度
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）
最符合使用者需求你每天都在用的網站是？
所有的 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
客製化自己所需 UI 容易
密碼強度顯示器
跟桌面一樣的選取方式
用 YUI 製作 Web 簡報系統（為前年的 OSDC 所做的）
翻頁（Carousel）模組
手風琴模組
「知識+名片」的手風琴模組
用 YUI 做的俄羅斯方塊
提供專業視覺設計的樣式
超完整的範例目前在 YUI 官網上超過 300 個範例
有 IDE 編輯器嗎？為什麼不體驗一下打字的快感呢...？
Aptana
YUI 是否會收費？
YUI 是基於最鬆散的 BSD License 條款授權
你可以自由引用、修改、甚至放在商業軟體販售
有哪些網站使用 YUI？
YUI 必學招式http://josephj.com/training/nsysu/
1. YUI 排版快速 DIV & CSS Layout 產生器
側邊欄寬度為 240px
平均分配 50%, 50%
版面寬度 950px
http://developer.yahoo.com/yui/grids/builder/
YUI Grid Builder
2. YUI 選單輕鬆地做出巢狀式浮動選單
範例 2：YUI 選單http://josephj.com/training/nsysu/yui-menu.html
1.請以 new YAHOO.widget.MenuBar([模組id]); 新增一個 YUI 選單物件
2.執行這個物件的 render() 方法
範例 2：YUI 選單http://josephj.com/training/nsysu/yui-menu.html
autosubmenudisplay (true 或 false) 是否自動顯示子選單
hidedelay （毫秒）滑鼠移開 n 毫秒後才隱藏
lazyload (true 或 false) 是否滑過去時才建立子選單
常用屬性：
3. YUI 按鈕輕鬆做出互動性豐富的按鈕 UI
YUI Button
一個按鈕該有的互動效果， YUI Button 都提供
更提供各種形式的按鈕
HTML 預設的按鈕醜又缺乏互動
練習 3：YUI 按鈕http://josephj.com/training/nsysu/yui-button.html
1.請以 new YAHOO.widget.Button([連結 id]); 將連結轉換為按鈕
4. YUI 視窗Web 2.0 的「開新視窗」
YUI 視窗家族
YAHOO.widget.Panel
YAHOO.widget.Panel
YAHOO.widget.Dialog
YAHOO.widget.SimpleDialog
練習 4：YUI 視窗http://josephj.com/training/nsysu/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();
練習 4：YUI 視窗http://josephj.com/training/nsysu/yui-panel.html
close 是否要有關閉的按鈕
fixedcenter 是否要置中對齊
modal 是否為獨佔模式
underlay shadow’, ‘matte’
visible 預設是否顯示
width 視窗的寬度
{屬性1 : 屬性值 1, 屬性 2 : 屬性值 2}
5. YUI Get存取跨網域的資料
http://www.flickr.com/photos/tags/中山資管
http://api.flickr.com/services/feeds/photos_public.gne? tags=中山資管&format=json<script src=”
”></script>
練習 5：YUI Gethttp://josephj.com/training/nsysu/yui-get.html
Question 3：萬事皆備，該如何吸引使用
者來到你的網站？
Application Platform應用程式平台：YAP
將你的程式放在
全世界最多人使用的頁面
Yahoo! 美國新版首頁
Yahoo! 電子郵件信箱
利用 Mail/Contact API 做 Local 的建議
Pat Jameson 邀請朋友可共享晚餐
Yahoo! 個人頁
Pat Jameson 的部落格
Pat Jameson 的留言板
無名？運動？知識+？拍賣？
結合 Y!Sports 與某家售票系統
YAP Developer StudioYAP 應用程式的開發工具
在 Yahoo! 上開發應用程式給成千上萬人使用？Cool！
More?
BluePrint：在手機上開發程式
SearchMonkey：改變搜尋外觀
Fire Eagle：地址定位系統
OpenID：SSO 的統一作法
Quick Summary•Open APIs：把 Yahoo! 當成你的資料庫
•YUI：快速建立 Web 2.0 網站
•YAP：在 Yahoo! 放置你開發的程式
善用 Yahoo! 工具，可讓你的網站更 Powerful
Questions?
http://www.flickr.com/photos/phploveme/2847931240/
