2010年6月14日 星期一
2010年6月7日 星期一
2010年5月31日 星期一
2010年5月24日 星期一
Lab 29: DOM
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.
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.
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.
2010年5月17日 星期一
2010年5月10日 星期一
Homework5
一.
google docs 的表單、文件、報表
二.
網頁高度互動性設計是有可能將無障礙設計納入考量的。World Wide Web Consortium最近編制了兩份有關網頁無障礙的草稿文件，第一份 Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities ( http://www.w3.org/WAI/mobile/experiences ) 列出了為殘疾人士設計網站和為流動設備設計網站的一些共同需求。在推動無障礙網頁設計的角度而言，此文件可使網頁設計者了解製作無障礙網頁除了使弱勢社群能受益以外，亦對一般人士使用流動設備如手提電話、 PDA、MID等瀏覽網站帶來方便。另一份文件則講述了如何使新一代Web 2.0網站(RIA)加入無障礙元素 Accessible Rich Internet Applications (WAI-ARIA) Version 1.0)
WAI-ARIA即W3C Web Accessibility Initiative Accessible Rich Internet Applications，中文翻譯為「無障礙富互聯網應用程序」。同時W3C制定了WAI-ARIA角色標準。Google前不久宣佈將大力支持WAI-ARIA，而且其Google reader的屏幕閱讀功能即是通過WAI-ARIA實現的。目前，Firefox已經開始支持WAI-ARIA，IE8部分支持。Safari 4也開始支持WAI-ARIA角色。
隨著Rich Internet Applications,RIA和XMLHttpRequest的出現，更新網頁內容不需要等待重新刷新網頁的時間，而是網頁自動更新。還有，Web Accessibility Initiative 的Accessible Rich Internet Applications suite這一類新興的標準，讓螢幕閱讀器可以解讀豐富網際網路應用程式，並與之互動。這些新興的標準與HTML 5 一起可以更好地支援，視訊、音訊、動畫以及表格。
三.
1.
美國哥倫比亞大學的「電腦繪圖與使用者介面實驗室」製作了一套實驗式室外系統，用來協助觀光客遊覽大學校園。使用者背包上的筆記型電腦會輸出電腦影像，疊現在外型長得像墨鏡的光學式透視顯示器上，而頭頂上的GPS接收器則會隨時追蹤使用者的位置，隨時校正虛擬影像應呈現的位置與方向。
2.
美國哥倫比亞大學實驗室製作了一套關於布隆明達精神病院（哥倫比亞大學現有校地先前的使用者）的三維影像歷史紀錄片，影像顯示的位置就在它原來的地點上。使用者可以一面看紀錄片，一面透過手持式顯示器取得額外的資訊，這份資訊提供關於布隆明達精神病院歷史的互動式年表。可看到校園中人來人往，而後面則為精神病院的虛擬影像。
3.
美國中弗羅里達大學的研究人員示範AR在醫學上的應用。系統把膝關節的三維模型疊合在使用者看到的女人腿部畫面上，研究人員使用紅外線發光二極體來追蹤腿部的位置。女人彎曲膝部的時候，電腦就會繪出骨骼移動的方式。
google docs 的表單、文件、報表
二.
網頁高度互動性設計是有可能將無障礙設計納入考量的。World Wide Web Consortium最近編制了兩份有關網頁無障礙的草稿文件，第一份 Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities ( http://www.w3.org/WAI/mobile/experiences ) 列出了為殘疾人士設計網站和為流動設備設計網站的一些共同需求。在推動無障礙網頁設計的角度而言，此文件可使網頁設計者了解製作無障礙網頁除了使弱勢社群能受益以外，亦對一般人士使用流動設備如手提電話、 PDA、MID等瀏覽網站帶來方便。另一份文件則講述了如何使新一代Web 2.0網站(RIA)加入無障礙元素 Accessible Rich Internet Applications (WAI-ARIA) Version 1.0)
WAI-ARIA即W3C Web Accessibility Initiative Accessible Rich Internet Applications，中文翻譯為「無障礙富互聯網應用程序」。同時W3C制定了WAI-ARIA角色標準。Google前不久宣佈將大力支持WAI-ARIA，而且其Google reader的屏幕閱讀功能即是通過WAI-ARIA實現的。目前，Firefox已經開始支持WAI-ARIA，IE8部分支持。Safari 4也開始支持WAI-ARIA角色。
隨著Rich Internet Applications,RIA和XMLHttpRequest的出現，更新網頁內容不需要等待重新刷新網頁的時間，而是網頁自動更新。還有，Web Accessibility Initiative 的Accessible Rich Internet Applications suite這一類新興的標準，讓螢幕閱讀器可以解讀豐富網際網路應用程式，並與之互動。這些新興的標準與HTML 5 一起可以更好地支援，視訊、音訊、動畫以及表格。
三.
1.
美國哥倫比亞大學的「電腦繪圖與使用者介面實驗室」製作了一套實驗式室外系統，用來協助觀光客遊覽大學校園。使用者背包上的筆記型電腦會輸出電腦影像，疊現在外型長得像墨鏡的光學式透視顯示器上，而頭頂上的GPS接收器則會隨時追蹤使用者的位置，隨時校正虛擬影像應呈現的位置與方向。
2.
美國哥倫比亞大學實驗室製作了一套關於布隆明達精神病院（哥倫比亞大學現有校地先前的使用者）的三維影像歷史紀錄片，影像顯示的位置就在它原來的地點上。使用者可以一面看紀錄片，一面透過手持式顯示器取得額外的資訊，這份資訊提供關於布隆明達精神病院歷史的互動式年表。可看到校園中人來人往，而後面則為精神病院的虛擬影像。
3.
美國中弗羅里達大學的研究人員示範AR在醫學上的應用。系統把膝關節的三維模型疊合在使用者看到的女人腿部畫面上，研究人員使用紅外線發光二極體來追蹤腿部的位置。女人彎曲膝部的時候，電腦就會繪出骨骼移動的方式。
2010年5月3日 星期一
Lab 22: Mash-up 2 (Maps)
7house速度較慢，但較直覺性，一開始便可以直接看到圖片，較具美感，預期反應較好，因為我比較喜歡先看
到圖片
HousingMaps以地圖分類，再細分地點，之後才會看到圖片，速度較快
到圖片
HousingMaps以地圖分類，再細分地點，之後才會看到圖片，速度較快
2010年4月19日 星期一
2010年4月18日 星期日
Homework4
1. 依據 What is web accessibility，試針對三種不同障別舉出三種無障礙設計方式，並請探討跨障別設計是否可行?(也就是所謂的通用設計)
視障聽障：
網頁內各種圖形、圖表、影像，應加入替代性的說明文字，讓視障者或聽障者可以使用其他替代方式瞭解圖形所代表的意義。
對於網頁中非文字的聽覺與視覺內容，應提供相等內容的替代文字(如透過"alt"、"longdesc")。視覺的內容包含圖片、影像地圖區域、applets、objects、ASCll art等，而聽覺的內容包含聲音、音樂與各項音效等。
肢體障礙或認知障礙：
在網頁的重要資訊上應避免使用炫光、快速動態影像等多媒體效果，以免造成肢體障礙者或認知障礙者的不便。確保會移動、閃爍、捲動或自動更新的物件或網頁能暫停或停止。確保文件簡單、清楚，讓使用者更容易瞭解網頁內容。
身心障礙：
網站內各網頁的瀏覽機制應考量可及性操作的需求。身心障礙者因為其障礙的差異，在使用特殊上網裝置瀏覽網頁時，其瀏覽操作不如市面上一般瀏覽器那麼方便和靈活，因此網站瀏覽機制的設計應力求簡單清楚，讓網頁使用者可以依其需求來瀏覽網站。
例如：為你的網站提供網站地圖或整體性的簡介、避免在網頁上使用ACSII文字藝術、設計並確
保有意義的超連結說明，便於網頁內容的閱讀
跨障別設計是可行的，例如有視障無智障的人，更能理解清楚簡單的網頁設計。無障礙網站的設計不僅是針對身心障礙者的使用問題，透過這樣的設計亦可使一般人更方便地使用網站。例如，在網站上提供圖片替代文字說明，可幫助視障者藉由替代文字說明獲取圖片資訊；對於一般民眾而言，當網站上的圖片無法呈現時，也可經由圖片的替代文字說明獲得資訊。因此提高網路設計的可及性（Accessibility），對於各種障礙者及一般民眾瀏覽網頁都會有所幫助。
2. 依據 Tutorial，HTML 3.2 與 HTML 4.0 最大差別在哪裡?
在HTML 4.0中可以從 HTML文件去除所有格式，並儲存在一個單獨的樣式表。HTML 4.0的所有標籤增加了id以及事件擷取屬性(例如：onclick)。另一個差別就是CSS的使用，除了使用CSS才能達到的效果之外，一般HTML 4.0的網頁大多仍舊使用原本HTML 3.2就已經存在的格式化標籤(例如：、標籤等等)。
DIV 元素在HTML 3.2 中有定義，但HTML 3.2 中只有ALIGN 屬性能相容。HTML 4.0在屬性中加入CLASS、STYLE、和ID 屬性。DIV 可以包含段落、標題、表格甚至其他部分。這使DIV 便於建立不同集成的類，如章節、摘要或備註。
3. 依據永恆的數位分身的說法，試舉出一個實例或反例。
實例：
現在幾乎每個有在使用網路的人至少都會有一個屬於自己的ID，在MSN、噗浪、facebook等社交網站，只要有加你好友的人，一看見這組ID，便能知道這是你，這些帳號假如持續使用，它們是不會消失的，因此不怕失去聯繫。
反例：
一個人可以申請好幾個帳號，有些人會利用這些多重帳號張貼一些不實的廣告，甚至亂加你好友，藉以推銷產品。有些人的帳號甚至會被盜用散播病毒，或是入侵他人隱私，例如E-MAIL帳號。
視障聽障：
網頁內各種圖形、圖表、影像，應加入替代性的說明文字，讓視障者或聽障者可以使用其他替代方式瞭解圖形所代表的意義。
對於網頁中非文字的聽覺與視覺內容，應提供相等內容的替代文字(如透過"alt"、"longdesc")。視覺的內容包含圖片、影像地圖區域、applets、objects、ASCll art等，而聽覺的內容包含聲音、音樂與各項音效等。
肢體障礙或認知障礙：
在網頁的重要資訊上應避免使用炫光、快速動態影像等多媒體效果，以免造成肢體障礙者或認知障礙者的不便。確保會移動、閃爍、捲動或自動更新的物件或網頁能暫停或停止。確保文件簡單、清楚，讓使用者更容易瞭解網頁內容。
身心障礙：
網站內各網頁的瀏覽機制應考量可及性操作的需求。身心障礙者因為其障礙的差異，在使用特殊上網裝置瀏覽網頁時，其瀏覽操作不如市面上一般瀏覽器那麼方便和靈活，因此網站瀏覽機制的設計應力求簡單清楚，讓網頁使用者可以依其需求來瀏覽網站。
例如：為你的網站提供網站地圖或整體性的簡介、避免在網頁上使用ACSII文字藝術、設計並確
保有意義的超連結說明，便於網頁內容的閱讀
跨障別設計是可行的，例如有視障無智障的人，更能理解清楚簡單的網頁設計。無障礙網站的設計不僅是針對身心障礙者的使用問題，透過這樣的設計亦可使一般人更方便地使用網站。例如，在網站上提供圖片替代文字說明，可幫助視障者藉由替代文字說明獲取圖片資訊；對於一般民眾而言，當網站上的圖片無法呈現時，也可經由圖片的替代文字說明獲得資訊。因此提高網路設計的可及性（Accessibility），對於各種障礙者及一般民眾瀏覽網頁都會有所幫助。
2. 依據 Tutorial，HTML 3.2 與 HTML 4.0 最大差別在哪裡?
在HTML 4.0中可以從 HTML文件去除所有格式，並儲存在一個單獨的樣式表。HTML 4.0的所有標籤增加了id以及事件擷取屬性(例如：onclick)。另一個差別就是CSS的使用，除了使用CSS才能達到的效果之外，一般HTML 4.0的網頁大多仍舊使用原本HTML 3.2就已經存在的格式化標籤(例如：、標籤等等)。
DIV 元素在HTML 3.2 中有定義，但HTML 3.2 中只有ALIGN 屬性能相容。HTML 4.0在屬性中加入CLASS、STYLE、和ID 屬性。DIV 可以包含段落、標題、表格甚至其他部分。這使DIV 便於建立不同集成的類，如章節、摘要或備註。
3. 依據永恆的數位分身的說法，試舉出一個實例或反例。
實例：
現在幾乎每個有在使用網路的人至少都會有一個屬於自己的ID，在MSN、噗浪、facebook等社交網站，只要有加你好友的人，一看見這組ID，便能知道這是你，這些帳號假如持續使用，它們是不會消失的，因此不怕失去聯繫。
反例：
一個人可以申請好幾個帳號，有些人會利用這些多重帳號張貼一些不實的廣告，甚至亂加你好友，藉以推銷產品。有些人的帳號甚至會被盜用散播病毒，或是入侵他人隱私，例如E-MAIL帳號。
2010年4月12日 星期一
2010年3月29日 星期一
訂閱：
文章 (Atom)