s9527211: 2008

2008年12月29日星期一

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.

動態網頁：因為靜態網頁的code運算部份較動態網頁來的簡單，故處理速度較快，所能夠承載的負荷較高，回應速度較快。

動態網頁：因為動態網頁的code運算部份較靜態網頁來的複雜，故處理速度較慢，所能夠承載的負荷較低，回應速度較慢。

Lab Site Traffic Metrics

1. Enter Sitemeter.
2. Put a Sitemeter in your own blog.
2. 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.

2008年12月22日星期一

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.

[canvas]

[text x="5" y="5"]
Drag picture between shopping cart and wishlist
[/text]

[view y ="30" ]
[simplelayout axis="x" spacing="5"/]
[view id="cart" bgcolor="#666699"
height="100" width="125"]
[text fgcolor="#FFFFFF"
x="5" y="5" ]Play[/text]
[/view]
[view id="wish" bgcolor="#666699"
height="100" width="125"]
[text fgcolor="#FFFFFF"
x="5" y="5" ]Pause[/text]
[/view]
[/view]

[view x="${cart.x+10}" y="${cart.y+55}"
resource="cd_cover.jpg"
onmousedown="dragging.apply()"
onmouseup="dragging.remove(); stop()"]

[dragstate name="dragging"/]

[method name="stop"]
if (this.x]wish.x) {
this.animate("x", wish.x+10, 300);
this.animate("y", wish.y+55, 300);
videoplayer.stop();
} else {
this.animate("x", cart.x+10, 300);
this.animate("y", cart.y+55, 300);
videoplayer.play();
}
[/method]
[/view]

[view x="10" y="140"]
[view id="videoplayer" play="true" resource="http:jfk.swf"][/view]
[/view]

[/canvas]

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.

[canvas]
[button width="50" x="60" y="50" onclick="videoplayer.play()"]Play[/button]
[button width="50" x="120" y="50" onclick="videoplayer.stop()"]Pause[/button]
[view y="75" id="videoplayer" play="true" resource="http:jfk.swf"][/view]
[/canvas]

2008年12月15日星期一

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

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.

2008年12月1日星期一

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.

2008年11月30日星期日

Homework 11-24-2008

1. Lab: Form and Action, Part II

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

1. GET：將資料當成URL的一部份，用?來區隔CGI程式和資料，資料間以&來隔開變數，每個資料是name=value的格式。
例：http://ooxx/a1.php?page=1&name=1&tel=123456

取得資料的函數為陣列 $_GET['變數名稱']

2. POST：以標準輸入方式將資料送給CGI程式，資料型態也是name=value，CGI程式由標準輸入來讀取資料。

取得資料的函數為陣列 $_POST['變數名稱']

二者的差異在於GET可以不用表單的方式來傳送資料，但其URL有長度限制，且無法隱藏傳送資料。

Reference：http://web.ntit.edu.tw/~yclin/php.htm

2008年11月25日星期二

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) 的次數.

Yahoo!拍賣

重灌狂人


綠色工廠

2008年11月24日星期一

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 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: Form and Action, Part I

"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?

2008年11月20日星期四

Homework 11-17-2008

1. Lab Making web pages accessible

2. What is Web 2.0?

Web 2.0，是一個新生的術語，它的應用可以讓人了解目前全球資訊網正在進行的一種改變，從一系列網站到一個成熟的為最終用戶提供網路應用的服務平台。這種概念的支持者期望Web 2.0服務將在很多用途上最終取代桌面計算機應用。Web 2.0並不是一個技術標準，不過它包含了技術架構及應用軟體。它的特點是鼓勵作為資訊最終利用者透過分享，使到可供分享的資源變得更豐盛；相反的，過去的各種網上分享方式則顯得支離破碎。

Web 2.0是網路運用的新時代，網路成為了新的平台，內容因為每位使用者的參與而產生，參與所產生的個人化內容，藉由人與人的分享，形成了現在Web 2.0的世界。

第一個提出這個名詞的人Tim O'Reilly提到：Web 2.0 對電腦工業來說是一種商業革命，起因於開始把Internet當成交易平台，並企圖去理解在新的平台上通往成功的規則。

3. What is mashup?

「mashup(混搭」這個似乎是出現在服裝風格上才會使用的名詞，現在也出現在網際網路上。「Mashup」又稱為混合性網路服務，或稱混搭程式，在這Web 2.0的年代，它乘浪潮波湧而起。像是在HousingMaps的網站中搜尋國外的房子，或是Flicker上的照片...等，它們都是呈現Mashup 的一種風格。

Web2.0 的發想者之一Tim O’Reilly提及Web2.0的特性包含了：使用者的參與及互動、開放的分享與傳遞、強調使用者網絡的外部延展性，也就是經由服務的提供，形成去中心化的型態。而Mashup正是將網路技術混搭的概念，將網路應用服務做整合，完全符合Web2.0開放與延展的精神。網路上的新應用能快速傳遞分享，也是由於早年開放原始碼運動的推行，讓軟體及應用的開發流程變得更簡單，再加上寬頻及上網人口的普及，讓這股勢力造就各種混合型的新網路服務。

2008年11月17日星期一

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.
(修改完畢^_^y)

Lab Mashup 4

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

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 comments
by your use experiences.

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

example: TMM

<============================================================>

就美感而言

我覺得 7house 做的最美

也許是因為房屋仲介的關係

較美的視覺感較易吸引到顧客

而就直覺性而言

我覺得 housingmaps 最直覺

也許是因為它都沒有分類

很直接直覺地把哪個地方有租屋、售屋的在地圖上點出來

並且加以簡述

如此一來對於區域性地區有特殊需求的人來說

會是個不錯的選擇

而就流暢度而言

我覺得大致上各站都還算滿流暢的

至少資訊都還算充足

較不會有找不到所要條件的情形發生

而就預期反應來說

我覺得 housingmaps 帶給我的預期反應最好

因為他不僅可設定細項條件

而且在介紹方面圖文交錯

且操作相當簡單便利

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

Hint: a sample work

2008年11月3日星期一

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.

Yahoo

Google

MSN

Lab: Making images accessible

1. Use Nvu or Notepad to edit the following homepage
at 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 by
adding 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.

Ans：

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 Zajicek
Pages: 35 - 39
Full text available:

Pdf(290 KB)

Enabling an accessible web 2.0
Becky Gibson
Pages: 1 - 6
Full text available:

Pdf(344 KB)

這兩篇文章有版權保護，必須在校內下載。或是透過圖書館線上登入，進行身分認證。

Ans：

在現今網路相當普遍的時代

網頁的供應量不斷增加

網頁的技術更是不斷地在提升

由於網路應用越來越廣泛的關係

訴求「所有人皆可讀取網頁」的Web2.0終於在2004年誕生

Web Accessibility便成為了最重要的議題

web accessibility 是指無障礙網路空間

為了身心障礙人士與一般閱聽大眾可以更輕鬆的瀏覽網路世界

當設計網頁時多加入一些步驟就可以讓更多人更簡易地瀏覽該網頁

許多以ajax的技術為底嘗試該如何使弱勢族群(ex:身心障礙者)也能順利瀏覽網頁

例如：

＊導盲磚 & AccessKey (熱鍵)
可以讓視障者只透過鍵盤和熱鍵瀏覽使用者想點選的連結

＊圖形替代文字
讓視障者和使用純文字瀏覽器的使用者可以了解該圖形所代表的意義

＊多多使用CSS (Cascading Style Sheet)
可以讓設計網頁者的每個網頁可以輕鬆套用一樣的樣式。甚至可以開放給大家套用

＊提供網頁訂閱
讓瀏覽者可以簡便欣賞我們的新文章

＊無障礙的Flash 與多媒體
加入字幕、聲音、對白、替代性文字式連結

如此一來

即便是老年人、或者是身心障礙者

他們使用網際網路的權利也變得跟一般人相等

不再因為一些網頁設計上的缺失而造成瀏覽的不便

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

我有去以下文章留言：

~五指山爬一半~

石垣島

深坑行

我的遊記-便所餐廳

福隆一日遊