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

感覺起來時間都差不多,可能是因為露天拍賣有擋掉的關係吧!

P.S. 這套軟體無法安裝在VISTA上,會有錯誤產生

Lab Site Traffic Metrics

1. Enter Sitemeter.
2. Put a Sitemeter in your own blog.

3. Check the site meter to see the daily traffic chart, the recent visitors by locations.

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: Drap 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.

Lab DOM

[Lab]
1. Open NVu
2. Based on the code as in http://www.scottandrew.com/weblog/articles/dom_4write 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 onthe 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

1. Given the RSS of Class Blog, write an XSLT fileand use Xray to generate an HTML that contains the titles of items in the RSS.

2. Open the XML file by Word and you will see the document structure.

3. View the formatted HTML file.

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.

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.

Homework 11-24-2008

1. Lab: Form and Action, Part II

2. 在CGI語法裡，解釋 GET, POST 差異在哪裡?

兩者都是用來傳遞資訊給下一個網頁,主要的差別是在於GET是用QUERY_STRING(即用?隔開，添加在URL後面的字串)來傳遞參數和參數的值;而POST是用STDIN(標準程式導向來傳遞參數),簡單來說就是利用FORM中的SUBMIT元件來傳遞參數和參數的值.一旦使用者按下了SUBMIT鍵,參數就會傳到下一個網頁了!不過相較於GET我覺得POST比較好用,一方面是因為它比較不會有編碼的問題,另一方面是保密性比較好,因為如果你今天要傳遞的資料是使用者的帳號密碼,這樣若放在URL後面就會被其他人看到了,感覺不太安全.

Lab Checking dead links

W3C Link Check 可以檢查 dead links, 而且只要輸入首頁,就可以依據指定深度自動向下檢查, 而且也可以檢查對外連結(外站).

Link Checker 首先要設定檢查深度(Check linked documents recursively, recursion depth=?), 如果沒有設定, 它就只有檢查首頁.

因此如果出現 deadlink, 就是在首頁.

如果你設定檢查深度, 它就會逐一檢查此深度內的每一頁,在檢查某一頁開始時, 它會先顯示現正在檢查的 URL, 然後在逐一爬行該頁內每個 link.報表輸出很漂亮.

請參閱http://validator.w3.org/checklink請檢查三個你最常使用的網站, 看看連結的品質如何?紀錄有錯誤連結 (HTTP Error 404) 的次數.

http://i-learning.cycu.edu.tw/

http://www.google.com.tw/

http://itouch.cycu.edu.tw/

Lab: 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 likehttp://maps.google.com/maps?q=24.9586,+121.24114

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

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?

Homework 11-17-2008

1. Lab Making web pages accessible

2. What is Web 2.0?
算是一個新的網路平台.主要是由每個人的參與和分享所構成的!和以往比較不同的事,交流的平台也越來越多ex.YouTube, Blog的興起.人們不再只是從過去的電視,報紙來獲得新資訊,藉由網路,資訊的獲得更加的快速也更加的多樣化.此外,它也多了人與人間的互動,自己寫在Blog的小品,有時也會獲得其他人的回應,甚至是自己不認識的人也可以給你意見與想法,這是往年所沒有辦法想像的!!

3. What is mashup?
主要是指整合網路上多個資料來源或功能，以創造新服務的網路應用程式。例如現在的urmap以及google map,若加上其他資訊(如:搭配旅遊資訊或租屋資訊),就可以成為一套新的系統,更加方便大家的使用!!

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.

Lab 4 Mashup

Create a slide show of your album.

Hint: 挪威奧斯陸之行


福隆一日遊

Lab Mashup 3

Check it out! Real time satellite tracking

It is a mashup of Google Map and satellite teacking data.

Use the website to track Formosa III satellite.

More applications of Google Maps





http://www.n2yo.com/?s=29047

Lab Mashup 2

For housing services, compare the three websites
http://www.housingmaps.com/
http://www.urmap.com.tw/asp/kijiji/
http://www.7house.com.tw/

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

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

example: TMM


美感方面,我比較喜歡第三個網站所做的,而且搜尋介面也比較符合我的習慣.
直覺性方面,第一個網站比較直覺,就直接點地方和想住的位置即可.
流暢和預期反應方面,我覺得三個網站都差不多.

Lab Mashup

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.

Hint: a sample work

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?

YES.

Lab Firefox Accessibility Extension

Use Firefox Accessibility Extension to check the accessibility of three sites that you visit most.

Report the summary of all the errors and warnings for each site.




中原e點靈





Yahoo




博客來網路書店

Lab: Making images accessible

1. Use Nvu or Notepad to edit the following homepageat http://bloggercamp.blogspot.com/2007/01/2007.html

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.

5. Go to the Firefox Add-ons site for Firefox Accessibility Extension

6. Click the "Install now" button on the add-ons website

7. Check whether you can see the ALT text for the images by selecting the "Show Text Equivalent" function.

Homework due 11/03/2008

1. According to the following two papers, what are the current issues of Web accessibility in the Web 2.0 era? Please write a 500 word essay.

Web 2.0: hype or happiness? Mary ZajicekPages: 35 - 39 Full text available: Pdf(290 KB)

Enabling an accessible web 2.0 Becky GibsonPages: 1 - 6 Full text available: Pdf(344 KB)

「Web 2.0」這個名詞，最先是由 O'Reilly 的Dale Dougherty 和 MediaLive 的 Craig Cline 在共同合作的頭腦風暴(brain storming)會議上提出來的。這些Web 2.0網站有別於傳統網站，他們想的不是如何賣「軟體」， 而是賣「服務」，也就是把網站視為一個可以有各式各樣服務的平台。最大的不同就是將使用者從被動改為主動，有點類似現在的民主社會，使用者可以提供任何意見和想法，像現今最流行的無名小站和Youtube就是最好的例子。


此外，對於年長者、身心障礙者他們該如何才能像一般人一樣的快速使用進而了解每一個網站，例如在Web 2.0: Hype or Happiness?與Enabling an Accessible Web 2.0 都有提到screen readers（螢幕讀取器）、screen magnifier（螢幕放大器）等特殊功能， 這些都能加速視障者對於網站的了解。此外，無障礙網頁還有許多功能像是accesskey（快速鍵）、dynamic HTML (DHTML)（動態網頁）等，這樣就等於是對那些年長者、身心障礙者準備了一位專屬的指導員一般，真的很方便!!

在未來的日子，Web 2.0的應用將會越來越廣，訊息間的傳遞與交流也會變得更加的方便與快速!!每天都有數以萬計的新資訊產生，真是個名符其實的「資訊爆炸」的時代!! 如何在這些資訊中快速地找到自己所需要的，也是未來我們所必須要面對的課題之一。


2. 針對前次作業遊記的部分，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。

我在下列五位同學的Blog有留言
范銘倫 深坑行
周怡君 薰衣草森林
江美惠 九份
黃志琦 小內灣灣
許庭嘉 綠島大哥的日子

Lab: More on HTML

Headings

1. Copy and paste the Headings example athttp://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?



不同的h1~h6代表不同的字型大小


Lists

4. Copy and paste the Headings example athttp://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?



如果是list的元件,在前面都會出現一點

Lab: HTML

Preparation

1. Using Microsoft Notepad, Copy and paste the HTML example atIntroduction to HTML

2. Save the file as myfile.html

3. Open the file using Firefox.New editor





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.

Lab: 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 athttp://www.ocac.gov.tw/ http://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)http://dia.z6i.org/ (中文)