En ocasiones, el usuario evita el ingreso a páginas web desde su celular, debido a la presentación desorganizada, y muchas veces incompleta, de la información. Por ser el dispositivo móvil utilizado con mayor frecuencia en comparación con la computadora, es importante cuidar el diseño en el mismo.

Con la finalidad de presentar páginas web independientemente del dispositivo, implementaremos Media Query en el desarrollo web, en base las recomendaciones del lenguaje CSS.

Aunque cualquier página escrita con lenguaje HTML puede visualizarse en un dispositivo móvil, necesitamos conocer algunos trucos para mostrar al usuario el proyecto web correctamente. Gracias al desarrollo de los teléfonos inteligentes, son más los usuarios con acceso a internet mediante estos dispositivos, por lo tanto, aún cuando las páginas web son dirigidas a computadoras, es necesario considerar algunos aspectos al marcar un documento, para favorecer a los dispositivos móviles. Entre ellos tenemos:

• Cuidar el tamaño de las letras cuando creamos páginas web, debido a la posibilidad de verse muy pequeñas en un ordenador, por lo tanto, en un móvil será difícil su lectura.
• Crear botones con tamaños considerables, debido a la existencia de teléfonos táctiles. Estos son manejados en su mayoría con el dedo y el usuario puede tener dificultad para presionarlos.
• Usar las etiquetas semánticas de HTML5, como se recomienda en el estándar oficial de este lenguaje de marcado, y utilizar CSS para mejorar la experiencia del usuario en móviles.

Observemos cómo debe ser el enfoque para mostrar páginas web en dispositivos móviles, en la siguiente ilustración:

061-01_1405_ilu01. Ejemplo de pantalla correcta

Para la implementación de Media Query en el lenguaje de diseño CSS, existe el elemento media, utilizado para especificar los tipos de medios en los cuales se mostrará el documento. En la siguiente ilustración se encuentra un ejemplo de la especificación para esta etiqueta:

061-01_1405_ilu02. Especificación del elemento media

En el código anterior, el navegador web interpreta lo siguiente:

• Muestro todo texto del body con un tamaño de fuente de 5 píxeles.
• Evalúo la pantalla y si tiene mínimo de ancho 15 pulgadas, entonces muestro el texto del body con un tamaño de fuente de 15 píxeles.

Con el elemento media existen otras especificaciones, además de la pantalla con screen, existe print para especificar estilos al momento de imprimir el documento.

El elemento media se agrega en la cabecera del documento HTML, para lograr la visualización correcta de la página por el usuario, y un uso frecuente, es especificar diferentes hojas de estilo, según el dispositivo. Un ejemplo de ello lo visualizamos en la siguiente imagen:

061-01_1405_ilu03. Especificación de media para diferentes estilos

En el código anterior, el navegador web interpreta lo siguiente:

• Cargo el documento llamado estilo.css.
• Evalúo con el elemento media la pantalla y si tiene un mínimo de ancho de 1024 píxeles, entonces, cargo el documento estilo2.css.

Keynotes

• Para la implementación de Media Query en el lenguaje de diseño CSS, existe el elemento media, utilizado para especificar los tipos de medios en los cuales se mostrará el documento.
• Con el elemento media existen otras especificaciones, además de la pantalla con screen, existe print para especificar estilos al momento de imprimir el documento.
• El elemento media se agrega en la cabecera del documento HTML, para lograr la visualización correcta de la página por el usuario, y un uso frecuente, es especificar diferentes hojas de estilo, según el dispositivo.

Con la finalidad de presentar correctamente páginas web desde cualquier dispositivo. Crea un resumen sobre la implementación de Media Query en el desarrollo web, con base en las recomendaciones del lenguaje CSS.

Pasos a seguir:

• Ivestiga sobre la implementación actual de Media Query.
• Crea un documento con tres especificaciones de Media Query.
• Agrega un comentario en el documento con la explicación de cada especificación.
• Pide a un experto sugerencias sobre cómo optimizar tu código, utiliza Vpages para ello.

Sabrás que has tenido éxito cuando muestres tu resumen y código a un compañero y entienda cómo funciona la implementación Media Query.

Modifica el resumen y código, luego de las sugerencias del experto, y comparte el resultado final en tu Vpages.

Tiempo disponible: 3 horas.

La implementación de Media Query en el desarrollo web, con base en las recomendaciones del lenguaje CSS, asegura la presentación correcta de todo proyecto para internet, idependientemente del dispositivo del usuario. También, beneficiamos el transito frecuente de usuarios en la página web. Con estudio constante y disciplinado del módulo Media Query, diseñaremos eficientemente proyectos web.