Lab 33 Syndication with RSS 2.0

1. 進入你的部落格，登入，選擇設計
2. 新增小工具
3. 選取
資 訊提供
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)

Lab 32 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.
(archive)

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.

1&2

1&3

Lab 31 XML

1. Register and Download Xray, an XML, XSLT editor and processor.
(安裝X-Ray需要權限)
(助教碎碎念:若無法順利安裝再點我)

2. Before you do this lab,all the first you must know is
what is XML?
what is XSLT?
please write down your answer.(least 200 words)

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.

XML:

        可延伸標記式語言，是一種標記式語言。標記指電腦所能理解的訊息符號，透過此種標記，電腦之間可以處理包含各種訊息的文章等。如何定義這些標記，既可以選擇國際通用的標記式語言，比如HTML，也可以使用像XML這樣由相關人士自由決定的標記式語言，這就是語言的可延伸性。

XSLT:

        可擴展樣式語言(XSL)，是一種為XML提供表達形式而設計的語言。在計算機科學中，可擴展樣式表轉換語言是一種對XML檔案進行轉化的語言，XSLT中的T代表英語中的「轉換」（transformation）。

Lab 30 Programming in DOM

1. Open KompoZer
2. Based on the code as inhttp://www.scottandrew.com/weblog/articles/dom_4 ,
write a code to generate the table of 9*9 products. (九九乘法表)

Lab 29 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.

Lab 28 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.

Lab 27 Lab Form and Action

Purpose of lab:
Learn how to use Form to invoke a remote service through CGI.

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.)
7. Save your file on your computer. Run your HTML by Firefox. What do you get?

8. Set method as "post"
9. Run your HTML by Firefox. What do you get?

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

HTML4

HTML5

HTML播放器是以傳統的HTML語言，用FLASH 檔來播放影片，但現在有些平台沒辦法使用FLASH，而HTML5支援多媒體Audio和Video的標籤，利用<source>方式加載影音格式，而不用傳統的swf格式來進行

Lab 25 Mash-Up 2 (Calendars)

建立你的行事曆，並與學校行事曆合併


Google日曆-中原大學服務學習活動行事曆-html版本進入後按右下角+Google日曆即可訂閱

Lab 24 Mash-Up, Part 1 (Maps)

For housing services, compare the following two websites

美感：

　　　Housing Maps整體介面較乾淨、簡單，但也給人未經設計的感覺

　　　永慶房屋介面內容豐富卻夾雜許多廣告，使人搞不清出重點

直覺性：

　　　Housing Maps直覺性高，目的一目瞭然

　　　永慶房屋內容雜亂

流暢：

　　　Housing Maps操作簡單、方便，只需輸入位置及價錢即可找到需要的房屋

　　　永慶房屋操作普通，卻在條件方面有較詳細的選擇，可以找到最適合自己的房屋

預期反應：

　　　Housing Maps內容簡單方便且操作容易上手，給人的感覺很流暢

　　　

　　　永慶房屋雖然起始頁面給人雜亂的感覺，但在操作尋找的條件做得非常詳細，可能需

　　　要真正操作過一次才會給其較高的評價

Lab 23 navigation bar

1. 進入你的部落格，登入，選擇設計
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)

Lab 20 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.

Before

After

Lab 22 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.

Before

After

Lab 21 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.

1.Yahoo

2.CYCU

3.Facebook

Lab 19 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?

Tables

<td>為一般，<th>則可使文字變為粗體

Lists

<ul>為標點索引，<ol>為數字索引，<dl>、<dd>、<dt>則可使索引變為行列式

Lab 18 Google Accessibility

1.Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link.
2.Google Access Keys Enables navigation through Google search results.


兩者安裝好以後，請呈現使用前後的差異比較圖，並說明有何功用。

Search Keys

Access Keys

利用(,)為前一頁; (.)為下一頁
並可以利用"數字鍵"來選取連結, 不須使用滑鼠操作

Lab 17 HTML

1.Open the file using Firefox.

2.Introduction to HTML

3.HTML Elements

4.HTML Headings

5.HTML Paragraphs

6.HTML Links

7.HTML Images

Homework 4-15-2013

A = (C/1)*0.85+0.15 = 0.85C+0.15.............(1)
B = (A/2)*0.85+0.15 = 0.425A+0.15...........(2)
C = (A/2+B/1)*0.85+0.15 = 0.425A+0.85B+0.15.........(3)
由(2)(3) => 1.85B = C
代入(1) => A = 1.5725B+0.15.........(4)
(2)再代入(4) => A = 1.5725(0.425A+0.15)+0.15 => A = 1.163
=> B = 0.425*1.163+0.15=0.644
=> C = 1.85*0.644 = 1.19
推得 C > A > B 

Homework 4-8-2013

你被一家手機公司錄用了，請你簡述你想像中的手機設計的流程。

1.市場調查

包括了手機使用的年齡層分佈、不同職業對於手機功能上的要求及對於市售手機外觀上的評價...等等，以決定此次產品所要銷售族群及設計上之大方向。

2.硬體、軟體設計(包括特殊功能需求之硬體、軟體)

根據市場調查之結果設計，在硬體上的效能、散熱等方面之著重，及軟體操作上的人性化設計。

3.內部測試

將設計完成之軟、硬體經過數種嚴苛條件測試，找出運行錯誤及反應過慢等問題，再重回上一步驟，最後完成最符合目標功能之設計。

4.外觀設計(包括大小、重量及手機結構配置等)

由市場調查所提供之大眾喜好，及設計師對於時尚潮流之嗅覺，還必須避免影響其功能的運作，經由上述多方面條件下，設計出最具美感及實用的外觀。

5.外部測試

將設計完成之產品經過外在數種不同且嚴苛之周遭環境條件測試，以不影響其功能為主要目的。

6.行銷、上市

Homework 3-27-2013

1. 針對前次作業，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。

9826215 電子四乙 吳駿霖:

對於影片中的內容能明確提出自己的看法，並將其與自身經驗作比較、連結。

9926304 電子三丙 洪皓鈞

將演說內容的想法設法運用在生活上，雖然沒有說得很詳盡但已明顯了解整篇演講內容。

9826124 電子四甲 林子平

文筆、詞藻豐富，並將其演講概念做了非常好的比喻、聯想，令人賞心悅目的文章。

9926255 電子三乙 林延興

正確的理解了影片內容，從多個面向進行探討，並在最後提出自己的理念。

9926203 電子三乙 劉禹廷

將兩部影片個別進行重點的簡述及探討，並在最後作出結論，整體整理得很分明、思路清晰。

Lab 15 Greasemonkey

1.Please read the information about Greasemonkey and cookiebefore you start the lab.

2.Install Greasemonkey 0.9.1. Check the lower right corner of your Firefox and you should find a monkey at the right.

3.Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?

4.You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.

Lab 14 Using Google PageRank

在Firefox上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)

 紐約時報 <http://www.nytimes.com>  PageRank 9/10

CNN <http://www.cnn.com/> PageRank 8/10

台灣雅虎 <http://tw.yahoo.com> PageRank 8/10

蕃薯藤 <http://www.yam.com> PageRank 7/10

PCHome 購物 <http://shopping.pchome.com.tw/> PageRank 5/10


常用網站

CYCU <http://www.cycu.edu.tw/> PageRank 7/10

伊莉討論區 <http://www03.eyny.com/index.php> PageRank 5/10

Facebook <https://zh-tw.facebook.com/> PageRank 7/10

Lab 16 Clean Language

1. Save the JavaScript file of Clean Language to your desktop. Make changes to the script with self-defined bad words. To do this, save the JavaScript on your desk top. Use Notepad editor to make changes. Install the modified script as Greasemonkey.

2. Use Google to search webpages that contains some bad words.

3. Try whether the filtering take effects.