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

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

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

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

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)

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?
無法搜尋

Homework 10-1-2007

根據無障礙網頁設計原則，
1. 為什麼不要開出新視窗?
對於一般人而言：因為新視窗不會保有前一個視窗的瀏覽歷程，所以「上一頁」按鈕將會失去功效。
對於要連結到某個鏈結；瀏覽某個搜尋結果，然後回到上一頁的使用者而言，若開啟新視窗則不會存有上一頁之情形。

對於視障者而言：雖然 JAWS 會在連結開出新視窗時唸出「 New browser window 」，但仍然容易在它唸出鏈結文字和新頁面內容之間被漏掉。如果沒有了「上一頁」。當Jackie 沒有聽到「 new browser window 」的話時，就沒辦法瞥見工作列上開了兩個瀏覽器視窗了，勢必就得去讀整個已開啟視窗清單。

2. 為什麼要使用貼切的網頁標頭? 而不是留白?
使用貼切的網頁標頭，可以節省觀看者的搜尋時間，讓對方知道什麼文章是他所要的。
雖然慢慢的閱讀文章也是一種方法，但對於追求效率;以及不方便的朋友來說，使用貼切的網頁標頭可以幫他們很大的忙。
有些螢幕朗讀軟體會讀出網頁標頭，例如：JAWS就有個特別的鍵盤快速鍵 (INSERT + F10) 能顯示（並唸出）目前所有開啟視窗的標題。如果開啟的是網頁就會唸出網頁標題。當使用 ALT-TAB 切換視窗時，它也會唸出視窗標題。

對於視障者而言，使用貼切的網頁標頭等同於給了他們一雙眼睛，讓他們知道哪些資訊是他所想要;若是選擇留白，使得螢幕朗讀軟體讀不到，那些視障者勢必得一篇一篇文章聽。

使用貼切的網頁標頭，可以使得Google在搜尋的結果裡顯示網頁標題，而且位於網頁標題的關鍵字會有比較高的排名;但若留白則無法顯示其標題，故使用貼切的網頁標頭利多於弊。

3. 定義快速鍵有什麼好處?
HTML 有一個鮮為人知的功能，就是在鏈結及表單裡還可以使用accesskey屬性，讓網頁設計師定義常用鏈結或表單區域的快速鍵。在 Windows 上，可以按下 ALT + 某個便捷鍵；在 Macintosh 上則是按下 Control + 某個便捷鍵。如果便捷鍵是被定義在某個鏈結上的話，妳的瀏覽器就會跟著連結出去；如果是被定義在表單區域的話，妳的瀏覽器就會把焦點一到那個區域裡，及謂不需要滑鼠即可有效率的跳入下一個鏈結。

對於視障者而言：因為當 JAWS 讀到定義有accesskey的鏈結時，也會把這個便捷鍵唸出來。舉例來說， Home pageD 這個鏈結會被 JAWS 讀成「 link: Home page, ALT + 1 」。所以使用者可以按下 ALT+1 來把瀏覽器焦點移到那個鏈結，然後再按下 ENTER 就可以從那個鏈結連出去。

對於無法有效率地使用滑鼠者而言：使用者可以靠鍵盤導覽以及快速鍵的幫忙來在頁面中移動。便捷鍵可以幫他非常有效率地跳到常用的鏈結。只要能夠按下 ALT+1 ，接著 Mozilla 就會馬上連到定義有 accesskey="1" 的鏈結去。

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,即可找出改成的新文字.