Lab 32: DOM

Lab 32: DOM
1. Open KompoZer
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.


請點擊繼續閱讀

Lab 31: Create Image using DOM

Lab 31: Create Image using DOM
1. Open KompoZer
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.


請點擊繼續閱讀

Lab 30 navigation bar

1. 進入你的部落格，登入，選擇自訂
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)




請點擊繼續閱讀

Lab 29 Hand code a form

Hand code a HTML or use KompoZer 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.



請點擊繼續閱讀

Lab 28 Lab 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 KompoZer HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.

5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

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.)
7. Save your file on your computer. Run your HTML by Firefox. What do you get?

8. Set method as "post"
9. Run your HTML by Firefox. What do you get?

請點擊繼續閱讀

Lab 27: Mash-Up 4 (Calendars)

Lab 27: Mash-Up 4 (Calendars)

建立你的行事曆，並與學校行事曆合併
Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>
進入後按右下角+Google日曆即可訂閱

請點擊繼續閱讀
加入之後的圖片:

Lab 26: Mash-up 3 (Blogs)

Lab 26: Mash-up 3 (Blogs)

部落格與相本的結合運用。透過部落格分享你的照片集，省去傳送大量照片的缺點，自由書寫照片中的故事。

Create a slide show of your album. Embed the album in your blog.

Hint: 挪威奧斯陸之行
album

請點擊繼續閱讀

中壢家商女童軍團與桃園農工童軍團聯合迎新。

相片網址。

Lab 25: Mash-up 2 (Maps)

Lab 25: Mash-up 2 (Maps)

真實案例

96年度全人關懷獎 -崔媽媽科技服務工作團隊

For housing services, compare the following two websites

http://www.housingmaps.com

http://www.7house.com.tw

List the differences in the user interface design and usability. Make comments

by your use experiences.

比較: 美感，直覺性，流暢，預期反應

請點擊繼續閱讀

1. 美感方面:
1. 7HOUSE在首頁顯示住屋內部的裝潢，以及呈現屋子的建築之美，較housingmaps美觀許多。
2. 直覺性方面:
1. 對於買屋的使用者來說，應該會比較需要在目標地段附近待售的屋子，所需求一開始便會需要一個「地圖」來顯示待售屋的位置，而housingmaps便直接提供了這個需求。故housingmaps在直覺性方面較佳。
3. 流暢方面:
1. 對於使用者來說，需求會直接以口語方面表達，例如:「我想要一間在火車站附近的套房，預算大概100萬左右。」7HOUSE便直接提供了這項關鍵字查詢的功能，對於housingmaps的地圖式搜尋，個人認為會相對流暢許多。
4. 預期反應方面:
1. 若我們從遊戲玩家的角度來切入，對於遊戲之中的怪物(打怪練等級用途)，無論是「列表」或是「地圖資訊」都是非常重要的，因為對於使用者的需求來說，我們必須知道其附近相關的位置、與其他怪物的比較(特性、有無相關任務可解...)，或是需要準備的道具。而這跟買屋的使用者有異曲同工之妙，所以個人認為，無論是過於偏重哪一方面，都對於服務使用者來說是一件不利的事情，預期未來在housingmaps上應該會多增加許多搜尋列方面的輸入選項，而亦期待7HOUSE會與地圖資訊結合，成功的提出「不動產搜尋地圖」。這樣對台灣不動產買家會是一大福音呢!

Lab 24: Mash-up 1 (Publish)

Lab 24: Mash-up 1 (Publish)

1. Upload a sample ppt to Google Docs.
2. Publish the uploaded ppt.
3. Embed the online ppt to your blog.

The reason to do so is that the readers don't have to have ppt to view your presentation. For example, some users work with Linux or Unix, and others work with MacOS. They will appreciate you for doing so.

範例:
如何活用 Gmail 工作坊

請點擊繼續閱讀