Desarrollo Web Inteligente

Charla en Barcamp Buenos Aires 2013 sobre el uso de preprocesadores HTML y CSS. Se cubren JADE, SASS y LESS

Transcript

1. desarrollo web inteligente con preprocesadores html y css max kraszewski @minimalart
2. cómo comenzamos un proyecto web
3. html
4. html html
5. html html html html html html html html html html html html html html html
6. html html html html html html html html html html html repetición de gran parte del código
8. complejidad del DOM y código inmantenible
9. JADE node template engine
10. div      span <div>      <span></span>   </div> html jade nodos div#main <div  id=“main”> ids html jade div.message <div  class=“message”> clases html jade script(src=js/jquery.js) <script  src=“js/jquery.js”/> atributos html jade
11. html jade
12. simplicidad. elegancia.
13. //  header.jade   head      title  Mi  Sitio      script(src=js/jquery.js) include de templates //  footer.jade   footer      p  Copyright  2013 //  index.jade   doctype      html          include  head      body          h1  Bienvenidos          p    Parrafo          include  footer jade jade jade html
14. extend y soporte de bloques //  layout.jade   doctype      html          head              title  Mi  Sitio              block  script          body              block  content                footer                  Copyright  2013 jade //  index.jade   extends  layout   ! block  script      script(src=js/jquery.js)   ! block  content      h1  Bienvenidos      p  Párrafo jade //  contact.jade   extends  layout   ! block  content      h1  Contacto      form          input#nombre(type=“text”) jade //  about.jade   extends  layout   ! block  content      h1  Sobre  mi      p  Mi  nombre  es  Max      p  Vivo  en  Buenos  Aires jade
15. about.jade contact.jade other.jade layout.jade index.jade jade engine about.html contact.html other.html index.html
16. simplicidad. elegancia. robustez.velocidad.organización
17. bien. agreguemos estilos
18. main.css index.html
19. main.css colors.css modules.css reset.css layout.css fonts.css @import index.html
20. reducción de performance
21. main.css colors.css modules.css reset.css layout.css fonts.css link href index.html
22. un poco mejor… pero aún muchos http requests extras
24. redundancia y nula reutilización
25. LESS dynamic stylesheet language
26. @main-­‐color:  #FFCC00;   ! h1  {        color:  @main-­‐color;     }   ! header  {        background-­‐color:  @main-­‐color;   } h1  {        color:  #FFCC00;     }   ! header  {        background-­‐color:  #FFCC00;   } .css .less variables @main-­‐font:  “Arial,Tahoma”;   ! h1  {        font-­‐family:  @main-­‐font;     }   ! h2  {        font:  bold  1.2em  @main-­‐font;   } h1  {      font-­‐family:  “Arial,Tahoma”;     }   ! header  {        font:  bold  1.2em  “Arial,Tahoma”;   } .css .less
27. @import  “reset.css”;   @import  “grid.less”;   @import  “colors.less”;   @import  “icons.less”;   ! header  {  color:  @color;  }   (content  of  reset.css)   (content  of  grid.less)   (content  of  colors.less)   (content  of  icons.less)   ! header  {  color:  black;  }   ! .css .less import header  {        h1  {          background-­‐color:  gray;          color:  white;      }      nav  {        background-­‐color:  blue;        ul  {  list-­‐style-­‐type:  none;  }        }   }   header  h1  {         background-­‐color:  gray;                color:  white;     }   header  nav  {         background-­‐color:  blue;   }   header  nav  ul  {         list-­‐style-­‐type:  none;     }   ! ! .css .less anidamiento
28. @page-­‐width:  960px;   @main-­‐width:  600px;   @sidebar-­‐width:  @page-­‐width  -­‐  @main-­‐width   .less operaciones matemáticas @color:  red;   ! button  {       background-­‐color:  @color;     &:hover  {background-­‐color:  darken(@color,  10%);   }   ! .less operaciones de color
29. .bordered  {       border-­‐top:  1px  dotted  black;     border-­‐bottom:  2px  solid  black;   }   ! .rounded(@radius)  {       border-­‐radius:  @radius;     }   ! button  {            background-­‐color:  red;          color:  white;          .bordered;     }   ! label  {            background-­‐color:  red;          color:  white;     .rounded(4px);   }   .less mixins con y sin parámetros
30. simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías
33. SASS syntactically awesome stylesheet
34. el 80% de SASS y LESS es similar
38. cual usar? depende
39. instalación y uso
40. >  npm  install  jade   ! >  jade  index.jade  index.html   jade .jade >  npm  install  less   ! >  lesscss  style.less  style.css   less .less >  gem  install  sass   ! >  sass  style.scss  style.scss   sass .sass
45. simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías dry. don’t repeat yourself
46. “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” Andrew Clarke, 2009
47. “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong! “I once wrote that there was no need to use a CSS pre-processor like LESS or Sass. I was wrong. Very sorry.” Andrew Clarke, 2011
48. “By becoming web developers you agreed on staying up to date with all the new cool stuff. ! THIS is the new cool stuff. Jonathan Verrechia (creator of Initialzr)
49. gracias ! max kraszewski @minimalart