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

HTML4

HTML5

HTML播放器是以傳統的HTML語言，用FLASH 檔來播放影片，但現在有些平台沒辦法使用FLASH，而HTML5支援多媒體Audio和Video的標籤，利用<source>方式加載影音格式，而不用傳統的swf格式來進行

Lab 25 Mash-Up 2 (Calendars)

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


Google日曆-中原大學服務學習活動行事曆-html版本進入後按右下角+Google日曆即可訂閱

Lab 24 Mash-Up, Part 1 (Maps)

For housing services, compare the following two websites

美感：

　　　Housing Maps整體介面較乾淨、簡單，但也給人未經設計的感覺

　　　永慶房屋介面內容豐富卻夾雜許多廣告，使人搞不清出重點

直覺性：

　　　Housing Maps直覺性高，目的一目瞭然

　　　永慶房屋內容雜亂

流暢：

　　　Housing Maps操作簡單、方便，只需輸入位置及價錢即可找到需要的房屋

　　　永慶房屋操作普通，卻在條件方面有較詳細的選擇，可以找到最適合自己的房屋

預期反應：

　　　Housing Maps內容簡單方便且操作容易上手，給人的感覺很流暢

　　　

　　　永慶房屋雖然起始頁面給人雜亂的感覺，但在操作尋找的條件做得非常詳細，可能需

　　　要真正操作過一次才會給其較高的評價

Lab 23 navigation bar

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

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.

Before

After

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.

Before

After

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.

1.Yahoo

2.CYCU

3.Facebook