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: 335

Visitas el mes pasado: 135

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 (IV)

Emuladores

imagen móvil

Concepto de emulador

Uno de los principales problemas que tenemos mientras estamos creando la página es poder comprobar cómo queda vista desde un móvil. Saber cómo se ve la página en los distintos dispositivos es fundamental mientras vamos creando la versión movil.

Al igual que ocurre con los navegadores, los distintos dispositivos móviles pueden tener diferencias al mostrar la página. Aunque lo ideal sería tener un dispositivo móvil de cada tipo para ver cómo queda la página, esto no suele ser posible, por lo que tendremos que recurrir a un tipo de herramientas que son los emuladores.

Un emulador es una herramienta que nos muestra en el ordenador de escritorio el sitio tal como se vería en un móvil.

Veamos a continuación los distintos tipos de emuladores de que disponemos.


Emuladores on line

Hay algunas páginas en las que encontramos algunos emuladores on line, Yo de momento he encontrado los siguientes:


Opera Mini

Opera Mini es en realidad un navegador adaptado para móviles, y se incorpora a éstos como una aplicación. Muchos móviles vienen ya con esta aplicación incorporada cuando los compramos, o se puede descargar e incorporla al móvil.

En la web de Opera tenemos un emulador de esta aplicación en la página http://www.opera.com/es/developer/mobile-emulator

Desde esta página te puedes descargar una aplicación llamada "Opera Mobile Classic Emulator" con la cual se verá la página como si utilizaras "Opera mini". Además puedes elegir entre varios modelos de teléfono.


Mobile Phone Emulator

el sitio http://www.mobilephoneemulator.com/ nos permite ver cualquier sitio en su versión móvil y en distintos teléfonos.

Al abrir el sitio nos pregunta cual es el tamaño de nuestro monitor (en pulgadas), Esto permite crear la imagen del móvil a tamaño real. Después en la columna de la derecha tenemos varias opciones para elegir entre varios tipos de teléfono (iPhone, samsung, BlackBerry, HTC ...), también una opción para elegir el sitio que queremos emular.

Aunque está en inglés no creo que esto sea una dificultad. También tenemos la opción de cambiar el idioma a francés.


movilqr

el sitio movilqr tiene también un emulador de sitios movíles. para dispositivos tipo iPhone, BlackBerry y pequeño Android. La página es http://movilqr.com/mobilesimulator/simulator.php. sin embargo no nos redirecciona la página por lo que debemos poner la dirección de la página de inicio de la versión móvil.


responsinator.com

El sitio http://responsinator.com/ nos muestra también la página que le indiquemos tal como se vería en distintos dispositivos (iPhone, Android, iPad, Kindle). Debemos también indicar la dirección de la página en su versión móvil. Aquí lo interesante es que por ejemplo en el iPhone, nos muestra la página en vertical y en horizontal.


Podemos encontrar más emuladores en la web, si buscamos un poco seguro que encontramos alguno más. El problema de los emulaores on line es que tenemos que haber subido la página a un servidor para poder comprobarla. por tanto mientras estamos trabajando en la versión debemos subirla a la red para comprobar los cambios.

Aunque los emuladores on line nos dan una idea bastante exacta de cómo queda nuestra página, no es lo más adecuado para comprobar nuestro trabajo.


Herramientas de Firefox.

El navegador Mozilla Firefox Tiene un par de complementos o extensiones que una vez instalados nos pueden ser muy útiles en el trabajo con las webs móviles. Estas herramientas permiten dar al navegador el aspecto de un móvil, para poder comprobar nuestro trabajo.


Web developer

Web developer es una extensión de Firefox que consiste en una barra de herramientas que puede ser muy útil para dsarrolladores. Se descarga desde la Pagina de complemento Web Developer y una vez instalado tiene varias opciones.

panel resize

Entre ellas podemos tener acceso a los distintos códigos de la página, las imágenes, los formularios, etc.

Sin embargo lo que nos interesa aquí es el apartado "resize" donde podemos controlar la resolución de pantalla. para ello utlizaremos la opción "resize", que nos redimensiona la ventana en la que vemos Firefox al tamaño que le digamos.

Al pulsar en "resize" se nos abre un cuadro, y ahí pulsamos en "Edit Resize Dimensions ...".

panel resize

Se nos abre un panel llamado "Web Developer Options", allí pulsamos en el boton "Add.." y se nos abre otro panel más pequeño : "Opciones".

Allí tenemos un formulario en donde podemos poner una nueva opción para la redimensión de Firefox. por ejemplo ponemos que se abra con el tamaño de un iPhone visto en vertical. Para ello en "Description:" ponemos : iPhone-Vertical; en "Width:" ponemos 320 y en "Height:" ponemos 480, que es la resolución de pantalla del iPhone. La opción "Resize the viewport" debemos marcarla para que al redimensionar la página estas dimensiones correspondan al area en donde se ve la página, y no al navegador completo. La opción "Keyboard:" nos permite crer una via de acceso rápida al redimensionado, pulsando una combinación de teclas. Para acabar pulsamos en "aceptar" en los dos paneles que están abiertos.

panel resize

Nosotros hemos añadido esta opción y además la opción de un iPhone con la pantalla en horizontal (seguimos para ello los mismos pasos). Ahora al pulsar de nuevo sobre la opción del panel "resize" tenemos las opciones "iPhone-Vertical" y "iPhone-Horizontal", que nos redimensionan la ventana del navegador al tamaño de un móvil.

Además podemos usar también la opción "View Responsive Layouts", en la que, en una nueva página, podemos ver la página actual en distintas resoluciones de pantalla usadas por distintos dispositivos.


User Agent Switcher

Esta es una extensión de Firefox que puede resultarnos muy útil para trabajar con versiones para móviles. Lo que hace User Agent Switcher es cambiar el "User Agent" del navegador, de manera que la página se verá tal como la veríamos si usáramos un dispositivo con el "User Agent" que le indiquemos.

panel de user agent

En el desarrollo de páginas para móviles, esto tiene bastante utilidad, ya que cambiandole el "User Agent" por el que utiliza el móvil, podemos ver las páginas tal como las veríamos en un móvil.

Podemos descargar e instalar User Agent Switcher como cualquier otro complemento de Firefox desde el siguiente enlace: Descargar User Agent Switcher. Debemos reiniciar después Firefox para poder usarlo.

Una vez instalado vamos a la barra de menú, y buscamos en "Herramientas" .. "Default User Agent" .. "Edit User Agents". cuando estemos utilizando otro "User Agent" que no sea el de Firefox, en lugar de "Default User Agent" te pondrá el nombre el "User Agent" que estés utilizando.

Al pulsar ahí se nos abre un panel en el que podemos controlar los distintos "User Agent" que tenemos como opciones.

Seguramente tendrás menos opciones que las que se muestran en la imagen de la derecha, ya que éstas las puedes ir añadiendo. Para incluir una nueva opción pulsa en el botón "New". Se te abre un diálogo con varias opciones, pulsa en "New User Agent .." y se te abre otro panel con un formulario.

panel de nuevo user agent

Aquí cambiamos el texto que sale por el del nuevo "User Agent". Sólo es necesario incluír los dos primeros campos del formulario. En el primero (Description:), incluiremos el nombre del teléfono, dispositivo o navegador, y el el segundo (User Agent:), incluimos el "User Agent". Si sabemos las demás opciones no está de más ponerlas, pero si no es así con esto es suficiente. Por ejemplo en la imagen de la derecha hemos incluido el "User Agent" de Opera Mini.

Una vez que tenemos un nuevo "User Agent", para ver la página como en el nuevo "User Agent", vamos a la barra de menús y ahí buscamos en "Herramientas" .. "Defalut User Agent" (o el "User Agent" que estemos utilizando). Ahí aparecerá una lista de los "User Agent" disponibles. No tenemos más que pulsar en uno de ellos y recargar la página.

User Agent Switcher redirecciona la página a su versión para móvil cuando el redireccionamiento se ha hecho con PHP.

El único problema está en buscar una lista de "User Agent" para móviles, y poder de esta manera probar la página en distintos dipositivos. Vemos esto a continuación.


Lista de User Agent para móviles

La siguiente lista de "User Agent" para móviles nos la proporciona la web webdebolsillo.com en la misma página indica también cómo utilizar User Agent Switcher para Firefox.

Estos pueden ser unos modelos de referencia para ponerlos en el User Agent Switcher. Sin embargo podemos consultar la lista de los "User Agent" tanto para móviles como para otros dispositivos en varias páginas, entre ellas:




Veremos en la siguiente página otras herramientas que podemos usar para trabajar y comprobar la versión móvil.

Otras herramientas



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