星期五, 6月 26, 2009
星期五, 6月 19, 2009
Lab Packet Sniffer
2. Capture the packets at your Ethernet interface card.
3. Enter a login required website that you often go to, such as web mail. Don't use the real account or password.
4. Try to catch the packet that contains the password.
Lab Web Traffic Stress Test
2. Take a look at the user manual.
3. Test a static page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
4. Test a dynamic page.
Try combinations of stress levels and stress multipliers to simulate 10 users and 100 users.
5. Compare the response time of both pages and explain why.
星期日, 6月 14, 2009
星期五, 6月 12, 2009
星期三, 6月 10, 2009
星期二, 6月 09, 2009
Microsoft's Stuff
In the Harry Shum's keynote speech at WWW 2008 and one of the industrial tracks by Tao, Microsoft feature the following two search services, one called virtual earth and the other photosynth. They look like fun. Definitely, we should try them out.
- http://maps.live.com (does not only provide satellite image which is low resolution but also aerial views taken by airplanes flight-by)
- http://www.labs.live.com/photosynth/ (it's an amazing way to view the photos people took and published on the net)
Homework 6.12.2009 Drag and Drop
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.
Due 6.19.2009
Lab Movie Player
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.
星期日, 6月 07, 2009
星期五, 6月 05, 2009
Homework 6.5.2009
Lab Google Analytics
1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
2. Check the results to see the daily traffic chart, the recent visitors by locations.
星期二, 5月 26, 2009
一位校友對「為什麼在大學練習寫程式」留下新意見
Franson 已針對您的文章「為什麼在大學練習寫程式」留下新意見:
老師說得沒錯,程式真的很重要,
但電子電機相關科系的同學也不用擔憂未來或是羨慕資工領域的學生
所以,理論課程非常重要。
關於專題,老師在前面有很多很棒文章^^看了很有感觸阿!
為什麼在大學練習寫程式
事實上,很多電子系校友也不從事電子這行,例如有個管理顧問公司總經理就是我們系友,他雖然早就不碰電子,但是他還是覺得電子系給他的紮實工程背景訓練,是非常寶貴的一段學習經驗,並不會因為以後不走電子,現在學的東西全部白學。
電 子系同學大多不重視寫程式,想不透是誰給他們寫程式不重要的錯誤概念,事實上寫程式對電子系同學的重要性絕對不亞於資工系,無論是通訊,數位,用到程式 的機會極高。現在的系統講究智慧,智慧從哪裡來? 當然是軟體。以手機為例,手機硬體大同小異,功能差異性主要來自軟體。所謂科技來自人性,軟體居功厥偉。
電子系不等於焊電路接麵包板而已,所以千萬不要輕視寫程式。寫程式的好處如下:
- 以後工作用得上。現在的世界是買硬體送軟體,以後是買軟體送硬體。
- 訓練清晰頭腦,培養邏輯思考能力。
- 快速試做一個概念,因為你在耗時耗費實做之前,即可先用軟體程式模擬。如果結果不錯,再去實做不遲。
星期四, 5月 21, 2009
星期五, 5月 15, 2009
Lab DOM
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 Image using DOM
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.
DOM, Document Object Model
web personalization 網頁個人化
你會不會覺得有點神奇, 它是如何做到的?
關鍵就在 DOM.
With the DOM scripting methods you can:
- Create new elements on the fly.- Grab all the tags of the document, or grab the text without grabbing the tag text.
- Insert new text, and change or remove text from any element.
- Move whole parts of the document around, or remove parts as fragments and work with them.
- And the best part: all of these new methods should work in any DOM compliant browser. No more browser sniffing. No need to build different versions of the same page for different browsers.
Reference:
Scripting For The 6.0 Browsers, By Scott Andrew LePera
createElement() allows you to create a new tag.
myImg = document.createElement("IMG")
Give definition.In the above example, our newly born tag has no ID, no SRC and no home in the document yet. So let's give it some definition:
myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")
Append it within the document "tree".
Now all we need to do is append it to the document body. And to do that, we use the DOM node method appendChild():
docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)
星期四, 5月 14, 2009
Quiz 5-15-2009
2. 列舉至少三個HTML 網頁無法符合無障礙的原因。
3. 列舉 XML 特性至少三個
4. 簡述Web發展史(1989~2009)。
5. 在CGI語法裡,解釋 GET, POST 差異在哪裡?
6. 寫出一個產生網址http://maps.google.com/maps?q=24,121 的HTML片段。
7. GreaseMonkey 跟 Firefox 的關連是什麼?
8. 列舉 GreaseMonkey 應用至少三個
9. 解釋 PageRank
10. 說明 Firefox Accessibility Extension
11. 舉出使用 mash-up的網站至少三個,並說明其 mash-up 特性。
12. Housingmaps 使用了哪些網頁互動技術,請至少列舉三個。
13. 列舉至少三種瀏覽器
14. 列舉至少六種Google服務名稱
15. 如何增加網頁的互動性?
16. 動態網頁的資料來源有哪些? 請列舉。
17. 請解釋 Access Bar (上課實驗)
18. 請解釋 Access Key (上課實驗)
星期三, 5月 13, 2009
賀: 電子系精障研究 "全程護送 有障無礙" 獲得三創(創意創新創業)比賽全校第一名(科技創新獎)
另外,彭書敏 陳彥儒 陳虹綺 熊嬡菁 楊秉霖 黃俊達 精障研究 "展招開道 室內導航" 獲得三創比賽全校第四名。近日內將接受主要媒體採訪。
再次,謝謝各位就服員,老師給這些同學們三年來不斷的支持,
星期二, 5月 12, 2009
2009 輔具科技夏令營
時間: 2009年6月30日
地點: 中原大學電學大樓 517 實驗室
對象: 研究生,專題生,大學部同學,專業工作者,對身心障礙科技有興趣者
議程
9:00-9:10 | 引言: 張耀仁
|
9:10-10:00 | 工作職場中情境感知無障礙工作提示應用(張萬志) |
10:10-11:00 | |
11:10-12:00 |
|
12:10-14:00 | 午休 |
14:10-15:00 | 資料探勘於精障行動安全與走失預防系統(馬瑱賢小組) |
15:10-16:00 | 精障室內導航影像指引(陳彥儒小組) |
16:10-17:00 | 綜合座談 |
費用: 全免
報名方式: 於此
延續本實驗室傳統,將於6/30舉行。期末考結束了,暑假剛開始。大家團聚一起,分享彼此經驗。除了研究生薪火傳承以及為了促進不同小組技術交流與相互觀摩。歡迎社會人士與專業從業人員與教師。
星期五, 5月 08, 2009
Lab XML (2)
2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results
use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
(archive)
3. View the formatted HTML file.
4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
compute the team standings in a table.
5. View the formatted HTML file.
5-15-2009 小考
方式: closed book, no computer
小考目的主要在測驗學生基本能力,能夠面對問題,獨立去構思答案,不假他人既有成果。因此,不必求完美,只要掌握關鍵概念,就會給予高分。
歷年考題(僅供參考,題型可能變更)
星期四, 5月 07, 2009
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:
- News Syndication
- http://140.135.8.178/bgbg
/lihung.html
Input 2008 4 7 8 55
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
參考資料
XSLT(專業ASP.NET XML程式設計 - 使用C#)
Lab Hand code a form
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
How to use Form to invoke a remote service through CGI.
1. Copy the search box of this search page,
inlcuding radio buttons, text input, and submit button.
2. Open your Nvu HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.
5. Use Nvu to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.
6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)
7. Save your file on your computer. Run your HTML by Firefox. What do you get?
8. Set method as "post"
9. Run your HTML by Firefox. What do you get?
Static, Dynamic Webpages and Common Gateway
- Dynamic pages, content generated by server-side programs.
- CGI, Common Gateway Interface, for sending requests to server-side programs.
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
星期五, 5月 01, 2009
Homework 5-1-2009
Place That State Game
2. 建立你的行事曆,並與學校行事曆合併
Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>
Lab Mash-up 4
Lab Mash-up 2
http://www.housingmaps.com
http://www.urmap.com.tw/asp/kijiji/
http://www.7house.com.tw
List the differences in the user interface design and usability. Make comments
by your use experiences.
比較: 美感,直覺性,流暢,預期反應
example: TMM
Lab Mash-up 1
2. Publish the uploaded ppt.
3. Embed the online ppt to your blog.
The reason to do so is that the readers don't have to have ppt to view your presentation. For example, some users work with Linux or Unix, and others work with MacOS. They will appreciate you for doing so.
Hint: a sample work
星期五, 4月 17, 2009
Lab Making web pages accessible
2. Fix the failures you found.
推薦作業
電子三乙 9526238 王詩集
內容正確,簡明
Lab Access Keys
2. Use GreaseMonkey to detect the access keys defined in http://www.epa.gov.tw
Hint: AccessBar: displays defined accesskeys in a fixed-position bar along the bottom of the window.
3. Are the two results in the above the same?
Lab Firefox Accessibility Extension
Report the summary of all the errors and warnings for each site.
Lab: Making images accessible
at http://bloggercamp.blogspot.com/2007/01/2007.html
You can copy and paste the content to your Nvu.
2. Take a look at the HTML 標籤, HTML 原始碼
3. Save your editings and preview your webpage using Firefox
4. Make the webpage accessible by
adding ALT text to the images.
5. Go to the Firefox Add-ons site for Firefox Accessibility Extension
6. Click the "Install now" button on the add-ons website
7. Check whether you can see the ALT text for the images by selecting the "Show Text Equivalent" function.
星期三, 4月 15, 2009
星期五, 4月 03, 2009
Lab AccessBar
www.ocac.gov.tw www.epa.gov.tw
Continued from the above, use google to find 3 more government sites in Taiwan that enable access keys.
Reference: Dive into Greasemonkey by Mark Pilgrim (free download)
http://dia.z6i.org/ (中文)
Lab: more on HTML
1. Copy and paste the Headings example athttp://www.w3schools.com/html/html_primary.asp
2. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
3. What kind of effects can you see?
Lists
4. Copy and paste the Headings example athttp://www.w3schools.com/html/html_lists.asp
5. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
6. What kind of effects can you see?
Lab HTML
1. Using Microsoft Notepad, Copy and paste the HTML example atIntroduction to HTML
2. Save the file as myfile.html
3. Open the file using Firefox.
New editor
4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
5. Copy and paste the HTML example at Introduction to HTML
6. Verify your results on the screen.
Lab: Accessibility in 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.
http://dia.z6i.org/ (中文)
HTML & Accessibility
Accessibility
- What is web accessibility?
- Accessible search engine
- Use accesskeys
星期五, 3月 27, 2009
Homework 3-27-2009
Steven J. Vaughan-Nichols “Will Mobile Computing’s Future Be Location, Location, Location?” IEEE Computer, February, 2009. pp. 14-17.
Summarize the paper in Chinese.
校內下載
校外下載(學生身份驗證)
reference: Mobile Location-based Social Networking
Mobile Location-based Social Networking
To try
To read
[1] Thom-Santelli, J. Mobile social software: Facilitating serendipity or encouraging homogeneity? IEEE Pervasive Computing, Vol. 6, No. 3, pp. 46-51, 2007.
[2] N. Eagle and A. Pentland, “Social Serendipity: Mobilizing Social Software,” IEEE Pervasive Computing, Vol. 4, No. 2, pp. 28-34, 2005.
[3] Steven J. Vaughan-Nichols “Will Mobile Computing’s Future Be Location, Location, Location?” IEEE Computer, February, 2009. pp. 14-17.
星期五, 3月 20, 2009
Lab Tongwen
Lab Clean Language
2. Use Google to search webpages that contains some bad words.
3. Try whether the filtering take effects.
Lab GreaseMonkey
Install Greasemonkey 0.8. Check the lower right corner of your Firefox and you should find a monkey at the right. Note that you must run the
- 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.
3-27-2009 Outline: 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
Firefox 3.0
- 適合做網頁編輯,處理HTML內碼程度最高,推薦用於部落格轉貼。
- 速度方面,我給80分
- 中文處理有點問題
- GreaseMonkey (油猴子) 支援佳,很欣賞
- JavaScript 執行速度快,DOM 支援程度高
- 速度方面我給90分
- 中文輸入處理問題不少
- 適合用來觀看網頁,會省下不少時間。如果牽涉中文寫作與輸入,務必先祈禱。
- 沒有支援油猴子。
- 速度方面不及格,適合訓練耐心。
- 中文輸入方面尚未出現任何問題。
- 適合大量中文撰寫,例如e-mail, 論壇, 部落格
- 沒有支援油猴子。
Homework 3-20-2009
2. 比較個人化入口網,與常見商業入口網的差別。例如廣告,內容,應用,服務,個人化程度等等各方面的比較。
3. 在Google 個人入口加入以下元件: GMail, Google Reader, Google Calendar, Google Docs, Google Groups
星期五, 3月 13, 2009
Homework 3-13-2009
我來過 我愛過-悼念清華大學學生葉昊定
楊秉霖課堂雜記(書本裡沒教的東西)
讀完以後,請你找個地方想一想,例如校內楓香詩園,或是電學大樓前大草坪。為了答謝自己看了也想過了這文章與話語,至少聞三種花香。
到此結束,或是,如果你願意,你可以在部落格上寫些文字,紀錄這個生活點滴。(本次作業可加一次作業分數三倍,逾時不候)
專題演講: 量子力學與天文物理導讀 (禪與生活藝術) 講者: 張耀仁 中原大學電子系
HTTP, Webpages, RSS
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.
星期一, 3月 09, 2009
微軟一年一度的實習計畫
微軟一年一度的實習計畫招生開跑了
下面是實習的官方網站
http://www.msintern.com/
除了開始招募之外
3/11 18:30在中原大學活動中心音樂廳也有舉辦巡迴講座,
主題是"從微軟的創新及核心價值-看大學生應具備之能力"
星期五, 3月 06, 2009
Homework 3-6-2009
2. 統計 Lab: All pairs shortest path 任意兩點之間的步距(hop). 相距 hop=1 有多少對,相距 hop=2 有多少對? 依此類推。
hop 定義: 如果A到C的最短路徑為 A->B->C,其hop=2。
hint: 將拓墣圖所有數字改為1。
3. Making comments
4. 關於你的散文作品,你得到多少篇回應? 其中多少贊同,多少異議,多少缺乏實質內容(灌水,你好帥之類)? 這些回應對你有幫助嗎?
5. 部落格是一種社會媒體,根據What is social media?ㄧ文,比較社會媒體與其他媒體之不同。
Due 3-13-2008
Lab: Web Pageranking
紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
張老師部落格
接著,以PageRank量測你常用的三個網站。
參考資料:
PageRank 介紹
PageRank 的論文
Google 廣告獲利模式
Routing
Dijkstra Algorithm
Floyd Warshall Algorithm
Centralized algorithm
- Collect global data
- Make global decisions
- Collect local data
- Exchange information with neighbors
- Make local decisions
星期二, 3月 03, 2009
網際網路與無線通訊研究大大嘉惠弱勢與身心障礙者生活品質
Web 2.0網路服務與Ontology技術在非營利租屋網站上之行動
非營利組織運用Web 2.0社群運算之質化分析與效益評估-以精神障礙者復健與就業輔導工作資訊系統為例(先進工程期刊: 3卷2期 2008/04)
精障者情境感知工作提醒系統(WASN2008)
智慧型精障者路徑導引與預防走失系統之研製 (tanet07) |
無線行動化的社區智慧型空間- 認知障礙者路徑指引系統 (tanet07) |
Web 2.0技術在租屋網站上之實務與研究 -以崔媽媽租屋網為例 (ncs07) |
以行動科學研究法探討Blog 在精神障礙就業輔導的應用(mist2007)
更多
英文版學術著作
張耀仁老師實驗室連續兩年獲選美國無障礙科技獎項
- 學生成果獲選美國ACM ASSEST 2007 無障礙科技競賽前四名
- 由張耀仁老師帶領學生,以研發的實境導航系統,在2007年10月入圍美國無障礙科技研究大賽。此大賽是由微軟公司所贊助的非營利比賽,全球只選出25組,至美國鳳凰城,進行為期三天的科技競賽;由於台灣在過去14年來未有任何作品入圍,因此本次能入圍實屬不易。
星期五, 2月 27, 2009
作業觀摩
9526341電子三丙李冠輝 介紹了一些browsers 進階知識。
9522342電子三丙劉璦菁 提供了不少使用者主觀測試意見。
Lab 6: Chrome
Introduction to Internet
Inventor of the internet technology packet switching, Leonard Kleinrock
" Dr. Leonard Kleinrock created the basic principles of packet switching, the technology underpinning the Internet, while a graduate student at MIT. This was a decade before the birth of the Internet which occurred when his host computer at UCLA became the first node of the Internet in September 1969."
Tim Berners-Lee
"In 1989 he invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread." He will serve as a keynote speaker at WWW2008.
W3C
Lab 5: Using labels
Professional blogs have labels. In this lab, you will learn how to put labels on your blogs to make them look professional.
1. Check into your blog homepage.
2. Enter "自訂"
3. Follow the steps to create Label Block by drag and drops.
4. Get back to your existing blog posts. Fill the blanks at the field Labels (文章的標籤).
5. Save the changes.
6. Back to the blog and check if the labels come up.
Lab 4: 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.
星期二, 2月 24, 2009
從亞馬遜 Kindle 2 沒有通過無障礙測試談起
星期一, 2月 23, 2009
星期五, 2月 20, 2009
Homework 2-20-2009
generates.
2. Yahoo 目前遭遇了什麼問題? 為什麼? 請閱讀 The end of Yahoo as we knew it (netWorker, Dec. 2008) 然後加以回答。
3. Reading Assignments (預習)
Read the sections on hypertext, http, WWW
(page 181~187 of Textbook)
Due 2/27/2009 at 13:00
Lab 3: Put CYCU Map on Your Blog
http://maps.google.com/maps?q=24.9586,+121.24114
2. Enter the CYCU coordinates to produce a code snippet that you can put into your blog. The code is under Share/Export tab.
3. Copy and paste the code snippet into your blog just like you are writing your own blog post. Publish it.
應用實例
Lab 2: 讓你的部落格產生最新回應
2. 請你的同學給你一個 comment,是否能正確顯示在最新回應上。
3. 實例
4. 資訊源設定如 http://minstral.blogspot.com/feeds/comments/default
Lab 1: Let's start blogging
2. 測試一下,可以寫 "Hello World"
3. 建立一個連結到課程網站 http://iapblog.blogspot.com/
建議你使用右上角"自訂"功能,新增一個區塊。一個區塊內可以置放多個連結。
4. 日後請將你的隨堂練習與作業寫在你的 blog, 然後到
Homework 或 Lab 的Comment 登錄作業blog網址就可以了.實例
請勿將整個作業直接寫在老師部落格的Comment處。
5. 尊重智慧財產權,引用他人文章須註明出處。並且應該合乎學術常規,以合理的方式引用。
注意事項
a. blog需正確設定時區顯示時間 。
b. 請測試他人可否留言(comment)。以方便留下回應意見。
How to insert a link at the following comment, please use the following HTML code.