jueves, 16 de abril de 2009

Contenido Web para Dispositivos Móviles

¿Qué deberiamos tener en cuenta para mostrar contenido web en dispositivos móviles?

Sobre el lenguaje de marcas a utilizar: "XHTML Basic 1.1" o "HTML 4.01 Strict"


Actualmente la última versión de HTML es la 4.01 (las últimas recomendaciones se publicaron el 24 de diciembre de 1999), después se definió "XHTML 1.0" que es compatible con HTML 4.01 pero además cumple con las especificaciones del lenguaje XML.

Algunos años atras la opción hubiera sido utilizar "XHTML MP (mobile profile)" que fue definido como estándar al salir la versión "WAP 2.0"  y que es soportado por los dispositivos móviles desde el año 2004.  Sin embargo, actualmente la gran mayoría de dispositivos también soporta "HTML" por lo que un desarrollo usando páginas html no debería ocasionar problemas.

Para minimizar los problemas al desarrollar las página es aconsejable seguir las reglas de programación de XHTML y que también pueden ser implementadas usando HTML.

Entre las reglas más importantes están:

  • Los nombres de los Elementos y Atributos deben ir en minúsculas

  • Todos los valores de los atributos deben ir entre comillas dobles (")

  • Todos los elementos deben tener etiquetas de cierre (incluso los elementos vacios).

  • Los elementos anidados se deben abrir y cerrar en el orden correcto.

  • Colocar el encabezado y correcto a todas las páginas (DOCTYPE, cache-control,  content-type)


image

Otras recomendaciones

  • Usar la codificación de caracteres UTF-8

  • Usar hojas de estilo (stylesheets) para controlar la presentación de las páginas (CSS1).

  • Crear las páginas para que puedan ser leidas sin las hojas de estilo.

  • Usar los formatos de imagen JPEG y GIF


Como probar las páginas desarrolladas

image image image image

Sobre los dispositivos a utilizar: Dispositivos Móviles



  • El tamaño de las pantalla

    • En base a la cantidad de pixeles de ancho se pueden establecer 4 tamaños de pantalla (128 pixeles, 176 pixeles, 240 pixeles y 320 pixeles)

    • Se recomienda que para ver una página sólo sea necesario desplazarse verticalmente y no de manera horizontal (scrolling).

    • Proveer de una barra de navegación al incio de la página, si la página es muy extensa se recomienda copiar la barra de navegación al final de la página.

    • La posición de la barra de navegación siempre debe ser la misma.

    • La descripción de los enlaces debe ser corta y precisa.



  • El teclado limitado

    • Definir un URL corto.  Ejemplo: http//movil.univ.com

    • Se recomienda hacer uso de listas de navegación, estas listas no deben de tener mas de 9 elementos.

    • Mediante el uso del atributo "accesskey" y asignandole un valor entre 1 y 9 se puede acceder a un enlace pulsando el número correspondiente en el teclado



  • La velocidad del procesador

    • No se debe hacer uso de lenguajes de scripts del lado del cliente (evitar en lo posible el uso de javascript)



  • La memoria del dispositivo

    • Limitar el tamaño máximo de las páginas.

    • Las páginas deben ser pequeñas en tamaño pero a la vez lo suficientemente grande para mostrar información relevante y evitar nuevas solicitudes de páginas para completar la información.



  • El ancho de banda disponible y su costo

    • Reducir el tamaño de las páginas y la cantidad de imágenes que se van a utilizar

    • Usar imágenes sólo cuando sea necesario.

    • Evitar el uso de ventanas pop-ups, recargas automáticas de páginas y redireccionamientos.

    • Limitar el contenido de las páginas a lo que el usuario espera encontrar (evitar colocar informacíón adicional no relacionada al tema principal de la página)



  • La variedad de exploradores web incluidos en los dispositivos móvil

    • Evitar el uso de Frames.

    • Evitar el uso de tablas (tables).

    • Incluir un texto descriptivo para todas las imágenes.






Fuentes:

lunes, 6 de abril de 2009

Puntos que consideraría para el rediseño de un Site

Me pidieron que presentará una idea o propuesta de como cambiaría el diseño de un site.  Este site tiene mucho tiempo sin cambiar su diseño (mas de 4 años).

Como no sabía como empezar, porque era la primera vez que me pedían un trabajo parecido, empecé haciendo una lista de los puntos que debia tomar en cuenta, esta es la lista:

 

Sobre Internet

  1. Internet es diferente al resto de medios masivos de comunicación. Internet no es un medio masivo de comunicación
  2. Internet trata de reproducir la realidad (conversaciones, interacciones, opiniones, noticias, etc.)
  3. No se debe tratar de reproducir el contenido de una revista o un folleto, el contenido de la página web (Internet) debe tratar de reproducir la realidad.

Sobre los participantes de Internet

  1. Se pueden clasificar 3 tipos de participantes de Internet
    • Los que crean contenido
    • Los que participan en base al contenido creado por otros (creando más contenido)
    • Los que observan (leen) el contenido creado por los demás.
  2. Los participantes desean tener un cierto grado de control cuando navegan en internet (el control normalmente se da si el participante tiene la opción de expresar una opinión)
  3. Las personas desean comunicarse con otras personas.  Las noticias, informes, etc que aparecen en internet deben ser contadas por personas

Sobre el tipo de contenido

  1. El contenido ser publicado teniendo en cuenta a quien va a ir dirigido (alumnos, graduados, padres, publico en general.
  2. El contenido debe ser expresado de manera natural (es mucho mas agradable leer una historia que una lista de hechos)

Sobre la distribución del contenido dentro del site

  1. Debe existir un espacio para la información institucional (la misma que aparece en revistas y folletos y que no permite una interacción con participante)
  2. Debe existir una espacio en el que se presente la información de acuerdo al quien va dirigido, este espacio debe estar diseñado de manera que permite la participación.
  3. Debe existir un espacio en que el principal contenido sea el creado por las opiniones de los participantes.

Más adelante agregaré mas información.