Lab 32 DOM

1. Open KompoZer
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 31 Create Image using DOM

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

開啟網頁後會自動顯示圖片

開啟網頁後點擊按鈕

出現啦!!!

其實也不是很難，很興奮的給他按了很多下

Lab 30 navigation bar

1. 進入你的部落格，登入，選擇自訂
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)

Lab 29 Hand code a form

Hand code a HTML or use KompoZer 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 28 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 KompoZer HTML editor.

3. Open a new empty HTML file.

4. Paste the search box into this new file.

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

• 當method設定為get時，按下google搜尋，會跳到搜尋頁面。

8. Set method as "post"

9. Run your HTML by Firefox. What do you get?

•  當method設定為post時，按下google搜尋，不會跳到搜尋頁面。

Lab 27 Mash-Up 4 (Calendars)

建立你的行事曆，並與學校行事曆合併
Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>
進入後按右下角+Google日曆即可訂閱

Lab 26 Mash-up 3 (Blogs)

部落格與相本的結合運用。透過部落格分享你的照片集，省去傳送大量照片的缺點，自由書寫照片中的故事。

Create a slide show of your album. Embed the album in your blog.

Lab 25 Mash-up 2 (Maps)

For housing services, compare the following two websites
http://www.housingmaps.com

http://www.7house.com.tw

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

Lab 24 Mash-up 1 (Publish)

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

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

Lab 23 Making web pages accessible

1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com
2. Fix the failures you found.

修改前

修改後

Lab 22 Firefox Accessibility Extension

巴哈姆特

PChome商店街

中央氣象局

期中報告(雛型)

芳香療法網站雛型(Enter:D)

25.10.2010

定位：提供芳香療法相關訊息

目標：讓更多的人了解什麼是芳香療法以及其對人的幫助。

背景：現代人取得資訊的來源有百百種，網際網路是一條不可忽視的管道之一，憑藉它的方便性、互動性以及傳播性，可以讓資訊傳遞給瀏覽者。

功能：

1.          RSS訂閱：每當板主發佈新訊息可以方便訂閱者收到通知。

2.          行事曆：於每月更新行事曆，提供當月最新活動訊息。

3.          活動剪影發文：發布活動過程照片相關文章，讓更多人對於活動產生興趣。

4.          雙向互動：提供可以讓對芳療有興趣或是有疑問的閱讀者依個溝通管道。

5.          資料庫：上傳相關資聊提供下載。

Lab 21 Making images accessible

使用前

使用後(圖片變文字)

Lab 20 More on HTML

Headings:

 標題文字大小控制

<h1>~<h6>字體大小由大至小

Lists:

用<ul></ul>標籤可以得到用●作為清單選項

 用<ol></ol>標籤可以得到數字作為清單選項

Lab 19 HTML

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

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

Lab 18 Comparing browsers

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

• google 瀏覽器跑網頁的速度比火狐快許多 
• 兩種瀏覽器皆有多種支援外掛擴充程式
• 網址列google 瀏覽器沒有顯示http://而火狐反之
• 畫面來說 google 瀏覽器較火狐精簡，火狐的版面與IE比較相近

Homework 5

1. 網路可不可能增進身心障礙者的便利，請舉例說明?

網路是可以稱進身心障礙者的便利，例如內政部的優先採購網路資訊平台、身心障礙諮詢網皆是。

2. 瀏覽器會洩漏使用者的隱私嗎? 為甚麼?

瀏覽器雖然會儲存使用者的cookie，但是伺服器只會准許網站取用本身傳送的 cookie 而並非由其他網站傳送的 cookie，可確保使用者的隱私。當然這是要在網路公司沒有發生意外洩露用戶搜尋資訊的情況下為前提。而現在推出了一款不會儲存cookie的瀏覽器Browzar(download)，適用於使用公共電腦的使用者，保障使用者安全使用網路。

Lab 17 AccessBar

客家委員會

 

國防部

國科會

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

Google Access Keys Enables navigation through Google search results.

Lab 15 Clean Language

1.儲存Clean Language至桌面
2.用UltraEdit-32開啟檔案修改想要過濾的文字
3.開啟瀏覽器→檔案→開啟檔案→安裝
4.過濾TMD

Lab 14 Greasemonkey

Install Greasemonkey 0.8.

 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? Yes!

 

Lab 13 Google Mars

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

 依照使用者的檢索需求下載地圖，如此不僅不會因為下載全部地圖而浪費時間，還可以立即更新地圖。

2. 這個服務的特色有哪些?

讓一般民眾透過這項服務輕易地瀏覽火星的地貌，自行探索火星。

Lab 12 Using Google PageRank

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

(9/10)紐約時報
(8/10)CNN        
(8/10)台灣雅虎
(7/10)蕃薯藤    
(6/10)PCHome 購物
(4/10)Monday 購物

(5/10)巴哈姆特哈拉區
(6/10)中原大學 I-Learning
(7/10)Youtube-The Secrete

參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文

Lab 11 Using your iGoogle

1. 在你的iGoogle 討論群組 Google Group，加入這個討論區 http://groups.google.com/group/mobile-computing
2. 在你的iGoogle 閱讀群組 Google Reader，加入這個部落格 http://minstral.blogspot.com/ 

   

Lab 10 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. (My 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.

Homework 3

1. 本系任三位老師得近年著作，請列出這三個超聯結。

張耀仁 老師  /  陳淳杰 老師   /   鐘日龍 老師 

2. Firefox 最新的市占率為何? 請註明你的資料來源。

Statcounter Globalstats 由曲線圖大約可以看出Firefox市佔率約為32%左右。

3. 在Homework 2 中，你得到多少篇回應? 這些回應對你有幫助嗎?

沒有收到任何回應。

Lab 9 本校網頁簡體版功能

中原大學首頁 (簡體中文版 / 繁體中文版 )

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 7 Using Firefox

字體放大Ctrl++

 訂閱自己的RSS

訂閱老師的RSS

快訂閱我的RSS吧!!!

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

Homework 2

你有何策略可以針對網路大學排名四個要素提出改善本校排名之道?
Ans:
          學校所設計的ilearning平台僅限於校內師生，學校與網路公司合作架設師生個人部落格以及班級部落格，強化ilearning功能，而不是封閉在校內，老師可以發布教學講義和最新消息；學生可以上傳個人作業或是研究心得，創造個人特色，個人成就也可以在畢業後保留；班級部落格可以宣傳活動和進行投票等，師生可以透過網路有更多的互動，如此不但可以增加大量的網頁數，增加能見度，老師的教學檔案公開化，有利於提升教學品質。提升論文數量，可藉由打開學校知名度，吸引更多優秀研究生，要提升論文數量就要先提昇學生量。

Lab 5 網路大學排名 DIY

網路大學排名

網頁數
Google site:cycu.edu.tw (台大 中正 )
Yahoo site:cycu.edu.tw (台大 中正 )

連結度(能見度)
Yahoo linkdomain:cycu.edu.tw -site:cycu.edu.tw (台大 中正)

檔案數(Rich files)
Google site:cycu.edu.tw filetype:pdf (台大 中正)

Google Scholar 論文索引
Scholar Google site:cycu.edu.tw (台大 中正 )


網頁規模（Size）
中原 約有 65,800 項結果
台大 約有 1,150,000 項結果
中正 約有 8,010 項結果

能見度（Visibility）
中原 搜尋結果約108,000個
台大 搜尋結果約1,940,000個
中正 搜尋結果約382,000個

教學檔案（Rich Files）
中原 約有 3,440 項結果
台大 約有 106,000 項結果
中正 約有 8,010 項結果

學術文件（Scholar）
中原 共約有6,310項查詢結果
台大 共約有190,000項查詢結果
中正 共約有7,320項查詢結果

Lab 4 發表評論

針對前次作業第二題(如下)，挑選至少五篇你覺得很用心的文章，針對寫作技巧與文章內涵給予建設性的評語。

你的評論有一個 URL，請把 URL 列出。

 

吳佩珊
余時中
沈建志
邱家駿
陳佳翰

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


檢視較大的地圖


在較大的地圖上查看中原大學校內地圖指引

Homework 1

1. 列舉兩個因為網路傳播而迅速成為話題的事件，並解釋為什麼?
Ans：
蹓鳥俠
學生之間因為打賭而脫褲懲罰。
簽署ECFA→http://tw.news.yahoo.com/article/url/d/a/100917/17/2d783.html
 關於兩岸問題一直是備受矚目的話題，從經濟發展就可以爆出很多內政問題，藍綠兩大黨對於兩岸合作抱持不同觀點。
花博→http://tw.news.yahoo.com/article/url/d/a/100919/1/2dd9r.html
花博弊案是越燒越猛烈，一個美麗的博覽會變的如此醜陋，在野黨最喜歡揪執政黨的毗漏，只要一抓到把柄就猛烈砲轟。


2. 紐約時報董事長表示未來可能停止印刷發行，只留下網路發行。可能原因是甚麼? 這家企業未來要如何存活?
Ans：
(1)環保問題：減少紙張使用量
(2)成本問題：不用在支付印刷機和場地的高成本
(3)習慣問題：現代人大多透過網路取得最新消息
(4)來源問題：報紙上的消息來源很多是透過網路取得
(5)嗜好問題：消費者可能關注的新聞或是訊息有不同偏好或是關注點不同
 建立網路讀報會員制，可存查過去及現在的新聞，穿插相關廣告於報中，增加額外收益。


3. 上網的工具除了電腦之外，還有哪些?
Ans：
手機(iphone)、掌上型電腦(PDA)、掌上型電玩(PSP)、數位相機(Nikon Coolpix P1)、遊戲機(PS3 WII XBOX)、音樂播放器(ipod)。




4. 試列舉數個 Internet of Things 的應用。
Ans：
識別證(門禁 貨物識別 人員管理)

Hello World

哇~~~助教是可愛的ICE耶！