請參考以下範例，製作一個報名網站。
http://eecscycu.blogspot.com/2010/12/99.html
2012年6月11日 星期一
Lab 42 製作一個報名網站
社團，學校，公司舉辦各種活動，少不了一個報名網站。利用免費的Google 文件加上Google 部落格，就可以製作一個乾淨俐落的報名網站。
請參考以下範例，製作一個報名網站。
http://eecscycu.blogspot.com/2010/12/99.html
請參考以下範例，製作一個報名網站。
http://eecscycu.blogspot.com/2010/12/99.html
Lab 41 Google Analytics
1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
3. Check the results to see the daily traffic chart, the recent visitors by locations.
Lab 40 Speed Test
測試中原大學與中央大學對外頻寬速度。
Tool: Speedtest
cycu proxy: proxy.cycu.edu.tw:3128
ncu proxy.csie.ncu.edu.tw:3128
no proxy
Tool: Speedtest
cycu proxy: proxy.cycu.edu.tw:3128
ncu proxy.csie.ncu.edu.tw:3128
no proxy
2012年6月4日 星期一
Lab 38 XML (2)
1. Register and Download Xray, an XML, XSLT editor and processor.
2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results
use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
3. View the formatted HTML file.
2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results
use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
3. View the formatted HTML file.
4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
compute the team standings in a table.
5. View the formatted HTML file.
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
compute the team standings in a table.
5. View the formatted HTML file.
Lab 37 XML
1. Register and Download Xray, an XML, XSLT editor and processor.
2. Before you do this lab,all the first you must know is what is XML? what is XSLT? please write down your answer.
Answer：
XML 用來傳送資料，相當於data。
而XSLT就是將XML裡的資料，制定出要如何呈現的規格。
3. Given the the XML file and XSLT file ,use Xray to do the transformation of the XML into HTML.You have to replace [ with <.4. View the formatted HTML file.
2012年5月28日 星期一
Lab 36 Programming in DOM
1. Open KompoZer
2. Based on the code as in
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 35 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.
Lab 34 Hand code a form
Before you do this lab, you must understand what is CGI(Common Gateway Interface) and Form.
1. So please search the answer and post your opinion in your blog.
2. Hand code a HTML or use KompoZer to edit an HTML so that the webpage can send a request to Google like
http://maps.google.com/maps?q=24.9586,+121.24114
Use Form CGI that includes action, input, and submit.
Try a few different coordinates..
2012年5月20日 星期日
Lab 33 Lab Form and Action
1. Copy the search box of this search page,inlcuding radio buttons, text input, and submit button.
2. Open your KompoZer HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.
5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.
6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)
9. Run your HTML by Firefox. What do you get?
2. Open your KompoZer HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.
5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.
6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)
7. Save your file on your computer. Run your HTML by Firefox. What do you get?
8. Set method as "post"
2012年5月14日 星期一
Lab 30 Mash-Up, Part 2 (Maps)
真實案例
96年度全人關懷獎 -崔媽媽科技服務工作團隊
For housing services, compare the following two websites
http://www.housingmaps.com
http://yungching.housefun.com.tw/
List the differences in the user interface design and usability. Make comments
by your use experiences.
比較: 美感，直覺性，流暢，預期反應
96年度全人關懷獎 -崔媽媽科技服務工作團隊
For housing services, compare the following two websites
http://www.housingmaps.com
http://yungching.housefun.com.tw/
List the differences in the user interface design and usability. Make comments
by your use experiences.
比較: 美感，直覺性，流暢，預期反應
2012年5月7日 星期一
Lab 26 使用HTML 4 和HTML 5的影音播放
HTML 4
HTML 5
兩者的差別在於 Html 4 需要Flash支援， Html 5 取決於瀏覽器本身問題。
相較之下，Html 5的優勢比較大。
Lab 24 Firefox Accessibility Extension
1. Yahoo雅虎奇摩
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 |
| Warn | 8 | The content of the headings of the same level within the same section should be unique. | Headings |
| 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 |
| Fail | 21 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Check | 1 | Heading content should be concise (usually 65 or fewer characters in length). | Headings |
| Warn | 4 | Every onClick event handler should be on a focusable element. | Events |
| Warn | 32 | Ensure that links that point to the same HREF use the same link text. | Links |
| Warn | 61 | Ensure that links that point to different HREFs use different link text. | Links |
| 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 | 21 | Each img element should have alt text. | Images |
| Fail | 1 | Each heading element (h1..h6) must have text content. | Headings |
| Warn | 100 | Avoid using text links that are shorter than four 4 characters in length. | Links |
Date: 5/7/2012 20:02 PM
URL: http://tw.yahoo.com/
2. 中原大學
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 | Heading elements (h1..h6) should be used for structuring information on the page. | 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 | 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 |
| Fail | 1 | Each img element should have alt text. | Images |
| Fail | 1 | A DOCTYPE declaration was not found. | W3C Specifications |
| Warn | 3 | One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. | Tables |
| Warn | 4 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Warn | 5 | Ensure that links that point to the same HREF use the same link text. | Links |
| Fail | 7 | 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 | 14 | 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 | 67 | 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 |
Date: 5/7/2012 20:06 PM
URL: http://www.cycu.edu.tw/
3. 中華民國總統府
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 | Heading elements (h1..h6) should be used for structuring information on the page. | Headings |
| Check | 1 | Most web pages should contain at least one navigation bar. | Menu and Navigation Bars |
| 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 |
| Warn | 1 | The character encoding was not specified. | W3C Specifications |
| Warn | 2 | 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 | 3 | Avoid using images that are smaller than 16 pixels by 16 pixels as links. | Links |
| Warn | 8 | Ensure that links that point to different HREFs use different link text. | Links |
| Warn | 8 | 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 |
| Fail | 16 | 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 | 18 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Warn | 52 | Ensure that links that point to the same HREF use the same link text. | Links |
Date: 5/7/2012 20:09 PM
URL: http://www.president.gov.tw/
Lab 23 Making web pages accessible
1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com
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 | 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 | 1 | Hidden or empty frames should not be used. | Frames |
| Fail | 1 | 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 | 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 |
| Fail | 2 | 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 |
| Warn | 4 | Ensure that links that point to the same HREF use the same link text. | Links |
| Fail | 5 | 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 | 15 | Avoid using text links that are shorter than four 4 characters in length. | Links |
Date: 5/7/2012 21:10 PM
URL: file:///C:/Users/ELstudent/Desktop/Google.htm
2. Fix the failures you found.
Lab 22 More on HTML
1. Copy and paste theTables example at http://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?
出現2X2的表格
Lists
4. Copy and paste the Lists example at http://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?
文字前面會出現標題
2012年4月30日 星期一
Lab 21 HTML
1. Using Microsoft Notepad, Copy and paste the HTML example atIntroduction to HTML
2. Save the file as myfile.html
3. Open the file using Firefox.
2012年4月23日 星期一
2012年4月8日 星期日
Lab 16 Using Google PageRank
紐約時報
PageRank:9
CNN
PageRank:8
台灣雅虎
PageRank:8
蕃薯藤
PageRank:7
PCHome 購物
PageRank:5
常用的三個網站:
PageRank:9
CyberPanel創市際市場研究顧問
PageRank:4
痞客邦PageRank:5
2012年3月25日 星期日
Homework 03-19-2012
1. 第一篇文章談及有關於中國社交媒體的檢查分析，研究人員分析了數百萬中國的微博，發現這些微博裡面的訊息，只要涉及到政治方面的敏感問題就會被中國官方刪除。中國的網路審查很發達，經常會被審查的關鍵字，多半是法輪功、人權活動家艾未未及劉曉波，還有「聯會」。在西藏地區，微博審查以及刪除率很高，因為是政治動亂的溫床，對於許多的議題也就更嚴格把關。中國長城防火牆會擋住像是Google或Facebook等外國網站。紐約時報的專欄作家曾在中國的微博開設帳號，並發送有關法輪功的消息，在不到一小時之內，他的帳戶就被關閉。CMU分析了中國最主要的微網誌網站─新浪微博，發布消息。研究人員比較了新浪微博與中文版的Twitter，在同一時間，每75個tweets中會出現一次江澤民的名字，但在新浪微博，則是每5,666中出現一次，看得出談及政治在微博被壓抑的現象。
2. 在2011年1月的傍晚，有80萬人口，其中包含2300萬網路使用者從網路空間消失，在當局下達讓反政府抗議活動之中的網路停電後，這導致埃及總統下台。在之後的一個月內，在完全切斷將近4天的訪問前，利比亞政府還實行網路「宵禁」。為了準確的解釋這些政府如何擾亂了網路，CADIA進行了根據觀察網路的一特定子集在網路來往上大幅下降是因為一種惡意軟體的剩餘產物。分析這惡意軟體所產生的交通汙染，首次被用來分析網路的審查和中斷。研究人員認為這種新方法，可以在更大範圍內創造一個自動預警系統，來幫忙檢測在未來的網路問題。
2012年3月19日 星期一
Homework 03-12-2012
1. 安全瀏覽模式，Google Chrome會顯示警示畫面，告訴使用者現在這個網站可能含有惡意程式。沙盒模式，增強了瀏覽網路安全性，以及自動更新。
3. 網站有問題
4.網站有問題
3. 網站有問題
4.網站有問題
2012年3月8日 星期四
Homework 03-03-2012
1. Google靠著網路廣告來獲利。Google AdWords 是獲利機制，在AdWords選定關鍵字跟廣告的內容之後，廣告會顯示在Google的搜尋頁面右側，有人點擊廣告，才需要付費。Google透過關鍵字搜尋，猜到那些人可能會對那些廣告有興趣，來增加使用者點擊廣告的可能性。
2.Google Android的獲利模式有行動廣告平台、消費者接受付費應用程式，以及針對硬體廠商收費的GMS License。Android market 的應用程式，Google可以從中獲取利潤。Android作業系統本身免費，但是只要手機裡包含GMS服務，廠商就需要支付費用。
3.開發者將自行開發的應用程式放置App Store上，讓使用者付費下載，Apple從中獲取部分利潤。App Store上有些免費下載的軟體，大部分都是試用版，需要使用者透過手機平台提供的軟體內付費購買之後，才會啟動正式版。
4. Office的授權金收入 是微軟的主力營收來源。
5. 資料的蒐集與正確性，光靠網頁資料來做排名會有失誤，可信度不高，因為網路資料多半可以造假。
訂閱：
文章 (Atom)