DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Diseño Responsive

Diseño responsive (I) El diseño web responsive o diseño web adaptativo es una técnica de diseño web que prioriza la correcta visualización de una misma página en en distintos dispositivos: Desde ordenadores de escritorio a tablets o móviles. El diseño responsive se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.

Diseño responsive (II) Aunque todas tienen pros y contras, la web responsive es considerada por muchos expertos como la mejor práctica posible, al unificar la web, reducir tiempos de desarrollo y ofrecer grandes ventajas para SEO. - Mejora la experiencia de usuario dado que la estructura de menús y contenidos es la misma para todos dispositivos. - Se reducen costes de desarrollo con una sola web en lugar de desarrollar varias webs o varias APPs. - De cara a posicionamiento tener una sola web y URL favorece que todas las visitas se concentren sin distinguir entre dispositivos.

Diseño responsive (III) No existe una resolución que sea dominante en el desarrollo web, por lo que nos deberemos de basar en las estadísticas y los requerimientos de nuestro proyecto. Deberemos de determinar nuestro “target” para saber cuales van a ser las resoluciones a las que preparar el diseño. http://en.wikipedia.org/wiki/Display_resolution http://www.w3schools.com/browsers/browsers_display.asp

Diseño responsive (IV) Sin embargo a la hora de trabajar con responsive sí existen unas resoluciones “límite” que establecen la forma de concebir los diseños para los distintos tipos de dispositivos. - Movil pequeño: (QVGA) 320x240px - Móvil: (WVGA) 480x800px - Tablet: 768x1024 / 768x1280px - Ordenador pequeño: 1024x768px (960px) - Ordenador doméstico: Más de 1280px

Diseño responsive (V) http://responsivetest.net/ http://mobiletest.me/ Es IMPOSIBLE realizar el testeo de una aplicación web móvil dado que no es posible tener todos los dispositivos reales para realizar pruebas. Existen webs más o menos fiables para realizar dichas pruebas. http://responsivetest.net/ http://mobiletest.me/

Diseño responsive (y VI) Algunos ejemplos de diseños adaptables o de ideas para realizar una página adaptable: http://mediaqueri.es/ http://www.awwwards.com/

Mobile First (I) En los primeros años del desarrollo responsive (hasta 2012) generalmente el proceso de diseño ha sido el de “adaptación” de la versión de escritorio a móvil con la técnica “Graceful Degradation”. Sin embargo desde 2012 se emplea un enfoque “Mobile First” en lo que se opera a la inversa. La experiencia de usuario debe de ser la misma desde la version móvil. http://www.samueldiosdado.com/10/el-concepto-de- mobile-first/

Mobile First (y II)

Unidades en Responsive Dado que vamos a trabajar con múltiples dispositivos, resoluciones, etc lo más adecuado suele ser trabajar siempre que sea posible NO con píxeles o unidades fijas, sino relativas, como em o rem. http://www.desarrolloweb.com/articulos/unidades-medida-css-responsive.html em: Es una unidad de medida relativa que fija el tamaño en referencia al tamaño de tipo de letra de su contenedor. rem: Es una unidad de medida relativa que fija su tamaño siempre en referencia al tamaño del tipo de letra del raíz (html o body) de la página.

Media Queries (I) La implementación técnica del Responsive Design se realiza por las media queries. Se trata de un recurso añadido en CSS3 y que permite cargar unas u otras declaraciones CSS en función de las características del dispositivo. Tiene soporte mayoritario de todos los navegadores web (IE9+). En el caso de IE8 se puede añadir una librería .JS que permite usarlas (respond.js)

Media Queries (II) Las Media queries consisten de un @media type y una o mas expresiones las cuales se resuelve como verdadera o falsa. Los estilos contenidos se aplican si el resultado de la consulta es verdadera. Se pueden especificar múltiples media queries y pueden ser verdaderas varias a la vez.

Media Queries (III) http://www.w3.org/TR/css3-mediaqueries/ https://developer.mozilla.org/es/docs/CSS/Media_queries http://www.w3.org/TR/css3-mediaqueries/ http://www.genbetadev.com/desarrollo- web/introduccion-a-las-reglas-media-de-css3

Media Queries (IV) div { width: 150px; height: 150px } .caja1 { background-color: purple} .caja2 { background-color: blue } /* Media query */ @media (min-width: 600px) { .caja1 { background-color: green } .caja2 { background-color: orange } }

Media Queries (V) También es posible expresarlo como una hoja de estilos diferenciada: <link rel="stylesheet" media="(min-width: 600px)" href="example.css" /> Y dentro de dicha hoja CSS: .caja1 { background-color: green } .caja2 { background-color: orange }

Media Queries (VI) Las funciones multimedia es como se conoce a las distintas características o propiedades que podemos consultar para aplicar unos estilos u otros. Las más utilizadas son las relacionadas con las dimensiones de visualización de la página para adaptar el contenido al espacio visible. La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "mayor que" o igual o "menor que o igual".

Media Queries (y VII) Estas son algunas de las consultas más útiles en el diseño responsive: height, device-height, width, device-width, orientation, aspect-ratio, device-aspect- ratio, color, color-index, monochrome, resolution, scan, grid, monochrome http://www.w3.org/TR/css3-mediaqueries/

Imágenes responsive (I) Uno de los problemas más importantes es el de las imágenes y videos. ¿Cómo adaptar el tamaño de las imágenes en función de la resolución del dispositivo? Para ello utilizaremos CSS y las propiedades width: y max- width: http://www.genbetadev.com/desarrollo-web/responsive- design-adaptar-imagenes-y-videos

Imágenes responsive (II) 1. Cuando queremos que una imagen ocupe siempre todo el ancho de pantalla. Una imagen de cabecera por ejemplo. Forzamos que siempre ocupe todo el ancho del contenedor. .imagen { width: 100%; }

Imágenes responsive (III) 2. Cuando queremos que una imagen ocupe todo el ancho de pantalla pero no supere su tamaño original. Una fotografía del contenedor. Forzamos que siempre ocupe todo el ancho del contenedor pero no supere el tamaño original. .imagen { width: 100%; max-width: 800px; }

Imágenes responsive (y IV) 3. Cuando queremos que una imagen ocupe todo el ancho de pantalla pero no supere su tamaño original. Una fotografía del contenedor. (Otro método). .imagen { max-width: 100%; }

Retina Display Con la aparición de dispositivos con alta densidad de píxeles en pantalla (DPI) lo que deberemos de hacer es guardar las imágenes con una mayor de densidad de píxeles (ocupando más espacio). En general las imágenes se suelen almacener con una densidad de 96 DPI. Para retina display se suelen guardar con 300 DPI. http://marcpampols.com/post/19912647535/adapta-los- graficos-de-tu-web-para-las-pantallas-con

Meta viewport (I) Es una meta o etiqueta que permite especificar entre otros elementos cual va a ser la proporción o dimensiones en la que se va a mostrar una página en un dispositivo. Por defecto los navegadores móviles muestran con un ancho determinado la página (en el caso del iPhone, 980px). Por lo tanto la página no sólo se mostrará reducida, sino que además no se aplicarán nunca nuestras @media queries. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag http://emiliocobos.net/meta-viewport-html/

Meta viewport (y II) Los dispositivos móviles suelen asignar esa directiva de forma diferente según el dispositivo, por lo que lo primero que deberemos de hacer es que todos se comporten de igual modo. <meta name="viewport" content="width=device- width, initial-scale=1">

Tipografías en Responsive (I) Generalmente el tamaño base de los tipos de letra es de 14px o 16px. Esto se puede cambiar desde la configuración del navegador web. Sin embargo para una página podemos establecer un tamaño de letra fijo: html { font-size: 16px; } Sin embargo en responsive lo que deberemos de hacer es adaptar nuestro tamaño de tipo de letra a las distintas resoluciones para que se vean de forma similar.

Tipografías en Responsive (y II) /* Por defecto para móviles */ html { font-size: 100%; } // equivalente en em ó rem /* Tablets */ @media (min-width: 768px) { html { font-size: 112%; } // equivalente en em ó rem } /* Ordenador */ @media (min-width: 960px) { html { font-size: 120%; } // equivalente en em ó rem

Grid (I) Uno de los métodos más extendidos para trabajar en responsive es el uso de rejillas (Grid) o trabajo en columnas (Columns). El dividir nuestro diseño en una rejilla en la que se “encajan” los elementos HTML por medio de CSS facilita el desarrollo de sitios responsive. http://www.adamkaplan.me/grid/

Grid (II) Para componer un GRID lo más sencillo es componer un modelo de rejilla que nos permite incluir todos los elementos de una caja dentro de la misma y mantener sólo fuera el margen con la propiedad box-sizing a todos los elementos de la página. *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Grid (III) .container { margin: 0 auto; width: 90% } A continuación necesitaremos componer un elemento contenedor para todos los elementos de la web. Este elemento generalmente está centrado y tiene una anchura determinada según la anchura del dispositivo. .container { margin: 0 auto; width: 90% }

Grid (IV) .row { clear: both; display: table; } Crearemos un elemento fila (row), para contener las columnas, como si una tabla se tratara. En este caso nos aseguraremos que ningún elemento flote alrededor de estas filas y se comporten como tablas. .row { clear: both; display: table; }

Grid (V) Luego asignaremos estilos comunes a todos los elementos columna. Esta clase se la asignaremos a todos los elementos columna. .col { float: left; padding: 1em; }

Grid (y VI) Por último asignaremos los distintos anchos de columna que queramos utilizar para las distintas resoluciones. @media (min-width: 768px) { .one-third-md { width: 33.333333%; } .two-third-md { width: 66.666666%; } .one-quarter-md { width: 25%;} .half-md { width: 50%; } .three-quarter-md { width: 75%;} .full { width: 100%; } }

Menús responsive (I) Aparte de las imágenes y los contenidos uno de los elementos más complejos de trabajar en Responsive es el tema de los meńus de navegación. Al igual que otros elementos de la web se pueden resolver sólo con CSS y media queries aunque cada vez son más populares el emplo de plugins con JS que permiten resultados más espectaculares y sencillos de implementar.

Menús responsive (y II) Algunos ejemplos: http://responsive-nav.com/ http://responsivemobilemenu.com/en/ http://jasonweaver.name/lab/flexiblenavigation/ https://miiquel.com/tutorial/crear-un-menu-responsive-basico/

Frameworks Responsive (I) Un Framework es un entorno de trabajo avanzado sobre el cual basarnos para evitarnos tareas repetitivas de trabajo y diseño, basándonos en soluciones ya probadas y testeadas por un equipo de desarrollo. Existen varias soluciones o herramientas dentro del Diseño Responsive. Todas ellas facilitan la tarea del diseñador pero necesitan de conocimientos avanzados de HTML, CSS y JS.

Frameworks Responsive (II) Skeleton. Fue uno de los primeros en aparecer y también de los más sencillos y por lo tanto menos potentes. http://www.getskeleton.com/ Twitter Bootstrap. Desarrollado por Twitter está muy extendido entre los desarrolladores y programadores por su potencia y sencillez. Permite la personalización y el uso de precompiladores CSS como LESS y SASS. http://getbootstrap.com/ Foundation. Es el preferido por los diseñadores por su potencia y versalitidad. También es uno de los más radicales en sus planteamientos. http://foundation.zurb.com/