1. Lab: Form and Action, Part II
上次上課已完成 => Lab: Form and Action, Part II
2. 在CGI語法裡，解釋 GET, POST 差異在哪裡?
主要的差別:
（１）GET：是用資料加於URL之後來傳遞參數和參數的值。
（２）POST：利用FORM中的SUBMIT元件來傳遞參數和參數的值。
在安全性來說，使用＂GET＂的安全性較低，因為會把密碼、資料等直接放在URL上。
2008年11月30日 星期日
2008年11月24日 星期一
Lab Form and Action, Part 2
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. 
Lab Checking dead links
W3C Link Check 可以檢查 dead links, 而且只要輸入首頁,
就可以依據指定深度自動向下檢查, 而且也可以檢查對外連結(外站).
Link Checker 首先要設定檢查深度(Check linked documents recursively, recursion depth=?), 如果沒有設定, 它就只有檢查首頁.
因此如果出現 deadlink, 就是在首頁.
如果你設定檢查深度, 它就會逐一檢查此深度內的每一頁,
在檢查某一頁開始時, 它會先顯示現正在檢查的 URL, 然後
在逐一爬行該頁內每個 link.
報表輸出很漂亮. 請參閱
http://validator.w3.org/checklink
請檢查三個你最常使用的網站, 看看連結的品質如何?
紀錄有錯誤連結 (HTTP Error 404) 的次數.
就可以依據指定深度自動向下檢查, 而且也可以檢查對外連結(外站).
Link Checker 首先要設定檢查深度(Check linked documents recursively, recursion depth=?), 如果沒有設定, 它就只有檢查首頁.
因此如果出現 deadlink, 就是在首頁.
如果你設定檢查深度, 它就會逐一檢查此深度內的每一頁,
在檢查某一頁開始時, 它會先顯示現正在檢查的 URL, 然後
在逐一爬行該頁內每個 link.
報表輸出很漂亮. 請參閱
http://validator.w3.org/checklink
請檢查三個你最常使用的網站, 看看連結的品質如何?
紀錄有錯誤連結 (HTTP Error 404) 的次數.
(遠傳電信)
(中原大學)
(太平洋SOGO百貨)
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 Nvu HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.
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.
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?
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.
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.
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?
2008年11月18日 星期二
Homework 11-17-2008
1. Lab Making web pages accessible
2. What is Web 2.0?
Mashup 這個名詞最早出現在音樂上，原先是指藉由混合搭配不同的音樂，而呈現出不同的音樂效果；後來這個名詞被應用在 Web 2.0 上，意指透過結合各種網頁服務，所衍生發展出新的網路服務應用。
在技術上來說，mashup 可以是一個網站或是一個網路應用程式，透過混合搭配不同來源間的內容或資訊，而創造出來的一種全新服務；而所謂的內容可能是透過公共的介面或由第三方所提供，也有可能是由上述的 RSS/Atom 所提供，端視你混合搭配的方式。 時至今日，正如 blog 對線上發表文章掀起革命性的改變一般，mashup 也同樣大大改變了網路服務的發展，它允許使用者能自由組合現有資訊，以更新更富創造力的方式提供新的網路服務。
3. What is mashup?
Web 2.0，是一個新生的術語，它的應用可以讓人了解目前全球資訊網正在進行的一種改變——從一系列網站到一個成熟的為最終用戶提供網路應用的服務平台。這種概念的支持者期望Web 2.0服務將在很多用途上最終取代桌面計算機應用。Web 2.0並不是一個技術標準，不過它包含了技術架構及應用軟體。它的特點是鼓勵作為資訊最終利用者透過分享，使到可供分享的資源變得更豐盛；相反的，過去的各種網上分享方式則顯得支離破碎。
Web 2.0是網路運用的新時代，網路成為了新的平台，內容因為每位使用者的參與而產生，參與所產生的個人化內容，藉由人與人（P2P）的分享，形成了現在Web 2.0的世界。
（出處：http://zh.wikipedia.org/w/index.php?title=Mashup&variant=zh-tw）
2008年11月17日 星期一
Lab Making web pages accessible
1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com 2. Fix the failures you found.
（修改前）
（修改後）
Lab Mashup 3
Check it out! Real time satellite tracking
It is a mashup of Google Map and satellite teacking data.
Use the website to track Formosa III satellite.
More applications of Google Maps
It is a mashup of Google Map and satellite teacking data.
Use the website to track Formosa III satellite.
More applications of Google Maps
Lab Mashup 2
For housing services, compare the three websites
http://www.housingmaps.com
http://www.urmap.com.tw/asp/kijiji/
http://www.7house.com.tw
List the differences in the user interface design and usability. Make comments
by your use experiences.
比較: 美感，直覺性，流暢，預期反應
(1)美感: 個人認為在7house首頁上幾乎都是廣告,看起來較多采多姿,但在收尋後則為條列的方式顯示,
變得較無美感可言.而housingmaps和urmap兩者則是差不多,都皆為地圖來顯示,較清晰可見週
遭相關的環境.
(2)直覺性&流暢: 三者在直覺性和流暢方面上,感覺大致差不多好使用,但在有地圖配合使用上則較為方便,
不需要在另外收尋地圖或週遭相關資訊.
(3)預期反應:在這三個網頁上都可以很清楚的明白網頁的功能性,但在kijiji裡多提供了許多生活上的相
關資訊,例如:求職、求學、旅遊等等資訊,讓人可以很方便的收尋到其他想知道的資訊.
Lab Mashup
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.
Hint: a sample work
2008年11月3日 星期一
Lab: Making images Accessible
1. Use Nvu or Notepad to edit the following homepageat http://bloggercamp.blogspot.com/2007/01/2007.htmlYou 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 byadding ALT text to the images.
6. Click the "Install now" button on the add-ons website
7. Check whether you can see the ALT text for the images by selecting the "Show Text Equivalent" function.
Lab: Access keys
1. Use Firefox Accessibility Extension to identify the access keys defined in http://www.epa.gov.tw/
2. Use GreaseMonkey to detect the access keys defined in http://www.epa.gov.tw/
Hint: AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window.
3. Are the two results in the above the same?
Lab FireFox Accessibility Extension
Use Firefox Accessibility Extension to check the accessibility of three sites that you visit most.
Report the summary of all the errors and warnings for each site.
(1)無名小站
(2)YAHOO
(3)FireFox開始頁
Homework due 11/03/2008
1. According to the following two papers, what are the current issues of Web accessibility in the Web 2.0 era? Ple
ase write a 500 word essay.
＊文章＝＞「Web 2.0」的介紹
看完有關Web2.0的相關資訊後，才明白原來Web2.0也是一個有關網路平台化的模式。對於現今網路世界發達的社會，這個對人類而言是一個極大的商機。而由於網路的趨勢，讓許多平面媒體也都漸漸轉型於網路，漸漸的所有人的生活重心都建立於網路上面，而個人在網際網路上也越來越被受重視。在未來許多事物都和電腦、網路有關，而我們應該要更利用網路及時增加自己的知識，才不會慢了腳步。
2. 針對前次作業遊記的部分，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。
(1)許庭嘉 綠島大哥的日子
(2)謝宜涓 便所餐廳
(3)江美慧 ＊秋日遊記＊
(4)廖紹閔 上野壽喜燒
(5)賴宜宏 福隆一日遊
ase write a 500 word essay.＊文章＝＞「Web 2.0」的介紹
看完有關Web2.0的相關資訊後，才明白原來Web2.0也是一個有關網路平台化的模式。對於現今網路世界發達的社會，這個對人類而言是一個極大的商機。而由於網路的趨勢，讓許多平面媒體也都漸漸轉型於網路，漸漸的所有人的生活重心都建立於網路上面，而個人在網際網路上也越來越被受重視。在未來許多事物都和電腦、網路有關，而我們應該要更利用網路及時增加自己的知識，才不會慢了腳步。
2. 針對前次作業遊記的部分，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。
(1)許庭嘉 綠島大哥的日子
(2)謝宜涓 便所餐廳
(3)江美慧 ＊秋日遊記＊
(4)廖紹閔 上野壽喜燒
(5)賴宜宏 福隆一日遊
「Web 2.0」的介紹
Web 2.0，是一個新生的術語，它的應用可以讓人了解目前全球資訊網正在進行的一種改變——從一系列網站到一個成熟的為最終用戶提供網路應用的服務平台。這種概念的支持者期望Web 2.0服務將在很多用途上最終取代桌面計算機應用。Web 2.0並不是一個技術標準，不過它包含了技術架構及應用軟體。它的特點是鼓勵作為資訊最終利用者透過分享，使到可供分享的資源變得更豐盛；相反的，過去的各種網上分享方式則顯得支離破碎。
Web 2.0是網路運用的新時代，網路成為了新的平台，內容因為每位使用者的參與（Participation）而產生，參與所產生的個人化（Personalization）內容，藉由人與人（P2P）的分享（Share），形成了現在Web 2.0的世界。
「Web 2.0」這個名詞，最先是由 O'Reilly Media創辦人暨執行長奧萊禮（Tim O'Reilly）提出，標幟著自二○○一年網路泡沫化後，產業版圖中逐漸浮現的網站新模式。這些網站主要在幾方面有別於傳統網站：首先，他們朝思暮想的再也不是如何賣「軟體」，而是「服務」，也就是把網站視為一個平台（The web as a platform），「網站再也不純粹只是個『空間』， 而是一扇通往各式服務的『大門』，」以開發企業用Wiki軟體而聞名的Socialtext執行長梅菲德（Ross Mayfield）做了很貼切的說明；其次，「使用者」的角色將被置於最核心的位置，這些網站經營者開始學習「信任」，將生產、掌控資料的權力交還給使用者，「由底層發聲」的部落格是最明顯的例子。
正因為對使用者的重視，以Web 2.0模式經營的網站多半成長速度飛快，如Flickr、Digg、Del.icio.us、Bloglines、Socialtext等新面孔，極短時間內就成為網路世界最熱門的人潮匯集之處。然而對大部分的網站來說，「重視用戶」根本就是提升流量的基本概念，那麼究竟什麼才是Web 2.0網站最關鍵、最獨特的成長基因？Adaptive path網站設計公司資深從業員蕭爾（Brandon Schauer）指出，Web 2.0的「基礎屬性」包括「由用戶貢獻價值」、「長尾定律」（由於通路的擴大與時間的拉長，利基產品也能賣出與暢銷產品一樣的量）、以及「網絡效益」三者構成網站的經濟模式，然而過去成功存活下來的網站也都具備這些特性。真正讓Web 2.0網站創造出獨特使用經驗的，是四項「體驗屬性」：去中心化、集體創造、可重混性、突現式系統。這四項特性，某種程度上標幟出了網路業者再創網路高峰的三個關鍵引爆點：社會網絡、集體創作、以及部落格。
訂閱：
文章 (Atom)