Lab 18 Google Accessibility

1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link.
2. Google Access Keys Enables navigation through Google search results.
   
   
   兩者安裝好以後，請呈現使用前後的差異比較圖，並說明有何功用。
   
   
   
   
   
   
   一開使跑出  , .  !!還不知在幹麻  但後來知道功能後  這用途真得很方便 並造福盲人

Lab 25 Mash-Up 2 (Calendars)

建立你的行事曆，並與學校行事曆合併 

Google日曆-中原大學服務學習活動行事曆-html版本

進入後按右下角+Google日曆即可訂閱


若原有自己Google行事曆的同學，拍圖時，請注意個人隱私。
不論舊有或新建Google行事曆的同學，請建立至少三個活動在行事曆，
做完此LAB即可刪除。




3個行程在行事曆
6/4生日趴
6/8輔大遊
6/12上機考

Lab 24 Mash-Up, Part 1 (Maps)

真實案例
96年度全人關懷獎 -崔媽媽科技服務工作團隊


For housing services, compare the following two websites
http://www.housingmaps.com

http://yungching.housefun.com.tw/

List the differences in the user interface design and usability. Make comments
by your use experiences.


比較: 美感，直覺性，流暢，預期反應


永慶房仲網 

美感 : 網頁以暖色系的黃色為主要色調，和廣告給人的映像一致。
直覺性 : 需要思考和摸索一下網頁功能，和housingmaps相比起來稍微差一點。
流暢 : 可能附加太多東西，網頁開啟比較慢。
預期反應 : 解果要自己分析，多了幾道比較手續，也不至於偏差很多。



housingmaps

美感 : 網頁簡單俐落，沒有多餘的功能導至於眼花撩亂。
直覺性 : 非常簡單的操作，想到什麼就可以直接反應出來使用。
流暢 : 網頁一點就開啟，馬上點選即跑出來，很流暢。
預期反應 : 和預期產生之結果差不多，沒有很大的偏差。

Lab 30 Programming in DOM

1. Open KompoZer
2. Based on the code as in

http://www.scottandrew.com/weblog/articles/dom_4 ,
write a code to generate the table of 9*9 products. (九九乘法表)

Hint: The javascript code should be enclosed by script tags.

99乘法表程式碼:

按下按鈕顯示99乘法表:

按下按鈕後跑出乘法表:

Lab 29 Create Image using DOM

1. Open KompoZer
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.

程式碼:

重覆點選紅色按鈕button:

重複點選按鈕跑出來的多個圖片:

Lab 28 Hand code a form

Before you do this lab, you must understand what is CGI(Common Gateway Interface)  and Form.

1. So please search the answer and post your opinion in your blog.
2. Hand code a HTML or use KompoZer 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.

Lab 27 Lab Form and Action

• Dynamic pages, content generated by server-side programs.
• CGI, Common Gateway Interface, for sending requests to server-side programs.

static page
Ex:
http://www.google.com/

dynamic page
Ex:
http://www.cna.com.tw/

URL that sends a request by CGI
Ex:
http://maps.google.com/maps?q=24.9586,+121.2411

Purpose of lab: 
Learn 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 KompoZer HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.

5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

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.)
7. Save your file on your computer. Run your HTML by Firefox. What do you get?

8. Set method as "post"
9. Run your HTML by Firefox. What do you get?



GET的結果

POST的結果