Cambiar el user agent en Safari

Posted on 6 abril 2009 by Iván Mendoza

En Firefox para cambiar el user agent usamos User Agent Switcher, pero en Safari es diferente porque la opción ya esta integrada sin necesidad de ninguna extensión. Además tenemos la ventaja de que Safari Mobile, el navegador del iPhone y iTouch, usa el mismo motor que Safari, así que la experiencia es prácticamente la misma.

La forma de cambiar el User Agent en Safari es distinta, básicamente porque Safari ya incluye una lista de user agents configurados que hace más fácil todo, aunque por otro lado es más limitado porque solo permite tener un user agent personalizado, y no muchos como User Agent Switcher.

Para cambiar el user agent en Safari primero tienes que activar el menú de desarrollo:

Edición –> Preferencias…

Menú de edición de Safari

Ve a la pestaña Avanzado –> Activa la opción “Mostrar el menú de Desarrollo en la barra de menús”

Listo, ya tienes el menú de desarrollo con la lista de User agent que puedes usar, incluyendo el user agent del iPhone y iPod Touch

User agents en Safari

Para agregar un user agent extra usa la opción “Otra…” al final del menú

y luego escribe el user agent que deseas usar

Recuerda que Safari solo te deja utilizar un user agent personalizado a la vez, así que elige sabiamente cual vas a usar o usa Firefox

En el tema anterior, acerca de User Agent Switcher, encuentras una lista de user agents de móviles.

Disfraza Firefox de móvil con User Agent Switcher

Posted on 4 abril 2009 by Iván Mendoza

En el artículo anterior comentaba acerca de Web Developer Toolbar como ayuda para desarrollar webs para móviles, en este artículo vamos a ver User Agent Switcher, también para Firefox, que es muy útil cuando trabajamos con móviles.

User Agent Switcher sirve, como su nombre lo dice, para cambiar el User Agent del navegador, en este caso Firefox, por el que nosotros queramos. El User Agent es un texto que usan los navegadores para identificarse con los servidores en Internet y en donde comparten características y alguna otra información útil. Por ejemplo, el User Agent del iPhone se ve así:

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

¿Para qué sirve User Agent Switcher en el desarrollo para móviles?
La mayoría de métodos para detectar cuando móvil ingresa a un sitio web se basan en el user agent, por eso es bastante útil disfrazar a Firefox de móvil cambiándole el User Agent. Puedes navegar por cualquier sitio como si de un móvil se tratará.

Cómo cambiar el User Agent con User Agent Switcher

Lo primero es instalar User Agent Switcher (UAS) y reiniciar Firefox.
Luego debes agregar un User Agent usando el botón UAS -> Options –> Options…
Selecciona el área de User Agents y luego el botón Add
Ingresa la información del User Agent de la siguiente forma, no es necesario llenar todos los datos, aunque si tienes la información es bueno hacerlo. A continuación el ejemplo con el User Agent del iPhone

Lista de User Agent de móviles

Abajo te dejo una lista de los user agents usados por móviles, intente incluir uno por cada marca o navegador importante, aunque la lista podría ser “interminable”.

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

Encuentras una lista mucho más completa de user agents en la página web de Zytrax: Mobile Browser ID (User-Agent) Strings.

Importar user agents en User Agent Switcher

Agregar la lista anterior de user agents puede ser algo tedioso, menos mal tenemos la opción de importar la lista, para hacerlo sigue estos pasos:

Descarga el archivo con los user agents de user-agents-moviles.xml (3.07kb, Click y guardar como…)
Entra a las opciones UAS y selecciona la opción de importar. Si activas la opción Overwrite existing user agents when importing los user agents que tengas se reemplazaran por los del archivo:
Buscas el archivo que descargaste y lo cargas. Listo, con eso tendrás la lista de user agents actualizada.

Usar User Agent Switcher te evita estar probando páginas de tu móvil porque “engaña” a los servidores de Internet haciéndolos creer que los visitas desde un móvil, también si usas diferentes versiones (o si usas algún plugin como MobilePress) te permite probar cómo verían tus visitantes el sitio web, saber si están viendo la versión correcta.

Si tienes dudas y sugerencias son bienvenidas en los comentarios.

Desarrollar para móviles con ayuda de Web Developer Toolbar

Posted on 4 abril 2009 by Iván Mendoza

En Firefox existe una extensión, Web Developer, bastante famosa entre desarrolladores por ser muy completa. En resumen, Web Developer Toolbar agrega una barra de herramientas más a Firefox con recursos para desarrolladores, como mostrar los estilos CSS e incluso modificarlos, desactivar Javascript, cambiar el tamaño de la ventana, revisar información de formularios y muchas características más que sirven en el desarrollo web.

Por defecto no incluye ninguna ayuda para desarrollar para móviles pero si la opción de agregar herramientas, de esta forma podemos configurarla para trabajar webs para móviles, y es justo lo que voy a explicar en este artículo.

Agrega validadores para web móvil

Los validadores nos ayudan a “certificar” la calidad del código en base a una serie de lineamientos, que si los cumplimos podremos obtener mejores resultados mientras que trabajamos con buenas practicas. Existen dos validadores famosos para web móvil, el primero (y “oficial”) es el W3C MobileOk Checker, y el segundo, un test para evaluar buenas practicas, es el de ready.mobi.

Para agregar un validador a Web Developer Toolbar debes ir a Tools –> Edit Tools…
Presiona el botón Add y te mostrará una ventana para que ingreses datos
Agrega el validador del W3C de esta forma:
Description: W3C MobileOK Checker (o cómo quieras llamarle)
Keyboard Shortcut: (agrega una letra para usarla como atajo si quieres)
Tool Type: Selecciona URL.
URL: http://validator.w3.org/mobile/?checkasync=true&view=cat&docAddr=
Repite los dos pasos anteriores para agregar el validador de Ready.mobi, solo que ahora con esta información:

Description: Ready.mobi
Tool Type: Selecciona URL.
URL: http://ready.mobi/results.jsp?uri=

Personaliza las resoluciones de pantalla

Web Developer Toolbar incluye la opción de modificar las dimensiones del navegador solo seleccionando una opción del menú. En el caso de los móviles es muy útil para darnos una idea aproximada del resultado final, en la imagen se puede ver Firefox en una ventana de 320×480 (HVGA) simulando la resolución del iPhone:

Para agregar una nueva resolución de pantalla usa Resize –> Edit Resize Dimensions…
Presiona el botón Add… y agrega la resolución que quieres usar:
Description: (Cómo quieras llamarla)
Width: Ancho en pixeles
Height: Alto en pixeles
Resize the viewport: Activado. Se usa para que las medidas se apliquen directamente al área de la página y no a toda la ventana, evita que las barras de herramientas y demás arruinen el efecto de simular las dimensiones.

Resoluciones de pantalla más populares en móviles

Abajo te dejo una lista de las resoluciones de pantalla más populares en móviles:

128×128 px. Una de las resoluciones más pequeñas y ahora anticuada.
176×220 px. Popular en modelos de Sony Ericsson y algunos Nokia
240×320 px. o QVGA. Popular en PDAs con Windows Mobile, Nokia N96 y otros similares.
320 x 480 px. o HVGA. Anteriormente esta resolución era extraña, ahora con la llegada del iPhone se volvió muy popular, también la usa el iPod Touch, HTC Dream y el nuevo Palm Pre.
640 x 320 px. Usada en el Nokia N97
640 x 480 px. HTC Touch Diamond usa esta resolución, igual que el HTC Touch Pro o el HTC Advantage.
800 x 480 px. Usada por el Nokia N810.

Desactivar Javascript o cargar CSS Handheld

Los validadores y modificar el tamaño de la ventana son dos herramientas útiles para desarrollar para la web móvil, pero en general Web Developer toolbar es una herramienta bastante completa que incluye muchas más opciones para desarrollo web, por ejemplo puede desactivar Javascript (ver imagen) o cargar la hoja de estilos CSS Handheld, aunque es poco usada por los navegadores en móviles. Puedes leer el artículo Return of the Mobile Style Sheet que trata más acerca del tema de las hojas de estilo en móviles.

Eso es todo por ahora con Web Developer Toolbar, más adelante escribiré sobre cómo simular una visita desde el móvil usando User Agent Switcher. Dudas y sugerencias son completamente bienvenidas

Prefieren los móviles

Posted on 2 abril 2009 by Iván Mendoza

“Accessing the Web from a mobile device is not something users do because they have to, it is something they do because they want to”

Que en una traducción un tanto libre dice:

Accesar a la web desde un dispositivo móvil no es algo que los usuarios hagan porque pueden, es algo que hacen porque quieren

yahoo - portada Una frase escrita por el MWI Team blog basada en IBM Study Finds Consumers Prefer a Mobile Device Over the PC, un estudio de IBM realizado el pasado octubre en Estados Unidos, China y el Reino Unido. El estudio mostró que al menos el 50% de las personas, de las 600 que participaron, han sustituido la computadora por un dispositivo móvil. Algo impresionante y que en mi caso es totalmente cierto. Además se espera que en el 2013 la cifra aumente de 50% a 80%, aunque personalmente no apostaría por eso.

Siguiendo con los resultados del estudio, muestran que uno de los mayores usos, además de comunicación, es el consumo de información a través de la web móvil, y que gracias a esto se espera que aumente el número de personas que prefieren los móviles. Los usuarios esperan usar más el internet desde el móvil para el 2011, además de tener más contenido disponible, incluyendo redes sociales y mensajería instantánea.

Recomendaciones para desarrolladores

También dentro del documento hacen algunas recomendaciones para la gente que trabaja con móviles acerca de cómo actuar frente esta adopción. Abajo los dejo tres de los cinco puntos que conciernen a la web móvil:

Definir una estrategia respecto al Internet móvil para entender el comportamiento de los consumidores y poder identificar la estrategia que mejor aproveche los puntos fuertes.
Transformar el modelo de negocios para integrarlo la estrategia respecto al internet móvil, esto incluye áreas de investigación y desarrollo, mercadeo y ventas (marketing and sales) o servicios de entrega (service delivery).
Apoyar la adopción de estándares libre y open source para hacer crecer y nutrir el ecosistema(móvil).

webdebolsillo

Ayudando a construir la web móvil en español

Monthly Archives: abril 2009