w3c and web standards
DESCRIPTION
在工研院資訊中心的簡報。資訊中心負責工研院內部網路、員工作頁平台的規劃與建置。TRANSCRIPT
W3C 的網路標準
chientai chen2008-06
當您到這樣一家餐廳
Photo courtesy of L’enclume dining room
採購、大廚與侍者，誰最有機會得罪客戶？或者說，毀了一切的努力？
Photos courtesy of (left to right):- Can Organic Farming Feed the World?- chenboon的厨房 - 备份-不是所有的米其林廚師都愛分子美食學
網路標準，理由？
equal and simple to access the web for allPhoto courtesy of e53 Photo courtesy of Novica
Taiwan Beer v.s. 世界的啤酒Photo courtesy of °Florian Photo courtesy of Tym
你不會是世界的角落！
Photo courtesy of nswlearnscope
World Wild Web Consortium, W3C?
Born in 1994, now is 15
Photo courtesy of w3c10
Tim-bernes Lee提姆．伯納．李
• 如果你問我當代的人裡面，我最佩服的人是誰，我會豪不猶豫的告訴你「提姆．伯納．李」—網際網路(World Wide Web) 的創始人。
• 其實說他是「創始人」有些過頭。
• 沒有人會否認，今天的網際網路絕非產自一人之手，很多人默默耕耘，前仆後繼，一點一滴的將這片大網慢慢織成，提姆．伯納．李也是其中之一而已，所不同的是他在一個關鍵的時機，對這片網作出了一個決定性的基礎貢獻。
Photo courtesy of w3c10
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
web for everyone
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
web on everything
web for everyone
Goals of W3C...Photo courtesy of quinn.anya Photo courtesy of law_keven
Photo courtesy of Iquinn.anya
web on everything
web for everyone
knowledge base +
trust and confidence
W3C 網路標準有那些？
The W3C technology stack
Photo courtesy of About w3c
The W3C technology stack
Photo courtesy of About w3c
The W3C technology stack
Photo courtesy of About w3c
XHTML !?
XHTML 就是符合 XML 要求的 HMTL 文件
名詞定義
組件 (element)：有人也稱之元素，它所指的就是一對標籤 (tag) ——起始標籤、結束標籤，與他們所包住的內容，稱為一個元素。當然元素當中也有可能包含其他元素。
例如： <h4>單獨的一個元素</h4>
段落標籤<p>包住一個<em>強調標籤</em></p>我們可以稱裡面的元素叫子元素
宣告文件類型
• 為了使 XHTML 瀏覽器可以正確的解析文件語法並且顯示你的 XHTML 文件，你必須告訴它你試用哪一個版本的 XML 來建立這份文件，你也必須說明用來定義文件中使用之組件的 XHTML DTD 是哪一種。
• 宣告 XML 版本必須使用特殊的 XML 處理指令： <?xml version="1.0" encoding="UTF-8"?> 這麼做是告訴瀏覽器你用的是 1.0 版的 XML 以及 8-bit Unicode 字元集。
• 接下來你必須宣告標示語言的 DTD： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org.tw/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在這個敘述當中，宣告文件的基本組件為 html ，也就是在公用識別記號 (PUBLIC) 為 -//W3C//DTD XHTML 1.0 Transitional//EN 這份 DTD 當中所定義的。
宣告名稱空間
• 根據 XML 規定，在 XHTML 中，至少必須於文件的 <html> 標籤裡使用 xmlns 屬性，定義整份文件所採用的基本名稱空間 ( name space )：
<html xmlns="http://www.w3.org/1999/xhtml">
• 註：到目前這些東西都不需要默背。
一份最簡單的 XHTML 文件
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org.tw/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="zh-hant" lang="zh-hant">
<head>
<title>如何使用 HTML 文件？</title>
</head>
<body>
--文件的內容 --
</body>
</html>
HTML 與 XHTML
• HTML 大部分與 XHTML 相容，但是最大的不同點在於 XHTML 必須完美無缺的符合 XML 的標準。
• 因此，如果我們說我們希望建立一份與 HTML 和 XHTML 都相容的文件，這句話的意思是：這份文件是一份符合 HTML 最新版本語法的文件也是一份符合 XML 標準語法的文件。
• 若是從程式的角度來看，當你把這份文件的副檔名取為 .html 時，它可以在瀏覽器上正常顯示；當你將副檔名取為 .xml 時，它也可以是一份有效的 XML 文件。 因此想寫一份完美的 XHTML 文件，你就必須注意到稍後提到的各種警告訊息。
訊息1：正確地將組件寫成巢狀結構
想寫一份完美的 XHTML 文件，第一個要求是組件的巢狀結構必須正確。這跟 HTML 標準的規定並沒有什麼不同：只要根據你啟用的標籤組件的順序，反過頭來一一關閉就可以。
注意 block level 與 inline level：• <h3><a href=”#”>It’s an anchor</a></h3>• <a href=”#”><h3>It’s an anchor</h3></a>
訊息2：結束標籤
任合包含其他標籤或內容的 HTML 標籤都會有一個對應的結束標籤。然而，HTML 的特色之一就是，如果對應的結束標籤出現的位置可以由程序處理代理程式﹙例如瀏覽器﹚所猜想的話，結束標籤就可以省略。所以通常省略 </li>、</td>、</tr>。但是對 XHTML 則是不一樣，所有的結束標籤必須一一寫出，缺少結束標籤將會產生錯誤。
有時候，沒有正確的結束，很容易造成網頁跛腳。
訊息3：處理空標籤
在 HTML 標籤裡面有許多標籤從一開始就是單獨出現的，例如：<br>、<img> 這樣的標籤我們稱為空標籤 ( empty tag )。XHTML 中，每個標籤都必須有一個對應的結束標籤，於是： <br></br> 的形式出現，這樣太麻煩了！ XHTML 用大於符號 ( > ) 之前加上斜線記號 ( / )來代表它的結束位置，也就是 <br/> 這樣，若是有屬性，則斜線記號必須在屬性之後出現，因此標示圖片的方式可以寫成： <img src="itri_icon.gif"/>
這樣的方法似乎很聰明，但是以這種縮寫方式來表示空標籤，可能會讓 HTML 的瀏覽器無法了解。為了避免產生相容性的問題，當你在 XHTML 使用空標籤時，可以在斜線記號之前加上空白字元來欺騙 HTML 瀏覽器。所以上面的例子就要改為： <br />、<img src="itri_icon.gif" />（現在瀏覽器已經懂了，不用在這樣做了）。
訊息4：大小寫的差異
標籤與屬性的大小寫在 XML 與 XHTML 裡面是有分別的。XHTML DTD 將之前所有的 HTML 標籤與屬性以小寫字母來定義，因此在 XHTML 裡面，<a> 與 <A> 是不同的。
為了達到相容性，這些標籤與屬性名稱都必須轉換為小寫，即使那些在 CSS 裡面定義所使用的內容也不例外。
訊息5：所有屬性值要加引號
XHTML 還要求所有的屬性值，包括數字，都必須以雙引號括起來，為了相容性，請記得： 將 <table rows=3> 改為 <table rows="3">
訊息6：明確的屬性值
在 XHTML 裡面所有的屬性都要有一個屬性值，所以 <td nowrap> 是不允許的，<input type="checkbox" checked> 也是不允許的。你必須改為：<td nowrap="nowrap">、<input type="checkbox" checked="checked">。
訊息7：處理特殊字元
script 或 style sheet 最好在文件中以適當的外部連結參考他們，理由如下： 在 HTML 中，你可以將 script 或 style sheet 寫在註解 ( <!-- --> ) 裡面，以防止可能遇到不相容的情況。然而，XML 瀏覽器可能會將註解的部分所有的內容直接從文件中移除，因此會將 script 或 style sheet 刪除。
為了在 XML 瀏覽器中將特殊字元適當的隱藏，你最好將你的 script 或 style sheet 放到 CDATA 區。這麼做將告訴 XML 瀏覽器，在其中的任何字元都是一般的字元，不具特殊的意義。例如：<script language="JavaScript"><![CDATAJavaScript goes here...]]></script>
訊息8：id 與 name 屬性
在 XHTML id 幾乎已經取代 name。如果你在某些標籤一定要用 name 屬性的話，請同時加上等效的 id 屬性。
An example:
<video> Defines a video
“<video src="http://www.ananova.com/about/vap_windows_check.wmv">your browser does not support the video tag</video>”
HTML 5.0!?
The W3C HTML working group and the WHATWG are working on the same specification, with the same editor.
Cascading Style Sheet, CSS
(X)HTML: 負責超文件的語義與架構CSS: 負責呈現與風格
Cascading Style Sheet
串接式 (Cascading)?
• 一個格式化表單是一些合乎正確語法規定的集合，而串接式瀏覽器允許多個格式化表單，可以同時在同一文件中
支配它
規則(Rules)
• 規則::=選擇器 { 宣告 }/ rule::=selector {declaration}
• 宣告::=屬性名稱:屬性值 / declaration::=property name:value
• 例子：
– body {color:#aa0000;}
記住這個公式
CSS Validator http://jigsaw.w3.org/css-validator/validator.html.en
CSS Validator http://jigsaw.w3.org/css-validator/validator.html.en
Web Accessibility Initiative (WAI)
http://isch400.itri.org.tw/wiki/index.php/The_Guidelines_of_Web_accessibilityhttp://isch400.itri.org.tw/wiki/index.php/Web_Accessibility
有問題，可以請教李婉真 18184（我的分機 18084，攻研書坊 18085）。
W3C Web Accessibility initiative
Conformance Logos
如何檢測：台灣網路無障礙空間 http://www.webguide.nat.gov.tw
【第一優先等級】
【A+等級】具有定位點(:::)（原名網頁導盲磚）搭配鍵盤快速鍵(Accesskey)、網站導覽(Sitemap)功能及網頁瀏覽工具具有使用鍵盤設計
【第二優先等級】【第三優先等級】
優先等級
使用網路標準的優點
駭客與畫家 / code as a kind of art work
為什麼駭客反對著作權和專利？
- 如果你給駭客一個鎖，他第一個想到的念頭是如何打開它。- 更深的原因是︰他們看到越來越多的侵略性行為用於保護「智慧財產權」，這對他們工作需要的知識自由來說是一種威脅。而且，他們是對的。
如果駭客有國定假日，那一定是四月一日。
良好的壞習慣
不可說的禁忌
隱藏是流行的本質，不然它不會起作用。對某個被流行抓住的人而言，流行看來像是應該要做的正確事情。當你是水時，你會如何看待波浪？永保懷疑，這是唯一的防護。
衛納（Norbert Wiener，1894-1964，美國數學家）說過，如果你與奴隸相比，你就成了奴隸。
誰說在工研院，一定要這樣、那樣....
你們應該是藝術家
這聽起來很弔詭，但是一幅偉大的繪畫，一定比它原本的設計更美好。... 同樣的，偉大的軟體也需要對美感的狂熱奉獻。如果仔細的檢視優秀的軟體，你會發現一些沒有人想了解的小地方都如此美麗。
駭客要和畫家一樣有同理心，才能創作偉大的作品。同理心不必然代表自我犧牲，這是完全不同的。
程式應該是為了讓人們閱讀而編寫，只是剛好能給機器執行而已。
Bravo! Welcome to the world. ITRI sharing 3.0
• World Wide Web http://www.w3.org/• Web standard project http://www.webstandards.org/• Web standard group http://webstandardsgroup.org/standards/• Web standard checklist of maxdesign http://www.maxdesign.com.au/presentation/
checklist.htm• HTML 5 reference http://www.w3schools.com/tags/html5.asp• A preview of HTML 5 http://www.alistapart.com/articles/previewofhtml5
References | 參考資料
Thanks