Josephj Yui Nctu 2

2009 Yahoo! Course @ NCTU

認真 + 感性：雅虎前端工程

3/24


Agenda

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

2009 Yahoo! Kimo Campus Recruiting

Homework作業檢討


作業檢討

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

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

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

http://140.113.88.2/wsa_hw2.htm

http://140.113.88.2/wsa_hw2.htm

http://140.113.214.2/~windsp/YHW/index.html

http://140.113.214.2/~windsp/YHW/index.html

http://140.113.214.2/~cltsai/hw2/

http://140.113.214.2/~cltsai/hw2/

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

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


作業檢討

• 知識+ 搜尋 APIhttp://tw.developer.yahoo.com/knowledge/api.php#SEARCH

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

搜尋 ipod:






作業檢討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://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

剛剛的頁面，實際的組成如下：

檢視原始碼力求整齊乾淨

CSS、JavaScript 在那裡？

整個網站的 JavaScript 都在此完全不需出現在 HTML 上

i9/class.js


練習：#masthead 模組載入後背景要變色$ cp -R /home/josephj/public_html/nctu2 ~/public_html/.

http://140.113.87.169/~joseph/nctu2/

http://winscp.net/download/winscp421.exePs. 不會用 VIM 可抓 WinScp：

$ vim ~/public_html/nctu2/i9/class.jssetTimeout(function() { var oAnim = new YAHOO.util.ColorAnim(‘this’, { backgroundColor:{ to:#ff0000 } }; oAnim.animate();}, 1000)

在適當的地方加上這一段

http://140.113.87.169/~joseph/nctu2/

http://140.113.87.169/~joseph/nctu2/

http://winscp.net/download/winscp421.exe

http://winscp.net/download/winscp421.exe


YUI LibraryAJAX / Charts / Uploader

1. YUI AJAXhttp://josephj.com/training/nctu2/sample/yui-ajax.html

Web 2.0 的基礎

http://josephj.com/training/yui-monday/connection-manager/


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/nctu2/sample/yui-ajax.html

http://josephj.com/training/ncu/html-module.html

http://josephj.com/training/ncu/html-module.html

2. YUI Chartshttp://josephj.com/training/nctu2/sample/yui-chart.html

用 JavaScript 產生 Flash 的圖表



3. YUI Uploaderhttp://josephj.com/training/nctu/yui-uploader.html

配合 Flash，製作更便利的上傳介面



傳統上傳介面，一個框框只能選一個

使用者完全無法知道上傳進度

無名的上傳介面就是用 YUI Uploader 做的

可以知道上傳進度、一次多個檔案


Semantic Web寫程式應該是有意義且易於維護的

語意 vs. HTML

Semantic

幾乎無法從原始碼了解網頁的構成

沒有語意的網頁

從原始碼就可以看出基本的結構

有語意的網頁

有語意的好處

• 容易維護、除錯• 檔案較小、速度快• 不需要安裝像是 Dreamweaver 等所見及所得的軟體即可撰寫

• 有助於搜尋引擎最佳化（Search Engine Optimization）

兩者的差異點

•沒有語意的 HTML，使用 <table/>（表格）做排版，但表格應該使用在資料的呈現、而非排版。

•沒有語意的 HTML，在原始碼中充滿了樣式（顏色、粗細、寬度、字型）

•有語意的 HTML：使用適合的標籤、完全不管樣式。

HTMLCSS

JavaScript

負責結構

負責樣式

負責行為

應做到完全獨立、互不干擾Layered Semantic Markup

如何做到 Semantic

• 徹底了解每個 HTML 標籤的意義、不使用樣式類的標籤及屬性

• HTML 如今只定義結構• 樣式由 CSS 、特效由 JavaScript 負責

• 鼓勵大家少使用 Dreamweaver 或 Frontpage，這樣才會去思考頁面的原始碼。

開始來寫 HTML 吧

必備資源• http://www.w3schools.com/html/• 推薦工具書：

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




網頁的基本結構<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body>

</body></html>

http://www.w3.org/TR/html4/strict.dtd





</body></html>

DOCTYPE 是決定你所使用的（X）HTML 版本及是否符合標準






</body></html>





顯示標題

•一本書、一篇文章、一篇部落格，必定有它的標題層次

•我們使用 <h1> ~ <h6> 來表示這些標題層次

•h1 是此文件的大標題

顯示標題<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>HTML 學起來真的很簡單</p> <h2>HTML 的基礎知識</h2> <p>這裡將說明最基礎的知識。首先，您應該正式了解用語。</p> <h3>關於元素與屬性</h3> <p>所謂元素</p></body></html>





段落 <p>~</p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>HTML 學起來真的很簡單</p> <h2>HTML 的基礎知識</h2> <p>這裡將說明最基礎的知識。首先，您應該正式了解用語。</p> <h3>關於元素與屬性</h3> <p>所謂元素</p></body></html>





強調 <em>~</em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>如果學 HTML，但不了解 <em>Semantic 的意義</em>，那等於白學。</p></body></html>





強調 <strong>~</strong>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <h1>1 天學會 HTML</h1> <p>如果學 HTML，但不了解 <strong>Semantic 的意義</strong>，那等於白學。</p></body></html>





區塊 <div>~</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><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 "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>這裡放標題</title></head><body> <div> <h1>這樣做就對了</h1> <div> <span>連結：</span> <a href=”...”>Yahoo!奇摩</a> </div> </div></body></html>





定義清單

Orz 失意體前屈，原本是日本網路上流行的表情符號：＿|￣|○。它看起來像是一個人跪倒在地上，低著頭，一副「天啊，为什么是这样」的動作，雖然簡單卻很傳神。

冏原名臉部表情異常緊縮暫時即性症候群，是一種源自於網路象形文字(或心情圖示)，腦殘帝國為其發源地，儼然已經成為一種新興的網路文化。

定義清單

<dl> <dt>Orz</dt> <dd>失意體前屈，原本是日本網路上流行的表情符號：＿|￣|○。它看起來像是一個人跪倒在地上，低著頭，一副「天啊，为什么是这样」的動作，雖然簡單卻很傳神。</dd> <dt>冏</dt> <dd>原名臉部表情異常緊縮暫時即性症候群，是一種源自於網路象形文字(或心情圖示)，腦殘帝國為其發源地，儼然已經成為一種新興的網路文化。 </dd></dl>

清單列表跑步環島身上裝備

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> <th>藍芽：</th><td>有</td><td>無</td></tr><tr> <th>轉手性：</th><td>高</td><td>低</td></tr></table>

利用 id 與 class 屬性強化定義<ol class="bibliography"> <li> <cite>"Colorimetry, Second Edition", CIE Publication 15.2-1986,ISBN 3-900-734-00-3.</cite> </li> <li> <cite>"Cascading Style Sheets, level 1", H. W. Lie, B. Bos, 17 December 1996.</cite> </li> <li> <cite>"Cascading Style Sheets, level 2, CSS2 Specification", B. Bos, H. W. Lie, C. Lilley, I. Jacobs, 12 May 1998</cite> </li></ol>

id：代表一個模組，一頁中不能重複id=”navigation”, id=”relate-site”, id=”login”

同樣都是有順序的清單、用 class 給予定義

必讀

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

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

http://tantek.com/presentations/2005/09/elements-of-xhtml/




http://www.456bereastreet.com/archive/200410/bring_on_the_tables/







Accessibility無障礙網頁

Agenda

1.About2.Accessibility3.Usability & AJAX4.Act Now5.Conclusion

1. About為什麼要講此主題？

2008/7 到 UK 參加 YDN International Summit

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



緣份 1：沒有螢幕的工程師

Artur Ortega

• 重度視障

• 軟體工程師

• 有空會幫忙做 User Testing

部落格對於 Artur 的部份迴響很多

推薦數居然快比跑步環島還高了 :p

• 網友 Ated

在公司，不管我怎麼說，就是沒有辦法說服他

們重視障礙朋友的上網權。

他們的理由都是，這些人只是一小部份的使用

者，不用去管。

尤其是購物網站，如果能夠讓障礙人士更輕鬆

方便的購物，是不是就能夠為這些真的外出不

方便的人們提供更好的生活方式？網站經營者

應該要能夠為使用者想更多，而不是排擠使用

者。

• 網友 chph

看到知識+ 的圖片，想請教格主，是否現在台

灣雅虎都不重視 No Script 了？

當我關閉 js，進入任一知識團首頁，最新收藏

知識、最新發表文章等等，按下更多後就只見

一個資料讀取中... 的圖片停在頁面中不為所動

了、無法取得更多資料。

這樣的作法讓我蠻失望的，像 YUI 本身採取非

侵入式 js 開發，使用範例也都有考慮到優雅降

級。

• 網友 Joshua

我之前在拍盲人的紀錄片。

就訪談過很多盲人。

其實他們都很好學，電腦也能幫助他們很多。

特別是在跟下一代的溝通上。

希望 Yahoo 可以加油。

照顧這群。這就是大公益阿。

緣份 2：Accessibility Hack Day

YDN EvangelistChristian Heilmann

Accessibility Hack Day

9/19 一群被各種限制阻擋無法正常使用 Web 的使用者講出他們的窘境。

9/20 參與的 Hacker 基於解決這些 User 的不便、做出實用的作品。

＠London，Held by Christian Heilmann

http://scriptingenabled.org/

http://scriptingenabled.org

http://scriptingenabled.org

驚!

視障者最愛的網站：「 Yahoo! 奇摩拍賣」

2. Accessibility發揮博愛的精神，接受每個人

不管任何人在任何情況下

你的網頁都應該是可存取的

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 (sufficient) JavaScript

PPK on JavaScript

深入親和力Dive Into Accessibility

http://dia.z6i.org

社會中有許多這樣的人

你有想到他們嗎？

• Jackie 因車禍失明，但喜歡學習、廣泛閱讀。線上購物對他很方便。他使用最新版的 JAWS：一套在 Windows/IE 的螢幕朗讀軟體，在網路上購買有聲書。

• Michael 是色盲，所有的衣服都標上字母來區分。二手遊戲機台、利用網路買賣，但家裡只有 56K 撥接，所以利用 Links 的純文字瀏覽器。也會利用 Opera 來關閉圖片。橫向的紅綠燈位置不一定。

• Bill 因為越戰，右手臂沒辦法移動、左手會不自主擺動。退役後用他妹妹送的 Red Hat + Mozilla 電腦上網跟朋友聊天，甚至還製作了論壇。他幾乎沒辦法使用滑鼠，只能用方向鍵與 Tab 瀏覽網頁。

• Lilian 從香港移民到美國、擔任大電信公司的行政助理：使用 IE，但公司規定不能使用 Java、JavaScript、ActiveX 以及 Flash。另外他的英文與視力都不好，總喜歡把字型放到最大以方便閱讀，他一直

很困惑為什麼 CNN.com 的字型沒有辦法放大。

• Marcus 因父母吸毒，天生視盲，在 AT&T 轉譯中心工作（專門服務聽障的服務），聽障人士會用鍵盤輸入，Marcus 會立刻在他的布拉格點字器收到，唸給另一方聽，而另一方講了任何話，Marcus 都會以神速回給聽障人士。讀網頁的方式：用純文字瀏覽器 Lynx 配合布拉格點字、一次讀一列。

http://dia.z6i.org

http://dia.z6i.org

2.1：考慮沒有 JS 特效的情況

JS 特效很炫，但可能會不 Work

• 瀏覽器支援度• 連線下載問題• 使用者關閉• 安全性考量• 速度考量

• Error 終止執行

守則一：製作沒有 JS 的配套措施

• 首先避免以下的想法：• 此網站只考慮有 JS 的情況

• 誰叫使用者要把 JS 關掉

• RD 套版時先把 JS 關掉

• IE：Web Accessibility Toolbarhttp://www.visionaustralia.org.au/info.aspx?page=1569

• FF：Web Developer Extensionhttps://addons.mozilla.org/en-US/firefox/addon/60

https://addons.mozilla.org/en-US/firefox/addon/60

https://addons.mozilla.org/en-US/firefox/addon/60

即使沒有 JS，使用者還是可以用

至少也需要做到提示

<form>...

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

JavaScript 的濫用 2：大多數的表單的取消按鈕

較好的方式：Submit 後用 PHP 做 Redirection

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

JavaScript 的濫用 3：連結的 href 非真實路徑

造成無法分頁：連結不應使用 JavaScript 或 #

2.2：考慮沒有滑鼠的情形

不使用滑鼠的族群

• 視障者• 快速鍵愛好者• 手部的殘缺或疾病

RD 們滑鼠不要用太多啊

腱鞘囊腫

增強鍵盤支援

• 增加 tabindex 屬性（Tab 切換）

• 增加 accesskey 屬性（快速鍵）

• 用 JS 定義鍵盤快速鍵

• 採用有鍵盤控制的函式庫• YUI TabView（頁籤組）控制項

• YUI Menu（選單）控制項

Google Calendar 的鍵盤快速鍵

採用有鍵盤控制的 Library

YUI Menu（選單）控制項

YUI Tabview（頁籤組）控制項

採用有鍵盤控制的 Library

無名相簿：按下哪個鍵換到下張圖？

以 JavaScript 做快速鍵

揪甘心ㄝ！

2.3：Screen Reader 是啥？

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）

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


守則三：正確的HTML標

• 圖片• 所有的圖片皆須提供圖說屬性：alt

• 精確地提供圖片的內容• 廣告• <img src=”...” alt=”廣告：免費學會建築室內設計的課程申請”>

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



3. Usability一切攏是為了 User 啊

User Testing Lab試圖瞭解使用者需求，讓網站更好用

Usability

• = User Ability

• = 易用性

• 基本：符合使用者習慣• 進階：更方便、甚至創新

AJAX & Usability網頁進化論

在 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?

• 將散落各地的文件透過連結串連• 並沒有考慮到會發展成應用程式

W3C Team DirectorTim Berners-Lee

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.

網址不改變，無法加入最愛

Bookmark

如何讓使用者得知

內容已更新？

Inform the User

上述基本功能無法使用：不符合 Accessibility

Accessibility

Usability造成使用者不習慣，當然更不符合 Usability

進化？還是退化？

• SEO 搜尋引擎最佳化不易

•前端效能問題程式複雜度加倍

•所需時間增加兩到三倍• User 真的喜歡嗎？

一路上還會碰到的魔王

Usability 與 Accessibility 是一體兩面沒有 Accessibility、就沒有 Usability

4. Act Now我可以對 Accessibility 做什麼奉獻

Audio Captcha：讓視障可以使用

關於 Audio Captcha

• 即使是美國，申請使用的服務仍很少• 中文化需要有人身先士卒

Hacking for Good!

Easy YouTube

OffScreen：讓視障也可存取 Flash 介面

問題：盲人無法存取 Flash Video Player

利用 CSS 將按鈕隱藏起來

Accessibility in Yahoo! MessengerYahoo! Accessibility Program Manager ,Victor Tsaranhttp://video.yahoo.com/watch/329037/2145363

http://video.yahoo.com/watch/329037/2145363


修改一下讓按鈕顯示

OffScreen：讓視障也可存取 Flash 介面

原來 <button> 按鈕是存在於頁面上的

Accessibility in Yahoo! MessengerYahoo! Accessibility Program Manager ,Victor Tsaranhttp://video.yahoo.com/watch/329037/2145363



找相關人做使用者測試Yahoo! Live Accessibility Testing

http://twiki.corp.yahoo.com/view/Devel/UserResearchForAPG#User_2_Alvahttp://produce.yahoo.com/mquoc/YLive_UR/

Photo epileptic user Mobile disabled user

http://twiki.corp.yahoo.com/view/Devel/UserResearchForAPG#User_2_Alva

http://twiki.corp.yahoo.com/view/Devel/UserResearchForAPG#User_2_Alva

http://produce.yahoo.com/mquoc/YLive_UR/

http://produce.yahoo.com/mquoc/YLive_UR/

遵守 Y! Accessibility Guidelines • 字與背景的明顯對比• 使用標題：

<title/>, <h1/>~</h6/>

• 使用有意義、非裝飾性的 HTML 標籤

• 所有的外觀以 CSS 定義

• 字體大小在各瀏覽器要可自由縮放

• 所有的連結、表單、功能在沒有滑鼠時都可用

• 每張圖片 <img/> 都要有 alt 的說明欄位

• 每個表單欄位都要有 <label/> 對應

• <table/> 內的輔助屬性：summary、scope、 id、headers、summary

• JS 的處理：

• 沒有 JS 也可用

• 需支援鍵盤操作

• 以無障礙支援科技測試http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines



參與「無障礙網路空間」研討會實際地去了解這些人的需求、思考如何在自己的工作中貢獻

• 無法使用 Iframe

• 無法辨認 Web 2.0 的模組：TabView、下拉式選單

• 表單使用的困難：鮮少使用 <label/>

• 需要快速鍵的設置

無障礙科技協會心得

或許製作的人是最需要去上課的

Conclusion網路是良心事業

Yahoo!奇摩是市占率最高的入口網站。

即使只能造福到 0.1% 的使用者，我們仍應該去做，因為他們才是真正最需要

使用網路的一群人。

我們不做，也沒人會做了

Customer Fixation這是我們的理念之一

Maximize Our Profit這是實際我們最重視的

Maximize Our Users這是我們應該要做的

It’s up to you to make things better.

- Christian Heilmann, Again with Accessibility

2009 Yahoo! Course @ NCTUPs. 感謝 Adam Wang 提供如此精美的素材！http://www.flickr.com/photos/adamp3

Thank You!

http://www.flickr.com/photos/adamp3

http://www.flickr.com/photos/adamp3

Josephj Yui Nctu 2

Technology

Transcript of Josephj Yui Nctu 2