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.
----------------------------------------------------------------------------------
我的位置: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即停止.

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.因此網頁顯示會錯亂,故本題程式之[]皆表示為().

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開啟,即可.


點按鈕即可出現圖片

多按幾下會多出現圖片

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,即可出現該畫面.

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,即可顯現出一樣的畫面.

Lab 16: 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.
打開Nvu,並將上步驟所複製之網頁貼上.

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.
選擇下面的HTML標籤,看看有沒有Form,如果沒有則要自己定義.


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.)
如果沒有form需要自己定義時,選擇插入--->表單--->定義表單
於表單名稱輸入:f
Action URL輸入:http://google.com/search
Method 選擇:get
然後確定即可.


7. Run your HTML by Firefox. What do you get?
檔案--->另存新檔--->儲存
於剛儲存的檔案用firefox開啟
會看見先前的google網頁

可以搜尋
(隨便輸入字來搜尋)


8. Set method as "post"
這次將先前的merhod改為post


9. Run your HTML by Firefox. What do you get?
無法搜尋

Lab 15 Webpage Accessibility

Use Nvu to edit the following homepage
at http://www.epa.gov.tw

1. 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 and
----------------------------------------------------
1.安裝NVU
選擇右邊第一個下載,並在電腦裡安裝它.
打開環保署
檔案--->另存新檔
接著打開NVU的程式,檔案--->開啟檔案--->選擇剛存的檔案開啟之.
對要改的圖片按右鍵--->圖片屬性--->替代文字(改成自己想要的文字)


2.於NVU程式,打開檢視--->HTML標籤
打開檢視--->HTML原始碼
原始碼

標籤


3.在於Firefox打開剛剛儲存的網址,檔案--->開啟檔案--->選擇剛剛儲存的網址,即可.



4.在NVU程式選擇檢視--->HTML原始碼,接著按編輯--->尋找及取代--->輸入ATL,即可找出改成的新文字.