Webinar impartido por David Maniega en SocialBiblio el 18 de junio de 2014

1. Biblioapps o cómo crear aplicaciones
móviles para la biblioteca
David Maniega Legarda
CTO de Icalia Solutions
18 JUNIO 2014

2. 18 de Junio de 2014
David Maniega Legarda
CTO de ICAlia Solutions
david.maniega@icalia.es dmaniega
www.icalia.com

3. De qué va a ir esto
• Contexto en el que nos movemos
• Cómo llevar mis contenidos a móvil:
• Web adaptativa o Responsive web
• Webapps
• Apps híbridas
• Apps nativas
• Pautas para la creación de una app
• #biblioapps o cómo aplicarlo en bibliotecas

4. http://madrid.theappdate.com/informe-apps-2013
Nomofobia en España

5. Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013

6. Principales usos de los móviles

7. Dispositivos y su contexto

8. Uso de apps vs browsing

9. 90’s --------------- 640 x 480 px
2000 -------------- 800 x 600 px
2005 -------------- 1024 x 768 px
¿Cómo era la web?

10. ¿y qué sucede ahora?

12. Web móvil o App nativa

13. Mobile optimization best practices book
Aclaremos algunos conceptos

14. Responsive Web Design

15. Minnesota University - Libraries

16. Minnesota University - Libraries

17. “Una manera de presentar nuestro
contenido sin saber en qué
dispositivo va a verse.”
Ethan Marcotte

18. Pero… ¿qué es exactamente?
Un diseño sensible al contexto en el
que se visualiza (viewport).

19. Ventajas
• Menos coste de mantenimiento (1 site)
• Mejor SEO y usabilidad
• Reutilización en diversos dispositivos
• Opciones de elementos enriquecidos
• Menor peso / mayor tasa transferencia

20. Inconvenientes
• Supone complejidad técnica (novedoso)
• No hay mucha gente especializada
• Curva de aprendizaje amplia
• Costes de migración
• Incompatiblidad de algunos navegadores

21. Consejos
• Diseña en pequeño, piensa en móvil primero
• Prioriza lo importante primero
• Contenido (clave)
• Navegación (auxiliar - Flyout)
• Legibilidad (mínimo 16px)
• Si optas por eliminar algo para la versión móvil,
simplemente elimínalo de todas partes
• No tengas miedo al scroll móvil

22. Frameworks de desarrollo
http://responsive.vermilion.com/compare.php
Responsive CSS Framework Comparison
http://getbootstrap.com/
http://foundation.zurb.com/
http://www.getskeleton.com/

23. http://www.responsinator.com/
RWD Testing: Responsinator

24. http://www.iammobile.co.uk/
RWD Testing: I am Mobile

25. El dilema: Web móvil vs App

26. El dilema: Web móvil vs App

27. Responsive, Híbrida o Nativa

28. App híbrida
http://blog.brightcove.com/

29. Creación de una App

30. Pasos previos
1. Tener una idea clara…, de verdad
2. Rodéate de un buen equipo
3. Conoce el ecosistema lo máximo posible
4. ¿Android, iOS, Windows Phone…?
5. Interfaz amigable y funcionalidad clara
6. Contenido adaptado, ¡no es una web!
7. Plan de difusión, promociónala

31. Proceso de creación
Estrategia Usabilidad Calidad
Idea
Validación
Presupuesto
Audiencia
Correcciones
Mejoras
Diseño
Desarrollo
Contenidos
Testing

32. Diseño UI/UX
• Capacidad que
tiene tu diseño
para conectar con
las emociones del
usuario.
http://www.studioaum.in/service_ux.html

33. Diseño UI/UX
http://goo.gl/cRxpIz

34. Diseño UI/UX
Análisis de requisitos
Diseño conceptual
Prototipado, mockups
Diseño e implementación
Evaluación y métricas

35. Consejos fundamentales
• Fácil de usar, cumple su objetivo y punto
• Eficiente, no más de 3 pasos para una tarea
• Memorable, fomentar capacidad de recuerdo
• Gestión de avisos al usuario
• Consistencia = no cambies las reglas del juego
ni visual ni funcional
• Implementa mejoras, no te rindas
• Originalidad (contenido y diseño)

36. ¿Qué sistema operativo?

37. Para tomar una decisión…

38. Frameworks para apps híbridas
http://www.sencha.com/ http://phonegap.com/
http://www.appcelerator.com/titanium/
http://jquerymobile.com/
Top 7 Mobile Application HTML5 Framework
http://www.gajotres.net/top-7-mobile-application-html5-frameworks/

39. Frameworks para apps nativas
http://developer.android.com/
sdk/installing/studio.html https://developer.apple.com/xcode/
http://www.microsoft.com/es-
es/download/details.aspx?id=35471

40. Y si no sabes programar…

41. App Builders, crea tu app fácil
• Uso sencillo, intuitivo, sin programar
• Diseño basado en plantillas (pros/cons)
• Tipo de app (nativa o HTML)
• Aportan sistemas para compartir contenido
• Son de pago (coste mucho menor)
• Cuidado con la publicidad
• CMS interno – actualiza tu contenido en caliente
• Analítica, datos, datos, datos…

42. Cada vez son más y mejores
http://es.goodbarber.com/ http://www.appmachine.com/
http://www.como.com/
http://www.mobincube.com/es/
10 Excellent Platforms for Building Mobile Apps
http://mashable.com/2013/12/03/build-mobile-apps/

43. #biblioapps

44. ¿Por qué #biblioapps?
• Porque todo el mundo tiene una app
• Porque nos hace parecer más modernos
• Porque mis usuarios están en el móvil
• Porque…
• ¿Necesito realmente una app?

45. Qué cosas tiene que hacer
• Todo!! Cuidado con eso…
• Haz un estudio de mercado local
• Define tu estrategia digital
• Funcionar en TODOS los dispositivos
• Sin coste
• Sencillez + Claridad = Usable
• Con valor añadido

46. Planificación
• ¿Me va a afectar en mis servicios?
• ¿Está el equipo preparado para ello?
• ¿Qué servicios voy a ofrecer?
• ¿Necesito un desarrollo específico?
• ¿Qué desean los usuarios?
• Vamos a tomar decisiones

47. Toma de decisiones
• ¿Conocemos a nuestros usuarios, sus hábitos
de consumo de nuestros servicios y productos?
• ¿Entendemos las tendencias de uso que se
hacen de los dispositivos móviles?
• ¿Los usamos de forma natural para
comprenderlos mejor y saber qué oportunidades
nos presentan?

48. • ¿Sabemos qué quieren los usuarios que se
haga desde las bibliotecas? ¿Les hemos
preguntado alguna vez?
• ¿Qué productos o servicios se comportan bien
en un entorno móvil?
• ¿Por qué queremos tener una presencia móvil?
• ¿Qué sería "genial" encontrarse en una
aplicación móvil?
Toma de decisiones

49. • ¿Estamos preparados para comprender los
usos que se derivan de una aplicación móvil?
• ¿Y nuestra "competencia", qué está haciendo?
• ¿Qué sería para nosotros un caso de éxito en el
entorno móvil, o cómo nos gustaría que fuera?
Toma de decisiones

50. Aspectos funcionales
Descubrimiento
• Acceso al catálogo
• Datos de contacto
• Horarios
• Noticias
• Videoteca
• Rankings
• …
Transaccionales
• Reservas y renovaciones
• Gestión de actividades
• Comentar
• Valorar y puntuar
• Compartir contenido
• Descarga de eBooks
• …

51. Consejos finales
• Estrategia digital - ¿Qué quiero ser de mayor?
• Detecta necesidades específicas – Subapps
• No repliques tu website en una app
• Transforma tus servicios si es necesario
• Transforma tu forma de trabajar si es necesario
• Reflexiona sobre si webapp o app
• Aporta valor y piensa en el uso final
• Véndela una y otra vez, di cuan chula es tu app

52. ht t p: //soci al bi bl
i o. com
David Maniega Legarda
CTO de ICAlia Solutions
david.maniega@icalia.es
www.icalia.com
dmaniega