Happy Designer 第四次聚會 課程內容分享 2008/11/20
主題 你所不知道的網頁親和力十件事 無障礙網頁設計與Screen Reader Wireframe, Mockup, Prototype HTML 5 簡介 GAEO(Google App Engine Oil) Overview
1 網頁親和力十件事 台灣部落格之父Jedi
<10> 關於ALT的二三事 “D-link” (不是無線基地台) Alt=“(替代文字)”<150 words，SEO操作：17個中文字 Long Description: 用更長的字來說明圖片 很久以前: <img src=“foo.gif” title=“標題” alt=“替代文字” /> <a href=“foo-desc.htm”>D</a> “D-link” (不是無線基地台) 現在：longdesc <img src=“foo.gif” title=“標題” alt=“替代文字” longdesc=“foo-desc.htm” /> 某些瀏覽器才會支援 記得 longdesc=“foo-desc.htm”的最後，要設一個link返回原來的網頁
<9> Flash不再是無障礙網頁的禁忌 MSAA(微軟主動協助工具)： 讓Screen Reader讀 flash裡的純文字 Element Alt Text, Element Group Alt Text FLVPlayback 的 Captioning元件， 可以加字幕 格式: W3C Time Text XML YouTube: Closed Caption ALT+F2
YouTube: Closed Caption
<8> 數位權利管理(Digital Rights Management) 會傷害親和力 網頁可用印表機print出來嗎？ 可以翻譯嗎？ 可以文字辨識嗎？ 可以複製到剪貼簿嗎？ 視障人可以用Screen Reader唸出來嗎？ MetaData可以在搜尋引擎上列出來嗎？
<7> Opera愛用者有福了 Opera是跨Device的瀏覽器：電腦，NDS, Wii 即將有手機用的：Opera Mini http://www.operamini.com/share/#bookamarklet Selective Zoom
<6>
<6>要開始注意網頁在投影機顯示的結果 同樣配色，在電腦和投影機的顯示結果是不同的 Opera在全螢幕模式下，Media type會從”screen” 變成”projector” 為投影機特製CSS <link rel=“stylesheet” type=“text/css” media=“projection” href=“projection.css” > pink pink blue blue orange orange green green
<5> 親和力的精神:要有Alternative Way(替代方案) 客服專線不是所有問題的Solution WebATM如果無法使用，就打給銀行客服中心(敗) 人為核對信用卡資料是一大資安漏洞 我們需要的是跨平台、跨瀏覽器、跨device的網路銀行服務 (例：玉山銀行推出跨browser的webATM plug-in)
<4> Creative Commons三位一體架構 Common Deed, Legal Code, MetaData 任何網頁…. 普通人可以看，奇怪的人可以看，機器可以看 普羅大眾，特定需求，使用者代理， 三種需求一次滿足 例：圖片 -- 縮圖，高解析圖，替代文字/說明網頁 那就是我們要使用微格(Microformat)的原因。
<3> WCAG checkpoint 14.2 (Web Content Accessibility Guidelines) 適當加入圖片可提高網頁親和力 http://cita.disability.uiuc.edu/presentations/guidelines/slide12.html 14.2:”Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. “ 只要加上適當的注解和替代文字
<2> 料理東西軍，N管齊下 同時用所有手段，來傳達我們希望使用者得到的體驗 料理東西軍，在電視這種二度空間無法傳遞香味和口感，但他可以用色澤聲響、文字的鋪陳甚至來賓的表情，來形容食物的美味。
<1> Jedi 出了一本網頁親和力的書…….(冷) 完整的10件事，請見 http://jedi.org/p4/slide/20081115_HappyDesigner/ .
2 無障礙網頁設計與Screen Reader
為視障者提供網頁上的路標 明眼人：上下左右移動 視障者：線性移動
無障礙網頁設計的要點 Access Key 搭配錨點(Anchor)使用 視障者很少用滑鼠 NoScript替代方案 圖片、影片、聲音檔的替代文字(Alt) Table：用來陳述資料，而非用來排版。 善用<th>和<caption>增加表格的可讀性。 Heading和List的使用： 文件結構，非字型設定 (6. 高對比顏色和較大的字級)
Screen Reader 軟體：JAWS
可以列出所有的 Heading和Link標題 (階層式) 因此請不要在link上寫”click here”而已
用Screen Reader，來檢查網頁的Accessibility 台灣數位有聲書推展學會 http://www.tdtb.org/navigate/non-obstacle.html 北卡羅來納州立大學 Accessible IT @ NC State http://www.ncsu.edu/it/access/webaccess/index.php .
3 Wireframe, Mockup, Prototype
專案中每個人的想法都不同 用文件來溝通是重要的
階段1. Wireframe: Function & Layout 讓使用者知道網頁的功能和項目排列，無需顯示視覺設計的細節。 階段2. Mockup: Form, Design, Visual 版面長寬高顏色相似，互動可以省略。 階段3. Prototype 要可以實際操作 按鈕要可以按、多媒體要可以播放、下拉選單要可以動作
1. Wireframe: Function & Layout 主要為了建構 IA
Axure RP: Wireframe, Mockup, Prototype, Documentation, Sitemap….通殺
2. Mockup: Form, Design, Visual Balsamiq Mockups：比較親切一點 可以畫UI然後轉成xml放在wiki上 http://www.balsamiq.com/products/mockups
html prototyping polypage: jQuery library 3. Prototype paper prototyping paper prototyping可以做到這樣 http://tw.youtube.com/watch?v=GrV2SZuRPv0 html prototyping polypage: jQuery library 可以模擬一些更換頁面的狀態 實例： http://elfcartel.clearleft.com/profile.php .
4 HTML 5簡介
與HTML 4不同的部份 結構 影像/聲音 不一定要再用<object>或<embed> DOM Doctype
結構 HTML 4 HTML 5 導覽 文章(新聞、部落格) 章節 次要的內容
<header>...</header> <nav>...</nav> <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> Nav: 熟悉的list結構 <nav> <ul> <li><a ref="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav> Section: 可以是巢狀的 <section> <h1>Level 1</h1> <h1>Level 2</h1> <h1>Level 3</h1> </section>
影像 <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video> <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> 布林值，可打開或關掉預設的控制列 縮圖 可依照不同媒體，指定不同的影片格式
聲音 <audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg">
HTML 5 把 tag 都當作DOM物件來看待
Doctype有兩種路線 html, xml(xhtml) <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document. </body> </html> <br> <img src=“pix.gif”> <?xml version="1.0" encoding="UTF-8"? > <xmlns="http://www.w3.org/1999/xhtml" > <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body> </html> <br / > <img src=“pix.gif”/ > <p></p>
. <canvas>點陣圖、動畫輸出的區域 <output>程式運算的輸出 <dialog><dt><dd></dialog>對話 <b>、<i>有了新的語意 <frameset>已經正式出局 HTML 5 還在發展中， Browser則隨升級慢慢更新 向下相容HTML 4 HTML 5 differences from HTML 4 http://www.w3.org/html/wg/html5/diff/ .
5 (GAEO)Google App Engine Oil
因為聽不懂，所以只能告訴大家它的特性： 不用自己架Apache 硬碟不會滿，Server不會掛 有VSS控制，並可以在版本間切換 程式更新時直接Deploy就可以動作，不用重開 語言用python, 資料庫用BigTable 用HTTP Request 來作取用的動作 (get) 適合遠距離的Team Work .
Thanks for your time. Q & A 更多的Happy Designer投影片 http://www.slideshare.net/group/happydesigner