2012年11月26日 星期一
2012年11月12日 星期一
Lab 24 使用HTML 4 和HTML 5的影音播放
HTML4 video需要用flash來播放
HTML5的目的在於讓網路開發者能夠擺脫對於各種第三方外掛程式的依賴，加入了許多新的語言標記和格式支援，許多必須加上外掛後才能夠達到的功能，未來只要利用HTML5這個開放標準就可以達成，例如HTML5將支援視訊標記，讓瀏覽器不需依靠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.
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月11日 星期日
Homework 11/5/2012
1. 觀看
場域應用與服務設計: "科技人如何做通俗演講" (4分鐘)
撰寫200演講摘要
從自己有過的教工程師溝通課的經歷引入，並提出工程師和科學家與普通民眾之間溝通困難的問題，提出了幾個可以幫助改善的建議。科學家工程師是改變世界的人，但是他們需要將他們的思想和民眾溝通。首先是找到你的研究和生活的相關之處，才會讓人們覺得 這些東西是和自己相關聯的，這樣才能激起人們的興趣。其次少用術語，換用更簡單的詞語進行描述，可以考慮採用故事例子類比什麼的……反正就是溝通技巧吧，怎麼說話能讓人更容易理解和接受。還有PPT展示時不要用一張上面逐條羅列的那種PPT，那樣會使人們產生厭煩。而要用圖片和實例相結合，然後字少而集中的PPT。
2. 你覺得以後上台作簡報，會做些什麼樣改變？
我覺得不能像上述演講者所說的「不要用條列式的PTT」，要依據你所在的地方、人、事物，而去改變你所要演講的方式，條列式只是把所要演說的重點摘要，而圖片是則是用來解釋事物。我應該不會有什麼太大的改變，因為我們還是要依照所站的地方的人事物而去製作PPT，而不是一昧的盲從改變。
2012年11月5日 星期一
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.
Date: 11/5/2012 20:25 PM
URL: http://tw.yahoo.com/
Date: 11/5/2012 20:26 PM
URL: http://www.facebook.com/login.php
Date: 11/5/2012 20:29 PM
URL: http://tw.msn.com/?rd=1&ucc=TW&dcc=TW&opt=0
Report the summary of all the errors and warnings for each site.
yahoo奇摩
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 |
| Warn | 1 | Avoid using images that are smaller than 16 pixels by 16 pixels as links. | Links |
| 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 | 19 | 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 | 53 | 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:25 PM
URL: http://tw.yahoo.com/
FACEBOOK
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 | 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 |
| Check | 1 | Most web pages should contain at least one navigation bar. | Menu and Navigation Bars |
| Fail | 1 | 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 | 1 | The u element must not be used to underline text content, instead use heading (h1-h6) elements for heading text or the em or strong element for emphasizing words, phrases or sentences. | Text Styling |
| Warn | 1 | The character encoding was not specified. | W3C Specifications |
| Fail | 2 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Warn | 2 | The content of the headings of the same level within the same section should be unique. | Headings |
| Warn | 7 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Fail | 10 | 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 |
Date: 11/5/2012 20:26 PM
URL: http://www.facebook.com/login.php
MSN
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 |
| Fail | 1 | The page should contain at least one and no more than two h1 elements. | Headings |
| Fail | 16 | Every frame element must have a title attribute with content that describes the purpose of the frame. | Frames |
| Fail | 35 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Warn | 1 | Avoid using images that are smaller than 16 pixels by 16 pixels as links. | Links |
| Warn | 3 | 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 | 4 | Each subheading element (h2..h6) should have text content exclusive of the alt text of any img elements it contains. | Headings |
| Warn | 13 | Hidden or empty frames should not be used. | Frames |
| Warn | 22 | If a link includes an img element and text content, and the words in the alt attribute content of the img element match the words in the text content of the link, then the alt attribute content should be set to be empty. | Links |
| Warn | 29 | 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 | 71 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Warn | 72 | Ensure that links that point to different HREFs use different link text. | Links |
| Warn | 158 | Ensure that links that point to the same HREF use the same link text. | Links |
Date: 11/5/2012 20:29 PM
URL: http://tw.msn.com/?rd=1&ucc=TW&dcc=TW&opt=0
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.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站
2. Fix the failures you found.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站
有修正過後的GOOGLE
Q:請描述至少一個你做這個lab所遇到的問題，並且你是如何解決這個問題的。
老師，我不知道其他怎麼改，也根本不知道是錯哪裡，我只有修改lang的那6個，不過那是問助教才知道的。
Lab 20 More on HTML
Tables
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?
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?
訂閱：
文章 (Atom)