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 Meter

想知道有多少人曾造訪你的 blog, 想瞭解進入你網站的流量相關資訊? 以下的 Lab 利用 Site Meter 提供的服務達到這個目的.

1. 進入 Site Meter
2. 依據說明執行所述5 個步驟.
3. 進入你的部落格, 然後從Site Meter圖示進入觀看你的流量.
4. 想一想, Site Meter 的原理是什麼?

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

Homework 12-29-2006: Lab AJAX: Draggables

1. Open NVu
2. Study Silly easy shopping
and Draggables
3. Place an image you pick in your webpage.
4. Take a look at the source code of Silly easy shopping.
Be sure to place the javascript includes in your webpage, too.

5. Use the syntax of Draggables. Make your image draggable, too.

Lab Drag-and-Drop by AJAX

1. Go to Laszlo
2. Study and play around the "drag-and-drop" example.
3. Use this method to control music playing of the song "Where to begin".
4. Add the song to the program.
5. Change the photo to the CD title.
6. If you drag and drop the photo to the "play" area, the music plays.
7. If you drap and drop the photo to the "pause" area, the music pauses.

Lab Movie Player by AJAX

1. Go to Laszlo
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.

Ajax

Why Ajax

• HTML is basically for hyperlinked documents and offers very limited interactions.
• AJAX brings desktop like interactions to the web and complements HTML in terms of graphic user interfaces.

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; The structure of the DOM exposes new powerful methods which allow you access and manipulate the elements of any document.
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together. It has comprehensive control over every page element.

Reference

Lab Wikepedia

Use Wikipedia to give brief definitions of the following terms:

* mashup
* Document Object Model
* orz

Include the URL of the origins.

Lab DOM and JavaScript

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

Hint: The javascript code should be enclosed by script tags.
Reference: DOM (Document Object Model)

Web 2.0

Web 2.0

• WYSWYG (What you see is what you get.)
• Personalization
• Mashup
• Sharing
• Feedback

If Web 1.0 is read only, then Web 2.0 is Read-Write.

Web 1.0 is for the user.
Web 2.0 is for the user and by the user.
Web 3.0 is for the user, by the user, and of the user.

References:

What is Web 2.0? By Andy Budd of Clearleft Ltd

What Is Web 2.0 by Tim O'Reilly

examples:

維基百科，自由的百科全書

Some mashup examples

• Real time satellite tracking
• HousingMaps
• Map your own photes.
  
• More applications of Google Maps

Lab WYSWYG

1. Enter an introduction to Panorama Explorer
and read it. It is a mashup based on Google Maps.
2. Test drive the WYSWYG interface of Panorama Explorer.
3. Post a photo on the right spot of the world map.

Lab Personalization II

1. Enter
http://www.google.com/ig

2. Rearrange the templates. And perhaps remove blocks that you don't need.

3. Add new stuff.

Lab Personalization

1. Go to Google News
2. Add a new category from standard subjects
3. Try to relocate the news category to a new place
4. Delete this news category.
5. Add a new category with your personal subject. You must enter a keyword centric to this news category.
6. Try to relocate the news category to a new place

Homework 12/08/2006

1. Do Lab XSLT, Part III

2. Read the introduction of DOM.

模範作業 12-8-2006

電子二乙 9426249 黃國祝
電子四甲 9226144 王郁智
電子二甲 9426124羅欣瑜
電子二乙 9426201 蘇聖航

DOM (Document Object Model)

操作以下這個網頁
web personalization 網頁個人化
你會不會覺得有點神奇, 它是如何做到的?
關鍵就在 DOM.

With the DOM scripting methods you can:

- Create new elements on the fly.
- Grab all the tags of the document, or grab the text without grabbing the tag text.
- Insert new text, and change or remove text from any element.
- Move whole parts of the document around, or remove parts as fragments and work with them.
- And the best part: all of these new methods should work in any DOM compliant browser. No more browser sniffing. No need to build different versions of the same page for different browsers.

Reference:
Scripting For The 6.0 Browsers, By Scott Andrew LePera

createElement() allows you to create a new tag.

myImg = document.createElement("IMG")

Give definition.

In the above example, our newly born tag has no ID, no SRC and no home in the document yet. So let's give it some definition:

myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")

Append it within the document "tree".

Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():

docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)

Lab XSLT, Part III

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.