Lab 39 Social Services based on Internet

網際網路除了商業用途與學術用途之外，還有協助政府服務，社會服務，社會運動等功能，甚至可以作為政治動員。請論述網際網路在社會服務，社會運動的可能性，如果可能，請舉例說明。


全國特殊教育資訊網

有關於特教方面的資訊分享

社團法人中華樂扶(Love)社會服務協會全球資訊網

有關身障人士的課程   也舉辦許多的活動跟競賽

青年社會服務協會

培訓幹部  搭配志願  進行青年的培訓以及服務

Lab 37 Google Analytics

流量介面




程式碼

Lab 38 製作一個報名網站

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

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

俐落的報名網站。

報名網址

報名完更新報表

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

問題 Listing3 有錯誤 找很久  發現是小於符號被誤判成結束括號  之後的問題是小於符號<另一種打法是 &lt;

Lab 36 Syndication with RSS 2.0

問題一開始不知道是把網址打進去  後來知道了

Lab 34 XML

what is XML?

可延伸標記式語言（英語：eXtensible Markup Language，簡稱:XML），是一種標記式語言。標記指電腦所能理解的訊息符號，透過此種標記，電腦之間可以處理包含各種訊息的文章等。如何定義這些標記，既可以選擇國際通用的標記式語言，比如HTML，也可以使用像XML這樣由相關人士自由決定的標記式語言，這就是語言的可延伸性。

 what is XSLT?

可擴展樣式表轉換語言（Extensible Stylesheet Language Transformations，簡稱XSLT）是一種對XML檔案進行轉化的語言。

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

問題  一開始按transform都沒有反應  後來發現有個中括號沒改成大於小於符號

Lab 28 Lab Form and Action

修改成POST

POST跟GET的差異

難處在於一開始不知道要幹嘛  經助教指點才了解

Lab 27 Mash-Up 2 (Calendars)

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

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

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

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

一開始找不到在哪裡  後來發現就在右下角

Lab 26 Mash-Up, Part 1 (Maps)

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

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

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

1.  結合地圖 以及利用表單拉選的方式呈現

     資訊較多但也比較沒整理雜亂 但是可用地圖選擇符合自己的機能需求

2. 利用標籤分類以及搜尋的方式呈現  較有整理跟房屋資訊 

Lab 25 navigation bar

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

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

一開始不知道可以一次用很多個連結,後來發現只要空開就可以全部連結放一起

Lab 24 使用HTML 4 和HTML 5的影音播放

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

• HTML4 Video
• HTML5 Video

比較兩者有何差異。


HTML5

今天，大多數視頻都是通過插件（如Flash）所示。然而，不同的瀏覽器可能有不同的插件。

HTML5定義了一個新的元素，它指定了一個標準的方式，在網頁上：<video>元素嵌入視頻/電影。

HTML4

• 如果瀏覽器不支持Flash，視頻無法播放
• iPad和iPhone不支持Flash視頻
• 如果您的視頻轉換為另一種格式，它仍然不能播放所有的瀏覽器

需要另外嵌入多媒體元素

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

Accessibility Extension

List of Accessibility Issues Summary

beta Rule	Violations	Message	Class
Check	1	Title should indicate both name of the site and topic of the page.	Title
Warn	2	Each nested table, map with area, ol or ul element that appears to be a navigation bar or menu should be immediately preceded by a header element (h2..h6 -or- role=heading).	Menu and Navigation Bars
Check	4	Avoid placing small links close together.	Links
Check	6	Set font sizes using relative measurements (not px, pt, in, cm, mm).	Text Sizing
Fail	10	Contrast ratio is below the minimal acceptable level (3:1)	Colour Contrast
Warn	19	Contrast ratio is below the optimal acceptable level (7:1)	Colour Contrast

Date: 11/5/2012 20:34 PM
URL: http://www.google.com/webhp?hl=zh-TW&tab=ww


對比度低於最小水平3:1   改得非常有難度

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.

Youtube

Facebook

Yahoo

Lab 20 More on HTML

Table

List

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

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.

Lab 17 HTML

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.

HTML Elements

HTML Headings

HTML Links

HTML Images 

HTML Paragraphs

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.

Lab 15 Greasemonkey

1.   Install Greasemonkey 0.9.1. Check the lower right corner of your Firefox and you should find a monkey at the right.

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.