Homework 11-26-2007

1. Problem 1 & Problem 3 of Textbook on Page 55.
（1）試解釋WEB技術演進是要解決什麼樣的問題?
Web 1.0是靜態的網頁，主要以網站業者單向的提供內容為主，其目的是為了吸引更多人去瀏覽造訪該網站，但是光靠單方向獲取內容是無法滿足廣大群眾的需求，所以有了Web 2.0的出現。
Web 2.0相較於Web 1.0，其從靜態html到動態html，給使用者很大的方便，且現在幾乎都有了現成的程式，只要動手就可以擁有一個屬於自己的部落格。其主要的精神在於由網友一起建構出內容，同時落實彼此分享以達到群眾智慧的最大效益，也可以雙方面的互動。

綜上所述，Web2.0的時代是以「人際關係」作為一種商品，而Web1.0時代則以提供「資訊」的營運模式，由此可看出Web技術的演進是隨著上網人數不斷的增加;根據使用者的需求，及為了提高網站效率＼迅速的提供更新的資訊＼增快網路的速度，和網路安全等問題，使得Web的技術不斷的演進。

（2）程序(PROCESS)和執行緒(THREAD)對網站性能有什麼不同的影響?
程序（Process）技術的使用主要是用在Web系統演進的第二時期，當使用者增多時，由於耗費過多系統資源會導致網站速度明顯下降。
執行緒（Thread）技術的使用主要是用在Web系統演進的第三時期，取代了程序，而使用常駐的服務（Service\Daemon），此程式會一直留在系統內，除非關機，否則會一直做服務。當人多時Thread就會變多;人少時，Thread就會減少，故不會耗費系統資源而導致網站速度下降。
2. What does a CGI output contain? Hint: Such as Content-type and HTTP header
計數器＼留言版等。
3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
Post method是指定使用post的方式來做資料的傳送，而編碼方式大多是用在於上傳檔案時，檔案是必須要經過特別的處理過才能夠被網頁的伺服器所解讀。
Get method是希望把表單的內容變成一個可讀的網址。
然Post與Get本身有差異：
1.GET有上傳資料量的限制，一般傳送大量的資料或者上傳檔案都不會使用GET。
2.POST適合用來傳送大量的資料，直接由伺服器接收。
3.POST本身的傳送是基於最終的檔案本身再傳入相關的欄位變數，而由於指定了POST，所以網址列會把GET的部份省略。
答：用Post method.
參考資料：PHP教學
4. Reading Assignments:XML (Page 187-188 on the Textbook)

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.

1.打開NVU
2.檢視--->語系及字元編碼--->萬國碼
3.插入--->表單--->定義表單--->表單名稱輸入:search
Action URL輸入:http://maps.google.com/maps
Method輸入:get



4.插入--->表單--->表單欄位--->欄位名稱輸入:q--->確定


5.插入--->表單--->定義按鈕--->名稱輸入:click(隨便取名即可)

6.檔案--->另存新檔
7.將上述所存之網頁用firefox開啟

8.輸入原網址所欲查詢之24.9586, 121.24114,即可顯現出一樣的畫面.

Lab 16: Form and Action

"logic will get you from A to B - imagination will take you anywhere"

How to use Form to invoke a remote service through CGI.


1. Copy the search box of this search page,
inlcuding radio buttons, text input, and submit button.
複製搜尋引擎
2. Open your Nvu HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.
打開Nvu,並將上步驟所複製之網頁貼上.

5. Use Nvu to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.
選擇下面的HTML標籤,看看有沒有Form,如果沒有則要自己定義.


6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)
如果沒有form需要自己定義時,選擇插入--->表單--->定義表單
於表單名稱輸入:f
Action URL輸入:http://google.com/search
Method 選擇:get
然後確定即可.


7. Run your HTML by Firefox. What do you get?
檔案--->另存新檔--->儲存
於剛儲存的檔案用firefox開啟
會看見先前的google網頁

可以搜尋
(隨便輸入字來搜尋)


8. Set method as "post"
這次將先前的merhod改為post


9. Run your HTML by Firefox. What do you get?
無法搜尋

Homework 10-1-2007

根據無障礙網頁設計原則，
1. 為什麼不要開出新視窗?
對於一般人而言：因為新視窗不會保有前一個視窗的瀏覽歷程，所以「上一頁」按鈕將會失去功效。
對於要連結到某個鏈結；瀏覽某個搜尋結果，然後回到上一頁的使用者而言，若開啟新視窗則不會存有上一頁之情形。

對於視障者而言：雖然 JAWS 會在連結開出新視窗時唸出「 New browser window 」，但仍然容易在它唸出鏈結文字和新頁面內容之間被漏掉。如果沒有了「上一頁」。當Jackie 沒有聽到「 new browser window 」的話時，就沒辦法瞥見工作列上開了兩個瀏覽器視窗了，勢必就得去讀整個已開啟視窗清單。

2. 為什麼要使用貼切的網頁標頭? 而不是留白?
使用貼切的網頁標頭，可以節省觀看者的搜尋時間，讓對方知道什麼文章是他所要的。
雖然慢慢的閱讀文章也是一種方法，但對於追求效率;以及不方便的朋友來說，使用貼切的網頁標頭可以幫他們很大的忙。
有些螢幕朗讀軟體會讀出網頁標頭，例如：JAWS就有個特別的鍵盤快速鍵 (INSERT + F10) 能顯示（並唸出）目前所有開啟視窗的標題。如果開啟的是網頁就會唸出網頁標題。當使用 ALT-TAB 切換視窗時，它也會唸出視窗標題。

對於視障者而言，使用貼切的網頁標頭等同於給了他們一雙眼睛，讓他們知道哪些資訊是他所想要;若是選擇留白，使得螢幕朗讀軟體讀不到，那些視障者勢必得一篇一篇文章聽。

使用貼切的網頁標頭，可以使得Google在搜尋的結果裡顯示網頁標題，而且位於網頁標題的關鍵字會有比較高的排名;但若留白則無法顯示其標題，故使用貼切的網頁標頭利多於弊。

3. 定義快速鍵有什麼好處?
HTML 有一個鮮為人知的功能，就是在鏈結及表單裡還可以使用accesskey屬性，讓網頁設計師定義常用鏈結或表單區域的快速鍵。在 Windows 上，可以按下 ALT + 某個便捷鍵；在 Macintosh 上則是按下 Control + 某個便捷鍵。如果便捷鍵是被定義在某個鏈結上的話，妳的瀏覽器就會跟著連結出去；如果是被定義在表單區域的話，妳的瀏覽器就會把焦點一到那個區域裡，及謂不需要滑鼠即可有效率的跳入下一個鏈結。

對於視障者而言：因為當 JAWS 讀到定義有accesskey的鏈結時，也會把這個便捷鍵唸出來。舉例來說， Home pageD 這個鏈結會被 JAWS 讀成「 link: Home page, ALT + 1 」。所以使用者可以按下 ALT+1 來把瀏覽器焦點移到那個鏈結，然後再按下 ENTER 就可以從那個鏈結連出去。

對於無法有效率地使用滑鼠者而言：使用者可以靠鍵盤導覽以及快速鍵的幫忙來在頁面中移動。便捷鍵可以幫他非常有效率地跳到常用的鏈結。只要能夠按下 ALT+1 ，接著 Mozilla 就會馬上連到定義有 accesskey="1" 的鏈結去。

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 and
----------------------------------------------------
1.安裝NVU
選擇右邊第一個下載,並在電腦裡安裝它.
打開環保署
檔案--->另存新檔
接著打開NVU的程式,檔案--->開啟檔案--->選擇剛存的檔案開啟之.
對要改的圖片按右鍵--->圖片屬性--->替代文字(改成自己想要的文字)


2.於NVU程式,打開檢視--->HTML標籤
打開檢視--->HTML原始碼
原始碼

標籤


3.在於Firefox打開剛剛儲存的網址,檔案--->開啟檔案--->選擇剛剛儲存的網址,即可.



4.在NVU程式選擇檢視--->HTML原始碼,接著按編輯--->尋找及取代--->輸入ATL,即可找出改成的新文字.

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
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.
------------------------------------------------------------------
1.安裝Google Search Keys,使用解說在imperialviolet
然後上google使用,按Alt+1可以選擇第一個網頁;如此類推.


2.安裝Google Access Keys
然後上google使用,按Alt+Shift+x可以跳下一頁,按Alt+Shift+y可以回去上一頁.
還沒安裝

安裝後


3.安裝AccessBar
然後進入僑委會--->有五個熱鍵.
環保署--->有兩個熱鍵.
會發現安裝AccessBar後下面會出現一排導盲磚.
還沒安裝前

安裝後,僑委會

環保署


4.找三個政府的網站有使用access keys.
行政院--->有五個導盲磚
財政部---->有六個導盲磚
監察院------->有四個導盲磚
導盲磚使用方式:按Alt+Shift+再加上導盲磚的代表符號.
行政院

財政部

監察院

Homework 10-29-2007

1. At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.
首先，下載同文堂並安裝。
接著打開新浪網，在空白處按滑鼠右鍵--->同文堂--->網頁：轉繁體，即可將簡體轉換成繁體。




2. Check into the government-sponsored web accessibility website.
At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download the
presentation materials. What is web accessibility?
web accessibility指的是無障礙網頁，遵循無障礙網站設計之規範，提供網頁導盲磚、鍵盤快速鍵(Access Key)、網站導覽(Site Navigator)等無障礙網頁之設計，為使對滑鼠操作有障礙之人士＼視障朋友＼老年朋友等人亦可快速瀏覽網站之任何資訊。
製作無障礙網頁時，除了要使用Accesskey熱鍵，亦要注意色彩的選擇，以及不要再使用跑馬燈和閃爍的圖片，只要多方位的替身心障礙者著想，就可使身心障礙人士以及一般閱聽大眾都可與你我一樣"觀看"網站。

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?
資料庫是相關資料的集合，這些資料依適當的方式儲存起來，讓使用者可以依他們的需求取得所需的資訊。
使用資料庫跟人工尋找比起來使用資料庫便利許多，資料庫不但可以及時有效找出所需的資料，且又可以同一時間內讓多位使用者共用資料庫，例如圖書館的電腦資料庫系統。故資料庫是最有效率的一種儲存＼整合系統。