design with web standards for kkbox
Post on 22-Oct-2014
3.667 views
DESCRIPTION
2008/12/5TRANSCRIPT
hlb, 布丁
Handlino和多 — 和而不同，少就是多
HappyDesigner
Registrano
HappyDesigner
WaSP ILG
Registrano
HappyDesigner
WaSP ILG
Registrano
Handlino
網頁標準設計Design with web standards
網頁標準設計？
網頁標準設計 ‒妥善使用網頁標準設計網站
網頁標準web standards
標準 = 規約
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
族繁不及備載
(X)HTML, CSS, ECMAScript
呈現HTML
資訊
太初
結構HTML
呈現CSS
結構與呈現分離
CSS
CSS
CSS
行為DOM
結構HTML
呈現CSS
現實
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
妥善使用
驗證程式碼HTML Validator
“How can anyone possibly expect CSS or DOM-based Javascript to work reliably with an invalid (X)HTML?”
— Tantek Çelik
標籤、屬性都小寫<a href="..." onclick="">
<a href="..." onClick="">
✔
✘
標籤開始與結束<p>......</p><p>......</p>
<p>......<p>......
✔
✘
引號<img src="..." border="0">
<img src='..." border=0>
✔
✘
使用正確的標籤<blockquote>, <b>, <em>, <strong>, <hN>
瀏覽器模式standard / quirks mode
Box Model
IE Box Model
我知道自己在做什麼Doctype Switch
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="zh-TW"> <title>KKBOX 百萬音樂 無限下載</title> <link rel="stylesheet" type="text/css" href="stylesheets/application.css"> <script type="text/javascript" src="javascripts/application.js"></script> </head> <body>
編碼Big5 跟 UTF-8 到底是什麼鬼
BOM!
濫用DIV
http://www.dustindiaz.com/totally-compliant-markup/
<!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>
疊床架屋
LSMLayered Semantic Markup
別讓今天的錯誤成為明日的負擔
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
<CSS>
☢Powerful Weapon
表格排版
為什麼要用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
編輯器工欲善其事，必先利其器
•Dreamweaver
•Notepad++•EditPlus•UltraEdit•Coda
輔助工具
Firefox
Multiple IEs
IE WebDeveloper
http://www.ieinspector.com/dominspector/index.html
CompanionJShttp://www.my-debugbar.com/wiki/CompanionJS/HomePage
IETesterhttp://www.my-debugbar.com/wiki/IETester/HomePage
排版方式
Liquid(Fluid)
Elastic
Fixed
reset csshttp://meyerweb.com/eric/tools/css/reset/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}
/* remember to define focus styles! */:focus { outline: 0;}
/* remember to highlight inserts somehow! */ins { text-decoration: none;}del { text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */table { border-collapse: collapse; border-spacing: 0;}
Font
字型大小是問題http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
YUI Fonts.css/** * Percents could work for IE, but for backCompat purposes, we are using keywords. * x-small is for IE6/7 quirks mode. */body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}
body { font-size: 62.5%; }
16 * 62.5% = 10
Link
LoVe, HAtea:link, a:visited, a:hover, a:active { text-decoration: none;}a:link {}a:visited {}a:visited:hover {}a:hover {}a:active {}
LVFHA
樣式管理
共同討論
命名
•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
CSS Tricks
clearing float
Image Replacementhttp://www.stopdesign.com/present/2004/sxsw/goodbad/?no=3
Link Backgroundhttp://www.simplebits.com/notebook/2004/07/18/clickable.html
CSS Rollovershttp://www.stopdesign.com/present/2004/sxsw/hifi/?no=12
導覽列http://superfluousbanter.org/archives/2004/05/navigation-matrix/
CSS Dropdown Menu
Sliding Doorshttp://www.alistapart.com/articles/slidingdoors/
Double Rolloverhttp://stopdesign.com/present/eg/ap/
Image Maphttp://hlb.yichi.org/design/css/map/taiwan/
IE tricks
Double Margindiv#box { float: right; margin-right: 20px;}
margin-right in IE 6 = 40px!
min-heightselector { min-height:500px; height:auto !important; height:500px;}
:hoveruse IE behavior
PNGprogid:DXImageTransform.Microsoft.AlphaImageLoader
IE7IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
http://code.google.com/p/ie7-js/
hasLayout金手指☝
hasLayoutzoom: 1;
height: 1%;
效能調校optimization
源碼最佳化code optimization
整理樣式CSS Combination
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;}
JS壓縮jsmin
(function(){var _jQuery=window.jQuery,_$=window.$;var jQuery=window.jQuery=window.$=function(selector,context){return new jQuery.fn.init(selector,context);};var quickExpr=/^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/,isSimple=/^.[^:#\[\.]*$/,undefined;jQuery.fn=jQuery.prototype={init:function(selector,context){selector=selector||document;if(selector.nodeType){this[0]=selector;this.length=1;return this;}if(typeof selector=="string"){var match=quickExpr.exec(selector);if(match&&(match[1]||!context)){if(match[1])selector=jQuery.clean([match[1]],context);else{var elem=document.getElementById(match[3]);if(elem){if(elem.id!=match[3])return jQuery().find(selector);return jQuery(elem);}selector=[];}}elsereturn jQuery(context).find(selector);}else if(jQuery.isFunction(selector))return jQuery(document)[jQuery.fn.ready?"ready":"load"](selector);return this.setArray(jQuery.makeArray(selector));},jquery:"1.2.6",size:function(){return this.length;},length:0,get:function(num){return num==undefined?jQuery.makeArray(this):this[num];},pushStack:function(elems){var ret=jQuery(elems);ret.prevObject=this;return ret;},setArray:function(elems){this.length=0;Array.prototype.push.apply(this,elems);return this;},each:function(callback,args){return jQuery.each(this,callback,args);},index:function(elem){var ret=-1;return jQuery.inArray(elem&&elem.jquery?elem[0]:elem,this);},attr:function(name,value,type){var options=name;if(name.constructor==String)if(value===undefined)return this[0]&&jQuery[type||"attr"](this[0],name);else{options={};options[name]=value;}return this.each(function(i){for(name in options)jQuery.attr(type?this.style:this,name,jQuery.prop(this,options[name],type,i,name));});},css:function(key,value){if((key=='width'||key=='height')&&parseFloat(value)<0)value=undefined;return this.attr(key,value,"curCSS");},text:function(text){if(typeof text!="object"&&text!=null)return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(text));var ret="";jQuery.each(text||this,function(){jQuery.each(this.childNodes,function(){if(this.nodeType!=8)ret+=this.nodeType!=1?this.nodeValue:jQuery.fn.text([this]);});});return ret;},wrapAll:function(html){if(this[0])jQuery(html,this[0].ownerDocument).clone().insertBefore(this[0]).map(function(){var elem=this;while(elem.firstChild)elem=elem.firstChild;return elem;}).append(this);return this;},wrapInner:function(html){return this.each(function(){jQuery(this).contents().wrapAll(html);});},wrap:function(html){return this.each(function(){jQuery(this).wrapAll(html);});},append:function(){return this.domManip(arguments,true,false,function(elem){if(this.nodeType==1)this.appendChild(elem);});},prepend:function(){return this.domManip(arguments,true,true,function(elem){if(this.nodeType==1)this.insertBefore(elem,this.firstChild);});},before:function(){return this.domManip(arguments,false,false,function(elem){this.parentNode.insertBefore(elem,this);});},after:function(){return this.domManip(arguments,false,true,function(elem){this.parentNode.insertBefore(elem,this.nextSibling);});},end:function(){return this.prevObject||jQuery([]);},find:function(selector){var elems=jQuery.map(this,function(elem){return jQuery.find(selector,elem);});return this.pushStack(/[^+>] [^+>]/.test(selector)||selector.indexOf("..")>-1?jQuery.unique(elems):elems);},clone:function(events){var ret=this.map(function(){if(jQuery.browser.msie&&!jQuery.isXMLDoc(this)){var clone=this.cloneNode(true),container=document.createElement("div");container.appendChild(clone);return jQuery.clean([container.innerHTML])[0];}elsereturn this.cloneNode(true);});var clone=ret.find("*").andSelf().each(function(){if(this[expando]!=undefined)this[expando]=null;});if(events===true)this.find("*").andSelf().each(function(i){if(this.nodeType==3)return;var events=jQuery.data(this,"events");for(var type in events)for(var handler in events[type])jQuery.event.add(clone[i],type,events[type][handler],events[type][handler].data);});return ret;},filter:function(selector){return this.pushStack(jQuery.isFunction(selector)&&jQuery.grep(this,function(elem,i){return selector.call(elem,i);})||jQuery.multiFilter(selector,this));},not:function(selector){if(selector.constructor==String)if(isSimple.test(selector))return this.pushStack(jQuery.multiFilter(selector,this,true));elseselector=jQuery.multiFilter(selector,this);var isArrayLike=selector.length&&selector[selector.length-1]!==undefined&&!selector.nodeType;return this.filter(function(){return isArrayLike?jQuery.inArray(this,selector)<0:this!=selector;});},add:function(selector){return this.pushStack(jQuery.unique(jQuery.merge(this.get(),typeof selector=='string'?jQuery(selector):jQuery.makeArray(selector))));},is:function(selector){return!!selector&&jQuery.multiFilter(selector,this).length>0;},hasClass:function(selector){return this.is("."+selector);},val:function(value){if(value==undefined){if(this.length){var elem=this[0];if(jQuery.nodeName(elem,"select")){var index=elem.selectedIndex,values=[],options=elem.options,one=elem.type=="select-one";if(index<0)return null;for(var i=one?index:0,max=one?index+1:options.length;i<max;i++){var option=options[i];if(option.selected){value=jQuery.browser.msie&&!option.attributes.value.specified?option.text:option.value;if(one)return value;values.push(value);}}return values;}elsereturn(this[0].value||"").replace(/\r/g,"");}return undefined;}if(value.constructor==Number)value+='';return this.each(function(){if(this.nodeType!=1)return;if(value.constructor==Array&&/radio|checkbox/.test(this.type))this.checked=(jQuery.inArray(this.value,value)>=0||jQuery.inArray(this.name,value)>=0);else if(jQuery.nodeName(this,"select")){var values=jQuery.makeArray(value);jQuery("option",this).each(function(){this.selected=(jQuery.inArray(this.value,values)>=0||jQuery.inArray(this.text,values)>=0);});if(!values.length)this.selectedIndex=-1;}elsethis.value=value;});},html:function(value){return value==undefined?(this[0]?this[0].innerHTML:null):this.empty().append(value);},replaceWith:function(value){return this.after(value).remove();},eq:function(i){return this.slice(i,i+1);},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments));},map:function(callback){return this.pushStack(jQuery.map(this,function(elem,i){return callback.call(elem,i,elem);}));},andSelf:function(){return this.add(this.prevObject);},data:function(key,value){var parts=key.split(".");parts[1]=parts[1]?"."+parts[1]:"";if(value===undefined){var data=this.triggerHandler("getData"+parts[1]+"!",[parts[0]]);if(data===undefined&&this.length)data=jQuery.data(this[0],key);return data===undefined&&parts[1]?this.data(parts[0]):data;}elsereturn this.trigger("setData"+parts[1]+"!",[parts[0],value]).each(function(){jQuery.data(this,key,value);});},removeData:function(key){return this.each(function(){jQuery.removeData(this,key);});},domManip:function(args,table,reverse,callback){var clone=this.length>1,elems;return this.each(function(){if(!elems){elems=jQuery.clean(args,this.ownerDocument);if(reverse)elems.reverse();}var obj=this;if(table&&jQuery.nodeName(this,"table")&&jQuery.nodeName(elems[0],"tr"))obj=this.getElementsByTagName("tbody")[0]||this.appendChild(this.ownerDocument.createElement("tbody"));var scripts=jQuery([]);jQuery.each(elems,function(){var elem=clone?jQuery(this).clone(true)[0]:this;if(jQuery.nodeName(elem,"script"))scripts=scripts.add(elem);else{if(elem.nodeType==1)scripts=scripts.add(jQuery("script",elem).remove());callback.call(obj,elem);}});scripts.each(evalScript);});}};jQuery.fn.init.prototype=jQuery.fn;function evalScript(i,elem){if(elem.src)jQuery.ajax({url:elem.src,async:false,dataType:"script"});elsejQuery.globalEval(elem.text||elem.textContent||elem.innerHTML||"");if(elem.parentNode)elem.parentNode.removeChild(elem);}function now(){return+new Date;}jQuery.extend=jQuery.fn.extend=function(){var target=arguments[0]||{},i=1,length=arguments.length,deep=false,options;if(target.constructor==Boolean){deep=target;target=arguments[1]||{};i=2;}if(typeof target!="object"&&typeof target!="function")target={};if(length==i){target=this;--i;}for(;i<length;i++)if((options=arguments[i])!=null)for(var name in options){var src=target[name],copy=options[name];if(target===copy)continue;if(deep&©&&typeof copy=="object"&&!copy.nodeType)target[name]=jQuery.extend(deep,src||(copy.length!=null?[]:{}),copy);else if(copy!==undefined)target[name]=copy;}return target;};var expando="jQuery"+now(),uuid=0,windowData={},exclude=/z-?index|font-?weight|opacity|zoom|line-?height/i,defaultView=document.defaultView||{};jQuery.extend({noConflict:function(deep){window.$=_$;if(deep)window.jQuery=_jQuery;return jQuery;},isFunction:function(fn){return!!fn&&typeof fn!="string"&&!fn.nodeName&&fn.constructor!=Array&&/^[\s[]?function/.test(fn+"");},isXMLDoc:function(elem){return elem.documentElement&&!elem.body||elem.tagName&&elem.ownerDocument&&!elem.ownerDocument.body;},globalEval
JS結合cat a.js b.js c.js > app.js
圖片最佳化Image Optimization
Asset Host2~4 connections per hostname
http://www.die.net/musings/page_load_time/
• kkbox.com
➡ asset0.kkbox.com
➡ asset1.kkbox.com
➡ asset2.kkbox.com
➡ asset3.kkbox.com
漸進強化Progressive Enhancement
精益求精
http://nedbatchelder.com/blog/200805/css_homer_animated.html
謝謝ご清聴ありがとうございましたhttp://handlino.com/
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。