Node.js / Diseño en primero-movil

Bienvenidos sean a este post, sigamos con el paradigma para la aplicacion notas.

En el post anterior le aplicamos el bootstrap a la aplicacion notas y agregamos css para poder agregar un mejor formato para nuestra aplicacion, esto fue solo el principio y para implementarlo correctamente debemos trabajar con las plantillas pero antes veremos la teoria sobre estas modificaciones y lo primero que mencionaremos es que se agrupa en cuatro areas:

• Layout, se encarga de controlar el layout o diseño del HTML
• Contenido, maneja la fachada de los elementos HTML
• Componentes, un conjunto amplio de elementos de interfaz para el usuario
• Utilities, herramientas adicionales para mejorar la experiencia de los grupos anteriores

Bootstrap trabaja con un sistema de control de diseño denominado como cuadricula de 12 columnas, lo cual sera la base para la construccion de primero-movil, si esto se implementa correctamente hara que todos los componentes se ordenen automaticamente en base al tamaño de la pantalla, todo esto trabajara sobre el elemento div, y mediante clases le designaremos un rol a cada div, veamos como es un diseño basico:

<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-sm-3">Contenido de Columna 1</div> <!-- 25% -->
    <div class="col-sm-9">Contenido de Columna 2</div> <!-- 75% -->
  </div> 
  <div class="row"> 
    <div class="col-sm-3">Contenido de Columna 1</div> <!-- 25% -->
    <div class="col-sm-6">Contenido de Columna 2</div> <!-- 50% -->
    <div class="col-sm-3">Contenido de Columna 3</div> <!-- 25% -->
  </div>
</div>

Como dijimos esta es una estructura basica que no necesariamente aplicaremos pero nos servira como ejemplo, observen que tenemos un contenedor (container), despues dos mas que usaremos como filas (rows), para finalmente dividir al primero en dos columnas y el segundo div en tres columnas, como dijimos anteriormente cada fila se divide en 12 columnas y si observan la division entre estas la hacemos mediante col-sm-x, donde X ira el valor que necesitemos pero en todos los casos la sumatoria total debe dar 12, observen que en base a la cantidad de columnas que informemos tambien representa un porcentaje del tamaño total de la fila, siempre sera en ese orden donde tendremos un contenedor y este envolvera a las filas y estas otras envolveran a las columnas.

Si observan el ejemplo pasamos a la clase .container-fluid pero tambien podiamos usar .container, la unica diferencia entre ambos es que el primero se comporta como si fuese un width:100% y por lo tanto llena todo el espacio horizontal, despues usamos la clase .row para trabajar como una fila y por ultimo usamos la clase .col para las columnas donde no solamente indicamos cuantas columnas usaremos sino que le indicamos como sera el tipo de pantalla donde debe trabajar, veamos los disponibles:

• col-xs, apunta a dispositivos extra-pequeños (<= 576px)
• col-sm, apunta a dispositivos pequeños (>= 576px)
• col-md, apunta a dispositivos medianos (>= 768px)
• col-lg, apunta a dispositivos grandes (>= 992px)
• col-lx, apunta a dispositivos extra-grandes (>= 1200px)

Esto indica a la aplicacion que debe aplicarlo desde dispositivos que coinciden para arriba, si tomamos el ejemplo superior se aplicara a todos menos a los dispositivos de col-xs, aunque este dato es opcional dado que podemos usar directamente col-#, siendo # el valor que representa a las columnas, otra opcion para el valor de las columnas es usar la palabra auto y que se realice automaticamente, tambien podemos indicar valores por arriba de 12 pero estos pasaran automaticamente a la siguiente fila, y tambien podemos implementar varias de estas clases para controlar varios dispositivos, veamos un ejemplo:

<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-xs-9 col-md-3 col-lg-6">Contenido de Columna 1</div>
    <div class="col-xs-3 col-md-9 col-lg-6">Contenido de Columna 2</div>
  </div> 
...
</div>

Esto aplica tres diseños distintos para tres tipos de dispositivos distintos, con esto ya tenemos una base de conocimiento para realizar un analisis completo para la experiencia del usuario en nuestras aplicaciones o bien solo involucrarnos con el tema del desarrollo, si tomamos la aplicacion hasta ahora podemos ver solamente lo generado mediante codigo donde si bien es funcional al 100% y no es tan desagradable, antes de continuar repasemos como es la estructura basica de cualquier pagina:

<!DOCTYPE html> 
<html> 
<head> .. contenido encabezado </head> 
<body> 
.. encabezado pagina 
.. contenido principal
.. contenido pagina
</body> 
</html> 

Como dijimos esta es la estructura basica de cualquier pagina, incluida nuestra aplicacion Notas, donde tendremos un contenido para head y en body tenemos un inicio de la pagina (por ejemplo el titulo) seguido del contenido de la misma y por ultimo el contenido invisible de la pagina como puede ser jQuery o Javascript que se encargara de controlar las acciones de nuestra pagina, pero aqui surge un interrogante y este es si layout.hbs deberia tener una parte visible, esto debido a que la plantilla se usa para cada pagina de la aplicacion, ya que el contenido de estas paginas es lo suficientemente diferentes dando la sensacion que esta plantilla no puede tener elementos visibles.

En resumen, hoy hemos visto un poco de teoria de como trabaja este diseño, como mediante un sistema de cuadriculas con elementos div nos permite reacomodar el contenido de nuestras paginas en base a la pantalla del dispositivo, en el proximo post dejaremos la teoria y nos centraremos en la practica, espero les haya resultado util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.