Speed up your web development

583 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
583
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Speed up your web development

  1. 1. Speed up your Web Development Ushering in 2012 Speaker : Spin Lai Date : 2012/1/10 2012年1月10日星期二
  2. 2. Time breakdown of modern web development 2012年1月10日星期二
  3. 3. 40% Trying to get the bastard to work in Internet fu*king Explorer 2012年1月10日星期二
  4. 4. 15% Swearing 2012年1月10日星期二
  5. 5. 20% Trying to get the layout to work using only CSS before giving up and using table 2012年1月10日星期二
  6. 6. 10% Making the site W3C comliant 2012年1月10日星期二
  7. 7. 10% Wishing a slow, painful death on Bill Gat*s 2012年1月10日星期二
  8. 8. 5% Actually coding/design 2012年1月10日星期二
  9. 9. Can somebody help us, Please ? 2012年1月10日星期二
  10. 10. Can somebody help us, Of course! 2012年1月10日星期二
  11. 11. ZenCoding SASS/Compass Dojo 2012年1月10日星期二
  12. 12. ZenCoding 2012年1月10日星期二
  13. 13. ZenCoding 2012年1月10日星期二
  14. 14. What is ZenCoding ? 2012年1月10日星期二
  15. 15. What is ZenCoding ? Get HTML done faster ! 2012年1月10日星期二
  16. 16. But I have code snippet plugins for my IDE. 2012年1月10日星期二
  17. 17. Cross-platform Cross-editor CSS-like syntax ZenCoding is ... 2012年1月10日星期二
  18. 18. It works with ... 2012年1月10日星期二
  19. 19. <textarea> 2012年1月10日星期二
  20. 20. And how ? 2012年1月10日星期二
  21. 21. HTML[ ] [ ]Zen Code <div id="content"> </div> 2012年1月10日星期二
  22. 22. HTML[ ] [ ]Zen Code <div id="content"> </div> div#content 2012年1月10日星期二
  23. 23. HTML[ ] [ ]Zen Code <div id="content"> </div> div#content 2012年1月10日星期二
  24. 24. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> 2012年1月10日星期二
  25. 25. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 2012年1月10日星期二
  26. 26. HTML[ ] [ ]Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 2012年1月10日星期二
  27. 27. HTML[ ] [ ]Zen Code <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> 2012年1月10日星期二
  28. 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. 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. 30. HTML[ ] [ ]Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> 2012年1月10日星期二
  31. 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. 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. 33. DEMO 2012年1月10日星期二
  34. 34. SASS/Compass 2012年1月10日星期二
  35. 35. CSS/SASS/Compass 2012年1月10日星期二
  36. 36. 尛 2012年1月10日星期二
  37. 37. 2012年1月10日星期二
  38. 38. CSS / SASS / Compass 2012年1月10日星期二
  39. 39. CSS / SASS / Compass 2012年1月10日星期二
  40. 40. Everything is much easier 2012年1月10日星期二
  41. 41. Everything is much easier in the beginning... 2012年1月10日星期二
  42. 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. 43. 2012年1月10日星期二
  44. 44. When the project grows up... 2012年1月10日星期二
  45. 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. 46. 2012年1月10日星期二
  47. 47. 2012年1月10日星期二
  48. 48. 2012年1月10日星期二
  49. 49. CSS / SASS / Compass 2012年1月10日星期二
  50. 50. SASS is ... 2012年1月10日星期二
  51. 51. NOT SuperASS SASS is ... 2012年1月10日星期二
  52. 52. NOT SuperASS Syntatically Awsome StyleSheet SASS is ... 2012年1月10日星期二
  53. 53. NOT SuperASS Syntatically Awsome StyleSheet SASS v3 is known as SCSS SASS is ... 2012年1月10日星期二
  54. 54. Okay, but what can she do? 2012年1月10日星期二
  55. 55. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  56. 56. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  57. 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. 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. 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. 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. 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. 62. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  63. 63. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } 2012年1月10日星期二
  64. 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. 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. 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. 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. 68. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  69. 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. 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. 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. 72. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  73. 73. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } 2012年1月10日星期二
  74. 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. 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. 76. Nesting Variable Mixins Inheritance and so on... 2012年1月10日星期二
  77. 77. CSS / Sass / Compass 2012年1月10日星期二
  78. 78. Powered by SASS Meta framework Code snippets Best practices Compass is ... 2012年1月10日星期二
  79. 79. Tell me more ! 2012年1月10日星期二
  80. 80. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  81. 81. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  82. 82. @import "compass" .linear { @include background(linear- gradient( top left, #333, #0C0)); } 2012年1月10日星期二
  83. 83. @import "compass" .box { @include border-radius(8px); @include box-shadow( rgba(#CCC, 0.5) 3px 3px 5px ); } 2012年1月10日星期二
  84. 84. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  85. 85. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  86. 86. Helpers Extension Project Context and lots more... 2012年1月10日星期二
  87. 87. DEMO 2012年1月10日星期二
  88. 88. Dojo 2012年1月10日星期二
  89. 89. Dojo 2012年1月10日星期二
  90. 90. One day ... 2012年1月10日星期二
  91. 91. Doraemon 2012年1月10日星期二
  92. 92. It’s easy! see... 2012年1月10日星期二
  93. 93. It’s easy! see... 2012年1月10日星期二
  94. 94. But I use IE9, and... 2012年1月10日星期二
  95. 95. But I use IE9, and... 2012年1月10日星期二
  96. 96. 2012年1月10日星期二
  97. 97. 2012年1月10日星期二
  98. 98. I use IE6, WTF... 2012年1月10日星期二
  99. 99. I use IE6, WTF... 2012年1月10日星期二
  100. 100. 2012年1月10日星期二
  101. 101. God ! Help us !! 2012年1月10日星期二
  102. 102. Dojo ? What’s that? 2012年1月10日星期二
  103. 103. Powerful Javascript toolkit Open source BSD licensed Dojo is ... 2012年1月10日星期二
  104. 104. Powerful ? Show me 2012年1月10日星期二
  105. 105. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  106. 106. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  107. 107. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  108. 108. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  109. 109. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  110. 110. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  111. 111. Layout Form Dialogs Tooltips Trees and lots more... 2012年1月10日星期二
  112. 112. DEMO 2012年1月10日星期二
  113. 113. Last , but not least... 2012年1月10日星期二
  114. 114. IE6 must die! 2012年1月10日星期二
  115. 115. Reference 2012年1月10日星期二
  116. 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日星期二

×