2007年12月31日 星期一
期末報告:Drag And Drop
我所選的是 Drag And Drop 因為眾所週知的google 在她推出的igoogle中
就提供了類似的的拖曳功能，這樣的功能提供了高度的互動性及自由度`,所以我很感興趣。
以下為整段程式碼
分析如下
在一開始第3行的
simplelayout
axis="x" => 物件延著X軸放置
spacing="5" => 每個物件建個5個像素
spacing="5" => 每個物件建個5個像素
接下來的4~14行是構成我們畫面上的wish與shopping兩個cart也就是下圖兩個黃色所標示的範圍
fgcolor="#FFFFFF"=>設定這個物件的前景色
bgcolor="#666699" =>設定這個物件的背景色
我們也可以發現這兩個cart中間有間隔就是前面simplelayout的效果。
接下來的16~32行就是整個Drag And Drop 最重要的部份。在這部分我們建立了我們要進行拖曳動作的物件以及一些相關處理他的作法
我們要進行拖曳的物件為norahjones.jpg這張圖，以resouce將他引入進來。
在第18,19行就是控制拖曳的方法
接下來的16~32行就是整個Drag And Drop 最重要的部份。在這部分我們建立了我們要進行拖曳動作的物件以及一些相關處理他的作法
我們要進行拖曳的物件為norahjones.jpg這張圖，以resouce將他引入進來。
在第18,19行就是控制拖曳的方法
onmousedown="dragging.apply()" =>當滑鼠按下時，可以拖曳物件
onmouseup="dragging.remove(); stop() =>當滑鼠放開，拖曳的效果解除並stop
onmouseup="dragging.remove(); stop() =>當滑鼠放開，拖曳的效果解除並stop
關於stop的動作在後面會有更詳細的設定。
dragstate 是她預設好用來控制drag相關動作的東西，再這邊還可加入一些相關的參數 去設定你要拖曳的範圍限制比如說控制它只能做水平或垂直的表現。或者更近一步限制他只能在某個範圍最小多少，最大到多少。
第23行到第31行中
描述的是當我們鬆開滑鼠物件要停止下來的一些相關設定，為了讓物件只能在我們指定的範圍停下來而做此設計
宣告一個 method取名為stop
this所指向的物件就是我們所拖曳的物件，this.x就是我們拖曳物件的x座標，當他超過某個wish的範圍直接將物件定位在25 ,26行所標示的位置(也就是wish所在的範圍)。反之定位在28,29行所描述的位置(也就是cart所在的範圍)。
總結
在這個範例中我們可以學到基本畫面的佈局的設計方法(simplelayout)，以及拖曳控制的方法(dragstate)。另外還有滑鼠事件的描述(onmouseup,onmousedown)
dragstate 是她預設好用來控制drag相關動作的東西，再這邊還可加入一些相關的參數 去設定你要拖曳的範圍限制比如說控制它只能做水平或垂直的表現。或者更近一步限制他只能在某個範圍最小多少，最大到多少。
第23行到第31行中
描述的是當我們鬆開滑鼠物件要停止下來的一些相關設定，為了讓物件只能在我們指定的範圍停下來而做此設計
宣告一個 method取名為stop
this所指向的物件就是我們所拖曳的物件，this.x就是我們拖曳物件的x座標，當他超過某個wish的範圍直接將物件定位在25 ,26行所標示的位置(也就是wish所在的範圍)。反之定位在28,29行所描述的位置(也就是cart所在的範圍)。
總結
在這個範例中我們可以學到基本畫面的佈局的設計方法(simplelayout)，以及拖曳控制的方法(dragstate)。另外還有滑鼠事件的描述(onmouseup,onmousedown)
2007年12月17日 星期一
Homework 12-10-2007
1. List three ways of creating interactive webpages.
a.PHP
一種嵌入在Html中的語言 最早是 由Rasmus Lerdorf ，他用Perl寫了一些後端的程式，記錄有哪些人看過他的線上履歷表。慢慢地，一些網友對他所寫的程式碼產生興趣。於是，Rasmus Lerdorf就整理這些程式碼，包裝成一個叫作 Personal Home Page Tools基於個人的興趣，Rasmus Lerdorf又寫了一個腳本語言的核心引擎。然後，又加上了能處理HTML表單輸入的工具，稱作 “Form Interpreter”簡稱FI。在1995年完成的這個版本，當時稱作 “PHP FI”，也有人稱之為 ”PHP2”。
開發之後使用PHP的網站漸漸的增加
b.ASP
Active Server Pages
通過ASP我們可以結合HTML網頁、ASP指令和ActiveX元件建立動態、交互且高效的WEB伺服器應用程式。同時，ASP也支持VBScript和JScript等腳本語言，默認為VBScript。其中JScript是微軟公司的ECMAScript標準的實現，並且配合自己的需要做延伸
c.JavaScript
JavaScript是一種腳本語言，與ASP ,PHP不同之處在於他是在用戶端的瀏覽器執行 而非在SEVER端在發往伺服器執行之前不需經過編譯，而是將文本格式的字元代碼發送給伺服器由瀏覽器解釋執行。而且由於每次重新載入都會重新解譯，載入後，有些代碼會延遲至運行時才解譯，甚至會多次解譯，所以速度較慢
參考資料:
http://dyna.hcc.edu.tw/php/class1_1.htm
http://zh.wikipedia.org/w/index.php?title=Active_Server_Pages&variant=zh-tw
http://zh.wikipedia.org/w/index.php?title=JavaScript&variant=zh-tw
2.
九九乘法表
a.PHP
一種嵌入在Html中的語言 最早是 由Rasmus Lerdorf ，他用Perl寫了一些後端的程式，記錄有哪些人看過他的線上履歷表。慢慢地，一些網友對他所寫的程式碼產生興趣。於是，Rasmus Lerdorf就整理這些程式碼，包裝成一個叫作 Personal Home Page Tools基於個人的興趣，Rasmus Lerdorf又寫了一個腳本語言的核心引擎。然後，又加上了能處理HTML表單輸入的工具，稱作 “Form Interpreter”簡稱FI。在1995年完成的這個版本，當時稱作 “PHP FI”，也有人稱之為 ”PHP2”。
開發之後使用PHP的網站漸漸的增加
b.ASP
Active Server Pages
通過ASP我們可以結合HTML網頁、ASP指令和ActiveX元件建立動態、交互且高效的WEB伺服器應用程式。同時，ASP也支持VBScript和JScript等腳本語言，默認為VBScript。其中JScript是微軟公司的ECMAScript標準的實現，並且配合自己的需要做延伸
c.JavaScript
JavaScript是一種腳本語言，與ASP ,PHP不同之處在於他是在用戶端的瀏覽器執行 而非在SEVER端在發往伺服器執行之前不需經過編譯，而是將文本格式的字元代碼發送給伺服器由瀏覽器解釋執行。而且由於每次重新載入都會重新解譯，載入後，有些代碼會延遲至運行時才解譯，甚至會多次解譯，所以速度較慢
參考資料:
http://dyna.hcc.edu.tw/php/class1_1.htm
http://zh.wikipedia.org/w/index.php?title=Active_Server_Pages&variant=zh-tw
http://zh.wikipedia.org/w/index.php?title=JavaScript&variant=zh-tw
2.
九九乘法表
2007年12月10日 星期一
2007年12月9日 星期日
Homework 11-26-2007
1. Problem 1 & Problem 3 of Textbook on Page 55.
(1).解釋 Web 技術演進是要解決什麼樣的問題?
第一時期 web 以靜態的html為主無資料庫的存取
第二時期有了CGI的技術使用程序的觀念作資料的存取
伺服器開始可以將資料先作處理在呈現給user
第三時期服務以執行緒的方式來進行 提高了網頁的效率
從以上的來看 web的技術的演進為的是能夠 與user之間作互動 以及能夠以更高的效率提供服務
(2).程序(Process) 和執行緒(Thread) 對網站性能有什麼不同的影響?
Process 每當服務一位新的user 就要多一個process當user 很多的時候 會降低網站的速度
而Thread 則是以 （serivice/Deamon)的形式常駐 而以執行緒 來提供服務
2. What does a CGI output contain in the HTTP header? Hint: Such as Content-type
使用google 搜尋line coding
網只會變成如下
http://www.google.com.tw/search?hl=zh-TW&q=line+coding&btnG=Google+%E6%90%9C%E5%B0%8B&meta=
?之後 就是要傳遞給伺服器作處理的訊息
zh-TW 表示的是繁體中文
q 表示送出查詢的資料
3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
應該使用POST，因為GET是直接將資訊附加在url上 最多只能到255個字元 有大小的限制
而POST則允許傳送大量的資料
(1).解釋 Web 技術演進是要解決什麼樣的問題?
第一時期 web 以靜態的html為主無資料庫的存取
第二時期有了CGI的技術使用程序的觀念作資料的存取
伺服器開始可以將資料先作處理在呈現給user
第三時期服務以執行緒的方式來進行 提高了網頁的效率
從以上的來看 web的技術的演進為的是能夠 與user之間作互動 以及能夠以更高的效率提供服務
(2).程序(Process) 和執行緒(Thread) 對網站性能有什麼不同的影響?
Process 每當服務一位新的user 就要多一個process當user 很多的時候 會降低網站的速度
而Thread 則是以 （serivice/Deamon)的形式常駐 而以執行緒 來提供服務
2. What does a CGI output contain in the HTTP header? Hint: Such as Content-type
使用google 搜尋line coding
網只會變成如下
http://www.google.com.tw/search?hl=zh-TW&q=line+coding&btnG=Google+%E6%90%9C%E5%B0%8B&meta=
?之後 就是要傳遞給伺服器作處理的訊息
zh-TW 表示的是繁體中文
q 表示送出查詢的資料
3. If you want to upload an mp3 file, should you use the GET or POST method? Why?
應該使用POST，因為GET是直接將資訊附加在url上 最多只能到255個字元 有大小的限制
而POST則允許傳送大量的資料
Homework 12-3-2007
將listing 1 與 listing 2 合併
同樣的將listing 1 與 listing 3 結合 但是listing 3 必須修改過
原本的
同樣的將listing 1 與 listing 3 結合 但是listing 3 必須修改過
原本的
select="count($matches[team[.=$this]/@score < team[.!=$this]/@score])"/>
修正為
select="count($matches[team[.=$this]/@score > team[.!=$this]/@score])"/>
2007年12月3日 星期一
2007年11月27日 星期二
Lab 17: Form and Action, Part II
2007年11月26日 星期一
2007年11月12日 星期一
Lab 14: Accessibility by GreaseMonkey
- 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
-
Google Access Keys Enables navigation through Google search results.
- 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
There are 2 access keys defined at www.epa.gov.tw
There are 4 access keys defined at www.ocac.gov.tw - Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
總統府：http://www.president.gov.tw/index_c.html
衛生署：http://www.doh.gov.tw/cht2006/index_populace.aspx
國防部：http://www.mnd.gov.tw/index.aspx
2007年11月5日 星期一
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.
presentation materials. What is web accessibility?
web 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?
在電子商務系統中網頁大多不在是靜態的，他會多了很多跟使用者互動交換資料的狀況。舉凡會員註冊，或者是交易。倘若資料量大的時候。有資料庫的幫助。可以將這些資訊作完善的處理。
LAB clean language
greasemonkey disable：
greasemonkey enable:
The bad word "fuck" will be replaced by "*".
greasemonkey enable:
The bad word "fuck" will be replaced by "*".
2007年10月29日 星期一
Lab Technorati
Use Technorati to measure the authority of blogs and show how many links the following blogs have.
Scobleizer http://scobleizer.wordpress.com/
Techcrunch http://www.techcrunch.com/
Engadget http://www.engadget.com/
Reflection http://www.chieftain.idv.tw
Java http://javaatcycu.blogspot.com
my blog
http://s9428215.blogspot.com
Scobleizer http://scobleizer.wordpress.com/
Techcrunch http://www.techcrunch.com/
Engadget http://www.engadget.com/
Reflection http://www.chieftain.idv.tw
Java http://javaatcycu.blogspot.com
my blog
http://s9428215.blogspot.com
Homework: 10-23-2007
1. Lab Google PageRank
在Firefox上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)
紐約時報 http://www.nytimes.com
PageRank :9
CNN http://www.cnn.com/
PageRank :9
台灣雅虎 http://tw.yahoo.com
PageRank :9
蕃薯藤 http://www.yam.com
PageRank :6
PCHome 購物 http://shopping.pchome.com.tw/
PageRank :6
Monday 購物 http://www.monday.com.tw/
PageRank :
PageRank量測我常去的網站
http://www.cycu.edu.tw/
PageRank:4
http://www.wretch.cc/
PageRank:6
http://en.wikipedia.org/wiki/Wiki
PageRank:8
2. Essay Writing on Google Docs
參考鳳凰城動物園遊記，撰寫一篇你自己的秋日遊記。
這次我們要使用Google Docs來書寫，請參考Google Docs
台中行
2007年10月22日 星期一
評分: 智慧型精障者走失偵測系統之行動運算
你覺得這篇論文創新性如何? 普通
你覺得這篇論文嚴謹度如何?是否合乎科學實證的精神? 好
你覺得簡報內容呈現如何?是不是清晰簡明?不好 有些地方用圖表呈現 但是沒解釋的很清楚
你覺得這篇論文對社會貢獻如何? 不好
你覺得這篇論文對學術貢獻如何? 普通
請自由表達你對此篇論文的意見或建議。
感覺這篇對於輔助障礙者的方面，效果沒有前一篇顯著，有歇細微的地方還需要去解決，才有辦法達到它實際應用的效果。
你覺得這篇論文嚴謹度如何?是否合乎科學實證的精神? 好
你覺得簡報內容呈現如何?是不是清晰簡明?不好 有些地方用圖表呈現 但是沒解釋的很清楚
你覺得這篇論文對社會貢獻如何? 不好
你覺得這篇論文對學術貢獻如何? 普通
請自由表達你對此篇論文的意見或建議。
感覺這篇對於輔助障礙者的方面，效果沒有前一篇顯著，有歇細微的地方還需要去解決，才有辦法達到它實際應用的效果。
評分:『實境導航，有障無礙』 無線行動化的社區智慧型空間- 認知障礙者路徑指引系統
你覺得這篇論文創新性如何? 好
你覺得這篇論文嚴謹度如何? 普通
是否合乎科學實證的精神? 普通，覺得只用12個受測者就要確定這個系統的實用程度有點不足
你覺得簡報內容呈現如何?是不是清晰簡明? 好
你覺得這篇論文對社會貢獻如何? 好
你覺得這篇論文對學術貢獻如何? 普通
請自由表達你對此篇論文的意見或建議。
我覺得構想很不錯，但是對於一些外在環境的影響的實例，我絕得可以再提出多一點的証明
你覺得這篇論文嚴謹度如何? 普通
是否合乎科學實證的精神? 普通，覺得只用12個受測者就要確定這個系統的實用程度有點不足
你覺得簡報內容呈現如何?是不是清晰簡明? 好
你覺得這篇論文對社會貢獻如何? 好
你覺得這篇論文對學術貢獻如何? 普通
請自由表達你對此篇論文的意見或建議。
我覺得構想很不錯，但是對於一些外在環境的影響的實例，我絕得可以再提出多一點的証明
Homework 10-8-2007
1. 請閱讀數篇其他同學的部落格(10月一日作業第一題)，選擇其中三位同學在她(他)的部落格上，針對其散文給予評語或建議。
我給了3位同學回應
1.電機二乙 鄭榮成
2.電機三乙 許家綺
3.電子三甲 陳彥儒
2. 關於你的散文作品，你得到多少篇回應? 這些回應對你有幫助嗎?
我得到了3篇回應，有回應會讓人有繼續寫下去的動力。不管這些回應的內容對於文章是否有辦法提昇，但是這是有互動的證據，是好現象。
3. Use IE to view original XML of Yam's RSS feed. What are the fields of the RSS 2.0?
You may read the lecture notes to give you some of the ideas.
RSS(Really Simple Syndication)其標準輸出格式為XML。幫助我們去訂閱、追蹤我們有興趣的網站或議題。方便我們抓 住最新的資訊，而不用親自去瀏覽該網站。萬一想追蹤的很多時，RSS訂閱的 方式可以省下我們一個一個瀏覽網站的時間
reference: http://140.120.80.33/rss/WhatIsRSS.asp
http://zh.wikipedia.org/wiki/RSS
我給了3位同學回應
1.電機二乙 鄭榮成
2.電機三乙 許家綺
3.電子三甲 陳彥儒
2. 關於你的散文作品，你得到多少篇回應? 這些回應對你有幫助嗎?
我得到了3篇回應，有回應會讓人有繼續寫下去的動力。不管這些回應的內容對於文章是否有辦法提昇，但是這是有互動的證據，是好現象。
3. Use IE to view original XML of Yam's RSS feed. What are the fields of the RSS 2.0?
You may read the lecture notes to give you some of the ideas.
RSS(Really Simple Syndication)其標準輸出格式為XML。幫助我們去訂閱、追蹤我們有興趣的網站或議題。方便我們抓 住最新的資訊，而不用親自去瀏覽該網站。萬一想追蹤的很多時，RSS訂閱的 方式可以省下我們一個一個瀏覽網站的時間
reference: http://140.120.80.33/rss/WhatIsRSS.asp
http://zh.wikipedia.org/wiki/RSS
2007年10月8日 星期一
Homework 10-1-2007
1. 參考單車上的靈感，開始用部落格書寫你的個人散文，並加上適當標籤。
颱風天
2. 一篇部落格是否只能使用一個標籤，如果不是，請舉出反例。
可以用多個
颱風天
這篇就不只一個標籤
3. 參考標籤(tag，或稱label)的定義，使用標籤有什麼好處? 標籤與分類有何不同?
使用標籤可以將你這篇文章作歸類他可以視為這篇文章的關鍵詞，讓讀者可以根據這標籤去找他想閱讀的區塊
跟分類的差異就在於一篇文章可以根據內文給多個標籤，但是一篇文章就只能有一個分類
Reference:
http://www.mtime.com/help/blog/blog_tag_faq4.html
4. Read Pages 184~188 of Textbook. Answer the problems 7, 8, and 9 on Page 195.
7. 試舉出一些實例說明靜態網頁是不夠的，必須要有 CGI 的機制?
一般靜態的網頁只能做到呈現資料給使用者，沒辦法做到與使用者互動
倘若遇到一些需要跟使用者作資料交換的狀況比方說使用者註冊、購物車..等等
靜態的網頁就無法滿足這類的需求。
8.為何經由 CGI 程式所產生的網頁稱為動態網頁?
因為他所呈現的內容並非是網頁設計者預先設計好直接讓使用者讀取的，而是有部份的內容透過與使用者的互動輸入資料或者勾選等動作，經過CGI 程式處理過後再作呈現。所以稱做動態網頁
9.某 CGI 程式是使用 Net.Data 語言來開發設計，請問用戶端是否要使用 Net.Data 專屬的 browser?
不用，因為資料的處理是在伺服器上運行只要伺服器上能夠執行Net.Data的程式，程式最後還是輸出ＨＴＭＬ的資料給使用者，所以不需要專屬的browser
颱風天
2. 一篇部落格是否只能使用一個標籤，如果不是，請舉出反例。
可以用多個
颱風天
這篇就不只一個標籤
3. 參考標籤(tag，或稱label)的定義，使用標籤有什麼好處? 標籤與分類有何不同?
使用標籤可以將你這篇文章作歸類他可以視為這篇文章的關鍵詞，讓讀者可以根據這標籤去找他想閱讀的區塊
跟分類的差異就在於一篇文章可以根據內文給多個標籤，但是一篇文章就只能有一個分類
Reference:
http://www.mtime.com/help/blog/blog_tag_faq4.html
4. Read Pages 184~188 of Textbook. Answer the problems 7, 8, and 9 on Page 195.
7. 試舉出一些實例說明靜態網頁是不夠的，必須要有 CGI 的機制?
一般靜態的網頁只能做到呈現資料給使用者，沒辦法做到與使用者互動
倘若遇到一些需要跟使用者作資料交換的狀況比方說使用者註冊、購物車..等等
靜態的網頁就無法滿足這類的需求。
8.為何經由 CGI 程式所產生的網頁稱為動態網頁?
因為他所呈現的內容並非是網頁設計者預先設計好直接讓使用者讀取的，而是有部份的內容透過與使用者的互動輸入資料或者勾選等動作，經過CGI 程式處理過後再作呈現。所以稱做動態網頁
9.某 CGI 程式是使用 Net.Data 語言來開發設計，請問用戶端是否要使用 Net.Data 專屬的 browser?
不用，因為資料的處理是在伺服器上運行只要伺服器上能夠執行Net.Data的程式，程式最後還是輸出ＨＴＭＬ的資料給使用者，所以不需要專屬的browser
2007年10月7日 星期日
2007年10月1日 星期一
訂閱：
文章 (Atom)