2007年11月26日 星期一

Lab 17: Form and Action, Part II

Hand code a HTML or use Nvu to edit an HTML so that the webpage can send a request to Google like
http://maps.google.com/maps?q=24.9586,+121.24114

Use Form CGI that includes action, input, and submit.
Try a few different coordinates.


Step1. 開啟Notepad

Step2. 撰寫Html語言


















在 form 標籤內加method="get"和action="http://maps.google.com/maps" maps 後的 "? q= " 可以不用寫,因為伺服器會自動補上。

Step4. 儲存剛打完的程式碼


















副檔名記得要加 .htm 或 .html


















Step5.開啟瀏覽器


















Step6.連結到GoogleMap


















-------------------------------Add Button---------------------------------

Step1.

在原來的檔案內加入 JavaScript 元素 Ex: onclick, submit().......


















Step2.

儲存(同之前的步驟),然後開啟瀏覽器。按按看那個小按鈕吧!!


















Step3.

成功地,也連上了GoogleMap。輸入不同的座標,在地圖上會出現該位置。

網頁標頭

Homework 11-12-2007

根據無障礙網頁設計原則

1. 為什麼不要開出新視窗?
2. 為什麼要使用貼切的網頁標頭? 而不是留白?
3. 定義快速鍵有什麼好處?

Ans:
1.為什麼不要開出新視窗?
(1)因為強迫開啟新視窗,會因此導致〝上一頁〞的功能失效。

(2)網頁閱讀器(JAW,Window Eyes....)會受到影響,進而影響到盲人的〝閱讀〞權利。

(3)因為新的視窗不會有之前視窗的分頁。所以如果把所有的分頁集中在一個視窗內,可以更容 易記得之前開的分頁在哪裡。

(4)如果有習慣把視窗開到最大化的人士(例如:年長者、視力欠佳者......),會因此而漏掉〝上一頁〞的功能鍵。

reference:
第16天:不要開出新視窗

2.為什麼要使用貼切的網頁標頭(title)?而不是留白? (1)對於盲人而言,網閱讀器(JAW)每開一個分頁,就會針對該網頁的標頭先唸過一次,因此盲 人可以很快地找到他們想要知道的資訊。

(2)Lynx瀏覽器,也會針對網頁的第一行顯示網頁標題(by布拉耶點字),盲人們因此而獲益。

(3)腦部受損的人士,也會因為網頁清楚的標頭,讓他們在瀏覽網頁的時候,不時可以藉由回顧 標頭,而喚起之前瀏覽過的記憶。

(4)網頁加上標頭,讓Google收尋引擎能更準確地找到(排序)我們想要的資訊。

(5)網頁標頭

※所以你的網頁標頭如果留白,那可能會讓你的〝訪客次數〞減少喔!!

reference:
第8天:建立有意義的網頁標題

3.定義快速鍵有什麼好處?
(1) 對於視障者而言,可以藉由網頁閱讀器(JAW、Homepage Reader...)聽到能應用的快捷鍵, 因此他們可以省去摸索網頁的時間。

(2)另外對於只能使用鍵盤操作電腦的人士,能帶給他們更簡便地〝衝浪技巧〞(瀏覽網頁)。

(3)快速鍵的範例

reference:
第15天:定義快速鍵

2007年11月12日 星期一

Lab 15 Webpage Accessibility

Use Nvu to edit the following homepage
at http://www.epa.gov.tw

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 by
adding ALT text to the images.
















開啟Nvu






























Step1.在〝文字提示〞內 key in 你想要在圖片上呈現的文字(代表的意義)。

Step2.存檔

Step3.重新開啟檔案

Lab 14: Accessibility by GreaseMonkey

1.Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more

Step1. 點選Google Search Keys 安裝 Script (Firefox 要先安裝 Greasemonkey)

Step2.

2.
Google Access Keys Enables navigation through Google search results.


3.AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window. Added 2005-04-01 (not a joke). Find how many access keys have been defined at www.ocac.gov.tw www.epa.gov.tw



4.Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.




Reference: Dive into Greasemonkey by Mark Pilgrim (free download)

2007年11月11日 星期日

Homework 10-29-2007

1. At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.
Using Tongwen

2. Check into the government-sponsored web accessibility website.
At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download the
presentation materials. What is web accessibility?

Web accessibility,就是一個能夠提供讓殘障生應用自如的網頁(站)。因此 web accessibility 就會根據一些殘障者的狀況,而設計出一些便利的功能。例如 accesskey、 讀(說)網頁、字體放大、避免閃爍物件的功能等。

another reference:
Web accessibility

3. According to Section 2.1 of Textbook, some websites are powered by databases in the back end and some are not. What are the purposes of using databases?

由於科技的蓬勃發展,帶動一連串大量資料的出現,因此如果以人力來處裡這些龐大的資料,將會耗時而徒勞無功。所以在現今 Internet 的運用下,再加上 Databases 和 Database language 的演進,使的大眾可以更方便、更有效率的收尋資料。

Ex: 以圖書館為例。現在到圖書館查一閱本書籍,只要在電腦系統中 key in 一些 keypoint 就可 以找到相關書籍的資料,省時又方便。

Some purposes or advantages of using databases:
(1)簡潔(compactness)
(2)迅速(speed)
(3)節省人力(less drudgery)
(4)即時性(currency)
(5)資料可以共用
(6)安全性的限制

another reference:
About Database
A brief introduction to database
Database System

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.

※選用WordPad 修改 JavaScript Source code

原始的 Source code:

















安裝步驟:


































執行後:


















更改 Source code 後:


















每一個 badword 都要用 ' ' 框起來 。

ex:' badword'、' not good word'.

執行結果: