happy designer 第四次聚會
DESCRIPTION
Happy Designer 第四次聚會. 課程內容分享. 2008/11/20. 主題 你所不知道的網頁親和力十件事 無障礙網頁設計與 Screen Reader Wireframe, Mockup, Prototype HTML 5 簡介 GAEO(Google App Engine Oil) Overview. 1 網頁親和力十件事 台灣部落格之父 Jedi. 關於 ALT 的二三事 Alt=“( 替代文字 )”TRANSCRIPT
Happy Designer 第四次聚會課程內容分享
2008/11/20
主題
• 你所不知道的網頁親和力十件事• 無障礙網頁設計與 Screen Reader• Wireframe, Mockup, Prototype• HTML 5 簡介• GAEO(Google App Engine Oil) Overview
1 網頁親和力十件事台灣部落格之父 Jedi
<10> 關於 ALT 的二三事
• 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 Minihttp://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( 替代方案 )
• 客服專線不是所有問題的 SolutionWebATM 如果無法使用，就打給銀行客服中心 (敗 )
• 人為核對信用卡資料是一大資安漏洞
• 我們需要的是跨平台、跨瀏覽器、跨 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
為視障者提供網頁上的路標
明眼人：上下左右移動視障者：線性移動
無障礙網頁設計的要點
1. Access Key 搭配錨點 (Anchor) 使用視障者很少用滑鼠
2. NoScript 替代方案3. 圖片、影片、聲音檔的替代文字 (Alt)4. Table ：用來陳述資料，而非用來排版。善用 <th> 和 <caption>增加表格的可讀性。
5. Heading 和 List 的使用：文件結構，非字型設定
(6. 高對比顏色和較大的字級 )
Screen Reader 軟體： JAWS
可以列出所有的 Heading 和 Link 標題
因此請不要在 link 上寫” click here”而已
(階層式 )
台灣數位有聲書推展學會http://www.tdtb.org/navigate/non-obstacle.html
北卡羅來納州立大學 Accessible IT @ NC Statehttp://www.ncsu.edu/it/access/webaccess/index.php
用 Screen Reader ，來檢查網頁的 Accessibility
.
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
http://www.balsamiq.com/products/mockups可以畫 UI然後轉成 xml放在 wiki 上
Balsamiq Mockups ：比較親切一點
• paper prototyping
paper prototyping 可以做到這樣 http://tw.youtube.com/watch?v=GrV2SZuRPv0
• html prototyping
polypage: jQuery library
可以模擬一些更換頁面的狀態實例： http://elfcartel.clearleft.com/profile.php
3. Prototype
.
4 HTML 5 簡介
與 HTML 4不同的部份
• 結構• 影像 /聲音 不一定要再用 <object>或 <embed>• DOM• Doctype
結構
HTML 4
HTML 5導覽
文章 (新聞、部落格 )
章節次要的內容
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Section: 可以是巢狀的<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
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>
影像
<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"></video>
縮圖
布林值，可打開或關掉預設的控制列
可依照不同媒體，指定不同的影片格式
<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"></audio>
聲音
HTML 5 把 tag 都當作 DOM物件來看待
<!DOCTYPE html> <html> <head>
<title>An HTML Document</title> </head> <body>
<h1>Example</h1> <p>This is an example HTML document. </body></html>
<?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>
Doctype 有兩種路線 html, xml(xhtml)
<br><img src=“pix.gif”>
<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