Lab 33 Syndication with RSS 2.0

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

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

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

網際網路應用系統設計: XML: Take a look at islandwide temperatures of Taiwan. What happens if you just want Taoyuan's temperature? If you want to include Taoyua...

網際網路應用系統設計: DOM, Document Object Model

網際網路應用系統設計: DOM, Document Object Model: 操作以下這個網頁 web personalization 網頁個人化 你 會不會覺得有點神奇, 它是如何做到的? 關鍵就在 DOM. With the DOM scripting methods you can: - Create new elements on the fly...

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

網際網路應用系統設計: 政府資訊公開可促進民間產業活絡

網際網路應用系統設計: 政府資訊公開可促進民間產業活絡: 台北好行APP 一點都不好行- Yahoo!奇摩新聞 何不效法美國 data.gov 的做法，政府應該釋放的是公眾資訊，加值應用由民間來作 就好了，一來民間可以做的又快又便宜，二來民間很多人都 可以做，相對於政府只有一個單位做一支程式，民間的加值 應用樣態比較多樣化，競爭的結...

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

可參考 CGI程式入門

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

Purpose of lab: 
Learn 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 26 使用HTML 4 和HTML 5的影音播放

測試以下HTML 4 和HTML 5的影音播放功能

• HTML4 Video
• HTML5 Video

比較兩者有何差異。

Amazing Career Advice For College Grads From LinkedIn's Billionaire Founder

The 3 Secrets Of Highly Successful Graduates

Read more: http://www.businessinsider.com/amazing-career-advice-for-college-grads-from-linkedins-billionaire-founder-2013-5?op=1#ixzz2THcEtNdN

Lab 25 Mash-Up 2 (Calendars)

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

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

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


若原有自己Google行事曆的同學，拍圖時，請注意個人隱私。
不論舊有或新建Google行事曆的同學，請建立至少三個活動在行事曆，
做完此LAB即可刪除。

Lab 24 Mash-Up, Part 1 (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 23 navigation bar

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

The power of social media

Dr Cherian George denied tenure; students, academics express concern

Karin Wahl-Jorgensen (KarinWahlJ) on Twitter

Virtual vs. Real Let's go campaign

Green Peace vs. Shell

Homework 5/6/2013

以 Firefox Accessibility Extension (FAE)檢測Lab 20 Making web pages accessible
依據所列出FAIL項目進行修正，至少兩項。修正完後，使用FAE再次檢測，驗證是否已達至少兩項修正。

繳交作業時間 5/13 18:50 pm

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

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

十年後的身心障礙科技是甚麼

張耀仁: 十年後的身心障礙科技是甚麼: 請大家一起來想十年後的身心障礙科技是甚麼 ? 腦波介面 (不需體感，不需觸控) ? 擴增實境 ( Google 眼鏡 只是想像的起點) ? 情緒感知 科技 (協助自閉症) ? 表情辨識科技 (協助自閉症) ? 認知障礙輔助科技 (失智對策) ? 注意力科技 (克...

Homework 4-29-2013

參考視障者瀏覽網頁的需求，請至少針對五類需求（例如：選定你的語言），每類舉出一個網頁實例（台灣或國外皆可），並列出該網頁關鍵HTML片段，證明該網頁的確符合視障者需求。

繳交作業時間 5/06 18:50 pm

Lab 19 More on HTML

Tables
1. Copy and paste theTables example athttp://www.w3schools.com/html/html_tables.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 Lists 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?

Q:請描述至少一個你做這個lab所遇到的問題，並且你是如何解決這個問題的。

Lab 18 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 17 HTML

HTML 

• Tutorial

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.(請將3.輸出結果拍一張圖)
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.(請將6.輸出結果拍一張圖)

7. Repeat the work for 

• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Links
• HTML Images 

(請將7.輸出結果拍一張圖，共五張)

Homework 4-15-2013

1. 有A, B, C 三個網頁，A引用了B, C，B引用了C，C也引用了 A
計算A,B,C 三個網頁的PageRank，三者PageRank排序為何?

繳交作業時間 4/29 18:50 pm

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

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

請輸入自己的學號做為測試。

並留下至少3張有做此LAB的紀錄。
P.S非火狐瀏覽器一張、火狐瀏覽器一張、程式碼一張

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

請留下至少4張有做此LAB的紀錄。

Lab 14 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量測你常用的三個網站，
並留下至少八張有做此LAB的紀錄。

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

PageRank-Google

PageRank-Google 決定搜尋排名的關鍵技術

Homework 4-8-2013

你被一家手機公司錄用了，請你簡述你想像中的手機設計的流程。


繳交作業時間 4/15 18:50 pm

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

Lab 13 製作線上投影片

參閱特教學校科技輔具應用工作坊議程表，將範例投影片轉為Google投影片，可以線上觀看。

Lab 12 共同編輯文件

閱讀莫拉克風災電腦教室再生計畫，假設這個計畫是由你發起，你要擬定一張志工排班表，以及修復場地值班人員。

• 請製作一張值班人員表，為了提升效率，你決定先擬好空白表格，再開放編輯權限給你的夥伴填寫，請夥伴上網登記輪值時間。
• 製作志工時間登記表，當志工們填寫資料，管理者可以得到一份excel清單，為了保障個人隱私，請不要將excel公開給所有人。

助教教學文件

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

Lab 10 本校網頁簡體版功能

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

談設計

主題: 設計
Ron Baecker 談參與式設計
創造美好的使用經驗 從體貼開始
從手機看設計，藝術，美學
更多設計議題與論述

Homework 3-27-2013

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

繳交作業時間 4/08 18:50 pm

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