Descargado 13 veces
Subido porMax Kraszewski
Desarrollo web inteligente
El documento aborda el desarrollo web utilizando preprocesadores como Jade, Less y Sass, destacando la importancia de la simplicidad y elegancia en el código. Se discuten conceptos como la reutilización, organización, y la reducción de complejidad en CSS mediante el uso de estas herramientas. El autor, Max Kraszewski, enfatiza que aunque algunos desarrolladores consideren innecesario el uso de preprocesadores, su adopción puede mejorar significativamente el flujo de trabajo.
Más contenido relacionado
Similar a Desarrollo web inteligente
Desarrollo web inteligente
- 1. desarrollo web inteligente conpreprocesadores html y css max kraszewski @minimalart
- 2. cómo comenzamos unproyecto web
- 3.
- 4.
- 5.
- 6. html html html html repetición de granparte del código html html html html html html html
- 8. complejidad del DOMy código inmantenible
- 9. JADE node templateengine
- 10. 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
- 11.
- 12.
- 13. 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
- 14. extend y soportede 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
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. un poco mejor… peroaún muchos http requests extras
- 24. redundancia y nulareutilización
- 25. LESS dynamic stylesheetlanguage
- 26. 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
- 27. 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 !
- 28. 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
- 29. mixins con ysin 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
- 30.
- 33. SASS syntactically awesomestylesheet
- 34. el 80% deSASS y LESS es similar
- 38.
- 39.
- 40. 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
- 45. simplicidad. elegancia. robustez.velocidad.organización reutilización delibrerías dry. don’t repeat yourself
- 46. “If your CSSis complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” Andrew Clarke, 2009
- 47. “If your CSSis 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 webdevelopers 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.