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.
MisiónCon 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.
CierreLa 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.
