Probablemente a los diseñadores web profesionales, lo que comentaré a continuación les resulte aburrido porque son conceptos sobradamente conocidos.
Desde hace ya años, la navegación web se realiza en dispositivos variados, con tamaños y resoluciones de pantalla diferentes, desde un enorme monitor hasta pequeñas pantallas de un smatphone, así que el diseño de una página web se ha vuelto más complejo y el diseñador responsable requiere tener este dato en cuenta a la hora de realizar su trabajo.
Todo diseñador, y sobre todo los clientes, quieren que su trabajo se vea correctamente en todo tipo de condiciones, en cualquier tipo de pantalla. Para solucionar este problema se han creado varios sistemas, los más populares y usados son el diseño de páginas Responsive y Adaptative.
Aunque puedan parecer iguales, tienen sus grandes diferencias. Ambas están concebidas para ajustar su contenido a diferentes resoluciones y tamaños de pantalla, pero la forma de hacerlo es diferente.
Veamos algunas diferencias y similitudes:
En ambas se usa un solo archivo o página web o url final.
En las páginas Responsive se usa una sola plantilla, en la cual se indican los parámetros necesarios para auto cargar y colocar las partes adecuadas para la resolución del monitor o pantalla del visitante, esto es, recoloca el contenido de la página para adaptarse a la resolución detectada.
En las páginas Adaptative, hay una plantilla por cada tipo de resolución de pantalla en la cual el programador haya pensado y carga el contenido adecuado de la plantilla que corresponda a la resolución detectada.
Ambas tienen ventajas e inconvenientes, la carga de las páginas, por ejemplo, es más rápida en las Adaptative, puesto que una vez detectada una resolución no requiere ajustes en vivo…tan solo cargar el contenido estático de la plantilla seleccionada. La Responsive solo requiere una plantilla, la cual se adapta y ajusta el contenido de forma dinámica a la resolución requerida sin necesidad de especificarla previamente, al contrario de la Adaptative que requiere una plantilla específica para cada tipo de resolución, incluso si el programador se olvida o no tiene en cuenta un tamaño de pantalla determinado, el contenido podría no verse adecuadamente.
Las páginas Adaptative requieren más trabajo de mantenimiento, pero se puede diferenciar entre pantallas para lap, teléfonos, tablests, etc…..y mostrar contenido específico para ese dispositivo, lo que quiere decir que un contenido podría no estar disponible si la vemos desde un smatphone, pero si desde un PC.
Las Responsive requieren mayor tecnología y un mayor esfuerzo de programación, más sensible a los errores.
Sea como sea, si eres profesional, todo esto ya lo tienes bien aprendido y deberías tenerlo dominado.
Si eres un aficionado, te puede resultar muy útil ver tu página web en diferentes resoluciones, pero eso tiene un inconveniente. Es lento y complicado andar con el teléfono, la tablet, la lap y el PC al mismo tiempo para ver los resultados en cada uno de esos dispositivos. Incluso es imposible que tengamos pantallas de cada tamaño posible.
Tanto en el navegador Firefox como en el de Chrome, tenemos un simulador de páginas responsive, que nos permitirá poder ver nuestro trabajo cómodamente y observar en vivo los resultados en diferentes resoluciones sin necesidad de andar con tanto aparato.
En Firefox podemos entrar en ese modo de vista de diseño adaptable o responsive pulsando en el icono del menú principal (el icono de las tres rayas horizontales), y seleccionar la opción Desarrollador.
En el nuevo menú que aparecerá, pulsamos en la opción Vista de diseño adaptable
Veremos que la página que tengamos abierta en ese momento cambia de tamaño sobre un fondo negro.
En el lateral derecho, la parte inferior y la esquina inferior derecha, veremos unos indicadores que si los pulsamos y mantenemos pulsados, podremos deslizarlos para cambiar el tamaño de la página web, la cual si está bien programada cambiará la ubicación de sus elementos para adaptarse al nuevo tamaño.
Así mismo veremos en a parte superior una barra de opciones, que nos permitirá salir de la vista adaptable, configurar un tamaño predefinido de pantalla o bien escribirlo a mano, rotar 90 grados la pantalla (simulando la rotación de un teléfono o tablet), simular eventos touch, tomar una captura de pantalla u usar un motor de renderizado personalizado.
Si usamos Crome como navegador, pulsamos en su menú principal (el icono de la esquina superior derecha con tres puntos en vertical) y seleccionamos Más herramientas, y en el submenú que aparecerá, la opción Herramientas para desarrolladores.
En el panel para desarrolladores, pulsamos en el icono que representa un celular y una tablet.
Al igual que en Firefox, la página web que estemos viendo se transformará y podremos modificar manualmente el tamaño con los controles laterales.
En la parte superior central, veremos un selector de resoluciones, y un selector de zoom. Si colocamos el puntero en uno de los rectángulos inferiores a esa barra selectora, se nos mostrará el tamaño de un tipo de dispositivo predeterminado.
En el selector de resoluciones, veremos una serie de tamaños ya predeterminados, aunque podremos escribir un tamaño manualmente
en el icono de la esquina (el de tres puntos verticales) accederemos a un menú extra de opciones, entre los cuales está la de poder tomar una captura de pantalla.
Para salir de ese modo de vista adaptable, volvemos a pulsar el icono del teléfono/tablet.
Con esto podremos verificar como quedarían nuestros diseños sin necesidad de grandes despliegues.
0 comentarios