2008年12月29日 星期一

Quiz 01-05-2009

1. 請撰寫一段AJAX小程式。
2. 請撰寫一段DOM小程式。
3. XML 跟 JavaScript 有任何關聯嗎? 如果有關聯請舉例說明。如果沒有,請說明為什麼?
4. AJAX 包含哪些技術?
5. 說明Packet sniffer 的原理
6. 說明 SiteMeter 原理
7. 為什麼要做網站的Stress Test?
8. 解釋Web2.0是甚麼
9. 請寫一段XML
10. 請寫一段XSLT
11. 無障礙網頁技術有哪些?
12. 如何增加網頁的互動性?

2008年12月25日 星期四

Lab Web Stress Test

1. Download Stress Test
2. Take a look at the user manual.
3. Test a static page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
4. Test a dynamic page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
5. Compare the response time of both pages and explain why.

Lab Site Traffic Metrics

1. Enter Sitemeter.
2. Put a Sitemeter in your own blog.
2. Check the site meter to see the daily traffic chart, the recent visitors by locations.

Lab: Packet Sniffer

1. Install Protocol Analyzer Ethereal at http://www.wireshark.org/
2. Capture the packets at your Ethernet interface card.
3. Enter a login required website that you often go to, such as web mail. Don't use the real account or password.
4. Try to catch the packet that contains the password.

第二次小考,1/5/2009

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

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


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

2008年12月22日 星期一

Lab: Drag and Drop

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "drag-and-drop" example.
3. Use this method to control movie playing as in the previous lab.
4. If you drag and drop the photo to the "play" area, the movie plays.
5. If you drap and drop the photo to the "pause" area, the movie pauses.

Lab: Movie Player

1. Go to Laszlo and enter (Laszlo in 10 minutes).
2. Study and play around the "scripting" and "video" examples.
3. Use this script to control movie playing.
4. If you push the "pause" button, the movie pauses.
5. If you push the "resume" button, the movie resumes.

2008年12月8日 星期一

小考成績分佈

80-100 0
70-79 3
60-69 3
50-59 3
40-49 4
30-39 6
20-29 4
10-19 2
0-9 4

下次小考 1/5/2009

Lab Create Image using DOM

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

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 XML

1. Given the RSS of Class Blog, write an XSLT fileand use Xray to generate an HTML that contains the titles of items in the RSS.

2. Open the XML file by Word and you will see the document structure.

3. View the formatted HTML file.

2008年12月1日 星期一

Homework 12-1-2008

Lab XML (2)

Lab 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 XML

1. Register and Download Xray, an XML, XSLT editor and processor.

2. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.

3. View the formatted HTML file.

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:


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.
    What kind of language is XSLT?
    • An XSLT style sheet is an XML document.
    • The basic processing paradigm is pattern matching.


    Operation of an XSLT Processor


    參考資料
    XSLT(專業ASP.NET XML程式設計 - 使用C#)

    2008年11月29日 星期六

    12/1/2008 第一次小考

    第一次小考

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

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

    ps. 第二次小考,1/5/2009

    2008年11月27日 星期四

    行動科技輔具冬令營 報名

    有興趣找我做專題同學,請參閱大學部專題特區。我們會先在1/16/2009 舉辦行動科技輔具冬令營隊,介紹專題內容與基礎能力。有興趣者,請自行組成專題團隊。

    本次招收10位同學,若干團隊(每隊2人),冬令營活動結束後,將進行個別團隊洽談。

    報名行動科技輔具冬令營者,即日起請登記

    2008年11月25日 星期二

    2009 新課程: 先進網際服務系統

    適合大三以上,修過本課網際網路應用設計,對網際網路服務原理與各式應用有高度興趣者。詳細課程請參閱課程大綱

    2008年11月24日 星期一

    Homework 11-24-2008

    1. Lab: Form and Action, Part II
    2. 在CGI語法裡,解釋 GET, POST 差異在哪裡?

    Quiz 12-1-2008

    1. 什麼是RSS?請舉出3個網站說明之。
    2. Housingmaps 使用了哪些網頁互動技術,請逐一說明。
    3. 除了線上出版以外,Web還有哪些類應用?
    4. 簡述Web發展史(1989~2008)。
    5. 舉例說明Rich Media,與multimedia 差異在哪裡?
    6. 除了線上出版以外,Web還有哪些類應用?
    7. 在CGI語法裡,解釋 GET, POST 差異在哪裡?
    8. 除了Housingmaps 之外,舉5個例子說明mashup應用。
    9. Google Access Keys 有哪些功能? 能對視障者提供何種協助?
    10. 寫出一個無障礙圖片的HTML片段。
    11. 寫出一個產生網址http://maps.google.com/maps?q=24,121 的HTML片段。
    12. 什麼是 CGI? 繪圖說明以CGI為架構的網站系統。

    12-1-2008 第一次小考

    第一次小考

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

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

    ps. 第二次小考,1/5/2009

    作業加分

    11-17-2008 作業提早一天以上完成者,平時分數加五分。

    Lab Checking dead links

    W3C Link Check 可以檢查 dead links, 而且只要輸入首頁,
    就可以依據指定深度自動向下檢查, 而且也可以檢查對外連結(外站).

    Link Checker 首先要設定檢查深度(Check linked documents recursively, recursion depth=?), 如果沒有設定, 它就只有檢查首頁.
    因此如果出現 deadlink, 就是在首頁.

    如果你設定檢查深度, 它就會逐一檢查此深度內的每一頁,
    在檢查某一頁開始時, 它會先顯示現正在檢查的 URL, 然後
    在逐一爬行該頁內每個 link.


    報表輸出很漂亮. 請參閱
    http://validator.w3.org/checklink

    請檢查三個你最常使用的網站, 看看連結的品質如何?
    紀錄有錯誤連結 (HTTP Error 404) 的次數.

    Lab: Form and Action, Part II

    Hand code a HTML or use Nvu 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: Form and Action

    "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 Nvu HTML editor.
    3. Open a new empty HTML file.
    4. Paste the search box into this new file.

    5. Use Nvu 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?

    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.
    (pages 41~46, 188~193 of Textbook)

    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

    2008年11月19日 星期三

    大三專題指導

    有興趣找我做專題同學,請參閱大學部專題特區。我們會先在1/16/2009 舉辦行動科技輔具冬令營隊,介紹專題內容與基礎能力。有興趣者,請自行組成專題團隊。

    本次招收10位同學,若干團隊(每隊2人),冬令營活動結束後,將進行個別團隊洽談。

    2008年11月17日 星期一

    Homework 11-17-2008

    1. Lab Making web pages accessible
    2. What is Web 2.0?
    3. What is mashup?

    中原大學電子商務學程 招生開始

    電子商務學程申請開始了,我擔任其中兩門課程
    有興趣者請參閱招生海報

    Lab Mashup 4

    Create a slide show of your album.

    Hint: 挪威奧斯陸之行

    Lab Mashup 3

    Check it out! Real time satellite tracking

    It is a mashup of Google Map and satellite teacking data.

    Use the website to track Formosa III satellite.

    More applications of Google Maps

    Lab Mashup 2

    For housing services, compare the three websites
    http://www.housingmaps.com
    http://www.urmap.com.tw/asp/kijiji/
    http://www.7house.com.tw

    List the differences in the user interface design and usability. Make comments
    by your use experiences.


    比較: 美感,直覺性,流暢,預期反應

    example: TMM

    Lab Mashup

    1. Upload a sample ppt to Google Docs.
    2. Publish the uploaded ppt.
    3. Embed the online ppt to your blog.

    The reason to do so is that the readers don't have to have ppt to view your presentation. For example, some users work with Linux or Unix, and others work with MacOS. They will appreciate you for doing so.

    Hint: a sample work

    2008年11月3日 星期一

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

    Lab Access Keys

    1. Use Firefox Accessibility Extension to identify the access keys defined in http://www.epa.gov.tw
    2. Use GreaseMonkey to detect the access keys defined in http://www.epa.gov.tw
    Hint: AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window.
    3. Are the two results in the above the same?

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

    Lab: Making images accessible

    1. Use Nvu or Notepad to edit the following homepage
    at http://bloggercamp.blogspot.com/2007/01/2007.html

    You can copy and paste the content to your Nvu.

    2. Take a look at the HTML 標籤, HTML 原始碼

    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.

    2008年10月27日 星期一

    Homework due 11/03/2008

    1. According to the following two papers, what are the current issues of Web accessibility in the Web 2.0 era? Please write a 500 word essay.

    Web 2.0: hype or happiness?
    Mary Zajicek
    Pages: 35 - 39
    Full text available: pdf formatPdf(290 KB)

    Enabling an accessible web 2.0
    Becky Gibson
    Pages: 1 - 6
    Full text available: pdf formatPdf(344 KB)

    這兩篇文章有版權保護,必須在校內下載。或是透過圖書館線上登入,進行身分認證。

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

    Lab: More on HTML

    Headings
    1. Copy and paste the Headings example athttp://www.w3schools.com/html/html_primary.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 Headings 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?

    Lab: HTML

    Preparation

    1. Using Microsoft Notepad, Copy and paste the HTML example atIntroduction to HTML
    2. Save the file as myfile.html
    3. Open the file using Firefox.

    New editor
    4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
    5. Copy and paste the HTML example at Introduction to HTML
    6. Verify your results on the screen.

    HTML & Accessibility

    HTML 

    Accessibility

    • What is web accessibility?
    • Accessible search engine
    • Use accesskeys
    Dive into Greasemonkey by Mark Pilgrim (free download)

    Lab: Accessibility by GreaseMonkey

    1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more
    2. Google Access Keys Enables navigation through Google search results.

    3. AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window. Added 2005-04-01 (not a joke). Find how many access keys have been defined atwww.ocac.gov.tw www.epa.gov.tw
    4. Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
    Reference: Dive into Greasemonkey by Mark Pilgrim (free download)
    http://dia.z6i.org/ (中文)

    Lab: Tongwen

    At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.

    2008年10月20日 星期一

    Homework 10-20-2008

    1. 參考 PageRank-Google 決定搜尋排名的關鍵技術
    以及Google.com 網站的官方解釋,簡要說明PageRank原理。

    2. Essay Writing on Google Docs (>500 Words)

    參考新蘇格蘭遊記,撰寫一篇你自己的秋日遊記。Use text, Google Maps, Photos, etc. as you like.
    Invite your friends to write comments.

    3. 關於你前ㄧ次散文作品,經過一個月之後你得到多少篇回應? 其中多少贊同,多少異議,多少具有實質內容?

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

    Lab: Greasemonkey

    1. Install Greasemonkey 0.8. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the

    2. 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?
    3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
    4. Install Web Developer Toolbar to examine cookies.

    Browsers

    • JavaScript, client side language turning homepage documents into rich user experiences
    • Cookie, what it is and how it works
    • GreaseMonkey, post-processing the webpages for Firefox

    Lab: Web Pageranking

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

    紐約時報 http://www.nytimes.com
    CNN http://www.cnn.com/
    張老師個人部落格


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

    參考資料:
    PageRank 介紹
    PageRank 的論文
    Google 廣告獲利模式

    2008年10月6日 星期一

    Homework 10/06/2008

    1. 請閱讀數篇其他同學的部落格(上次作業第一題),選擇其中三位同學在她(他)的部落格上,針對其散文給予評語或建議。

    2. 關於你的散文作品,你得到多少篇回應? 其中多少贊同,多少異議,多少缺乏實質內容(灌水,你好帥之類)? 這些回應對你有幫助嗎?

    3. 部落格是一種社會媒體,根據What is social media?ㄧ文,比較社會媒體與其他媒體之不同。

    4. 網站提供 RSS 內容餵送(feed) 有何好處?

    5. Firefox 與 IE 市佔率如何? Browser market share

    6. 比較個人化入口網,與常見商業入口網的差別。例如廣告,內容,應用,服務,個人化程度等等各方面的比較。

    7. Comment on the article Serious potential in Google's Browser

    Lab: Chrome

    Install Google Browser Google Chrome and Firefox 3.0, try a few websites and compare their performance. For example, youtube, blogspot, msn, and yahoo.

    2008年10月4日 星期六

    Lab: Google Docs

    1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
    2. Start writing.
    3. Publish the Word document.
    4. What's the URL of your document.
    5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
    6. Save your document as .doc and .pdf, the two common formats for documents.

    Hint: This is a sample Word document.

    News coverage:
    Google “Docs & Spreadsheets” Launches ,Oct 2006

    Lab: Personal Portal


    1. Enter
    http://www.google.com/ig

    The Google account is the same as your Blogger account.

    2. Rearrange the templates. And perhaps remove blocks that you don't need.

    3. Add new stuff. For now add the Google Reader, Google Docs, Google Group, Google Calendar, and GMail. You should be able to see the subscriptions in the Google Reader block of your personal portal.

    Lab: RSS Reader



    1. Enter Google Reader

    2. Try the following


    3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.

    2008年10月2日 星期四

    Notice

    10月13日網際網路系統設計課程,暫停壹次。

    I will present papers at ACM ASSETS 2008 in Halifax, Canada.

    2008年9月26日 星期五

    HTTP & RSS

    HTTP, Hypertext Transfer Protocol

    http is based on request-response model. If you don't send requests, there will be no responses from any servers at all.

    Limitations

    If you have a lot of blogs and news groups to read frequently, the request-response behaviors will cost you time to examine each content source respectively. Unfortunately, you may check into websites that have no updates since you checked in last time.

    RSS 2.0

    RSS 2.0 is a syndication standard using XML. With RSS 2.0, you can subscribe to the source feeds in RSS 2.0 format. Many RSS 2.0 readers can keep an unread list for you, so that you always see the latest updates from the information sources you subscribe to.

    Further Reading

    pp. 183-185 of Textbook.

    2008年9月22日 星期一

    Homework 9-22-2008

    1. 參考單車上的靈感,或是我愛談天你愛笑,開始用部落格書寫你的個人散文,並加上適當標籤。

    2. 一篇部落格是否只能使用一個標籤,如果不是,請舉出反例。 參考標籤(tag,或稱label)的定義,使用標籤有什麼好處? 標籤與分類有何不同?

    3. 閱讀 Ten steps to better blogs, 然後寫下你的心得。

    4.  Install Google Browser Google Chrome and Firefox 3.0, try a few websites and compare their performance. For example, youtube, blogspot, msn, and yahoo.

    5. Watch the video recording of KF Lee's keynote speech on WWW 2008 Beijing on Cloud computing. Feel free to write what you think.

    Due 9/29/2008 at 18:00. Please write your homework on your own blog.

    Introduction to Internet

    Inventor of the internet technology packet switching, Leonard Kleinrock

    " Dr. Leonard Kleinrock created the basic principles of packet switching, the technology underpinning the Internet, while a graduate student at MIT. This was a decade before the birth of the Internet which occurred when his host computer at UCLA became the first node of the Internet in September 1969."

    Tim Berners-Lee

    "In 1989 he invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread." He will serve as a keynote speaker at WWW2008.

    W3C

    Lab 5: Show comments on your blog

    1. 以一段程式自動擷取部落格的回應留言,讓你的部落格產生最新回應,沒有時差。
    2. 請你的同學給你一個 comment,是否能正確顯示在最新回應上。
    3. 實例

    Lab 4: Using labels

    Labels are key elements of Web 2.0.
    Professional blogs have labels. In this lab, you will learn how to put labels on your blogs to make them look professional.

    1. Check into your blog homepage.
    2. Enter "自訂"
    3. Follow the steps to create Label Block by drag and drops.
    4. Get back to your existing blog posts. Fill the blanks at the field Labels (文章的標籤).
    5. Save the changes.
    6. Back to the blog and check if the labels come up.

    Lab 3: Using Firefox

    Advantages of using Firefox.

    Outlines of Lab

    1. download Firefox 2.0

    2. control font size

    3. tabbed browsing

    4. subscribe to the course blog

    5. Using bookmarks to test RSS feed

    Help



    Hands on

    1. Easy control of font size (try ctrl+ & ctrl- as many times as you like)
    2. tabbed browsing (try ctrlT)
    3. RSS feed, and support of Blog. Use the RSS feed from http://iapblog.blogspot.com/
    to subscribe to it. Also subscribe to your own blog.

    Note:
    If your Firefox didn't work, you should check settings about proxy. It should be set as proxy.cycu.edu.tw at port 3128.

    2008年9月15日 星期一

    Homework 9-15-2008

    1 Complete Step 5 of Lab 2.
    2. Reading Assignments
    Read the sections on hypertext, http, WWW
    (page 181~187 of Reference Textbook) and selected reference

    Due 9/22/2008 at 18:00

    Lab 2: Put CYCU Map on Your Blog

    1. The latitude and longitude coordinates of CYCU campus location is +24° 57' 31.02", +121° 14' 28.12" and you can take a look at the satellite image
    http://maps.google.com/maps?q=24.9586,+121.24114

    2. Check into CommunityWalk
    which offers step-by-step tools to create personal maps.
    Use the "create a map" function to start your own map.

    3. Enter the CYCU coordinates to produce a code snippet that you can put into your blog. The code is under Share/Export tab.

    4. Copy and paste the code snippet into your blog just like you are writing your own blog post. Publish it.

    5. 同一張地圖上,新增 中原大學郵局 電學大樓 兩個地標

    2008年9月12日 星期五

    Let's start blogging

    1. 至 http://www.blogger.com 申請, 請以你的學號 (s開頭) 申請免費帳號。

    2. 張貼你的部落格的第一篇文章。一小段歡迎詞,或是簡短自我介紹,或是你最喜歡的事物與最不喜歡的事物,都可以。

    3. 建立一個連結到課程網站 http://iapblog.blogspot.com/
    建議你使用右上角"自訂"功能,新增一個區塊。一個區塊內可以置放多個連結。

    4. 日後請將你的隨堂練習與作業寫在你的 blog, 然後到
    Homework 或 Lab 的Comment 登錄作業blog網址就可以了.
    請勿將整個作業直接寫在老師部落格的Comment處。

    5. 尊重智慧財產權,引用他人文章須註明出處。並且應該合乎學術常規,以合理的方式引用。

    注意事項

    a. blog需正確設定時區顯示時間 。
    b. 請測試他人可否留言(comment)。以方便留下回應意見。

    tip

    How to insert a link at the following comment, please use the following HTML code.

    2008年6月20日 星期五

    Lab Web Stress Test

    1. Download Stress Test
    2. Take a look at the user manual.
    3. Test a static page.
    Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
    4. Test a dynamic page.
    Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
    5. Compare the response time of both pages and explain why.

    Lab Site Traffic Metrics

    1. Enter Sitemeter.
    2. Put a Sitemeter in your own blog.
    2. Check the site meter to see the daily traffic chart, the recent visitors by locations.

    Lab Testing User Interface

    For housing services, compare the three websites
    http://www.housingmaps.com
    http://www.urmap.com.tw/asp/kijiji/
    http://www.7house.com.tw

    List the differences in the user interface design and usability. Make comments
    by your use experiences.


    美感,直覺性,流暢,預期反應

    example: TMM

    2008年6月16日 星期一

    中原大學電子系輔具科技夏令營 2008

    你想過你正在學的電子專業可以為弱勢的人服務嗎?你想多了解無線行動運算與服務運算最新趨勢嗎?

    邀請熱情的妳/你參加中原大學電子系輔具科技夏令營 2008,結合先端科技為弱勢服務,就從這裡開始。

    報名:請在意見區寫上姓名即可。

    2008年6月8日 星期日

    Lab Google Mars (AJAX)

    1. Observe how Google Mars loads the map and does the zooming. Is the data downloaded once
    for all or retrieved on demand?

    2. HTML alone cannot perform the functions of Google Mars. So find out which code in the HTML
    source does the map things.

    Hints: You may use Nvu to determine what HTML tags are for what.

    Lab Simple Use of Web Service

    "we make a living by what we get, we make a life by what we give"

    Test Drive a web service
    1. Take a look at the schema of Zip Code Web Service.
    2. Use the lincense key eUhOTOJs9D2mcHU6SiL0CyMQvpJ3I3PqR2/fpRq4BOApWxzSzw7wD2FQ2mOmHEk+pq6iRBomQ4wuQl5EGOgfCitYgkQ3N4vl
    to use this web service or subsbcribe to it at Zip codes lookup To apply for the license key by yourselves, be sure to have an email box to receive it.
    2. Click GetPlacesInside and play with this operation
    3. Enter 61801 as zip code and see what you get in the result.
    4. Try again 92345 as zip code

    Question: Why do you need a license key to use the service?

    Web Services

    talk on web service

    AJAX 與 web service 有何異同?


    What is SOAP?

    SOAP is the Simple Object Access Protocol. It is used for information exchange and RPC, usually (but not necessarily) over HTTP. More information can be found at:

    Developmentor SOAP FAQ: http://www.soaprpc.com/faqs/SoapFAQ.html

    W3C specifications: http://www.w3.org/TR/SOAP/



    What is WSDL?

    WSDL is the Web Service Description Language. It provides a formal description of a web service, much like CORBA's IDL. The WSDL file is all you need to know how to call the web service; toolkits can generate proxy code from a WSDL file directly. The official WSDL definition is at http://www.w3.org/TR/wsdl.

    期末報告題目已公佈 Due: 6/22/2008 at 18:00

    進入

    2008年6月7日 星期六

    Homework 6-7-2008

    Content analysis做完之後,請針對分析數字結果,給予適當詮釋,背後的現象是什麼? (至少100字)

    2008年6月6日 星期五

    Lab Packet Sniffer

    1. Install Protocol Analyzer Ethereal at http://www.wireshark.org/
    2. Capture the packets at your Ethernet interface card.
    3. Enter a login required website that you often go to, such as web mail. Don't use the real account or password.
    4. Try to catch the packet that contains the password.

    叮嚀

    使用正版教科書,勿非法影印書籍及教材,以免侵犯他人著作權

    2008年6月4日 星期三

    Lab SSL

    1. Try Yam membership enrollment
    for using SSL encrypted Internet communications.
    2. Note the lock at the lower right corner is secured when SSL is enabled.
    3. Click the lock icon and a message window should pop up.
    4. What kind of encryption is used in this SSL? How many bits are there in the encryption key?
    5. Who issued the certificate you are seeing? (Who is the certificate authority, CA, for this website?)
    6. Until when is the certificate valid?
    7. What kind(s) of hash is/are used in the CA's digital signature?
    8. How many bits are there in the hash(es)?

    6-6-2008 Network Security

    Lecture on network secutiry and the theory of public key
    (Chapter 3 of Textbook)

    Secrect Key

    *a key for encryption is also for decryption
    *fast encryption and decryption
    *problem with key distribution
    *problem with keeping many keys

    Public Key

    *private key and public key
    *public usually posted on an open directory
    *private key must be kept in absolute private to oneself
    *good for encryption and signature

    Hash function
    *fixed length of 128 or 256 bits
    *fingerprint

    do Lab Hash

    Digital Signature
    * privated key encrypted fingerprint of a plain text
    *transmitted along with the plain text for verification

    Man-in-the-middle attack

    Digital Certificate
    * Public Key signed with Certificate Authority

    SSL (Secure Socket Layer)
    * Using Digital Certificate, Digital Signature, Public Key Encryption, Hash (Message Digest)
    * Instead of encrypting the sender's original text, only the session key generated by the sender is encrypted by the receiver's public key.
    * The session key is valid throughout a session and not any longer.
    * SSL is proposed by Netscape, Inc.
    * https is actually http enhanced by SSL. https uses port 443 while http uses port 80.

    範圍: 課本Chap. 3

    2008年5月30日 星期五

    Lab Hash

    1. Install SlavaSoft HashCalc
    2. Open the file readme.txt of this software
    3. Calculate the cash.
    4. Open another copy of HashCalc
    5. Open the file readme.txt and delete the first space fo the file.
    6. Calculate the hash of the modified file.
    7. Compare the hashes of two files.

    Lab Checking dead links

    W3C Link Check 可以檢查 dead links, 而且只要輸入首頁,
    就可以依據指定深度自動向下檢查, 而且也可以檢查對外連結(外站).

    Link Checker 首先要設定檢查深度(Check linked documents recursively, recursion depth=?), 如果沒有設定, 它就只有檢查首頁.
    因此如果出現 deadlink, 就是在首頁.

    如果你設定檢查深度, 它就會逐一檢查此深度內的每一頁,
    在檢查某一頁開始時, 它會先顯示現正在檢查的 URL, 然後
    在逐一爬行該頁內每個 link.


    報表輸出很漂亮. 請參閱
    http://validator.w3.org/checklink

    請檢查三個你最常使用的網站, 看看連結的品質如何?
    紀錄有錯誤連結 (HTTP Error 404) 的次數.


    教學評鑑

    今日上課助教將進行教學評鑑,請大家參與。

    Quiz

    1. Google Maps 使用了哪些網頁互動技術,請逐一說明。
    2. 什麼是DOM?請撰寫一段小程式說明之。
    3. XML 跟 JavaScript 有任何關聯嗎? 如果有關聯請舉例說明。如果沒有,請說明為什麼?
    4. AJAX 強調哪些特性? 其優缺點有哪些?
    5. 何謂 Social Software? 跟Web 2.0 關係為何?
    6. 做完 blog 的內容分析之後,你可以得到什麼推論,為什麼?
    7. 請比較微軟的Office 與Google 線上文件所使用技術與功能特點。
    8. 舉例說明 XML 如何在網站中使用。
    9. 部落格使用哪些技術,請簡要說明。
    10. 無障礙網頁技術有哪些?
    11. 如何增加網頁的互動性? 以一小段程式說明之。
    12. 什麼是 CGI? 繪圖說明以CGI為架構的網站系統。

    Lab XHTML Validation

    1. Use the W3C Markup Validation Service to check the XHTML sample.
    2. You may want to select the direct input option.
    3. How many errors and warnings are there?
    4. Fix the problem and recheck it until it is strictly XHTML 1.0 compliant.

    ref: Introduction to XHTML

    2008年5月23日 星期五

    給畢業生的贈言

    做太多的時候,何不停下來想想。想太多的時候,何不開始去做。

    隨時去問,我在做什麼,我懂我在做什麼嗎? 或許你就會真正發現什麼

    保持察覺週遭與同時也關照內心,練習專注,有時候原來看不清楚的東西,會豁然清晰。有時候做不到的事情,會頓時做到。

    經過苦,才會嘗到甜。

    專注在過程,盡情去做,做好每ㄧ個你該做好的,苦反而不苦,汗水讓你快樂。如果只專注在結果,原本可以是甜的歷程,卻反而讓你覺得其苦無比。

    只有在歷經過程中才有可能令人享受,ㄧ但你覺得完成,其實已經結束了。

    Find love in what you do and do what you love.

    思維的盲點

    人為什麼會出現思維的盲點? 在業界將近十年的經驗與大學教書生涯十來年的觀察,我發現思考事情時只考慮自己,沒有考慮團隊或他人,常常是一個思維盲點的起因。人天生自私,大部分的人 思考都是先從自己利益做起,這是無可厚非的。看到一些中原畢業生,有些人已經擔任重要公司的副總甚至負責人,他們的同學卻還在當一個自艾自怨的工程師,是 因為在校成績嗎?是因為工作表現嗎?都有可能,但是很明顯的,從他們的談吐可以發現明顯的不同,有些人總是想到自己,如何加薪如何讓自己不要太累,如何換 ㄧ家好ㄧ點公司? 有些人想得不一樣,如何讓新人更快進入狀況,我可以做出什麼貢獻? 如果能少從"我"出發,多一點"我們"的考量,我相信很多事後出現大問題的痛苦後悔可以減少。少一點為自己,不見得就是對自己不好,多一點為別人,生活也 許更精采。

    使用印表機,白紙廢紙任意丟棄,用完白紙不去補充,反正我印完了,茶葉倒在水槽,飲料包放在公用實驗桌上,看似一些小事,其實 都是一個學生真實自私小我的表現,我相信如果未來這些人的老闆看到這個景象,這些學生是很難找到工作的,很多人相信自己可以透過較好的包裝予人不同的形 象,但是不要小看那些社會上有歷練的人,是誰有大智慧? 是誰耍小聰明?

    經驗告訴我,能為別人著想的,思維出現盲點的機會較少,反之,只想到自己的研究的人,攤開研究計畫ㄧ看,簡直問題百出。上天有道,天公疼憨人,大概也適用於此吧!

    時間的巨輪

    同學說,時間好像一個巨輪,時間到了,就壓過現在你有的,把你推到下個階段。好比說,時間ㄧ到,就得去當兵,或是去準備考研究所,常常被壓得透不過氣來,時間ㄧ到,沒做好,有時不得不繳白卷,覺得無可奈何。

    時間和生命終結的確是我們最無法控制的事,該來就來,無論你在何處,跟誰相處,或是正在做什麼。人生的確無常,覺得無力感也是難免的。
    大自然的動物ㄧ樣面臨時間的巨輪與死神的鐮刀,但是可以看到很多動物選擇生命熱情與活在當下去因應,人想得比較多,不容易專著,因此熱情容易分散進而消失,在考慮未來不確定的時候,反而無法好好活在當下。

    真正的富有來自內心的滿足,而不是銀行的存款。真正的知識來自對知識的熱情,而不是外在的學位。所以問問自己,你真正想要做什麼,把你的生命力量用在你願意熱情追求的事物上,把熱情從ㄧ時的心情變成一種恆久的態度,關鍵就在於把生命放在你想做,想完成的事情上。

    為什麼要讀研究所

    同學說大三快大四了,為了以後考上研究所,只好跟著大家開始去補習,可是其實心裡想的是為什麼父母ㄧ定要我讀研究所,否則出路不好,自己卻只希望大學輕鬆唸書,以後只想當個平凡的人,現在開開心心過日子就好了,及時享樂不是更好嗎?何必去擔憂未來?

    這 個問題每年都有學生來問,是個普遍的問題,我在先前已經提過,首先必須去除凡事都以功利著眼的單向思維,關於讀書這回事,漢文化缺乏愛智的傳統,知識多以 實用為目的,知識是用來獲取別的東西達成某種目的的工具,因此很少人能夠享受知識本身的樂趣。知識與智慧本身就是目的,不需要只是ㄧ種獲取或達成某種俗世 目的的工具。去除知識的工具性,或許是進入知識領域,享受研究的大門。

    補習是個惡 習,讀書是自己的事,同學去補習通常是認為自己有惰性,去補習比較可以感受同儕壓力而努力,這是我相當不贊同的想法。反過來想,難道如果別人不讀書,你就 不想讀書了嗎?讀書只是用來競爭,用來比較高下嗎? 更何況,唸研究所看的是研究潛能,難道補習兩三科考試科目,就可以提高未來研究能力嗎? 我們需要的是具有好奇心,勇於創新,不怕失敗的人格特質,難道補習ㄧ些專業科目可以改造一個人好奇心,創新能力嗎?

    沒 有唸研究所,出路不好? 的確根據多方統計數據,發現學歷越高,未來收入的確呈現正相關,但是這是統計,不是絕對的,唸完研究所找不到工作時有所聞,大學畢業之後職場表現良好獲得 升遷也大有人在,在漫長的人生當中,讀書只是一個里程碑,尤其在職場上人格特質與工作態度遠比學歷重要,在人生中,生命基調與生活情調更影響幸福感受,不 少高學歷的人,顧著享受較為優渥的物質生活,一生過著與社會疏離的生活,知識是用來登上社會階級的工具,這樣單面向思維的人對別人有好處嗎? 對自己就有好處嗎?

    唸研究所沒有什麼不好,但是你為什麼要念? 想過了嗎? 衷心祝福你們。

    期末報告題目已公佈

    進入

    2008年5月22日 星期四

    Lab Content Analysis


    According to the scheme above, the content of comments was characterized by the three independent dimensions. The intention of the analysis was to reveal any emergent correlations among three attributes of comments collected in the dataset.

    The affective dimension was generally quite straightforward and lent itself to comparatively easy classification. To probe the range between agreement and disagreement requires more careful judgment and usually involves more reading between the lines. The boundary between reflection and non-reflection was somewhat blurred for some occurrences of comments. Some comments showed no reflection as all; some comments demonstrated sufficient reflection while others appeared to possess marginal reflection.

    Perform content analysis on the dataset of comments on the essay blogs.

    2008年5月18日 星期日

    企業界開始使用部落格作為用人程序

    企業界開始使用部落格作為用人程序,我的研究生因為部落格寫得很好,受到企業肯定,最後也被晉用。值得ㄧ提的是,企業會主動搜尋部落格,無論你是否事先告知。因此,如果你的部落格馬虎草率,應付了事,最好修完課之後進行關閉,以免日後應徵工作遭到拒絕。相反的,如果你表現良好,這個部落格將成為你的努力的直接証明。

    2008年5月16日 星期五

    隨堂測驗 5/30/2008

    Format: closed book, no computer, one double-sided A4
    Scope: Common sense of AJAX, DOM, JavaScript, XML, & CGI, Textbook Sec. 2-1, Appendix A
    time: 30 minutes

    準備方向: 上課大綱整理歷年考題

    Next Quiz: 6/13/2008

    期末報告題目

    Laszlo (Laszlo in 10 minutes),挑選一個範例進行個人研究,說明你為什麼挑選這個範例,這個範例讓你學到什麼概念,請你製作一個講義說明這個範例。請詳細解說程式與所產生畫面/介面。

    投影片請以Google Docs Slideshare 呈現,使用 Powerpoint 容易傳遞病毒,沒有安裝 Powerpoint 的人(Linux Users)無法開啟。

    Due: 6/22/2008 at 18:00

    Lab 27: Movie Player by AJAX

    1. Go to Laszlo and enter (Laszlo in 10 minutes).
    2. Study and play around the "scripting" and "video" examples.
    3. Use this script to control movie playing.
    4. If you push the "pause" button, the movie pauses.
    5. If you push the "resume" button, the movie resumes.

    Lab 28: Drag-and-Drop by AJAX

    1. Go to Laszlo and enter (Laszlo in 10 minutes).
    2. Study and play around the "drag-and-drop" example.
    3. Use this method to control movie playing as in the previous lab.
    4. If you drag and drop the photo to the "play" area, the movie plays.
    5. If you drap and drop the photo to the "pause" area, the movie pauses.

    AJAX

    recommended reading

    2008年5月2日 星期五

    Homework 5-2-2008

    [Lab]
    1. Open NVu
    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.

    [Reading] AJAX
    A New Approach to Web Applications Jesse Garrett
    AJAX 簡介 Brett McLaughlin

    閱讀以上兩篇文章,整理成500字以上摘要。

    No class on May 9

    I am presenting 2 papers at IEEE ISWPC, Santorini, Greece. Therefore, there will be no class on May 9.

    Conference dates: May 7~9, 2008

    Lab 26 Create Img using DOM

    1. Open Nvu
    2. Hand code a javascript that loads an image from Internet based on
    the DOM model.
    3. Use window.onload to load the image.
    4. Use a button to load the image. Try how onclick works.

    Hint: The javascript code should be enclosed by script tags.
    Reference: DOM (Document Object Model)
    Reference:
    Scripting For The 6.0 Browsers, By Scott Andrew LePera

    Talk at WWW 2008, Beijing

    Link

    Lab New stuff with Microsoft

    In the Harry Shum's keynote speech at WWW 2008 and one of the industrial tracks by Tao, Microsoft feature the following two search services, one called virtual earth and the other photosynth. They look like fun. Definitely, we should try them out.

    • http://maps.live.com (does not only provide satellite image which is low resolution but also aerial views taken by airplanes flight-by)

    2008年4月18日 星期五

    WWW 2008

    I will be presenting a paper at WWW 2008, a premium Internet-themed conference. This year it is held in Beijing, China. The conference is in cooperation with ACM, IFIP, and W3C.

    Conference Dates: Apr. 23-25, 2008.

    Lab 25: XML and XSLT, Part III

    1. Given the RSS of Class Blog, write an XSLT file
    and use Xray to generate an HTML that contains the titles of items in the RSS.

    2. Open the XML file by Word and you will see the document structure.

    3. View the formatted HTML file.

    Due May 2, 2008

    參考資料
    XSLT(專業ASP.NET XML程式設計 - 使用C#)

    lab 24: XSLT Part II

    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 23: Lab XML & XSLT

    1. Register and Download Xray, an XML, XSLT editor and processor.

    2. Given the the XML file and XSLT file ,
    use Xray to do the transformation of the XML into HTML.
    You have to replace [ with <.

    3. View the formatted HTML file.

    Introduction to 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:


    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.
    What kind of language is XSLT?
    • An XSLT style sheet is an XML document.
    • The basic processing paradigm is pattern matching.


    Operation of an XSLT Processor


    參考資料
    XSLT(專業ASP.NET XML程式設計 - 使用C#)

    2008年4月14日 星期一

    2008年4月11日 星期五

    Homework 4-11-2008

    1. What does a CGI output contain in the HTTP header? Hint: Such as Content-type. More details in Appendix A of Textbook.
    2. If you want to upload an mp3 file, should you use the GET or POST method? Why?
    3. Reading Assignments:XML (Page 187-188 on the Textbook)

    Bonus problem

    網址:http://140.135.8.178/bgbg/lihung.html
    Input 2008 4 7 8 55
    The program only works in IE but not in Firefox. What's the problem? How to fix it?

    Lab 22: Form and Action, Part II

    Hand code a HTML or use Nvu 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.

    2008年4月3日 星期四

    Lab 21: Form and Action

    "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 Nvu HTML editor.
    3. Open a new empty HTML file.
    4. Paste the search box into this new file.

    5. Use Nvu 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. Run your HTML by Firefox. What do you get?

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

    2008年3月28日 星期五

    Static, Dynamic Webpages and Common Gateway Interface

    CGI, Common Gateway Interface
    (pages 41~46, 188~193 of Textbook)

    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

    Homework 3-28-2008

    1 根據無障礙網頁設計原則

    • 為什麼不要開出新視窗?
    • 為什麼要使用貼切的網頁標頭? 而不是留白?
    • 定義快速鍵有什麼好處?

    2. According to Section 2.1 of Textbook, some websites are powered by databases in the back end and some are not. What are the purposes of using databases?

    3. Problem 1 & Problem 3 of Textbook on Page 55.

    4. Reading Assignments:XML (Page 187-188 on the Textbook)

    3-28-2008 缺課

    9326361
    9326312 (第二次點到)
    9326229 (遲到)

    三次未到,三振出局。

    Lab 20: accessibility checker

    1. Using A-Checker, Check the following 2 sites for accessibility.
    2. Do you see any improvements on accessibility after you apply ALT tags?

    ps:
    A-Checker (version 0.8.6)
    ATRC University Of Toronto, 1 January 2006
    Description: Online accessibility checker that tests web pages for conformance to various accessibility guidelines.
    Language: English, Italian
    Guidelines: WCAG 1.0, Section 508, Stanca Act, BITV
    Assistance: Generating Reports, Step-by-step evaluations
    Automatic checking: Single pages, Restricted pages
    Formats: HTML, XHTML
    Online service: Online checker
    Reports: HTML
    License: Free Software, Open Source

    Lab 19: Installing Mozilla/Firefox Accessibility Extension

    Mozilla/Firefox Accessibility Extension (version 0.99.1.1851)
    University of Illinois at Urbana/Champaign, 25 November 2005
    Description: The Mozilla/Firefox Accessibility Extension adds features to Mozilla or Firefox to make it easier for people with disabilities to view and navigate web content based on the structural markup used to create the web page. The Mozilla/Firefox accessibility extension can be used directly by everyone to navigate the structure of a HTML web resource. It can be used by authors to check their structural markup to make sure it matches the actual content structure of the resource.
    Language: English, Spanish
    Guidelines: WCAG 1.0, Section 508
    Assistance: In-page feedback, Page transformation
    Formats: HTML, XHTML
    Browser: Mozilla/Firefox
    License: Free Software, Open Source

    Lab 18: Webpage Accessibility

    Use Nvu or Notepad to edit the following homepage
    at http://bloggercamp.blogspot.com/2007/01/2007.html

    1. You can copy and paste the content to your Nvu.

    2. Take a look at the HTML 標籤, HTML 原始碼

    3. Save your editings and preview your webpage using Firefox

    4. Make the webpage accessible by
    adding ALT text to the images.

    Lab 17: More on HTML

    Headings
    1. Copy and paste the Headings example at http://www.w3schools.com/html/html_primary.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 Headings example at http://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?

    Lab 16: HTML

    Preparation

    1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction to HTML
    2. Save the file as myfile.html
    3. Open the file using Firefox.

    New editor
    4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
    5. Copy and paste the HTML example at Introduction to HTML
    6. Verify your results on the screen.

    Talk Outline: HTML & Accessibility

    HTML

    Accessibility

    Dive into Greasemonkey by Mark Pilgrim (free download)

    2008年3月21日 星期五

    Papers: Web 2.0 and Accessibility

    Web 2.0: hype or happiness?
    Mary Zajicek
    Pages: 35 - 39
    Full text available: pdf formatPdf(290 KB)

    Enabling an accessible web 2.0
    Becky Gibson
    Pages: 1 - 6
    Full text available: pdf formatPdf(344 KB)

    WWW 2008

    I will be attending WWW 2008, a premium Internet-themed conference. This year it is held in Beijing, China. The conference is in cooperation with ACM, IFIP, and W3C.

    Lab 15: Accessibility by GreaseMonkey

    1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more
    2. Google Access Keys Enables navigation through Google search results.

    3. AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window. Added 2005-04-01 (not a joke). Find how many access keys have been defined at www.ocac.gov.tw www.epa.gov.tw
    4. Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
    Reference: Dive into Greasemonkey by Mark Pilgrim (free download)
    http://dia.z6i.org/ (中文)

    Homework 3-21-2008

    1. Do Lab 15.

    2. Check into the government-sponsored web accessibility website.

    At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download the
    presentation materials. What is web accessibility?

    Lab 14: Tongwen

    At Firefox installed with Greasemonkey, install the Simplified-to-Traditional character conversion tool Lab Tongwen.

    Lab 13: 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.

    Lab 12: Greasemonkey

    1. Install Greasemonkey 0.7. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the

    2. 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?
    3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
    4. Install Web Developer Toolbar to examine cookies.

    Talk outline: Browsers

    Browsers (Textbook, pp. 57-58 )
    • Business values
    • architecture
    Tools for Browsers
    • JavaScript, client side language turning homepage documents into rich user experiences
    • Cookie, what it is and how it works
    • GreaseMonkey, post-processing the webpages for Firefox

    2008年3月15日 星期六

    Homework 3-14-2008

    1. 參考 PageRank-Google 決定搜尋排名的關鍵技術
    以及Google.com 網站的官方解釋,簡要說明PageRank原理。

    2. Essay Writing on Google Docs

    參考鳳凰城動物園遊記,撰寫一篇你自己的春日遊記。如果是多人出遊,請嘗試合寫的方式。(Teamwork editing)


    3. 閱讀課本電子商務系統第一章,並做成三頁摘要。

    ps. 這次我們要使用Google Docs來書寫,請參考Google Docs。

    2008年3月14日 星期五

    Lab 11: Web Pageranking

    Lab Google PageRank

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

    紐約時報 http://www.nytimes.com
    CNN http://www.cnn.com/

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

    參考資料:
    PageRank 介紹
    PageRank 的論文
    Google 廣告獲利模式

    Lab 10 Keep track of blogs

    Use Technorati to measure the authority of blogs and show how many links the following blogs have.

    Scobleizer http://scobleizer.wordpress.com/
    Techcrunch http://www.techcrunch.com/
    Engadget http://www.engadget.com/
    Reflection http://www.chieftain.idv.tw
    Java http://javaatcycu.blogspot.com
    yours

    Lab 9 Online teamwork editing

    1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
    2. Start writing.
    3. Publish the Word document.
    4. What's the URL of your document.
    5. Add the Google Docs to your personal portal. At the portal page, you should be able to see the active documents.
    6. Save your document as .doc and .pdf, the two common formats for documents.

    Hint: This is a sample Word document.

    News coverage:
    Google “Docs & Spreadsheets” Launches ,Oct 2006

    2008年3月7日 星期五

    Homework 3-7-2008

    1. 請閱讀數篇其他同學的部落格(上次作業第一題),選擇其中三位同學在她(他)的部落格上,針對其散文給予評語或建議。

    2. 關於你的散文作品,你得到多少篇回應? 其中多少贊同,多少異議,多少缺乏實質內容(灌水,你好帥之類)? 這些回應對你有幫助嗎?

    3. 部落格是一種社會媒體,根據What is social media?ㄧ文,比較社會媒體與其他媒體之不同。

    4. 網站提供 RSS 內容餵送(feed) 有何好處?

    Lab 7: RSS

    1. Enter Google Reader

    2. Try the following

    • iapblog.blogspot.com
    • New York Times
    • http://yourblog.blogspot.com/feeds/comments/default
    3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.
    (Hint: Examine Yam's RSS feed. Use IE to view original XML.)

    Lab 8: Personal Portal

    1. Enter
    http://www.google.com/ig

    The Google account is the same as your Blogger account.

    2. Rearrange the templates. And perhaps remove blocks that you don't need.

    3. Add new stuff. For now add the Google Reader, Google Docs, Google Group, Google Calendar, and GMail. You should be able to see the subscriptions in the Google Reader block of your personal portal.

    2008年3月6日 星期四

    HTTP & RSS

    HTTP, Hypertext Transfer Protocol

    http is based on request-response model. If you don't send requests, there will be no responses from any servers at all.

    Limitations

    If you have a lot of blogs and news groups to read frequently, the request-response behaviors will cost you time to examine each content source respectively. Unfortunately, you may check into websites that have no updates since you checked in last time.

    RSS 2.0

    RSS 2.0 is a syndication standard using XML. With RSS 2.0, you can subscribe to the source feeds in RSS 2.0 format. Many RSS 2.0 readers can keep an unread list for you, so that you always see the latest updates from the information sources you subscribe to.

    Further Reading

    pp. 183-185 of Textbook.

    2008年2月29日 星期五

    Lab 6: Show comments on your blog

    1. 以一段程式自動擷取部落格的回應留言,讓你的部落格產生最新回應,沒有時差。
    2. 請你的同學給你一個 comment,是否能正確顯示在最新回應上。
    3. 實例

    Homework 2-29-2008

    1. 參考單車上的靈感,開始用部落格書寫你的個人散文,並加上適當標籤。

    2. 一篇部落格是否只能使用一個標籤,如果不是,請舉出反例。 參考標籤(tag,或稱label)的定義,使用標籤有什麼好處? 標籤與分類有何不同?

    3. 閱讀 Ten steps to better blogs,(You must download the pdf of the full text.) 然後寫下你的心得。(此文章必須在校內授權範圍內下載,在校外必須先設定proxy並且先登入圖書館)

    4. Read Pages 184~188 of Textbook. Answer the problems 7, 8, and 9 on Page 195.

    Due 3/7/2008 at 13:00. Please write your homework on your own blog.

    Be sure to list the references that have been used to complete the homework.

    Lab 5: Adding Labels for Blogs

    Labels are key elements of Web 2.0.
    Professional blogs have labels. In this lab, you will learn how to put labels on your blogs to make them look professional.

    1. Check into your blog homepage.
    2. Enter "自訂"
    3. Follow the steps to create Label Block by drag and drops.
    4. Get back to your existing blog posts. Fill the blanks at the field Labels (文章的標籤).
    5. Save the changes.
    6. Back to the blog and check if the labels come up.

    Lab 4: Adding Links on Your Blog

    1. Check into your blog homepage.
    2. Enter "自訂"
    3. Select "連結清單"
    4. Write down "http://iapblog.blogspot.com/" and the title as "網際網路應用系統設計"
    5. Write down "http://minstral.blogspot.com/" and the title as "Prof Chang's Blog"
    6. Add your own favorite links.

    Introduction to Internet

    Inventor of the internet technology packet switching, Leonard Kleinrock

    " Dr. Leonard Kleinrock created the basic principles of packet switching, the technology underpinning the Internet, while a graduate student at MIT. This was a decade before the birth of the Internet which occurred when his host computer at UCLA became the first node of the Internet in September 1969."

    Tim Berners-Lee

    "In 1989 he invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread." He will serve as a keynote speaker at WWW2008.

    W3C

    Lab 3: Using Firefox

    Advantages of using Firefox.

    Outlines of Lab

    1. download Firefox 2.0

    2. control font size

    3. tabbed browsing

    4. subscribe to the course blog

    5. Using bookmarks to test RSS feed

    Help



    Hands on

    1. Easy control of font size (try ctrl+ & ctrl- as many times as you like)
    2. tabbed browsing (try ctrlT)
    3. RSS feed, and support of Blog. Use the RSS feed from http://iapblog.blogspot.com/
    to subscribe to it. Also subscribe to your own blog.

    Note:
    If your Firefox didn't work, you should check settings about proxy. It should be set as proxy.cycu.edu.tw at port 3128.

    2008年2月22日 星期五

    Homework 2-22-2008

    1. Name 3 blogs you have read recently. For what reasons do you read these blogs?

    推薦:
    2. Based on CommunityWalk, compile a campus directory that tells the locations of major buildings at CYCU. Place the directory on your own blog by posting the code snippet CommunityWalk
    generates.

    3. Reading Assignments
    Read the sections on hypertext, http, WWW
    (page 181~187 of Textbook)

    Due 2/29/2008 at 13:00

    Lab 2: Put CYCU Map on Your Blog

    1. The latitude and longitude coordinates of CYCU campus location is +24° 57' 31.02", +121° 14' 28.12" and you can take a look at the satellite image
    http://maps.google.com/maps?q=24.9586,+121.24114

    2. Check into CommunityWalk
    which offers step-by-step tools to create personal maps.
    Use the "create a map" function to start your own map.

    3. Enter the CYCU coordinates to produce a code snippet that you can put into your blog. The code is under Share/Export tab.

    4. Copy and paste the code snippet into your blog just like you are writing your own blog post. Publish it.

    Lab 1 Start Blogging

    1. 至 http://www.blogger.com 申請, 請以你的學號 (s開頭) 申請免費帳號。

    2. 張貼你的部落格的第一篇文章。一小段歡迎詞,或是簡短自我介紹,或是你最喜歡的事物與最不喜歡的事物,都可以。

    3. 日後請將你的隨堂練習與作業寫在你的 blog, 然後到
    Homework 或 Lab 的Comment 登錄作業blog網址就可以了.
    請勿將整個作業直接寫在老師部落格的Comment處。

    4. 尊重智慧財產權,引用他人文章須註明出處。並且應該合乎學術常規,以合理的方式引用。

    注意事項

    a. blog需正確設定時區顯示時間 。
    b. 請測試他人可否留言(comment)。以方便留下回應意見。

    tip

    How to insert a link at the following comment, please use the following HTML code.

    從iPod 談起

    iPod 是一個公認的成功產品,Apple 公司的營收數字與股價也映證了這個成功。想一想,如果這個產品是你設計的,那麼你的公司是否也會獲得同等規模的成功? 為什麼?

    2008年2月21日 星期四

    Introduction to Mobile Web Services

    download the handout by Prof Chang.

    XHTML validation project

    1. Use the W3C Markup Validation Service to check the XHTML sample.
    2. You may want to select the direct input option.
    3. How many errors and warnings are there?
    4. Fix the problem and recheck it until it is strictly XHTML 1.0 compliant.

    課程進度

    --------------------------------------------------------
    Tools
    Tools 駕馭網路的工具性軟體
    --------------------------------------------------------
    AJAX
    AJAX 機器與人很活潑地溝通的技術
    --------------------------------------------------------
    XML
    XML 機器與機器彼此溝通的技術
    --------------------------------------------------------
    HTML
    HTML 機器與人溝通的技術
    --------------------------------------------------------
    Accessibility
    Accessibility 邁向無障礙網路
    --------------------------------------------------------
    Browser extension
    Browser extension 擴充瀏覽器的功能
    --------------------------------------------------------
    Google Services
    Google Services 線上服務
    --------------------------------------------------------
    Blog
    Blog 人與人在網路上溝通的技術
    --------------------------------------------------------

    2008年1月8日 星期二

    小考成績

    70~100

    9345126
    9426361
    9428215
    9444162
    9522333
    9528237

    50~65

    9326109
    9326266
    9326320
    9426352
    9428246
    9526240

    25~45

    9326161
    9326269
    9326348
    9426125
    9426349
    9428234
    9526112
    9526134
    9526201
    9526243

    0~20

    9326203
    9326222
    9326324
    9326342
    9326357
    9526114
    9526117
    9526129
    9526138
    9526141
    9526147
    9526202
    9526239
    9526324
    9526351

    absence
    9526304

    2008年1月7日 星期一

    挑戰程式高手 你也做得到

    歡迎參加寒假中舉辦的
    2008 Web 2.0 無線行動程式設計成長冬令營
    詳細課程(1-08-2008 edition)

    Lab 29 Google Group

    Have at leaser 2 persons in a group, one of them being the owner of Google Group.

    1. Decide on the group name, and kick off some subjects.
    2. Compare this with other BBS you might have used.
    3. Can you think of any use of the Forum in your activities?

    Lab 28 Packet Sniffer

    1. Install Protocol Analyzer Ethereal at http://www.wireshark.org/
    2. Capture the packets at your Ethernet interface card.
    3. Enter a login required website that you often go to, such as web mail. Don't use the real account or password.
    4. Try to catch the packet that contains the password.

    Lab 27 Web Analytics

    1. Enter Sitemeter.
    2. Put a Sitemeter in your own blog.
    2. Check the site meter to see the daily traffic chart, the recent visitors by locations.

    2008年1月6日 星期日

    Quiz

    1. What is Firefox? List some of its features.
    2. Google Maps uses a lot of AJAX programming. List what AJAX does in Google Maps.
    3. Why is AJAX a new approach to web applications?
    4. What is Document Object Model?
    5. Describe a way to make an image accessible in homepages?
    6. How does AJAX improve user response of web applications?
    7. What is CGI? Explain it and list some examples.
    8. What is XSLT? Explain it and list some examples.