12/26 第二次小考

1~8任選五題，多做加分。

1. Scott Jensen 主張 "Why Mobile Apps Must Die" 他的論述基礎是甚麼?
2. Blog 與網路民主，商業媒體壟斷，人權與社會正義的關係。
3. 雲端運算的關鍵是甚麼，請以一家既存服務為例說明。(例如 Google, Azure, Amazon)
4. 行動運算與無障礙網頁的發展有何關聯? 如何促進無障礙網路的深度與廣度?
5. 你對於開放軟體有何看法?
6. 比較Blog與Facebook發展趨勢
7. 網站實名制規定使用真名發表言論，你認為實名制有何優缺點? Facebook 算不算實名制? Blog 算不算實名制? PTT,BBS 算不算實名制?
8. PageRank-Google 決定搜尋排名的關鍵技術的特色在哪裡?
9. (加分題) 自由論述一個你所專精的網際網路相關議題。

12/26 第二次小考

申論題型式，closed book.

第二次小考準備指南

第二次小考準備指南

1. Scott Jensen 主張 "Why Mobile Apps Must Die" 他的論述基礎是甚麼?
2. Blog 與網路民主，商業媒體壟斷，人權與社會正義的關係。
3. 選擇部落格時，你認為應該注意哪些特點?
4. 雲端運算的關鍵是甚麼?
5. 無障礙網頁的發展是否普及? 如何促進無障礙網路的深度與廣度?
6. 五年後網路會出現哪種創新服務?
7. 你對於開放軟體有何看法?
8. 比較Blog與Facebook
9. 網站實名制規定使用真名發表言論，你認為實名制有何優缺點? Facebook 算不算實名制? Blog 算不算實名制? PTT,BBS 算不算實名制?
10. PageRank-Google 決定搜尋排名的關鍵技術的特色在哪裡?

I watched "Why Mobile Apps Must Die"

Scott Jenson - Why Mobile Apps Must Die - BD Conf, Sept 2011 from Breaking Development on Vimeo.

關鍵思維

Do blogs have to die and let the FB rule?

Lab 38 Syndication with RSS 2.0

1. 進入你的部落格，登入，選擇設計
2. 新增小工具
3. 選取
資 訊提供 
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

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

Lab 36 XML (2)

1. Register and Download Xray, an XML, XSLT editor and processor.

2. Given the 
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results

use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
(archive)

3. View the formatted HTML file.
4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings

compute the team standings in a table.

5. View the formatted HTML file.

Lab 35 XML

1. Register and Download Xray, an XML, XSLT editor and processor. (安裝X-Ray需要權限)


2. Before you do this lab,all the first you must know is 
    what is XML?
    what is XSLT?
    please write down your answer.

3. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.

4. View the formatted HTML file.

12/12 第一次小考

範圍

上課講授以及lab相關內容

考古題

Quiz (單排座位作單數題，雙排座位做雙數題)

1. 請舉三個實例說明CGI的action。
2. 五年後網路會出現哪種創新服務，請論述
3. 無障礙網頁技術有哪些?試舉三項。
4. 試列舉三個身心障礙的障別，不同障別對網頁設計有何影響?
5. 網路對你最有用的技術是甚麼? Why?
6. 請比較微軟的Office 與Google 線上文件所使用技術與功能特點。
7. 試敘述五件網路發展史上的大事。(沒有標準答案，儘量回答即可)
8. Housingmaps 使用了 mashup技術，何謂 mashup?
9. 除了Housingmaps之外，請列舉 三個 mashup技術實例
10. 你的朋友想同時使用中原電子郵件與Google電子郵件，可是又不想每次操作兩種介面，你會建議她怎麼做?
11. Google搜尋引擎的關鍵技術是甚麼?請簡述。
12. 油猴子(GreaseMonkey)程式為何可以用來濾除網頁中的不雅字眼，試說明其原理。
13. 雲端運算的關鍵是甚麼?
14. 一群志工協助非營利組織舉辦園遊會，其中一位志工以數位相機拍攝不少活動照片，這些照片要分享給其他夥伴，你會建議怎麼做?
15. 你的朋友出國留學，你想要與她常常電話聯繫，又不想花費鉅額電話費，如何解決這個問題?
16. 如何增加網頁的互動性? 試舉出三種方法。
17. 在無障礙規範中，使圖片成為無障礙的作法有哪些? 如何排除?
18. 瀏覽器會洩漏使用者的隱私嗎? 該如何注意以降低其風險?
19. HTML FORM包含哪些屬性?
20. HTML FORM 的POST與GET有何不同?

Homework 12-05-2011

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

關鍵思維

我看雲端

雲端運算的關鍵是甚麼?
你看好雲端運算嗎? 為什麼?

Lab 34 Programming in 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 33 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 32 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.

12/12 第一次小考

範圍

上課講授以及lab相關內容

Lab 31 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?

Lab 30 Mash-Up 4 (Calendars)

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

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

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

Lab 29 Mash-up 3 (Blogs)

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

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

Hint: 挪威奧斯陸之行
album

Lab 28 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.


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

Lab 27 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 工作坊

12/7 張耀仁老師專題說明會

地點: 電學517 (實驗室)
時間: 7:00~8:00 pm
主題: 身心障礙者生活自理與工作提示輔具科技介紹
報名: 座位有限，事先報名者優先入場(我要報名，或直接到張耀仁老師部落格網址 http://minstral.blogspot.com )，歡迎電子系大三大二同學參加。

• 寫給專題生

主持人

• 陳彥儒

講者（每人簡報十分鐘）

• 魏子崴
• 蔡佑佶
• 黃柏樵
• 劉芳琳

• 
  

Lab 26 navigation bar

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

Lab 25 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.

Lab 24 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 天內打造更具親和力的網站

Lab 23 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 天內打造更具親和力的網站

Lab 22 More on HTML

Headings
1. Copy and paste the Headings example at http://www.w3schools.com/html/html_primary.asp
2. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
3. What kind of effects can you see?

Lists
4. Copy and paste the Headings example athttp://www.w3schools.com/html/html_lists.asp
5. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
6. What kind of effects can you see?

Lab 21 HTML

HTML 

• Tutorial

Accessibility

• What is web accessibility?
• Accessible search engine
• Use accesskeys

Preparation

1. Using Microsoft Notepad, Copy and paste the HTML example atIntroduction to HTML
2. Save the file as myfile.html
3. Open the file using Firefox.

New editor
4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
5. Copy and paste the HTML example at Introduction to HTML
6. Verify your results on the screen.

Lab 20 Google Accessibility

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

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

Lab 19 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.

Lab 18 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.

Lab 17 Greasemonkey

1. Please read the information about Greasemonkey and cookiebefore you start the lab.
2. Install Greasemonkey 0.9.1. Check the lower right corner of your Firefox and you should find a monkey at the right.
3. 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?
4. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.

Lab 16 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 的論文