12/20, 12/27 停課

張老師因為住院，請假到12/31。

以使用者為中心的設計法

• 另類系統設計法
• 體貼使用者的設計
• 我們如何專業地稱呼身心障礙者

Lab 37 製作一個報名網站

社團，學校，公司舉辦各種活動，少不了一個報名網站。利用

免費的Google 文件加上Google 部落格，就可以製作一個乾淨

俐落的報名網站。

請參考以下範例，製作一個報名網站。
http://eecscycu.blogspot.com/2010/12/99.html

Lab 36 Speed Test

測試中原大學與中央大學對外頻寬速度。

Tool: Speedtest
cycu proxy: proxy.cycu.edu.tw:3128
ncu proxy.csie.ncu.edu.tw:3128
no proxy

Lab 35: Blog Cloud

Build a blog cloud for your blog.

Lab 34 Syndication with RSS 2.0

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

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

Lab 33 匯出部落格

1. 將你的部落格匯出為 XML，請使用blogspot 已經提供的匯出工具
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格
4. 檢查匯出情況，是否有出現異常，資料遺失或被變更?

XML

Take a look at islandwide temperatures of Taiwan.

What happens if you just want Taoyuan's temperature?

If you want to include Taoyuan's temperature in your Theme
Park homepage, is there any solution?

XML examples:

• atom of Blog,

• Zip Code Web Service

the need of XML

Separation of data from data processor

Seperation of data from presentation

• HTML for machine-human interaction

• XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.

Automation of data flow across various business systems

• XML for machine-machine interaction

• Without human involvement, automation of business systems can be accelerated.

部落格匯出與匯入

部落格的資料是以XML表示，運用XML可以匯出與匯入部落格。

實例:

原部落格 http://minstral.blogspot.com/
匯出至新部落格 http://blog.cycu.edu.tw/chang212/

12月2日(四) 張耀仁老師第一次專題說明會

地點: 電學517 (實驗室)
時間: 7:00~8:00 pm
主題: 精障者生活自理與工作提示輔具科技介紹
報名: 座位有限，事先報名者優先入場(請在下方報名)，歡迎電子系大三大二同學參加。
事先建議閱讀資料:張老師專題方向簡介

本系規定

1. 務必團隊合作，每組至少2人，成員限修電子系專題實作的同學。
   
2. 指導老師指導學生人數之上下限為6~10人。

專題說明會報名人數
專題說明會參加人數共12人，圓滿成功。
張老師已接受專題生人數: 4

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

1. 請舉三個實例說明CGI的action。
2. 什麼是 CGI? 繪圖說明CGI網站系統架構。
3. 無障礙網頁技術有哪些?試舉三項。
4. 試列舉三個身心障礙的障別，不同障別對網頁設計有何影響?
5. 何謂 Web 2.0 ? 特性是什麼。
6. 請比較微軟的Office 與Google 線上文件所使用技術與功能特點。
7. 試比較靜態網頁與動態網頁系統設計上的差異?
8. Housingmaps 使用了 mashup技術，何謂 mashup?
9. 除了Housingmaps之外，請列舉 三個 mashup技術實例
10. 你的朋友想同時使用中原電子郵件與Google電子郵件，可是又不想每次操作兩種介面，你會建議她怎麼做?
11. Google搜尋引擎的關鍵技術是甚麼?請簡述。
12. 油猴子(GreaseMonkey)程式為何可以用來濾除網頁中的不雅字眼，試說明其原理。
13. 紐約時報董事長表示未來可能停止印刷發行，只留下網路發行。可能原因是甚麼? 這家企業未來要如何存活?
14. 一群志工協助非營利組織舉辦園遊會，其中一位志工以數位相機拍攝不少活動照片，這些照片要分享給其他夥伴，你會建議怎麼做?
15. 你的朋友出國留學，你想要與她常常電話聯繫，又不想花費鉅額電話費，如何解決這個問題?
16. 為什麼有些網頁功能只有在微軟瀏覽器可以正常工作，其他瀏覽器卻不行?如何排除這個問題?
17. 在無障礙規範中，使圖片成為無障礙的作法有哪些? 如何排除?
18. 瀏覽器會洩漏使用者的隱私嗎? 該如何注意以降低其風險?
19. DOM 的全名是甚麼?
20. CGI 的全名是甚麼?

11月29日舉行小考

範圍: 上課內容(9~11月)
方式: closed book, no computer

歷年考題(僅供參考，題型可能變更)

小考目的主要在測驗學生基本能力，能夠面對問題，獨立去構思答案，不假他人既有成果。因此，不必求完美，只要掌握關鍵概念，就會給予高分。

Homework 6

研習考古題，不必留紀錄。

DOM, Document Object Model

操作以下這個網頁
web personalization 網頁個人化
你 會不會覺得有點神奇, 它是如何做到的?
關鍵就在 DOM.

With the DOM scripting methods you can:

- Create new elements on the fly.
- Grab all the tags of the document, or grab the text without grabbing the tag text.
- Insert new text, and change or remove text from any element.
- Move whole parts of the document around, or remove parts as fragments and work with them.
- And the best part: all of these new methods should work in any DOM compliant browser. No more browser sniffing. No need to build different versions of the same page for different browsers.

Reference:
Scripting For The 6.0 Browsers, By Scott Andrew LePera

createElement() allows you to create a new tag.

myImg = document.createElement("IMG")

Give definition.

In the above example, our newly born tag has no ID, no SRC and no home in the document yet. So let's give it some definition:

myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")

Append it within the document "tree".

Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():

docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)

Lab 32: 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 31: 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.

Static, Dynamic Webpages and Common Gateway

• 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

Lab 30 navigation bar

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

Lab 29 Hand code a form

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 28 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 27: Mash-Up 4 (Calendars)

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

Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>

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

Lab 25: Mash-up 2 (Maps)

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


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

http://www.7house.com.tw

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


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

Lab 26: Mash-up 3 (Blogs)

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

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

Hint: 挪威奧斯陸之行
album

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

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.

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

期中報告

使用Google Sites 架設網站，主題可以環繞你所參加的社團, 你的家鄉或社區, 你的分享與關心, 你的朋友, 高中同學, 電影, 音樂, 學業, 生涯,

評分標準

• 創新(20%)
• 資訊完整性 (30%)
• 美學 (25%)
• 網站邏輯架構 (15%)
• 線上服務功能 (10%)

雛型(半成品)，網站建議書(範本)繳交日期 10/25/2010
成品繳交日期 11/01/2010

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

Lab 20 More on HTML

Headings
1. Copy and paste the Headings example athttp://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 19 HTML

Preparation

1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction 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 18 Comparing browsers

Install Google Browser Google Chrome and Firefox 3.0, try a few websites and compare their performance. For example, youtube, blogspot, msn, and yahoo.

Homework 5

1. 網路可不可能增進身心障礙者的便利，請舉例說明?
2. 瀏覽器會洩漏使用者的隱私嗎? 為甚麼?

Lab 16: Accessibility in 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.

Reference:
http://dia.z6i.org/ (中文)

Lab 17: 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 15 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 14 Greasemonkey

1. Install Greasemonkey 0.8. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the
   

2. 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?
   
3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.

Tools for Browsers

Outline

• JavaScript, client side language turning homepage documents into rich user experiences
• Cookie, what it is and how it works
• GreaseMonkey, post-processing the webpages for Firefox

Homework 4

閱讀過勞工程師姊姊的一封信，不須發表評論，只需看看主文和一些回應。

Lab 13: Google Mars

1. Observe how Google Mars loads the map and does the zooming. Is the data downloaded once for all or retrieved on demand?
2. 這個服務的特色有哪些?

Lab 12: 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/
Monday 購物 http://www.monday.com.tw/

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

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

Lab 11: Using your iGoogle

1. 在你的iGoogle 討論群組 Google Group，加入這個討論區 http://groups.google.com/group/mobile-computing
2. 在你的iGoogle 閱讀群組 Google Reader，加入這個部落格 http://minstral.blogspot.com/

Lab 10 Google Docs

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
2. Start writing.
3. Publish the Word document.
4. What's the URL of your document.
5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
6. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:
Google “Docs & Spreadsheets” Launches ,Oct 2006

Homework 3

1. 想了解老師的研究方向嗎? 請善用中原大學教師著作查詢系統了解本系任三位老師得近年著作，請列出這三個超聯結。
2. Firefox 最新的市占率為何? 請註明你的資料來源。
3. 在Homework 2 中，你得到多少篇回應? 這些回應對你有幫助嗎?

Due Date 10-4-2010 at 7:00 pm

課堂討論: 將外部網站納入中原網域

Google 網站支援轉址

電機系王佳盈老師的網站
http://ctrl.ee.cycu.edu.tw/home

每一頁看起來都是中原的網頁，但其實是架設在Google。要如何才能做到?

Lab 9 本校網頁簡體版功能

技術上，只要在本校首頁置放一個連結(例如簡體版)，全校所有網頁就可以逐一轉為簡體。請參考Google 翻譯功能，然後做出此一連結的網址。

Lab 8: Personal Portal

1. Enter
http://www.google.com/ig

The Google account is the same as your Blogger account.

2. Rearrange the templates. And perhaps remove blocks that you don't need.

3. Add new stuff. For now add the Google Reader, Google Docs, Google Group, Google Calendar, and GMail. You should be able to see the subscriptions in the Google Reader block of your personal portal.

Lab 7 Using Firefox

各瀏覽器市場佔有率

Advantages of using Firefox.

Outlines of Lab

1. download Firefox 3.5.8

2. control font size

3. tabbed browsing

4. subscribe to the course blog

5. Using bookmarks to test RSS feed

Help


Hands on

1. Easy control of font size (try ctrl+ & ctrl- as many times as you like)
2. tabbed browsing (try ctrlT)
3. RSS feed, and support of Blog. Use the RSS feed from

http://iapblog.blogspot.com/
to subscribe to it. Also subscribe to your own blog.

Note:
If your Firefox didn't work, you should check settings about proxy. It should be set as proxy.cycu.edu.tw at port 3128.

Note: Firefox is based on Mosaic.

Lab 6 Using labels

Labels are key elements of Web 2.0.
Professional blogs have labels. In this lab, you will learn how to put labels on your blogs to make them look professional.

1. Check into your blog homepage.
2. Enter "自訂"
3. Follow the steps to create Label Block by drag and drops.
4. Get back to your existing blog posts. Fill the blanks at the field Labels (文章的標籤).
5. Save the changes.
6. Back to the blog and check if the labels come up.

關於Lab 5

老師推薦廖姿雅呈現結果的方式，一目了然。

Homework 2

1. 你有何策略可以針對網路大學排名四個要素提出改善本校排名之道?

Due Date 9-27-2010 at 7:00 pm

Lab 5 網路大學排名 DIY

網路大學排名

網頁數
Google site:cycu.edu.tw (台大 中正 )
Yahoo site:cycu.edu.tw (台大 中正 )

連結度(能見度)
Yahoo linkdomain:cycu.edu.tw -site:cycu.edu.tw (台大 中正)

檔案數(Rich files)
Google site:cycu.edu.tw filetype:pdf (台大 中正)

Google Scholar 論文索引
Scholar Google site:cycu.edu.tw (台大 中正 )

Lab 4 發表評論

針對前次作業第二題(如下)，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。

你的評論有一個 URL，請把 URL 列出。

Homework 1

1. 列舉兩個因為網路傳播而迅速成為話題的事件，並解釋為什麼?
2. 紐約時報董事長表示未來可能停止印刷發行，只留下網路發行。可能原因是甚麼? 這家企業未來要如何存活?
3. 上網的工具除了電腦之外，還有哪些?
4. 試列舉數個 Internet of Things 的應用。

Due Date 9-20-2010 at 7:00 pm

課堂討論

portal 的價值

紐約時報計畫停印紙版，只線上發行

有價內容付費成趨勢

線上廣告

上網裝置: iPhone, iPad, Kindle, Android, ...

社群軟體

電子商務

垃圾新聞商業炒作

Lab 3: Put CYCU Map on Your Blog

1. The latitude and longitude coordinates of CYCU campus location is +24° 57' 31.02", +121° 14' 28.12" and you can take a look at the satellite image
http://maps.google.com/maps?q=24.9586,+121.24114


2. Enter the CYCU coordinates to produce a code snippet that you can put into your blog. The code is under Share/Export tab.

3. Copy and paste the code snippet into your blog just like you are writing your own blog post. Publish it.

Links:

1. 中原大學校內地圖指引
‎建立者：easy_go100

2.
眾裡尋她千百度 桃園最美的地方在哪裡

Lab 2: 讓你的部落格產生最新回應

在我的部落格可以看到回饋清單的功能，它可以列出最新針對你部落格的回應，因為有些回應可能是針對你一個月前或更舊的部落格文章，而你可能不會再回去看這 些較舊文章是否在最近收到回應，有了清單，此問題迎刃而解。即使針對你最近發表的文章，這個清單功能也很有用，讓你快速瀏覽與閱讀這些回應。

回饋清單功能本身是RSS 2.0 XML，所以也可以用Firefox RSS 或 Google Reader 抓取閱讀，非常方便。

步驟:
1. 進入版面配置，開啟回應
2. 資訊源設定如 http://minstral.blogspot.com/feeds/comments/default
3. 請你的同學給你一個 comment，是否能正確顯示在最新回應上。
4. 實例

Lab 1: 書寫部落格

為什麼鼓勵你書寫部落格
不要讓MSN奪走你的寫作能力

現在如何開始
1. 至 http://www.blogger.com/ 申請, 請以你的學號 (s開頭) 申請免費帳號。

2. 測試一下，可以寫 "Hello World"

3. 建立一個連結到課程網站 http://iapblog.blogspot.com/
建議你使用右上角"自訂"功能，新增一個區塊。一個區塊內可以置放多個連結。

4. 日後請將你的隨堂練習與作業寫在你的 blog, 然後到
Homework 或 Lab 的Comment 登錄作業blog網址就可以了.(實例)
請勿將整個作業直接寫在老師部落格的Comment處。

5. 尊重智慧財產權，引用他人文章須註明出處。並且應該合乎學術常規，以合理的方式引用。
注意事項

a. blog需正確設定時區顯示時間 。
b. 請測試他人可否留言(comment)。以方便留下回應意見。tip

How to insert a link at the following comment, please use the following HTML code.
<a href="http://yourblog/your-article.html">Your name and this homework</a>

停課公告

今天老師請病假，不上課。

下周一 6/21 老師公差出國到香港考察，不上課。

所以先預祝各位暑假快樂!

Lab 36 Packet Sniffer

1. Install Protocol Analyzer Ethereal at http://www.wireshark.org/
2. Capture the packets at your Ethernet interface card.
3. Enter a login required website that you often go to, such as web mail. Don't use the real account or password.
4. Try to catch the packet that contains the password.

Lab 35 Web Traffice Stress Test

1. Download Stress Test
2. Take a look at the user manual.
3. Test a static page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
4. Test a dynamic page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
5. Compare the response time of both pages and explain why.

Lab 34 Speed Test

測試中原大學與中央大學對外頻寬速度。

Tool: Speedtest
cycu proxy: proxy.cycu.edu.tw:3128
ncu proxy.csie.ncu.edu.tw:3128
no proxy

Google 服務監測

Goolgle 把重要服務妥善度做每日監測，誠實說明哪些服務出了什麼狀況，影響多少人或是哪些事，並回報處理結果。喜歡這種以服務導向的作法。

Lab 33: Google Analytics

1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
3. Check the results to see the daily traffic chart, the recent visitors by locations.

Lab 32: blog cloud

Build a blog cloud for your blog.

Lab 31: Syndication with RSS 2.0

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

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

Lab 30: navigation bar

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

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

DOM, Document Object Model

操作以下這個網頁
web personalization 網頁個人化
你 會不會覺得有點神奇, 它是如何做到的?
關鍵就在 DOM.

With the DOM scripting methods you can:

- Create new elements on the fly.
- Grab all the tags of the document, or grab the text without grabbing the tag text.
- Insert new text, and change or remove text from any element.
- Move whole parts of the document around, or remove parts as fragments and work with them.
- And the best part: all of these new methods should work in any DOM compliant browser. No more browser sniffing. No need to build different versions of the same page for different browsers.

Reference:
Scripting For The 6.0 Browsers, By Scott Andrew LePera

createElement() allows you to create a new tag.

myImg = document.createElement("IMG")

Give definition.

In the above example, our newly born tag has no ID, no SRC and no home in the document yet. So let's give it some definition:

myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")

Append it within the document "tree".

Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():

docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)

Quiz

1. Google 的獲利模式是甚麼? 請舉例說明。
2. 什麼是 CGI? 繪圖說明以CGI為架構的網站系統。
3. 無障礙網頁技術有哪些?試舉三項。
4. Housingmaps 使用了 mashup技術，何謂 mashup?
5. 何謂 Web 2.0 ? 特性是什麼。
6. 請比較微軟的Office 與Google 線上文件所使用技術與功能特點。
7. XML 與 HTML 差異在哪裡? 網路訂單適合用哪一種傳送? 為什麼?
8. 擴增實境是什麼?試舉三個應用。
9. 部落格常使用 RSS 技術，請簡要說明RSS，以及其主要功能。
10. 列舉 XML 特性至少三個
11. 如何增加網頁的互動性? 試舉出三種方法。
12. 油猴子(GreaseMonkey)程式為何可以用來濾除網頁中的不雅字眼，試說明其原理。
13. 試敘述五件網路發展史上的大事。(沒有標準答案，儘量回答即可)
14. 試列舉Google提供的五種服務。
15. 試列舉三種手持裝置(包含PDA, iPad，行動電話，...)的作業系統
16. 列舉至少三種網頁瀏覽器
17. 在無障礙規範中，使圖片成為無障礙的作法有哪些? 請說明。
18. 無障礙網頁的理念是甚麼? 試論述之。
19. HTML 的全名是甚麼?
20. HTTP 的全名是甚麼?

Homework 5-10-2010

• Lab 27: Using XML and XSLT
• Lab 26: Using XML

Lab 27: Using XML and XSLT

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 Hand code a form

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 26: Using XML

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

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

3. View the formatted HTML file.

XML

Take a look at islandwide temperatures of Taiwan.

What happens if you just want Taoyuan's temperature?

If you want to include Taoyuan's temperature in your Theme
Park homepage, is there any solution?

XML examples:

• atom of Blog,

• Zip Code Web Service

the need of XML

Separation of data from data processor

Seperation of data from presentation

• HTML for machine-human interaction

• XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.

Automation of data flow across various business systems

• XML for machine-machine interaction

• Without human involvement, automation of business systems can be accelerated.

What kind of language is XSLT?

• An XSLT style sheet is an XML document.
• The basic processing paradigm is pattern matching.

Operation of an XSLT Processor

參考資料
XSLT(專業ASP.NET XML程式設計 - 使用C#)

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

Static, Dynamic Webpages and Common Gateway

• 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

Homework 5-03-2010

1. 請點選以下中原大學電算中心有獎徵答活動，檢視當中使用了哪些服務的 mash-up?


2. Rich Internet Applications 泛指網頁上高度互動性設計，諸如Youtube, Google Maps 等，需要較多的運算與頻寬，請問這些應用是否可能將無障礙設計納入考量，以兼顧視障，肢體障礙，聽障者的需求?

3. Augmented Reality (on Youtube Video) 目前有哪些研究?是列舉三個研究單位或三項研究的簡介。

Lab 24: Mash-Up 4 (Calendars)

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

Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>

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

5月17日舉行小考

考古題

虛實整合行動科技--擴增實境

Augmented Reality (on Youtube Video)

Lab 23: Mash-up 3 (Blogs)

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

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

Hint: 挪威奧斯陸之行
album

Lab 22: Mash-up 2 (Maps)

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


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

http://www.7house.com.tw

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


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

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

Homework 4-19-2010

1. Lab 20: Making web pages accessible

2.針對上次作業第三題

"依據永恆的數位分身的說法，試舉出一個實例或反例。"

選出至少三篇文章加以評論，在作者部落格給予回饋。每篇回饋請加註

選擇此篇文章給予回饋的原因(單選)，
1. 友情贊助 2. 見解精闢 3. 隨機選取 4. 其他(請說明)

Due: May 3, 2010

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

Lab 18: Making images accessible

1. Use KompoZer or Notepad to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html

You can copy and paste the content to your KompoZer.

2. Take a look at the HTML 標籤, HTML 原始碼

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.

Homework 4-12-2010

1. 依據 What is web accessibility，試針對三種不同障別舉出三種無障礙設計方式，並請探討跨障別設計是否可行?(也就是所謂的通用設計)
2. 依據 Tutorial，HTML 3.2 與 HTML 4.0 最大差別在哪裡?
3. 依據永恆的數位分身的說法，試舉出一個實例或反例。

Lab 17: 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 16: Accessibility in 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.

Reference:
http://dia.z6i.org/ (中文)

Lab 14: HTML

Preparation

1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction 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 15: more on HTML

Headings
1. Copy and paste the Headings example athttp://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?

無障礙網頁設計

HTML

• Tutorial
  

Accessibility

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

永恆的數位分身

最近因為有學校同仁離職，依教育部規定，必須在一段時間後刪除其email帳號，同仁提出要求希望能永久保留，以免老朋友因為他換email找不到他。

前 一陣子，我還在課堂上提數位分身的概念，每個人在網路的虛擬世界都一個影子，無論你有沒有個人網站，是不是有個部落格，或是曾經開過Facebook 帳號，有沒有偶而在Twitter推一下，這個影子都存在，現在機關的會議紀錄，學校報名訊息，國科會研究計畫，榜單全上網了，只要走過，不可能不留下數 位痕跡，而且這些資料所有權也不在你，你還擦拭不去呢。厲害的Google可以把這些一次搜出來，過去女生約會時到洗手間是要補妝，現在則是用智慧型手機 Google一下剛邂逅的型男。

古人說的三不朽，現在的數位世界全幫我們做到了，就算肉身離去，數位分身不死。昨天搭通勤電車時，在前往台北的路上有位小姐全程在閱讀 Randy 最後的演講，不就是一個活生生的見證嗎!

所以，我們的這位同仁，不用擔心你的老友们不知道你已經轉職了，或是找不到你，你的數位分身會讓他們抓得到你。

Midterm 網站設計

請設計一個"中原大學二手電腦流通網 "
1. 可以競標
2. 可以品項分類
3. 可以搜尋

截止期限 4/12/2010

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

Browsers

Outline

• JavaScript, client side language turning homepage documents into rich user experiences
• Cookie, what it is and how it works
• GreaseMonkey, post-processing the webpages for Firefox

使用經驗

Firefox 3.0

• 適合做網頁編輯，處理HTML內碼程度最高，推薦用於部落格轉貼。
• 速度方面，我給80分
• 中文處理有點問題
• GreaseMonkey (油猴子) 支援佳，很欣賞
• JavaScript 執行速度快，DOM 支援程度高

Chrome 1.0

• 速度方面我給90分
• 中文輸入處理問題不少
• 適合用來觀看網頁，會省下不少時間。如果牽涉中文寫作與輸入，務必先祈禱。
• 沒有支援油猴子。

IE 7.0

• 速度方面不及格，適合訓練耐心。
• 中文輸入方面尚未出現任何問題。
• 適合大量中文撰寫，例如e-mail, 論壇, 部落格
• 沒有支援油猴子。

Lab 12 Greasemonkey

1. Install Greasemonkey 0.8. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the
   

2. 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?
   
3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
4. Also install Web Developer Toolbar to examine cookies.

Lab 11 Collabrative Editing

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
2. Start writing.
3. Publish the Word document.
4. What's the URL of your document.
5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
6. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:
Google “Docs & Spreadsheets” Launches ,Oct 2006

Homework 3-22-2010

1. 為什麼Google搜尋不考慮網站的駐留時間，點閱次數，或使用者個數評量網頁重要性?
2. Google 搜尋的主要原理是什麼? 請以平易的語言說明。
3. Google PageRank 每差距一分代表網頁的重要性有多大差別?
4. 國內外逐漸觀察到以部落格作為求職履歷的趨勢，你認為這會演變成常態嗎? 請論述。

Lab 10 Personal Portal

1. Enter
http://www.google.com/ig

The Google account is the same as your Blogger account.

2. Rearrange the templates. And perhaps remove blocks that you don't need.

3. Add new stuff. For now add the Google Reader, Google Docs, Google Group, Google Calendar, and GMail. You should be able to see the subscriptions in the Google Reader block of your personal portal.

Lab 9 RSS Reader

1. Enter Google Reader

2. Try the following

• iapblog.blogspot.com
• http://www.cna.com.tw/
  


• New York Times


• http://yourblog.blogspot.com/feeds/comments/default
  

3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.

Lab 8 Web Pageranking

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

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/


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

參考資料:
PageRank 介紹
PageRank 的論文
Google 廣告獲利模式

Homework 3-8-2010

1. 以下這些軟體被稱做社會軟體，請問他們具有哪些特性。
Social software

• blog
• facebook
• twitter
• Digg
• Delicious

2. 全世界第一個瀏覽器是如何誕生的?

3. Tim Berners-Lee 對網際網路發展的貢獻有哪些?

Lab 7 Using Google Chrome

Install Google Browser Google Chrome and Firefox 3.5.8, try a few websites and compare their performance. For example, youtube, blogspot, msn, and yahoo.

the rise of the Internet

Inventor of the internet technology packet switching, Leonard Kleinrock

" Dr. Leonard Kleinrock created the basic principles of packet switching, the technology underpinning the Internet, while a graduate student at MIT. This was a decade before the birth of the Internet which occurred when his host computer at UCLA became the first node of the Internet in September 1969."

Tim Berners-Lee

"In 1989 he invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread." He will serve as a keynote speaker at WWW2008.

W3C

Computer History

Lab 6 Using Firefox

各瀏覽器市場佔有率

Advantages of using Firefox.

Outlines of Lab

1. download Firefox 3.5.8

2. control font size

3. tabbed browsing

4. subscribe to the course blog

5. Using bookmarks to test RSS feed

Help


Hands on

1. Easy control of font size (try ctrl+ & ctrl- as many times as you like)
2. tabbed browsing (try ctrlT)
3. RSS feed, and support of Blog. Use the RSS feed from http://iapblog.blogspot.com/
to subscribe to it. Also subscribe to your own blog.

Note:
If your Firefox didn't work, you should check settings about proxy. It should be set as proxy.cycu.edu.tw at port 3128.

Note: Firefox is based on Mosaic.

Lab 5 Using Labels

Labels are key elements of Web 2.0.
Professional blogs have labels. In this lab, you will learn how to put labels on your blogs to make them look professional.

1. Check into your blog homepage.
2. Enter "自訂"
3. Follow the steps to create Label Block by drag and drops.
4. Get back to your existing blog posts. Fill the blanks at the field Labels (文章的標籤).
5. Save the changes.
6. Back to the blog and check if the labels come up.

Lab 4 發表評論

針對前次作業第二題(如下)，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。

你的評論有一個 URL，請把 URL 列出。

2. Yahoo 目前遭遇了什麼問題? 為什麼? 請閱讀 The end of Yahoo as we knew it (netWorker, Dec. 2008) 然後加以回答。

Homework 3-1-2010

1. Compile a campus directory that tells the locations of major buildings at CYCU. Place the directory on your own blog by posting the code snippet Google Maps
generates.

2. Yahoo 目前遭遇了什麼問題? 為什麼? 請閱讀 The end of Yahoo as we knew it (netWorker, Dec. 2008) 然後加以回答。

Due 3/08/2010 at 19:00

Web Business Models

Before Web 2.0

• B2C (Business to Customers)
• Portal
• Mail
  
• Search Engine
• Transactions
• B2B
• Marketplace

Web 2.0

• Social Software

數位分身 & 社會軟體

Avatar

Digital shadow
Internet footprint

Social software

• blog
• facebook
• twitter
• Digg
• Delicious

List of Social Software

Lab 3: Put CYCU Map on Your Blog

1. The latitude and longitude coordinates of CYCU campus location is +24° 57' 31.02", +121° 14' 28.12" and you can take a look at the satellite image
http://maps.google.com/maps?q=24.9586,+121.24114


2. Enter the CYCU coordinates to produce a code snippet that you can put into your blog. The code is under Share/Export tab.

3. Copy and paste the code snippet into your blog just like you are writing your own blog post. Publish it.

Links:

1. 中原大學校內地圖指引
‎建立者：easy_go100

2.
眾裡尋她千百度 桃園最美的地方在哪裡

手機人機介面新發展 (demo)

目前的手機，PDA介面似乎都還沒有釋放出應有的潛力，更好的人機介面顯然是極為可能 的。

目前美國多所學校，像是 UCSB ，Georgia Tech 都有這類的研究， 他們也做了video demo 放在網路上。

http://www.wired.com/gadgetlab/2009/08/augmented-reality
http://www.youtube.com/watch?v=QoZRHLmUKtM&eurl=http%3A%2F%2Fminstral...

回顧網站歷史

Internet Archive
想知道一個網站過去的長相，就用這個不錯的工具。

Lab 2: 讓你的部落格產生最新回應

在我的部落格可以看到回饋清單的功能，它可以列出最新針對你部落格的回應，因為有些回應可能是針對你一個月前或更舊的部落格文章，而你可能不會再回去看這 些較舊文章是否在最近收到回應，有了清單，此問題迎刃而解。即使針對你最近發表的文章，這個清單功能也很有用，讓你快速瀏覽與閱讀這些回應。

回饋清單功能本身是RSS 2.0 XML，所以也可以用Firefox RSS 或 Google Reader 抓取閱讀，非常方便。

步驟:
1. 進入版面配置，開啟回應
2. 資訊源設定如 http://minstral.blogspot.com/feeds/comments/default
3. 請你的同學給你一個 comment，是否能正確顯示在最新回應上。
4. 實例

Lab 1: 書寫部落格

為什麼鼓勵你書寫部落格
不要讓MSN奪走你的寫作能力

現在如何開始
1. 至 http://www.blogger.com/ 申請, 請以你的學號 (s開頭) 申請免費帳號。

2. 測試一下，可以寫 "Hello World"

3. 建立一個連結到課程網站 http://iapblog.blogspot.com/
建議你使用右上角"自訂"功能，新增一個區塊。一個區塊內可以置放多個連結。

4. 日後請將你的隨堂練習與作業寫在你的 blog, 然後到
Homework 或 Lab 的Comment 登錄作業blog網址就可以了.(實例)
請勿將整個作業直接寫在老師部落格的Comment處。

5. 尊重智慧財產權，引用他人文章須註明出處。並且應該合乎學術常規，以合理的方式引用。

注意事項

a. blog需正確設定時區顯示時間 。
b. 請測試他人可否留言(comment)。以方便留下回應意見。

tip

How to insert a link at the following comment, please use the following HTML code.
<a href="http://yourblog/your-article.html">Your name and this homework</a>