隨雪隨風轉: 2008

2008年6月20日星期五

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 Site Traffice 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 Testing User Interface

For housing services, compare the three websites

http://www.housingmaps.com
美感: 不錯由衛星照片可以清楚知道附近建築與交通狀況
直覺性:可以照需求的不同分類成"出租""出售""價錢"...等
點一下小標籤便可出現詳細資訊.雖然大部分都沒有很多資訊
流暢:滑鼠滾輪無法放大縮小地圖.意料外的事.但在分類清楚下可以彌補此缺
憾
預期反應:房子的資訊還不夠明確透明.大眾可能還是以房屋仲介為優先

http://www.urmap.com.tw/asp/kijiji/
美感:色彩和諧
直覺性:有路線設定功能.十分實用
流暢:讀取速度快
預期反應:點2下滑鼠可以移動到該處.但仍不能用滾輪縮放.很不習慣

http://www.7house.com.tw/
美感:鮮豔的色調.淺綠色的字看久眼睛會累.整個網站太亮.不舒服
直覺性:分類成"用途""座向""坪數""總價"....等.馬上可以搜尋到想要的房子
流暢:高.只有文字圖片
預期反應:房屋資料詳細.又有照片.但沒地圖不方便

2008年6月18日星期三

期末報告

2008年6月13日星期五

Lab Google Mars (AJAX)

1. Observe how Google Mars loads the map and does the zooming. Is the data downloaded once
for all or retrieved on demand?

A: retrieved on demand

2. HTML alone cannot perform the functions of Google Mars. So find out which code in the HTML
source does the map things.

Hints: You may use Nvu to determine what HTML tags are for what.

將框框中文字刪除即可

Lab Simple Use of Web Service

"we make a living by what we get, we make a life by what we give"

Test Drive a web service
1. Take a look at the schema of Zip Code Web Service.
2. Use the lincense key eUhOTOJs9D2mcHU6SiL0CyMQvpJ3I3PqR2/fpRq4BOApWxzSzw7wD2FQ2mOmHEk+pq6iRBomQ4wuQl5EGOgfCitYgkQ3N4vl
to use this web service or subsbcribe to it at Zip codes lookup To apply for the license key by yourselves, be sure to have an email box to receive it.
2. Click GetPlacesInside and play with this operation
3. Enter 61801 as zip code and see what you get in the result.

4. Try again 92345 as zip code

Question: Why do you need a license key to use the service?

未來可能有商業上的價值.並防堵惡意程式攻擊

2008年6月12日星期四

Homework 6-7-2008

Content analysis做完之後，請針對分析數字結果，給予適當詮釋，背後的現象是什麼? (至少100字)

Ans:

Total:118

C : 16 (13.559%) R : 94 (79.661%) U : 8 (6.780%)

A : 67 (56.780%) D : 14 (11.864%) M : 37 (31.356%)

E : 37 (31.356%) P : 79 (66.949%) N : 2 (1.695%)

由上述分析來看.最多的回應以"RAP"為主.代表回應屬於有思考過並給予正向回應的.
而"UDN"是最少比例的.推文以有思考過但卻持反面意見並帶有強烈措辭甚至情緒話的字眼為主
所以可以知道大部分的人對作者都會持正面積極的態度.少部分會消極且情緒化.所以這社會還是
正面向上的

2008年6月6日星期五

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 SSL

1. Try Yam membership enrollment
for using SSL encrypted Internet communications.
2. Note the lock at the lower right corner is secured when SSL is enabled.
3. Click the lock icon and a message window should pop up.
4. What kind of encryption is used in this SSL? How many bits are there in the encryption key?

A:AES-256,256bits

5. Who issued the certificate you are seeing? (Who is the certificate authority, CA, for this website?)

A:UTN-USERFirst-Hardware

6. Until when is the certificate valid?

A: 2007/7/16~2010/7/16

7. What kind(s) of hash is/are used in the CA's digital signature?

A:SHA1,MD5

8. How many bits are there in the hash(es)?

A:SHA1 20Bytes MD5 16Bytes

Lab Hash

1. Install SlavaSoft HashCalc2. Open the file readme.txt of this software3. Calculate the cash.4. Open another copy of HashCalc5. Open the file readme.txt and delete the first space fo the file.6. Calculate the hash of the modified file.7. Compare the hashes of two files.

2008年5月30日星期五

Lab XHTML Validation

1. Use the W3C Markup Validation Service to check the XHTML sample.2. You may want to select the direct input option.3. How many errors and warnings are there?4. Fix the problem and recheck it until it is strictly XHTML 1.0 compliant.ref: Introduction to XHTML

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 : 2個

中原 : 1個

yam天空 : 1個

2008年5月23日星期五

Lab Content Analysis

According to the scheme above, the content of comments was characterized by the three independent dimensions. The intention of the analysis was to reveal any emergent correlations among three attributes of comments collected in the dataset.

The affective dimension was generally quite straightforward and lent itself to comparatively easy classification. To probe the range between agreement and disagreement requires more careful judgment and usually involves more reading between the lines. The boundary between reflection and non-reflection was somewhat blurred for some occurrences of comments. Some comments showed no reflection as all; some comments demonstrated sufficient reflection while others appeared to possess marginal reflection.

Perform content analysis on the dataset of comments on the essay blogs.

Total:118

C : 16 (13.559%) R : 94 (79.661%) U : 8 (6.780%)

A : 67 (56.780%) D : 14 (11.864%) M : 37 (31.356%)

E : 37 (31.356%) P : 79 (66.949%) N : 2 (1.695%)

2008年5月16日星期五

Lab: Drag-and-Drop by AJAX

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 by AJAX

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.

2008年5月13日星期二

Homework 5-2-2008

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

[Reading] AJAX
A New Approach to Web Applications Jesse Garrett
AJAX 簡介 Brett McLaughlin

Ans:

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

standards-based presentation using XHTML and CSS;
dynamic display and interaction using the Document Object Model;
data interchange and manipulation using XML and XSLT;
asynchronous data retrieval using XMLHttpRequest;
and JavaScript binding everything together.

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques.

These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.

If you're developing Web applications these days, then you're doing Ajax development. Ajax is no longer something unusual that you add to your applications in special cases. It has become an integral part of Web development. To some, enhancing applications with Ajax used to be a tricky proposition. Cross-browser limitations to deal with, writing a lot of complicated JavaScript, and learning about magic numeric codes within that JavaScript were just a few of the challenges facing Ajax developers. Thankfully, several open source JavaScript libraries are available now to make things much easier. In this first article in a three-part series, you will create an Ajax application for managing songs using the Prototype JavaScript library and script.aculo.us.

This three-part article series looks at using two separate open source projects, the Prototype JavaScript library and script.aculo.us, to create amazing Ajax applications for your Web 2.0 Web site. In this article, Part 1 of the series, you will be working the Prototype JavaScript library (see Resources for a link). This article uses the latest release of Prototype (at the time of this writing) version 1.6.0.2. Ajax involves dynamic data, and so a server-side technology is needed. In this article, we use PHP 5.2.1 in combination with Apache 2.0.59 and MySQL 5.0.41 (see Resources). You can definitely pick your own programming language, Web server, and database.

2008年5月2日星期五

Lab 26 Create Img using DOM

1. Open Nvu

2. Hand code a javascript that loads an image from Internet based on
the DOM model.

3. Use window.onload to load the image.

4. Use a button to load the image. Try how onclick works.

New stuff with Microsoft

In the Harry Shum's keynote speech at WWW 2008 and one of the industrial tracks by Tao, Microsoft feature the following two search services, one called virtual earth and the other photosynth. They look like fun. Definitely, we should try them out.

http://maps.live.com (does not only provide satellite image which is low resolution but also aerial views taken by airplanes flight-by)

http://www.labs.live.com/photosynth/ (it's an amazing way to view the photos people took and published on the net)

微軟的3D地圖讓人為之驚嘆.在瀏覽過程能感受到四周建築的景象.更能增添臨場感.相較之下.google map就相形見絀了.相信微軟未來會推出中文版.使用上會更親切不過頻寬不大的人用起來就很辛苦.各取所需吧.我期待未來會有動態的地圖出現

Lab 25: XML and XSLT, Part III

1. Given the RSS of Class Blog, write an XSLT file
and 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.

Due May 2, 2008

2008年4月18日星期五

lab 24: XSLT Part II

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.

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 23: Lab XML & XSLT

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年4月17日星期四

Homework 4-11-2008

1. What does a CGI output contain in the HTTP header? Hint: Such as Content-type. More details in Appendix A of Textbook.

ANS:

CGI的工作方式，從Web伺服器的角度看，是在特定的位置（比如，http://www.example.com/wiki.cgi）定義了可以運行CGI程序。當收到一個匹配URL的請求，相應的程序就會被調用，並將客戶端發送的數據作為輸入。程序的輸出會由Web伺服器收集，並加上合適的頭，再發送回客戶端。
例如: 論壇認證討論版計數器 E-mail 意見回覆等等

2. If you want to upload an mp3 file, should you use the GET or POST method? Why?

ANS:

POST .methodPOST 方法是將資料包裝在 HTTP 標頭內傳送給 Web server；而 GET 方法則是將資料直接加在 URI 之後。使用 GET method 所能傳遞的資料有限（連同 URI 共255字元），在需要上傳大量資料或檔案時，需使用 POST method。

2008年4月11日星期五

Lab 22: 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 21: 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. 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年4月10日星期四

Homework 3-28-2008

1 根據無障礙網頁設計原則

為什麼不要開出新視窗?

ANS: 在一般的瀏覽器中."上一頁"功能是大家熟悉不過的小動作.可是對身障者來說卻是一種辨識的困難.雖然 JAWS 會在連結開出新視窗時唸出「 New browser window 」，但仍然容易在它唸出鏈結文字和新頁面內容之間被漏掉.Lillian 從中獲益了。因為她的 Internet Explorer 視窗總是最大化（這樣她纔看得見），所以新視窗開啟的時候也會預設變成最大化。除此之外 Windows XP 還會把同一個應用程式的多個視窗群組整理在工作列上，所以在視覺上就更難發現有新視窗被開出來了。突然之間，「上一頁」按鈕莫名其妙地失效了，而 Lillian 完全不知道為什麼會這樣。如果妳預期她會很高興地閱讀連結後的內容，倒是可以略過這個問題。

為什麼要使用貼切的網頁標頭? 而不是留白?

ANS: 貼切的網頁標題可以讓身障者馬上了解該網頁的大致內容.而不必閱讀整個網頁.省下不少時間

定義快速鍵有什麼好處?

ANS: 並不是每個人都可以自在的使用滑鼠.由

accesskey可以滿足只有鍵盤使用的人

2. According to Section 2.1 of Textbook, some websites are powered by databases in the back end and some are not. What are the purposes of using databases?

ANS:
資料庫（database）可以將用戶資料作分類存放，減少資料的重複性和不一致性，讓它作有效的存取，並且也能增加資料的安全性。
對於網頁的互動有相當大的功用，不僅減少人力，資料的更新也具有即時性。

減少資料重複(Reduced Redundancy)
整合資料(Integrated data)
完整性(Integrity)
資料的共通性
可保護資料的安全及隱私

3. Problem 1 & Problem 3 of Textbook on Page 55.

Q1:WEB技術演進是要解決什麼問題?

ANS:Web 技術的演進主要是增進使用者(用戶端)的便利性、多樣性。
舉例來說，起先時期的網頁為靜態網頁，但由於靜態網頁的變化性太小，無法提供像現今即時新聞、線上交易等功能。
因此，才有動態網頁的技術出現。但最初的動態網頁技術主要是以程序(Process)為主體，所以當同一個伺服器(Server)同時處理過多使用者的要求，就會導致網路速度變慢。
目前 Web技術就以執行緒(Thread) 來代替程序(Process)解決速度上的問題。

Q2:程序(Process) 和執行緒(Thread) 對網站性能有什麼不同的影響?

ANS:以程序為主體的動態網頁，在處理每一位用戶端的要求時，就要重新執行一次程式，結束後就關閉，因此當網站的使用者變多的時候，網站的速度就會變慢。

以執行緒(Thread)為主的動態網頁，因為當使用者連到該網站的伺服器(Server)時，程式已經開啟(常駐程式)，每一個動作皆以執行緒來執行，因此網站的速度會大大的提升。

4. Reading Assignments:XML (Page 187-188 on the Textbook)

2008年3月28日星期五

Lab 20: accessibility checker

1. Using A-Checker, Check the following 2 sites for accessibility.

http://bloggercamp.blogspot.com/2007/01/2007.html

the page you fix with ALT tags

2. Do you see any improvements on accessibility after you apply ALT tags?
Ans:
known減少3個
likely減少0個
potential減少9個

Lab 18: Webpage Accessibility

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

1. You can copy and paste the content to your Nvu.

2. Take a look at the HTML 標籤, HTML 原始碼

原始碼