Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Dispositivos móviles

Datos de búsqueda

Etiqueta ‘Dispositivos móviles’

SPA: simple, rápida, económica. Cómo se hizo Borrasca

Fecha de publicación: 2014/08/08

Hace ya algunos meses saqué una aplicación de predicción meteorológica para experimentar un poco con Backbone y Phonegap.

Se trata de una aplicación ‘Single Page Interface’ (gracias a Backbone.js) que se puede utilizar en un navegador web, ya sea de escritorio o móvil, o como aplicación en plataformas móviles (aunque sólo la he construido y publicado para Android).

Leer el resto del artículo

Buenas prácticas en Web Móvil

Fecha de publicación: 2010/02/07

He estado preparando una breve guía para introducirse en el desarrollo web para dispositivos móviles. Se basa principalmente en las Mobile Web Best Practices 1.0 (enlace externo, en inglés).

No está totalmente terminado, pero creo que ya puede resultar útil.

Datos del artículo:

Opera Mini: evolución de uso en Europa 2008-2009

Fecha de publicación: 2010/01/21

La gente de Opera tiene un interesante sitio en el que publican las estadísticas de uso de su navegador Opera Mini (sitio externo, en inglés).

Hace algunos meses publicaron la evolución de los diez países de Europa (más Turquía) en los que mayor uso hay de Opera Mini entre agosto de 2008 y agosto de 2009, incluyendo los sitios más visitados y los móviles más utilizados.

Leer el resto del artículo

Datos del artículo:

Web móvil: el protocolo WTAI

Fecha de publicación: 2009/01/30

El protocolo WTAI sirve para insertar enlaces en páginas y que al activarlos el dispositivo móvil ofrzca realiza una llamada al número de teléfono especificado en el enlace o guardarlo en la lista de contactos.

El valor del atributo href del enlace tiene el siguiente formato:

wtai://wp/mc;##########

Ejemplo de enlace para realizar llamada:

<a href="wtai://wp/mc;911234567">Llamar al número 91 123 45 67</a>

Ejemplo de guardar en contactos:

<a href="wtai://wp/ap;911234567;Nombre Contacto">Guardar en contactos el número 91 123 45 67</a>

Saber más

Datos del artículo:

CSS: propiedades a evitar en dispositivos móviles

Fecha de publicación: 2009/01/19

Algunas propiedades CSS que deben evitarse o utilizarse con cuidado al crear una hoja de estilo para dispositivos móviles:

  • float y display: estas propiedades se utilizan para crear presentar la página en varias columnas, algo que no se va a hacer (y que no se debe), en dispositivos móviles.
  • padding y margin: dependiendo de la función que cumplan habrá que retirarlas o disminuir el área que ocupan.
  • background-image: es recomendable evitar su utilización, y si se mantiene asegurarse que se adapta bien al dispositivo móvil.

Mas en A List Apart: Return of the Mobile stylesheet.

Datos del artículo:

HTC Diamond: Características

Fecha de publicación: 2008/10/18

Listado de características del HTC Diamond:

  • Sistema operativo Windows Mobile 6.1.
  • Procesador de 512Mhz, 192MB de RAM y 4GB de almacenamiento. Tiene la pega de no tener ranura para tarjetas de memoria.
  • Solo un conector para carga, movimiento de datos y auriculares: ExtUSB. Para poner unos auriculares normaleshay que utilizar un adaptador. Es compatible con cables Mini-USB.
  • Pantalla táctil: puede utilizarse con o sin puntero, ya que los menús se pueden manejar bien directamente con los dedos. En cuanto al teclado (el que aparece en pantalla, evidentemente), trae uno de HTC más adecuado para los dedos que el predeterminado de Windows Mobile, para el que hay que usar el puntero.
  • Acelerómetro que detecta la posición del móvil. Sirve para que determinadas aplicaciones gieren al cambiar la orientación de la pantalla. Existe una aplicación llamada GSEN que permite el cambio de orientación de pantalla en todas las aplicaciones que se quiera.
  • Conectividad: Wi-Fi, GPRS/WCDMA/HSDPA (HSDPA hasta 7,2Mb), Bluetooth y ActiveSync (que utiliza la conexión del PC al que se le enchufe). Además se puede usar como modem en un ordenador, aunque la forma de realizar la conexión puede resultar un poco engorrosa, ya que hay que abrir una aplicación de conexión compartida en el móvil.
  • Navegación web: Internet Explorer y Opera 9.5. El Opera 9.5 es una maravilla, tiene pestañas y detecta la orientación de pantalla. Parec que el Internet Explorer va a ser actualizado.
  • Windows Media Player: escaso de formatos (le faltan OGG Vorbis, DivX, XVid). Se puede utilizar en su lugar el Core Player, que está en la sección de descargas de HTC Mania (requiere registro).
  • GPS: funciona bastante bien, aunque algunas veces parece que le cuesta pillar los satélites. Trae una aplicación Google Maps que puede usarse conjuntamente con el GPS, con la desventaja de que tiene que descargar los mapas, lo que supone un desembolso de dinero si no se tiene una buena tarifa de datos. Yo le he instalado el TomTom 7 y va muy bien: se puede encontrar en Vagos, y hay que fijarse bien que sea la versión para resolución VGA.
  • Aplicaciones Java, como en cualquier otro móvil.
  • Outlook para Windows Mobile: muy fácil de configurar las cuentas de Gmail.
  • Cámara de 3.2Mpx. Saca bastante bien las fotos, aunque tiene la pega de no tener flash, lo que hace que cuando hay poca luz la calidad se resienta un poco.
  • TouchFlo 3D: reune diversas funciones en unas pestañas en mi opinión bastante útiles:
    • Mensajes SMS
    • Correo electrónico
    • Internet: Acceso directo a Opera y a los favoritos almacenados en dicho navegador.
    • Imagen y vídeo: accesos directos a la camara y vista previa de las fotos y vídeos realizados.
    • Música: reproductor de música muy cómodo. Adolece del mismo problema de formatos que el Windows Media Player.
    • Predicción meteorológica: temperatura y estado climatológico actual y para los próximos cinco días. Solo para grandes ciudades.
    • Configuración: fondo de pantalla, interfaces de comunicación, etc.
    • Listado de accesos directos de aplicaciones configurable.
    • TF3D Config: para configurar algunos aspectos del TF3D.
  • En Linux solo funciona adecuadamente el modo de memoria USB. Para que funcione el ActiveSync hay que seguir un procedimiento muy engorroso.
  • Si se compra libre cuesta una pasta, pero se evitan las pesadas permanencias con operadores de móvil y tener que reflashear para quitar las "mejoras" introducidas por dichos operadores.

Datos del artículo:

HTC Diamond: características, impresiones y pegas

Fecha de publicación: 2008/09/01

Actualización: lo he reescrito.

Hace unos días sustituí mi viejo móvil (un NEC e242) por un HTC Diamond. La diferencia entre ambos, como puede suponerse, es abismal.

El HTC Diamond tiene características muy interesantes:

  • Pantalla táctil y Windows Mobile (a pesar que que no me guste mucho Windows)
  • Navegación web: incluye Opera 9.5 para Windows Mobile (es maravilloso). También lleva Internet Explorer, pero teniendo Opera…
  • Conectividad de red: Wi-fi, GPRS/WCDMA/HSDPA (hasta 7,2Mb!!) y ActiveSync (que utiliza la conexión del PC al que se le enchufe). Además se puede usar como modem en un ordenador, aunque la forma de realizar la conexión puede resultar un poco engorrosa, ya que hay que abrir una aplicación de conexión compartida en el móvil.
  • Capacidad multimedia: MP3/WMA (le falta Ogg Vorbis), cámara fotográfica y de vídeo (calidad aceptable), reproducción de vídeo (no soporta Divx, aunque hay una aplicación que lo solventa).
  • GPS: se supone, según el vendedor, que incluía una versión de prueba de TomTom, pero en el que yo compré no había nada de eso. Me lo he bajado del Rapidshare y le he puesto un mapa de la península Ibérica. Va bastante bién, aunque se merienda una batería totalmente cargada en dos horas y media. También se puede utilizar el GPS con la aplicación que trae para Google Maps, aunque sin voz.
  • Trae una aplicación para ver vídeos de YouTube y otra para RSS.
  • Aplicaciones Java: aun no lo he probado, pero parece que se le pueden meter aplicaciones Java como las de los móviles normales.
  • Correo: gran facilidad para configurar Gmail.
  • TouchFlo 3D: le da un toque alegre a la interfaz del móvil.
  • Capacidad de memoria: 4GB, suficientes, aunque podrían haber incluido una ranura de memoria.
  • Teclado: no lleva, pero da igual, por que aparece uno en la pantalla táctil, que se puede configurar como el de un móvil normal, QWERTY abreviado (como en la Blackberry Pearl) y QWERTY sin abreviar. A pesar de lo que pueda parecer se maneja bastante bien.
  • Lleva acelerómetro (creo que se llama así), de forma que al ver imágenes (en el TouchFlo) o al visitar un sitio web en Opera, si se cambia la orientación de la pantalla a horizontal, cambia también la orientación de la aplicación (aunque en Opera no parece que vaya demasiado bien).
  • Incluye un puntero, que proporciona mayor precisión que los dedos en la pantalla táctil.
  • En cuanto a lo que es hablar por teléfono resulta cómodo y la calidad del sonido es mejor que en el móvil que tenía antes.
  • Se puede comprar libre, pero a un precio que deja el bolsillo un poco dolorido.

Algunas pegas:

  • Falta de compatibilidad con Linux. En modo de almacenamiento masivo si es reconocido sin problemas, pero en modo ActiveSync parece que hay dificultades (pero es reconocido).
  • El enchufe para cargador/cable de datos y auriculares no es estándar (aunque hay un cable que adapta dicho enchufe a conectores estándar).
  • La cámara no tiene flash, y no destaca mucho su calidad en ambientes oscuros.
  • Trae un plástico para proteger la pantalla, pero si se coloca mal y se despega para colocarlo bien, van a quedar zonas despegadas. Es complicado hacerse con esos plásticos (aunque no es imposible).

Datos del artículo:

Diseñar para dispositivos móviles (2ª parte)

Fecha de publicación: 2005/06/30

En el artículo anterior deje pendiente el tema de las hojas de estilo. Debido a la gran variedad de dispositivos, tamaños de pantalla, etc., es un asunto harto complejo. Pero no imposible.

En las pruebas de pantalla pequeña que he realizado en Opera no he realizado cambios en hojas de estilo, y la transformación resulta bastante bien (ver imagen).

En muchos teléfonos móviles compatibles con XHTML en principio la hoja de estilo no hará nada. Al menos en el que he utilizado para probar esto, no había compatibilidad con hojas de estilo.

Si se quiere hacer una hoja de estilo para ordenador y otra específica para un dispositivo móvil basta con introducir en el HEAD de la página el siguiente código:

<link rel="stylesheet" type="text/css" media="screen" href="pantalla_normal.css" />
<link rel="stylesheet" type="text/css" media="print" href="para_imprimir.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="para_dispositivos_moviles.css" />

Enlace relacionado: Mobile web design.

Actualizado 4 de noviembre de 2005 (el enlace relacionado).

Tags: , , , , , , , , .

Datos del artículo:

Diseñar para dispositivos móviles (1ª parte)

Fecha de publicación: 2005/06/29

Advertencia: este artículo se basa en experiencias propias, por lo que es posible que haya algun que otro error, o que algún asunto quede incompleto.

En los últimos años han surgido dispositivos móviles (PDA, Pocket PC, teléfonos móviles, etc.) con la capacidad de visualizar sitios web. En la imagen una fotografía (un poco mala) de como se ve Outbook (sin haber hecho ningún cambio) en el navegador de un teléfono móvil (concretamente un NEC e242, compatible con WML y XHTML).

Su ventaja: navegar por Internet casi en cualquier sitio. La primera desventaja: en ocasiones, sobre todo en teléfonos móviles, los navegadores son muy limitados. Y la segunda desventaja: las reducidas dimensiones de las pantallas.

Debido a esas desventajas los diseños basados en tablas o que no se ajusten a los estándares están contraindicados en el caso de que se pretenda que el sitio web se vea en este tipo de dispositivos.

Por ello la mejor alternativa es, como he insistido en otras ocasiones, la separación de presentación y contenidos. Pero aun separando presentación y contenido podemos encontrarnos con algún que otro problema de usabilidad.

¿Y a que problema me refiero? El orden en el que aparecen los textos. Supongamos que en la estructura de la página tenemos cuatro elementos, como en Outbook: encabezamiento, barra de navegación, contenido de la página y pie de página. Cada uno, en principio, debería estar formado por una capa (en el código fuente las etiquetas DIV).

Para ver en que orden quedan estos elementos debemos ver la página en un dispositivo móvil. O en un navegador, habiendose desecho previamente de la hoja de estilo. En Internet Explorer esto es complicado. Pero en Firefox o en Opera es muy sencillo. En Firefox hay que ir al menú “View” (lo pongo en inglés porque tengo los navegadores en inglés, y no estoy seguro de como sale en la versión en español), seleccionar “Page style” y marcar “no style”. En Opera hay dos formas: lo mismo que en Firefox (View > Style > User mode), o bien, la opción más adecuada, “View > Small Screen”.

El lector del sitio probablemente esté interesado en leer el contenido de la página. Pero si en el código va antes la capa de la barra de navegación que la de contenido, el lector se encontrará primero con la de navegación. Si la barra de navegación no es muy larga no supone problema. Pero cuando si lo es, si puede ser un inconveniente. En este caso creo que habría que situar antes la capa de contenido.

En cuanto al encabezamiento y el pie de página se pueden quedar al principio y al final, respectivamente.

Algo con lo que hay que llevar mucho cuidado es el código fuente. No hay que meter complicaciones, como Java, Javascript, Flash, etc. Y si se mete, al menos se deberá proporcionar una alternativa de solo texto. Y si se puede, también ha de evitarse meter mucho texto en cada página: se podría hacer incómoda su lectura e incrementar demasiado el coste de navegación para el usuario (este tipo de acceso suele ser por GPRS, que no es demasiado económico). Lo mismo para las imágenes: que ocupen pocos Kbytes y poner solo las imprescindibles.

Y para finalizar, las soluciones para evitarse estos engorros: crear versiones alternativas para dispositivos móviles, en WML o en XHTML sencillo.

Como veis, cada alternativa tiene desventajas propias.

En la web del W3C hay un documento que habla de XHTML sencillo para los dispositivos móviles. Leer documento.

Continuar hacia la segunda parte.

Modificado 2005-07-06 12:07

Tags: , , , , , , , , .

Datos del artículo:

Información del sitio