2008年1月7日 星期一

Lab Google Group

Have at leaser 2 persons in a group, one of them being the owner of Google Group.

1. Decide on the group name, and kick off some subjects.
2. Compare this with other BBS you might have used.
3. Can you think of any use of the Forum in your activities?
---------------------------------------------------------------
1.點選Google Group,點選右邊<建立...>
2.建立完自己的群組後,邀請其他人加入自己的群組.
我的會員,如圖所示

與會員一起討論,聊天

3.將Google Group跟BBS做比較
Google Group:討論時,後回覆的留言會在最上層。且Google Group可加入其他網頁元素,例如圖片\影片等。
BBS :討論時,後回覆的留言會在最下面。BBS僅能貼上網址讓網友自行連結,無法於BBS程式上即時顯現所欲表示之圖片或影片。
4.Can you think of any use of the Forum in your activities?
可以與朋友一起在Google Group裡聊天並討論功課\也可在線上與會員們交流。

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.
-------------------------------------------------------------
1.先下載並安裝Protocol Analyzer Ethereal
2.開啟Wireshark,選擇Capture--->Interfaces--->按下面的Start--->中間的Continue without Saving
並於瀏覽器網頁上輸入自己想要搜尋的文字(或者做自己想做的事亦可),再至Wireshark的Capture選擇Stop,即可.
如圖所示

3.於Interfaces可觀看到自己的IP位置,並在程式中尋找自己的IP,即可查出剛剛所做過的事.
如圖所示


PS.只要是沒有加密,皆可查出該IP所做過的任何事,查出密碼亦可.

Lab Web Analytics

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.
---------------------------------------------------------------------------------
1.登入Sitemeter,並申請帳號.
2.登入成功後--->點選首頁的manager--->點選Adding Site Meter to your site裡的HTML
--->將Site Meter JavaScript HTML的程式碼複製起來.
圖一

圖二


3.進入自己的Blogger--->點選右上角的自訂--->加入網頁元素--->選擇HTML/JavaScript加入 BLOG,並將上述步驟所複製的程式碼貼上,並命名,即可.
如圖所示


4.點選BLOG右邊的Sitemeter,即可看見參觀之瀏覽人數.
如圖所示

2008年1月6日 星期日

Lab Google Presentation

1. Upload a sample Powerpoint to Google docs.
2. Publish this slide presentation so that it is viewable by the general public.
3. Start your presentation.
4. Invite the person sitting next to you to join your presentation.
5. You are supposed to take the control of the presentation. When you change the slides, your audience should be able to see the slide changed at the same time.
--------------------------------------------------------------------
1.將sample Powerpoint下載於桌面,並將該檔案上傳至Google docs,上傳結束後,按右上角之Publish發佈之(如下圖所示)。

2.發佈完成後,點選右上角之Start presentation,即可開始簡報(如下圖所示)。

3.將上一步驟的網址,及發佈網址於另瀏覽器開啟之,此乃係利用不同瀏覽器間互不干擾的特性(如下圖所示)。

4.簡報的一方,即主講者,可於交談欄內與聽講者溝通(如圖所示)。

5.聽講者亦可與主講者溝通(如圖所示)。

2007年12月31日 星期一

Lab Google Presentation

1. Upload a sample Powerpoint to Google docs.
2. Publish this slide presentation so that it is viewable by the general public.
3. Start your presentation.
4. Invite the person sitting next to you to join your presentation.
5. You are supposed to take the control of the presentation. When you change the slides, your audience should be able to see the slide changed at the same time.
----------------------------------------------------------------------------------
我的位置:http://docs.google.com/Presentation?id=dhqxc3h6_1fbm9593k

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.
--------------------------------------------------------------------------
1.先至Constraints--->drag-and-drop
2.將drag-and-drop程式碼複製貼至Video
3.至Basics--->Images,將程式碼複製貼至於Video
4.並與已貼上的drag-and-drop程式碼於Video,一並改寫之.


5.影片成功顯示出來,將圖片拉至Play即播放

影片成功顯示出來,將圖片拉至Stop即停止.

2007年12月30日 星期日

期末報告題目

Laszlo (Laszlo in 10 minutes),挑選一個範例進行個人研究,說明你為什麼挑選這個範例,這個範例讓你學到什麼概念,請你製作一個講義說明這個範例。

[canvas]
[!-- An url that reads submitted form data --]
[!-- and echoes it back in a response --]
[dataset name="echoer" src="http:echoxml.jsp"/] ------>為表單的來源
[window x="10" y="10" ] ------>視窗的位置
[form id="ex1" bgcolor="0xAAB5C8" ] ------>表單的名字和顏色
[submit name="submitter" data="${echoer}"/] ------>按鈕的名稱

[statictext fontstyle="bold" ]
天氣概況
[/statictext]
[combobox width="175" editable="false" ------->選單的寬度
defaulttext="請選擇地區" ] ------->選單內容
[textlistitem text="台北地區" /]
[textlistitem text="新竹地區"/]
[textlistitem text="苗栗地區" /]
[textlistitem text="台中地區" /]
[textlistitem text="彰化地區" /]
[textlistitem text="雲林地區" /]
[textlistitem text="嘉義地區" /]
[textlistitem text="台南地區" /]
[textlistitem text="高雄地區" /]
[textlistitem text="屏東地區" /]
[textlistitem text="宜蘭地區" /]
[textlistitem text="花蓮地區" /]
[textlistitem text="台東地區" /]
[textlistitem text="金門" /]
[textlistitem text="馬祖" /]
[textlistitem text="澎湖" /]
[/combobox]

[statictext fontstyle="bold" >
您想查詢的日期是?
[/statictext]
[radiogroup x="25" name="definition"] --------->點選的位置和名稱
[radiobutton value="1"] --------->第一個選項
2007/12/30
[/radiobutton]
[radiobutton value="2"] --------->第二個選項
2007/12/31
[/radiobutton]
[radiobutton value="3"] --------->第三個選項
2007/1/1
[/radiobutton]
[/radiogroup]


[button text="Submit" isdefault="true"
onclick="parent.submitter.submit()" /]
[/form]

[view name="congrats" datapath="echoer:/response" ------->物件的名稱和資料
bgcolor="0xAAB5C8" ------->底色
width="100%" height="100%" ]
[text text="寒冷" fontstyle="bold"
y="80" align="center" /]
[text text="請多穿保暖衣物"
y="103" align="center" /]
[/view]
[/window]
[/canvas]

圖示:
程式碼1.


程式碼2.


成功顯示出來


點選進入後


PS.程式碼的"["皆為"<",同理"]"皆為">"

這個程式碼很常在網路被使用,例如問卷調查\月薪選項等,剛開始會所以一直覺得很難,摸索了很久,也出現了許多次"error"的畫面,從以前救很佩服那些會撰寫程式的人,真沒想到我也有學會的一天,很有成就感。

2007年12月17日 星期一

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 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.
------------------------------------------------------------------------------
1.下載Laszlo
2.至Laszlo in 10 minutes觀看教學
3.至Laszlo in 10 minutes--->Basics--->Video更改程式
canvas係畫布,button係按鈕
故[canvas]
[button x="120" y="200" onclick="movie.setAttribute('play',false)"]pause[/button]
[button y="200" onclick="movie.setAttribute('play',true)"]resume[/button]
[view id="movie" resource="http:jfk.swf"]
[/view]

如圖所示:


<解釋>:1.x="120" y="200"係指按鈕之距離, onclick係只按下去的動作, movie是自己設定的名稱. setAttribute係設定屬性,設定屬性後要括號,裡面寫指令;如'play',false(即表示點它影片及停止)
2.button係只按鈕,可將其命名;如本題設定命名為pause(暫停)以及resume(重新播放)
3.view id係指自己所命名之名稱;如本題命名為movie,resource係只影片來源
<進階>若想要把該影片用框框圍住,可在一開始時輸入[window x="座標" y="座標" width="寬度"
height="長度">,並在最後打上[/window],即可.
如圖所示:

PS.因此網頁顯示會錯亂,故本題程式之[]皆表示為().

2007年12月16日 星期日

Homework 12-10-2007

1. List three ways of creating interactive webpages.
(1.)Nvu

NVU 是一套同樣以 Mozilla 為核心的網頁編輯器 (就像市面上常見的 FrontPage 或Dreamweaver 等等網頁編輯程式),承襲了 Mozilla 的特色, NVU 是一套開放源碼(Open Source)、 跨平台(Cross Platform)、免費的程式。NVU
(2.)CGI
在觀賞網頁時,瀏覽器會和 Web 主機上的 Http server 建立一個連線,但是Http server 不是去抓檔案,而是去啟動一個 CGI 程式, 然後將 CGI 程式所產生的內容當成 HTML 傳回給使用者瀏覽器.CGI介紹
(3.)Greasemonkey
GreaseMonkey是網頁瀏覽器Mozilla Firefox的一個附加元件。它讓使用者安裝一些腳本使大部分HTML為主的網頁於使用者端直接改變得更方便易用。維基百科
2. Lab DOM and Javascript.
3. Reading Assignments:AJAX by Jeremy Keith

2007年12月10日 星期一

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.
----------------------------------------------------------------
1.打開Nvu
2.打開上述網址,將最下面的程式碼複製並貼於Nvu
如圖所示


3.將裡面部份程式改為
分別將for (i = 0; i < 3; i++){ 裡的3消去
改為for (i = 0; i <10 ;i++){
分別將for (j = 0; j < 3; j++){ 裡的3消去
改為for (j = 0; j <10 ; j++){
分別將textVal = "Cell" + i + "_" + j 裡的"Cell"+ 消去
改為textVal = i + "*" + j + " = " + i*j
如圖所示


4.儲存於桌面,並將該網頁用firefox開啟即可.

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)
-------------------------------------------------
1.打開Nvu
2.插入--->表單--->定義按鈕--->自行定義名稱

3.將DOM (Document Object Model)裡的程式碼輸入
圖片如下


4.儲存於桌面
5.將上步驟儲存的網頁於Firefox開啟,即可.


點按鈕即可出現圖片

多按幾下會多出現圖片

2007年12月3日 星期一

lab 19: XSLT Part II

1. Register and Download Xray, an XML, XSLT editor and processor.
下載Xray
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
打開上述網頁,將三部份的XSLT分別複製至Xray,並儲存之.








use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.

3. View the formatted HTML file.
打開file--->New XSLT Transform--->XML Document選擇第一個檔案
XSLT Program選擇第三個檔案,即可轉換成HTML.

4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
打開file--->New HTML View,即可出現頁面.

compute the team standings in a table.
5. View the formatted HTML file.


lab 20: XSLT Part III

1. Given the RSS of Yam News, write an XSLT file
and use Xray to generate an HTML that contains the titles of items in the RSS.
用IE開啟Yam News
(1)檢視--->原始檔--->編輯--->全選--->複製--->貼至XRay,並存檔.

(2)將lab19的XSLT開啟,貼至XRay,並存檔.

(3)於上步驟所開的XSLT,將裡面的內容改變,對照new檔,選擇自己所要的內容.

2. View the formatted HTML file.
(1)開啟XRay的file--->New XSLT Transform--->XML Document選擇剛儲存的new檔
XSLT Program選擇剛儲存的weather檔


(2)再開啟file--->New HTML View--->於Window選擇Transform19,即會出現頁面.

lab 18: Lab XML & XSLT

1. Register and Download Xray, an XML, XSLT editor and processor.
先下載Xray
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 <.
開啟XRay,將XML複製貼至XRay,並將[改成<
再將XSLT複製貼至XRay,並將[改成<
將該檔案儲存至桌面,並在XRay打開New XSLT Transform,在XML Document選擇剛儲存的檔案,在XSLT
Program選擇Document8,即可出現HTML網址.





3. View the formatted HTML file.
選擇File--->New HTML View,在Window處選擇Transform13,即可出現該畫面.

2007年11月30日 星期五

Homework 11-26-2007

1. Problem 1 & Problem 3 of Textbook on Page 55.
(1)試解釋WEB技術演進是要解決什麼樣的問題?
Web 1.0是靜態的網頁,主要以網站業者單向的提供內容為主,其目的是為了吸引更多人去瀏覽造訪該網站,但是光靠單方向獲取內容是無法滿足廣大群眾的需求,所以有了Web 2.0的出現。
Web 2.0相較於Web 1.0,其從靜態html到動態html,給使用者很大的方便,且現在幾乎都有了現成的程式,只要動手就可以擁有一個屬於自己的部落格。其主要的精神在於由網友一起建構出內容,同時落實彼此分享以達到群眾智慧的最大效益,也可以雙方面的互動。

綜上所述,Web2.0的時代是以「人際關係」作為一種商品,而Web1.0時代則以提供「資訊」的營運模式,由此可看出Web技術的演進是隨著上網人數不斷的增加;根據使用者的需求,及為了提高網站效率\迅速的提供更新的資訊\增快網路的速度,和網路安全等問題,使得Web的技術不斷的演進。

(2)程序(PROCESS)和執行緒(THREAD)對網站性能有什麼不同的影響?
程序(Process)技術的使用主要是用在Web系統演進的第二時期,當使用者增多時,由於耗費過多系統資源會導致網站速度明顯下降。
執行緒(Thread)技術的使用主要是用在Web系統演進的第三時期,取代了程序,而使用常駐的服務(Service\Daemon),此程式會一直留在系統內,除非關機,否則會一直做服務。當人多時Thread就會變多;人少時,Thread就會減少,故不會耗費系統資源而導致網站速度下降。
2. What does a CGI output contain? Hint: Such as Content-type and HTTP header
計數器\留言版等。
3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
Post method是指定使用post的方式來做資料的傳送,而編碼方式大多是用在於上傳檔案時,檔案是必須要經過特別的處理過才能夠被網頁的伺服器所解讀。
Get method是希望把表單的內容變成一個可讀的網址。
然Post與Get本身有差異:
1.GET有上傳資料量的限制,一般傳送大量的資料或者上傳檔案都不會使用GET。
2.POST適合用來傳送大量的資料,直接由伺服器接收。
3.POST本身的傳送是基於最終的檔案本身再傳入相關的欄位變數,而由於指定了POST,所以網址列會把GET的部份省略。
答:用Post method.
參考資料:PHP教學
4. Reading Assignments:XML (Page 187-188 on the Textbook)

2007年11月26日 星期一

Lab 17: 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.打開NVU
2.檢視--->語系及字元編碼--->萬國碼
3.插入--->表單--->定義表單--->表單名稱輸入:search
Action URL輸入:http://maps.google.com/maps
Method輸入:get



4.插入--->表單--->表單欄位--->欄位名稱輸入:q--->確定


5.插入--->表單--->定義按鈕--->名稱輸入:click(隨便取名即可)

6.檔案--->另存新檔
7.將上述所存之網頁用firefox開啟

8.輸入原網址所欲查詢之24.9586, 121.24114,即可顯現出一樣的畫面.