2008年3月29日 星期六

Lab 20: accessibility checker


1. Using A-Checker, Check the following 2 sites for accessibility.
*http://bloggercamp.blogspot.com/2007/01/2007.html
*the page you fix with ALT tags
ps:
A-Checker (version 0.8.6)
ATRC University Of Toronto, 1 January 2006
Description: Online accessibility checker that tests web pages for conformance to various accessibility guidelines.
Language: English, Italian
Guidelines: WCAG 1.0, Section 508, Stanca Act, BITV
Assistance: Generating Reports, Step-by-step evaluations
Automatic checking: Single pages, Restricted pages
Formats: HTML, XHTML
Online service: Online checker
Reports: HTML
License: Free Software, Open Source

Lab 19: Installing Mozilla/Firefox Accessibility Extension



Mozilla/Firefox Accessibility Extension (version 0.99.1.1851)
University of Illinois at Urbana/Champaign, 25 November 2005Description: The Mozilla/Firefox Accessibility Extension adds features to Mozilla or Firefox to make it easier for people with disabilities to view and navigate web content based on the structural markup used to create the web page. The Mozilla/Firefox accessibility extension can be used directly by everyone to navigate the structure of a HTML web resource. It can be used by authors to check their structural markup to make sure it matches the actual content structure of the resource.
Language: English, Spanish
Guidelines: WCAG 1.0, Section 508
Assistance: In-page feedback, Page transformation
Formats: HTML, XHTML
Browser: Mozilla/Firefox
License: Free Software, Open Source

Lab 18: Webpage Accessibility


Use Nvu or Notepad to edit the following homepageat http://bloggercamp.blogspot.com/2007/01/2007.html
1. You can copy and paste the content to your Nvu.
2. Take a look at the HTML 標籤, HTML 原始碼
3. Save your editings and preview your webpage using Firefox
4. Make the webpage accessible byadding ALT text to the images.

Lab 17: More on HTML


Headings
1. Copy and paste the Headings example at http://www.w3schools.com/html/html_primary.asp
2. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
3. What kind of effects can you see?


Lists
4. Copy and paste the Headings example at http://www.w3schools.com/html/html_lists.asp
5. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
6. What kind of effects can you see?

Lab 16: HTML




Lab 16: HTML


1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Firefox.

4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
5. Copy and paste the HTML example at Introduction to HTML
6. Verify your results on the screen

Homework 3-21-2008

1. Do Lab 15.
ans : 已繳交
2.Check into the government-sponsored web accessibility website.At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download thepresentation materials. What is web accessibility?
ans :
web accessibility(無障礙網頁)
無障礙網頁是遵循無障礙網站設計的規範,提供網頁導盲磚、鍵盤快速鍵(Access Key)...等無障礙網頁之設計,對聽障者、視障者,以及操作滑鼠有障礙之人士,亦可提供快速瀏覽網站之方法。
對象:
1.視力或聽力上有問題的人2.行動不便無法出門與人進行社交活動的人3.年長者(反應較慢者、老花眼)4.憂鬱症者(或喜歡獨處的人)
使用工具:FireFox
功能:1.字體任意放大2.分頁瀏覽3.網頁詮釋4.RSS5.不易中毒
大綱:
1.導盲磚在導盲磚處鍵入“Enter”即可進入AccessKey (熱鍵)說明。受益者:全盲的人、無法使用滑鼠的人。2.AccessKey (熱鍵)以熱鍵來顯示並運作網站上的功能。受益者:全盲的人、無法使用滑鼠的人。3.圖形替代文字(1).站台上每個頁面裡的每一張圖片,都該提供足以取代的文字部分,也就是所謂的「alt 文字」;這是在 標籤裡用alt 屬性所加以指定的。(2).螢幕朗讀軟體可以讀得到這段文字,螢幕朗讀軟體可以讀得到這段文字。(3).Google 會為這段文字建立索引。(4).用工具提示或者在狀態列顯示出來。受益者:聽障者、視障者、年長者、網站管理者(網站透過Google圖形搜索,更容易被找到)及普羅大眾。4.多多使用樣式設定(Cascading Style Sheet,CSS)(1).CSS 略施小技就處理了常見的麻煩(文章項目內的小圖形)。(2).純粹只用CSS 來處理版面可以輕鬆的重新編排HTML 源碼中各元件的順序,而不影響到實際的版面。受益者:網站設計者、視障者(色盲、全盲)。5.提供網頁訂閱模式(Really Simple Syndication,RSS)它廣泛被使用於將網站最新頭條訊息或內容有效率的整理出來,並提供給需求者參考,這項功能如同網站上『最新消息』的功能是一樣的。受益者:聽障者、網站管理者、閱聽大眾。6.跑馬燈不要再跑了&圖片不要再閃了關閉Javascript及不用applet 或ActiveX實現跑馬燈功能。跳動的圖片不適合在網頁呈現,因為這不僅讓你的網頁看起來像大一新生的網頁作業,讓網友分心,而且會破壞優美的整體設計。受益者:聽障者、視障者、年長者、憂鬱症患者。7.無障礙的Flash 與多媒體影片最好有聲音、字幕並且可以自由關閉,並在Flash附近提供替代性文字式連結。受益者:視障者、聽障者。
8.確保事件的啟發不要求一定得使用滑鼠滑鼠的使用是”視窗”系統思維下的產物,視障者與身障者無法適用。受益者:視障者、身障者(無法靈活操作滑鼠)。
9.人工檢測部分(1).合乎國際無障礙規範(研考會無障礙規範師出同門)的網頁, 當然有些是主觀判斷下的結果;因為許多指導原則都刻意模糊而無法被科學評鑑或自動測試。(2).提供Flash 之外的鏈結。(3).使用不閃爍的圖片。(4).建立有意義的網頁標題。(5).提供額外的導覽協助。(6).先呈現妳的主要內容。(7).安全地使用色彩與鏈結裝飾。(8).撰寫親和力聲明。10.網站地圖既然妳已經設計了一個亮麗耀眼的網站,就該提供一張網站地圖,列出站台上所有的網頁功能。受益者-身障者、視障者、所有其他使用者。
Q:提供有障礙版與無障礙版好不好?
A:出發點是好的,但需要保持兩個版本的內容一致,且會增加成本,視障朋友希望看到一般閱聽人的版本,Google 依據點閱率排序,如此無障礙網頁將更難獲得前面的排序,另外W3C/WAI 不推薦也是問題之一。
網際網路的無障礙空間,十四條規範
規範一:對於聽覺及視覺的內容要提供相等的替代文字內容規範二:不要單獨靠色彩來提供特殊資訊規範三:適當地使用標記語言和樣式表單規範四:闡明自然語言的使用規範五:建立編排良好的表格規範六:確保網頁能在新科技下良好地呈現規範七:確保使用者能處理時間敏感內容的改變規範八:確保嵌入式使用者介面具有直接可及性規範九:設計裝置獨立網頁規範十:使用過渡的解決方案規範十一:使用國際與國內官方訂定的技術和規範規範十二:提供內容導引資訊規範十三:提供清楚的瀏覽網站機制規範十四:確保簡單清楚的網頁內容

2008年3月24日 星期一

2008年3月21日 星期五

Lab 15: Accessibility by GreaseMonkey
























































Lab 14: Tongwen


Lab 13: Clean Language



1. Save the JavaScript file of Clean Language to your desktop. Make changes to the script with self-defined bad words. To do this, save the JavaScript on your desk top. Use Notepad editor to make changes. Install the modified script as Greasemonkey.2. Use Google to search webpages that contains some bad words.3. Try whether the filtering take effects.



Lab 12: Greasemonkey































Homework 3-14-2008

1. 參考 PageRank-Google 決定搜尋排名的關鍵技術以及Google.com 網站的官方解釋,簡要說明PageRank原理。
PageRank原理是利用反向連結來做投票的依據,當一個網頁設了一個連結到另一個網頁,則表示前者投了一票給後者。所以當你的網頁被越多的人連結,其PageRank數值就越高。另外,反向連結來自PageRank值高的網頁和反向連結來源頁面的外向鏈結數也都會影響你的網頁數值的增加。數值0到10是以對數函數的方式來表示,所以每加一分的真實數量其是非常的多。
2. Essay Writing on Google Docs參考鳳凰城動物園遊記,撰寫一篇你自己的春日遊記。如果是多人出遊,請嘗試合寫的方式。(Teamwork editing)
http://docs.google.com/Doc?id=dcp2vz95_0gwxtfqg4

2008年3月14日 星期五

Lab 9 Online teamwork editing


Lab 10 Keep track of blogs






Lab 11: Web Pageranking

紐約時報 http://www.nytimes.com PageRank:9
CNN http://www.cnn.com/ PageRank:9
台灣雅虎 http://tw.yahoo.com PageRank:7
蕃薯藤 http://www.yam.com PageRank:6
PCHome 購物 http://shopping.pchome.com.tw/ PageRank:5
Monday 購物 http://www.monday.com.tw/ PageRank:5
我常用的三個網站 :
1.http://www.google.com.tw/ PageRank:7
2.http://www.railway.gov.tw/index/index.aspx PageRank:6
3.http://www.wretch.cc/ PageRank:5

2008年3月10日 星期一

Homework 3-3-2008



1. Explain bytecode, JVM
bytecode是一種虛擬機器碼(不會被綁死在特定的硬體上)。JVM is a set of computer software programs and data structures which use a virtual machine model for the execution of other computer programs and scripts

2. Explain class, object
Class:類別由一群具有相同資料結構與相同行為的物件,在依據某個特性分類以後,所形成的集合。Object:物件程式語言中的物件,其實是真實世界中東西的模型,也可以是某種概念的模 型。在軟體設計中,物件是物件導向技術的關鍵,以程式的角度來說,它是電腦用來模擬現實生活的東西或事件,也是組成整個程式的元件。來源:奇摩知識家(class) ,奇摩知識家(object)

3. Reading Assignments:
Read 1.1, 1.2, 1.3 of Textbook







4.1 Write a Java program as follows:


Let i=2;


Print i;


Print 2 * (i++);


Print i;


Ans: 2, 4, 3




















4.2 Write a Java program as follows:
Let i=2;


Print i;


Print 2 * (++i);


Print i;


Ans: 2, 6, 3
























4.3 Write a Java program as follows:
Let m=7, n=2;
Print (double) m/n;
Print m/ (double)n;
Ans: 3.5, 3.5


















2008年3月3日 星期一

2008年3月1日 星期六

Homework 2-25-2008 (JAVA)

1. Watch The Inside Story (Video), write your words on the development and inventor of Java. 2. List at least 5 applications of Java. You must provide the references you used. We recommend Google Search engine

1. Java,是一種可以編寫跨平臺應用軟件的物件導向的程式語言,由昇陽(太陽微電子,Sun Microsystems)公司的詹姆斯·高斯林(James Gosling)等人於1990年代初開發。它最初被命名為Oak,作為一種小家用電器的編程語言,用於解決諸如電視機、電話、鬧鐘、烤麵包機等家用電器的控制和通訊問題。由於這些智能化家電的市場需求沒有預期的高,Sun放棄了該項計劃。就在Oak幾近夭折之時,隨着Internet的發展,Sun看到了Oak在電腦網絡上的廣闊應用前景,於是改造了Oak,在1995年5月以"Java"的名稱正式發佈了。Java伴隨着Internet的迅猛發展而發展,逐漸成為重要的Internet程式語言。 Java程式語言的風格十分接近C++語言。Java繼承了C++語言物件導向技術的核心,捨棄了C++語言中容易引起錯誤的指針(以引用取代)、運算符重載、多重繼承(以介面取代)等成分,增加了自動垃圾收集功能用於回收不再被引用的對象所佔據的記憶體空間。在J2SE1.5版本中Java又引入了泛型編程、類型安全的枚舉、不定長參數和自動裝/拆箱等語言特性。Java不同於一般的編輯執行計算機語言和解釋執行電腦語言。它首先將原始碼編譯成字節碼,然後依賴各種不同平臺上的虛擬機來解釋執行字節碼,從而實現了「一次編譯、到處執行」的跨平臺特性。不過,這同時也在一定程度上降低了Java程序的運行效率。但在J2SE1.4.2發佈後,Java的計算能力有了大幅提升。 與傳統程序不同,Sun公司在推出Java之際就將其作為一種開放的技術。全球數以萬計的Java開發公司被要求所設計的Java軟件必須相互相 容。「Java語言靠群體的力量而非公司的力量」是Sun公司的口號之一,並獲得了廣大軟件開發商的認同。這與微軟公司所倡導的注重精英和封閉式的模式完全不同。 Java程式語言是個簡單、物件導向、分散式、解釋性、健壯、安全與系統無關、可移植、高性能、多執行緒和動態的語言。         來源:奇摩知識

2. (1)ebay
(2)旅遊網站
(3)簡訊發送
(4)手機遊戲
(5)資料庫