Seleccionar página

La ventana gráfica del navegador es el área de la ventana en la que se puede ver el contenido web. A menudo, este no tiene el mismo tamaño que la página renderizada, en cuyo caso el navegador proporciona barras de desplazamiento para que el usuario se desplace y acceda a todo el contenido.

Los dispositivos de pantalla estrecha (por ejemplo, móviles) procesan las páginas en una ventana virtual o ventana gráfica, que suele ser más ancha que la pantalla, y luego reducen el resultado procesado para que se pueda ver todo a la vez. A continuación, los usuarios pueden desplazarse y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho de 640 px, las páginas se pueden renderizar con una ventana virtual de 980 px y luego se reducirá para que quepa en el espacio de 640 px.

Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se rompen ( o al menos se ven mal) cuando se procesan con un ancho de ventana pequeño. Esta ventana virtual es una forma de hacer que los sitios no optimizados para dispositivos móviles en general se vean mejor en dispositivos de pantalla estrecha.

Esta es una recomendación tutorial para comprender algunas características del diseño y la animación de sitios web para móviles.

En este post veremos algunos códigos y etiquetas html destinadas a dispositivos móviles.

HTML OPTIMIZADO PARA MÓVILES

Los navegadores para móviles tienen generalmente compatibilidad con la versión HTML5. Hay que utilizar el doctype del HTML5. Además habrá que incluir la etiqueta META para definir el juego de caracteres que estamos utilizando. Esto se define en HTML5 con el atributo «charset», de una forma más simple que en otras versiones anteriores del lenguaje. Más Información. Como nota importante, cabe destacar que para mejorar la compatibilidad de caracteres con la mayor gama de dispositivos móvies, se recomienda utilizar el charset UTF-8.

METADATOS DE CONFIGURACIÓN MÓVILES

Existen diversas etiquetas META que nos permite especificar la configuración del documento HTML de cara a cómo lo deben interpretar y renderizar los dispositivos móviles. Estos metadados procededen de empresas de tecnología móvil, pero su implementación a sobrepasado los límites de la empresa. Así que han sido adquiridos y utilizados por la mayoría de codificadores y empresas afines. Por ejemplo: la Metaetiqueta «Viewport» creada por Apple, se hoy una metaetiqueta estandarizada, que tienen en cuenta todos los navegadores conocidos.

<meta name="MobileOptimized" content="width"/>

Esta metaetiqueta creada por Internet Explores en Windows Mobile, hace que el navegador adapte el contenido de la página a la ventana del dispositivo. Permite que el navegador no haga ningún cambio en el layout de la página que contenga esta META Tag.

Si lo indicamos tal cual aparece en el código anterior, con content=»width», se adaptará a la anchura de cada dispositivo. Si no queremos eso, también podemos definir un valor numérico en el atributo content, que indicará el tamaño en píxeles para el que se diseño la página.

<meta name="HandheldFriendly" content="true"/>

Esta etiqueta informa al navegador que la página está optimizada para móviles y que, por tanto, no se debe escalar su contenido al mostrarlo en la pantalla de los dispositivos. Creada por los navegadores AvangtGO, compatible con dispositivos BlackBerry, no se ha llegado a popularizar en muchas plataformas.

Lo que nos lleva a la última etiqueta META para optimizar sitios para móviles, que ha sido universalmente implementada por los fabricantes de software, el «viewport»

< meta name = "viewport" content = "width=device-width,initial-scale=1" >

Como loas metaetiquetas que hemos visto hasta ahora, indica al navegador que el sitio web está optimizado para móviles, pero en este caso nos sirve también para especificar cómo el cliente web debe interpretar el documento y cómo debe renderizarlo.

Sirve por tanto, para indicar las diversas informaciones al navegador, como la anchura a la que se tiene que representar el documento, la escala inicial, si se puede o no hacer zoom, etc. Más Información.