Archivo

Archive for the ‘Blackberry’ Category

Técnicas y estrategias para el diseño de sitios multi-dispositivo. (moviles)

noviembre 8, 2010 2 comentarios

Hoy en día cuando se desarrolla una aplicación web, se debe tener en cuenta que puede ser visitada desde diferentes medios.

Al diseñar un sitio multi-dispositivo, se debe considerar cuales funciones y características se van a mostrar en cada tipo de dispositivo, suponiendo que estos varían, se va a requerir alterar el formato emitido por el servidor.

Debido a que existen numerosos dispositivos y dentro de estos existen numerosas versiones (versión del OS, navegador, html, css, js), se generan numerosas combinaciones que son un dolor de cabeza para los desarrolladores Web. Hoy en día, de las principales tareas en el desarrollo de un sitio web son la detección de las capacidades del medio y la detección del medio.

La detección de medio permite la identificación  de las propiedades y características de un dispositivo, con el propósito de determinar el mejor contenido, diseño, markup o aplicación a servir hacia el dispositivo, permite a los desarrolladores identificar funciones y características como tamaño de pantalla, tipo de navegador (o versión), si soporta video y audio, nivel de soporte de CSS, HTML y JS.

Identificación de medio por Bases de datos de dispositivos.

Cuando se desarrolla sitios, tarde o temprano se necesita saber que dispositivo está usando el usuario, es inevitable, todos los dispositivos son diferentes y para ofrecer una gran experiencia móvil se necesitan conocer las capacidades específicas de cada dispositivo. Entre más refinada se necesite la segmentación de un sitio web, se necesitará hacer algo más que checar las palabras clave en las cabeceras HTTP.

Actualmente, la mejor forma para detección de dispositivos es por medio de bases de datos de dispositivos,  como DeviceAtlas o Wurfl.

Estas bases de datos pueden ayudar a conocer todas las propiedades generales del dispositivo (así como proveer ajustes más finos dentro de los grupos que se definan con capacidades específicas). Estas base de datos tienen grandes conjuntos de datos con los tamaños de pantalla.

WURFL

WURFL está basado en el concepto de familias de dispositivos. Todos los dispositivos son descendientes de un dispositivo genérico, pero pueden también descender de familias más especializadas, este mecanismo llamado ‘fall_back’, permite a los desarrolladores derivar las capacidades de un teléfono buscando las capacidades de su familia, a menos que una cierta característica sea específicamente diferente para ese teléfono. Ver post anterior sobre WURFL.

Device atlas.

Device atlas es una solución para detección de dispositivos y contiene datos de más de 6,000 dispositivos. Se utiliza por medio de un API que provee device atlas y soporta PHP, Java, .NET, Ruby y Python. Para más información visitar: http://deviceatlas.com/get-started

Identificación de propiedades de dispositivo con  media queries.

CSS-3 mejora el soporte para los CSS que son dependientes al medio, y permite seleccionar las hojas de estilo de manera más precisa utilizando los media queries.

Los media queries  se usan del lado del cliente, y son muy útiles porque  permiten que el contenido se adapte a un rango específico de dispositivos de salida sin necesidad de tener que cambiar el contenido en sí. Se pueden usar para ajustar el diseño y el estilo de una página una vez que se carga en el dispositivo.

Un media query consiste de un tipo de medio y cero o más expresiones que comprueban  las condiciones de las características particulares del medio como ancho, alto o color. Las expresiones lógicas resuelven verdaderas o falsas. Por ejemplo

<link rel=”stylesheet” media=”screen and (max-device-width: 360px)” href=”ejemplo.css” />

Esto será verdadero para tipos de medio que sean screen y que tengan como ancho máximo 360px

El resultado de la expresión es verdadero si el tipo de medio especificado en el media query cumple con el tipo de dispositivo en donde el documento está siendo visto y todas las expresiones del media query son verdaderas.

Cuando el media query es verdadero, el CSS correspondiente es aplicado siguiendo las reglas de la hoja de estilo.

Se pueden crear consultas complejas usando operadores lógicos (not, and, only), así como combinar varios media queries en una lista separada por comas, si una consulta de la lista es verdadera entonces la hoja de estilos asociada es aplicada, es el equivalente al operador “or”.

El operador not, niega el resultado de la consulta “all and (not color)” es verdadera para dispositivos monocromáticos sin importar el tipo de medio.

El operador only, esconderá las hojas de estilo para navegadores antiguos que no soporten media queries.

<link rel=”stylesheet” media=”only screen and (color)” href=”ejemplo.css” />
Esto será verdadero para tipos de medio screen y que sean de color.

Los media queries no son sensibles a las mayúsculas y los paréntesis son requeridos para las expresiones.

Un problema que tienen es que su uso es vago en dispositivos de nivel medio / bajo, por lo que se debe de utilizar Progressive enhancement (seguir leyendo) de una manera que se degrade elegantemente el sitio.

Otro problema es que los media queries solo permiten manipular el estilo y tienen poca influencia sobre lo que se descargue al dispositivo, no pueden manipular el html por lo que se debe confiar en las reglas de CSS para por ejemplo cambiar el tamaño de las imágenes para que se adapten  al dispositivo.

Estrategias para servir contenido a diferentes dispositivos.

Existen diferentes técnicas para servir contenido en pantalla, además dependiendo del medio, existen API’s que facilitan estas acciones.

Progressive enhancement (mejora progresiva).

Una técnica muy común es desarrollar primero para navegadores antiguos y móviles (con menos capacidades que los modernos o de escritorio) y usar Progressive enhancement (mejora progresiva) para servir el contenido que soporte el dispositivo. Se pueden usar media queries y javascript para lograrlo. Una buena explicación de  Progressive enhancement se puede leer en la siguiente liga. http://www.alistapart.com/articles/understandingprogressiveenhancement/

Redirección de sitio.

Otra técnica es la redirección a otro dominio (o subdominio), dependiendo del medio que se detecte se reenvía a otro URL especifico para el dispositivo. Generalmente se usa por medio de la detección del agente de usuario o alguna librería de dispositivos del lado del servidor.

Plantillas.

Otra técnica es el uso de plantillas para familias de dispositivos, se agrupan capacidades de dispositivos en familias, dependiendo de las capacidades del medio que se detecten, se identifica la familia a la que corresponde y se muestra la plantilla. Se puede utilizar media queries, javascript o alguna librería de dispositivos del lado del servidor.

Algoritmos.

Es una técnica que usa algoritmos para cambiar el contenido van adaptando el contenido de manera apropiada para cada dispositivo. Generalmente se usa javascript.

Técnicas para cuidar el  rendimiento en la detección de dispositivos.

Es importante considerar el rendimiento en las aplicaciones Web. Detectar el dispositivo o las capacidades del medio en cada página que se visite de un sitio web no se considera como buena práctica porque afecta el rendimiento de la aplicación al estar realizando la misma tarea repetitivamente, para ayudar a mejorar el rendimiento, se realiza la detección en la primer visita y en las demás accesos solo se consulta la información que se guardó.  Algunas técnicas son:

Cookies de propiedades.

Para los dispositivos que aceptan cookies, una buena técnica es crear una cookie por medio de javascript, en esta cookie se almacenan las propiedades del medio de donde se está viendo la aplicación web, como por ejemplo ancho y alto de pantalla, y además se puede almacenar sus capacidades como por ejemplo si acepta xhr, canvas, flash ó localización.
La cookie se consulta por medio de la aplicación para proveer contenido adecuado al dispositivo,  y adaptarlo. Adicionalmente se puede combinar esta información con alguna base de datos para conocer características adicionales del dispositivo en caso de que sea necesario y formatear el contenido antes de enviarlo al dispositivo.

Los pasos generales son:

  1. Crear un objeto JS donde se guarda las propiedades y características que se necesitan en la aplicación.
  2. Cifrar el objeto en una cadena JSON y guardarlo en una cookie.
  3. Para cargar los datos de la cookie se descifra la cadena JSON de nuevo en un objeto JS.

Esta técnica funciona muy bien cuando se guarda poca información.
Un problema puede ser que si el navegador de donde se consulta no acepta cookies o las tiene desactivadas no funcionará así como tampoco si tienen javascript desactivado. Esto debido a que esta técnica se basa completamente en cookies y en javascript. Una solución a este problema es combinarlo con media queries o detección del lado del servidor, para conocer si acepta javascript y cookies.

Frames / iFrames.

Esta técnica se utiliza creando dos Frames, un Frame informativo, y otro Frame que se utiliza como navegación, este frame es el que se actualiza y en donde se generan todas las peticiones. Las propiedades y características del medio se guardan en un objeto javascript en el frame informativo. Esta técnica funciona también con iframes.
Un problema de este acercamiento es que el uso de frames no es una buena práctica en algunos dispositivos, además que no son soportados (o están desactivados) por algunos navegadores.

Web Storage (Almacenamiento Web).

Para navegadores que acepten HTML5 existe una característica que se llama Web Storage que es una especificación que define una API para el almacenamiento de datos (clave-valor) en los clientes Web. Este acercamiento es muy similar al de Cookies de propiedades pero usando un objeto nativo del navegador llamado localStorage.
Una ventaja es que acepta más tamaño de almacenamiento que las cookies. La desventaja es que solo se puede usar en navegadores modernos.

Recomendaciones para el desarrollo de sitios multi-dispositivos.

La meta de una aplicación multi-dispositivos o multi-pantalla no es necesariamente que se vea idéntica en cada dispositivo, más bien que se adapte a cualquier dispositivo.

Pensando en términos de  multi-dispositivo, se debe tomar en cuenta la experiencia de usuario del dispositivo (touch, track ball, track pad, teclado, etc) y asegurarse de que los elementos clickeables sean adecuados a la forma de navegación (los botones en ambientes touch sean suficientemente grandes para pulsarse).

Pensando en términos de multi-pantalla, se debe ajustar dinámicamente a la resolución y PPI del dispositivo en el cual se está viendo, desplegando más información en pantallas grandes, y removiendo o encogiendo elementos en pantallas pequeñas.

Para que las aplicaciones funcionen en diferentes pantallas, se deben diseñar de tal manera que se dibujen a sí mismas en el momento adecuado y con las restricciones adecuadas.

Siempre se debe de programar con código bien estructurado.

Para que se cargue rápido la aplicación se debe comprimir el contenido cuando y donde sea posible.

Se debe evitar el envío de datos innecesarios.

Al agrupar dispositivos por tamaño de pantalla, se debe considerar el markup que soporta, capacidades, método de interacción y más, todo depende del tipo de sitio.

Mantener un balance entre la accesibilidad, las capacidades, experiencia de usuario, usabilidad, funcionalidad, rendimiento y ancho de banda.

Comenzando el desarrollo de web apps para Blackberry.

octubre 5, 2010 6 comentarios

Las aplicaciones web diseñadas para BlackBerry o para cualquier dispositivo móvil deben tener un balance entre la mejor experiencia de usuario posible y una vida prolongada de batería.

Se debe considerar que los dispositivos tienen una resolución de pantalla pequeña que soporta un limitado número de caracteres, el procesador y la memoria son limitados y las conexiones de red inalámbricas de red tienen un mayor tiempo de espera que una red estándar.

Una interfaz de usuario de BlackBerry debe ser diseñada en términos de que los usuarios puedan realizar tareas fácilmente y acceder a la información rápidamente, los usuarios móviles esperan encontrar la información con  poca cantidad de datos por despliegue.

Antes de diseñar una aplicación Web, es importante navegar por sitios para conocer más acerca del modelo de navegación y mejores prácticas para el diseño de interfaces y de esta manera ser consistente con los demás aplicacionesweb del modelo del dispositivo.

Las pantallas de los dispositivos BlackBerry, dependiendo del dispositivo y del tamaño de la fuente seleccionada, pueden desplegar generalmente de 12 a 18 líneas de texto con 28 a 35 caracteres cada una.

El TrackBall o trackpad es el control principal de navegación para los usuarios, los usuarios pueden mover el cursor o ejecutar una acción dando clic sobre estos controles. Por lo que es importante diseñar aplicaciones tomando en cuenta el modo de interacción.

Especificaciones de tamaño de pantalla para dispositivos BlackBerry

Modelo Blackberry. Tamaño de pantalla. Método de Interacción
BlackBerry® 7100 240 x 260 pixels trackwheel
BlackBerry® 8700 320 x 240 pixels trackwheel
BlackBerry® 8800 320 x 240 pixels trackball
BlackBerry® Bold™ 9000 480 x 320 pixels trackball
BlackBerry® Bold™ 9650 480 x 360 pixels trackpad
BlackBerry® Bold™ 9700 480 x 360 pixels trackpad
BlackBerry® Curve™ 8300, 8350i 320 x 240 pixels trackball
BlackBerry® Curve™ 8500 320 x 240 pixels trackpad
BlackBerry® Curve™ 8900 480 x 360 pixels trackball
BlackBerry® Pearl™ 8100 240 x 260 pixels trackball
BlackBerry® Pearl™ Flip 8200 240 x 320 pixels trackball
BlackBerry® Pearl™ 9100 360 x 400 pixels trackpad
BlackBerry® Storm™ 9500 360 x 480 pixels touch screen
BlackBerry® Tour™ 9600 480 x 360 pixels trackball

Tiempo de descarga y de render.

El tiempo de descarga es calculado dependiendo de tres factores: tamaño de contenido, red inalámbrica y protocolo. Para minimizar el tiempo de descarga se puede:

  • Reducir el tamaño del contenido evitando elementos innecesarios e imágenes.
  • Reducir el tamaño de imágenes tanto como sea posible.

El tiempo de interpretación de la página no afecta tanto como el tiempo de descarga, pero contenidos muy largos pueden requerir de varios segundos para interpretarse y desplegarse.

Los servicios MDS y BIS (ver mi post anterior sobre los tipos de conexiones bb), mejoran la velocidad de interpretación procesando el contenido HTML antes de enviarlo al navegador, estos servicios filtran los elementos que no son soportados y convierten el contenido en un formato que el navegador puede desplegar eficientemente.

Cookies

El navegador BlackBerry soporta cookies basadas en la RFC 2109, las cookies se guardan en el navegador, aunque el dispositivo se apague.

A partir de la versión de dispositivo 3.8, existe una propiedad  de tipo texto dentro del objeto javascript HTMLDocument que se llama “cookie”.

Cuando el navegador lee esta propiedad, regresa una lista de nombre-valor separada por punto y coma de todas las cookies que no han expirado asociadas con el documento o frame.

Cuando se establece un valor para esta propiedad, cada valor debe ser un par (nombre-valor) seguido de cero o mas atributos de la cookie, el nuevo valor y atributos reemplazan al viejo valor y sus atributos, si el valor que se especifica no tiene la sintaxis correcta de la cookie, la propiedad arroja un valor de sintaxis (SYNTAX_ERR)

El objeto HTMLDocument de javascript extiende el objeto Document y proporciona acceso a la jerarquía de HTML

A partir de la versión 4.6 existe una propiedad del objeto Navigator que se llama cookieEnabled, esta propiedad es solo de lectura y sirve para conocer si las cookies están habilitadas en el navegador.

El objeto Navigator –disponible a partir de la versión 3.8 –  provee información acerca de la versión del navegador de BlackBerry que está siendo usado, todas sus propiedades contienen información acerca de diferentes aspectos del navegador y son solo de lectura

Caché

El navegador tiene 3 diferentes tipos de caches, cada uno guarda diferente tipo de información:

Cache de contenido: Este cache, incluye la cache de datos en bruto; contiene todos los datos que son guardados como resultado de la actividad normal del navegador.

Cache de canal: Este cache contiene datos que son enviados a el dispositivo por un canal o por push.

Cache de cookie: Este cache contiene cookies que son asignadas al navegador por las páginas visitadas.

Cuando es posible, el navegador carga las peticiones desde el cache local, el navegador respeta las directivas de control de cache que los servidores Web envían en las cabeceras de respuesta tales como Expires, Max-Age y Cache-Control.

Para conocer mas se puede ver la especificación WAP-120-UACACH-20010413-a en http://www.wapforum.org (WAP Caching Model Specification)

En el dispositivo BlackBerry, el navegador guarda los caches de canal y de cookie en un almacenamiento persistente, de esta manera la información se guarda aun y cuando el dispositivo se reinicialice.

El navegador limpia un elemento del cache cuando este expira. Si un elemento no expira, el navegador limpia el contenido del cache después de 29 días.

Los usuarios también pueden limpiar el cache (los tres tipos) en el dispositivo para liberar memoria y actualizar cualquier página visitada.

En el navegador presionar:

Menu -> Options -> Cache Operations -> Seleccionar clear de la opción de cache que se quiera borrar.

En dispositivos con 8MB de memoria, el navegador limpia el contenido del cache cuando se cierra la sesión del navegador.

En dispositivos con 16 MB de memoria, el contenido del cache se guarda y el dispositivo limpia elementos del cache para liberar memoria cuando es necesario, comenzando con las páginas que ya expiraron.

Los proveedores de servicio pueden especificar el tamaño del cache en bruto. El tamaño por defecto para diferentes dispositivos es de 200KB para dispositivos con 8MB de memoria, 500KB para los de 16MB y de 2MB con los de mas de 16MB de memoria.

Los usuarios no pueden ver o cambiar estas opciones.

Mejores prácticas al conceptualizar una aplicación web:

  • Seguir un modelo de navegación estándar, tanto como sea posible, una acción particular produce un resultado esperado.
  • Enfocarse en la tarea inmediata del usuario.
  • Desplegar solo la información que el usuario necesita en cualquier momento.
  • Mostrar opciones de navegación que sean relevantes al contexto actual del usuario.
  • Diseñar aplicaciones Web que desplieguen información usando la pantalla de manera efectiva
  • Minimizar el número de veces que los usuarios necesitan dar clic en el TrackBall, trackpad o touch screen para completar una tarea.
  • Diseñar las interfaces de manera que los usuarios puedan cambiar de opinión y deshacer comandos, los usuarios algunas veces dan clic en el menú equivocado o botón accidentalmente
  • Diseñar las aplicaciones Web para dispositivos con TrackBall o trackpad

Mejores prácticas de diseño:

  • Usar un limitado número de etiquetas HTML anidadas, entre mas anidaciones de código HTML en la pantalla, más tiempo toma al dispositivo interpretar el código.
  • Tener soporte para múltiples resoluciones y tamaños de pantalla, siempre probar las aplicaciones Web en diferentes modelos de BlackBerry y diferentes tamaños de pantalla.
  • Incluir elementos de navegación básicos como regresar e inicio al comienzo  y al final de páginas largas.
  • Usar disposiciones de pantalla verticales.
  • En dispositivos touch screen, verificar que el diseño de pantalla se despliege correctamente en vertical y horizontal.
  • Incluir el titulo de la hoja o un encabezado  para describir el contenido de la pantalla.
  • Desplegar la información más importante al inicio de la pantalla.
  • Limitar el número de opciones de navegación superior  que aparezcan en la pantalla a la vez.
  • Poner todas las opciones que el usuario puede tener de navegación al final del documento.
  • Usar separadores de línea en la pantalla, para separar controles o para indicar un grupo de controles.

Pasos para entregar contenido a dispositivos específicos:

1.  Crear contenido específico para los dispositivos y los navegadores. (HTML, CSS, JS)

2.  Crear un directorio en el servidor y copiar todos los archivos necesarios ahí.

3. Escribir un código de detección de dispositivo con un lenguaje que permita acceder  y manipular las cabeceras http, específicamente que analice la cabecera “Profile” para determinar el tipo de navegador y los tipos de contenido soportados, y regrese el contenido que es apropiado para el navegador que solicita el contenido.

4. Copiar el script de detección de dispositivos al servidor.

5. Probar el contenido desde diferentes navegadores y dispositivos (usando los simuladores de BlackBerry)

Descripción de la Plataforma Blackberry para el desarrollo de aplicaciones Web

septiembre 8, 2010 4 comentarios

El navegador de BlackBerry.

BlackBerry es una plataforma basada en estándares, por lo que la mayoría de las tecnologías Web estándares son soportadas en el navegador de BlackBerry, existen limitantes por lo que hay que tomar en cuenta algunas consideraciones especiales cuando se construye un sitio orientado a BB, pero en general, el navegador BB trabaja casi como la mayoría de los navegadores.

Tipos de conexiones o Medios de transporte.

Un dispositivo BlackBerry cuenta con varias rutas de conexión (medios de transporte) para hacer una petición a un servidor web  y obtener datos. Una ruta, es el camino que utiliza una petición que realiza un dispositivo hacia un servidor y de regreso.
El navegador Web de un dispositivo BlackBerry puede acceder a un servidor por medio de una de estas conexiones:

  • Wireless Application Protocol (WAP).- Antes de los Smartphones, los dispositivos móviles contaban con limitaciones como poco poder de procesamiento, capacidades de navegación limitadas y poco ancho de banda, el protocolo de aplicaciones inalámbricas (WAP) es usado por las compañías de teléfonos para proveer servicio de Internet compatible con estas limitaciones. Este protocolo provee un subconjunto de capacidades típicas en los navegadores de escritorio, y necesita de puertas de enlace especiales que tienen los proveedores de servicios inalámbricos. WAP utiliza un reducido lenguaje de marcado llamado WML y un lenguaje script llamado WMLScript.
  • Direct TCP.- La conexión directa TCP toma una ruta desde el dispositivo BlackBerry al servidor por medio de una salida a Internet, que da el proveedor del servicio, la conexión usa un APN (Nombre de punto de acceso) para GPRS configurado en el teléfono móvil por la compañía que presta el servicio de conexión inalámbrica.
  • BlackBerry Internet Service (BIS).- Es un servicio especial para los usuarios de BlackBerry, que se usa para acceder a un sitio Web, el dispositivo va a la red del proveedor del servicio, después a la infraestructura de red de BlackBerry y por ultimo al servidor donde esta hospedado el sitio.
    Cuando se utiliza esta conexión se debe tener cuidado en cuanto a la cantidad de datos que se envían a través de BIS, porque como la conexión es por medio de la infraestructura de BlackBerry, es posible que RIM tenga restricciones en cuando a cuantos datos se puedan enviar.
  • Blackberry Mobile Data System (MDS). – Es un componente del servidor empresarial de BlackBerry (BES, BlackBerry Enterprise Server) y es una conexión extra que permite acceder de manera segura recursos internos de la red corporativa donde este el BES. La ruta que toma el dispositivo va por medio de la red del proveedor del servicio, después a la infraestructura de BlackBerry, después al BES y después al servidor destino.
  • Wi-Fi.- Cuando un punto de acceso Wi-Fi esta al alcance, un dispositivo puede hacer uso de la red Wi-Fi para la transmisión de datos en lugar de la red del proveedor del servicio, esta conexión es la más rápida para el usuario.

Para conocer más acerca de esto:

Medios de transporte en plataforma BB (video): http://www.blackberry.com/DevMediaLibrary/view.do?name=NetworkingTransports.

Tutorial: http://na.blackberry.com/eng/developers/resources/Network_Tranports_tutorial.pdf

Configuración de las conexiones del navegador Blackberry.

Tipos de navegadores BlackBerry.

En la pantalla inicial de algunos dispositivos, hay varios iconos de navegador, la diferencia que existe entre los navegadores que ejecutan esos iconos, es la ruta que toma la petición para llegar al servidor, esto, es regularmente confuso para los usuarios porque no saben cual es el que se debe de utilizar. Los iconos disponibles dependiendo del dispositivo y conexión son: Navegador de Internet, navegador Wap y Navegador BlackBerry, qué en realidad, son el mismo navegador, la diferencia entre los iconos es el medio de transporte que utilizan para acceder a un sitio Web.

  • Navegador de Internet: Usa un proveedor de servicios inalámbrico para acceder a los sitios Web usando http. dentro de las opciones de este navegador se puede utilizar uno adicional que es el Navegador Hot spot, que usa la conexión Wi-Fi del dispositivo para conectarse a una red local y tener conexión a Internet, este navegador agrega una interfaz adicional para administrar la autentificación segura a la conexión Wi-Fi.
  • Navegador WAP: Usa un proveedor de servicios WAP inalámbrico para acceder a los sitios usando WAP, este proveedor convierte páginas HTML en WML.
  • Navegador BlackBerry: Usa el servicio de conexión MDS (MDS-CS, Mobile data system connection service) para acceder a los servidores dentro de un cortafuegos corporativo. Esta opción es solo disponible cuando el dispositivo tiene activo el BES.

A partir de la versión 4.2, RIM reduce el numero de iconos en el dispositivo, el navegador BlackBerry y el navegador de Internet, se consolidan en un solo icono llamado Navegador.
En muchos dispositivos, el navegador WAP, es un icono separado, debido a los servicios que presta la compañía móvil, el icono y el nombre asociado con el navegador es definido por el proveedor del servició y el tema actual en el dispositivo, por ejemplo, el icono del navegador wap en la red de telcel se llama “ideas telcel”.

Iconos de navegador
Navegador wap llamado Ideas Telcel en los dispositivos de la red Telcel.

A partir de la versión 4.2, un usuario puede determinar la conexión para hacer las peticiones Web especificando un navegador por defecto para todas las peticiones. Si posteriormente quiere acceder un sitio usando otro medio de transporte (por ejemplo, cambiando de el Navegador de Internet al navegador Wap), debe cambiar el tipo de navegador antes de solicitar la página nueva. Para especificar un navegador por defecto, se debe abrir el navegador, presionar el botón de menú y seleccionar opciones, después seleccionar propiedades generales y ahí especificar el tipo por defecto, en caso de que el usuario no quiera tener un navegador por defecto, y solo desea usar un tipo de navegador para un sitio, entonces puede especificarlo en la opción configuración del navegador, visitar el sitio y guardarlo en favoritos, de esta manera, se guarda la dirección y el tipo de navegador para ese sitio solamente.


Para las aplicaciones Web empresariales que necesiten de un navegador en específico, una opción para asegurarse que utilice la conexión apropiada es construir un incono Web para la aplicación. Un icono Web es una aplicación Java sencilla que lanza un navegador específico para acceder a una URL específica. Muchas compañías usan este método para poner un icono de acceso rápido a su portal en la pantalla de inicio de los dispositivos.

Capacidades del Navegador BlackBerry.

En cuanto a capacidades del navegador, BlackBerry adopta muchos de los estándares del mercado, pero implementa en algunos casos solamente un subconjunto de características porque algunas no aplican al dispositivo móvil ó debido a las limitaciones en cuanto al poder del procesador y capacidad de memoria ó debido a el impacto potencial al rendimiento y/o a la vida de la batería (RIM pone especial atención al rendimiento y vida de la batería de los dispositivos).
En muchos casos RIM implementa solo una parte del estándar para un dispositivo específico y en las subsecuentes versiones van agregando más características hasta implementar completamente el estándar.

Lenguajes de marcado.

El navegador soporta los siguientes lenguajes de marcado.

  • HTML versión 4.01
  • Compact HTML (cHTML).
  • XHTML Mobile Profile (XHTML-MP) (subconjunto de XHTML 1.1).
  • WML.

Las versiones y opciones dependen de versión del software del dispositivo BlackBerry.

Si el objetivo de la aplicación Web es que corra en teléfonos móviles y en smartphones, entonces se debe usar HTML para construirla, con esto, el desarrollador solo codifica una sola vez y corre en plataformas de escritorio y móviles usando solo un lenguaje de marcado.

Framesets HTML

En las versiones de software anteriores a la 4.2, solo se puede ver un frame ala vez, cuando un usuario visita el sitio el navegador despliega un mensaje que la página contiene frames, y pregunta cual se desea ver.
En la versión 4.2 se pueden ver todos al mismo tiempo, pero no de la manera en la cual el diseño fue planeado, los frames se despliegan uno después de otro en el orden de izquierda a derecha y de arriba hacia abajo.
En la versión 4.6 funciona correctamente como un navegador de escritorio, interpreta los frames en la disposición que fue creada por el desarrollador.

Tablas HTML

Las tablas son soportadas en el navegador desde la versión 3.8, algo que se debe de tomar en cuenta al desarrollar aplicaciones con tablas para dispositivos con versiones de software anteriores de la 4.6, es que en estas versiones se permite al usuario (de echo en algunas viene por defecto) deshabilitar las tablas en las opciones del navegador.

Hojas de estilo en cascada (CSS)

Los dispositivos BlackBerry soportan el estándar de la W3C y el estándar del protocolo WAP respecto a las CSS, al igual que sucede con las tablas, en algunas versiones anteriores a la 4.6 puede ser deshabilitado el soporte de las CSS.

Javascript.

Para versiones antiguas a la versión 4.6 se soporta Javascript 1.3 y parcialmente Javascript 1.4 y 1.5 dependiendo el modelo. Con la versión 4.6 se soporta completamente Javascript 1.5.
Antes de la versión 4.6 el acceso al DOM por Javascript es solo de lectura, se pueden leer los objetos del DOM pero no puede hacer ningún cambio aparte que no es soportado el objeto XMLHttpRequest.
A partir de la Versión 4.6, RIM implemento el acceso de lectura y escritura al DOM, lo que significa que se puede usar JavaScript para manipular el contenido de la página en tiempo real, como sucede con las tablas y las CSS, aunque el navegador soporte javascript, el usuario puede deshabilitar el soporte de javascript por medio de las opciones del navegador.

Una buena práctica es solo usar javascript cuando realmente agregue un valor a la aplicación, hay que tomar en cuenta que es mejor mandar tan pocos datos a través de la red como sea posible, claro que en redes de alta velocidad de tercera generación (3G) y con procesadores mas rápidos en los dispositivos más nuevos, no se pone mucha atención a los efectos de descarga e interpretación de una página, pero, un sitio ligero siempre cargara mas rápido que uno pesado sin importar la velocidad de la red.

Java Applets, Controles Active X y Adobe Flash.

Estas tres tecnologías no son soportadas por los navegadores BlackBerry, pero en el caso particular de Adobe Flash, RIM ofrece una alternativa que es el “Plazmic Content Development Kit” que permite a los desarrolladores crear experiencias mas ricas en el navegador por medio de “Plazmic composer” que convierte SVG a archivos PME y PMB que son SVG en representación binaria, lo mas interesante es que incluye una herramienta de Flash-Plazmic que convierte contenido Flash compatible a Dispositivos BlackBerry.

Para más información acerca de Plazmic composer visitar
http://docs.blackberry.com/en/developers/deliverables/7118/Plazmic_Composer_overview_567860_11.jsp
http://docs.blackberry.com/en/developers/deliverables/7132/Plazmic_Composer_for_BlackBerry_Smartphones-4.7-US.pdf

Audio y video.

El navegador de BlackBerry puede reproducir audio y video, los formatos que son soportados depende de la versión del software del dispositivo BlackBerry y el proveedor de Internet o BES que se este utilizando. El proveedor de Internet o BES procesa los archivos y los convierte u optimiza para tocarlos en el dispositivo. En general los dispositivos pueden tocar los formatos más populares, pero es mejor revisar antes de elegir un formato en particular para la aplicación.

Para una lista completa del soporte de audio y video visitar este link:

KB05482 : http://docs.blackberry.com/en/smartphone_users/deliverables/18349/711-01774-123_Supported_Media_Types_on_BlackBerry_Smartphones.pdf

Para conocer mas acerca de las tecnologías que se puede utilizar con el navegador de BB visitar

http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry%20Browser

Se selecciona la versión del software del dispositivo y después clic en la guía que se desea consultar.

Identificación del Navegador.

Se puede configurar la Identificación de navegador (o Emulación de navegador en dispositivos antiguos) por medio de las opciones de configuración del navegador.
No se debe pensar que al cambiar la identificación del navegador se va a emular a dicho navegador, esto es incorrecto, lo que realmente se hace es cambiar la manera que el navegador se identifica a sí mismo en un servidor Web, los valores posibles para esta opción son: BlackBerry, Firefox e Internet Explorer.

Cuando cualquier navegador hace una petición a un servidor Web, se envían (junto con la petición) una serie de valores por medio de las cabeceras de petición, el servidor las puede usar para determinar cosas acerca del cliente que realiza la petición, existe una cabecera llamada USER-AGENT que identifica el agente de la aplicación (el navegador) que hace la petición.

Por defecto el navegador BlackBerry envía este valor:

BlackBerry[Numero de Modelo]/[Versión del Software del dispositivo BlackBerry]/Profile/[Perfil MIDP] Configuration/[Versión CLDC ] VendorID/[Identificador del provedor]

Numero de modelo: El numero del modelo (sólo numerico, no nombres de producto como “Bold” o “Storm”) del dispositivo.
Version del SW BlackBerry del dispositivo: La versión del software que tiene el dispositivo.
Perfil MIDP:
La versipin de MIDP (Información del perfil del dispositivo movil), la especificación MIDP fué publicada por SUN para el uso de java en dispositivos moviles y pda’s, la versión de MIDP indica que característicvas soporta el dispositivo.
Identificador del provedor: Este valor sirve para indicar la diferencia entre un dispositivo manufacturado por RIM (cuyo valor generalmente es 1) y otro fabricande bajo el programa Built In de Blackberry.

Por ejemplo el dispositivo Blackberry Bold se identifica de esta manera en una red de:

BlackBerry9700/5.0.0.344 Profile/MIDP-2.1 Configuration/CLDC-1.1 VendorID/121

Al cambiar el agente de usuario se identifica así:
FF:
Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
IE:
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727)

Estas cadenas se dividen en tres partes:
1. La bandera de compatibilidad que es usada por los browsers modernos para indicar que es compatible con un conjunto de características comunes.
2. La version del agente de usuario  (MSIE 7.0 que identifica Microsoft Internet Explorer).
3. La plataforma que identifica el sistema operativo y la versión en este caso Windows NT 5.1 indica windows XP

Algo que podría parecer raro es que Internet explorer se identifique como Mozilla, esto es por razones históricas, Netscape usaba Mozilla como su identificador y en los años 90 otros navegadores empezaron a “mentir” sobre su identificador y agregaron en su agente de usuario Mozilla para poder pasar sobre sitios en donde solo podian verse en Netscape (con Mozilla)

Muchos sitios Web usan el valor de la cabecera USER-AGENT para determinar qué contenido debe ser entregado al navegador, un sitio optimizado para un navegador móvil no se verá bien si se apaga el mecanismo para que el servidor Web pueda determinar si el agente es un dispositivo móvil, ya que cuando se detecta que es un dispositivo móvil se sabe de antemano que el dispositivo es limitado por el tamaño de pantalla, reducido en capacidades y ancho de banda. Cuando es correctamente detectado, se reducen las imágenes, se organiza el contenido de manera vertical en lugar de horizontal y se simplifica el sitio lo más posible, cuando se cambia la identificación del navegador se hace corto circuito ya que el servidor sirve el contenido para un navegador de escritorio y no se va a ver bien.

Existe una manera de saber si el agente de usuario es BlackBerry en caso de que la identificación del navegador se haya cambiado por el usuario, hay otra cabecera HTTP que se llama PROFILE el cual tiene un valor que es una URL que apunta al archivo del marco de descripción de recurso (RDF Resource Description Framework) que esta hospedado en el sitio de blackberry.net. En general, es suficiente analizar la URL para determinar el modelo y la versión del dispositivo. Si se requiere de información más detallada, la aplicación puede consultar el archivo RDF para conocer la información de configuración del dispositivo, el archivo RDF es un documento XML que describe las capacidades de software y hardware de un dispositivo móvil. RIM proporciona una liga a este archivo en las cabeceras HTTP para hacer más fácil a una aplicación Web determinar un conjunto completo de capacidades del dispositivo que hace la petición a la página.

http://www.blackberry.net/go/mobile/profiles/uaprof/%5BModelo de BlackBerry]/[Version de Software]

Por ejemplo el dispositivo Blackberry Bold manda el siguiente valor para Profile:

http://www.blackberry.net/go/mobile/profiles/uaprof/9000/4.6.0.rdf

La alianza abierta de móviles (OMA Open Mobile Alliance) ha definido estándares para el perfil de usuario de agente (UAPROF).

Si una aplicación busca el valor de la cabecera USER-AGENT y dice que es un agente corriendo Firefox o Internet Explorer, puede buscar en la cabecera PROFILE para determinar si es realmente un BlackBerry haciéndose pasar por otro navegador.

Optimización y mejores prácticas.

Para cualquier aplicación Web orientada a móviles, un desarrollador debe optimizar todo lo que se pueda dependiendo del dispositivo y el tipo de usuario que va a utilizar la aplicación, las aplicaciones diseñadas para dispositivos BlackBerry deben tener un balance entre la mejor experiencia de usuario posible y una larga duración de la batería, cuando se diseña para un dispositivo BlackBerry, se debe considerar las diferencias entre dispositivos móviles y las computadoras, los dispositivos móviles tienen las siguientes características:

  • Una pantalla más pequeña que puede desplegar un limitado numero de caracteres.
  • Menor velocidad del procesador.
  • Conexiones de red wireless con un periodo mayor de latencia (el intervalo de tiempo entre cuando una estación de red busca acceso para un canal de transmisión y cuando el acceso es autorizado o recibido, equivalente a tiempo de espera) que las LAN tradicionales.
  • Menos memoria disponible.
  • Menor periodo de vida de la batería.

La interfaz de usuario para un BlackBerry debe de ser diseñada para que los usuarios puedan desarrollar tareas fácilmente y acceder a la información de manera más rápida, antes de diseñar una aplicación, se puede analizar otras aplicaciones para aprender más acerca del modelo de navegación y las mejores prácticas para el diseño de interfaces de usuario.

Es importante poner atención en el diseño del contenido para que el usuario pueda obtener la información que está buscando de manera rápida, se debe tener el contenido breve y directo al grano, para el usuario móvil menos es más. Es preferible diseñar el contenido de manera que el usuario no tenga que usar el scroll y de alguna manera mantener la navegación, búsqueda y otros componentes auxiliares siempre a la vista.

Para dispositivos móviles la recomendación es construir las páginas en un diseño vertical en lugar de horizontal, el usuario tiene que desplazar hacia abajo para ver el contenido en la pantalla limitada que tienen estos dispositivos, una buena práctica, es no tener mas de 2 columnas para la pagina, adicionalmente una página demasiado larga puede ser incomodo para los usuarios, las páginas largas deben de separarse en múltiples páginas , se puede usar un campo de selección (<select>) para permitir al usuario escoger una porción de la página que desee ver.

En cuanto a las imágenes, es preferible usarlas lo menos que sea posible en las páginas, se deben usar solamente cuando se necesite mostrar información ó destacar información que pueda ser solo mostrada por medio de una imagen, ya que toman tiempo extra por el servidor para optimizar y transferir aparte que ocupan espacio adicional que es fundamental para pantallas pequeñas.

Las conexiones MDS y BIS automáticamente optimizan imágenes antes de mandarlas al navegador, las imágenes son convertidas a un limitado conjunto de formatos de imagen, y cambian el tamaño para ajustarlas a la resolución de la pantalla de los navegadores y optimizadas para transmitirlas lo mas rápido posible. Aún con estas optimizaciones toma tiempo el interpretado de las páginas.
Se debe evitar imágenes que contengan texto ya que cuando se usa una conexión MDS el servidor toma como parámetro el atributo width de la etiqueta img ignorando el alto de la imagen y escala la imagen a un ancho especifico manteniendo la misma relación de aspecto, por lo que el texto se arruga y puede convertirse en ilegible.

Respecto a las tablas, las tablas en los navegadores BB pueden ser problemáticas, en dispositivos anteriores a la versión 4.5 son deshabilitadas por defecto en el navegador, otro problema es que no se interpretan correctamente, cuando se usa una tabla amplia en una pantalla pequeña, el navegador ajusta el contenido cuando llega al lado derecho de la pantalla, por lo que en una configuración por columna, cada celda de renglón en lugar de acomodarse horizontal se acomoda vertical por lo que se pierde el contexto y no se puede apreciar cuales celdas son de cada columna, para solucionar esto se puede usar una técnica que utiliza la regla horizontal (<HR/>) como separador para minimizar el uso de tablas. Para versiones anteriores a la 4.6 no hay problema con las tablas estas se interpretan correctamente en el navegador.

En cuanto a las hojas de estilo, para versiones anteriores a la 4.5 incluyéndola, las CSS están deshabilitadas por defecto en las posteriores no hay problema. Aunque hay que tener cuidado en su uso por agrega trafico de red y consume vida de batería, y toma tiempo adicional para cargarse e interpretarse en el navegador, hay que tener cuidado que la hoja de estilos se usen completamente y no tener hojas de estilo asociadas a navegadores de escritorio.

En cuanto a javascript, el soporte viene desde la versión 3.8, pero de nuevo hay que tener cuidado, porque puede estar deshabilitado. Para conocer si javascript esta habilitado en el dispositivo se puede buscar en la cabecera HTTP_ACCEPT la cadena “application/x-javascript” en su contenido, si la cadena existe, entonces javascript está disponible en el navegador.
A partir de la versión 4.2.1, en las opciones de configuración del navegador existe una que permite al navegador preguntar cuando desee habilitar javascript. Y funciona cuando la aplicación va a ejecutar alguna función, por ejemplo:

<script type="text/javascript">
document.write ("JavaScript está disponible");
</script>
<noscript>
JavaScript está deshabilitado
<a href="javascript:void()">habilitarlo</a>
</noscript>

Cuando el usuario no tiene habilitado javascript al hacer clic en la liga aparecerá una caja de dialogo preguntando al usuario si quiere habilitar el uso de javascript, si el usuario acepta entonces la pagina se recarga con la opción habilitada (solo esa sesión). AJAX es soportado a partir de la versión 4.6

Para conocer mas acerca de las tecnologías que se puede utilizar con el navegador de BB visitar
http://docs.blackberry.com/en/developers/subcategories/?userType=21&category=BlackBerry%20Browser

Se selecciona la versión del software del dispositivo y después clic en la guía que se desea consultar.

Detección del navegador de BB

La detección del navegador debe hacerse del lado del servidor nunca en el dispositivo una razón es que cuando se hace la detección del lado del cliente se realiza por medio de javascript, si el usuario tiene deshabilitado el js entonces no podrá detectarse, otra razón es que cuando se hace del lado del dispositivo, mucho contenido extra es enviado al navegador pero nunca usado, por lo que ese código nunca debió de haber sido transmitido al dispositivo.

Probar y Depurar Aplicaciones Web.

Después de codificar una aplicación Web, se debe de probar en cada uno de los navegadores que van a acceder a la aplicación. Una de las formas mas fáciles de probar y depurar una aplicación móvil es viéndola directamente de los dispositivos, usando este método los desarrolladores pueden validar fácilmente el diseño y formato de la aplicación directamente de los dispositivos, también es fácil de determinar si el rendimiento de la aplicación es adecuado para los usuarios, se conoce si las páginas cargan rápido y cuales páginas tardan toman un tiempo para bajarse e interpretarse además de que se puede entender cual es la experiencia de usuario. El problema de este enfoque es que se debe tener acceso a cada dispositivo que se tiene pensado van a utilizar los usuarios del sitio y cada dispositivo debe tener un plan de datos así el navegador va a poder acceder al sitio.

Otra forma de probar la aplicación es por medio de compañías que proveen acceso a dispositivos reales para pruebas en caso de que no se tenga acceso a algún dispositivo en específico en donde se necesite probar la aplicación algunos ejemplos de estas compañías son:

En estos sitios se pueden seleccionar cientos de dispositivos móviles que tienen disponibles en línea, con estos sitios no se tiene que tener el dispositivo físico para probar porque se accede a el por medio de una interfaz Web.

Simuladores BlackBerry

Otra manera de probar aplicaciones es por medio de simuladores BlackBerry, que son una representación casi exacta de los dispositivos. Los simuladores BlackBerry son gratis para descargar desde el sitio de desarrolladores de RIM y se pueden conseguir de todos los modelos, además que de pueden instalar diferentes versiones del software de los dispositivos con los que se pueden probar un solo dispositivo con diferentes versiones de SW. Los simuladores se descargan de la sección de herramientas del sitio de BB:

http://na.blackberry.com/eng/developers/resources/simulators.jsp

Una ventaja de los simuladores de BB es que no necesitan un plan de datos ya que usan la conexión de la computadora en donde están instalados para acceder a las aplicaciones, pero esto también es una limitación, porque el simulador no puede realizar conexiones directas a los recursos de la red; BlackBerry también ofrece un simulador MDS independiente para instalar junto con el simulador del dispositivo (The BB Mobile Data System). Cuando se utilizan los simuladores en conjunto con el simulador MDS se debe tomar en cuenta que:

  • El simulador MDS debe de correr en la misma computadora donde se corre el simulador del dispositivo.
  • El simulador MDS debe arrancar antes que el simulador del dispositivo.
  • Solo un simulador de dispositivo se puede correr en una PC a la vez, los simuladores usan el mismo puerto para comunicarse con el simulador MDS por lo que se recibe un error cuando un segundo simulador se corre.
  • El servidor Web de la aplicación debe de ser accesible por la red por el sistema que corre el simulador MDS.

Después de considerar estos pasos solo se debe de:

  • Correr el simulador MDS
  • Correr el simulador del dispositivo en el que se quiere probar
  • Abrir el navegador en el simulador del dispositivo
  • Escribir la URL donde se encuentra la aplicación
  • Probar, hacer los cambios que correspondan y volver a probar

RIM también ofrece herramientas para poder probar aplicaciones por medio de ambientes de desarrollo, Hay un plugin para Microsoft Visual Studio y un plugin para Eclipse. Estas herramientas, permiten construir aplicaciones Web, probarlas y depurarlas, rápidamente con un simulador integrado del dispositivo BlackBerry. Con estas herramientas es posible:

  • Correr el simulador del dispositivo y el simulador MDS directamente del ambiente de desarrollo.
  • Poner, quitar y deshabilitar puntos de interrupción en el código javascript que se ejecute en el navegador de BlackBerry.
  • Agregar visores de variables para conocer su valor mientras corre la aplicación.
  • Ver las peticiones y respuestas del objeto XMLHttpRequest y ver la información de las cabeceras.

Se pueden descargar los plugin de las siguientes ligas.

http://na.blackberry.com/eng/developers/browserdev/devtoolsdownloads.jsp
http://na.blackberry.com/eng/developers/browserdev/eclipseplugin.jsp

BlackBerry 6.

El navegador de la nueva plataforma soporta webkit y html5 por lo que es más fácil desarrollar mejores experiencias de usuario, el nuevo navegador soporta geolocalización, almacenamiento y workers además de css3 y otras características.
Para conocer más información sobre esto visitar:

Tips de accesos directos en el navegador muy útiles a la hora de probar aplicaciones web.

  • Para cambiar el tipo de vista (por columna o por página) presionar la tecla Z.
  • Para hacer acercamiento, presionar la tecla I.
  • Para alejar, presionar la tecla O.
  • Para ir a una página específica, presionar la tecla G.
  • Para ir a la página de inicio, presionar la tecla H.
  • Para cambiar el soporte de Javascript, presionar la tecla J.
  • Para mostrar la lista de favoritos, presionar la tecla K.
  • Para agregar un favorito, presionar la tecla A.
  • Para ver el historial, presionar la tecla Y.
  • Para refrescar la página, presionar la tecla R.
  • Para ver o enviar un link posicionarse en el link y presionar la tecla L.
  • Para ver la dirección de la página Web, presionar la tecla P.
  • Para esconder y mostrar el banner superior, presionar la tecla U.
  • Para abrir las opciones del navegador, presionar la tecla S.
  • Para mover hacia el principio una pantalla, presionar la tecla Shift y la tecla espacio.
  • Para mover hacia abajo una pantalla, presionar la tecla espacio.
  • Para moverse hasta el principio de una página, presionar la tecla T.
  • Para moverse hasta el final de una página, presionar la tecla B.
  • Y por último el mejor , para ver el código fuente de una página presionar alt y después en secuencia rbvs (rim blacberry view source).

Recursos adicionales:

Principios de diseño para dispositivos Blackberry
http://docs.blackberry.com/en/developers/deliverables/6625/Design_principles_for_BB_devices_2_0_545792_11.jsp

Documento para diseñar interfaces de usuario.
http://docs.blackberry.com/en/developers/deliverables/6622/BlackBerry_Smartphones-US.pdf

Sitio para desarrolladores
http://na.blackberry.com/eng/developers/

Mejores prácticas para aplicaciones Web móviles http://www.w3.org/TR/mwabp/

Mejores prácticas para Web móviles 1.0 http://www.w3.org/TR/mobile-bp/

http://www.detectmobilebrowsers.mobi/

http://mobithinking.com

http://mobiforge.com/

WURFL (Wireless Universal Resource FiLe) y Tera-WURFL para detección de capacidades de dispositivos móviles

A %d blogueros les gusta esto: