Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Versión móvil

Cómo adaptar una página a una versión para poder verla en un móvil


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 17

Visitas el mes pasado: 53

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Diseño web para dispositivos móviles
Desarrollo Web
Consejos sobre usabilidad de móviles: W3C
The World Wide Web Consortium (W3C)
Recursos de diseño para web móvil
webdebolsillo.com/recursos
Tutorial: crea una versión móvil de tu web o blog
Blog de David Alayón (pisitoenmadrid.com)

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Version móvil (II)

La página

imagen móvil

Introducción

Veremos aquí Cómo debemos crear una página adaptada a la web movil y las principales diferencias no sólo en el diseño, sino también en la programación.

Ya hemos dicho algo sobre el diseño en la página anterior: usabilidad, menos es más, espacio reducido, etc, por lo que nos centraremos sobre cómo optimizar la página desde el punto de vista de la programación.

En principio, la forma de construir la página es como la de cualquier otra página web: página en HTML, con hoja de estilos CSS y si queremos una página dinámica utilizaremos javascript, PHP, Ajax, etc. Sin embargo, hay algunas diferencias que nos ayudan a optimizar la página. Las veremos a continuación.


Usar HTML5

Hay varias razones para preferir el HTML5. La telefonía móvil está en constante evolución y continuamente sacan nuevos modelos con más prestaciones. El desarrollo de la telefonía móvil va por delante incluso del de los ordenadores personales en muchos aspectos. La incorporación del HTML5 es uno de ellos. Los usuarios de teléfonos móviles que usan Internet suelen tener modelos bastante nuevos de dispositivos, por lo que aunque HTML5 es un lenguaje bastante nuevo, los dipositivos suelen incorporar las nuevas funciones para usarlo.

Aunque el usuario utilice un teléfono más antiguo, con HTML5 no dejará de ver la página, aunque puede ser que algunos aspectos de HTML5 no se vean bien.

Aunque HTML5 no tiene muchas diferencias con las versiones anteriores (HTML4, XHTML1.0) tiene algunas ventajas que son esenciales para optimizar una página para móvil. Por tanto utilizarmos la etiqueta Doctype de HTML5:

<!DOCTYPE HTML>

Ls principales diferencias en el uso de HTML5 están en la utilización de formularios, poder utilizar aplicaciones como canvas o el uso de las etiquetas meta, que definen cómo debe verse la página.


Las etiquetas meta

algunas etiquetas meta tienen especial importancia para que el dispositivo interprete cómo debe mostrar la página, veamos cuales son y cómo se aplican a la web movil:


La codificación de caracteres :

La codificación que más se adapta a los sistemas de telefonía móvil es la UTF-8, La etiqueta meta para incluir esta codificación es :

<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />

En HTML5 esta etiqueta se simplifica bastante, hay que poner simplemente:

<meta charset="UTF-8">


La etiqueta "MobileOptimized" :

Esta etiqueta indica al navegador debe adaptar el contenido de la página al dispositivo. Su sintaxis es la siguiente.

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

Si lo indicamos tal cual lo vemos aquí (con content="width") la página se adaptará a la anchura del dispositivo. También podemos indicar como valor (en lugar de "width") un número, que indicará el número de píxeles que tiene que tener la página de ancho.


La etiqueta "HandheldFriendly" :

Esta etiqueta indica que la página está optimizada para móviles, y que su contenido no se debe escalar al mostrarlo en pantalla. No todos los dipositivos la aceptan aunque si funciona para los navegadores de AvantGO y los BlackBerry.


La etiqueta ""viewport" :

Esta es la etiqueta meta más importante para indicar diferentes informaciones sobre la página al dispositivo móvil; ya que en ella podemos indicarle al navegador web del movil cómo debe interpretar la página.

Esta etiqueta sirve para definir el area de pantalla disponible al visualizar el documento; Cual es el nivel de escalado que puede realizar el usuario; y si debe mostrarse con un zoom inicial. Para ello se utilizan diferentes parámetros en la misma etiqueta meta. El "viewport" es en realidad el area de la pantalla donde se muestra la página web.

En un ordenador de sobremesa el "viewport" es la ventana o área del navegador donde vemos la página. Los teléfonos de tipo iPhone disponen de una pantalla de 320px de ancho, sin embargo la página que vemos no se corresponde con esta anchura, ya que el iPhone emula tener 980 px de ancho. Esto hace que páginas que diseñadas para ordenador de escritorio se vean de forma muy similar en el movil, eso si, con un tamaño muy reducido (después el usuario puede hacer zoom para ampliar lo que le interesa, con el gesto tipico de abrir dos dedos). El "viewport" en el móvil es el tamaño que la página emula tener (980px) y no el que dispone en realidad. La etiqueta meta "wiewport", puede cambiar las condiciones de la forma de ver la página en la pantalla.

La sintaxis de la etiqueta "wiewport" es la siguiente:

<meta name="viewport" content="parametro1=valor1, parametro2=valor2, ...">

Dentro del atributo content ponemos varios parámetros con sus valores (parametro=valor separados por comas. veamos cuales son los parámetros y valores que podemos poner:

Un ejemplo de esta etiqueta sería:

<meta name="wiewport" content="Width=device-width, Initial-scale:1, User-scalable=yes, Minimum-scale=0.5" />


Formularios en web móvil

El uso de formularios en webs para móviles requiere una adaptación especial. No es que no se puedan usar igual que en los ordenadores personales, sino que resulta especialmente incómodo para el usuario, y bastante costoso, rellenar un formulario que no esté adaptado.

Tenemos que tener en cuenta aquí algunos aspectos de la web móvil:

Teniendo en cuenta esto veremos ahora unos consejos para mejorar la usabilidad en formularios en la web móvil:


En resumen, todo lo que resulte más cómodo para el usuario cuando tenga que completar un formulario con un móvil debemos emplearlo. Hay que tener en cuenta la facilidad para el usuario, tanto en la localización de los campos como en la forma de rellenarlos.




En la siguiente página veremos como hacer una web que tenga dos versiones, una para escritorio y otra para móvil

Dos versiones



Versión móviles

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com