2007年12月31日 星期一

Lab Google Presentation



能夠數個人一起討論簡報,是個不錯的功能。

Happy New Year!

Lab Drag-and-Drop by AJAX



將所要控制的事件(play&stop),放入條件敘述裡(if else)。

新年快樂。

2007年12月28日 星期五

期末報告題目

我挑選的是Laszlo in 10 minutes裡Scripting的範例部分--Event Handlers
Scripting意思就是"事件",能夠借由"邏輯運算"來判斷事件真偽和類似If else的敘述,來達到"控制物件"的目地。
一些物件的特性都能輕易地改變、控制,所以我挑選這個令我雀喜的範例。

code:(replace'<'和'>'to'['和']')
[canvas]
[button onclick="vw.setWidth(200)"]Expand Width[/button]
[!--定義button,並設定事件:當按下button(Expand Width)時,改變id為vm的物件寬度為200 --] [button x="120" onclick="vw.setWidth(100)"]Reset[/button]
[!--定義button,並設定事件:當按下button(Reset)時,改變id為vm的物件寬度為100 --]
[view id="vw" y="30" width="100" height="100" ]
[!--定義一開始要show出來的物件(vm) --]
[!-- onwidth is sent anytime width is changed --]
[handler name="onwidth" ]
this.setAttribute('bgcolor', (this.width > 100 ? red : blue));
[!--利用handler裡的'onwidth'當物件(vm)改變寬度時,會有所動作。所以我們可利用邏輯運算來描述想要的改變:控制顏色(bgcolor)當此物件(vm)寬度大於100則顯示紅色,否則顯示藍色--]
[/handler]
[/view]
[/canvas]

[!-- Copyright 2006 - 2007 Laszlo Systems, Inc. All rights reserved. Use subject to license terms. --]
效果:


這個範例中有設定id名稱,也就是設定物件,雖然只有單一物件,但若擴及數個物件,並描述它們之間的互動關係,那我想這個物件導向的設計將會更有體會它的好處。
裡面還有button的onclick,也是事件的一種,能夠改變某一物件的狀態(此範例是width),不過這範例特別在於又透過onclick後的參考值當變數去啟動另一個事件(onwidth)以再改變(bgcolor),這種類似鏈子串聯起來的事件在動態網頁上伴演很重要的角色。
高中時曾玩過flash,做動態網頁去比賽,裡面的action script不外乎也是物件導向的設計,但它更結合各種向量變化、繪畫功能(例如顏色漸層),來提供更完整的物件運動。我個人是比較著迷於flash所做出來的華麗網頁,不過也是有缺點,無法像JaveScript還能夠結合HTML設計網頁。
感謝老師這學期的教學,讓自己學習到很多不一樣的知識,我很喜歡老師的課,沒有壓力,卻能夠學得比其他課來得更多。

2007年12月17日 星期一

Lab Movie Player by AJAX

Homework 12-10-2007

1. List three ways of creating interactive webpages.

一、CGI:透過CGI可以讓所瀏覽的網頁與網頁伺服器端戶動。例如隨時在變動的新聞、股市資訊。

二、DOM&Java scripts:因為Java是直譯語言,不需要安裝任何檔案就可以直接應用於瀏覽器,讓瀏覽器直接與網頁互動。例如:google map的縮放大效果。若再透過物件導向設計的DOM方法,將能整合XML和HTML之間的關係。例如:igoogle個人首頁。

三、XSLT:透過XSLT的指令可將較不易瀏覽的XML文件轉換成自己所想要的HTML網頁。

四、ASP&ActaveX:微軟所開發的動態網頁伺服器,透過ActaveX技術讓每個使用者擁有自己想要的資料網頁。

2. Lab DOM and Javascript.

Lab DOM and JavaScript

2007年12月10日 星期一

Lab DOM and JavaScript

CODE:

RUN:

Lab Create Img using DOM

3. Use window.onload to load the image.

4. Use a button to load the image. Try how onclick works.

2007年12月3日 星期一

lab 19: XSLT Part II

利用List2轉換List1所得之結果

利用List3轉換List1所得之結果

lab 20: XSLT Part III

利用XRay為RSS of Yam News所提供的XML,編寫XSLT,下面是轉換成Html的結果:

lab 18: Lab XML & XSLT

利用XRay軟體將XML格式利用XSLT指令轉換成HTML
即XML→XSLT→HTML

Homework 11-26-2007

1.
a.試解釋Web技術演進是要解決什麼樣的問題?
第二時期CGI技術的使用,主要是利用程序(Process)來存取資料,解決了在第一時期要更新資料的繁瑣。
第三時期CGI技術更加成熟,利用執行緒(Thread)取代程序,解決了在第二時期服務一位使用者就要開一個程序的效率問題。
b.程序(Process)和執行緒(Thread)對網站性能有什麼不同的影響?
程序的技術使用是指每當要提供新的一位使用者服務時,就得開一個新的程序來服務。當有大量使用者需要服務時,就會導致網站速度明顯下降,甚至有可能當機的餘慮。
執行緒的技術使用就比較smart,在server內已經提供Daemon的服務,使用者需要哪種服務,只須找出相對應的執行緒去服務它即可。效率較佳。

2.What does a CGI output contain in the HTTP header? Hint: Such as Content-type
當CGI資料輸出,會透過Stdout方式送出給伺服程式,即HTTPD,再傳送回給HTTP。但為了讓www伺服主機能分辨資料型態,CGI輸出前,會先送出MIME資訊(資料檔)。ex:Content-type:mp3/html

3.If you want to upload an mp3 file, should you use the GET or POST method? Why?
POST,因為get的傳輸方式是將資料直接加在 URI 之後,會有傳輸資料大小的限制(1K),而POST容許傳送大量資料,一首mp3通常至少有5MB以上。

2007年11月26日 星期一

Lab 17: Form and Action, Part II

Use Form CGI that includes action, input, and submit.
Try a few different coordinates.
(I did it by Nvu )


Lab 16: Form and Action

Run your HTML by Firefox. What do you get?
如果使用"get"的傳輸模式:




Run your HTML by Firefox. What do you get?

如果換用"post"的傳輸方式:

2007年11月23日 星期五

Homework 10-1-2007

根據無障礙網頁設計原則

1. 為什麼不要開出新視窗?

○當瀏覽器被強迫開新視窗時,「上一頁」的功能將失效,若又沒在新視窗給予好的標頭描述,將會使憑藉於螢幕朗讀軟體的使用者混亂,不知道自己已經開了兩個新的視窗,而將自己不需要資訊的網頁瀏覽了一遍。
○一個良好的網頁設計者必需有"是否開新視窗"是讓使用者自己去決定的認知,使用者可以借著滑屬或快速鍵來決定是否開新視窗。

2. 為什麼要使用貼切的網頁標頭? 而不是留白?


○網站上的每個頁面,都該有個獨一無二且具有意義的頁面標題。對於得從標頭開始閱讀的使用者,他可以有效率地知道這個網頁的資訊是什麼,是否要繼續瀏覽。
○尤其當人們在許多視窗間切換時,除了能提供一些重要的線索,更能分辨是否已經瀏覽過。

3. 定義快速鍵有什麼好處?

○快速鍵其實也就是Access Keys,可以由網頁設計者自己去定義。主要有分成兩種功能,一種是能夠跳躍到自己想要瀏覽的區域,稱為表單區域的功能。例如定義alt+R可以讓使用者直接跳到右邊的瀏覽區塊,而不需要一直按tab鍵。另一種是提供快速連結的功能。例如定義alt+S再加上Enter可以使用者切換至搜索網頁的功能,這能快速提供使用者使用這個功能,一樣不用一直按tab去搜索這個功能所在位置。

2007年11月12日 星期一

Lab 15 Webpage Accessibility

Lab 14: Accessibility by GreaseMonkey

1.Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more

2.Google Access Keys Enables navigation through Google search results.

3.AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window. Added 2005-04-01 (not a joke). Find how many access keys have been defined at www.ocac.gov.tw www.epa.gov.tw
4.Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
http://www.ocac.gov.tw/ 僑務委員會 5個熱鍵
http://www.epa.gov.tw/ 行政院環保署 2個熱鍵
http://www.president.gov.tw/ 中華民國(台灣)總統府 2個熱鍵
http://www.cca.gov.tw/ 文建會首頁 4個熱鍵
http://www.cwb.gov.tw/ 中央氣象局 7個熱鍵

Homework 10-29-2007

1. At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.

2. Check into the government-sponsored web accessibility website.
At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download the
presentation materials. What is web accessibility?
accessibility:無障礙
web accessibility:無障礙網路空間
能夠在網路上提供資源給任何人,即使那人有某個部份有殘疾。

3. According to Section 2.1 of Textbook, some websites are powered by databases in the back end and some are not. What are the purposes of using databases?
當一個使用者向web提出query的要求,server可以很快地從databases(像利用SQL存儲)來回覆user
A computer database is a structured collection of records or data that is stored in a computer system so that a computer program or person using a query language can consult it to answer queries.
reference:http://en.wikipedia.org/wiki/Database

Lab 13: Clean Language

請看圖:fuck->***

Lab 12: Greasemonkey



http://www.nytimes.com cookie:12
http://www.yam.com cookie:4
Does our class blog use cookie or not? Ans: no
Does Google use cookie? Ans:yes

2007年10月29日 星期一

Lab Technorati

Scobleizer http://scobleizer.wordpress.com
links:796
Authority:796
Rank: 3865

Techcrunch http://www.techcrunch.com/
links:23204
Authority:23206
Rank: 4

Engadget http://www.engadget.com/
links:32033
Authority:32033
Rank: 1

Reflection http://www.chieftain.idv.tw
links:27
Authority:27
Rank: 305717

Java http://javaatcycu.blogspot.com
links:28
Authority:28
Rank: 294012
My blog http://s9528237.blogspot.com
links:0
No Authority
Rank: 8,911,337

2007年10月28日 星期日

Homework: 10-23-2007

紐約時報 http://www.nytimes.com PageRank:9/10
CNN http://www.cnn.com/ PageRank:9/10
台灣雅虎 http://tw.yahoo.com PageRank:6/10
蕃薯藤 http://www.yam.com PageRank:6/10
PCHome 購物 http://shopping.pchome.com.tw/ PageRank:6/10
Monday 購物 http://www.monday.com.tw/ PageRank:8/10
中原大學i-learning http://i-learning.cycu.edu.tw/ PageRank:4/10
youtube線上短片http://www.youtube.com/ PageRank:3/10
http://www.twbsd.org/ PageRank:4/10

Google Docs is used
秋日遊記
10/22
剛過凌晨的午夜,在這個秋天的季節裡
今天顯的特別晴朗,靜謐,似乎只能感受到秋風不斷掃過的聲音
當然還有摩托車引擎聲乎乎作響
沒錯,此時此刻我正在摩托車上往永安魚港的路上
今天正是獵戶座流星雨大期

已經1點半了
我躺在碼頭上,靜靜地等待那剎那間的華麗
此起彼落的歡乎聲中帶著一顆顆的流星劃過
而我心中默默的許願
願將這瞬間的感動化做永恆的幸福


2007年10月22日 星期一

評分格式: 智慧型精障者路徑導引與走失偵測系統之行動運算

你覺得這篇論文創新性如何? 普通

你覺得這篇論文嚴謹度如何?是否合乎科學實證的精神? 普通

你覺得簡報內容呈現如何?是不是清晰簡明? 普通

你覺得這篇論文對社會貢獻如何? 非常好

你覺得這篇論文對學術貢獻如何? 好

請自由表達你對此篇論文的意見或建議。

我想應該是由於我對於『輔導者』這個職業的不了解,所以不知道這項技術的實用性所在,但經了解輔導者對於要照顧認知障礙者的比例後,了解這一項較具有智慧型alert其實會對社會有所貢獻的.但我認為對於不同的"人",所需要設置的範疇,像走的路徑、到達時間的走失標準是很大的挑戰,因為外在變因和人為產生的誤差會很大,如何在適合的時機去提醒不同狀況認知障礙者,是有待研討.

評分格式: 『實境導航,有障無礙』 無線行動化的社區智慧型空間- 認知障礙者路徑指引系統

你覺得這篇論文嚴謹度如何?是否合乎科學實證的精神? 好

你覺得簡報內容呈現如何?是不是清晰簡明? 非常好

你覺得這篇論文對社會貢獻如何? 非常好

你覺得這篇論文對學術貢獻如何? 普通

我覺得利用手機能夠支援無線網路的功能,來事先設定好路線,以至於可以及時使用,實在是不錯的想法.對於有認知障礙的人的確是一大福利設計.應該是礙於有12分鐘講解的規定,我認為再加上一小段實地拍攝測試人的狀況,會更清楚明瞭.

2007年10月8日 星期一

Lab 8 iGoogle in my Personal Portal

最新回應證實圖

Lab 6: RSS

try to use http://s9528237.blogspot.com/feeds/comments/default in IE

--
try to use http://s9528237.blogspot.com/feeds/comments/default in fire fox

--
Google reader

--

Lab3 Using FireFox 2.0

心情散文

時光又再次地飛逝
不知不覺已升上來大二
不能再自稱自己是大學新鮮人
再拿適應不良來當藉口

日覆一覆的大學生活
卻似乎茫然不知自己究竟想要學習些什麼
尋著著什麼

太夢幻的抱負總會放棄
太簡單的工作總是懶散

是不是在生活中缺少那一份熱情的動力

我 究竟要何去何從?

先從這門網際網路應用系統設計課,把它做到最好開始

Homework 10-1-2007

1. 參考單車上的靈感,開始用部落格書寫你的個人散文,並加上適當標籤。
心情散文

2. 一篇部落格是否只能使用一個標籤,如果不是,請舉出反例。
否。我的心情散文這篇網誌即擁有心情,酉告兩個標籤。

3. 參考標籤(tag,或稱label)的定義,使用標籤有什麼好處? 標籤與分類有何不同?
標籤具有一些特色,that is,它的好處所在
1.類似超連結的功能,能夠一點就進入自己所要需要的資料所在,而且是所有相關資料,即都被加以相同標籤的資料。
2.同一個資料可以被附與不同的標籤,即是可以依自己的喜好,給與資料出現的區域。
3.搜索時間較短。
而分類就不具上列特色,因為分類通常一種資料只會出在一個子分類裡,而且搜索時得
先從大範圍慢慢縮減到小範圍直到找到自己所要的資料所在。搜索時間較長。

4. Read Pages 184~188 of Textbook. Answer the problems 7, 8, and 9 on Page 195.

7. 試舉出一些實例說明靜態網頁是不夠的,必須要有 CGI 的機制?
靜態網頁就是由HTML所組成,client只能單純從網頁上瀏覽和下載那一成不變資料。
如果擁有了CGI機制,將可以跟server端做戶動交流。
最簡單的實例就是咱們正在使用的Blog,使用者可以透過程式的連結,將意見留在網頁上,並能夠讓其他使用者瀏覽。

8. 為何經由 CGI 程式所產生的網頁稱為動態網頁?
CGI是Common Gateway Interface的縮寫,中文翻做『共通閘道介面』。它是一種標準介面程式,能讓你的網頁跟WWW server溝通,達到跟使用者互動的效果。而且透過CGI程式,可以讓你動態的產生網頁,秀出server上的最新資料。當你link到一個CGI物件時,你取回的文件並非是一份靜態資料,而是一個藉由程式動態產生的HTML資料流。傳回來的資料也許分分秒秒都在更改,或者針對使用者的特殊查詢而有不同的反應,例如股票市場行情等等。簡單來說,CGI程式就是能夠動態產生WWW網頁,並讓一般使用者經由WWW取用現存在傳統資訊系統內的資料。
資料來源:CGI簡介
9. 某 CGI 程式是使用 Net.Data 語言來開發設計,請問用戶端是否要使用 Net.Data 專屬的 browser?
CGI程式是放在 WebServer 上, 因此我們也是透過 URL 去指明要呼叫的 CGI 程式,所以實際上是在Server開一個User給使用者來使用Server,也就是說如果是以Net.Data程式來開發,那只需要在Server上的機器有安裝此軟件即可。

2007年10月1日 星期一