NSYSU MIS2009/3/5

科技 開放 雅虎站在巨人的肩膀上、開發網站

josephj

• 2.5 年前端工程師（F2E）

• 0.5 年科技推廣傳教士（Evangelist）

•目前在無名小站擔任工程師（RD）

@josephj6802http://josephj.com

josephj@yahoo-inc.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/

Thank You！

josephj@yahoo-inc.com