Proyecto ShinFDuran Home: Día 3 Web inicial con Express, rutas y vistas.

Hoy habría que seguir con el wireframing para anchuras mayores, pero el código me llama, me apetecía mucho empezar a implementar la web trasteando el el back-end, de momento me centaré en el diseño móvil y luego ya lo iré adaptando sobre la marcha (que es algo que se suele hacer).

Instalando Express y las dependencias

Express es un framework para Node.JS que nos permite la creación de páginas webs, es bastante sencillo de usar y liviano, viene con jade un generador de plantillas.

Aquí hay un punto a tener en cuenta cuando se trabaja con Node.JS y en general con cualquier framework compuesto a base de módulos, npm al instalar suele hacerlo con la última versión, pero si tiempo después se vuelve ha hacer install se puede instalar una nueva versión que genere problemas con otros módulos.

Cuando se empiece a hacer un desarrollo hay que congelar la versión, al hacer el install en el package.json en dependencias me indica la 3.4.7, sin embargo en el caso de jade no lo hace.  Cuando lo instalemos debemos revisar el package.json del node_module correspondiente y copiar esa versión en la dependencia del package.json de nuestra aplicación principal.

Tened en cuenta, que si clonais mi directorio no están los módulos y hay que hacer un npm install, si dentro de x meses hacéis un npm install sin especificar una versión específica de las dependencias puede ser un auténtico desmadre.

Uso de JADE

Como ya he dicho Jade es un generador de plantillas, de primeras antes de ejecutar el servidor (node app.js) tendremos que en las plantillas jade cambiar doctype 5 por doctype html sino generará un error.

Muy atentos al tema de la indentación, intentad usar sólo espacios porque muchos de los errores que se generan en jade es por eso, ya que tendemos a tabular y aunque parezca que están a la misma altura o es lo mismo (aunque creo que sublime text 2 tiene la opción de convertir directamente las tabulaciones a espacios).

Uso de HTML5 Boilerplate como base

Voy a usar como base HTML5 Boilerplate adaptándolo a Jade, si no sabes lo que es te recomiendo que te leas este artículo. Utilizaré la versión sencilla y posteriormente iré añadiendo complementos según lo vea necesario.

Como nota:
<!--[if IE]> meta(http-equiv='X-UA-Compatible',content='IE=edge,chrome=1')<![endif]-->
Si no recuerdo mal, esto lo que hace es si es posible usar el engine de chrome en lugar de IE hacerlo.  Decir que no valida así que le meto un if IE de forma que sí valida y sólo saltaría en caso de usar IE.

El viewport lo he cambiado de cara a los móviles para evitar el típico zoom ya que adaptaremos la web al ancho de pantalla.

También está incluido el normalize.css a fin de buscar compatibilidad entre navegadores y html5shiv para hacer compatible IE<9 con HTML5.

Plantillas JADE

Una de las grandes ventajas que tiene jade, es que puedes heredar de otras plantillas.  En el caso de esta web, hay ciertas zonas que son comunes a todas las páginas: El header, salvo el título; el menú de navegación y el footer.  Pero es que además, el título de la página podemos pasarlo como variable, con lo cual la plantilla es única para todos.

Después, heredamos esa plantilla en otra, ya sea el index, proyecto u otro y completamos, os recomiendo que os paséis por el proyecto y lo veais.  Layout.jade es la plantilla principal y las demás, salvo error.jade heredan de ella.

Si combinamos esa herencia, juno con el hecho de que podemos pasarle un objeto con datos que completarán la plantilla nos da una potencia y versatilidad enormes.

Rutas en Express

En express lo que hacemos es indicar una ruta que es la que se pondría en el navegador y a continuación una función que es la que devuelve el resultado, se puede hacer todo en app.js, pero es recomendable hacerlo en un fichero a parte.

Las rutas pueden ser fijas, con parámetros, con expresiones regulares o con el comodín *.  Ojo con este último, lo habitual es usarlo al final para redireccionar el resto de páginas a "Página no encontrada".

Os recomiendo echar un vistazo a app.js donde están la recogida de rutas y routes/index.js donde están las funciones, ahí además se muestra como la ruta encauza a la función y esta se encarga de mostrar la plantilla con la información adicional (por ejemplo desde base de datos) si es necesario.

Testeo

Como he dicho, inicialmente voy a usar Google Chrome con Window Resizer para ir testeeando la página  a 320x480 que será el mínimo de tamaño a testear por mi parte, después ya iré ampliando tamaño y adaptando el aspecto mediante media queries.

Hoy espero echar un vistazo a algunos tutoriales de Stylus y mañana empezar con la parte de maquetación, para que ya vaya pillando forma, de momento la web sólo en HTML5 se ve tal que así: