En ocasiones, los usuarios observan una página web en su teléfono con letras
difícilmente legibles, debido al diseño creado por el programador, el cual
carece de especificaciones avanzadas para el ajuste necesario en teléfonos
inteligentes. Por este motivo, a fin de asegurar la visualización correcta de
una página web, ajustaremos una
pantalla con metadatos, según el enfoque RWD.
Existe una diversidad de dispositivos móviles con
diferentes tamaños de pantallas, y hacer una aplicación o conformar una página web para cubrirlos a todos tiene su
dificultad. Sin embargo, con algunas etiquetas es posible adaptar una página web, según el tipo de pantalla donde será
mostrada, tal como se observa en la siguiente imagen.
061-01_1403_ilu01.
Diferentes tamaños de pantalla
En ocasiones, los dispositivos móviles realizan un
ajuste de la pantalla cuando cargan una página web, con la finalidad de mostrar la información en una dimensión
menor, sin embargo, mantienen la presentación como si fuese una computadora.
Este hecho causa inconvenientes, debido a la disminución del tamaño de la
página, la cual puede quedar con letras muy pequeñas, al punto de ser difíciles
de comprender.
061-01_1403_ilu02.
Página web en computadora y móvil
Para solventar este inconveniente de diferentes
tamaños de pantallas existen varias técnicas. Una de ellas es el uso de la
etiqueta meta, llamada viewport, perteneciente
al enfoque RWD. La cual se agrega en la cabecera del documento HTML y permite
redimensionar el texto de una forma legible para el usuario con pantallas
pequeñas. Para utilizarla es necesario:
- Crear el atributo name.
- Agregar entre comillas el
valor viewport.
- Definir el atributo content y, dentro de las comillas, las
especificaciones del ancho de la pantalla.
061-01_1403_ilu03.
Creación de la etiqueta meta
Es importante conocer que el elemento viewport no pertenece al estándar de
ningún lenguaje, fue introducido por los creadores de Mobile Safari, a fin de
controlar las dimensiones en cuanto a la presentación de páginas web y, luego, la introdujeron en sus
códigos el resto de navegadores móviles.
Si revisamos el soporte de la metadata viewport en internet, es posible
verificar la aceptación en varios navegadores web, sin embargo, por Internet Explorer es parcialmente aceptada y
por Opera Mini no es aceptada. En la siguiente imagen observamos los colores de
cada soporte.
061-01_1403_fot01.
Verificación de etiqueta en Caniuse
La etiqueta meta
solo se define una vez, en la siguiente imagen tenemos dos ejemplos:
061-01_1403_ilu04.
Especificaciones de viewport
En la instrucción anterior visualizamos:
- La primera especificación
define device-width, una presentación
de contenido con un ancho dependiente del dispositivo, es decir, se ajusta al
tamaño de pantalla. Además, tiene una escala inicial de uno, equivalente al zoom cuando la página sea cargada.
- La segunda especificación
define una presentación del contenido con un ancho de 320 píxeles,
independientemente del dispositivo, y un zoom
máximo de uno.
Aunque el valor viewport
no se encuentra en un estándar oficial, en la documentación de Apple, su
creador, conseguimos más información, debido al aporte en cuanto al código para
aplicaciones móviles.
Keynotes
- En ocasiones, los dipositivos móviles realizan un ajuste de
la pantalla cuando cargan una página web,
con la finalidad de mostrar la información en una dimensión menor, sin embargo,
mantienen la presentación como si fuese una computadora.
- El uso de la etiqueta meta, llamada viewport, perteneciente al enfoque RWD. La cual se agrega en la
cabecera del documento HTML y permite redimensionar el texto de una forma
legible para el usuario con pantallas pequeñas.
- Es importante conocer que el elemento viewport no pertenece al estándar de ningún lenguaje, fue
introducido por los creadores de Mobile Safari, a fin de controlar las
dimensiones en cuanto a la presentación de páginas web y, luego, la introdujeron en sus códigos el resto de
navegadores móviles.
- Aunque el valor viewport
no se encuentra en un estándar oficial, en la documentación de Apple, su
creador, conseguimos más información, debido al aporte en cuanto al código para
aplicaciones móviles.
MisiónA fin de asegurar la visualización correcta de una
página web, ajusta de pantalla con
metadatos, según el enfoque RWD.
Pasos a seguir:
- Crea un documento HTML y
agrega la especificación de ajuste de pantalla.
- Investiga en W3C las
especificaciones del elemento viewport.
- Ubica un especialista en la
materia mediante vProfile y muéstrale
tu documento a fin de anotar las sugerencias que él realice.
Sabrás que has tenido éxito cuando tu código se
ejecute correctamente en el navegador web
de preferencia.
Modifica tu código según las recomendaciones del
especialista. Comparte el resultado final del resumen en tu vPages.
Tiempo disponible: 3 horas.
CierreEl ajuste de pantalla con metadatos, según el
enfoque RWD, otorga al usuario la posibilidad de observar páginas web, con tamaños de información acordes
a las dimensiones de su teléfono. Lo cual le permite disfrutar del contenido en
su totalidad, por lo tanto, aseguramos la visualización correcta. Con
organización y disciplina aplicaremos el elemento viewport correctamente.
