Josephj Yui Nctu 2

3/24

2009 Yahoo! Course @ NCTU

Agenda

• Homework
• Sharing
• *Simple* JS Architecture
• YUI AJAX / Chart / Uploader
• Semantic Web
• Accessibility


Homework

2009 Yahoo! Kimo Campus Recruiting

http://josephj.com/entry.php?id=224

http://140.113.88.2/wsa_hw2.htm
YUI GET YUI Grids
Meta charset script </body>
YAHOO.util.Event

http://140.113.214.2/~windsp/YHW/index.html
IE6 Quirks Mode Code
JavaScript

http://140.113.214.2/~cltsai/hw2/
http://www.cs.nctu.edu.tw/~limc/yahoo/yahoo_hw2.html

• + API
http://tw.developer.yahoo.com/knowledge/api.php#SEARCH

ipod:
http://tw.knowledge.yahooapis.com/v1/SEARCH?appid=Fbn2UILIkYoPqtaNTG6aFYgkHY9piA2A8A--
&p=ipod&format=json&callback=getData


http://tw.knowledge.yahooapis.com/v1/SEARCH?appid=Fbn2UILIkYoPqtaNTG6aFYgkHY9piA2A8A--
&p=ipod&format=json&callback=getData


http://josephj.com/training/nctu/homework-1.html

YUI GET
http://josephj.com/training/nctu/homework-2.html

+
http://developer.yahoo.com/yql/console


Sharing


3/22

http://www.slideshare.net/secret/
Mq3W9SHxniXLN3


Yahoo! ...

http://www.slideshare.net/secret/DqGOKP0GLsI4Lk


...
• Done
• title
•
•
•
• Todo
•
• Static File Build Process


*Simple*
JS Architecture
JavaScript


•

•
JavaScript

• 30 JavaScript

masthead

nav

article ad

relate-link

ykpiht

JavaScript
HTML

i9/class.js

http://140.113.87.169/~joseph/nctu2/

#masthead
$ cp -R /home/josephj/public_html/nctu2 ~/public_html/.
$ vim ~/public_html/nctu2/i9/class.js
setTimeout(function() {
var oAnim = new YAHOO.util.ColorAnim(‘this’, {
backgroundColor:{
to:#ff0000
}
};
oAnim.animate();
}, 1000)

Ps. VIM WinScp
http://winscp.net/download/winscp421.exe


YUI Library
AJAX / Charts / Uploader


1. YUI AJAX
Web 2.0
http://josephj.com/training/nctu2/sample/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/nctu2/sample/yui-ajax.html

2. YUI Charts
JavaScript Flash
http://josephj.com/training/nctu2/sample/yui-chart.html

3. YUI Uploader
Flash
http://josephj.com/training/nctu/yui-uploader.html

Semantic Web


•
•
• Dreamweaver

• Search Engine
Optimization

• HTML <table/
>

• HTML

• HTML

Layered Semantic Markup

HTML
JavaScript
CSS

Semantic
• HTML

• HTML
• CSS JavaScript
• Dreamweaver
Frontpage

• http://www.w3schools.com/html/
•

<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://
www.w3.org/TR/html4/strict.dtdquot;>
<html>
<head>
<meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;>
<title> </title>
</head>
<body>

</body>
</html>

<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

DOCTYPE
X HTML

•
• <h1> ~ <h6>

• h1

<em>~</em>
<html>
<head>
<title> </title>
</head>
<body>
<h1>1 HTML</h1>
<p> HTML <em>Semantic </em> </p>
</body>
</html>

<strong>~</strong>
<html>
<head>
<title> </title>
</head>
<body>
<h1>1 HTML</h1>
<p> HTML <strong>Semantic </strong>
</p>
</body>
</html>

<div>~</div>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/
strict.dtdquot;>
<html>
<head>
<title> </title>
</head>
<body>
<div>
<a href=”about.html”> </a>
<a href=”forum.php”> </a>
</div>
<div>
<h1> </h1>
<p> josephj.com <p>
</div>
</body>
</html>

<span>~</span>
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/
strict.dtdquot;>
<html>
<head>
<title> </title>
</head>
<body>
<div>
<h1> </h1>
<div>
<span> </span>
<a href=”...”>Yahoo! </a>
</div>
</div>
</body>
</html>

Orz
| |○
这样

(
)

Nike

Dphiten
Nike Dry Fit
Nike

Casio

Nike
Adidas
Sony Cybershot
Dakine

<h2> </h2>
<ul>
<li>Nike </li>
<li> </li>
<li>Dphiten </li>
<li>Nike Dry Fit </li>
<li>Nike </li>
<li> </li>
<li>Casio </li>
<li> </li>
<li>Nike </li>
<li>Adidas </li>
<li>Sony Cybershot </li>
<li>Dakine </li>
</ul>

4:00 (Energy-in + )
5:00 GPS
5:00 ~ 10:00 ( , )
11:00 ~ 12:00
13:00 ~ 16:00
16:00 ~ 19:00 , ,
19:00 ~ 21:00
21:30

<h2> </h2>
<ol>
<li>4:00 (Energy-in + )</li>
<li>5:00 GPS </li>
<li>5:00 ~ 10:00 ( , ) </li>
<li>11:00 ~ 12:00 </li>
<li>13:00 ~ 16:00 </li>
<li>16:00 ~ 19:00 , , </li>
<li>19:00 ~ 21:00 </li>
<li>21:30 </li>
</ol>

<table></table>
120G + 1G RAM Eee PC 8G + 1G RAM

Intel 800MHz / 120G HDD / 1G RAM Intel Mobile / 8G HDD (Flash) / 1G RAM

29,900 14,490

Vista XP

130 30 Web

<table></table>
<h3> </h3>
<table>
<tr>
<th></th><th> 120G + 1G RAM </th><th> Eee PC 8G + 1G RAM </th>
</tr>
<tr>
<th> </th><td>Intel 800MHz / 120G HDD / 1G RAM</td><td>Intel Mobile / 8G HDD (Flash) / 1G RAM</td>
</tr>
<tr>
<th> </th><td>29,900</td><td>14,490</td>
</tr>
<tr>
<th> </th><td>Vista</td><td>XP</td>
</tr>
<tr>
<th> </th><td>130 </td><td>30 Web </td>
</tr>
<tr>
<th> </th><td> </td><td> </td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

id class
class
<ol class=quot;bibliographyquot;>
<li>
<cite>quot;Colorimetry, Second Editionquot;, CIE Publication 15.2-1986,
ISBN 3-900-734-00-3.</cite>
</li>
<li>
<cite>quot;Cascading Style Sheets, level 1quot;, H. W. Lie, B. Bos,
17 December 1996.</cite>
</li>
<li>
<cite>quot;Cascading Style Sheets, level 2, CSS2 Specificationquot;,
B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite>
</li>
</ol>

id
id=”navigation”, id=”relate-site”, id=”login”

• The Elements of Meaningful XHTML
http://tantek.com/presentations/
2005/09/elements-of-xhtml/

• Bring on the tables
http://www.456bereastreet.com/
archive/200410/
bring_on_the_tables/

Accessibility


Agenda
1. About
2. Accessibility
3. Usability & AJAX
4. Act Now
5. Conclusion

http://www.ﬂickr.com/photos/phploveme/2675997575/in/set-72157606174033384/

2008/7 UK
YDN International Summit

Artur Ortega
•
•
• User Testing

• chph
+
No Script
js

...

YUI
js

YDN Evangelist
Christian Heilmann

2 Accessibility Hack Day

Accessibility Hack Day

http://scriptingenabled.org/

Web
9/19

Hacker User
9/20

London Held by Christian Heilmann

Accessibility means that your pages remain
accessible to anyone, under all circumstances,
especially when the user suffers from a
condition she cannot change, for instance
diminished eyesight, or has a browser that
does not support (sufﬁcient) JavaScript
PPK on JavaScript

• Jackie
JAWS Windows/IE

• Michael
56K Links
Opera
Dive Into Accessibility
• Bill
http://dia.z6i.org Red Hat + Mozilla
Tab

• Lilian IE
Java JavaScript ActiveX Flash

CNN.com

• Marcus AT&T
Marcus
Marcus
Lynx

JS Work

•
•
•
•
•
• Error

JS
•
• JS
• JS
• RD JS
• IE Web Accessibility Toolbar
http://www.visionaustralia.org.au/info.aspx?page=1569

• FF Web Developer Extension
https://addons.mozilla.org/en-US/ﬁrefox/addon/60

JavaScript 1 JS PHP
<script>
function formSubmit() {
var f = this;
f[‘date’].value = f[‘year’].value + ‘/’ + f[‘month’].value +
‘/’ + f[‘day’].value;
}
</script>
<form onSubmit=”formSubmit”>
<select name=”year”>...</select>
<select name=”month”>...</select>
<select name=”day”>...</select>
<input type=”hidden” name=”date”>
</form>

Accessibility Maintenance

JavaScript 2

<form>
...
<input type=”reset” onclick=”history.go(-1);” value=” ”>
</form>

Submit PHP Redirection

JavaScript 3 href

<a href=”javascript:createWork('20080916');”>2008/09/16</a>

JavaScript #

• tabindex Tab
• accesskey
• JS
•
• YUI TabView
• YUI Menu

Screen Reader

•
• Screen Reader
http://blog.yam.com/twacc/article/10271539

•
•
• JAWS
•

http://tw.youtube.com/watch?v=AmUPhEVWu_E

HTML
•
• <font size=”6”> </font>
• <titile>Yahoo! </title>
• <h1>Yahoo! </h1>
• <h2> </h2>
• <h3> Mac </h3>
• <h2> </h2>
http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines Page Structure

HTML
•
• alt
•
•
• <img src=”...” alt=”
”>

http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines Image

Usability
• = User Ability
•=
•
•

AJAX

•
• Refresh Page
• JavaScript
•
•

AJAX means loading information
and updating an interface partially.
- Christian Heilmann, Again with Accessibility

Usability
•
•

Awesome AJAX!
• AJAX
• AJAX
•
• Usability
• User

Danger!
Don’t build your website based on assumption!

Why Danger?
The World Wide Web (W3) initiative links
related information throughout the globe.
HTML provides one simple format for
providing linked information, and all W3
compatible programs are required to be
capable of handling HTML.
W3C Team Director
Tim Berners-Lee

•
•

Accessibility
Accessibility

Usability
Usability

Usability Accessibility
Accessibility Usability

Hacking for Good!

Easy YouTube

Accessibility in Yahoo! Messenger
Yahoo! Accessibility Program Manager ,Victor Tsaran
http://video.yahoo.com/watch/329037/2145363

Flash Video Player

CSS

OffScreen Flash

Accessibility in Yahoo! Messenger
Yahoo! Accessibility Program Manager ,Victor Tsaran
http://video.yahoo.com/watch/329037/2145363
<button>

OffScreen Flash

Photo epileptic user Mobile disabled user

Yahoo! Live Accessibility Testing
http://produce.yahoo.com/mquoc/YLive_UR/
http://twiki.corp.yahoo.com/view/Devel/UserResearchForAPG#User_2_Alva

Y! Accessibility Guidelines
• • <img/> alt

•
•
<title/>, <h1/>~</h6/>
<label/>
•
• <table/>
HTML
summary scope
• CSS id headers summary
• • JS
• JS
• •
•
http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines

• Iframe
• Web 2.0 TabView

• <label/>
•

It’s up to you to
make things better.
- Christian Heilmann, Again with Accessibility

Thank You!

Ps. Adam Wang
http://www.ﬂickr.com/photos/adamp3

Josephj Yui Nctu 2

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Josephj Yui Nctu 2

Similar to Josephj Yui Nctu 2 (20)

More from Joseph Chiang

More from Joseph Chiang (20)

Recently uploaded

Recently uploaded (20)

Josephj Yui Nctu 2