Blogger: LAB

顯示具有 LAB 標籤的文章。顯示所有文章

2013年1月7日星期一

Lab 39 Social Services based on Internet

網路現在對每個人的影響真的非常的大，而在“世界展望會”中我覺得真的可以有很大的資訊，在這個網站，我可以清楚知道他們目前的需要和在做些什麼活動。
我有領養一個印尼的小孩，每個月捐助他們一些金錢供他們的學費、生活費，而我能夠在網路上有知道我的捐款狀況，對捐助者是貼心的一件事。
常常會有電子報寄到我的信箱，跟我分享最近他們的活動和訊息

http://www.worldvision.org.tw/

2012年12月17日星期一

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的全名是Extensible Markup Language，也就是延伸標記語言，XML和HTML一樣都是一種標記語言，利用標籤來定義各種屬性。HTML的使用目的是排版資料，修改資料的顯示; XML的使用目的則是描述資料。

XML是SGML（Standard Generalized Markup Language，即ISO的標準通用標示語言，ISO 8879:1986和其1997 WebSGML附件Annexes J、K及L）的簡化版本。SGML系統是非常複雜的，因為它具有許多的機制，以便提供各種的語法。SGML是被發展用來解決編輯及保存內容龐大複雜且互相連結的技術文件，而XML只取用SGML系統中的文件結構的核心部份。

XML規格制定的初衷是為了簡化程式設計的因難度，目前大約有二十個不同程式語言所撰寫的剖析程式（Parser）可以公開的取得。假如您要設計在WWW中互傳資料的系統，或是要儲存系統的設定檔，您可以考慮採用XML。優點是您可以取得許多免費的工具來檢查或編輯您的XML文件，其中有些工具可以讀入XML檔，然後以樹狀方式顯示，同時也可修改元素結構及內容。

在計算機科學中，可擴展樣式表轉換語言（Extensible Stylesheet Language Transformations，簡稱XSLT）是一種對XML檔案進行轉化的語言，XSLT中的T代表英語中的「轉換」（transformation）。XSLT 是 XSL 中最重要的部分。XSLT 用於將一種 XML 文檔轉換为另外一種 XML 文檔，或者可被瀏覽器識別的其他類型的文檔，比如 HTML 和 XHTML。通常，XSLT 是通過把每個 XML 元素轉換为 (X)HTML 元素來完成這項工作的。通過 XSLT，您可以向或者從輸出文件添加或移除元素和屬性。您也可重新排列元素，執行測試並决定隱藏或顯示哪個元素，等等。

2012年12月3日星期一

....

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
<script>
function buildTable(){
docBody = document.getElementsByTagName("body").item(0)
myTable = document.createElement("TABLE")
myTable.id ="TableOne"
myTable.border = 1
myTableBody = document.createElement("TBODY")
for (i = 0; i < 3; i++){
row = document.createElement("TR")
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
cell.setAttribute("WIDTH","50")
cell.setAttribute("HEIGHT","50")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
myTableBody.appendChild(row)
}
myTable.appendChild(myTableBody)
docBody.appendChild(myTable)
}
window.onload = buildTable
</script>
</head>
<body>
<button onclick="built()" name="LAB31"></button>
</body>
</html>

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.
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?

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

一開始自已摸索，大概知道，但謝謝助教的幫忙，更了解在做什麼惹：)

2012年11月26日星期一

Lab 27 Mash-Up 2 (Calendars)

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

Google日曆-中原大學服務學習活動行事曆-html版本

進入後按右下角+Google日曆即可訂閱

Q:請描述至少一個你做這個lab所遇到的問題，並且你是如何解決這個問題的。
沒有問題~GOOGLE日曆可以直接訂閱，很方便。

Lab 26 Mash-Up, Part 1 (Maps)

housingmaps
美感 : 透過地圖的方式，清楚簡單明瞭
直覺性 :簡單容易操作
流暢 : 網煩按一下就跑出來，資料循序漸進
預期反應 : 和預期的還要方便，且好查尋

永慶房仲網

美感 :多樣複雜，一個頁面塞入太多東西
直覺性 : 需要思考和尋找一下功能頁
流暢 : 可能太多東西，網頁開啟較慢。
預期反應 : 台灣很多這樣的網頁，差不多都是這樣滿滿的東西，找資料需花費比較多時間去思考

真實案例
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.

Lab 25 navigation bar

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

2012年11月12日星期一

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

HTML5


HTML4

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

比較兩者有何差異。

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.

http://iapblog.blogspot.tw/2012/11/lab-23-making-images-accessible.html

2012年10月22日星期一

Lab 19 AccessBar

Lab 18 Google Accessibility

Lab 17 HTML

2012年10月15日星期一

Lab 16 Clean Language

Lab 15 Greasemonkey

Please read the information about Greasemonkey and cookiebefore you start the lab.
Install Greasemonkey 0.9.1 . Check the lower right corner of your Firefox and you should find a monkey at the right.
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?
You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.

monkey

http://iapblog.blogspot.tw/2012/10/lab-15-greasemonkey.html

Lab 14 Using Google PageRank

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

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/

接著，以PageRank量測你常用的三個網站。

參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文