2007年12月31日 星期一

AJAX, recommended reading

A New Approach to Web Applications Jesse Garrett
AJAX, Brett McLaughlin
A complete introduction to AJAX (Brett McLaughlin)

網路安全

學校的公用電腦有可能被植入木馬程式,因此你的帳號密碼可能已經被木馬程式紀錄並且流出,這些駭客集團會到各網站逐一測試你所流出的帳號密碼,如果你常使用的網站用的是同ㄧ組帳號密碼,那麼你在其他網站的個人資料也可能被入侵流出。
最近不少知名網站被駭客入侵,個人資料外洩日益頻繁。因此建議你儘速找一台沒有被植入木馬程式的電腦,更改你重要網站的密碼。

Lab 26 Google Presentation

1. Upload a sample Powerpoint to Google docs.
2. Publish this slide presentation so that it is viewable by the general public.
3. Start your presentation.
4. Invite the person sitting next to you to join your presentation.
5. You are supposed to take the control of the presentation. When you change the slides, your audience should be able to see the slide changed at the same time.

Hint: Some examples.

Lab 25 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?

2007年12月29日 星期六

1/7/2008 隨堂測驗

Format: open book, no computer
Scope: Common sense of AJAX, DOM, JavaScript, XML, & CGI, Textbook Sec. 2-1, Appendix A
time: 15 minutes

2007年12月18日 星期二

期末報告題目

Laszlo (Laszlo in 10 minutes),挑選一個範例進行個人研究,說明你為什麼挑選這個範例,這個範例讓你學到什麼概念,請你製作一個講義說明這個範例。

Due: 12/31/2007 at 18:00

2007年12月17日 星期一

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

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

2007年12月10日 星期一

Homework 12-10-2007

1. List three ways of creating interactive webpages.
2. Lab DOM and Javascript.
3. Reading Assignments: AJAX by Jeremy Keith

AJAX

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

AJAX examples and counterexamples

Lab 22 DOM and JavaScript

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.

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

互動式網頁程式技巧

操作以下這個網頁
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.

DOM (Document Object Model)

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)

references:

AJAX by Jeremy Keith

2007年12月4日 星期二

2007年12月3日 星期一

給未來大三專題生

張老師實驗室大學部專題簡介

建議對象:
  • 有心投入專題,願意花時間探索新的程式設計方法,能夠融入研究團隊也能獨立解決問題。
  • 願意加入服務學習,參與社會公益者尤佳。

基本資料



Homework 12-3-2007

Do lab 19.

lab 20: 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. View the formatted HTML file.

lab 19: 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.

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

寒假崔媽媽基金會實習

目的: 發揮電子系所學科技專長,協助非營利組織開發Web2.0 新世代系統,協助社會上的弱勢租屋者,以服務學習方式,成長自我更造福他人。(學長學姊怎麼說)

時間: 寒假中約七天,須先接受兩天特訓,學習程式技巧。詳細時間尚在排定中。

專長需求: 以修過Java 程式設計或網際網路應用為佳,修過C/C++ 也歡迎。

酬勞: 無金錢酬勞(自願性志工服務),但是你的收穫將是金錢無法比擬。

人數: 以3~5人為原則

報名: 即日起向老師報名,你可以寫在 Comment處留下姓名。

2007年11月26日 星期一

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

    Homework 11-26-2007

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

    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

    Lab 17: 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 16: 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?

    2007年11月12日 星期一

    Homework 11-12-2007

    根據無障礙網頁設計原則

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

    預告: 11/19 期中考週不上課

    ps. Lab 15 特優作品

    Lab 15 Webpage Accessibility

    Use Nvu to edit the following homepage
    at http://www.epa.gov.tw

    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 14: 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/ (中文)

    2007年10月29日 星期一

    Homework 10-29-2007

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

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

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

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

    11-5-2007 停課ㄧ次

    11/5 老師出國參加 ACM/IEEE WI 2007, San Francisco, US,請公假,停課ㄧ次。

    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.

    2007年10月27日 星期六

    賀: 學生研究成果獲選美國ACM ASSEST 2007 無障礙科技競賽前四名

    士楷到美國鳳凰城參加ACM無障礙科技研究大賽結果,題目: A Novel Wayfinding System with Deviation Recovery for Individuals with Cognitive Impairments

    進入決賽中的四位之ㄧ,另外三位都是美國團隊 Northeast U, SUNY, Wright State U.,雖沒有獲首獎,我跟士楷講, 能夠在ACM任何比賽入圍已經是很大的肯定,也是ㄧ輩子都會記得的經驗。

    2007年10月22日 星期一

    Lab Technorati

    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

    Homework: 10-23-2007

    1. Lab 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/
    Monday 購物 http://www.monday.com.tw/

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

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

    2. Essay Writing on Google Docs

    參考鳳凰城動物園遊記,撰寫一篇你自己的秋日遊記。
    這次我們要使用Google Docs來書寫,請參考Google Docs

    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

    評分格式: 智慧型精障者走失偵測系統之行動運算

    你覺得這篇論文創新性如何? 非常好 好 普通 不好 很差

    你覺得這篇論文嚴謹度如何?是否合乎科學實證的精神? 非常好 好 普通 不好 很差

    你覺得簡報內容呈現如何?是不是清晰簡明? 非常好 好 普通 不好 很差

    你覺得這篇論文對社會貢獻如何? 非常好 好 普通 不好 很差

    你覺得這篇論文對學術貢獻如何? 非常好 好 普通 不好 很差

    請自由表達你對此篇論文的意見或建議。

    評分格式: 『實境導航,有障無礙』 無線行動化的社區智慧型空間- 認知障礙者路徑指引系統

    你覺得這篇論文創新性如何? 非常好 好 普通 不好 很差

    你覺得這篇論文嚴謹度如何?是否合乎科學實證的精神? 非常好 好 普通 不好 很差

    你覺得簡報內容呈現如何?是不是清晰簡明? 非常好 好 普通 不好 很差

    你覺得這篇論文對社會貢獻如何? 非常好 好 普通 不好 很差

    你覺得這篇論文對學術貢獻如何? 非常好 好 普通 不好 很差

    請自由表達你對此篇論文的意見或建議。

    2007年10月8日 星期一

    網址與連結示範

    設計網頁,最好從使用者的角度來思考。如果我們列出ㄧ個 URL,也許這樣的來源資訊已經夠清楚,但是對使用者來說,點選才是真正想做的。以下是幾個不同的作法:

    1. 錯誤示範,這是不能點選的網址:

    http://對不起我不能被點選.com.tw

    2. 有改進,可以點選了。

    http://minstral.blogspot.com

    3. 不列出網址,直接產生可以點選的標題。這是更好的作法。

    這是電子商務的課程

    Homework 10-8-2007

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

    2. 關於你的散文作品,你得到多少篇回應? 這些回應對你有幫助嗎?

    3. Use IE to view original XML of Yam's RSS feed. What are the fields of the RSS 2.0?
    You may read the lecture notes to give you some of the ideas.

    Lab 7: Show comments on your blog

    以一段程式自動擷取部落格的回應留言,讓你的部落格產生最新回應,沒有時差。

    專業服務


    • 學術服務
    1. TANET 2008, 2007, 2006 論文審查
    2. panel of TANET 2007, topic: 行動M化關懷社群論壇
    3. 2007年 全國電信研討會論文審查
    4. 電子商務學報論文審查
    5. 論文審查 JAE, 2008

    • 專業服務
    1. 專業演講: 1997-2001,
    2. 專業演講: 2001-
    3. 「96年度中研院網站評獎」評獎委員

    • 委託研究
    1. 我國網路安全伺服器數量調查委託研究案 2006, 2007



    • 歷年計畫
    1. 我國網路安全伺服器數量調查委託研究案 2006
    2. 綠色採購網建置與維運 共同主持人 6/2005~12/2005 行政院環保署 已結案 720,000
    3. 衛生保健便民網站維運 主持人 1/2005~12/2005 行政院衛生署 已結案 5,940,000
    4. 無線寬頻示範應用計畫(台南縣) 主持人 11/2004~12/2004 經濟部工業局 已結案 2,750,000
    5. 無障礙服務入口網站委外建置案 主持人 6/2004~11/2005 僑委會 已結案 4,000,000
    6. 政府入口網"我的e政府"計畫 共同主持人 5/2004~12/2004 行政院研考會 已結案 2,933,000
    7. 電視妙管家網站計畫 主持人 12/2003~6/2004 行政院新聞局 已結案 1,260,000
    8. 衛生保健便民網站建置 主持人 11/2003~12/2004 行政院衛生署 已結案 9,900,000
    9. 無線寬頻示範應用計畫(台北縣) 主持人 9/2003~2/2004 經濟部工業局 已結案 10,780,000
    10. 多媒體資料中心建置計畫 共同主持人 7/2003~11/2003 國民健康局 已結案 4,118,000
    11. 兒童環保教育網站 主持人 3/2003~9/2003 行政院環保署 已結案 1,380,000
    12. 教育入口網 共同主持人 3/2003~7/2003 台北市教育局 已結案 9,190,000
    13. 整合型運動入口網計畫 共同主持人 10/2002~12/2005 行政院體委會 已結案 21,000,000

    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.

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

    Lecture 10-8-2007 http and 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.

    2007年10月1日 星期一

    Homework 10-1-2007

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

    2. 一篇部落格是否只能使用一個標籤,如果不是,請舉出反例。

    3. 參考標籤(tag,或稱label)的定義,使用標籤有什麼好處? 標籤與分類有何不同?



    Due 10/8/2007 at 13:00. Please write your homework on your own blog.

    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. Add your own favorite links.

    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.

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

    W3C

    2007年9月17日 星期一

    Homework 9/17/2007

    1. Lab 2
    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 10/1/2007 at 18:00 p.m.

    2007年9月15日 星期六

    Lab 3: Using FireFox 2.0

    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.

    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.


    View Larger Map

    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.

    2007年8月11日 星期六

    WWW 2008

    WWW 2008, sponsored by ACM & W3C
    Social Networks and Web 2.0
    Beijing, Apr. 21-25, 2008
    http://www2008.org/index.html
    Due November 1, 2007
    把握機會,努力看看

    2007年6月22日 星期五

    Lab Google Group

    3 person in a group, one of them being the owner of Google Group.

    Decide on the group name, and kick off some subjects.

    Lab Collective Decision

    On the three blogs Franson 芳鄰 & 研究生,
    read the 全人關懷獎 presentation slides and write down your comments on their blogs, respectively.

    In the comment below, make your vote as to which the winner is.

    2007年6月19日 星期二

    賀本實驗室全人關懷獎皆通過第一階段評選

    精神障礙就業小組、崔媽媽科技服務工作隊、芳鄰社區服務工作小組皆通過第一階段評選,
    第二階段評選定於 6/23.

    評選網址
    http://blog.roodo.com/service_learning/archives/3473039.html

    2007年6月15日 星期五

    中原畢業生

    不少中原大學的校友在業界非常傑出,像我認識ㄧ位IBM公關協理姓夏,負責台灣區整個千人公司的形象,是我看過非常幹練的公關人,他是中原畢業的。 我有ㄧ位學生,長相酷似金城武,曾在IBM訓練Java新進人員,很多人都是後來才知道他是中原電子的背景,當然這無損於同事對他的敬重,十年前他是台灣 第 一個取得IBM電子商務認證工程師的人。

    在業界要贏得別人的看重,最重要的是態度與實力。中原人沒有台清交的光環,甚至有些公 司原本只要看到中原的應徵函就直接丟進垃圾桶的,後來為什麼情況改變了,因為他們看到社會上一些傑出中原人的態度與實力,這些中原人原本可能是他們商場的 對手或是合作夥伴,日子久了,一些成見就會改變。

    這是為甚麼我對研究生的態度絕對嚴格要求,做研究沒有摸魚的空間,你們畢業之後職場上更 不會有。好的做人態度以及敬業精神是贏得別人看重的第一步,接下來就是實力,這是跑職場馬拉松的本錢。現在刻苦耐勞養成自己的實力,未來你才有本事不把台 清交的光環看在眼裡,真正以中原人為榮。

    2007年6月13日 星期三

    為什麼要學寫程式

    電子系同學大多不重視寫程式,想不透是誰給他們寫程式不重要的錯誤概念,事實上寫程式對電子系同學的重要性絕對不亞於資工系,無論是通訊,數位,用 到程式的機會極高。現在的系統講究智慧,智慧從哪裡來? 當然是軟體。以手機為例,手機硬體大同小異,功能差異性主要來自軟體。所謂科技來自人性,軟體居功厥偉。

    電子系不等於焊電路接麵包板而已,所以千萬不要輕視寫程式。寫程式的好處如下:

    • 以後工作用得上。現在的世界是買硬體送軟體,以後是買軟體送硬體。
    • 訓練清晰頭腦,培養邏輯思考能力。
    • 快速試做一個概念,因為你在耗時耗費實做之前,即可先用軟體程式模擬。如果結果不錯,再去實做不遲。

    2007年6月8日 星期五

    科學志工感言

    Mr. 超的崔媽媽基金會服務心得

    ...透過這次的學習,我認為幫忙別人將會成為我生活中的一種態度,或許這是不切實際的但是這將可以使我把眼光放低全心投入去做每件事情,學習到了謙卑及克服挫折的能力,...

    蕭宇宏的服務心得

    ...拋開電子系傳統理論例如抽象的電磁學以及工數學科,能以我們所學到屬於比較實用的知識,來作為響應崔媽媽關懷社會的一個小小的行動,算是很欣慰的。...

    GG的全人關懷

    ...從做專題可以了解ㄧ些事情,有時候和老師和助教MEETING,雖然只有短短的1小時,但中間獲得的東西遠遠大於一二年級課程的內容。...

    電子三人

    ...我們所學到,主要是SKYPE API的了解與C#語言的使用。在其過程中,也了解到解答問題的困難,與解決問題所需的耐性與堅持,也藉由此專題,進一步了解與人合作的重要性。...

    小黑

    ...
    這可以提供我們一個與外面公司接觸的學習經驗,不同於校內的學習,透過接觸業界的專業人士,學會與人想處、增進人際關係等都是很好的學習經驗。...

    2007年6月1日 星期五

    三創競賽觀後感 (2)


    請閱讀其他同學的部落格,選擇其中三位同學在她(他)的部落格上,針對觀後感給予評語或建議。

    三創競賽觀後感


    競賽實況。本實驗室蔡士楷與朱衍印於全校三創競賽獲得佳作


    請在你的部落格寫下300字心得。

    Lab Drag-and-Drop by AJAX

    1. Go to Laszlo
    2. Study and play around the "drag-and-drop" example.
    3. Use this method to control music playing of the song "Where to begin".
    4. Add the song to the program.
    5. Change the photo to the CD title.
    6. If you drag and drop the photo to the "play" area, the music plays.
    7. If you drap and drop the photo to the "pause" area, the music pauses.

    Ajax

    Why Ajax

    • HTML is basically for hyperlinked documents and offers very limited interactions.
    • AJAX brings desktop like interactions to the web and complements HTML in terms of graphic user interfaces.

    Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

    • standards-based presentation using XHTML and CSS;
    • dynamic display and interaction using the Document Object Model; The structure of the DOM exposes new powerful methods which allow you access and manipulate the elements of any document.
    • data interchange and manipulation using XML and XSLT;
    • asynchronous data retrieval using XMLHttpRequest;
    • and JavaScript binding everything together. It has comprehensive control over every page element.
    Reference

    Lab Movie Player by AJAX

    1. Go to Laszlo
    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.

    2007年5月25日 星期五

    Lab DOM and JavaScript

    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.

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

    2007年5月18日 星期五

    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)

    Homework 5-18-2007

    1. 根據FIND網路脈動 ,企業於Web2.0的使用上,仍緩步前進,這份報告已歸納哪些原因?你認為應該還有哪些原因?
    2. 閱讀兩篇有關網站行銷效益評估的論文,撰寫500字到1000字心得。
    3. Read the introduction of DOM.

    CGI

    CGI, Common Gateway Interface
    (page 188~193 of Text)

    URL that sends a request by CGI

    http://maps.google.com/maps?q=24.9586,+121.2411

    Lab Form and Action, Part II

    Hand code a 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. Run your HTML by Firefox. What do you get?

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

    2007年5月11日 星期五

    Homework 5-11-2007: XSLT Part II

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

    2. View the formatted HTML file.

    2007年5月5日 星期六

    聯電暑期工讀計畫

    聯電響應本系所提出之產業實習課程
    擬提供1-3名的名額於本系所大學部與研究生,並已規劃好實習期間安排的學習課程。(請參閱附件)


    實習期間為7/2~8/31約兩個月時間,學生需自行安排住宿。實習期間亦有優渥薪資給付。如有任何問題,請與我聯繫。謝謝!

    中原大學實習生工作計劃-2007
    實習生課程-2007

    2007年5月4日 星期五

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

    Homework 5-4-2007

    Due 5/11/2006 at 13:00

    1. Do
    Lab: Webpage Accessibility, Part II

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

    3. Do
    Lab: Valiadating PageRank

    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

    Lab: Valiadating PageRank

    參考2004年地方機關觀光網站優勝或入圍者,對照地方政府觀光網站PageRank研究
    兩者是否呈現正相關,還是彼此並無顯著關聯?

    Lab: Webpage Accessibility, Part II

    6. Take a second look at the HTML 標籤, HTML 原始碼
    Look for the differences you have made after doing Step 4 & Step 5.

    7. Save your editings again and preview your webpage using Firefox

    8. Download web accessibility validator Freego

    9. Use Freego to examine whether your webpage is accessible.
    須通過第一級機器檢測

    2007年5月3日 星期四

    Lab Webpage Accessibility

    Use Nvu to edit the following homepage
    at http://maplepoem.blogspot.com/2005/03/blog-post_111070085865304732.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. Create a clickable link at the term 中原大學 so that
    this link goes to http://www.cycu.edu.tw

    5. Make the webpage accessible by
    (1) adding ALT text to the images and
    (2) adding a title to the URL link at Step 4.

    2007年3月30日 星期五

    Lab 14: Accessibility by GreaseMonkey

    http://www.utexas.edu

    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)

    Homework 3-30-2007

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

    2. Briefly describe the following Google business models.
    • Search Engine
    • Sponsorship (Paid listing)
    • AdWords/AdSense (business stream for news, blog)
    References:
    Google 廣告獲利模式

    3. Check into the government-sponsored web accessibility website.
    At 94年度座談及研習會資料-> 無障礙網路空間建置理念與實務(Pdf檔 / 488Kb), download the
    presentation materials. Why do you think web accessibility is useful?

    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 Greasemonkey on Firefox 1.5 or higher. Greasemonkey photo.

    2. Animated Firefox Download Counter: Display a counter of the number of firefox downloads in the upper right corner of pages.
    3. 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 and yam.com write to you. Does our class blog use cookie or not? Does Google use cookie?
    4. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
    5. Install Web Developer Toolbar to examine cookies.

    Lab 11: Technorati

    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/
    Reflection http://www.chieftain.idv.tw
    Java http://javaatcycu.blogspot.com
    yours

    2007年3月16日 星期五

    Lab 10: 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/
    Monday 購物 http://www.monday.com.tw/

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

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

    Homework 3-16-2007

    Install Skype at your computer.
    Use Skype to make a voice call with your friend(s). Note Skype can support up to 5 persons.
    Describe with whom you conduct your test, the environment (bandwidth and computer configuration) you and your friend(s) make calls, and the voice quality such as smoothness,
    delay, and jitter.

    references

    3/23/2007 運動會停課一次

    網址與連結示範

    1. 錯誤示範,這是不能點選的網址:

    http://對不起我不能被點選.com.tw

    2. 有改進,可以點選了。

    http://minstral.blogspot.com

    3. 不列出網址,直接產生可以點選的標題。這是更好的作法。

    這是電子商務的課程

    Featured Lab

    企管二甲 9441142 張乃文 不只有最終結果,還包含步驟解說。

    Lab 9: Organize Your Office

    1. Up to now, you have RSS and Word on your personal portal.
    2. According to the Microsoft Office, you still need a calendar as in Outlook, mail as in Outlook or Outlook Express, document editor as in Word, and spreadsheet as in Excel.
    3. Using Google's services, add all of the above to your portal so that it is complete with the functions of Microsoft Office.

    Lab 8: Google Docs

    1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
    2. Write some words in a Word format.
    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 7: 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 block. You should be able to see the subscriptions in the Google Reader block of your personal portal.

    Lab 6: RSS

    1. Enter Google Reader

    2. Try the following
    • news.yam.com
    • 中時電子報
    • New York Times
    • Taiwan
    3. What is the RSS feed that Google Reader takes in? List the URL of these RSS feeds.
    (Hint: Examine Yam's RSS feed. )

    2007年3月9日 星期五

    避免成為垃圾部落格

    1. 不拷貝網路文章
    2. 貼照片,缺少文字說明
    3. 只有外部的資源(Google Maps, Video), 缺乏自己的產出。
    4. 多寫些自己的文字。

    Featured Lab

    電子四乙 9226219 張智婷
    readability, clear, correct, and concise. good job!

    9226335 電子四丙 林鉦凱
    knowledgeable

    Homework 3/9/2007

    1. Watch the video of Steve Job's keynote at MacWorld 2007.Share with us your thoughts after watching the video.
    中文翻譯(如果你堅持的話)

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

    Due 3/16/2007 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.

    3/23/2007 運動會停課一次

    3-9-2007 點名未到

    9226116 (late)
    9226330

    Featured Map Project

    featured project based on urmap.

    2007年3月2日 星期五

    Steve Job's Keynote Address on iPhone

    enter
    (iPhone starts at 26 minutes.)

    Live transcript

    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.

    Introduction to Internet

    Tim Berners-Lee

    W3C

    hypertext, http, WWW
    (page 181~187 of Text)

    client applications:
    browser,
    plugin/embed (movie, nusic player),
    standalone (Skype, Google Earth)

    Homework 3/2/2007

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

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

    Due 3/9/2007 at 1:00 p.m.

    2007年3月1日 星期四

    Lab 3: Using FireFox 2.0

    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.

    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: Create your own blog

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

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

    3. 進行以下設定
    • 留言顯示驗證詞
    • 正確設定時區顯示時間
    • 測試他人可否留言(comment)

    4. 以後請將你的作業寫在你的 blog, 然後到
    Homework 或 Lab 的Comment 登錄作業blog網址就可以了.
    請勿將作業直接寫在 comment

    CYCU Location

    CommunityWalk Map - Favorite Lunch Spots

    2007年1月19日 星期五

    Web 2.0 無線行動系統與程式設計成長冬令營

    時間: 2007130131

    地點: 中原大學社區服務中心芳鄰成長園(位置 )

    主辦: 電子系網路實驗室 (連絡電話: 4630,報名網址 http://mobilesocialtech.blogspot.com)

    費用: (只接受1/26以前之網路報名)


    詳細課程

    2007年1月12日 星期五

    第二次專題說明會 (1/19)

    有意跟張耀仁老師做專題的同學, 請看公告.

    Bonus: Lab Packet Sniffer

    1. Install Protocol Analyzer Ethereal at http://www.ethereal.com
    2. Capture the packets at your Ethernet interface card.
    3. Enter a login required website that you often go to, such as web mail.
    4. Try to catch the packet that contains the password.

    Lab Site Meter Check

    1. Enter your blog.
    2. Check the site meter to see the daily traffic chart, the recent visitors by locations.
    3. Check into the course site.
    Meaures the daily traffic and locations.
    4. Post the results of the above on your blog.