Lab Web Traffic Stress Test

1. Download Stress Test
2. Take a look at the user manual.
3. Test a static page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
4. Test a dynamic page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
5. Compare the response time of both pages and explain why.

Lab Packet Sniffer

1. Install Protocol Analyzer Ethereal at http://www.wireshark.org/
2. Capture the packets at your Ethernet interface card.
3. Enter a login required website that you often go to, such as web mail. Don't use the real account or password.
4. Try to catch the packet that contains the password.

Lab Drag and Drop

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "drag-and-drop" example.
3. Use this method to control movie playing as in the previous lab.
4. If you drag and drop the photo to the "play" area, the movie plays.
5. If you drap and drop the photo to the "pause" area, the movie pauses.

Lab Movie Player

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "scripting" and "video" examples.
3. Use this script to control movie playing.
4. If you push the "pause" button, the movie pauses.
5. If you push the "resume" button, the movie resumes.

Homework 6.5.2009

1. Please use the blog clouds to render your own blogs, not others.

Example: 電子三丙 邱拓堯

2. 在你的部落格加上手機版

Example: 手機版

(1)GO TO 這個網頁

(2)ENTER URL

(3)就變成 手機版

對外速度

(1)中原電學415-cycu proxy: proxy.cycu.edu.tw:3128



(2)中原電學415-proxy.csie.ncu.edu.tw:3128



(3)中原篤信101



(4)家裡-ADSL-10M-0.3M網路線



(5)家裡-ADSL-10M-30M網路線



下載速度差距非常大，可是開網頁速度並不會很慢，不知道是中毒或網路線損毀。

Lab Form Rewriting

課程綱要查詢

本系課程

*查詢學年期：
九十七學年第二學期 九十七學年第一學期 九十六學年第二學期 九十六學年第一學期 九十五學年第二學期 九十五學年第一學期 九十四學年第二學期 九十四學年第一學期 九十三學年第二學期 九十三學年第一學期 九十二學年第二學期 九十二學年第一學期 九十一學年第二學期 九十一學年第一學期 九十學年第二學期 九十學年第一學期 八十九學年第二學期 八十九學年第一學期 八十八學年第二學期 八十八學年第一學期 八十七學年第二學期 八十七學年第一學期 八十六學年第二學期 八十六學年第一學期 八十五學年第二學期 八十五學年第一學期 八十四學年第二學期 八十四學年第一學期 八十三學年第二學期 八十三學年第一學期 八十二學年第二學期 八十二學年第一學期 八十一學年第二學期 八十一學年第一學期 八十學年第二學期 八十學年第一學期 七十九學年第二學期 七十九學年第一學期 七十八學年第二學期 七十八學年第一學期
*部別：
大學部 碩士班 碩專班 博士班 產研碩班

註:

1.課程時間沒有輸入時,則會顯示該類別的所有課程

2.課程時間格式(比如: 2-EFG 或 3-C )

Lab Google Analytics

1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
2. Check the results to see the daily traffic chart, the recent visitors by locations.

Lab blog cloud

Build a blog cloud for your blog.

Lab Syndication with RSS 2.0

1. 進入你的部落格，登入，選擇自訂
2. 新增小工具
3. 選取
資訊提供
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)

Lab navigation bar

1. 進入你的部落格，登入，選擇自訂
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)

Lab DOM

[Lab]
1. Open NVu
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.

Lab Create Image using DOM

1. Open Nvu
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.

Lab XML (2)

1. Register and Download Xray, an XML, XSLT editor and processor.

2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results

use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
(archive)

3. View the formatted HTML file.
4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings

compute the team standings in a table.

5. View the formatted HTML file.

Lab XML

1. Register and Download Xray, an XML, XSLT editor and processor. (安裝X-Ray需要權限)

2. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.

3. View the formatted HTML file.

(1)XML file





(2)XSLT file







(3)transformation

Lab Hand code a form

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)Change URL



(2)Enter Location



(3)Show Google Map

Lab 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.

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.

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?

(1)GET








(2)POST

Homework 5-1-2009

1. 嘗試闖關以下這個遊戲
Place That State Game




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

Google日曆-中原大學行事曆-html版本
進入後按右下角+Google日曆即可訂閱

Lab Mash-up 4

這是一篇春假到高雄遊玩的紀錄

寄件者 高雄遊 4-10-2009

為什麼到中壢的票價都是最貴的！！！！！

寄件者 高雄遊 4-10-2009

高雄捷運美麗島站，光之穹頂，很漂亮，很有藝術感，可是來觀賞的人比搭捷運的人還多，那捷運要幹麻的？？

寄件者 高雄遊 4-10-2009

中山大學旁的西子灣，日落時分特別漂亮！！！！

寄件者 高雄遊 4-10-2009

忠僕號海上書展，這是一艘歷史久遠的輪船，在鐵達尼號沈船後，變成世界上最古老的船，這是它在除役前最後一次來台灣，被我趕上了！！！！！

高雄是個風景美麗的地方，物價也便宜，很適合去遊玩！！！！！

Lab Mash-up 3

Maps of the Swine Flu Outbreak - Part 1
這個地圖的特點是，把許多地區的個案，一一標示在地圖上，使我們了解有多少人不幸感染此疾病。也可以使附近民眾加強戒心，做好防護措施。
Maps of the Swine Flu Outbreak - Part 2
這張地圖去透過衛星去拍攝地面，在地理位置圖上用顏色來表示感染地區，可以讓我們了解疫情目前在多少地區肆虐。
Maps of the Swine Flu Outbreak - Part 3
這個地圖表示由一個受感染區域，拓展出一個可能感染的半徑範圍，可以推估疫情未來的發展，使附近地區的民眾可以提早做好防護，避免疫情擴大。


這些應用的特點是什麼?

ps. More applications of Google Maps

Lab Mash-up 2

For housing services, compare the three websites

(1)http://www.housingmaps.com
這個網站一進去，就是一個地圖，可以直接選取地區，找到自己想要的房屋，可以很明確的知道房屋位置，而且操作介面很直覺，不需要摸索很久，但網頁美感方面稍嫌不足。
(2)http://www.urmap.com.tw/asp/kijiji/
這個網站是靠右邊的網站廣告選項，搭配uMap地圖，可以直接勾選自己所需要的，讓他呈現在地圖上，不過操作方法表示不清楚，一進入就看到一張空空的大地圖，無法很直覺得反應網站想表達的，整體美感普通。
(3)http://www.7house.com.tw
這個網站完全是以文字以及圖片來表示要租售的房屋，雖然美感方面略勝一籌，不過缺少地圖輔助，很難知道房屋周圍的地理環境，可能造成許多不必要的困擾。

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


比較:
美感：(3)>(2)>(1)
直覺性:(1)=(3)>(2)
流暢:(1)>(2)>(3)
預期反應:(1)=(2)>>(3)

Lab Mash-up 1

1. Upload a sample ppt to Google Docs.
2. Publish the uploaded ppt.
3. Embed the online ppt to your blog.

The reason to do so is that the readers don't have to have ppt to view your presentation. For example, some users work with Linux or Unix, and others work with MacOS. They will appreciate you for doing so.

Homework 4-17-2009

用Google查一下網路裡面的你，還有另一個你想查的人。

列出搜尋結果

(1)Google 自己




(2)Google 秉霖



心得:原本以為只會搜尋到大學的一些東西，沒想到連高中的一些事蹟都會搜尋的到，透過網路，或許真的讓一個人留下許多生活過的證據。

Lab Access Keys

1. Use Firefox Accessibility Extension to identify the access keys defined in http://www.epa.gov.tw




2. Use GreaseMonkey to detect the access keys defined in http://www.epa.gov.tw
Hint: AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window.



3. Are the two results in the above the same?

Ans:相同

Lab Making web pages accessible

1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com




2. Fix the failures you found.