Guía de diseño para Android y otros recursos sobre desarrollo

En la página oficial de Android han publicado una guía de diseño de aplicaciones para Android muy completa: Android Design

• Principios de diseño para Android
• Diseño UI
• Patrones de diseño
• Tipografía (pobre comparándola con el ipad o iphone)
• Barras de navegación
• Diseño de iconos
• Resoluciones
• Tamaños mínimos a la hora de diseñar botones
• Tabs
• Listados
• Scrolls

Así como enlaces a la documentación del SDK, tutoriales, etc… Buen punto de partida a la hora de diseñar y crear aplicaciones para Android.

Cómo usamos nuestras tablets

Sencilla infografía sobre el uso que le damos a las tablets, número de usuarios, etc… How we use our tablets (Infographic)

Cómo testear aplicaciones para móviles sin arruinarte :)

Tanto si desarrollas webapps como aplicaciones nativas para móviles, necesitas testearlas en el mayor número de dispositivos. En este post, Brad Frost reune conesejos y recursos para no perdernos entre tantos dispositivos: Test on Real Mobile Devices without Breaking the Bank

De postre, Resources to Hack Design

Post de Jamie Davidson (jamie-davidson.com) con muchos recursos sobre diseño web, css3, layouts, patrones de diseño, tipografía en el diseño web, iconos y bancos de imágenes, galerías, tutoriales: Resources to Hack Design

Con esto creo que tenéis para ir tirando el fin de semana :)

Los móviles prometen ser los reyes del 2012

Si el 2011 fue el año de la explosión social, este año promete ser la confirmación del móvil como principal dispositivo de acceso a la web, mano a mano con los ordenadores de escritorio.

Mientras que muchos usuarios son rehacios o no se atreven a instalar un simple programa en su ordenador “Oye..como me instalo eso..”, “me va a entrar un virus si me pongo esto otro?..”, otros han encontrado en el móvil un aparato que no les impone ninguna barrera, fácil de manejar y con miles de aplicaciones y juegos gratis o a precios ridículos. Esa facilidad de uso unido a la ubiquidad y movilidad de los smartphones han conseguido que no echemos de menos el ordenador. Sólo hay que ver las estadísticas del artículo de gigaom.com en que dan algunas cifras de acceso desde dispositivos móviles y se comple la tendencia de crecimiento de los dispositivos móviles (smartphones, tablets, etc..) como principal vía de acceso de los usuarios: “It’s becoming a mobile-first world”

Todos los dispositivos móviles suman un 54% de acceso

55% de acceso desde móviles a twitter y un 33% a Facebook

¿Que podemos hacer ante esta tendencia? Lo primero, mirar las estadísticas de acceso a tu web:

• ¿Se cumple esta tendencia en mi sector?
• El contenido que hay publicado, ¿se puede ver desde un dispositivo móvil? (adios adobe flash adiooooos)

Puede ser que todo esto no se refleje en tus estadísticas, o  ”para cuatro gatos que acceden a la web desde móvil no merece la pena el esfuerzo”, pero piénsalo mejor. Levanta la vista y fíjate en el entorno, en toda esa gente mirando un aparatito que emite luz entre sus manos y que al realizar una búsqueda, lo hacen con ese aparato. Cuando les envían un enlace por email, lo abren en ese aparato. Cuando ven una dirección en el periódico (los pocos que lo siguen leyendo), lo consultan en ese dispositivo.

La situación está cambiando y no va a parar. Paseáte por las grandes superficies, vete a la zona de smartphonesy tablets. Fíjate en el perfil de clientes, de que hablan, cotillea leñe!: una señora comprándole un ipad a su padre anciano para que pueda leer el periódico en frances todos los días, unos padres comprándole un smartphone a su hijo para accede a tuenti por sacar buenas notas, una señora que lo quiere para enviar todos los mensajes que quiera a su hijo por whatsup… No son cuatro gatos.. son todos!

Ahora vuelve a mirar tu web y piensa si se ajusta a lo que toda esa gente va estar usando.

Enlaces:

• Gigaom.com: It’s becoming a mobile-first world
  Vía  ”Internet ya es un espacio móvil, no es un vaticinio, lo es desde la Navidad recién pasada” de Eduardo Arriagada 
• Meeker Says Majority Of Pandora’s And Twitter’s Traffic Is Mobile; Square Transactions Grew 20,000%

Prototipo de smarphone por Mozilla

Aunque es muy bonito para ser verdad, han cogido muchas cosas interesantes y las han unido en un teléfono: proyector, teclados virtuales, la mesa como touchpad, etc…

Un detalle que comentan el artículo es la utilización de Android en el prototipo de Mozilla. Conscientes de la fragementación del mercado de mercado móvil (iPhone, Android, Symbian, mango, etc…). Teniendo en cuenta que Adobe ha cerrado su App Market, va quedando más claro en que plataformas focalizarse

Fuente: Mozilla’s Making a Cellphone OS Based on Android

Realidad Aumentada: Presente, pasado y futuro

En TNW (The Next Web) han publicado un artículo bastante completo sobre casos y usos de Realidad Aumentada: Augmented Reality: The past, present and future
Algunas aplicaciones son sorprendentes:
Blippar.

Trylive de T-inmersion:

Aplicación en el tratamiento de fobias:

Augmented Reality Pop-up Book for iPad 2 & iPhone 4 by Helen Papagiannis, May 2011 from Augmented Stories on Vimeo.

Un artículo muy completo para añadir a favoritos: Augmented Reality: The past, present and future

WebApp movil para las Hogueras de San Juan de Alicante

Hace unos meses publiqué un pequeño post sobre la webapp para fallas que desarrollamos para el Portal de Turismo de la Comunitat Valenciana. Ahora le toca el turno a su proyecto gemelo: la Guía Móvil para las Hogueras de Alicante (hogueras.comunitatvalenciana.com)

Para las Fallas de valencia estaba previsto una versión de la guía adaptada para Facebook que al final, por tiempos, tuvimos que recortar en el proyecto final. Aprovechando que ya teníamos mucho trabajo hecho para las fallas, hemos podido meter una pequeña aplicación para facebook de la guía.

Como las dos guías (la de hogueras y la de fallas) comparten muchas características, esto es lo que publiqué en el anterior post:

¿que información le resultará útil a alguien en la calle, en las Hogueras de Alicante y con un smartphone en la mano?

• Información sobre las Hogueras de Alicante (información general, consejos, etc…).
• Listar las Hogueras con su localización usando mapas (Google Maps en este caso).
• Agenda de eventos geolocalizada.
• Poder verse de forma optimizada desde un iPhone/Android/Smartphone.

La información debía ser útil tanto a turistas como a la gente de Alicante. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà”

Y la parte técnica:

Con los elementos sobre la mesa (requisitos técnicos, elementos a incluir, interfaz, etc..) podemos tomar decisiones sobre las herramientas y tecnología a utilizar:

• WordPress como CMS por la agilidad a la hora de gestionar contenidos y el amplio ecosistema de utilidades y plugins para el uso con móviles.
• jQuery Mobile como framework javascript para la adaptación del interfaz para móviles.
• Google maps para la geolocalización de las hogueras y eventos.

Usar WordPress nos da  acceso a una inmensa cantidad de plugins con los que poder dar salida a cada necesidad de la webapp. De todos lo que utilizamos, estos son los más importantes:

• Mobile pack o WPtap Mobile Detector. para asignar el theme movil cuando se acceda desde móvil
• GeoMashup. Para la implementación de Google Maps a las fichas
• Magic Fields. Para la personalización de campos en las fichas de las hogueras y agenda
• qTranslate. Para gestionar los idiomas (castellano e inglés) qTranslate no me gusta usarlo en proyectos en el que importe el seo, pero en este proyecto era algo secundario.
• Theme Test Drive. Para mostrar de forma pública un theme y en el simulador una versión móvil adaptada para escritorio o facebook.

Con todo esto tenemos la versión optimizada para móviles, pero ¿y la versión de Facebook?.
Para crear la app que actualmente está funcionando como pestaña en la web de la Comunitat Valenciana, los pasos serían los siguientes:

• Crear una app nueva en Facebook
• Diseñar un theme nuevo para WordPress ya que va funcionar con la misma configuración a nivel permalinks, nombre de las páginas, etc…
• Usar el selector de theme “theme test drive” para utilizar uno u otro en base al diseño a mostrar: facebook, escritorio, movil, etc…
• Optimizar el diseño para que los contenidos se muestren correctamente en un ancho de 520px y siguiendo las pautas de diseño para pestañas en Facebook

App en Facebook funcionando en la pestaña de la Comunitat Valenciana

Ejemplo de ficha de Hoguera en Facebook

En otro post explicaré más a fondo los pasos para crear la app y usar los contenidos de WordPress.

Las fotos de que hay publicadas son las del día de la plantà y muchas de ellas no estaban terminadas o se ven gruas y camiones. En la versión que hicimos para las fallas sólo se mostraba una foto pero para la versión de hogueras tuvimos que hacer cambios para mostrar más fotos por ficha.

Podéis ver las fotos de las hogueras de categoría especial que hemos hecho para la web app de hogueras en mi cuenta de flickr. Las hice en 3 horas contrareloj para que tenerlas disponibles al día siguiente de la plantà.

Set en Flickr de las fotos para la web app

Set en Flickr Hogueras Alicante 2011

Podéis acceder a la web y los distintos enlaces (QR, página en Facebook, etc..) en el subdominio hogueras.comunitatvalenciana.com