s9826370侯博揚: 2011

2011/12/19

Syndication with RSS 2.0

1. 進入你的部落格，登入，選擇設計
2. 新增小工具
3. 選取
資訊提供

將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)

2011/12/12

1. 推薦一則 ted.com 演講給你朋友，告訴你的朋友這個演講好在哪裡。
2. 參考 Wikipedia，雲端運算的關鍵是甚麼? Google, Amazon, Microsoft 有哪些雲端服務?

1.

Birke Baehr: What's wrong with our food system

11歲的 Birke Baehr 提出食物的主要來源，自遙遠及風景如畫的工業化農場。讓我們看到美化農業背後的不真實以及黑箱作業的圖片。

2.

雲端運算（英語：Cloud Computing），是一種基於網際網路的運算方式，透過這種方式，共享的軟硬體資源和資訊可以按需提供給電腦和其他裝置。整個執行方式很像電網。
雲端運算是繼1980年代大型電腦到用戶端-伺服器的大轉變之後的又一種巨變。使用者不再需要了解「雲端」中基礎設施的細節，不必具有相應的專業知識，也無需直接進行控制。^[1] 雲端運算描述了一種基於網際網路的新的IT服務增加、使用和交付模式，通常涉及透過網際網路來提供動態易擴充功能而且經常是虛擬化的資源。^[2]^[3] 雲其實是網路、網際網路的一種比喻說法。因為過去在圖中往往用雲端來表示電信網，後來也用來表示網際網路和底層基礎設施的抽象。典型的雲端運算提供商往往提供通用的網路業務應用，可以透過瀏覽器等軟體或者其他Web服務來存取，而軟體和資料都儲存在伺服器上。雲端運算關鍵的要素，還包括個性化的使用者體驗。
雲端運算可以認為包括以下幾個層次的服務：基礎設施即服務（IaaS），平台即服務（PaaS）和軟體即服務（SaaS）。雲端運算服務通常提供通用的透過瀏覽器存取的線上商業應用，軟體和資料可儲存在資料中心。

2011/12/05

Hand code a form

Before you do this lab, you must understand what is CGI(Common Gateway Interface) and Form.

1. So please search the answer and post your opinion in your blog.
2. 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 Form and Action

Dynamic pages, content generated by server-side programs.
CGI, Common Gateway Interface, for sending requests to server-side programs.

static page
Ex:
http://www.google.com/

dynamic page
Ex:
http://www.cna.com.tw/

URL that sends a request by CGI
Ex:
http://maps.google.com/maps?q=24.9586,+121.2411

"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?

method get

method post

2011/11/30

Mash-Up 4 (Calendars)

建立你的行事曆，並與學校行事曆合併

Google日曆-中原大學服務學習活動行事曆-html版本

進入後按右下角+Google日曆即可訂閱

Mash-up 3 (Blogs)

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

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

Hint: 挪威奧斯陸之行
album

Mash-up 2 (Maps)

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

For housing services, compare the following two websites
http://www.housingmaps.com

http://yungching.housefun.com.tw/

List the differences in the user interface design and usability. Make comments
by your use experiences.

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

美感
HousingMaps 　簡樸沒有太多修飾
永慶房屋　　　修飾太多有點太花俏,看得眼睛不舒服

直覺性
HousingMaps 　細緻的街道圖
永慶房屋　　　台灣縣市鄉鎮的圖示

流暢
HousingMaps　　範圍較大地圖，所以標示跑得慢
永慶房屋　　　　彈跳視窗，需等待顯示

預期反應
HousingMaps　　分類簡單
永慶房屋　　　　複雜但是細緻

Mash-up 1 (Publish)

2011/11/28

HTML

More on HTML

H1 字體最大

字體隨1.2.3依序變小

依照1. 2.....依序以數字做標

以點作標註

2011/11/21

Making images accessible

1. Study what an ALT tag is.
2. Use KompoZer to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html

You can copy and paste the content to your KompoZer.

3. Save your editings and preview your webpage using Firefox

4. Make the webpage accessible by
adding ALT text to the images.

5. Go to the Firefox Add-ons site for Firefox Accessibility Extension

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.

navigation bar

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

2011/11/08

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.

Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站

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.

Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站

2011/10/31

Google Accessibility

Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link.
Google Access Keys Enables navigation through Google search results.

Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站

AccessBar

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

Continued from the above, use google to find 3 more government sites in Taiwan that enable access keys.

Clean Language

1. Save the JavaScript file of Clean Language to your desktop. Make changes to the script with self-defined bad words. To do this, save the JavaScript on your desk top. Use Notepad editor to make changes. Install the modified script as Greasemonkey.

2. Use Google to search webpages that contains some bad words.

3. Try whether the filtering take effects.

Greasemonkey

Please read the information about Greasemonkey and cookiebefore you start the lab.
Install Greasemonkey 0.9.1 . Check the lower right corner of your Firefox and you should find a monkey at the right.
Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?
You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.

Using Google PageRank

在Firefox上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/

接著，以PageRank量測你常用的三個網站。

參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文

紐約時報 9/10