A New Approach to Web Applications Jesse Garrett
AJAX, Brett McLaughlin
A complete introduction to AJAX (Brett McLaughlin)
2007年12月31日 星期一
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.
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?
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
Scope: Common sense of AJAX, DOM, JavaScript, XML, & CGI, Textbook Sec. 2-1, Appendix A
time: 15 minutes
2007年12月18日 星期二
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.
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.
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
2. Lab DOM and Javascript.
3. Reading Assignments: AJAX by Jeremy Keith
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.
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
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:
2007年12月4日 星期二
Web 2.0 無線行動程式設計成長冬令營
時間: 2008年1月22日(二)，1月23日(三)
地點: 電學大樓409室
主辦: 電子系先進網路實驗室 (連絡電話: 4630)
費用: 免
報名方式: 請在下方Comment留言，專題生無需再報名。
詳細課程(1-08-2008 edition)
投影片講義請進入課表中下載
課程大綱
- web service and asp.net system design
- c# programming on the mobile devices
- advanced Web 2.0 design and Google Maps
- advanced JavaScript programming for Interactive Web Design
- AJAX programming
- 研究與專題
- Web 2.0
- Web 2.0 online presentation slides
- characteristics of Web 2.0 pages (cited from B. Gibson)
- Web 2.0 @IEEE ICALT 2007
- Web 2.0 Examples
- Web Service
- AJAX
- 隨筆
2007年12月3日 星期一
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.
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
寒假崔媽媽基金會實習
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
- HTML for machine-human interaction
- XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.
- XML for machine-machine interaction
- Without human involvement, automation of business systems can be accelerated.
- 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)
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
(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.
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?
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日 星期一
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.
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
- 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
-
Google Access Keys Enables navigation through Google search results.
- 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
- Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
http://dia.z6i.org/ (中文)
2007年10月30日 星期二
Talk Outline: Accessibility
Accessibility
預告: 11/19 期中考週不上課
- What is web accessibility?
- Accessible search engine
- Use accesskeys
預告: 11/19 期中考週不上課
Talk Outline: 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
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.
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?
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.
2. Use Google to search webpages that contains some bad words.
3. Try whether the filtering take effects.
Lab 12: Greasemonkey
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
- Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?
- You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
- 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任何比賽入圍已經是很大的肯定，也是ㄧ輩子都會記得的經驗。
進入決賽中的四位之ㄧ，另外三位都是美國團隊 Northeast U, SUNY, Wright State U.，雖沒有獲首獎，我跟士楷講， 能夠在ACM任何比賽入圍已經是很大的肯定，也是ㄧ輩子都會記得的經驗。
2007年10月23日 星期二
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
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
在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
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月21日 星期日
10-22-2007 特別演講
講題: 『實境導航，有障無礙』 無線行動化的社區智慧型空間- 認知障礙者路徑指引系統
講者: 朱衍印
時間: 7:00 p.m.
講題: 智慧型精障者走失偵測系統之行動運算
講者: 莊育嘉
時間: 8:00 p.m.
講者: 朱衍印
時間: 7:00 p.m.
講題: 智慧型精障者走失偵測系統之行動運算
講者: 莊育嘉
時間: 8:00 p.m.
2007年10月19日 星期五
2007年10月8日 星期一
網址與連結示範
設計網頁，最好從使用者的角度來思考。如果我們列出ㄧ個 URL，也許這樣的來源資訊已經夠清楚，但是對使用者來說，點選才是真正想做的。以下是幾個不同的作法:
1. 錯誤示範，這是不能點選的網址:
http://對不起我不能被點選.com.tw
2. 有改進，可以點選了。
http://minstral.blogspot.com
3. 不列出網址，直接產生可以點選的標題。這是更好的作法。
這是電子商務的課程
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.
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.
專業服務
- 學術服務
- TANET 2008, 2007, 2006 論文審查
- panel of TANET 2007, topic: 行動M化關懷社群論壇
- 2007年 全國電信研討會論文審查
- 電子商務學報論文審查
- 論文審查 JAE, 2008
- 專業服務
- 專業演講: 1997-2001,
- 專業演講: 2001-
- 「96年度中研院網站評獎」評獎委員
- 委託研究
- 我國網路安全伺服器數量調查委託研究案 2006, 2007
- 歷年計畫
- 我國網路安全伺服器數量調查委託研究案 2006
- 綠色採購網建置與維運 共同主持人 6/2005~12/2005 行政院環保署 已結案 720,000
- 衛生保健便民網站維運 主持人 1/2005~12/2005 行政院衛生署 已結案 5,940,000
- 無線寬頻示範應用計畫(台南縣) 主持人 11/2004~12/2004 經濟部工業局 已結案 2,750,000
- 無障礙服務入口網站委外建置案 主持人 6/2004~11/2005 僑委會 已結案 4,000,000
- 政府入口網"我的e政府"計畫 共同主持人 5/2004~12/2004 行政院研考會 已結案 2,933,000
- 電視妙管家網站計畫 主持人 12/2003~6/2004 行政院新聞局 已結案 1,260,000
- 衛生保健便民網站建置 主持人 11/2003~12/2004 行政院衛生署 已結案 9,900,000
- 無線寬頻示範應用計畫(台北縣) 主持人 9/2003~2/2004 經濟部工業局 已結案 10,780,000
- 多媒體資料中心建置計畫 共同主持人 7/2003~11/2003 國民健康局 已結案 4,118,000
- 兒童環保教育網站 主持人 3/2003~9/2003 行政院環保署 已結案 1,380,000
- 教育入口網 共同主持人 3/2003~7/2003 台北市教育局 已結案 9,190,000
- 整合型運動入口網計畫 共同主持人 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.
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
(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.
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.
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.
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.
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
" 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.
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.
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
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. 尊重智慧財產權，引用他人文章須註明出處。並且應該合乎學術常規，以合理的方式引用。
How to insert a link at the following comment, please use the following HTML code.
2. 張貼你的部落格的第一篇文章。一小段歡迎詞，或是簡短自我介紹，或是你最喜歡的科目與最不喜歡的科目，都可以。
3. 日後請將你的隨堂練習與作業寫在你的 blog, 然後到
Homework 或 Lab 的Comment 登錄作業blog網址就可以了.
請勿將整個作業直接寫在老師部落格的Comment處。
4. 尊重智慧財產權，引用他人文章須註明出處。並且應該合乎學術常規，以合理的方式引用。
注意事項
a. blog需正確設定時區顯示時間 。
b. 請測試他人可否留言(comment)。以方便留下回應意見。
How to insert a link at the following comment, please use the following HTML code.
2007年9月14日 星期五
Syllabus
Place: 電學 416
Format: lectures and in-class 30 labs
Instructor: Professor Yao-Jen Chang
email: yjchang at cycu dot edu dot tw
課程進度
課堂討論
教材資源:
2007年8月11日 星期六
ＷＷＷ 2008
ＷＷＷ 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
把握機會，努力看看
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.
Decide on the group name, and kick off some subjects.
Lab Collective Decision
2007年6月19日 星期二
賀本實驗室全人關懷獎皆通過第一階段評選
精神障礙就業小組、崔媽媽科技服務工作隊、芳鄰社區服務工作小組皆通過第一階段評選，
第二階段評選定於 6/23.
評選網址
http://blog.roodo.com/service_learning/archives/3473039.html
第二階段評選定於 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#語言的使用。在其過程中,也了解到解答問題的困難,與解決問題所需的耐性與堅持,也藉由此專題,進一步了解與人合作的重要性。...
小黑
...這可以提供我們一個與外面公司接觸的學習經驗，不同於校內的學習，透過接觸業界的專業人士，學會與人想處、增進人際關係等都是很好的學習經驗。...
...透過這次的學習，我認為幫忙別人將會成為我生活中的一種態度，或許這是不切實際的但是這將可以使我把眼光放低全心投入去做每件事情，學習到了謙卑及克服挫折的能力，...
蕭宇宏的服務心得
...拋開電子系傳統理論例如抽象的電磁學以及工數學科，能以我們所學到屬於比較實用的知識，來作為響應崔媽媽關懷社會的一個小小的行動，算是很欣慰的。...
GG的全人關懷
...從做專題可以了解ㄧ些事情，有時候和老師和助教MEETING，雖然只有短短的1小時，但中間獲得的東西遠遠大於一二年級課程的內容。...
電子三人
...我們所學到,主要是SKYPE API的了解與C#語言的使用。在其過程中,也了解到解答問題的困難,與解決問題所需的耐性與堅持,也藉由此專題,進一步了解與人合作的重要性。...
小黑
...這可以提供我們一個與外面公司接觸的學習經驗，不同於校內的學習，透過接觸業界的專業人士，學會與人想處、增進人際關係等都是很好的學習經驗。...
2007年6月4日 星期一
2007年6月1日 星期五
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.
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.
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.
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.
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)
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.
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
(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.
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?
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.
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日 星期五
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
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
- HTML for machine-human interaction
- XML can be formatted to HTML according to formartting rules called XSLT. To see it, do Lab XSLT.
- XML for machine-machine interaction
- Without human involvement, automation of business systems can be accelerated.
- An XSLT style sheet is an XML document.
- The basic processing paradigm is pattern matching.
Operation of an XSLT Processor
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.
須通過第一級機器檢測
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.
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年4月22日 星期日
2007年4月19日 星期四
2007年4月13日 星期五
Homework 4-13-2007
Read the paper Experiences of Adopting In-class Blogs in the Teaching of Hands-on Computer Laboratory Courses.
Write a 150~500 summary of what you learn from the paper.
Write a 150~500 summary of what you learn from the paper.
2007年3月30日 星期五
Lab 14: Accessibility by GreaseMonkey
- 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
-
Google Access Keys Enables navigation through Google search results.
- 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
- Continued from 3, use google to find 3 more government sites in Taiwan that enable access keys.
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.
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?
2. Briefly describe the following Google business models.
- –Search Engine
- –Sponsorship (Paid listing)
- –AdWords
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.
2. Use Google to search webpages that contains some bad words.
3. Try whether the filtering take effects.
Lab 12: Greasemonkey
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.
- Animated Firefox Download Counter: Display a counter of the number of firefox downloads in the upper right corner of pages.
- 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?
- You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.
- 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
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 廣告獲利模式
紐約時報 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 運動會停課一次
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. 不列出網址，直接產生可以點選的標題。這是更好的作法。
這是電子商務的課程
http://對不起我不能被點選.com.tw
2. 有改進，可以點選了。
http://minstral.blogspot.com
3. 不列出網址，直接產生可以點選的標題。這是更好的作法。
這是電子商務的課程
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.
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
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.
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
(Hint: Examine Yam's RSS feed. )
2. Try the following
- news.yam.com
- 中時電子報
- New York Times
- Taiwan
(Hint: Examine Yam's RSS feed. )
2007年3月9日 星期五
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 運動會停課一次
中文翻譯(如果你堅持的話)
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 運動會停課一次
2007年3月8日 星期四
Lab 4: Multimedia Plug-in
Put the movie embed code in your blog. You should
be able to see how multimedia plug-in works.
be able to see how multimedia plug-in works.
2007年3月2日 星期五
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.
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)
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.
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.
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.
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. 進行以下設定
4. 以後請將你的作業寫在你的 blog, 然後到
Homework 或 Lab 的Comment 登錄作業blog網址就可以了.
請勿將作業直接寫在 comment
2. 張貼你的部落格的第一篇文章。一小段歡迎詞，或是簡短自我介紹，或是你最喜歡的科目與最不喜歡的科目，都可以。
3. 進行以下設定
- 留言顯示驗證詞
- 正確設定時區顯示時間
- 測試他人可否留言(comment)
4. 以後請將你的作業寫在你的 blog, 然後到
Homework 或 Lab 的Comment 登錄作業blog網址就可以了.
請勿將作業直接寫在 comment
2007年1月24日 星期三
Real time satellite tracking
Check it out
It is a mashup of Google Map and satellite teacking data.
More applications of Google Maps
It is a mashup of Google Map and satellite teacking data.
More applications of Google Maps
2007年1月19日 星期五
Web 2.0 無線行動系統與程式設計成長冬令營
時間: 2007年1月30日，1月31日
地點: 中原大學社區服務中心芳鄰成長園(位置 )
主辦: 電子系網路實驗室 (連絡電話: 4630，報名網址 http://mobilesocialtech.blogspot.com)
費用: 免 (只接受1/26以前之網路報名)
詳細課程
2007年1月12日 星期五
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.
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.
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.
訂閱：
文章 (Atom)