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

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

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

Emuladores

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.

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 ...".

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.

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.

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.

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.

• Android: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; Google Wireless Transcoder;)
• iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5F136 Safari/525.20
• iPod Touch 2.0: Mozilla/5.0 (iPod; U; CPU iPhone OS 2_0 like Mac OS X; de-de) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20
• Blackberry 8830: BlackBerry8330/4.3.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/105
• Opera Mini 4.1: Opera/9.60 (J2ME/MIDP; Opera Mini/4.1.11320/608; U; en) Presto/2.2.0
• Sony Ericsson K550i (NetFront browser): SonyEricssonW850i/R1ED Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1
• Sony Ericsson K700i (NetFront browser): SonyEricssonK700i/R2N SEMC-Browser/4.0.1 Profile/MIDP-2.0 Configuration/CLDC-1.1
• HTC TyTN Windows Mobile 6.1: Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)
• LG Voyager: Mozilla/4.1 (compatible; MSIE 6.0; ) 400×240 LGE VX10000
• Motorola Razor V3: MOT-V3r/08.BD.43R MIB/2.2.1 Profile/MIDP-2.0 Configuration/CLDC-1.1
• Nokia N95: Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95/10.0.018; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
• Samsung SGH-E900: samsung sgh-e900 /netfront 3.2

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:

• Lista de User Agents para useragentswitcher -- http://www.ars-legalconsulting.es/blog/lista-user-agents/05/2009
• http://www.useragentstring.com
• http://www.zytrax.com/tech/web/mobile_ids.html

---

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

Otras herramientas

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