2007年12月31日 星期一
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.
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.
2007年12月30日 星期日
期末報告
在這個報告中, 我挑選了Define Method來作為我這次的範例. 我會挑選他的原因來自於, 每當我瀏覽網頁時, 滑鼠只一劃過某些廣告還是圖片時, 常常會遇到有放大的效果, 總會吸引我的注意力去看他的內容, 而我想這種功能的廣告效果很強大而且在靜態時又不會造成空間浪費, 如在像奇摩. igoogle這些首頁的版面中, 常常是滿滿的圖片文字廣告, 如果有這功能, 會使你的廣告突出, 十分有效果.
1.效果:
a.當滑鼠不在圖片上時...
b.當滑鼠在第一個方框中時...
由方框的放大縮小, 造成有種類似漣漪, 或是風吹過旗面的效果...具美觀且有廣告效力
1.CODE:
[canvas]
[simplelayout axis="y" spacing="10"/]
[class name="box" bgcolor="blue"
height="100" width="100" /]
/*定義box, 為底部方框之大小及顏色, 還有各方框間隔距離位置,*/
[class name="borderedbox" extends="box"
width="${size}" height="${size}"
onmouseover="this.changeSize(50)"
onmouseout="this.changeSize(-50)"]
/*定義borderedbox, 此部分最重要為 onmouseover="this.changeSize(50)"
onmouseout="this.changeSize(-50)" 這兩句...這為定義當滑鼠移進及移出時, 所要放大的大小
[attribute name="size" value="100"/]
[attribute name="bordersize" value="2"/]
[view bgcolor="yellow"
x="${parent.bordersize}"
y="${parent.bordersize}"
width="${parent.width - parent.bordersize*2}"
height="${parent.height - parent.bordersize*2}"/]
/*這裡也是定義borderedbox變數的地方, 有color及大小, 比較特殊為:內框之大小是視外框而定的, 即為和外框成一定比例, width="${parent.width - parent.bordersize*2}"
height="${parent.height - parent.bordersize*2}"我們可以在這裡改變比例*/
[method name="changeSize" args="pixels"]
this.animate('size', pixels, 500, true);
/*此地方為定義changeSize, 即為我們所希望的變動的幅度, 為視pixel而定, 類似圖片畫素一般, 如果pixel越大則其變動的幅度會越接近自然的變動, 越小則會像一格一格投影片的效果, 端看我們想要的效果可以改變其pixel*/
[/method]
[/class]
[borderedbox/]
[borderedbox bordersize="6"/]
[borderedbox bordersize="9"/]
/*這裡為定義物件borderedbox 的多寡及內外框一開始距離, 我們如果想要增加框框可以在此地定義*/
[/canvas]
[!-- Copyright 2001-2007 Laszlo Systems, Inc. All Rights Reserved. --]
心得:
這學期跟著老師一起上這堂課, 雖然我認為和其他的電子學...等課來說這門課很輕鬆, 但是我覺得我學到很多很實際的東西, 也在這裡面學到一些網路上的架構概念, 而我會在這裡想找這個程式來做範例, 是因為它讓我看到了網路行銷的功能, 我想網路之所以發達, 應該不只是因為他好玩吧!
而是他的行銷功能強大且不需要花費很多錢...因此我想這會是現在也是未來創業的趨勢, 如何在網路廣告上引人注目
1.效果:
a.當滑鼠不在圖片上時...
b.當滑鼠在第一個方框中時...
由方框的放大縮小, 造成有種類似漣漪, 或是風吹過旗面的效果...具美觀且有廣告效力
1.CODE:
[canvas]
[simplelayout axis="y" spacing="10"/]
[class name="box" bgcolor="blue"
height="100" width="100" /]
/*定義box, 為底部方框之大小及顏色, 還有各方框間隔距離位置,*/
[class name="borderedbox" extends="box"
width="${size}" height="${size}"
onmouseover="this.changeSize(50)"
onmouseout="this.changeSize(-50)"]
/*定義borderedbox, 此部分最重要為 onmouseover="this.changeSize(50)"
onmouseout="this.changeSize(-50)" 這兩句...這為定義當滑鼠移進及移出時, 所要放大的大小
[attribute name="size" value="100"/]
[attribute name="bordersize" value="2"/]
[view bgcolor="yellow"
x="${parent.bordersize}"
y="${parent.bordersize}"
width="${parent.width - parent.bordersize*2}"
height="${parent.height - parent.bordersize*2}"/]
/*這裡也是定義borderedbox變數的地方, 有color及大小, 比較特殊為:內框之大小是視外框而定的, 即為和外框成一定比例, width="${parent.width - parent.bordersize*2}"
height="${parent.height - parent.bordersize*2}"我們可以在這裡改變比例*/
[method name="changeSize" args="pixels"]
this.animate('size', pixels, 500, true);
/*此地方為定義changeSize, 即為我們所希望的變動的幅度, 為視pixel而定, 類似圖片畫素一般, 如果pixel越大則其變動的幅度會越接近自然的變動, 越小則會像一格一格投影片的效果, 端看我們想要的效果可以改變其pixel*/
[/method]
[/class]
[borderedbox/]
[borderedbox bordersize="6"/]
[borderedbox bordersize="9"/]
/*這裡為定義物件borderedbox 的多寡及內外框一開始距離, 我們如果想要增加框框可以在此地定義*/
[/canvas]
[!-- Copyright 2001-2007 Laszlo Systems, Inc. All Rights Reserved. --]
心得:
這學期跟著老師一起上這堂課, 雖然我認為和其他的電子學...等課來說這門課很輕鬆, 但是我覺得我學到很多很實際的東西, 也在這裡面學到一些網路上的架構概念, 而我會在這裡想找這個程式來做範例, 是因為它讓我看到了網路行銷的功能, 我想網路之所以發達, 應該不只是因為他好玩吧!
而是他的行銷功能強大且不需要花費很多錢...因此我想這會是現在也是未來創業的趨勢, 如何在網路廣告上引人注目
2007年12月17日 星期一
2007年12月10日 星期一
Homework 11-26
1. Problem 1 & Problem 3 of Textbook on Page 55.
a.試解釋Web技術演進是要解決什麼樣的問題?
第一時期:靜態網頁且無自動資料庫更新
第二時期:由於CGI技術的使用，主要是利用程序(Process)來存取資料，解決了在第一時期要更 新資料的繁瑣。
第三時期:CGI技術更加成熟，利用執行緒(Thread)取代程序，解決了在第二時期每服務一位使 用者就要開一個程序的效率問題, 使得網頁處理速度更快。
b.程序(Process)和執行緒(Thread)對網站性能有什麼不同的影響?
Process的使用是指每當要提供新的一位使用者服務時，就得開一個新的程序來服務。當有大 量使用者需要服務時，由於太多的process執行，就會導致網站速度明顯下降，甚至有可能導致 系統當機的問題。
執行緒的技術使用就比較聰明，在server內已經提供Daemon的服務，使用者需要哪種服務， 只須找出相對應的執行緒去服務它即可，效率較佳。
2. What does a CGI output contain in the HTTP header? Hint: Such as Content-type
當CGI資料輸出，會透過Stdout方式送出給伺服程式，即HTTPD，再傳送回給HTTP。而CGI 輸出前，會先送出MIME資訊(資料檔)，讓www伺服主機能分辨資料型態
ex:使用google 搜尋mp3
http://www.google.com.tw/search?q=mp3&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_zh-TWTW247TW249
search是處理事件
?之後 就是要傳遞給伺服器作處理的訊息
zh-TW 表示的是繁體中文
q 表示送出查詢的資料
3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
POST，因為get的傳輸方式是將資料直接加在 URI 之後，會有傳輸資料大小的限制(1K)，而 POST容許傳送大量資料，一首mp3通常至少有5MB以上。
a.試解釋Web技術演進是要解決什麼樣的問題?
第一時期:靜態網頁且無自動資料庫更新
第二時期:由於CGI技術的使用，主要是利用程序(Process)來存取資料，解決了在第一時期要更 新資料的繁瑣。
第三時期:CGI技術更加成熟，利用執行緒(Thread)取代程序，解決了在第二時期每服務一位使 用者就要開一個程序的效率問題, 使得網頁處理速度更快。
b.程序(Process)和執行緒(Thread)對網站性能有什麼不同的影響?
Process的使用是指每當要提供新的一位使用者服務時，就得開一個新的程序來服務。當有大 量使用者需要服務時，由於太多的process執行，就會導致網站速度明顯下降，甚至有可能導致 系統當機的問題。
執行緒的技術使用就比較聰明，在server內已經提供Daemon的服務，使用者需要哪種服務， 只須找出相對應的執行緒去服務它即可，效率較佳。
2. What does a CGI output contain in the HTTP header? Hint: Such as Content-type
當CGI資料輸出，會透過Stdout方式送出給伺服程式，即HTTPD，再傳送回給HTTP。而CGI 輸出前，會先送出MIME資訊(資料檔)，讓www伺服主機能分辨資料型態
ex:使用google 搜尋mp3
http://www.google.com.tw/search?q=mp3&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_zh-TWTW247TW249
search是處理事件
?之後 就是要傳遞給伺服器作處理的訊息
zh-TW 表示的是繁體中文
q 表示送出查詢的資料
3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
POST，因為get的傳輸方式是將資料直接加在 URI 之後，會有傳輸資料大小的限制(1K)，而 POST容許傳送大量資料，一首mp3通常至少有5MB以上。
2007年12月3日 星期一
lab 19: XSLT Part II
1. the Listing 2 to transform the XML file as the Listing 1.
2.the Listing 3 to transform the XML file as in the Listing 1.
2.the Listing 3 to transform the XML file as in the Listing 1.
lab 19: XSLT Part II
1. the Listing 2 to transform the XML file as the Listing 1.
2.the Listing 3 to transform the XML file as in the Listing 1.
2.the Listing 3 to transform the XML file as in the Listing 1.
訂閱：
文章 (Atom)