Lab 38 使用HTML 4 和HTML 5的影音播放

測試以下HTML 4 和HTML 5的影音播放功能

• HTML4 Video
• HTML5 Video

比較兩者有何差異。

Lab 37 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 36 模擬辨色能力障礙

VisCheck 可以模擬色盲的效果，而讓妳看到色盲讀者所會看到的樣子。妳不但可以用他來檢查某一張圖片，也可以檢查整個網頁。examples

從學校網站首頁新聞選取五張照片，測試兩類色盲模擬效果。

Homework 12-23-2013 使用Google Drive 進行同步編輯 (HW6)

如何使用Google Drive 雲端硬碟與 微軟Word 與夥伴進行協同編輯

1. 上網下載 Google Drive 程式，在你的電腦上安裝這支雲端硬碟程式

2. 這支程式會建立一個新的目錄，稱做Google 雲端硬碟

3. 所有在這個目錄編寫的任何文件(Word/Excel/ppt) 都會自動同步到 Google 線上文件

4. 進入 Google 線上文件 設定你要和夥伴 分享的文件，可分為 只可預覽，可編輯 等多種權限，如果未設定分享，別人無法看到這些線上文件。

5. 使用 Word 繼續編輯文件，Google 會隨時同步到雲端

優點

1. 無需隨時把新版本傳給夥伴

2. 無需改變編輯工具(Word ...)

Lab 35 匯出部落格

1. 將你的部落格匯出為 XML，請使用blogspot 已經提供的匯出工具
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格
4. 檢查匯出情況，是否有出現異常，資料遺失或被變更?

Lab 34 Zip Code Web Service.

"we make a living by what we get, we make a life by what we give"

Test Drive a web service
1. Take a look at the schema of Zip Code Web Service.
2. Use the lincense key eUhOTOJs9D2mcHU6SiL0CyMQvpJ3I3PqR2/fpRq4BOApWxzSzw7wD2FQ2mOmHEk+pq6iRBomQ4wuQl5EGOgfCitYgkQ3N4vl
to use this web service or subsbcribe to it at Zip codes lookup To apply for the license key by yourselves, be sure to have an email box to receive it.
2. Click GetPlacesInside and play with this operation
3. Enter 61801 as zip code and see what you get in the result.
4. Try again 92345 as zip code

Question: Why do you need a license key to use the service?

From HTTP to SOAP

HTTP
HTTP Header
SOAP Web Service
Simple Object Access Protocol (SOAP)

SOAP stands for Simple Object Access Protocol.

SOAP is a protocol for accessing web services.

SOAP is based on XML.

SOAP examples (source w3cschools)
SOAP code example (source w3cschools)
SOAP Binding example (source w3cschools)
SOAP code example (source wikipedia)

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.

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

網際網路應用系統設計: XML

網際網路應用系統設計: XML: Take a look at islandwide temperatures of Taiwan. What happens if you just want Taoyuan's temperature? If you want to include Taoyua...

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

Lab 28 視障者使用網頁的需求

參考視障者瀏覽網頁的需求，請至少針對五類需求（例如：選定你的語言），每類舉出一個網頁實例（台灣或國外皆可），並列出該網頁關鍵HTML片段，證明該網頁的確符合視障者需求。

相關新聞報導 爭資訊與文化平權 上千身障者上街(自由時報12.1.2013)

Lab 27 如何計算 PageRank

有A, B, C 三個網頁，A引用了B, C，B引用了C，C也引用了 A
計算A,B,C 三個網頁的PageRank，三者PageRank排序為何?

PageRank-Google

PageRank-Google 決定搜尋排名的關鍵技術

11/25(一)課程: 系友分享

11/25(一) 邀了本屆電子所畢業生顏銘毅到課堂上分享國際志工經驗。一個愛探索的靈魂，趁著當兵前漫長等待的日子，自費到柬埔寨一個月，讓我們一起來聽聽，一個不擅包裝，平鋪直敘的電子人從過去這個月看到甚麼，做了甚麼，學到甚麼。
時間: 7:00 pm
地點: 電學 416 教室

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

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
How to make a link that is not underlined, with the style attribute.

Link to an external style sheet
How to use the tag to link to an external style sheet.

source

HTML by Examples

a simple start

HTML Page Structure

This a heading

This is a paragraph.

This is another paragraph.

source

HTML Versions

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

source

HTML Headings

Paragraphs

Links

An image as a link
How to use an image as a link.

Link to a location on the same page
How to link to a bookmark.

Break out of a frame
How to break out of a frame (if your site is locked in a frame).

Create a mailto link
How to link to a mail message (will only work if you have mail installed).

Create a mailto link 2
Another mailto link.

Images

Formatting

Text formatting
How to format text in an HTML document.

Preformatted text
How to control the line breaks and spaces with the pre tag.

"Computer output" tags
How different "computer output" tags will be displayed.

Address
How to define contact information for the author/owner of an HTML document.

Abbreviations and acronyms
How to handle abbreviations and acronyms.

Text direction
How to change the text direction.

Quotations
How to handle long and short quotations.

Deleted and inserted text
How to mark deleted and inserted text.

Marked/Highlighted text
How to mark/highlight text.

Headers

Tables

Tables without borders
How to create tables without borders.
Table headers
How to create table headers.
Table with a caption
How to add a caption to a table.
Table cells that span more than one row/column
How to define table cells that span more than one row or one column.
Tags inside a table
How to display elements inside other elements.
Cell padding
How to use cellpadding to create more white space between the cell content and its borders.
Cell spacing
How to use cellspacing to increase the distance between the cells.

List
Unordered list
How to create an unordered list in an HTML document.
Ordered list
How to create an ordered list in an HTML document.

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

Lab 24 HTML

HTML 

• Tutorial

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 

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

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

Lab 23 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 的論文

Homework 11-5-2013 (HW5)

Study the phone number example in JavaScript Regular Expressions Chapter. Enhance the program to achieve the following.
1. If the user gives an incorrect format of phone numbers, the input will be cleared.
2. The cursor will come back to the input text field after the input is cleared.

Due 11-12-2013

Lab 22 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()"

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

Lab 20 共同編輯文件

閱讀莫拉克風災電腦教室再生計畫，假設這個計畫是由你發起，你要擬定一張志工排班表，以及修復場地值班人員。

• 請製作一張值班人員表，為了提升效率，你決定先擬好空白表格，再開放編輯權限給你的夥伴填寫，請夥伴上網登記輪值時間。
• 製作志工時間登記表，當志工們填寫資料，管理者可以得到一份excel清單，為了保障個人隱私，請不要將excel公開給所有人。

助教教學文件

Lab 19 製作線上投影片

參閱特教學校科技輔具應用工作坊議程表，將範例投影片轉為Google投影片，可以線上觀看。

Homework 10-28-2013 (HW4)

邀請你拍幾張深秋的美景或用文字描繪深秋之美，上傳到你的部落格與同學們分享。

due 11-4-2013

Hint:

• UIC 2008 挪威奧斯陸之行

Lab 18 Google Maps

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

Lab 17 Regular Expression II

撰寫一個網頁能夠自動檢查輸入的字串是否為"整數或小數，逗號，整數或小數"格式(例如 24.9586,121.24114)

Lab 16 Regular expression I

撰寫一個網頁能夠自動檢查輸入的字串是否為整數或小數(例如 12.34, -1.2, +0.02, .30)。

10/28 Regular Expression

Regular expression 
JavaScript Regular Expressions Chapter

Homework 10-21-2013

1. 參考 Udacity 課程，撰寫一個網頁能夠自動檢查輸入的字串是否為整數(包含負整數)。

建議開發工具 notepad++

建議使用瀏覽器 Firefox/Chrome/IE/Safari
你可能需要的資訊 Regular expression 

Due 10-28-2013 6:30 pm

公告

清大彭明輝教授 10/28（一）晚上 7:00~9:00 中原大學瑞麗堂 通識講座 「崩世代的困境與對策」
去聽演講者，持出席證明事後可以註銷缺席。

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


可參考 CGI程式入門

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