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.

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 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 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_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 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 (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

上次上課已完成 => Lab: Form and Action, Part II


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

主要的差別:
（１）GET：是用資料加於URL之後來傳遞參數和參數的值。
（２）POST：利用FORM中的SUBMIT元件來傳遞參數和參數的值。

在安全性來說，使用＂GET＂的安全性較低，因為會把密碼、資料等直接放在URL上。

Lab Form and Action, Part 2

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

(遠傳電信)

(中原大學)

(太平洋SOGO百貨)

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?

　　Mashup 這個名詞最早出現在音樂上，原先是指藉由混合搭配不同的音樂，而呈現出不同的音樂效果；後來這個名詞被應用在 Web 2.0 上，意指透過結合各種網頁服務，所衍生發展出新的網路服務應用。

　　在技術上來說，mashup 可以是一個網站或是一個網路應用程式，透過混合搭配不同來源間的內容或資訊，而創造出來的一種全新服務；而所謂的內容可能是透過公共的介面或由第三方所提供，也有可能是由上述的 RSS/Atom 所提供，端視你混合搭配的方式。 時至今日，正如 blog 對線上發表文章掀起革命性的改變一般，mashup 也同樣大大改變了網路服務的發展，它允許使用者能自由組合現有資訊，以更新更富創造力的方式提供新的網路服務。

3. What is mashup?


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


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






（出處：http://zh.wikipedia.org/w/index.php?title=Mashup&variant=zh-tw）

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 Mashup 4

Create a slide show of your album.

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.


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


(1)美感: 個人認為在7house首頁上幾乎都是廣告,看起來較多采多姿,但在收尋後則為條列的方式顯示,
變得較無美感可言.而housingmaps和urmap兩者則是差不多,都皆為地圖來顯示,較清晰可見週
遭相關的環境.

(2)直覺性&流暢: 三者在直覺性和流暢方面上,感覺大致差不多好使用,但在有地圖配合使用上則較為方便,
不需要在另外收尋地圖或週遭相關資訊.

(3)預期反應:在這三個網頁上都可以很清楚的明白網頁的功能性,但在kijiji裡多提供了許多生活上的相
關資訊,例如:求職、求學、旅遊等等資訊,讓人可以很方便的收尋到其他想知道的資訊.

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: Making images Accessible

1. Use Nvu or Notepad to edit the following homepageat http://bloggercamp.blogspot.com/2007/01/2007.htmlYou 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.

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?

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.


(1)無名小站

(2)YAHOO

(3)FireFox開始頁

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」的介紹
　　 　
　　　
　　　　看完有關Web2.0的相關資訊後，才明白原來Web2.0也是一個有關網路平台化的模式。對於現今網路世界發達的社會，這個對人類而言是一個極大的商機。而由於網路的趨勢，讓許多平面媒體也都漸漸轉型於網路，漸漸的所有人的生活重心都建立於網路上面，而個人在網際網路上也越來越被受重視。在未來許多事物都和電腦、網路有關，而我們應該要更利用網路及時增加自己的知識，才不會慢了腳步。
　　
　　
　　
2. 針對前次作業遊記的部分，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。
　　
(1)許庭嘉 綠島大哥的日子
(2)謝宜涓 便所餐廳
(3)江美慧 ＊秋日遊記＊
(4)廖紹閔 上野壽喜燒
(5)賴宜宏 福隆一日遊
　　
　　
　　
　　

「Web 2.0」的介紹

　　　　　

　

　　

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

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

　　

　『本文引用自＂維基百科＂：http://zh.wikipedia.org/w/index.php?title=Web2.0&variant=zh-tw　』

　　　　

　

　　　「Web 2.0」這個名詞，最先是由 O'Reilly Media創辦人暨執行長奧萊禮（Tim O'Reilly）提出，標幟著自二○○一年網路泡沫化後，產業版圖中逐漸浮現的網站新模式。這些網站主要在幾方面有別於傳統網站：首先，他們朝思暮想的再也不是如何賣「軟體」，而是「服務」，也就是把網站視為一個平台（The web as a platform），「網站再也不純粹只是個『空間』， 而是一扇通往各式服務的『大門』，」以開發企業用Wiki軟體而聞名的Socialtext執行長梅菲德（Ross Mayfield）做了很貼切的說明；其次，「使用者」的角色將被置於最核心的位置，這些網站經營者開始學習「信任」，將生產、掌控資料的權力交還給使用者，「由底層發聲」的部落格是最明顯的例子。

　　　

　　　

　　　正因為對使用者的重視，以Web 2.0模式經營的網站多半成長速度飛快，如Flickr、Digg、Del.icio.us、Bloglines、Socialtext等新面孔，極短時間內就成為網路世界最熱門的人潮匯集之處。然而對大部分的網站來說，「重視用戶」根本就是提升流量的基本概念，那麼究竟什麼才是Web 2.0網站最關鍵、最獨特的成長基因？Adaptive path網站設計公司資深從業員蕭爾（Brandon Schauer）指出，Web 2.0的「基礎屬性」包括「由用戶貢獻價值」、「長尾定律」（由於通路的擴大與時間的拉長，利基產品也能賣出與暢銷產品一樣的量）、以及「網絡效益」三者構成網站的經濟模式，然而過去成功存活下來的網站也都具備這些特性。真正讓Web 2.0網站創造出獨特使用經驗的，是四項「體驗屬性」：去中心化、集體創造、可重混性、突現式系統。這四項特性，某種程度上標幟出了網路業者再創網路高峰的三個關鍵引爆點：社會網絡、集體創作、以及部落格。

　　

　

　『本文引用自yahoo知識+:http://tw.knowledge.yahoo.com/question/question?qid=1306061006305 』

　

　

Lab: More on HTML

Headings
1. Copy and paste the Headings example at
http://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，而其字體大小由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?
=> Unordered Lists 是在字的前面顯示項目符號；Ordered Lists 是顯示編號

Lab: Tongwen

At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.

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.



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 atwww.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)經濟部



(2)國立故宮博物院


(2)教育部

Homework 10-20-2008

1. 參考 PageRank-Google 決定搜尋排名的關鍵技術

以及Google.com 網站的官方解釋，簡要說明PageRank原理。

Ans: PageRank原理是利用網頁與網頁之間超連結中的反向連結來決定收尋排名，
　　簡單來說就是如果自己網頁在別人的網頁中設有超連結，那就視為得到一票。

　　＊PageRank值決定的指標：

(1)反向連結數 (2) 反向連結是否來至PageRank值高的頁面 (3) 來源頁面的外向連結數

2. Essay Writing on Google Docs (>500 Words)

參考新蘇格蘭遊記，撰寫一篇你自己的秋日遊記。

＝＞　【薰衣草森林】

【薰衣草森林】

＊地點:新竹 尖石鄉 [薰衣草森林]＊

　

　

在一個閒情逸致的下午，這個假日大家都沒回家，

一時興起，查了查地圖，大家都不熟路，但就開始這旅遊冒險。

騎著車就衝往之前那期盼已久的＂薰衣草森林＂

騎了好一段路，到了新竹內灣：內灣老街。
逛逛吃點東西，順道一提，＂野薑花粽＂、＂香腸＂還真是好吃=)

吃飽喝足後，ＧＯＧＯ　繼續前進！！

要到薰衣草森林，還得從內灣繼續更進入山中。

蜿蜒陡峭的山路，騎著車還真有點害怕，但也更令人期待。

（薰衣草森林餐廳）

　

　

騎了快２小時的車，腰痠背痛終於到了目的地。

山上的新鮮空氣，真不錯！！

一進門口就看見了白色的房子（上圖），而在小屋的外面站立了兩隻大熊

真的是超可愛的，身上穿了結婚禮服的兩隻熊，和我一樣高耶！！

而白色房子的餐廳，因為才剛吃飽，所以就沒緣享用了。

裡面的佈置還真不錯，下次有機會一定要來吃吃看=)

　

　

　

（步道）

原以為薰衣草森林就只有這樣一點點而已，感覺有點失望。
但正當失望之餘，經過了白色的餐廳，發現了另一片天。

在房子的後面，有一個綠綠的小山丘和４匹木製的馬。

還有小孩的遊戲區，許多小朋友在玩著撈魚。

而我們一群人，就開心的在山丘上和木馬拍照=)

繼續往下走，步道旁有好多可愛顏色的兩人座椅，

坐在那可以吹著徐徐的微風，曬著太陽，眺望著山下，感覺好舒服！！

心情整個都放鬆了起來～

在課餘之時，我們最喜歡到風景區走走～一起冒險！

放鬆心情，並且可以增進大家的友情！！

　

　

　

（薰衣草＆戰利品：薰衣草小熊）

精品店：裡面有著各式各樣有關薰衣草的東西，
為了紀念第一次來到薰衣草森林，於是我買了一隻＂薰衣草小熊＂

這隻小熊真的好可愛（上圖）
全身都是紫色的正如同薰衣草的顏色，而身上的味道也是薰衣草的味道。
特別的是，這隻小熊還有專屬的身分證，寫著它製造的日期及編號。

＂薰衣草森林＂雖然沒有很刺激的遊樂設施，

但適合放鬆心情出外走走，推薦大家可以找朋友、家人一起出遊喔！

Lab : Clean Language

1. Save the JavaScript file of Clean Language to your desktop.

Make changes to the script with self-defined bad words.

To do this, save the JavaScript on your desk top. Use Notepad editor to make changes.

Install the modified script as Greasemonkey.

2. Use Google to search webpages that contains some bad words.

3. Try whether the filtering take effects.

Lab : Greasemonkey

Install Greasemonkey 0.8. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the

Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?