Entendido.

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

Aprende Web

Crea y diseña tus sitios en la Web.

Versión móvil

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++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



Version móvil (I)

Características

La versión para móviles

La web en un principio fue diseñada para poder ver las páginas o archivos web en un ordenador, ya sea este fijo o portátil. Esto supone que el diseño de la página está estrucurado para poder verse en un tipo de pantalla determinada, con unas ciertas medidas.

Sin embargo cada vez es más frecuente visitar las web desde otro tipo de soportes, como pueden ser los las tablets o los teléfonos móviles de todo tipo. El uso de internet desde el movil es un hecho, y las páginas web que están diseñadas para verse en ordenador convencional muchas veces no se adaptan a un formato de teléfono móvil.

El auge de los telefónos móviles (Smartphone, I-Phone, BlackBerry, etc), hace que cualquier sitio web que quiera tener un poco de prestigio tenga que tener también una versión para móviles. Un sitio con versión para móviles debe poder verse de forma distinta según lo abramos en un ordenador o en un móvil. Tendrá por lo tanto dos versiones, una para ordenador y otra para móvil. Al abrir el sitio se detecta cual es el dispositivo que lo abre, de manera que nos envie a una versión o a otra. Trataremos más adelante este tema.

En los siguientes apartados veremos las principales diferencias que tenemos entre una página para ordenador de sobremesa y una página para ser vista en un móvil.

El usuario

Debemos tener en cuenta en principio que el usuario que se conecta a Internet con el móvil se comporta de diferente manera que el que se conecta en un ordenador. veamos las principales diferencias:

Se están haciendo otras cosas: Cuando nos conectamos a Internet con un móvil generalmente estamos haciendo otras cosas al mismo tiempo, como pasear, hablar con otras personas, etc. La mayoría de las veces la conexión a Internet no es el centro de atención. Al contrario que con el ordenador personal, que cuando lo usamos solemos centrar nuestra atención en lo que hay en la pantalla, con el móvil ésto es distinto, ya que normalmente solemos estar pendientes de otras cosas a la vez.

Buscar algo concreto: La mayoría de los usuarios se conectan con el móvil para buscar algo concreto, y lo que quieren es inmediatez en la respuesta. Esto es así porque el que usa el móvil suele tener el tiempo limitado para encontrar una respuesta a un problema, una duda, etc.,

La conexión

El tipo de conexión también es diferente. Aunque últimamente ha mejorado mucho, y es más que aceptable, la conexión a Internet desde un móvil suele ser un poco más lenta que desde un ordenador que tengamos en nuestro hogar o en la oficina.

Además también debemos de tener en cuenta la cuota de transferencia mensual que tiene el usuario, (normalmente entre 500Mb y 2Gb). Aunque también debemos tener en cuenta que el usuario puede conectarse a internet mediante Wi-Fi.

Teniendo en cuenta esto debemos pensar que al crear una versión para móviles debemos de economizar el peso del sitio, tratando de eliminar todo lo superfluo, de manera que, sin dejarnos lo esencial, eliminemos todo lo superfluo.

Usabilidad

Por usabilidad entendemos esas buenas costumbres que debemos seguir para poder diseñar sitios que sean fáciles de usar en dispositivos móviles. Daremos aquí unos cuantos consejos para poder construir las páginas adaptadas a los dispositivos móviles.

En estas normas de usabilidad se ha tenido en cuenta todo lo dicho anteriormente sobre el uso del móvil por parte del usuario y sus características. Estas normas están avaladas por sitios como The World Wide Web Consortium (W3C), o desarrolloweb.com (ver la webgrafía adjunta).

Regla fundamental: Menos es más

Aunque parezca un tópico se ajusta perfectamente a lo que debe ser un diseño web para móvil. cuanto menos elementos superfluos y decorativos pongamos en la página más interés tendrá ésta en el usuario.

Recordemos que normalmente el usuario busca algo concreto y con inmediatez, no podemos entretenerle con otra serie de elementos que no sea lo esencial. Los móviles, además, suelen tener pantallas pequeñas, por lo que no caben muchas cosas. Debemos por tanto poner los elementos de la página de forma clara y sólamente los imprescindibles.

Diversidad de pantallas

Debemos tener en cuenta la diversidad de tipos de pantalla que tienen los móviles. Si en una página para ordenador de mesa ya hay que tenerlo en cuenta, aquí mucho más, ya que la variedad es mucho mayor.

El foco de atención.

Tal como se ha explicado antes, cuando un usuario abre una página con su móvil, ésta no es el único centro de atención. Normalmente se hacen otras cosas a la vez que se consulta la página. Debemos tener esto en cuenta también al diseñar nuestra página.

Estructura o layout para móvil

La estructura o layout de la página debe estar diseñada para verse en un móvil. Esto supone una serie de cambios, que hacen la página diferente, entre ellos podemos señalar:

• las columnas : En una página para escritorio solemos poner varias columnas con diferentes informaciones. El el móvil esto hace que el contenido de la página se vea muy pequeño. Reducir el número de columnas a una o dos, como mucho hace la página más accesible.
• Los menús de navegación. Estos deben ser más grandes, y normalmente no se suelen poner en la parte de arriba. El hecho de utilizar pantallas pequeñas, y que el uso del ratón es sustituido por un toque digital, obliga a que estos menús ocupen mucho más sitio. En ocasiones el menú de navegación puede ocupar casi toda la pantalla. Tampoco se descarta poner el menú de navegación en la parte baja de la pantalla.

El uso de imágenes

Hacer un uso responsable de las imágenes, es otro punto a tener en cuenta. Procuremos que estas no sean demasiado grandes en la pantalla, ni que tengan mucho peso.

Pantallas táctiles

El ratón es sustituido por los dedos. Esto es fundamental a la hora de poner enlaces, ya que la precisión de un toque con el dedo no es la misma que la de un click de ratón. Debemos por tanto poner los enlaces o botones de un tamaño mayor, y si es necesario, dejar mayor espacio entre ellos.

Las pantallas táctiles también crean otros tipos de eventos como pueden ser el deslizamiento, el zoom, girar la pantalla, etc.

El teclado

El teclado en un móvil es un teclado virtual, o mediante el uso de teclas de tamaño muy pequeño, y que no siempre son de tipo alfanumérico. Esto hay que tenerlo en cuenta, de manera que evitemos que el usuario tenga que utilizar el teclado, y en caso de que tenga que hacerlo, su uso sea el mínimo posible.

No hay plugins

El uso de plugins como "Flash" o "Java", no está disponible en todos los dispositivos, por lo que debemos evitar en lo posible utilizar estos elementos.

---

En la siguiente página veremos como construir una página diseñada para móviles, y las principales diferencias que existen respecto a las páginas diseñadas para un ordenador de sobremesa.

La página

Página creada por ANYELGUTI.

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

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

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