NSYSU MIS
2009/3/5
josephj

Hi! josephj
• 2.5 F2E
• 0.5 Evangelist
• RD
@josephj6802
http://josephj.com
josephj6802@gmail.com

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

<script src=”http://api.flickr.com/services/feeds/photos_public.gne?
&format=json&jsoncallback=getFlickrData ”></script>
tags=

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
UI YUI UI
Button Def. But.
Menu
Label
Text Field
Label
Label
Label
Text Area
click me

YUI

Library

Developer Network Home Help Site Search
Design Pattern Library
Yahoo! Developer Network > Design Pattern Library > Auto Complete
Auto Complete
QUICK JUMP
Problem Summary
Solution
The user needs to enter an item into a text box which could ambiguous or hard to
Rationale
remember and therefore has the potential to be mis-typed.
Accessibility
EXAMPLE:
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
Auto completion of contacts in Yahoo! Mail Beta Y! Search (JSON)
Y! Search (XML)
Use When In-Memory (array)
In-Memory (function)
The suggestions can be pulled from a manageable set of data.
Flickr (XML)
The input item can be entered in multiple ways. Flat data
Playground
The input item can be matched with a specific data item in the system.
Speed and accuracy of entry is an important goal.
Show with revisions
The total number of items would be too large or inconvenient for displaying in a
standard drop down box.
Solution This work is licensed under a
Creative Commons Attribution 2.5
License.
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.
Copyright © 2005-2007 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings

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”>
ID .hd, .bd, .ft
<p> </p> header body footer
</div>
<div class=”ft”>
<a href=”...”> ... </a>
</div>
</div>

yhtw_masthead
ykpmt
ykpsb
ykpimt ykpadv
ykpimqa ykpimr
ykpug
ykpiht ykpiht

ykpsb
• ykp + prefix
• sb search box
• inc/search_box.php

id CSS namespace
form .extra
[CSS]
[HTML]
<style>
<div id=”ykpsb”>
#ykpsb {
<div class=”bd clearfix”>
margin-bottom:10px;
<form ...>
}
...
#ykpsb form {
</form>
float:left;
<div class=”extra”>
}
...
#ykpsb .extra {
</div>
float:right;
</div>
}
</div>
</style>

1 HTML 3 Mins
http://josephj.com/training/yzu/html-module.html
1. id
2. hd, bd, ft class
3. CSS
font:bold 16px;
background:#ffe;
color:#369;

2. YUI Grids
DIV + CSS

950px
240px
50%, 50%

YUI Grid Builder
http://developer.yahoo.com/yui/grids/builder/

3. YUI AJAX
Web 2.0
http://josephj.com/training/yzu/yui-ajax.html

YUI AJAX
YUI AJAX Connection Manager
2. Request
1. Request
A
3.
A
4.

YUI AJAX
AJAX
2. Request
1. JavaScript Request
A
3.
A
4.

3 YUI Connection
http://josephj.com/training/yzu/yui-ajax.html

4. YUI Get Utility
http://josephj.com/training/yzu/yui-get.html

<script src=”
http://api.flickr.com/services/feeds/photos_public.gne?tags=yzu&lang=en-us&format=json“></script>

4 YUI Get
http://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
(true false)
autosubmenudisplay
hidedelay
n
(true false)
lazyload

6. YUI
UI

YUI Button
HTML
YUI Button

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.Dialog
YAHOO.widget.Panel
YAHOO.widget.Panel
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!

...
Google
Maps
...
Yahoo! Map
http://www.bnext.com.tw/LocalityView_6980

Yahoo! 3rd Party

Social

ilove7388
... orz...

ilove7388

Social =

+
Social

Social Platform

Following

Follower

Social Open Social

2007/5/24
Facebook
F8
http://www.flickr.com/photos/kk/2327597086/

Social
Facebook
FQL FBML FBJS

..

OpenSocial Social Applications
API Spec

OpenSocial

Yahoo! OpenSocial

10/17 Yahoo! Profile

Social Directory
Profile
Contacts
Address Book Messenger
Relationship
User Status
Updates
/
http://developer.yahoo.com/social/

Twitter
Twitter ?
Yahoo! Messenger
Updates

MyBlogLog Twitter
Y!M
http://manage.community.yahoo.com/
vitality/

/ /

Next?

Application Platform
YAP

Yahoo!

Mail/Contact API Local
Yahoo!

Yahoo!
Pat Jameson
Pat Jameson
Pat Jameson

Y!Sports
Yahoo! +

YAP Developer Studio
YAP

View
Small View Application
Lightbox View
Sever-side Script
Application 760px YAP
Web Server
User App
HTML YML
Small View 300px+ 250px Yahoo! User App
Application

App
HTML CSS JavaScript YML YQL

HTML + CSS + JavaScript
YAP YML YQL

YML Yahoo! Markup Language
Text
<!-- -->
<yml:friend-selector uid=\"viewer\"/>
YML UI

YAP SDK

PHP SDK
Text
OAuth YQL Social API

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/