Node.js / Teoria de paradigma Primero-Movil

Bienvenidos sean a este post, hoy veremos un tema que no contemplamos a la hora de desarrollar la aplicacion notas.

Antes de hablar de la teoria sobre este paradigma debes mencionar un detalle sobre nuestra aplicacion notas que desarrollamos en los posts anteriores y es que no esta orientado a los moviles por lo tanto no lo veremos correctamente, por ejemplo inicien la aplicacion y si se conectan mediante un movil se puede ver de la siguiente forma

Esto puede variar en distintos dispositivos tales como una tablet, android, un iphone o cualquier otro pero como vimos en posts anteriores si funciona correctamente en ordenadores pero hoy en dia no podemos dejarlo solamente aplicable a estos sino que debemos incluir a los moviles tambien, para solucionar esto entra en accion el paradigma mencionado en el titulo.

Debido a que los dispositivos moviles por lo general tienen una pantalla mas pequeña, son tactiles y los usuarios tienen diferentes expectativas con respecto a los usuarios de escritorio, para solucionar el tema de las pantallas pequeñas se utiliza la tecnica de diseño web responsiva, esto implica que nos asegura un tamaño de pantalla correcto y que el sitio web provee una vista e interaccion normal a traves de multiples dispositivos, estas tecnicas incluyen:

• Cambiar tamaño de fuentes
• Reorganizar elementos en pantalla
• Usar elementos plegables al momento de tocarlos
• Ajustar el tamaño de la imagen o video a la pantalla

Por esto se llama responsivo, dado que la aplicacion responde a las caracteristicas del dispositivo para realizar estos cambios, y esto nos permitira que se priorice los dispositivos moviles y despues se ajuste a dispositivos mas grandes.

Para esto la tecnica primaria utiliza queries de medios en stylesheets para detectar caracteristicas del dispositivo, cada seccion de un query apunta a un rango de dispositivos mediante una declaracion CSS para estilizar el contenido correctamente, tomemos como ejemplo el tema Twenty Twelve de WordPress, el cual tiene una implementacion de diseño responsiva al no tener ningun framework de base y esto nos permite ver como trabaja claramente y el stylesheet es lo suficientemente pequeña para ser comprensible, pero esto es solo un ejemplo de lo que estamos comentando.

Nota:
Si desean ver este archivo pueden ir a la siguiente url:
https://themes.svn.wordpress.org/twentytwelve/1.9/style.css

Pero aun asi podemos analizarlo un poco, si vamos al archivo observaremos que lo primero que hara es resetear todos los elementos basicos, este tambien se encarga de anular configuracion de estilos tipicos de los navegadores, el resto del archivo define estilos para dispositivos moviles y si nos desplazamos al final del archivo tendremos una seccion etiquetada como media queries para trabajar con ciertos tamaños de pantalla, asi como los estilos definidos para dispositivos moviles son anulados para trabajar con dispositivos de pantallas mas grandes, las dos lineas que se encargan de esto son:

@media screen and (min-width: 600px) { /* Screens above 600px width */ } 
@media screen and (min-width: 960px) { /* Screens above 960px width */ }

Obviamente en el bloque tienen todas las instrucciones que se encargan de lo comentado anteriormente, el primer segmento del codigo es el layout de pagina para todos los dispositivos, en el siguiente caso es para aquellas pantallas con un minimo de 600px y reconfigurara todo para estas pantallas, y en el siguiente caso sera lo mismo pero para un minimo de 960px para arriba, y por ultimo tiene uno dirigido para impresoras.

Estos anchos se denominan como breakpoints, y estos son los que se encargan de cambiar el diseño alrededor, una forma de verificar estos breakpoints de una manera muy sencilla es simplemente cambiando el tamaño de la ventana y veran como se reacomodaran todos los elementos de la pagina y estos son definidos por el autor de la pagina, pero tomemos en consideracion a que vamos a apuntar si es un dispositivo especifico o a uno de caracteristicas generales, si bien existen una amplia variedad podemos usar a estos mas genericos:

• Small, pensado para telefonos moviles
• Medium, telefonos mas grandes o tablets
• Large, tablets mas grandes o ordenadores chicos (netbooks)
• Extra-large, orientado principalmente a ordenadores de escritorio o laptops
• Landscape/Portrait, este es para distinguir entre landscape (apaisado) o portrait (retrato) y es una buena recomendacion que funcione con estas dos posibilidades

En resumen, hoy hemos visto la teoria prrincipal del paradigma, para que se utiliza, si bien no lo hicimos en su totalidad, si contemplamos los puntos mas importantes y un pequeño ejemplo donde podemos ver como se aplica, y algunas cosillas mas, pero en el proximo post volveremos a la practica, espero les haya resultado de utilidad 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.