Lab 19 More on HTML

Tables

1. Copy and paste theTables example athttp://www.w3schools.com/html/html_tables.asp
2. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
3. What kind of effects can you see?




把<table border="1">這行的數字變大的話，可以改變框框的粗細大小




Lists
4. Copy and paste the Lists 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?

Unordered Lists

的第一行程式碼是<ul>

Ordered Lists

的第一行程式碼是<ol>

不一樣的開頭出來的開頭項目也不一樣

Lab 17 HTML

HTML 

• Tutorial

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.(請將3.輸出結果拍一張圖)
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.(請將6.輸出結果拍一張圖)

7. Repeat the work for 

• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Links
• HTML Images 

(請將7.輸出結果拍一張圖，共五張)

Lab 33 Syndication with RSS 2.0

1. 進入你的部落格，登入，選擇設計
2. 新增小工具
3. 選取
資 訊提供 
將 RSS 或 Atom 資訊提供的內容加入您的網誌。
Blogger 製作

4. 撰寫或貼上所需連結(範例)

Lab 32 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.


前兩題轉換1.2

後兩題轉換3.4

這邊看到程式碼有錯誤

把LINE30第57個字改成&lt;程式碼及正確

Lab 31 XML

1. Register and Download Xray, an XML, XSLT editor and processor.
    (安裝X-Ray需要權限)
    (助教碎碎念:若無法順利安裝再點我)

2. Given the the XML file and XSLT file ,
use Xray to do the transformation of the XML into HTML.
You have to replace [ with <.

3. View the formatted HTML file.

Homework 3-27-2013

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

電子四乙9826236黃崇恩
我也覺得網路可以集合眾人的力量建立一個更好的世界，可是總是有許多人不會將網路放在正途使用。

9926103朱孝庭－
簡明扼要的敘述了網際網路帶給我們的便利性

9926309 電子三丙 李仲偉
文中有提到:有利弊必有弊，發展的越快速越廣泛，必有一些利用網路的犯罪攻擊發生
這句話說得很好，的確是有很多人利用網路犯罪，所以大家一定要小心謹慎
看完這裡部影片，很有自己的看法，不過心得應該會有不少心得才對

9926314 電子三丙 葉昌翰
簡潔明瞭禪述內容，點出社會時事，平時應該有再看新聞


電子四丙 9826375 謝東益
網路資訊越來越強大，讓我們的生活更加便利，
是很好的事情。

Homework 4-8-2013

你被一家手機公司錄用了，請你簡述你想像中的手機設計的流程。

大概流程:

1.手機的工業設計:手機的工業設計包括手機的外觀,材質.手感.顏色配搭,主要界面的實現與及色彩等方面的設計

2.手機的結構設計:,手機的前殼,後殼.手機的攝像鏡頭位置的選擇.固定的方式,電池如何連接,手機的厚薄程度,如果是滑蓋手機如何讓手機滑上去,怎樣實現自動往上彈.SIM卡怎樣插和拔的安排.這些都是手機結構設計的範疇

3.硬件:硬件主要設計電路以及天線

4.軟件:是更容易為大家所理解.由於電腦的普及.讓我們最大程度地接觸了各種各樣的軟件，例如:手機的操作介面

5.手機測試項目:手機的測試有著各式各樣的測試以確保手機可以在任何情況下運作使用

Lab 18 Google Accessibility

1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link.
2. Google Access Keys Enables navigation through Google search results.
   
   
   兩者安裝好以後，請呈現使用前後的差異比較圖，並說明有何功用。
   
   
   
   
   
   
   一開使跑出  , .  !!還不知在幹麻  但後來知道功能後  這用途真得很方便 並造福盲人

Lab 25 Mash-Up 2 (Calendars)

建立你的行事曆，並與學校行事曆合併 

Google日曆-中原大學服務學習活動行事曆-html版本

進入後按右下角+Google日曆即可訂閱


若原有自己Google行事曆的同學，拍圖時，請注意個人隱私。
不論舊有或新建Google行事曆的同學，請建立至少三個活動在行事曆，
做完此LAB即可刪除。




3個行程在行事曆
6/4生日趴
6/8輔大遊
6/12上機考

Lab 24 Mash-Up, Part 1 (Maps)

真實案例
96年度全人關懷獎 -崔媽媽科技服務工作團隊


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

http://yungching.housefun.com.tw/

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


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


永慶房仲網 

美感 : 網頁以暖色系的黃色為主要色調，和廣告給人的映像一致。
直覺性 : 需要思考和摸索一下網頁功能，和housingmaps相比起來稍微差一點。
流暢 : 可能附加太多東西，網頁開啟比較慢。
預期反應 : 解果要自己分析，多了幾道比較手續，也不至於偏差很多。



housingmaps

美感 : 網頁簡單俐落，沒有多餘的功能導至於眼花撩亂。
直覺性 : 非常簡單的操作，想到什麼就可以直接反應出來使用。
流暢 : 網頁一點就開啟，馬上點選即跑出來，很流暢。
預期反應 : 和預期產生之結果差不多，沒有很大的偏差。

Lab 30 Programming in 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.

99乘法表程式碼:

按下按鈕顯示99乘法表:

按下按鈕後跑出乘法表:

Lab 29 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.

程式碼:

重覆點選紅色按鈕button:

重複點選按鈕跑出來的多個圖片:

Lab 28 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 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 27 Lab Form and Action

• 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

Purpose of lab: 
Learn 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?



GET的結果

POST的結果