2012年11月26日 星期一

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所遇到的問題,並且你是如何解決這個問題的。

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

2012年11月12日 星期一

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

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


比較兩者有何差異。


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.

Homework 11/5/2012


1. 觀看
場域應用與服務設計: "科技人如何做通俗演講" (4分鐘)
撰寫200演講摘要

這篇演講題目就很清楚的說了,科技人如何做一個通俗的演講,演講者在一開始就提到他去一間州立大學教授一們有關溝通的課程,對象是一群工程學系的學生,他說他非常驚嚇,就像艾莉絲夢遊仙境一般,艱深的詞語想法讓他很驚奇,但是要打開這扇交流的門要有很好的溝通。
第二段提到為了改變跟改善這個世界,需要這些工程師跟科技發展,但其他人如果無法與他們溝通那工程師的所做對世界的影響就沒那麼有意義。
第一個方法就是把所研究的東西說明與生活上哪些有關,而不是說你在研究什麼,第二個方法則是運用較通俗的字眼,避免掉一些專業的術語跟詞彙。
他希望可以當作是打開那扇門的鑰匙。

2. 你覺得以後上台作簡報,會做些什麼樣改變?

之前就有人大概講過要如何作簡報,我覺得簡報內容要精簡,如果東西都打在上面那聽者自己看就好你只不過是在唸上面的東西,相對的也不能夠過於精簡,聽者無法記得你所講的所有東西,簡報如果只是個標題那大可不需要,簡報希望是能夠用圖片、數據、圖表列表。另用在講話時盡量用生活用語跟實際上的例子做為連結,最好能夠有類似案例作說明或比喻,畢竟聽故事比枯燥的解說有趣多了。

2012年11月5日 星期一

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 RuleViolationsMessageClass
Check Title should indicate both name of the site and topic of the page. Title 
Warn 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 Avoid placing small links close together. Links 
Check 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