1 / 41

Happy Designer 第四次聚會

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: 用更長的字來說明圖片

cira
Download Presentation

Happy Designer 第四次聚會

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Happy Designer第四次聚會 課程內容分享 2008/11/20

  2. 主題 • 你所不知道的網頁親和力十件事 • 無障礙網頁設計與Screen Reader • Wireframe, Mockup, Prototype • HTML 5 簡介 • GAEO(Google App Engine Oil) Overview

  3. 1網頁親和力十件事台灣部落格之父Jedi

  4. <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返回原來的網頁

  5. <9> Flash不再是無障礙網頁的禁忌 • MSAA(微軟主動協助工具)：讓Screen Reader讀 flash裡的純文字Element Alt Text,Element Group Alt Text • FLVPlayback 的 Captioning元件，可以加字幕格式: W3C Time Text XML • YouTube: Closed Caption ALT+F2

  6. YouTube: Closed Caption

  7. <8> 數位權利管理(Digital Rights Management) 會傷害親和力 網頁可用印表機print出來嗎？ 可以翻譯嗎？ 可以文字辨識嗎？ 可以複製到剪貼簿嗎？ 視障人可以用Screen Reader唸出來嗎？ MetaData可以在搜尋引擎上列出來嗎？

  8. <7> Opera愛用者有福了 • Opera是跨Device的瀏覽器：電腦，NDS, Wii • 即將有手機用的：Opera Mini • http://www.operamini.com/share/#bookamarklet • Selective Zoom

  9. <6>

  10. <6>要開始注意網頁在投影機顯示的結果 • 同樣配色，在電腦和投影機的顯示結果是不同的 • Opera在全螢幕模式下，Media type會從”screen” 變成”projector” • 為投影機特製CSS • <link rel=“stylesheet” type=“text/css” media=“projection”href=“projection.css” > pink blue orange green pink blue orange green

  11. <5> 親和力的精神:要有Alternative Way(替代方案) • 客服專線不是所有問題的Solution • WebATM如果無法使用，就打給銀行客服中心(敗) • 人為核對信用卡資料是一大資安漏洞 • 我們需要的是跨平台、跨瀏覽器、跨device的網路銀行服務 • (例：玉山銀行推出跨browser的webATM plug-in)

  12. <4> Creative Commons三位一體架構 Common Deed, Legal Code, MetaData 任何網頁…. 普通人可以看，奇怪的人可以看，機器可以看 普羅大眾，特定需求，使用者代理， 三種需求一次滿足 例：圖片 -- 縮圖，高解析圖，替代文字/說明網頁 那就是我們要使用微格(Microformat)的原因。

  13. <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. “ 只要加上適當的注解和替代文字

  14. <2> 料理東西軍，N管齊下 同時用所有手段，來傳達我們希望使用者得到的體驗 料理東西軍，在電視這種二度空間無法傳遞香味和口感，但他可以用色澤聲響、文字的鋪陳甚至來賓的表情，來形容食物的美味。

  15. <1> Jedi 出了一本網頁親和力的書…….(冷) 完整的10件事，請見 http://jedi.org/p4/slide/20081115_HappyDesigner/ .

  16. 2無障礙網頁設計與Screen Reader

  17. 為視障者提供網頁上的路標 明眼人：上下左右移動 視障者：線性移動

  18. 無障礙網頁設計的要點 • Access Key搭配錨點(Anchor)使用視障者很少用滑鼠 • NoScript替代方案 • 圖片、影片、聲音檔的替代文字(Alt) • Table：用來陳述資料，而非用來排版。善用<th>和<caption>增加表格的可讀性。 • Heading和List的使用：文件結構，非字型設定 • (6. 高對比顏色和較大的字級)

  19. Screen Reader 軟體：JAWS

  20. 可以列出所有的 Heading和Link標題 (階層式) 因此請不要在link上寫”click here”而已

  21. 用Screen Reader，來檢查網頁的Accessibility 台灣數位有聲書推展學會 http://www.tdtb.org/navigate/non-obstacle.html 北卡羅來納州立大學 Accessible IT @ NC Statehttp://www.ncsu.edu/it/access/webaccess/index.php .

  22. 3 Wireframe, Mockup, Prototype

  23. 專案中每個人的想法都不同 用文件來溝通是重要的

  24. 階段1. Wireframe: Function & Layout 讓使用者知道網頁的功能和項目排列，無需顯示視覺設計的細節。 階段2. Mockup: Form, Design, Visual 版面長寬高顏色相似，互動可以省略。 階段3. Prototype 要可以實際操作 按鈕要可以按、多媒體要可以播放、下拉選單要可以動作

  25. 1. Wireframe: Function & Layout 主要為了建構 IA

  26. Axure RP:Wireframe, Mockup, Prototype, Documentation, Sitemap….通殺

  27. 2. Mockup: Form, Design, Visual Balsamiq Mockups：比較親切一點 可以畫UI然後轉成xml放在wiki上 http://www.balsamiq.com/products/mockups

  28. 3. Prototype • paper prototyping • paper prototyping可以做到這樣 • http://tw.youtube.com/watch?v=GrV2SZuRPv0 • html prototypingpolypage: jQuery library • 可以模擬一些更換頁面的狀態 • 實例： http://elfcartel.clearleft.com/profile.php .

  29. 4 HTML 5簡介

  30. 與HTML 4不同的部份 • 結構 • 影像/聲音 不一定要再用<object>或<embed> • DOM • Doctype

  31. 結構 HTML 4 HTML 5 導覽 文章(新聞、部落格) 章節 次要的內容

  32. <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> • <section> • <h1>Level 2</h1> • <section> • <h1>Level 3</h1> • </section> • </section> • </section>

  33. 影像 <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> 布林值，可打開或關掉預設的控制列 縮圖 可依照不同媒體，指定不同的影片格式

  34. 聲音 <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>

  35. HTML 5 把 tag 都當作DOM物件來看待

  36. Doctype有兩種路線 html, xml(xhtml) <!DOCTYPE html> <html> <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>

  37. <canvas>點陣圖、動畫輸出的區域 <output>程式運算的輸出 <dialog><dt><dd></dialog>對話 <b>、<i>有了新的語意 <frameset>已經正式出局 • HTML 5 還在發展中， Browser則隨升級慢慢更新 • 向下相容HTML 4 HTML5 differences from HTML4http://www.w3.org/html/wg/html5/diff/ .

  38. 5 (GAEO)Google App Engine Oil

  39. 因為聽不懂，所以只能告訴大家它的特性： • 不用自己架Apache 硬碟不會滿，Server不會掛 • 有VSS控制，並可以在版本間切換 • 程式更新時直接Deploy就可以動作，不用重開 • 語言用python, 資料庫用BigTable • 用HTTP Request 來作取用的動作 (get) • 適合遠距離的Team Work .

  40. Thanks for your time. Q & A 更多的Happy Designer投影片 http://www.slideshare.net/group/happydesigner

More Related