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,即可看見參觀之瀏覽人數.
如圖所示

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.聽講者亦可與主講者溝通（如圖所示）。

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即停止.

期末報告題目

從 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"的畫面，從以前救很佩服那些會撰寫程式的人，真沒想到我也有學會的一天，很有成就感。