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.
2009年6月23日 星期二
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.
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 Web Traffic 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.
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.
2009年6月13日 星期六
Homework 6.12.2009 Drag 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.
Due 6.19.2009
播放
暫停
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.
Due 6.19.2009
播放
暫停
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.
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.
2009年6月12日 星期五
Lab Speed Test
測試中原大學與中央大學對外頻寬速度。
Tool: Speedtest
中原大學:cycu proxy: proxy.cycu.edu.tw:3128
中央大學:ncu proxy.csie.ncu.edu.tw:3128
Tool: Speedtest
中原大學:cycu proxy: proxy.cycu.edu.tw:3128
中央大學:ncu proxy.csie.ncu.edu.tw:3128
Homework 6.5.2009
2009年6月5日 星期五
Lab Google Analytics
1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
3. Check the results to see the daily traffic chart, the recent visitors by locations.
2. Put the code provided by Google Analytics in your own blog.
3. Check the results to see the daily traffic chart, the recent visitors by locations.
Lab Syndication with RSS 2.0
1. 進入你的部落格，登入，選擇自訂
2. 新增小工具
3. 選取
資訊提供 新增
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作
4. 撰寫或貼上所需連結(範例)
2. 新增小工具
3. 選取
資訊提供 新增
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作
4. 撰寫或貼上所需連結(範例)
2009年5月15日 星期五
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.
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.
2009年5月8日 星期五
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.
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 Hand code a form
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.
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
"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?
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?
2009年5月2日 星期六
Homework 5-1-2009
1. 嘗試闖關以下這個遊戲
Place That State Game
2. 建立你的行事曆，並與學校行事曆合併
Place That State Game
2. 建立你的行事曆，並與學校行事曆合併
Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>
2009年5月1日 星期五
Lab Mash-up 4
Lab Mash-up 3
Maps of the Swine Flu Outbreak - Part 1
Maps of the Swine Flu Outbreak - Part 2
Maps of the Swine Flu Outbreak - Part 3
這些應用的特點是什麼?
ps. More applications of Google Maps
這三個頁面都是再講有關新型流感的病例散佈地點，還有擴及到的範圍，利用GoogleMAP的方式來顯示出來，利用眾多網友各自分享每個國家的相關資訊，配上部份的新聞影片，第三個還有推算可能的擴散半徑！這樣比一般媒體能得到的消息更精細，更有效率！
Maps of the Swine Flu Outbreak - Part 2
Maps of the Swine Flu Outbreak - Part 3
這些應用的特點是什麼?
ps. More applications of Google Maps
這三個頁面都是再講有關新型流感的病例散佈地點，還有擴及到的範圍，利用GoogleMAP的方式來顯示出來，利用眾多網友各自分享每個國家的相關資訊，配上部份的新聞影片，第三個還有推算可能的擴散半徑！這樣比一般媒體能得到的消息更精細，更有效率！
Lab Mash-up 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
美感:
HousingMaps>UrMap>7HOUSE ; HousingMap單純以地圖來呈現，我喜歡這種極簡風，相較之下 7HOUSE廣告很多，十分雜亂，令人感到不耐！
直覺性:這點是UrMap勝利，簡單明瞭的介面，令人方便搜尋想要的資料Ex:職缺,租屋 ，中文介面也是相當重點的賣點；7HOUSE則是依然敬陪末座！
預期反應:應該是UrMap最受歡迎，畢竟擁有許多中文的資料，種類也相當豐富，操作上也十分流暢，相信很容易便可以找到想找的資料
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
美感:
HousingMaps>UrMap>7HOUSE ; HousingMap單純以地圖來呈現，我喜歡這種極簡風，相較之下 7HOUSE廣告很多，十分雜亂，令人感到不耐！
直覺性:這點是UrMap勝利，簡單明瞭的介面，令人方便搜尋想要的資料Ex:職缺,租屋 ，中文介面也是相當重點的賣點；7HOUSE則是依然敬陪末座！
預期反應:應該是UrMap最受歡迎，畢竟擁有許多中文的資料，種類也相當豐富，操作上也十分流暢，相信很容易便可以找到想找的資料
Lab Mash-up 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
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
2009年4月18日 星期六
2009年4月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.
2. Fix the failures you found.
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?
答:是的
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.
中原大學
中央氣象局
igoogle
Report the summary of all the errors and warnings for each site.
中原大學
中央氣象局
igoogle
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.
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.
2009年4月3日 星期五
Lab 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 atwww.ocac.gov.tw www.epa.gov.tw
Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
台南縣身心障礙者夢工坊
台南縣政府
桃園縣政府
Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
台南縣身心障礙者夢工坊
台南縣政府
桃園縣政府
Lab: 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.
Shift+alt+x:下一頁 ; Shift+alt+y:上一頁
2. Google Access Keys Enables navigation through Google search results.
Shift+alt+x:下一頁 ; Shift+alt+y:上一頁
Lab: more on HTML
Headings
1. Copy and paste the Headings example athttp://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?
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?
可發現字體大小的改變！
修改前面的碼，可將標頭改變！
1. Copy and paste the Headings example athttp://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?
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?
可發現字體大小的改變！
修改前面的碼，可將標頭改變！
訂閱：
文章 (Atom)
