web standards design for awoo part 1
Post on 21-Oct-2014
7.416 views
DESCRIPTION
TRANSCRIPT
網頁標準設計 第一講
<me>
薛良斌快樂網頁設計師
we are
Handlers.
I am Liang-Bin Hsueh [ 薛良斌 / 布丁 ]
快樂網頁設計師
+886 (0)921 628 075, [email protected]
薛良斌快樂網頁設計師
資訊 + 設計
網頁標準設計7yrs+
HappyDesigner
Registrano
HappyDesigner
WaSP ILG
Registrano
HappyDesigner
WaSP ILG
Registrano
Handlino
HappyDesigner Registrano
WaSP ILG
Registrano
Handlino
ケロロ迷
</me>
<網頁標準>
(X)HTML, CSS, ECMAScript
Accessibility, CC/PP, Compound Document Formats, CSS, Databinding, DOM, Efficient XML Interchange, eGovernment, GRDDL, Health Care and Life Sciences, HTML, HTTP, Incubator, InkML, Internationalization, MathML, Mobile Web Initiative, Multimodal Interaction, OWL, Patent Policy, PICS, PNG, POWDER, Privacy and P3P, RDF, Rich Web Clients, Rules, Security, Semantic Web, SML, SMIL, SOAP/XMLP, SOAP-JMS, SPARQL, Style, SVG, TAG, Timed Text, URI/URL, Voice, Ubiquitous Web Applications, WAI, Web API, Web Application Formats, Web Architecture, WebCGM, Web Services, WS-Addressing, WS-CDL, WSDL, WS-Policy, XForms, XHTML, XHTML2, XLink, XML, XML Base, XML Encryption, XML Key Management, XML Query, XML Schema, XML Signature, XPath, XPointer, XSL and XSLT
族繁不及備載
呈現HTML
資訊
太初
結構HTML
呈現CSS
結構與呈現分離
CSS
CSS
CSS
行為DOM
結構HTML
呈現CSS
尊重過去backward compatibility
展望未來forward compatibility
以上是理想
現實
W3C vs. vendors各行其是
NetScape Standards
<layer>, <blink>, JavaScript
IEStandards
<marquee>, <bgsound>, VBScript, JScript
瀏覽器版本太舊！請使用IE5以上參觀
囧rz
那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當石頭、又拿石漆當灰泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。
– 創世記11:1-9
所見即所得WYSIWYG
所見即所得WYSIWYG
所見天曉得WYSIWGK
What You See Is What God Knows
福音
時代改變2002 ~
所見還是天曉得WYSISWGK
</網頁標準>
<CSS>
☢Powerful Design Tool
表格排版
為什麼要用CSS表格排版有什麼問題？
表格 排版根本無關
<table>有規則的資料
沒有選擇table, table, or me?
<table cellpadding="0" cellspacing="0" border="0">
Grids
缺點•冗長的HTML語法 = size++
•不必要的定位用圖片 = request++•語法沒有結構性 = extend--•更新維護不易 = cost++
<table width=175 border=0 cellspacing=0 cellpadding=0><tr><td height=21 background=img2003/bg_Ltitle.gif bgcolor=FED230><img src=img2003/space.gif width=9 height=13><b><script language="JavaScript">Write5cTitle(id)</script></b></td></tr></table><table width=175 border=0 cellspacing=0 cellpadding=0><tr><td valign=top bgcolor=FED230><img src=img2003/ill_FED230.gif width=1 height=108></td><td width=174><table width=98% border=0 cellspacing=0 cellpadding=4 class=t><script language="JavaScript">Write5cBody(id)</script></table></td></tr><tr><td colSpan=2><img src=img2003/space.gif height=10 width=175></td></tr></table><table width=175 border=0 cellspacing=0 cellpadding=0><tr><td height=21 background=img2003/bg_Ltitle.gif bgcolor=FED230><img src=img2003/space.gif width=9 height=13><b>囧囧囧囧</b></td></tr></table><table width=175 border=0 cellspacing=0 cellpadding=0><tr><td valign=top bgcolor=FED230><img src=img2003/ill_FED230.gif width=1></td><td width=174 valign=top><table width=98% border=0 cellspacing=0 cellpadding=4><tr><td align=center height=52 valign=bottom><a href="http://..." onmouseover="return ss()" target=_blank><img src=/upload1/xxxmain/M1_xxx2152.gif alt="Dell" width=108 height=31 border=0 vspace=10></a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr></table></td></tr><tr><td colspan=2><img src=img2003/space.gif height=8 width=175></td></tr></table>
整形前
<div class="section"><h3>囧囧囧囧</h3><div class="sectionContent"><img src="pic/sidebar_ad2.gif" /><ul><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li></ul></div></div>
整形後
CSS vs. Table至少減少15 ~ 35%
☹Not Designer Friendly
設計師？
科學家
CSS都十年了為什麼編輯器還是這麼難用？
</CSS>
<平面設計>
平面設計 vs. 網頁設計
平面設計
頁Page
平面設計
頁Page
網頁設計
流Flow
平面設計
靜一張恆久遠，千古永流傳
平面設計
靜一張恆久遠，千古永流傳
網頁設計
動JavaScript, Flash, Silverlight, Java, ...
平面設計
定全開 | 菊八開 | A4 | B5
平面設計
定全開 | 菊八開 | A4 | B5
網頁設計
變1920x1024, 1024x768, 240x320, 128x128, ...
1920 x 1080
1440 x 900
1280 x 720
720 x 480
320 x 240160
x240
240x
320
240x
160
160x
160
128x
128
轉思考反
</平面設計>
瀏覽器模式
• standards mode
• almost standards mode
• quirks mode
Doctype Switch我真的知道自己在做什麼！
Box Model
IE Box Model
設計流程•使用符合標準的瀏覽器開發符合標準
•補強不符合標準的瀏覽器向後相容
•瀏覽器即開發工具真正所見即所得
•驗證程式碼自助者，人助之
標籤、屬性都小寫<a href="..." onclick="">
<a href="..." onClick="">
✔
✘
標籤開始與結束<p>......</p><p>......</p>
<p>......<p>......
✔
✘
使用正確的標籤<blockquote>, <b>, <em>, <strong>, <hN>
驗證程式碼HTML Validator
Does it matter?
“How can anyone possibly expect CSS or DOM-based Javascript to work reliably with an invalid (X)HTML?”
Tantek Çelik
☯
CSS問題多
別怕！
我們可以解決！☺
寫更多CSS就好了！☻
不然寫JS也可以！☻
可是，
JS問題也多
別怕！
我們也可以解決！☺
寫更多JS就好了！
好職業
☀
輔助工具
Firefox請記得選「自訂安裝」
Firebug
Web Developer Toolbar
Multiple IEs
IE WebDeveloper
http://www.ieinspector.com/
CompanionJShttp://www.my-debugbar.com/wiki/
IETesterhttp://www.my-debugbar.com/wiki/
IETester/HomePage
技
td { font-family: "新細明體", "細明體"; font-size: 9pt; color: #000000}a:link { font-family: "新細明體", "細明體"; font-size: 9pt; color: #0000CC;}a:visited { font-family: "新細明體", "細明體"; font-size: 9pt; color: #0000CC;}a:hover { font-family: "新細明體", "細明體"; font-size: 9pt; color: #0000CC;}a:active { font-family: "新細明體", "細明體"; font-size: 9pt; color: #0000CC}.s { font-family: "新細明體", "細明體"; font-size: 8pt; color: #646464}.v { font-family: "Verdana"; font-size: 7pt; color: #000000}.v2 { font-family: "Verdana"; font-size: 7pt; color: #0000CC}.point { font-family: "Arial"; font-size: 9pt; color: #000000}.h { font-family: "新細明體", "細明體"; font-size: 9pt; color: #000000;line-height:15pt}form { font-family: "新細明體", "細明體"; font-size: 9pt; color: #000000}select { font-family: "新細明體", "細明體"; font-size: 9pt; color: #000000}input { font-family: "新細明體", "細明體"; font-size: 9pt; color: #000000}.tit { font-family: "新細明體", "細明體", "Verdana"; font-size: 15pt}.kind{ background-repeat: no-repeat;}
body { font: 9pt “新細明體”, “細明體”; color: #000; }a:link, a:visited,a:hover, a:active { color: #00c; }.s { font-size: 8pt; color: #646464; }.v { font-family: Verdana; font-size: 7pt; }.v2 { font-family: Verdana; }.point { font-family: Arial; }.h { line-height: 15pt; }select, input { font: 9pt “新細明體”, “細明體”; color: #000; }.tit { font-size: 15pt; }.kind{ background-repeat: no-repeat;}
樣式管理
共同討論
命名
•redtext•greenFrog•the_right_side_column
•this
命名
•main, container, sidebar, wrapper, message, current
•site-search, error-message
取消預設reset.css
Conditional Comments
IE only
<!--[if expression]>blah blah...<![endif]-->
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
濫用DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>unobtrusive css</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type='text/css'> .table { display:table; } .tr { display:table-row; } .td { display:table-cell; } .blue { color:blue; } .bold { font-weight:bold; } .verdana { font-family:verdana; } .hand { cursor:pointer; } </style></head><body> <div class='table'> <div class='tr'> <div class='td'> <span class='verdana bold'>My First Tableless Website!</span> </div> <div class='td'> <span class='verdana'>To See More Information on how to make your first website...</span> </div> <div class='td'> <span class='verdana blue hand' onclick="window.open('http://www.example.com');"> click here </span> </div> </div> </div></body></html>
http://www.dustindiaz.com/totally-compliant-markup/
疊床架屋
LSMLayered Semantic Markup
別讓今天的錯誤成為明日的負擔
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
Thank you• http://www.flickr.com/photos/zeitreise/369145659/
• http://www.flickr.com/photos/jurica/78004956/