[MÚSICA] [MÚSICA] [MÚSICA] El diseño web responsive o receptivo, término sugerido por Google, se comenzó a gestar a mediados del 2018 en la World Wide Web Consortium W3C, con la recomendación de Mobile Web Best Practices bajo el título One Web. Las ideas originales de este concepto de página única que se adapta a cualquier dispositivo se debe a Ethan Marcotte, que se encargó de difundir en una serie de artículos en A list apart, una publicación especializada en diseño y desarrollo web. Estos artículos se extenderían luego en su libro Responsive web design. Aquí hablamos de desarrollar una web que se adapte al formato del dispositivo en que se ve, tanto si es una tableta Apple o Android o un celular Apple o Android de cualquier fabricante o una computadora de escritorio. Es necesario que sea así porque deseamos darle una experiencia agradable a nuestro usuario más allá de que sea utilizable nuestro sitio. Pero, ¿qué necesitamos para lograr eso? Buscamos que un texto se vea con un tamaño mayor en una pantalla pequeña y que escale proporcionalmente en una pantalla más grande. Buscamos que una imagen se vea proporcionalmente al dispositivo y que se adapte al contexto donde se muestra. Buscamos contenedores de texto e imágenes flexibles para que se modifiquen de acuerdo a nuestras necesidades. Para ello, debemos podemos indicarle al navegador qué tamaño de fuentes, de imágenes de elementos utilizar de acuerdo al dispositivo. Una forma de hacerlo podría ser especificar todos los estilos posibles para cada tipo de dispositivo existente en la actualidad. Pero esto parece un poco costoso y arduo. Hay cientos de miles de dispositivos y cada vez surgen nuevos formatos. No parece ser muy mantenible esta idea. Una idea mejor sería ajustar los elementos de acuerdo al ancho y alto de nuestra página. Acá se asume que los dispositivos son rectangulares. Hoy en día esto no es un problema, pero seguramente si las pantallas cambian de forma, habrá que pensar otra manera de especificar los formatos. Idealmente, buscamos que nuestro contenido se adapte proporcionalmente al tamaño de la pantalla. ¿Dónde definimos esto? Ciertamente va a ser en la sección de estilos, en los CSS. Veamos brevemente cómo fue evolucionando históricamente este concepto. En la versión CSS 2.1 se incorporó el atributo media type, que nos permite ajustar el contenido al formato de visualización que queremos. Teníamos una lista de valores para definir de acuerdo a nuestra necesidad. La primera línea se carga solo si se ve en una pantalla y la segunda solo si es en la vista de impresión. De esta forma, podíamos especificar estilos de impresión que se adapten a la hoja a imprimir y diferenciarlos del formato de pantalla del dispositivo. Si bien fue un avance, no todos los navegadores implementaron correctamente los media types y la lista de valores definidos tampoco eran suficientes. Notá que por ejemplo el media type screen no alcanza para definir el tamaño de pantalla. Más tarde, la W3C creó el CSS3 incorpora los media query mejorando notablemente los media type. Los media query permiten escribir cláusulas lógicas en el atributo media para especificar el criterio de aplicación del CSS. Veamos un ejemplo. En esa línea se especifica que el CSS colores se aplica solo si el dispositivo es una pantalla y el tamaño máximo de su resolución horizontal es de 480 píxeles. Claramente podrás notar que la expresividad de las queries permiten ser muy específicas con los estilos que deseamos aplicar y, por lo tanto, lograr una capacidad de adaptación suficientemente genérica para utilizar en cualquier dispositivo. Hay una sintaxis particular y determinados tipos de clave que podemos utilizar para armar las queries. Las iremos viendo a lo largo del curso. También podés utilizar las queries en reglas. Resumiendo, los enfoques receptivos aplican a tipos de dispositivo, tamaños de dispositivo, imágenes y fuentes. Tenemos que tener en cuenta que no siempre es necesario pensar en hacer un diseño responsive. Más que nada por el costo que esto implica y porque muchas veces puede ser que la necesidad sea hacer una página que aplique solamente a un tipo de dispositivo concreto. Pero está claro, de todas formas, que el camino a seguir en el diseño web es el diseño responsive. [MÚSICA] [MÚSICA]
