tecnologia

Si bien una de las partes más importantes a la hora de hacer un sitio es escribir un html sólido y bien estructurado, repetir las mismas estructuras (header, footer, sidebar) a lo largo de decenas de páginas es, cuanto menos, tedioso. Claro, existen los lenguajes de programación que permiten procesar estas secciones como templates y mostrarlas en el renderizado final. Pero eso no es lo que quería hacer en este blog, no queria usar ningún lenguaje del lado del servidor ni javascript para renderizar templates.

Casi al mismo tiempo que descubrí Jekyll, me planteé la posibilidad de escribir un conjunto de plantillas que pudieran ser generadas en el render del sitio y servidas como el html definitivo en el deploy. Es decir, no hacer uso de la forma tradicional de cortar los templates en header, footer, main, etc y procesarlos en el render de la pagina; y tampoco dejar que Jekyll lo hiciera (porque lo puede hacer) con sus propios tags. No, lo que yo quería hacer era generar los htmls finales, estructurados y funcionales y solamente incluir un tag para insertar los posts. En definitiva, queria emular las épocas de Dreamweaver 4 y hacer cada pagina como un documento separado… sin estar copiando y pegando las mismas secciones todo el tiempo, por supuesto.

Workflow

Lo que descubrí fueron dos cosas: un lenguaje de templates que usa NodeJS llamado JADE y una herramienta para procesar esos templates en los html finales llamada Codekit. Codekit es una herramienta exclusiva para MacOS, pero existe otros proyectos similares para Windows y Linux, como Mimosa - gracias Pablo Rigazzi.

El workflow consiste en escribir las partes de una pagina en la sintaxis de JADE en un directorio origen, procesarlo con Codekit (o Mimosa) y lograr los html finales en un directorio destino. De esta forma, podemos separar por completo el proceso de templating del proceso de desarrollo.

JADE

Jade tiene una sintaxis muy clara, que evita que escribir HTML se convierta en una sucesión interminable de tags anidados e identados desprolijos. Simplemente debemos escribir el tag html sin encerrarlo entre <>, y mantener el identado de acuerdo a la jerarquia. Los atributos se colocan entre paréntesis, y separados por coma, de la forma (atributo1="valor1", atributo2="valor2") El siguiente es un ejemplo de un marcado en JADE y su correspondiente salida en HTML.

index.jade

 1 doctype 5
 2 html(lang="en") 
 3     head
 4         meta(charset="utf-8")
 5         meta(name="viewport", content="width=device-width, initial-scale=1.0" )
 6         link(rel="shortcut icon",href="favicon.ico")
 7     body
 8         header
 9             div.logo MI BLOG
10         article
11             h1 Articulo de ejemplo
12             p Contenido del articulo. Parrafo 1. 
13             p Contenido del articulo. Parrafo 2.
14         aside
15             div.block
16                 h3 Acerca de
17                     p Texto sobre mi
18             div.block
19                 h3 Mis intereses
20                 ul
21                     li Literatura
22                     li Tecnologia
23                     li Futbol
24         footer
25             p Copyright

index.html

 1 <!DOCTYPE html>
 2 <html lang="en"> 
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <link rel="shortcut icon" href="favicon.ico">
 7   </head>
 8   <body>
 9     <header>
10       <div class="logo">MI BLOG</div>
11     </header>
12     <article>
13       <h1>Articulo de ejemplo</h1>
14       <p>Contenido del articulo. Parrafo 1. </p>
15       <p>Contenido del articulo. Parrafo 2.</p>
16     </article>
17     <aside>
18       <div class="block">
19         <h3>Acerca de
20           <p>Texto sobre mi</p>
21         </h3>
22       </div>
23       <div class="block">
24         <h3>Mis intereses</h3>
25         <ul>
26           <li>Literatura</li>
27           <li>Tecnologia</li>
28           <li>Futbol</li>
29         </ul>
30       </div>
31     </aside>
32     <footer>
33       <p>Copyright</p>
34     </footer>
35   </body>
36 </html>

La anterior es una estructura simple, pero el verdadero poder se ve cuando comenzamos a usar el comando include que permite, justamente, incluir templates para formar un solo layout. En el siguiente snippet muestro como usando tres archivos (header, aside y footer) e incluyendolos desde un archivo layout.jade

layout.jade

 1 doctype 5
 2 html(lang="en") 
 3     head
 4             meta(charset="utf-8")
 5             meta(name="viewport", content="width=device-width, initial-scale=1.0" )
 6             link(rel="shortcut icon",href="favicon.ico")
 7     body
 8         include header
 9         article
10             h1 Articulo de ejemplo
11             p Contenido del articulo. Parrafo 1. 
12             p Contenido del articulo. Parrafo 2.
13         include aside        
14         include footer

header.jade

1 header
2     div.logo MI BLOG

aside.jade

 1 aside
 2     div.block
 3         h3 Acerca de
 4             p Texto sobre mi
 5     div.block
 6         h3 Mis intereses
 7         ul
 8             li Literatura
 9             li Tecnologia
10             li Futbol

footer.jade

1 footer
2     p Copyright

Una vez procesado, la salida es idéntica:

index.html

 1 <!DOCTYPE html>
 2 <html lang="en"> 
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <link rel="shortcut icon" href="favicon.ico">
 7   </head>
 8   <body>
 9     <header>
10       <div class="logo">MI BLOG</div>
11     </header>
12     <article>
13       <h1>Articulo de ejemplo</h1>
14       <p>Contenido del articulo. Parrafo 1. </p>
15       <p>Contenido del articulo. Parrafo 2.</p>
16     </article>
17     <aside>
18       <div class="block">
19         <h3>Acerca de
20           <p>Texto sobre mi</p>
21         </h3>
22       </div>
23       <div class="block">
24         <h3>Mis intereses</h3>
25         <ul>
26           <li>Literatura</li>
27           <li>Tecnologia</li>
28           <li>Futbol</li>
29         </ul>
30       </div>
31     </aside>
32     <footer>
33       <p>Copyright</p>
34     </footer>
35   </body>
36 </html>

Esto funciona muy bien y es bastante tradicional, pero donde realmente se puede aprovechar JADE (y la forma que más me gusta) es utilizando extend y block para armar un esqueleto básico y utilizarlo en todas las paginas.

layout.jade

 1 doctype 5
 2 html(lang="en") 
 3     head
 4             meta(charset="utf-8")
 5             meta(name="viewport", content="width=device-width, initial-scale=1.0" )
 6             link(rel="shortcut icon",href="favicon.ico")
 7     body
 8         block header
 9             header
10                 div.logo MI BLOG
11         block article
12         block aside
13             aside
14                 div.block
15                     h3 Acerca de
16                         p Texto sobre mi
17                 div.block
18                     h3 Mis intereses
19                     ul
20                         li Literatura
21                         li Tecnologia
22                         li Futbol
23         block footer
24             footer
25                 p Copyright

article.jade

1 extend layout
2 
3 block article
4     article
5         h1 Articulo de ejemplo
6         p Contenido del articulo. Parrafo 1. 
7         p Contenido del articulo. Parrafo 2.

Nuevamente obtenemos:

index.html

 1 <!DOCTYPE html>
 2 <html lang="en"> 
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <link rel="shortcut icon" href="favicon.ico">
 7   </head>
 8   <body>
 9     <header>
10       <div class="logo">MI BLOG</div>
11     </header>
12     <article>
13       <h1>Articulo de ejemplo</h1>
14       <p>Contenido del articulo. Parrafo 1. </p>
15       <p>Contenido del articulo. Parrafo 2.</p>
16     </article>
17     <aside>
18       <div class="block">
19         <h3>Acerca de
20           <p>Texto sobre mi</p>
21         </h3>
22       </div>
23       <div class="block">
24         <h3>Mis intereses</h3>
25         <ul>
26           <li>Literatura</li>
27           <li>Tecnologia</li>
28           <li>Futbol</li>
29         </ul>
30       </div>
31     </aside>
32     <footer>
33       <p>Copyright</p>
34     </footer>
35   </body>
36 </html>

Nótese el uso de blocks para separar las distintas secciones en layout.jade, el block article vacio y nuevamente en article.jade el mismo block article con el contenido para reemplazar en el archivo extendido.

JADE tiene más comandos y tags interesantes, es cuestión de leer un poco la documentación y el tutorial empezar a probarlo.

Codekit

Como mencioné antes, Codekit es una herramienta para MacOS que permite compilar templates JADE en html finales (también sirve para otras cosas como SASS y LESS, Coffescript, Javascript, etc). Codekit es mi elección personal para trabajar porque en una sola interfaz consigo un workflow más homogéneo; pero a decir verdad no es necesario en absoluto para trabajar con JADE (además no es gratuito, pero tiene un trial). Se pueden usar otras herramientas, como la anteriormente mencionada Mimosa, o incluso por linea de comandos directamente.

Pero volviendo a Codekit, la idea basicamente es guardar los templates .jade en un directorio origen e indicarle a Codekit que los procese y guarde el html resultante en un directorio destino que generalente se encontrará en el raíz de nuestro sitio. En el caso de Jekyll, los html resultantes van a para a la carpeta _layouts que a su vez sirven de templates para el renderizado final.

Codekit

El sitio oficial de Codekit tiene una documentación excelente y videos demostrativos, por lo que no voy a repetir aquí como se usa; además la herramientas es muy intuitiva y en el caso que decidas usarla te aseguro que vas a tenerla funcionando en menos de 5 minutos. Mi consejo es que bajes el trial, lo pruebes y trates de ver si realmente te suma valor. Para mi funciona muy bien y es una pieza fundamental de mi proceso de desarrollo.-

comments powered by Disqus