Lab 33 匯出部落格

1. 將你的部落格匯出為 XML，請使用blogspot 已經提供的匯出工具
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格
4. 檢查匯出情況，是否有出現異常，資料遺失或被變更?

XML

Take a look at islandwide temperatures of Taiwan.

What happens if you just want Taoyuan's temperature?

If you want to include Taoyuan's temperature in your Theme
Park homepage, is there any solution?

XML examples:

• atom of Blog,

• Zip Code Web Service

the need of XML

Separation of data from data processor

Seperation of data from presentation

• HTML for machine-human interaction

• XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.

Automation of data flow across various business systems

• XML for machine-machine interaction

• Without human involvement, automation of business systems can be accelerated.

部落格匯出與匯入

部落格的資料是以XML表示，運用XML可以匯出與匯入部落格。

實例:

原部落格 http://minstral.blogspot.com/
匯出至新部落格 http://blog.cycu.edu.tw/chang212/

12月2日(四) 張耀仁老師第一次專題說明會

地點: 電學517 (實驗室)
時間: 7:00~8:00 pm
主題: 精障者生活自理與工作提示輔具科技介紹
報名: 座位有限，事先報名者優先入場(請在下方報名)，歡迎電子系大三大二同學參加。
事先建議閱讀資料:張老師專題方向簡介

本系規定

1. 務必團隊合作，每組至少2人，成員限修電子系專題實作的同學。
   
2. 指導老師指導學生人數之上下限為6~10人。

專題說明會報名人數
專題說明會參加人數共12人，圓滿成功。
張老師已接受專題生人數: 4

Quiz (單排座位作單數題，雙排座位做雙數題)

1. 請舉三個實例說明CGI的action。
2. 什麼是 CGI? 繪圖說明CGI網站系統架構。
3. 無障礙網頁技術有哪些?試舉三項。
4. 試列舉三個身心障礙的障別，不同障別對網頁設計有何影響?
5. 何謂 Web 2.0 ? 特性是什麼。
6. 請比較微軟的Office 與Google 線上文件所使用技術與功能特點。
7. 試比較靜態網頁與動態網頁系統設計上的差異?
8. Housingmaps 使用了 mashup技術，何謂 mashup?
9. 除了Housingmaps之外，請列舉 三個 mashup技術實例
10. 你的朋友想同時使用中原電子郵件與Google電子郵件，可是又不想每次操作兩種介面，你會建議她怎麼做?
11. Google搜尋引擎的關鍵技術是甚麼?請簡述。
12. 油猴子(GreaseMonkey)程式為何可以用來濾除網頁中的不雅字眼，試說明其原理。
13. 紐約時報董事長表示未來可能停止印刷發行，只留下網路發行。可能原因是甚麼? 這家企業未來要如何存活?
14. 一群志工協助非營利組織舉辦園遊會，其中一位志工以數位相機拍攝不少活動照片，這些照片要分享給其他夥伴，你會建議怎麼做?
15. 你的朋友出國留學，你想要與她常常電話聯繫，又不想花費鉅額電話費，如何解決這個問題?
16. 為什麼有些網頁功能只有在微軟瀏覽器可以正常工作，其他瀏覽器卻不行?如何排除這個問題?
17. 在無障礙規範中，使圖片成為無障礙的作法有哪些? 如何排除?
18. 瀏覽器會洩漏使用者的隱私嗎? 該如何注意以降低其風險?
19. DOM 的全名是甚麼?
20. CGI 的全名是甚麼?

11月29日舉行小考

範圍: 上課內容(9~11月)
方式: closed book, no computer

歷年考題(僅供參考，題型可能變更)

小考目的主要在測驗學生基本能力，能夠面對問題，獨立去構思答案，不假他人既有成果。因此，不必求完美，只要掌握關鍵概念，就會給予高分。

Homework 6

研習考古題，不必留紀錄。

DOM, Document Object Model

操作以下這個網頁
web personalization 網頁個人化
你 會不會覺得有點神奇, 它是如何做到的?
關鍵就在 DOM.

With the DOM scripting methods you can:

- Create new elements on the fly.
- Grab all the tags of the document, or grab the text without grabbing the tag text.
- Insert new text, and change or remove text from any element.
- Move whole parts of the document around, or remove parts as fragments and work with them.
- And the best part: all of these new methods should work in any DOM compliant browser. No more browser sniffing. No need to build different versions of the same page for different browsers.

Reference:
Scripting For The 6.0 Browsers, By Scott Andrew LePera

createElement() allows you to create a new tag.

myImg = document.createElement("IMG")

Give definition.

In the above example, our newly born tag has no ID, no SRC and no home in the document yet. So let's give it some definition:

myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")

Append it within the document "tree".

Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():

docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)

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

Static, Dynamic Webpages and Common Gateway

• 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

Lab 30 navigation bar

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

Lab 29 Hand code a form

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?