Your SlideShare is downloading. ×
Desarrollo web inteligente
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Desarrollo web inteligente

2,425
views

Published on

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

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

Published in: Design, Technology

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

  • Be the first to like this

No Downloads
Views
Total Views
2,425
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
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. 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 repetición de gran parte del código html html html html html html html
  • 7. complejidad del DOM y código inmantenible
  • 8. JADE node template engine
  • 9. nodos <div>      <span></span>   </div> div      span html jade ids <div  id=“main”> html div#main jade clases <div  class=“message”> html div.message jade atributos <script  src=“js/jquery.js”/> html script(src=js/jquery.js) jade
  • 10. jade html
  • 11. simplicidad. elegancia.
  • 12. include de templates //  header.jade   head      title  Mi  Sitio      script(src=js/jquery.js) //  footer.jade   footer      p  Copyright  2013 //  index.jade   doctype      html          include  head      body          h1  Bienvenidos          p    Parrafo          include  footer jade jade html jade
  • 13. extend y soporte de bloques //  layout.jade   doctype      html          head              title  Mi  Sitio              block  script          body              block  content                footer                  Copyright  2013 //  about.jade   extends  layout   ! block  content      h1  Sobre  mi      p  Mi  nombre  es  Max      p  Vivo  en  Buenos  Aires //  index.jade   extends  layout   ! block  script      script(src=js/jquery.js)   ! block  content      h1  Bienvenidos      p  Párrafo jade jade jade //  contact.jade   extends  layout   ! block  content      h1  Contacto      form          input#nombre(type=“text”) jade
  • 14. layout.jade index.jade about.jade contact.jade other.jade jade engine index.html about.html contact.html other.html
  • 15. simplicidad. elegancia. robustez.velocidad.organización
  • 16. bien. agreguemos estilos
  • 17. main.css index.html
  • 18. layout.css fonts.css colors.css modules.css reset.css @import main.css index.html
  • 19. reducción de performance
  • 20. layout.css fonts.css colors.css modules.css link href index.html reset.css main.css
  • 21. un poco mejor… pero aún muchos http requests extras
  • 22. redundancia y nula reutilización
  • 23. LESS dynamic stylesheet language
  • 24. variables @main-­‐color:  #FFCC00;   ! h1  {        color:  @main-­‐color;     }   ! header  {        background-­‐color:  @main-­‐color;   } .less @main-­‐font:  “Arial,Tahoma”;   ! h1  {        font-­‐family:  @main-­‐font;     }   ! h2  {        font:  bold  1.2em  @main-­‐font;   } .less h1  {        color:  #FFCC00;     }   ! header  {        background-­‐color:  #FFCC00;   } .css h1  {      font-­‐family:  “Arial,Tahoma”;     }   ! header  {        font:  bold  1.2em  “Arial,Tahoma”;   } .css
  • 25. import @import  “reset.css”;   @import  “grid.less”;   @import  “colors.less”;   @import  “icons.less”;   ! header  {  color:  @color;  }   .less (content  of  reset.css)   (content  of  grid.less)   (content  of  colors.less)   (content  of  icons.less)   ! header  {  color:  black;  }   ! .css anidamiento header  {        h1  {          background-­‐color:  gray;          color:  white;      }      nav  {        background-­‐color:  blue;        ul  {  list-­‐style-­‐type:  none;  }        }   }   .less header  h1  {         background-­‐color:  gray;                color:  white;     }   header  nav  {         background-­‐color:  blue;   }   header  nav  ul  {         list-­‐style-­‐type:  none;     }   ! .css !
  • 26. operaciones matemáticas @page-­‐width:  960px;   @main-­‐width:  600px;   @sidebar-­‐width:  @page-­‐width  -­‐  @main-­‐width   .less operaciones de color @color:  red;   ! button  {       background-­‐color:  @color;     &:hover  {background-­‐color:  darken(@color,  10%);   }   ! .less
  • 27. mixins con y sin parámetros .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
  • 28. simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías
  • 29. SASS syntactically awesome stylesheet
  • 30. el 80% de SASS y LESS es similar
  • 31. cual usar? depende
  • 32. instalación y uso
  • 33. jade >  npm  install  jade   ! >  jade  index.jade  index.html   .jade less >  npm  install  less   ! >  lesscss  style.less  style.css   .less sass >  gem  install  sass   ! >  sass  style.scss  style.scss   .sass
  • 34. simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías dry. don’t repeat yourself
  • 35. “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” Andrew Clarke, 2009
  • 36. “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
  • 37. “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)
  • 38. gracias ! max kraszewski @minimalart