Con el propósito de describir cómo adaptar pantallas a diferentes dispositivos móviles, usaremos Media Query en el desarrollo web, según las especificaciones del lenguaje de diseño CSS. Lo anterior, tiene como fin evitar las situaciones incómodas para el usuario, cuando desea leer información de páginas web en su teléfono y obtiene contenido diferente al observado, mediante una computadora, es decir, con omisiones de información.

El lenguaje de diseño CSS incluye un módulo llamado Media Query, el cual traducido al español significa consulta de medio. Es utilizado con frecuencia en el diseño receptivo de páginas web, debido a la posibilidad de personalizar la presentación, según el dispositivo. Las consultas de medio se basan en dos características, el ancho y el alto de la pantalla.

Con Media Query es posible crear diferentes estándares de diseño, consideremos tres ejemplos: uno fijo para computadoras, donde muestren tres divisiones de pantalla; otro flexible para pantallas de tablets con dos divisiones; y, por último, uno con una divsión para teléfonos inteligentes. Sin embargo, es preciso cuidar detalles de las especificaciones, debido a las situaciones en las cuales aplicamos un estilo por defecto, y luego se sobrepone otro estilo, el cual anula o elimina importantes reglas de la original.

Existen diferentes cambios posibles con Media Query, sin embargo, los más comunes son:

• La modificación de columnas: usada para presentar la información con una sola división de columnas cuando se trata de dispositivos móviles, como se explicó anteriomente.
• La modificación de anchos: usada para mostrar anchos fijos en computadoras, debido a la posibilidad de apreciar toda la información, y cuando se trata de teléfonos definir anchos flexibles, a fin de adaptarse al dispositivo. Lo anterior con frecuencia se realiza mediante la especificación de ancho de cada elemento div en 100%.
• La modificación de espaciados: utilizado para mostrar espacios anchos entre elementos cuando de trata de una computadora, porque debido al tamaño es más fácil apreciar todos los elementos de forma organizada. Sin embargo, cuando es dispositivo móvil, el ancho debe ser compacto, con la finalidad de evitarle al usuario movilizar con los dedos la pantalla para ver toda la información.
• La modificación de tamaños de letras: muestra titulares grandes y textos pequeños en computadoras, debido a lo llamativo que puede ser para el usuario. Y para dispositivos móviles buscar unificar más los tamaños para evitar el desperdicio de pantalla en textos demasiado grandes.
• La modificación de enlaces: se usa para mostrar barras largas de hipervínculos en computadoras y cuando se trata de dispositivos con pantallas de menor tamaños, ubicarlos con botones organizados de una forma más optimizada, por ejemplo en cuadros.
• La modificación de fondos: con la finalidad de mostra una imagen grande cuando se trata de la presentación en una computadora. Con respecto a un teléfono inteligente es posible agregar una imagen más pequeña, de lo contrario será dificil para el usuario apreciarla.

061-01_1404_ilu01. Cambios frecuentes con Media Query

Los creadores de páginas web ocultan contenido mediante Media Query cuando muestran la página en teléfonos inteligentes, sin embargo, lo anterior perjudica al usuario cuando accede desde su celular a una información observada previamente mediante su computadora.

Keynotes

• El lenguaje de diseño CSS incluye un módulo llamado Media Query, la cual traducida al español significa consulta de medio. Es utilizado con frecuencia en el diseño receptivo de páginas web, debido a la posibilidad de personalizar la presentación de una página web, según el dispositivo.
• Con Media Query es posible crear diferentes estándares de diseño, consideremos tres ejemplos: uno fijo para computadoras, donde muestren tres divisiones de pantalla; otro flexible para pantallas de tablets con dos divisiones; y, por último, uno con una divsión para teléfonos inteligentes.
• Los creadores de páginas web ocultan contenido mediante Media Query cuando muestran la página en teléfonos inteligentes, sin embargo, lo anterior perjudica al usuario cuando accede desde su celular a una información observada previamente mediante su computadora.

Crea una instrucción de adaptación de pantallas a diferentes dispositivos con Media Query en el desarrollo web, según las especificaciones del lenguaje de diseño CSS. Previamente, con dos compañeros realiza un conversación sobre el la instrucción elegida.

¡Comparte el resultado final del reto en tu vPages!

Tiempo disponible: entre 15 y 30 minutos.

Con el uso de Media Query en el desarrollo web, según las especificaciones del lenguaje de diseño CSS, brindamos la comodidad al usuario de leer una información de una página web, tanto en la computadora como en su teléfono, siendo ella la misma, aunque organizada de forma diferente para ajustarla a las características de la pantalla. Tenemos la capacidad de describir cómo adaptar pantallas a diferentes dispositivos. Con estudio constante y disciplina dominaremos en su totalidad las propiedades de Media Query.