請大家針對新系網提出改進意見
http://www.el.cycu.edu.tw
請就以下三點來發揮
1. 如果你想考慮就讀本系，這個網站吸引你嗎？
2. 如果你要找指導教授，這個網站給你足夠資訊嗎？
3. 如果你想為子女選擇志願，這個網站給你足夠的畢業校友社會地位與成就資訊嗎？
4. 如果你是系友，想瞭解系上最新的成就與現況，這個網站有提供你要的資訊嗎？
歡迎提供其他建議
星期一, 6月 16, 2014
6/16 講題預告 content publishing versus socializing
1. content versus connection
2. difference between blogs and facebook
3. We are living in an experience economy.
2. difference between blogs and facebook
3. We are living in an experience economy.
星期一, 6月 09, 2014
Homework 06/09/2014 : 使用Google Drive 進行同步編輯
如何使用Google Drive 雲端硬碟與 微軟Word 與夥伴進行協同編輯
1. 上網下載 Google Drive 程式，在你的電腦上安裝這支雲端硬碟程式
2. 這支程式會建立一個新的目錄，稱做Google 雲端硬碟
3. 所有在這個目錄編寫的任何文件(Word/Excel/ppt) 都會自動同步到 Google 線上文件
4. 進入 Google 線上文件 設定你要和夥伴 分享的文件，可分為 只可預覽，可編輯 等多種權限，如果未設定分享，別人無法看到這些線上文件。
5. 使用 Word 繼續編輯文件，Google 會隨時同步到雲端
優點
1. 無需隨時把新版本傳給夥伴
2. 無需改變編輯工具(Word ...)
Lab 36 Google Analytics
1. Enter Google Analytics
2. Put the code provided by Google Analytics in your own blog.
3. Check the results to see the daily traffic chart, the recent visitors by locations.
Lab 35 匯出部落格
1. 將你的部落格匯出為 XML，請使用blogspot 已經提供的匯出工具
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格
4. 檢查匯出情況，是否有出現異常，資料遺失或被變更?
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格
4. 檢查匯出情況，是否有出現異常，資料遺失或被變更?
星期一, 5月 26, 2014
Lab 33 XML (2)
1. Register and Download Xray, an XML, XSLT editor and processor.
2. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 2. A basic style sheet for the soccer results
use the XSLT as in the Listing 2 to transform the XML file as in the Listing 1.
(archive)
3. View the formatted HTML file.
4. Given the
Listing 1. An XML document representing the results of a soccer tournament
Listing 3. A style sheet that computes team standings
compute the team standings in a table.
5. View the formatted HTML file.
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月 19, 2014
(講題預告)網際網路應用系統設計: XML
網際網路應用系統設計: XML: Take a look at islandwide temperatures of Taiwan. What happens if you just want Taoyuan's temperature? If you want to include Taoyuan&#...
Lab 31 Making images accessible
1. Study what an ALT tag is.
2. Use Notepad++ to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html
You can copy and paste the content to your Notepad++.
3. Save your editings and preview your webpage.
4. Make the webpage accessible by
adding ALT text to the images.
5. Check whether you can see the ALT text for the images by moving the mouse over the image.
2. Use Notepad++ to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html
You can copy and paste the content to your Notepad++.
3. Save your editings and preview your webpage.
4. Make the webpage accessible by
adding ALT text to the images.
5. Check whether you can see the ALT text for the images by moving the mouse over the image.
Lab 30 視障者使用網頁的需求
參考視障者瀏覽網頁的需求，請至少針對五類需求（例如：選定你的語言），每類舉出一個網頁實例（台灣或國外皆可），並列出該網頁關鍵HTML片段，證明該網頁的確符合視障者需求。
相關新聞報導 爭資訊與文化平權 上千身障者上街(自由時報12.1.2013)
相關新聞報導 爭資訊與文化平權 上千身障者上街(自由時報12.1.2013)
Lab 29 Using PageRank
在Chrome上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)
紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/
接著，以PageRank量測你常用的三個網站，
並留下至少八張有做此LAB的紀錄。
參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文
紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/
接著，以PageRank量測你常用的三個網站，
並留下至少八張有做此LAB的紀錄。
參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文
星期一, 5月 12, 2014
Lab 28 Design your business card
1. Refer to the div example Try it yourself
2. Design your business card. You can choose your colors, fonts, styles.
2. Design your business card. You can choose your colors, fonts, styles.
Lab 27 More on HTML
Tables
1. Open Notepad++.
2. Copy and paste theTables example athttp://www.w3schools.com/html/html_tables.asp
3. Open browser for the result.
Lists
1. Open Notepad++.
2. Copy and paste the Lists example athttp://www.w3schools.com/html/html_lists.asp
3. Open browser for the result.
1. Open Notepad++.
2. Copy and paste theTables example athttp://www.w3schools.com/html/html_tables.asp
3. Open browser for the result.
Lists
1. Open Notepad++.
2. Copy and paste the Lists example athttp://www.w3schools.com/html/html_lists.asp
3. Open browser for the result.
Lab 26 HTML
HTML
Preparation
1. Using Notepad++, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Browser. (請將3.輸出結果拍一張圖)
Preparation
1. Using Notepad++, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Browser. (請將3.輸出結果拍一張圖)
4. Repeat the work for
(請將7.輸出結果拍一張圖，共五張)
星期二, 5月 06, 2014
星期一, 5月 05, 2014
(講題預告) 網際網路應用系統設計: CSS by examples
網際網路應用系統設計: CSS by examples: an introduction Try it yourself Using styles in HTML How to add style information inside the section. Link that is not underlined ...
(講題預告) 網際網路應用系統設計: HTML by Examples
網際網路應用系統設計: HTML by Examples: a simple start HTML Page Structure This a heading This is a paragraph. This is another paragraph. source HTML Versions ...
Lab 24 Google Maps II
Write a form to send a query to Google maps. If the input is not in the format of coordinates, display an error, clear the input, and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22
1. You should define a function check() to check the query input.
2. You can call the function check as follows:form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"
1. You should define a function check() to check the query input.
2. You can call the function check as follows:form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"
Lab 23 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. Make sure your friends can view your document.
4. What's the URL of your document.
5. 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. Make sure your friends can view your document.
4. What's the URL of your document.
5. 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 22 共同編輯文件
閱讀[新聞報導] 美國商會結合微軟 二手電腦供社福團體免費用，假設這個計畫是由你發起，你要擬定一張志工排班表，以及修復場地值班人員。
- 請製作一張值班人員表，為了提升效率，你決定先擬好空白表格，再開放編輯權限給你的夥伴填寫，請夥伴上網登記輪值時間。
- 製作志工時間登記表，當志工們填寫資料，管理者可以得到一份excel清單，為了保障個人隱私，請不要將excel公開給所有人。
星期一, 4月 28, 2014
Lab 19 Lab Form and Action
Purpose of lab:
Learn how to use Form to invoke a remote service through CGI.
1. Take a look at the search box of this search page, inlcuding radio buttons, text input, and submit button.
2. Open your Notepad++.
3. Open a new empty HTML file.
4. Write a form that acts like this search page.
5. In the form you write, set Action="http://google.com/search" and name of Form as "f" and method as "get" (See Hint if it does not work.)
6. Save your file on your computer.
7. Run your HTML by Chrome/Firefox. What do you get?
8. Set method as "post"
9. Run your HTML by Chrome/Firefox. What do you get? You can watch the Forms and Input in the Web Development Course at Udacity.
1. Take a look at the search box of this search page, inlcuding radio buttons, text input, and submit button.
2. Open your Notepad++.
3. Open a new empty HTML file.
4. Write a form that acts like this search page.
5. In the form you write, set Action="http://google.com/search" and name of Form as "f" and method as "get" (See Hint if it does not work.)
6. Save your file on your computer.
7. Run your HTML by Chrome/Firefox. What do you get?
8. Set method as "post"
9. Run your HTML by Chrome/Firefox. What do you get? You can watch the Forms and Input in the Web Development Course at Udacity.
Lab 20 Hand code a form
Before you do this lab, you must understand what is CGI(Common Gateway Interface) and Form.
1. So please search the answer and post your opinion in your blog.
2. Hand code a HTML 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. 3. If the input is not in the format of coordinates, display an error and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22
1. So please search the answer and post your opinion in your blog.
2. Hand code a HTML 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. 3. If the input is not in the format of coordinates, display an error and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22
星期五, 4月 25, 2014
(講題預告) 網際網路應用系統設計: Request a server to do an action
網際網路應用系統設計: Request a server to do an action: Dynamic pages, content generated by server-side programs. CGI, Common Gateway Interface, for sending requests to server-side programs. ...
星期一, 4月 14, 2014
Lab 17 JavaScript
產生三個文字方塊，上面各寫1, 2, 3
這三個方塊上方可以顯現照片
當滑鼠置於文字1的時候，顯示照片A
當滑鼠置於文字2的時候，顯示照片B
當滑鼠置於文字3的時候，顯示照片C
這三個方塊上方可以顯現照片
當滑鼠置於文字1的時候，顯示照片A
當滑鼠置於文字2的時候，顯示照片B
當滑鼠置於文字3的時候，顯示照片C
Lab 16 Change an image by moving the mouse
1. Design a webpage to display picture A initially.
2. Try to move the mouse. When the mouse is not within the area of the picture, picture A remains the same. When the mouse is within the area of the picture, display picture B in place.
You can use the photo in
http://minstral.blogspot.tw/2013/06/blog-post.html
for picture A and the photo in
http://minstral.blogspot.tw/2013/05/blog-post_30.html
for picture B.
Hint: You may find the example useful.
Hint: If you have a problem displaying a picture on the browser, you can check out the example.
2. Try to move the mouse. When the mouse is not within the area of the picture, picture A remains the same. When the mouse is within the area of the picture, display picture B in place.
You can use the photo in
http://minstral.blogspot.tw/2013/06/blog-post.html
for picture A and the photo in
http://minstral.blogspot.tw/2013/05/blog-post_30.html
for picture B.
Hint: You may find the example useful.
Hint: If you have a problem displaying a picture on the browser, you can check out the example.
Lab 15 九九乘法表
1. Open notepad++
2. Based on the code as in
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.
write a code to generate the table of 9*9 products. (九九乘法表)
Hint: The javascript code should be enclosed by script tags.
歡迎參加 4/17/2014座談: 服貿電信條款面面觀
無論你在哪個行業，開放電信都跟你有關係，基於學術專業與社會責任，數位包容與實踐講座系列訂於4/17(四) 7:00 ~ 8:30 pm舉辦服貿電信條款座談，歡迎各位一起前來關心討論。
中原大學電子系數位包容與實踐 座談
題目: 服貿電信條款面面觀
協辦單位: 中原大學 灼言社
與談人:
1. 涂世雄:中原電機系副教授 通訊所副教授 資訊安全專家 曾任中原大學電算中心主任
2. 劉宏煥:中原電子系助理教授 通訊所助理教授 消基會通訊傳播委員會 消基會服貿電信公聽會代表
3. 賴裕昆：中原電機系助理教授 美國北卡羅納大學電機系博士 網路交換系統專家
4. 張耀仁:中原電子系教授 通訊所教授 曾任中原大學電算中心主任 消基會通訊傳播委員會 蕃薯藤政府與事業電子化部門主管 IBM亞太區電子商務顧問 勞動部，研考會，經建會外部審查委員
其他教授專家學者陸續邀請中，請拭目以待
主持人:詹琪芬 小姐 主婦聯盟生活消費合作社講師
地點:中原大學 教學大樓 608 大教室
聽眾: 數位包容與實踐修課學生，有興趣的老師同學同仁，社區媽媽父親國高中生
費用: 免費，現場備有開飲機，請自備飲水杯
有興趣擔任與談的同仁，無論你支持開放或反對開放，都歡迎加入。
中原大學電子系數位包容與實踐 座談
題目: 服貿電信條款面面觀
協辦單位: 中原大學 灼言社
與談人:
1. 涂世雄:中原電機系副教授 通訊所副教授 資訊安全專家 曾任中原大學電算中心主任
2. 劉宏煥:中原電子系助理教授 通訊所助理教授 消基會通訊傳播委員會 消基會服貿電信公聽會代表
3. 賴裕昆：中原電機系助理教授 美國北卡羅納大學電機系博士 網路交換系統專家
4. 張耀仁:中原電子系教授 通訊所教授 曾任中原大學電算中心主任 消基會通訊傳播委員會 蕃薯藤政府與事業電子化部門主管 IBM亞太區電子商務顧問 勞動部，研考會，經建會外部審查委員
其他教授專家學者陸續邀請中，請拭目以待
主持人:詹琪芬 小姐 主婦聯盟生活消費合作社講師
地點:中原大學 教學大樓 608 大教室
聽眾: 數位包容與實踐修課學生，有興趣的老師同學同仁，社區媽媽父親國高中生
費用: 免費，現場備有開飲機，請自備飲水杯
有興趣擔任與談的同仁，無論你支持開放或反對開放，都歡迎加入。
(講題預告) 網際網路應用系統設計: Handling HTML DOM events
網際網路應用系統設計: Handling HTML DOM events: Button example JavaScript events examples DOM, Document Object Model Document Object Model (DOM) examples
星期一, 4月 07, 2014
Lab 14 Create Image using DOM
1. Open notepad++
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.
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.
星期四, 3月 27, 2014
數位包容與實踐: 科技化的學運: 苦撐直播30小時 讓立院實況第一時間對外公開
數位包容與實踐: 科技化的學運: 苦撐直播30小時 讓立院實況第一時間對外公開: http://www.ithome.com.tw/news/ 86183
星期一, 3月 24, 2014
(講題預告) 網際網路應用系統設計: Handling HTML DOM events
網際網路應用系統設計: Handling HTML DOM events: Button example JavaScript events examples DOM, Document Object Model Document Object Model (DOM) examples
星期五, 3月 21, 2014
星期一, 3月 17, 2014
Lab 13 Regular expression in action II
撰寫一個網頁能夠自動檢查輸入的字串是否為網址(例如
163.17.9.5
www.cycu.edu.tw
是合法網址
123.222.2
999.999.999.999
www.cycu
不是合法網址)
163.17.9.5
www.cycu.edu.tw
是合法網址
123.222.2
999.999.999.999
www.cycu
不是合法網址)
Lab 12 Regular expression in action
Write a form to send a query to Google maps. If the input is not in the format of coordinates, display an error and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22
Hint:
see
form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"
in source code
Hint:
see
form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"
in source code
星期一, 3月 10, 2014
Homework 3/10/2014: Lab 8 Using browsers for programming II
網際網路應用系統設計: Lab 8 Using browsers for programming II: 參考 Udacity 課程 ，撰寫一個網頁能夠自動檢查輸入的密碼，長度必須至少六個字元，且必須至少包含一個數字以及一個非英文字母的字元。 建議開發工具 notepad++ 建議使用瀏覽器 Firefox/Chrome/IE/Safari 你可能需要的資訊 Re...
Hint: 如果你想了一天，還是想不出來，你可以看一下提示
來測試一下吧!
Hint: 如果你想了一天，還是想不出來，你可以看一下提示
來測試一下吧!
Lab 8 Using browsers for programming II
參考 Udacity 課程，撰寫一個網頁能夠自動檢查輸入的密碼，長度必須至少六個字元，且必須至少包含一個數字以及一個非英文字母的字元。
建議開發工具 notepad++
建議使用瀏覽器 Firefox/Chrome/IE/Safari
你可能需要的資訊 JavaScript Regular expression Objects
你可能需要的資訊 JavaScript Regular expression Objects
Lab 7 Using browsers for programming
參考 Udacity 課程，撰寫一個網頁能夠自動檢查輸入的密碼，長度必須至少六個大寫或小寫字元或數字。
建議開發工具 notepad++
建議使用瀏覽器 Firefox/Chrome/IE/Safari
你可能需要的資訊 JavaScript Regular expression Objects, Regular expression (Wiki)
你可能需要的資訊 JavaScript Regular expression Objects, Regular expression (Wiki)
網際網路應用系統設計: programming on browsers
網際網路應用系統設計: programming on browsers: Architecture of browsers
Hint
var passwordRegex = /^[A-Za-z]*[\d\W][A-Za-z\d\W]*$/;
Hint
var passwordRegex = /^[A-Za-z]*[\d\W][A-Za-z\d\W]*$/;
星期一, 3月 03, 2014
Homework 3/3/2014
1. 觀看以下其中一則ted演講
Amy Cuddy: Your body language shapes who you are
Michael Metcalfe: We need money for aid. So let’s print it.
發表你的評論
2. 自行選擇 ted 一則演講，發表你的評論
due 3/10/2014 6:00 p.m.
Amy Cuddy: Your body language shapes who you are
Michael Metcalfe: We need money for aid. So let’s print it.
發表你的評論
2. 自行選擇 ted 一則演講，發表你的評論
due 3/10/2014 6:00 p.m.
Lab 6：Using Chrome
1. 使用Chrome 開發人員工具，檢查 www.cycu.edu.tw
www.youtube.com
www.udacity.com
三個網站，找出網頁下載過程中，最耗時的前三個元件（請列出檔名）
www.youtube.com
www.udacity.com
三個網站，找出網頁下載過程中，最耗時的前三個元件（請列出檔名）
Lab 5：Using Labels
Labels are key elements of Web 2.0.
Professional blogs have labels. In this lab, you will learn how to put labels on your blogs to make them look professional.
1. Check into your blog homepage.
2. Enter "設計"=>"版面配置"=>"新增小工具"=>"標籤"
3. Follow the steps to create Label Block by drag and drops.
4. Get back to your existing blog posts. Fill the blanks at the field Labels (文章的標籤).
5. Save the changes.
6. Back to the blog and check if the labels come up.
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：破解網路大學排名DIY
請參考網路大學排名
網頁數
Google site:cycu.edu.tw (台大 中正 中原 元智)
Yahoo site:cycu.edu.tw (台大 中正 中原 元智)
連結度(能見度)
Google link:cycu.edu.tw(台大 中正 中原 元智)
if this does not work, try http://www.opensiteexplorer.org
檔案數(Rich files)
Google site:cycu.edu.tw filetype:pdf (台大 中正 中原 元智)
Google Scholar 論文索引
Scholar Google site:cycu.edu.tw (台大 中正 中原 元智)
ps 衍伸閱讀
網頁數
Google site:cycu.edu.tw (台大 中正 中原 元智)
Yahoo site:cycu.edu.tw (台大 中正 中原 元智)
連結度(能見度)
Google link:cycu.edu.tw(台大 中正 中原 元智)
if this does not work, try http://www.opensiteexplorer.org
檔案數(Rich files)
Google site:cycu.edu.tw filetype:pdf (台大 中正 中原 元智)
Google Scholar 論文索引
Scholar Google site:cycu.edu.tw (台大 中正 中原 元智)
ps 衍伸閱讀
大學評鑑與大學的多元價值(彭明輝)
大學需要被評鑑嗎？(彭明輝)
訂閱：
文章 (Atom)