2008年12月29日 星期一

Lab Web Stress Test

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

2008年12月22日 星期一

Lab: Drap 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.

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.

2008年12月15日 星期一

Lab DOM

[Lab]
1. Open NVu
2. Based on the code as inhttp://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 on
the DOM model.
3. Take a look at the sample code that shows howwindow.onload to load the image.
4. Use a button to load the image. Try how onclick works.



2008年12月1日 星期一

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
2. 在CGI語法裡,解釋 GET, POST 差異在哪裡?

2.這兩個都是用來傳遞資訊給下一個網頁,在cgi語法裡是以get的方式取得url的變數資料,並用get的方式讀取參數,而post是將資料包裝在http標頭裡傳送給web server做處理,用post會比較安全,因為它不會將你的東西放在url.

2008年11月24日 星期一

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

1.光~之心情日記簿

2.小志的作業區

3. iPhone 專屬繁體中文社群網站 iPhone4.TW

Lab: 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.
1.

2.

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. Run your HTML by Firefox. What do you get?

8. Set method as "post"
9. Run your HTML by Firefox. What do you get?

1.

2.

3.

Homework 11-17-2008

1. Lab Making web pages accessible
2. What is Web 2.0?
3. What is mashup?
1.上次完成了......
2.以使用者為中心的一種概念產生。
3. 以前網頁的設計,是你需要什麼,自己就要寫程式碼。現在不同了,現今各大的媒體資訊網站,大多都支援鑲入於個人的網站上,如影音、相簿等服務。甚至,他們也提供了API,使用這些API,你可以利用網站所提供的工具,來設計出屬於自己的網頁。

2008年11月20日 星期四

971 OOP Midterm Exam: Quicksort

1.分割步驟:選取未經過排序陣列的第一元素,並決定他最後排列之位置(也就是位置的左方比此元素小,而右方比此元素大),之後分割成兩個子陣列。
2.遞迴步驟:對未排序之子陣列執行步驟1。

------------------------------------------------<程式開頭>--------------------------------------
#include <iostream>
#include<iomanip>
using namespace std;

int QS(int, int, int);//遞迴的副程式宣告

int n[10]={0};//初始陣列
int m[10]={0};//排序用陣列

int main(void)
{
    int i=0;//迴圈計算數
   
    cout<<"Quicksort程式\n請輸入10個整數數字進行排列\n";
    for(i=0;i<10;i++)//輸入數列
    {
        cin>>n[i];
        m[i]=n[i];//拷貝一份至m陣列。n陣列為保留值,不作異動
    }
    cout<<"你輸入的數列為:\n";
    for(i=0;i<10;i++)//將輸入的數值輸出供檢視之用
    {
        cout<<setw(6)<<n[i];
    }
    cout<<endl;
   
    QS(9,0,9);//進行排序
   
   
    cout<<"排序後的數列為:\n";
    for(i=0;i<10;i++)//輸出排序後之數列
    {
        cout<<setw(6)<<m[i];
    }
    cout<<endl;
    system("pause");
}


int QS(int a, int s, int o)//a為判斷的基數,s為左邊界,o為右邊界
{
    int c=0, p=s, q=o;//c為交換數值暫存用,p為此陣列之左邊界,q為此陣列之右邊界
   
    for(;s<o;)
    {
        for(;s<o;o--)//由右方開始比較大小
        {
            if(m[s]>m[o])
            {
                c=m[o], m[o]=m[s], m[s]=c;//兩兩交換
                break;
            }
        }
        a=o;//記錄基數位置
      
        for(;s<o;s++)//由左方開始比較大小
        {
            if(m[s]>m[o])
            {
                c=m[o], m[o]=m[s], m[s]=c;//兩兩交換
                break;
            }
        }
        a=s;//記錄基數位置
    }
   
    if((p<a-1)||(a+1<q) )//分割為左右兩陣列
        QS(a,p,a-1), QS(a,a+1,q);
    return 0;
}

------------------------------------------------<程式結尾>--------------------------------------


程式執行畫面

2008年11月17日 星期一

Lab 4 Mashup

Create a slide show of your album.

Hint: 挪威奧斯陸之行


我的2008環島之旅

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.


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

example: TMM
http://www.housingmaps.com
地圖介面使用Google的地圖,以Google地圖的方式來操作很直覺,
可以直接了解租屋點的相關資訊,但是連結的圖片大多為不可顯示。
另外在美國,Google地圖提供了路徑導航、或是交通流量之類的資訊,
甚至是街道圖像沒有支援於內,有點可惜。
如果有支援以上之服務,相信會更加完整!


http://www.housingmaps.com

UrMap本身就是台灣的線上地圖服務,所以在地資訊很完備,
設計方式也是如上,直接由地圖來顯示地點。
但是可能習慣使用Google地圖,所以操作UrMap方式感覺就沒有比較直覺(如滾輪縮放地圖、連點放大之類的)。
也是一樣,也沒有提供交通規劃設定,尚屬可惜。


http://www.7house.com.tw

頁面設計為先搜尋區域範圍,然後顯示列表項目,
點進去單項資料才會顯示地點,此設計沒有如以上兩種方式還來得直覺,
但是網站的顏色配置感覺蠻漂亮的。

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

2008年11月3日 星期一

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 inhttp://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.
我的Blog

我的E政府

環保署

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.

7.

2008年10月27日 星期一

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?

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.


3.


6.

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. more
  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.
Reference: Dive into Greasemonkey by Mark Pilgrim (free download)
http://dia.z6i.org/ (中文)


1.
2.
3.
www.ocac.gov.tw
www.epa.gov.tw
4.
www.gov.tw
http://www.tycg.gov.tw/main/main_index.aspx
http://www.longtan.gov.tw/index.aspx

Lab: Tongwen

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

Lab Tongwen 同文堂

1. Go to Firefox Top 15 downloads
2. Install Tongwen
3. Visit Sina.cn
4. Convert Simplified Chinese into Traditional Chinese


可使用的下載連結:http://forum.moztw.org/download.php/7231/files/tongwen_0.3.9.1_319.xpi 


翻譯前
 翻譯後

Homework 10-20-2008

1. 參考 PageRank-Google 決定搜尋排名的關鍵技術
以及Google.com 網站的官方解釋,簡要說明PageRank原理。

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

參考新蘇格蘭遊記,撰寫一篇你自己的秋日遊記。Use text, Google Maps, Photos, etc. as you like.
Invite your friends to write comments.

3. 關於你前ㄧ次散文作品,經過一個月之後你得到多少篇回應? 其中多少贊同,多少異議,多少具有實質內容?
1.Google的網路搜尋利用了超連結的方式,記錄了大大小小的網頁資訊,當然Google也提供了無法使Google爬蟲取得網頁資料的方式。在記錄的過程當中,Google會把頁與頁間的連結記錄下來,透過伺服器的分析處裡,若此網頁或網站有越多的連結指向它,代表此網頁的重要性也比較高,所以PageRank的數值就會比較高,或是PageRank值高的網站所給的連結也會比一般網頁給的連結數值還高。這是Google用來判斷網頁重要性的參考依據。

2.秋天是有去自行車環島,但是都還沒完工啦......因為不想遺漏小細節,所以就抱歉沒分享了XD

3.目前還是沒有回應。

2008年10月23日 星期四

Chap5-2:成績計算(更新)

成績處理作業
試利用結構設計一程式,可輸入全班同學(5人)的成績(英文、數學、國文) ,並計算出平均成績。
程式需要可按照需求以不同科目為索引,由大至小排列學生成績績。

提示:結構欄位中應有學號欄位,其餘自定

------------------------------------------------<程式開頭>--------------------------------------
//電子三乙9526215吳國志

#include <iostream>
#include <iomanip>
using namespace std;

//宣告學生儲存的學號ID、英文成績en、數學成績ma、國文成績ch以及平均av
struct student
{
    int ID[6];
    float en[6], ma[6], ch[6], av[6];
}IN, out;//宣告輸入IN以及輸出out的儲存位置


//宣告副程式:氣泡排序法
void change(int);
//宣告副程式:輸出排序結果
void print(int);


int main()
{
    int p=5;//人數(矩陣上限為5人)
    int i=0, j=0, f=0;
   
    //輸入成績
    cout<<"成績計算系統\n請輸入"<<p<<"位同學學號(數字)、英文、數學、國文成績\n";
    for(i=0;i<p;i++)
    {
        cout<<"\n請輸入第"<<i+1<<"位同學學號\n";
        cin>>IN.ID[i];
        cout<<"\n英文成績";
        cin>>IN.en[i];
        cout<<"\n數學成績";
        cin>>IN.ma[i];
        cout<<"\n國文成績";
        cin>>IN.ch[i];
        IN.av[i]=(IN.en[i]+IN.ma[i]+IN.ch[i])/3;
    }
   
    //將輸入值傳給輸出用的儲存位置
    for(i=0;i<p;i++)
    {
        out.ID[i]=IN.ID[i];
        out.en[i]=IN.en[i];
        out.ma[i]=IN.ma[i];
        out.ch[i]=IN.ch[i];
        out.av[i]=IN.av[i];
    }
   
    cout<<"\n【成績排行榜】\n";
    while(f!=6)
    {
        cout<<"選擇排行依據(輸入數字)\n1.以學號\n2.以英文分數\n3.以數學分數\n4.以國文分數\n5.以平均\n6.離開\n\n"<<"請輸入功能項目:";
        cin>>f;
       
        //排序判斷程式  
        switch (f) {
                //以學號成績排序(直接輸出)  
            case 1:
                for(j=0;j<p;j++)
                {
                    for(i=0;i<p;i++)
                    {              
                        if((out.ID[i]>out.ID[i+1]) && (out.ID[i+1]!=0))
                            change(i);
                    }
                }
                cout<<"\n以學號來排序\n";
                print(p);
                break;
               
                //以英文成績排序  
            case 2:
                for(j=0;j<p;j++)
                {
                    for(i=0;i<p;i++)
                    {              
                        if(out.en[i]<out.en[i+1])
                            change(i);
                    }
                }
                cout<<"\n以英文分數來排序\n";
                print(p);
                break;
               
                //以數學成績排序  
            case 3:
                for(j=0;j<p;j++)
                {
                    for(i=0;i<p;i++)
                    {
                        if(out.ma[i]<out.ma[i+1])
                            change(i);
                    }
                }
                cout<<"\n以數學分數來排序\n";
                print(p);
                break;
               
                //以國文成績排序
            case 4:
                for(j=0;j<p;j++)
                {
                    for(i=0;i<p;i++)
                    {
                        if(out.ch[i]<out.ch[i+1])
                            change(i);
                    }
                }
                cout<<"\n以國文分數來排序\n";
                print(p);
                break;
               
                //以平均排序  
            case 5:
                for(j=0;j<p;j++)
                {
                    for(i=0;i<p;i++)
                    {
                        if(out.av[i]<out.av[i+1])
                            change(i);
                    }
                }
                cout<<"\n以平均分數來排序\n";
                print(p);
                break;
               
            default:
                break;
        }
        if(f>6 || f<1)
            cout<<"輸入錯誤請重新輸入\n\n";
    }
   
    return 0;
}



//副程式:氣泡排序法
void change(int a)
{   
    int x;
    float y;   
    y=out.av[a], out.av[a]=out.av[a+1], out.av[a+1]=y;
    y=out.en[a], out.en[a]=out.en[a+1], out.en[a+1]=y;
    y=out.ma[a], out.ma[a]=out.ma[a+1], out.ma[a+1]=y;
    y=out.ch[a], out.ch[a]=out.ch[a+1], out.ch[a+1]=y;
    x=out.ID[a], out.ID[a]=out.ID[a+1], out.ID[a+1]=x;       
}

//副程式:輸出排序結果
void print(int p)
{  
    cout<<"排名\t學號\t英文\t數學\t國文\t平均\n";   
    for(int i=0;i<p;i++)
        cout<<i+1<<".\t"<<setw(5)<<out.ID[i]<<"\t"<<setw(5)<<out.en[i]<<"\t"<<setw(5)<<out.ma[i]<<"\t"<<setw(5)<<out.ch[i]<<"\t"<<setw(5)<<out.av[i]<<"\n";
    cout<<endl;
}
------------------------------------------------<程式結尾>--------------------------------------

程式執行畫面

Chap5-1:矩陣計算

矩陣運算(3*2)
設計一程式可計算M×N與N×M矩陣的乘積(設M = 3,N = 4)
提示:設矩陣A、B、C C = A×B

------------------------------------------------<程式起始>--------------------------------------
#include <iostream>
#include <iomanip>
using namespace std;

int main()
{
    int i=0, j=0;//宣告控制變數
    int A[3][4]={0},B[4][3]={0},C[3][3]={0};//宣告矩陣
    cout<<"矩陣運算程式(3*4)*(4*3)\n輸入方式請由左至右由上至下\n";//程式運作宣告
    cout<<"請輸入矩陣A的數值\n";//輸入
    for (i=0;i<3;i++)
    {
        for (j=0;j<4;j++)
            cin>>A[i][j];
    }
    cout<<"你輸入的矩陣A為\n";//驗證輸入
    for(i=0;i<3;i++)
    {
        for(j=0;j<4;j++)
            cout<<setw(4)<<A[i][j];
        cout<<endl;
    }
   
    cout<<"\n請輸入矩陣B的數值\n";//輸入
    for (i=0;i<4;i++)
    {
        for (j=0;j<3;j++)
            cin>>B[i][j];
    }
   
        cout<<"你輸入的矩陣B為\n";//驗證輸入
    for(i=0;i<4;i++)
    {
        for(j=0;j<3;j++)
            cout<<setw(4)<<B[i][j];
        cout<<endl;
    }
   
    //計算程式碼
    for (i=0;i<3;i++)
    {
        for(j=0;j<3;j++)
        {
            for(int k=0;k<4;k++)
                C[i][j]+=A[i][k]*B[k][j];
        }
    }
           
    cout<<"\n運算結果為\n";//運算輸出
    for(i=0;i<3;i++)
    {
        for(j=0;j<3;j++)
            cout<<setw(4)<<C[i][j];
        cout<<endl;
    }
       
    return 0;
}
------------------------------------------------<程式結尾>--------------------------------------

程式執行畫面

2008年10月20日 星期一

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

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

  2. 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?
  3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
  4. Install Web Developer Toolbar to examine cookies.
1.
 
2.檢視方式為看網頁左下角是否有顯示
 
有Cookie 
沒有Cookie

 Google
 有Cookie

3.

4.