2012年12月17日 星期一

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.





Lab 36 Syndication with RSS 2.0



這個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等。


XSL-可擴展樣式語言extensible stylesheet language,簡稱XSL),是一種為[可擴展置標語言](XML)提供表達形式而設計的語言。
由於可擴展置標語言的擴展性使之沒有關於顯示格式的標識,可擴展樣式語言可以選擇和過濾可擴展置標語言中的數據,並將其轉換為HTML或者PDF等其他格式文件。

資料來源:維基百科

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.








Lab 33 Speed Test






2012年12月3日 星期一

Lab 31 & 32 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.




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.

通用網關介面Common Gateway Interface/CGI)是一種重要的網際網路技術,可以讓一個客戶端,從網頁瀏覽器向執行在網路伺服器上的程序,請求數據。CGI 描述了客戶端和伺服器程序之間傳輸數據的一種標準。

來自維基百科

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
"logic will get you from A to B - imagination will take you anywhere"

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?




Method:post


Method:get





不太知道如何操作,不過助教有講解一遍,最後比較Method用GET和POST兩者不同的結果。

Homework 11/26/2012

1. 在時速300km/h的高鐵上如何提供上網,2G, 3G, 4G, Wi-Fi可行嗎? 試提出可行之道。
目前要用筆記型電腦進行移動式的上網,唯一的選擇便是3G網路,雖然IEEE 802.11b/g同屬無線傳輸網路,但該協定是設計給固定式無線裝置使用,無法在快速移動狀態下持續上網。
現在手機業者所提供的3G無線上網最快下載可達到7.2M(CHT),在一般高速公路上行駛的車子上、台鐵列車上使用尚稱穩定,但若在高鐵列車上使用則會顯得捉襟見肘。
因為3G網路是屬於細胞式網路,單一基地台的傳輸距離不長,在裝置不斷移動時基地台之間會做交遞的動作,交遞過程中若裝置移動得太快,變會產生傳輸品質不佳的空窗期,
這對於語音傳輸來說還算可以容許的範圍,頂多是喂喂喂地聽不清楚,但對於封包傳送來說就會一直產生封包遺失而造成傳輸品質不佳甚至斷線。
以高鐵的時速達300km公里來說,台中以北路段又多山洞,3G無線網路根本是全線無法使用,我想唯一的改善方式是在各列車內加裝微細胞,將訊號從車外接收後直接打進車廂內,
隧道內的收訊也要改善。不知道下一代的4G網路LTE這是否可改善這個規格瓶頸。

至於另外的無線網路Wimax,對於這樣的情況希望也能夠有解決方案,如此才能顯現出取代3G無線上網的必要性。


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


Wi-Fi和衛星的傳輸速度有其限制,約為2Mbps,行動式WiMAX可提供較大的頻寬,此計畫希望能達到15Mpbs的目標。除了頻寬之外,合勤科技董事長朱順一從技術角度分析WiMAX優勢:「採用衛星技術,必須在車上架設天線,並且瞄準衛星方位,高速鐵路行進時,位置不斷移動,所以天線必須一直追蹤衛星,天線的控制、成本昂貴都是問題;另外,因為高速鐵路速度太快,平均幾秒鐘就要切換(Handover)Wi-Fi無線基地台(AP),想要穩定地切換相當困難,所以WiMAX比較有機會」。




出處:
http://blog.xuite.net/tigerboy0320/blog/18155018
http://www.digitimes.com.tw/tw/dt/n/shwnws.asp?id=0000093882_A814WT75YE9SZDJ1EI0C9&ct=1

2012年11月26日 星期一

Lab 27 Mash-Up 2 (Calendars)

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

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



Lab 26 Mash-Up, Part 1 (Maps)

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  簡單一目瞭然,乾淨好看
永慶房仲網     內容豐富但擁擠,略雜亂


直覺性---

HousingMaps   簡單明瞭,容易理解操作,直覺性強
永慶房仲網      較為繁雜,需花時間理解


流暢---


HousingMaps   流暢度好
永慶房仲網      可能因為內容豐富過多所以流暢度不佳


預期反應---


HousingMaps    較實用,好理解好操作
永慶房仲網       看著覺得很麻煩容易關掉

Lab 25 navigation bar

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

2012年11月12日 星期一

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

測試以下HTML 4 和HTML 5的影音播放功能


比較兩者有何差異。




主要的差別應該是語法的精簡,兩者語法的使用不同。

與HTML 4的不同之處

以下為大略的不同之處,與例子:
  • 文件類型聲明(<!DOCTYPE>)僅有一型:<!DOCTYPE HTML>
  • 新的解析順序:不再基於SGML
  • 新的元素:sectionvideoprogressnavmetertimeasidecanvascommanddatalistdetailsembedfigcaptionfigurefooterheader,hgroupkeygenmarkoutputrprtrubysourcesummarywbr
  • input元素的新類型:dateemailurl 等等。
  • 新的屬性:ping(用於aarea), charset(用於meta), async(用於script)。
  • 全域屬性:idtabindexrepeat
  • 新的全域屬性:contenteditablecontextmenudraggabledropzonehiddenspellcheck
  • 移除元素:acronymappletbasefontbigcenterdirfontframeframesetisindexnoframesstrikett








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.






Homework 11/5/2012


1. 觀看場域應用與服務設計: "科技人如何做通俗演講" (4分鐘)  撰寫200演講摘要。

       一個成功的上台報告,並不是在台上講述多少專業、難以理解的事情,而是能不能與台下的聽眾有所關連、產生認同以及理解。用了一個專業、有深度的詞語,可能代表你的專業性很強,但並不表示你能與人溝通。如同製作PPT簡報一樣,一句簡單的話、一張圖片就能讓觀眾了解,而不是塞滿了文字敘述,這樣的話,大家回家在電腦上下載來看就好,何必出門去聽你演講。所以,製作的投影片以及演講方式是需要相輔相成、吸引人的。

2. 你覺得以後上台作簡報,會做些什麼樣改變?

除了簡化投影片讓他看起來更淺顯易懂外,還要多準備演說時的講法。

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.

Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站



                                                                         YAHOO


Youtube
                                             



Facebook









Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。
A:沒有遇到問題,基本上這個LAB和上個LAB差不多。


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.


Accessibility Extension

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 
Check Heading content should be concise (usually 65 or fewer characters in length). Headings 
Fail Every frame element must have a title attribute with content that describes the purpose of the frame. Frames 
Warn Hidden or empty frames should not be used. Frames 
Warn 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 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 The character encoding was not specified. W3C Specifications 
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 
Fail 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 Ensure that links that point to the same HREF use the same link text. Links 
Fail 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: 11/5/2012 20:14 PM
URL: http://www.google.com/



Q:請描述至少一個你做這個lab所遇到的問題,並且你是如何解決這個問題的。
A:剛開始搞不太清楚載的東西是甚麼找很久,之後發現這個功能很方便好用



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?




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