Qué es el Responsive Web Design (RWH)
Responsive Web Design? Adaptativo? RWH? Pero que demoni…? Es que te has fumado un inspector de hacienda? Yo me largo pringao!
Espera! No te vayas! Puedo explicártelo todo…
A medida que crece el número de dispositivos desde los que es posible acceder a un sitio Web (tabletas, smartphones, etc.) aparece la necesidad de poder visualizar los contenidos adecuadamente en cada uno de ellos. La solución a este problema llega de la mano de la técnica de diseño y desarrollo web “Responsive Web Design”.
Estás ya más tranquilo? Venga respira hondo que sigo…
Detrás de esta iniciativa subyace la intención de crear “una red única” cuyos contenidos puedan ser mostrados en cualquier aparato y con una navegación óptima.
Los modelos tradicionales de páginas web tienen un ancho fijo, lo cual crea dificultades cuando se trata de visualizarlos con dispositivos móviles, de mucho menor tamaño que el monitor de un PC o portátil.
A raíz de esto surge un nuevo concepto: las imágenes fluidas, que se adaptan al tamaño de tu pantalla.
Para implementar esto, surge una nueva herramienta, los CSS Media Queries, mediante la cual podemos activar y desactivar partes del CSS del diseño en función del tamaño de pantalla del aparato.
Pero qué coñ…coj…cositas son los CSS?
Vuelve a sentarte que es fácil…
Sobre el CSS
El CSS puede incorporarse en un documento aparte llamado Hoja de Estilos o estar incluido en el HTML, en la cabecera y bajo el atributo <Style>
Por ejemplo, en un encabezado <h1> el lenguaje CSS nos indica como va a visualizarse el contenido (color, fuente, alineación, tamaño, etc.) y el HTML indica que se trata de un encabezamiento importante, a modo de título.
Antiguamente cada etiqueta <h1> debía ser complementada con una serie de atributos para informar de la fuente, color, etc. El CSS simplifica esto.
Ventajas del CSS
1. La presentación o estilo de la página web quedan separadas del contenido, por lo que es posible hacer cambios en la visualización sin necesidad de modificar el contenido. Es decir, al variar el CSS actuamos exclusivamente sobre como se va a presentar la página en nuestro dispositivo.
2. Además un solo documento CSS puede definir a multitud de elementos, con lo que se evita saturar el ancho de banda del dispositivo con demasiada información.
Lo vas pillando?…Exacto!…
El diseño adaptativo o responsive evita tener que crear una aplicación distinta para cada modelo de móvil (iPhone, Android…) o diferente dispositivo, con el consiguiente ahorro económico.
En definitiva lo que ocurre es que la presentación del diseño se torna fluida, en el sentido de que las columnas, imágenes y textos se reajustan automáticamente en función de la pantalla donde deben mostrarse, sin alterar la información presentada.
Conviene notar que el diseño web Responsive trabaja con porcentajes y no con píxeles.
Al no tener que adaptar la página web para cada sistema de navegación, basta una única URL y no es necesario redireccionar la página a otras diseñadas exclusivamente para cierto tipo de móvil o tableta.
Existen herramientas útiles para los desarrolladores web que muestran como va quedando la página en las distintas versiones de móviles y tablets en su posición horizontal y vertical, como Responsinator, Resize My Browser o el simulador de Google Chrome en su última versión.
Hola?
Hay alguien?
ECO ECO ECO ECO ECO ECO ECO ECO ECO ECO ECO
Mejor yo me largo………
(Si queda alguien ahí fuera y no me odia mucho, que me dé un Me Gusta….)
——————————————————————————————————————————–
First image courtesy of Stuart Miles at Freedigitalphotos.net
Second image courtesy of Nenovbrothers at Freedigitalphotos.net
Third image courtesy of Dan at Freedigitalphotos.net
Tal vez también te interese... :
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure