1. 進入你的部落格，登入，選擇設計
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)
Q:請描述至少一個你做這個lab所遇到的問題，並且你是如何解決這個問題的。
A:尋找小工具。
2012年11月26日 星期一
2012年11月12日 星期一
Lab 24 使用HTML 4 和HTML 5的影音播放
測試以下HTML 4 和HTML 5的影音播放功能
比較兩者有何差異。
HTML5 與HTML 4的不同之處
以下為大略的不同之處，與例子：- 檔案類型聲明（
<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。 - 新的解析順序：不再基於SGML。
- 新的元素：
section,video,progress,nav,meter,time,aside,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,mark,output,rp,rt,ruby,source,summary,wbr。 input元素的新類型：date,email,url等等。- 新的屬性：
ping（用於a與area）,charset（用於meta）,async（用於script）。 - 全域屬性：
id,tabindex,repeat。 - 新的全域屬性：
contenteditable,contextmenu,draggable,dropzone,hidden,spellcheck。 - 移除元素：
acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,noframes,strike,tt。
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.
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.
2012年11月5日 星期一
Homework 11/5/2012
場域應用與服務設計: "科技人如何做通俗演講" (4分鐘)
撰寫200演講摘要
無法使用一般民眾可以理解通俗的話語傳達專業知識的概念是很多科技人所面臨共同的問題。無法簡單的表達概念通常來自於對專業知識了解的不足、缺少練習的機會、使用過度深奧的學術名詞及錯誤的呈現方式(such as bullet point) 。若能將所要表達的知識以圖像的方式並去除艱深的術語，在多闡述與一般民眾相關的部分，便能得到很好的溝通效果。
2. 你覺得以後上台作簡報，會做些什麼樣改變？
1.要直視聽眾，而不能只看手邊的電腦或小抄
2.講話速度需放慢 聲音放大 咬字清楚
Lab 22 Firefox Accessibility Extension
Lab 22 Firefox Accessibility Extension
Report the summary of all the errors and warnings for each site.
1.雅虎奇摩
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Warn | 1 | The words contained in each h1 element should match a subset of the words contained in the title element. Words (%1) in h1 elements should also be in the title element. | Title |
| Fail | 1 | Each heading element (h1..h6) must have text content. | Headings |
| Check | 1 | Heading content should be concise (usually 65 or fewer characters in length). | Headings |
| Fail | 1 | Every frame element must have a title attribute with content that describes the purpose of the frame. | Frames |
| Warn | 1 | If the content of the alt attribute is not empty it should contain at least 7 characters and less than 90 characters. The text should provide people who cannot see the image orientation to the content and purpose of the image in the website. | Images |
| Warn | 2 | Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2. | Menu and Navigation Bars |
| Warn | 4 | Every onClick event handler should be on a focusable element. | Events |
| Warn | 8 | The content of the headings of the same level within the same section should be unique. | Headings |
| Fail | 20 | Each img element should have alt text. | Images |
| Fail | 22 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Warn | 35 | Ensure that links that point to the same HREF use the same link text. | Links |
| Warn | 56 | Ensure that links that point to different HREFs use different link text. | Links |
| Warn | 105 | Avoid using text links that are shorter than four 4 characters in length. | Links |
Date: 11/5/2012 20:11 PM
URL: http://tw.yahoo.com/
2.PCHOME線上購物
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Check | 1 | Most web pages should contain at least one navigation bar. | Menu and Navigation Bars |
| Warn | 1 | Avoid using images that are smaller than 16 pixels by 16 pixels as links. | Links |
| Fail | 1 | Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. | Language Changes |
| Warn | 1 | If the content of the alt attribute is not empty it should contain at least 7 characters and less than 90 characters. The text should provide people who cannot see the image orientation to the content and purpose of the image in the website. | Images |
| Warn | 3 | The content of the headings of the same level within the same section should be unique. | Headings |
| Fail | 5 | Each img element should have alt text. | Images |
| Fail | 6 | The b element must not be used to bold text content, instead use heading (h1-h6) elements for heading text or the strong element for emphasizing words, phrases or sentences. | Text Styling |
| Fail | 12 | The font and center elements must not be used for text styling, instead use structural markup should be used with CSS for styling. | Text Styling |
| Fail | 33 | The i element must not be used to italicize text content, instead use heading (h1-h6) elements for heading text or the em element for emphasizing words, phrases or sentences. | Text Styling |
| Fail | 44 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Warn | 71 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Warn | 105 | Ensure that links that point to different HREFs use different link text. | Links |
| Warn | 202 | Ensure that links that point to the same HREF use the same link text. | Links |
Date: 11/5/2012 20:12 PM
URL: http://shopping.pchome.com.tw/index/
3.GOOGLE NEWS
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Fail | 1 | The page should contain at least one and no more than two h1 elements. | Headings |
| Fail | 1 | Every frame element must have a title attribute with content that describes the purpose of the frame. | Frames |
| Warn | 1 | Hidden or empty frames should not be used. | Frames |
| Warn | 1 | Every onClick event handler should be on a focusable element. | Events |
| Fail | 4 | Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. | Language Changes |
| Warn | 5 | Every img element that is less than 8 pixels high or 8 pixels wide OR has an empty alt attribute value should be removed and CSS techniques should be used for styling content. | Images |
| Warn | 34 | Ensure that links that point to the same HREF use the same link text. | Links |
| Warn | 35 | Ensure that links that point to different HREFs use different link text. | Links |
| Fail | 36 | The b element must not be used to bold text content, instead use heading (h1-h6) elements for heading text or the strong element for emphasizing words, phrases or sentences. | Text Styling |
| Warn | 43 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Fail | 44 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Warn | 58 | One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. | Tables |
| Fail | 77 | Two or more levels of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. | Tables |
Date: 11/5/2012 20:12 PM
URL: https://news.google.com/
Q:請描述至少一個你做這個lab所遇到的問題，並且你是如何解決這個問題的。
A:沒有遇到問題。
Lab 21 Making web pages accessible
Lab 21 Making web pages accessible
2. Fix the failures you found.
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Warn | 1 | The words contained in each h1 element should match a subset of the words contained in the title element. Words (%1) in h1 elements should also be in the title element. | Title |
| Check | 1 | Heading content should be concise (usually 65 or fewer characters in length). | Headings |
| Warn | 1 | Every onClick event handler should be on a focusable element. | Events |
| Warn | 1 | One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. | Tables |
| Fail | 1 | Two or more levels of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. | Tables |
| Warn | 1 | The character encoding was not specified. | W3C Specifications |
| Warn | 2 | Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2. | Menu and Navigation Bars |
| Fail | 2 | Every frame element must have a title attribute with content that describes the purpose of the frame. | Frames |
| Warn | 2 | Hidden or empty frames should not be used. | Frames |
| Fail | 3 | The font and center elements must not be used for text styling, instead use structural markup should be used with CSS for styling. | Text Styling |
| Fail | 6 | Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. | Language Changes |
| Warn | 7 | Ensure that links that point to the same HREF use the same link text. | Links |
| Warn | 15 | Avoid using text links that are shorter than four 4 characters in length. | Links |
Date: 11/5/2012 20:06 PM
URL: http://iapblog.blogspot.tw/2012/11/lab-21-making-web-pages-accessible.html
參考資料
Q:請描述至少一個你做這個lab所遇到的問題，並且你是如何解決這個問題的。
A:安裝上遇到了無法開啟的問題，重新啟動程式並重新安裝後便解決了。
Lab 20 More on HTML
Lab 20 More on HTML
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所遇到的問題，並且你是如何解決這個問題的
A: 沒有遇到問題
訂閱：
文章 (Atom)