Ir al Flickr de Pablo Angeletti
Sígueme en Twitter: twitter.com/angeletti
Mis favoritos en delicious.com/angelettiMi perfil en FacebookVideos y favoritos en YoutubeContactos Profesionales y currículum en linkedinSubscríbete al blog por RSS

Diseño de landing page móvil para UNICEF

Página de inicio de UNICEF SAHELNOW

Página de inicio de UNICEF SAHELNOW

La landing page para móviles fué un encargo de UNICEF España en que había que diseñar una sencilla landing para móviles a la que se se accedería desde unos códigos QR publicitados en los distintos eventos organizados por UNICEF. La landing page se puso en marcha en el evento Red Innova 2012 celebrado el 14 de Junio en Madrid.

El desarrollo se hizo en HTML5 y con la pasarela de pago de Paypal en modo móvil, minimizando los pasos a seguir por el usuarios para aumentar el número de acciones finalizadas.

El proceso lo componen 3 sencillos pasos:

  • Elección de la cantidad a donar mediante botones con cifras prefijadas o un campo para incluir la cifra.
  • Acción para empezar el proceso de pago en la web de PAYPAL.
  • Página de agradecimiento y posibilidad de suscripción a boletín de noticias de UNICEF.
  • Panel de control para control de donaciones y alta en newsletter.

Al acceder a la página para móviles desde un dispositivo de escritorio, se muestra el diseño encajado en  un marco gráfico simulando un teléfono móvil para que el diseño no desentone.

La landing page se puede visitar en la dirección: m.unicef.es/sahel

Botónes con cifras prefijadas o campo para indicar la cantidad a donar

Botónes con cifras prefijadas o campo para indicar la cantidad a donar

Landing Page móvil vista desde un navegador de escritorio

Landing Page móvil vista desde un navegador de escritorio

Wireframe de las páginas de la landing. Se eliminaron algunos pasos

Wireframe de las páginas de la landing. Se eliminaron algunos pasos

Procesos simples y sencillos, que es lo que los móviles piden

 

Hibridpublication. Visor de catálogos vía web compatible con dispostivos móviles: iPhone, iPads, Android…

Hay muchos servicios que permiten publicar tus pdfs para visualizarlos online con efecto “Flip Page”, pero la mayoría de ellos, al funcionar con Flash, no podremos usarlos desde un dispositivo móvil.

Una de las plataformas más completas y atractivas que he encontrado es Hibridpublication, ya sea por todas las opciones de gestión y flexibilidad de precios que ofrecen como lo más importante con el boom de los dispositivos móviles:  las publicaciones se puede ver en iPad, iPhone o Android. La descubrí de casualidad al hacer click en un email de Phonehouse y me sorprendió lo completa que es la plataforma (para que digan que los emails están muertos :)

La plataforma dispone de multitud de opciones: generación de QR para descarga directa, compartir en redes sociales, analítica de accesos, etc…

En  este enlace podéis ver un ejemplo de publicación y como se ve correctamente desde cualquier dispositivo: http://lib.hpublication.com/publication/demo/

No hay nada más inútil que un servicio que sirva para leer documentos y que a día de hoy no se pueda leer en un iPad, iPhone o teléfono Android. Incluso ISSUU, un veterano en este tipo de servicios, está preparando una versión compatible.

Podéis ver más información sobre el servicio y precios de  Hibridpublication en www.hpublication.com

Convierte tu iPhone en una cámara compacta con la funda Bitplay SNAP

Si eres de los que piensa que “la mejor cámara es la que llevas encima” y no puedes resistirte a “instagramear” cada escena que se planta delante de tu ojos, esta funda es para tí :)

Ponerle la funda Bitplay SNAP a tu iPhone es el último paso para que sientas una auténtica cámara en tus manos:

  • Botón de disparo real
  • Empuñadura
  • Rosca para trípode
  • 3 Colores: blanca, negra y playa y negro total

Si tuviera mi iPhone4 ni me lo pensaría. De hecho estoy esperando no sea que saquen el 5.. que eso si que me daría rabia

Enlace:
Funda Snap para iphone4/s Blanca en Amazon

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:

 

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

Hogueras San Juan Alicante 2011

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 packWPtap 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.

Hogueras San Juan Alicante 2011

Hogueras San Juan Alicante 2011

Hogueras San Juan Alicante 2011

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
Hogueras San Juan Alicante 2011

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

Hogueras San Juan Alicante 2011

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

Powered by Wordpress | +Pablo Angeletti
Optimization WordPress Plugins & Solutions by W3 EDGE