2010年11月22日 星期一

Lab 32: DOM

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

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.


請點擊繼續閱讀




張貼者： 於 沒有留言:

2010年11月8日 星期一

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?

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

請點擊繼續閱讀










張貼者： 於 沒有留言:

2010年11月1日 星期一

Lab 27: Mash-Up 4 (Calendars)

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.

Hint: 挪威奧斯陸之行
album


請點擊繼續閱讀


中壢家商女童軍團與桃園農工童軍團聯合迎新。




張貼者： 於 沒有留言:

Lab 25: Mash-up 2 (Maps)

Lab 25: Mash-up 2 (Maps)
真實案例
For housing services, compare the following two websites

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

比較: 美感，直覺性，流暢，預期反應

請點擊繼續閱讀


  1. 美感方面:
    1. 7HOUSE在首頁顯示住屋內部的裝潢，以及呈現屋子的建築之美，較housingmaps美觀許多。
  2. 直覺性方面:
    1. 對於買屋的使用者來說，應該會比較需要在目標地段附近待售的屋子，所需求一開始便會需要一個「地圖」來顯示待售屋的位置，而housingmaps便直接提供了這個需求。故housingmaps在直覺性方面較佳。
  3. 流暢方面:
    1. 對於使用者來說，需求會直接以口語方面表達，例如:「我想要一間在火車站附近的套房，預算大概100萬左右。」7HOUSE便直接提供了這項關鍵字查詢的功能，對於housingmaps的地圖式搜尋，個人認為會相對流暢許多。
  4. 預期反應方面:
    1. 若我們從遊戲玩家的角度來切入，對於遊戲之中的怪物(打怪練等級用途)，無論是「列表」或是「地圖資訊」都是非常重要的，因為對於使用者的需求來說，我們必須知道其附近相關的位置、與其他怪物的比較(特性、有無相關任務可解...)，或是需要準備的道具。而這跟買屋的使用者有異曲同工之妙，所以個人認為，無論是過於偏重哪一方面，都對於服務使用者來說是一件不利的事情，預期未來在housingmaps上應該會多增加許多搜尋列方面的輸入選項，而亦期待7HOUSE會與地圖資訊結合，成功的提出「不動產搜尋地圖」。這樣對台灣不動產買家會是一大福音呢!
張貼者： 於 沒有留言:

Lab 24: Mash-up 1 (Publish)

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.

範例:
如何活用 Gmail 工作坊



請點擊繼續閱讀











張貼者： 於 沒有留言:

2010年10月25日 星期一

期中報告

期中報告
使用Google Sites 架設網站，主題可以環繞你所參加的社團, 你的家鄉或社區, 你的分享與關心, 你的朋友, 高中同學, 電影, 音樂, 學業, 生涯,

評分標準
創新(20%)
資訊完整性 (30%)
美學 (25%)
網站邏輯架構 (15%)
線上服務功能 (10%)

雛型(半成品)，網站建議書(範本)繳交日期 10/25/2010
成品繳交日期 11/01/2010


請點擊繼續閱讀
Sites連結請按此。
網際網路應用系統設計草案
2010.10.25

定位 
建立自己與共同目標的朋友們一起努力的平台。

目標 
作為目前生活規劃的一連串計畫準備，藉此學習計畫的紀錄與執行的督促，以期能夠對出社會之後有所幫助。 

背景
〈美味關係〉之中，女主角茱莉給自己一個期限，來完成他試作傳奇女廚師茱莉亞著作的壯舉，讓我們體會到，除了計畫需要去執行的重要性，我們能夠透過分享，讓彼此互相砥礪，互相成長。藉此透過網路的無遠弗屆，以期能夠讓自己更加順利的推動計畫，並作紀錄，在未來能夠將成功的經驗分享給所有的人。

功能


人生馬拉松，趕上不斷變化的計畫。
其首頁提供了大致上的資訊，並更新欲望清單之排序列表。
於左下方有作者個人資訊，可作為瞭解網站作者途徑之一。

人生馬拉松的計畫介紹
主要作為此網站之詳細介紹，包括為此建立網站之目標，
以及提醒作者網站操作之流程。

公開行事曆
為作者於網路上公開之行事曆。

成員介紹
作為作者資訊之詳細介紹。

欲望清單第一項完成列表
藉此督促自己完成欲望清單之第一項內容。

進度紀錄
紀錄以期達到分享過程之目的。

附件內容
作為儲存愈完成之目的的相關檔案。
張貼者： 於 沒有留言:

2010年10月18日 星期一

Lab 21: Making images accessible

Lab 21: Making images accessible


1. Study what an ALT tag is.

2. Use KompoZer to edit the following homepage
at http://bloggercamp.blogspot.com/2007/01/2007.html

You can copy and paste the content to your KompoZer.

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.


請點擊繼續閱讀


1.沒有加入標籤之前。

2.加入標籤之後。
張貼者： 於 沒有留言:

Lab 20 More on HTML

Lab 20 More on HTML




Headings
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?

請點擊繼續閱讀


3.




4.




張貼者： 於 沒有留言:

Lab 19 HTML

Preparation

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.

請點擊繼續閱讀



複製文字存到純文件資料夾中，儲存成"myfile.html"。
透過Firefox顯示如下。



張貼者： 於 沒有留言:
標籤：

Lab18:Comparing browsers

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.

請點擊繼續閱讀

優點比較:


1.其網址列整合搜尋功能。
2.外型簡約清爽。
3.有自動提示的Google翻譯。

1.透過GreaseMonkey可以擴充許多外掛功能。
2.頁面與IE類似，對於IE慣用者，使用較容易習慣。
張貼者： 於 沒有留言:

作業：Homework 5

Homework 5


1. 網路可不可能增進身心障礙者的便利，請舉例說明?
2. 瀏覽器會洩漏使用者的隱私嗎? 為甚麼?

請點擊繼續閱讀

1.
對於視障者在單獨行動上，網路地圖圖資便能即時的獲得訊息，載入行動裝置之中便能讓身心障礙者更為便利；對於判斷能力上有需要的朋友們，透過即時的網路通訊，能夠遠距離給予建議或是提示判斷。故此，網路是可能增進身心障礙者的便利的。
2.
是會的。
瀏覽器對於侵犯隱私來說，我認為最大的兩點在於「cookie」和「瀏覽歷史紀錄」這兩項上，其一開始的立意似乎是為了增進瀏覽效能之用，不過目前隱私權的觀念越來越重視，使用者也越來越需要一個私密的瀏覽空間，在我們不免利用到公用電腦瀏覽網頁的同時，瀏覽器紀錄下的歷史紀錄與cookie便很容易讓有心人士利用。不過現在因為隱私觀念的要求，許多瀏覽器也開始製作出更符合隱私概念的模式，以期能夠讓「效能」以及「隱私」兩樣雙贏。
張貼者： 於 沒有留言:

2010年10月11日 星期一

Lab17:AccessBar

 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 the above, use google to find 3 more government sites in Taiwan that enable access keys.

請點擊繼續閱讀

 
1.僑委會

 
2.行政院環境保護署


3.行政院工程委員會

 
4.行政院人事行政局


 
5.行政院衛生署
張貼者： 於 沒有留言:
標籤：

Lab16:Accessibility in GreaseMonkey

 
  1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more
  2. Google Access Keys Enables navigation through Google search results.
Reference:
http://dia.z6i.org/ (中文)


請點擊繼續閱讀

  1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link. Updated: 2005-04-26. more

  1. Google Access Keys Enables navigation through Google search results.
    按數字鍵即會跳至相對應網頁。
Reference:
http://dia.z6i.org/ (中文)
張貼者： 於 沒有留言:
標籤：

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


請點擊繼續閱讀





 
 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.
YES!


張貼者： 於 沒有留言:
標籤：

Lab14:Greasemonkey

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

  2. Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?
  3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.

請點擊繼續閱讀

 點擊圖片以放大顯示。

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



  2. Cookie Monster - Show cookie contents: Shows the contents of the current page cookie. Just mouse over the "Cookie" text on the bottom left. Check what cookies http://www.nytimes.com writes to you. Does our class blog use cookie or not? Does Google use cookie?
    1.http://www.nytimes.com 有要求使用。
    2.http://iapblog.blogspot.com/無要求使用。
    3.http://www.google.com.tw/ig?hl=zh-TW有要求使用。






  3. You can turn off Greasemonkey by clicking on the monkey face at the URL bar of Firefox. Click again to activate Greasemonkey.




張貼者： 於 沒有留言:
標籤：

2010年10月4日 星期一

Lab13，Google Mars

Lab13，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. 這個服務的特色有哪些?

請點擊繼續閱讀




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


Is the  retrieved on demand.

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


1.整合Google map的技術，獲得許多好奇人士的注意。
2.可以提供各級學校作為教學使用，或是吸引對天文有興趣的人們，以提高點閱率。
3.其實它只有一小塊地圖在重複而已?
張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)