• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
247
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Speed up your Web Development Ushering in 2012 Speaker : Spin Lai Date : 2012/1/10 2012年1月10日星期二
  • 2. Time breakdown of modern web development 2012年1月10日星期二
  • 3. 40% Trying to get the bastard to work in Internet fu*king Explorer 2012年1月10日星期二
  • 4. 15% Swearing 2012年1月10日星期二
  • 5. 20% Trying to get the layout to work using only CSS before giving up and using table 2012年1月10日星期二
  • 6. 10% Making the site W3C comliant 2012年1月10日星期二
  • 7. 10% Wishing a slow, painful death on Bill Gat*s 2012年1月10日星期二
  • 8. 5% Actually coding/design 2012年1月10日星期二
  • 9. Can somebody help us, Please ? 2012年1月10日星期二
  • 10. Can somebody help us, Of course! 2012年1月10日星期二
  • 11. ZenCoding SASS/Compass Dojo 2012年1月10日星期二
  • 12. ZenCoding 2012年1月10日星期二
  • 13. ZenCoding 2012年1月10日星期二
  • 14. What is ZenCoding ? 2012年1月10日星期二
  • 15. What is ZenCoding ? Get HTML done faster ! 2012年1月10日星期二
  • 16. But I have code snippet plugins for my IDE. 2012年1月10日星期二
  • 17. Cross-platform Cross-editor CSS-like syntax ZenCoding is ... 2012年1月10日星期二
  • 18. It works with ... 2012年1月10日星期二
  • 19. <textarea> 2012年1月10日星期二
  • 20. And how ? 2012年1月10日星期二
  • 21. HTML[ ] [ ]Zen Code <div id="content"> </div> 2012年1月10日星期二
  • 22. HTML[ ] [ ]Zen Code <div id="content"> </div> div#content 2012年1月10日星期二
  • 23. HTML[ ] [ ]Zen Code <div id="content"> </div> div#content 2012年1月10日星期二
  • 24. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> 2012年1月10日星期二
  • 25. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 2012年1月10日星期二
  • 26. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 2012年1月10日星期二
  • 27. HTML[ ] [ ]Zen Code <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
  • 28. HTML[ ] [ ]Zen Code select#jazz.album>option*2 <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
  • 29. HTML[ ] [ ]Zen Code select#jazz.album>option*2 <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
  • 30. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> 2012年1月10日星期二
  • 31. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> div#thediv>p.first+p.second 2012年1月10日星期二
  • 32. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> div#thediv>p.first+p.second 2012年1月10日星期二
  • 33. DEMO 2012年1月10日星期二
  • 34. SASS/Compass 2012年1月10日星期二
  • 35. CSS/SASS/Compass 2012年1月10日星期二
  • 36. 尛 2012年1月10日星期二
  • 37. 2012年1月10日星期二
  • 38. CSS / SASS / Compass 2012年1月10日星期二
  • 39. CSS / SASS / Compass 2012年1月10日星期二
  • 40. Everything is much easier 2012年1月10日星期二
  • 41. Everything is much easier in the beginning... 2012年1月10日星期二
  • 42. body { margin: 0; padding: 0; background-color: #D1E7FF; font-family: Verdana, Arial, Helvetica, sans-serif; } div#main { margin: 0 2em 0 2em; padding: 0; background: #FFF; } div#footer { margin: 0 3em; padding: 0.5em 0; background: #FFF; height: 64px; background-image: url('images/inex_06.jpg'); } 2012年1月10日星期二
  • 43. 2012年1月10日星期二
  • 44. When the project grows up... 2012年1月10日星期二
  • 45. table#tb_product_grid {width: 100%;} table#tb_product_grid td {margin: 0;padding: 0; text-align: center;} table#tb_product_grid img{width: 350px;} table#tb_LT_realtime th.y_desc {border-right: 1px solid #999; border-bottom: 1px solid #999; background: #5A042C; color: #FFF; width: 22%;} table#tb_LT_realtime th.x_var {background: #E7E5E5; width: 13%;} table#tb_LT_realtime th.y_var {border: 1px solid #DDD; padding: 0.25em 1.5em 0.25em 0; text-align: right;} .formbutton04{ cursor:pointer; border:outset 1px #ccc; background:#999; color:#000; font-family:Verdana,sans-serif; font-weight:bold; padding: 1px 2px; background:url(images/formbg04.gif) repeat-x left top; } .btn3_mouseout { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } .btn3_mouseover { BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid } iv#display_img{ text-align: center; margin: 0 0 0 2.5em; width: 1000px; } div#img_name{ width: 1000px; height:20px; font-size: large; text-align: center; } div#img_list_name{ padding:2px; font-size: large; height: 20px; text-align: center; width: 1000px; } div#down_gif{ margin: 0.5em 0 0 2.5em; width:1000px; /* height:20px; */ text-align:right; cursor: pointer; } .ui-tabs { padding: .2em; zoom: 1; }.ui-tabs .ui-tabs-nav { list-style: none; position:relative; padding: .2em .2em 0; }.ui-tabs .ui-tabs-nav li { position: relative;float: left; border-bottom-width: 0 !important;margin: 0 .2em -1px 0; padding: 0; }.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }.ui-tabs .ui-tabs-nav li.ui-tabs-selected{ padding-bottom: 1px; border-bottom-width: 0; }.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a{ cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{ cursor: pointer; } /* first selector in groupseems obsolete, but required to overcome bug inOpera applying cursor: text overall if definedelsewhere... */ .ui-tabs .ui-tabs-panel { padding: 1em 1.4em;display: block; border-width: 0; background:none; } .ui-tabs .ui-tabs-hide { display: none !important; } div.sitemap_layer_1{ border: 1px solid #B5D9EA; margin: 0.5em 0 0 28px; background: #D9F1FC; padding: 0.25em 1em 0.25em 1em; display: inline-block; *display: inline; / * This is for IE6 */ zoom: 1; / * This is for inline-block in IE */ *display: inline !important; / * This is for IE7 */ } 2012年1月10日星期二
  • 46. 2012年1月10日星期二
  • 47. 2012年1月10日星期二
  • 48. 2012年1月10日星期二
  • 49. CSS / SASS / Compass 2012年1月10日星期二
  • 50. SASS is ... 2012年1月10日星期二
  • 51. NOT SuperASS SASS is ... 2012年1月10日星期二
  • 52. NOT SuperASS Syntatically Awsome StyleSheet SASS is ... 2012年1月10日星期二
  • 53. NOT SuperASS Syntatically Awsome StyleSheet SASS v3 is known as SCSS SASS is ... 2012年1月10日星期二
  • 54. Okay, but what can she do? 2012年1月10日星期二
  • 55. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  • 56. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  • 57. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } 2012年1月10日星期二
  • 58. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } 2012年1月10日星期二
  • 59. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } 2012年1月10日星期二
  • 60. [ CSS ] [ SCSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } 2012年1月10日星期二
  • 61. [ CSS ] #header { margin-bottom: 50px; } #header h1 { font-size: 24px; color: red; } #header h1 a { display: block; } #header ul.nav li { float: left; } #header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } } } [ SCSS ] 2012年1月10日星期二
  • 62. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  • 63. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } 2012年1月10日星期二
  • 64. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
  • 65. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
  • 66. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
  • 67. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } $LINK_COLOR: #FF9900; $MARGIN: 20px; a, h1, h2, h3, h4, h5 { color: $LINK_COLOR; } #header { background: $LINK_COLOR; } .section { padding: $MARGIN / 2; margin-bottom: $MARGIN; } 2012年1月10日星期二
  • 68. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  • 69. [ CSS ] [ SCSS ] #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } 2012年1月10日星期二
  • 70. [ CSS ] [ SCSS ] @mixin rounded-top { $RADIUS: 10px; border-top-radius: $RADIUS; -moz-border-radius-top: $RADIUS; -webkit-border-top-radius: $RADIUS; } #navbar li { @include rounded- top; } #footer { @include rounded-top; } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } 2012年1月10日星期二
  • 71. [ CSS ] [ SCSS ] @mixin rounded-top { $RADIUS: 10px; border-top-radius: $RADIUS; -moz-border-radius-top: $RADIUS; -webkit-border-top-radius: $RADIUS; } #navbar li { @include rounded- top; } #footer { @include rounded-top; } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } 2012年1月10日星期二
  • 72. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  • 73. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
  • 74. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { @extend .warn; font-weight: bold; color: red; } .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
  • 75. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { @extend .warn; font-weight: bold; color: red; } .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
  • 76. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  • 77. CSS / Sass / Compass 2012年1月10日星期二
  • 78. Powered by SASS Meta framework Code snippets Best practices Compass is ... 2012年1月10日星期二
  • 79. Tell me more ! 2012年1月10日星期二
  • 80. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  • 81. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  • 82. @import "compass" .linear { @include background(linear- gradient( top left, #333, #0C0)); } 2012年1月10日星期二
  • 83. @import "compass" .box { @include border-radius(8px); @include box-shadow( rgba(#CCC, 0.5) 3px 3px 5px ); } 2012年1月10日星期二
  • 84. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  • 85. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  • 86. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  • 87. DEMO 2012年1月10日星期二
  • 88. Dojo 2012年1月10日星期二
  • 89. Dojo 2012年1月10日星期二
  • 90. One day ... 2012年1月10日星期二
  • 91. Doraemon 2012年1月10日星期二
  • 92. It’s easy! see... 2012年1月10日星期二
  • 93. It’s easy! see... 2012年1月10日星期二
  • 94. But I use IE9, and... 2012年1月10日星期二
  • 95. But I use IE9, and... 2012年1月10日星期二
  • 96. 2012年1月10日星期二
  • 97. 2012年1月10日星期二
  • 98. I use IE6, WTF... 2012年1月10日星期二
  • 99. I use IE6, WTF... 2012年1月10日星期二
  • 100. 2012年1月10日星期二
  • 101. God ! Help us !! 2012年1月10日星期二
  • 102. Dojo ? What’s that? 2012年1月10日星期二
  • 103. Powerful Javascript toolkit Open source BSD licensed Dojo is ... 2012年1月10日星期二
  • 104. Powerful ? Show me 2012年1月10日星期二
  • 105. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 106. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 107. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 108. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 109. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 110. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 111. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  • 112. DEMO 2012年1月10日星期二
  • 113. Last , but not least... 2012年1月10日星期二
  • 114. IE6 must die! 2012年1月10日星期二
  • 115. Reference 2012年1月10日星期二
  • 116. ZenCoding http://code.google.com/p/zen-coding/ SASS http://sass-lang.com Compass http://compass-style.org Dojo http://dojotoolkit.org 2012年1月10日星期二