2012年12月17日 星期一

Lab 36 Syndication with RSS 2.0



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

Blogger 製作

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

Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。

http://s9845156.blogspot.tw/

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




Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。
因為是外系生,所以不知道錯誤在哪,經過助教的指導之後,才知錯誤在哪。

Lab 34 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)

XML:可擴展置標語言(Extensible Markup Language,簡稱XML),又稱可擴展標記語言,是一種置標語言。置標指電腦所能理解的信息符號,通過此種標記,電腦之間可以處理包含各種信息的文章等。如何定義這些標記,既可以選擇國際通用的標記語言,比如HTML,也可以使用像XML這樣由相關人士自由決定的標記語言,這就是語言的可擴展性。XML是從標準通用置標語言(SGML)中簡化修改出來的。它主要用到的有可擴展置標語言、可擴展樣式語言(XSL)、XBRLXPath等。
XSLT:其實XSLT只是將XML理轉換成其他格式而已,我們透過XSLT處理器可以將XML文件照者Template-Driven的轉換Script程式碼來產生轉換結果XML他可以轉換成樹狀結構,其是XSLT就是把一個XML的樹 使用XSLT轉換成tree的,在修改一下node 最後產生另一棵樹。其實XML配合XSLT我們就能支援在HTML上顯示文件了

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.



Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。

XRAY無法下載,所以使用助教給的連結做出lab。

2012年12月16日 星期日

Lab 33 Speed Test

測試中原大學與中央大學對外頻寬速度。

Tool: Speedtest
cycu proxy: proxy.cycu.edu.tw:3128
ncu proxy.csie.ncu.edu.tw:3128
no proxy

這是沒有proxy的
這是有proxy的
這是中央的~可是中央不給用




Lab 32 Programming in DOM (II)

1. Open KompoZer
2. Based on the code as in

http://www.scottandrew.com/weblog/articles/dom_4 ,
write a code so that when you push a button, you generate the table of 9*9 products. (九九乘法表)

Hint: The javascript code should be enclosed by script tags.
Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。
我的按鈕名稱無法用"九九乘法表",因為會顯示亂碼,所以我只好打"click me",用英文之後就不會亂碼了。



2012年12月8日 星期六

Lab 31 Programming in DOM

1. Open KompoZer
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.






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





Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。
程式碼都沒錯,可是圖片跑不出來,已經試過很多次了。

Lab 29 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 28 Lab Form and Action



  • Dynamic pages, content generated by server-side programs.
  • CGI, Common Gateway Interface, for sending requests to server-side programs.


static page
Ex:
http://www.google.com/

dynamic page
Ex:
http://www.cna.com.tw/

URL that sends a request by CGI
Ex:
http://maps.google.com/maps?q=24.9586,+121.2411

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?



改成get 
改成get之後搜尋cycu可以搜尋得到

改成post

改成post之後搜尋cycu',就搜尋不到了




2012年12月2日 星期日

Homework 11/26/2012

1. 在時速300km/h的高鐵上如何提供上網,2G, 3G, 4G, Wi-Fi可行嗎? 試提出可行之道。

WIFI的傳輸率最高可達54 Mbps,傳輸範圍最遠約一百公尺,然而時速最高120 km/hr時,並不可能每隔100公尺就設一個基地台,因此無法使用wifi,2G訊號勉強可傳輸,然而3G、4G更無法作用在破百之時速,2G、3G、4G和Wi-Fi都無法在高鐵上使用。
可行辦法:WiMAX是屬於IEEE 802.16標準的一種點到多點,寬頻無線存取技術。與802.11標準定義的Wi-Fi 網路一樣,WiMAX也是一種無線上網技術,只是它的訊號範圍更廣、傳遞速度更快。且WiMAX的速度、範圍分別是74Mbps、48公里,且winiMAX技術整合性高,速度快、距離遠,因此較有機會使用wimax提供上網服務。



2. 在高鐵沿線兩側部建Wi-Fi基地台(Access Point),能否解決高鐵上網問題,為什麼?

一般的無線網路則是採用 IEEE 802.11a/b/g/n,依據使用不同的技術會有不同的支援範圍與速率,但目前市面上常見的最慢也有 11Mbps(即 1.375 MB/s),平均幾乎都有支援到 56Mbps(即 7 MB/s)。但穩定的傳輸距離通常在基地台的 50 公尺以內,且對障礙物穿透力弱。然而高鐵不可能在50km內就設定一個基地台,這樣耗費成本太高。依照wifi的傳輸距離,應該不太能解決高鐵上網問題。

一般的無線網路跟手機網路所謂的 2G/3G/3.5G 走的是不同的無線射頻頻道,所以其實算是兩種不同的技術,相同的地方只是都被用來作為無線上網的媒介。打個比方,手機  2G 網路(又稱 GPRS)是走 GSM 的,所以所用的頻率範圍是 800/900/1800 MHZ 三種頻道,而無線網路則是都走 2.4GHz、5GHz 這兩種。

2012年11月26日 星期一

Lab 27 Mash-Up 2 (Calendars)

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


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



Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。

Lab 26 Mash-Up, Part 1 (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.
比較: 美感,直覺性,流暢,預期反應




housingmaps

 美感:較不鮮豔,但看起來簡單整齊。
 直覺性:想點什麼就點什麼
 流暢:很簡單就能找到我們需求的
 預期反應:想像的可能會跟實際看到的不一樣

永慶房仲網
 美感:鮮豔裡帶著一點雜亂
 直覺性:介面比較亂,需要思考一下才知道如何尋找我要的東西。
 流暢:提供了很多選擇,幫助我們更方便找到我們想要的
 預期反應:想像的與實際上看到的一樣。



Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。
我點那兩個網站裡面的連結,點進去都找不到網址。無法解決 

Lab 25 navigation bar


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.

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.


yahoo奇摩

List of Accessibility Issues Summary

FAE RuleViolationsMessageClass
Warn 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 Each heading element (h1..h6) must have text content. Headings 
Check Heading content should be concise (usually 65 or fewer characters in length). Headings 
Warn Avoid using images that are smaller than 16 pixels by 16 pixels as links. Links 
Fail Every frame element must have a title attribute with content that describes the purpose of the frame. Frames 
Warn 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 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 Every onClick event handler should be on a focusable element. Events 
Warn 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 RuleViolationsMessageClass
Fail The page should contain at least one and no more than two h1 elements. Headings 
Fail Each heading element (h1..h6) must have text content. Headings 
Check Heading content should be concise (usually 65 or fewer characters in length). Headings 
Check Most web pages should contain at least one navigation bar. Menu and Navigation Bars 
Fail 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 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 The character encoding was not specified. W3C Specifications 
Fail Heading elements that follow the last h1 should be properly nested. Headings 
Warn The content of the headings of the same level within the same section should be unique. Headings 
Warn 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 RuleViolationsMessageClass
Check Most web pages should contain at least one navigation bar. Menu and Navigation Bars 
Fail 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 Avoid using images that are smaller than 16 pixels by 16 pixels as links. Links 
Warn 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 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