Lab 35 Web Traffice 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 36 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 34 Speed Test

cycu proxy



ncu proxy



no proxy

Lab 32: blog cloud

Lab 33: Google Analytics

Lab 33: Google Analytics

Lab 31: Syndication with RSS 2.0

Lab 30: navigation bar

Lab 29: DOM

1. Open KompoZer
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 28: Create Image using DOM

1. Open KompoZer
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 27: Using XML and XSLT

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 26: Using XML

1. Register and Download Xray, an XML, XSLT editor and processor. (安裝X-Ray需要本機權限)

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.

Lab Hand code a form

Hand code a HTML or use KompoZer 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 25 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 KompoZer HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.

5. Use KompoZer 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?

Homework5

一.請點選以下中原大學電算中心有獎徵答活動，檢視當中使用了哪些服務的 mash-up?

google docs 的表單、文件、報表

2. Rich Internet Applications 泛指網頁上高度互動性設計，諸如Youtube, Google Maps 等，需要較多的運算與頻寬，請問這些應用是否可能將無障礙設計納入考量，以兼顧視障，肢體障礙，聽障者的需求?

網頁高度互動性設計是有可能將無障礙設計納入考量的。

3. Augmented Reality (on Youtube Video) 目前有哪些研究?是列舉三個研究單位或三項研究的簡介。

一.美國哥倫比亞大學的「電腦繪圖與使用者介面實驗室」製作了一套實驗式室外系統，用來協助觀光客遊覽大學校園。

二.Sony推出的一套擴增實境遊戲EyePet，遊戲中的寵物就在客廳的桌子上活了過來。

三.麥吉爾大學的智能機器研究中心這些地板磚可以模仿沙地、雪地、草地的環境（包括視覺、聽覺、感覺等）。這些地磚可能被用於一些增強實境的應用，包括電話會議、遠程培訓、遠程醫療等。

Lab 24: Mash-Up 4 (Calendars)

Lab 23: Mash-up 3 (Blogs)

Lab 21: Mash-up 1 (Publish)

Lab 22: Mash-up 2 (Maps)

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裡多提供了許多生活上的相
關資訊,例如:求職、求學、旅遊等等資訊,讓人可以很方便的收尋到其他想知道的資訊.

Homework 4-19-2010

2.針對上次作業第三題

"依據永恆的數位分身的說法，試舉出一個實例或反例。"

選出至少三篇文章加以評論，在作者部落格給予回饋。每篇回饋請加註

選擇此篇文章給予回饋的原因(單選)，
1. 友情贊助 2. 見解精闢 3. 隨機選取 4. 其他(請說明)


魏子崴
簡維辰
陳建舟

Lab 20: 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 19: 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.

Lab 18: Making images accessible

1. Use KompoZer 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 KompoZer.

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.

Lab 18: Making images accessible

1. Use KompoZer 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 KompoZer.

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.

Homework 4-12-2010

1. 依據 What is web accessibility，試針對三種不同障別舉出三種無障礙設計方式，並請探討跨障別設計是否可行?(也就是所謂的通用設計)

「 無障礙網頁」， 就是遵循無障礙網站設計之規範，提供網頁導盲磚、鍵盤快速鍵(Access Key)、網站導覽(Site Navigator)等無障礙網頁之設計，為使對滑鼠操作有障礙之人士，亦可快速瀏覽網站之任何資訊。
網際網路的無障礙空間，十四條規範：
規範一：對於聽覺及視覺的內容要提供相等的替代文字內容
規範二：不要單獨靠色彩來提供特殊資訊
規範三：適當地使用標記語言和樣式表單
規範四：闡明自然語言的使用
規範五：建立編排良好的表格
規範六：確保網頁能在新科技下良好地呈現
規範七：確保使用者能處理時間敏感內容的改變
規範八：確保嵌入式使用者介面具有直接可及性
規範九：設計裝置獨立網頁
規範十：使用過渡的解決方案
規範十一：使用國際與國內官方訂定的技術和規範
規範十二：提供內容導引資訊
規範十三：提供清楚的瀏覽網站機制
規範十四：確保簡單清楚的網頁內容

智障

網頁的配置和結構力求單純
聽障

訂出良好的描述規則來設計各種多媒體資訊的替代文字說明
視障

鍵盤快速鍵(Access Key) 網頁導盲磚係以文字意象表示無障礙網頁導引功能，一般以三個“ : ”表示網頁導盲磚，如 “ ::: ”。主要是提供在不使用或不能使用滑鼠操作網頁的環境，也能快速操作網頁。

2. 依據 Tutorial，HTML 3.2 與 HTML 4.0 最大差別在哪裡?

HTML 轉譯延伸模組會轉譯 HTML 格式的報表。轉譯延伸模組可以產生下列類型的 HTML：HTML 3.2、HTML 4.0 或 MHTML。轉譯延伸模組也可產生完整的 HTML 頁面，或內嵌在其他 HTML 頁面中的 HTML 片段。所有 HTML 均以 UTF-8 編碼產生。
HTML 轉譯延伸模組是在瀏覽器中檢視之報表的預設轉譯延伸模組。預設 HTML 類型是 HTML 4.0。
• 若要使用 HTML 4.0，請在報表管理員、SharePoint Web 組件或報表 URL 中開啟報表。
• 若要使用 HTML 3.2，必須在報表 URL 上參考它 (例如
HTML 4.0 報表符合 HTML 4.0 和階層式樣式表層級 2 (CSS2) 規格，但有部分例外。HTML 3.2 報表符合 HTML 3.2 規格，但可能包括部分樣式以改善外觀。HTML 轉譯延伸模組支援彙總 HTML 文件 (MHTML) 標準的 MIME 封裝。這個轉譯延伸模組會以 MIME 結構，將影像、文件或其他二進位檔等資源內嵌在單一檔案的報表 HTML 中。報表中的編碼資源會增加報表的大小，但內嵌資源對於無權存取儲存在報表伺服器或另一個位置之資源的用戶端而言，是非常有用的。MHTML 報表對於在電子郵件訊息中內嵌也是非常有用的，因為所有的資源皆包括在報表中。
3. 依據永恆的數位分身的說法，試舉出一個實例或反例。

永恆的數位分身:
它存在於網路世界，網路上有很多不同的用戶帳)，像是你的專屬分身。

實例: 在BBS或任何需要登錄會員
進行發文或交友……之類的。
反例: 像很多網站用分身，進行輿論的謾罵
對了!
最近在非死不可的網站，也有人看小小彬不爽
而進行抵制，只是個小孩，何必呢?
你說對吧! 我住新竹還沒去吃過他家羊肉爐耶 有人要揪團嗎?

Lab 17: AccessBar

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 at
www.ocac.gov.tw www.epa.gov.tw










Continued from the above, use google to find 3 more government sites in Taiwan that enable access keys.

Lab 16: Accessibility in 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.

Lab 15: 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?

Lab 14: HTML

Preparation

1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction 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.

桌上型主機

Intel Core 2 Quad Q9300處理器2.5G
640GB SATA2 3Gb/s HDD
2GB DDR2 800 SDRAM可擴充至8GB
16X DVD SuperMulti燒錄機/ 讀卡機
ATI HD4650 1GB獨立顯示卡
正版Windows Vista Home Premium
High-Definition Audio，支援7.1聲道
中文版防毒軟體一年

華碩筆記型電腦K40IP

螢幕：14" 鏡面寬螢幕 (LED)

CPU：Pentium Dual T3300 (2.0GHz)

記憶體：2GB DDRII 800 On board(Max.4G)

硬碟：500G(SATA)

顯示：NV202M 512MB

光碟機：DVD Super Multi (DL)

網路裝置：802.11n /Gigabit LAN

作業系統：64 Bits Windows 7 Home Premium

ACER筆記型電腦

CPU：Intel Pentium 雙核心 T4400(2.2GHz)
硬碟：320GB 5400K SATA
螢幕：14W鏡面8毫秒
記憶體：1*2G DDR3 1066
顯示卡：NV G105M 實體512M
光碟機：DVD-Super Multi DL (SATA)
無線裝置：802.11bg/Draft-N / BT 2.1
其他：五合一/ 30畫素 / 6CELL
指紋辨識/ 杜比第三代/

Sony VAIO筆記型電腦

VPCF116FW 筆記型電腦，高解析度 16.4 吋寬螢幕液晶顯示器，為您的筆電開啟寬廣視野。圓柱型螢幕轉軸的優雅輪廓曲線設計，展現漂亮的外觀質感與功能性。透過 HDMI 連接線，連接高解析度顯示器，立即享受高畫質影像與聲音。極致效能與娛樂，高階配備讓您可隨處觀賞的行動高解析度家庭劇院，享受家庭劇院、視訊通訊、內容製作以及刺激遊戲的娛樂樂趣，一指操控按鍵，立即滿足您的影音需求。
螢幕：16.4吋
CPU：Intel i7-720QM

硬碟：500GB
記憶體：4GB DDR3 1066
顯示：NVIDIA GeForce GT 330M 1GB

光碟機：Blu-ray Disc 藍光Combo光碟機

無線：802.11a/b/g/n，藍牙標準 Ver. 2.1+ED
作業系統：Windows7 Home Premium 64bit

Lab 13 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 12 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?



You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
Install Web Developer Toolbar to examine cookies.

Lab 11 Collabrative Editing

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
2. Start writing.
3. Publish the Word document.
4. What's the URL of your document.
5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
6. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:
Google “Docs & Spreadsheets” Launches ,Oct 2006

Lab 11 Collabrative Editing

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
2. Start writing.
3. Publish the Word document.
4. What's the URL of your document.
5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
6. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:
Google “Docs & Spreadsheets” Launches ,Oct 2006

Homework 3

1. 為什麼Google搜尋不考慮網站的駐留時間，點閱次數，或使用者個數評量網頁重要性?
有些網站雖然瀏覽人數很多，但並不代表其內容對社會來說有重要性，像一些流行時尚或是遊 戲的網站，使用者個數很多，但其實這些對我們來說頂多就是新鮮有趣，但不一定重要。註留時間很長，也許有人網站就這麼開著而人不在電腦前；關於點閱次數，絕大多數人都是被標題吸引進去，一進到網站才發現內容其實不那麼有趣甚至是不重要的，因此以此評量網頁的重要性實在欠缺公信。

2. Google 搜尋的主要原理是什麼? 請以平易的語言說明。
定期搜索，即每隔一段時間，搜尋引擎自動執行『蜘蛛』程式(因為搜尋機制像蜘蛛一般在網路 上爬來爬去，所以稱為蜘蛛程式)，對一定IP位址範圍內的網站進行擷取，一旦發現新的網站（網頁），它會自動擷取網站的資訊和網址納入資料庫。


3. Google PageRank 每差距一分代表網頁的重要性有多大差別?
Google Page Rank每差1分，就代表著網站的重要性差一大截，分數的差距可能是顯示網站的瀏覽次數有差異，也可能是其被連結的次數，被重視程度有差異。越高的分數，就代表在 Google搜尋結果有更多的顯示機會(會擁有愈前面的搜尋排序結果，或者是在一大堆搜尋結果中處於愈前面的頁面)，也就意味著光是透過搜尋引擎，就能夠帶來愈多的訪客和流量，這是除了平日固定訪客外，最重要的訪客來源之一。

4. 國內外逐漸觀察到以部落格作為求職履歷的趨勢，你認為這會演變成常態嗎? 請論述。
國內如中正大學已推出部落格履歷，藉由經營部落格的方式，提供同學完整紀錄在學校的學習 過程及上傳個人創意作品的空間，因此包括有社團經驗、求學經驗、歷年修課紀錄、發表文章等功能，製作 e-portfolio 不但可以為自己的大學生活留下記憶，也是同學及老師間互相交流的管道，我們可展現自己的創意及理想或證明自己的實力。藉由資料整理輸入，不但可藉此回顧過去，從中學習反思與累積經驗，也能設定目標，規劃未來，未來更可作為求職或升學時，行銷自己最重要之依據。國內外陸陸續續也有人推出，因此我認為之後部落格履歷將會成為一種常態。

Lab 9 RSS Reader

1. Enter Google Reader

2. Try the following


iapblog.blogspot.com
http://www.cna.com.tw/


New York Times

http://yourblog.blogspot.com/feeds/comments/default

3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.