El documento presenta un seminario sobre el desarrollo de aplicaciones móviles y su aplicación en bibliotecas. El seminario cubrirá conceptos como el diseño responsivo, las ventajas e inconvenientes de las aplicaciones web frente a las aplicativas nativas, consejos para el diseño de interfaces de usuario y aplicaciones, y ejemplos de aplicaciones para bibliotecas.

1. SEMINARIO: Web móvil.
Desarrollo de APPs y
aplicación en bibliotecas
David Maniega
ICAlia Solutions – CTO
david.maniega@icalia.es
www.icalia.es

2. David Maniega
Co-Fundador y Director de Tecnología (CTO)
david.maniega@icalia.es
www.icalia.es
www.davidmaniega.me
dmaniega
icaliasolutions

3. Qué vamos a ver
•
•
•
•
•
Concepto de movilidad
Características
¿Necesito una app?
Consejos y herramientas
Apps para bibliotecas
}
Preguntas

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

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

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

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

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

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

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

12. ¿Y ahora?

14. Despejemos dudas
Mobile optimization best practices book

15. Web móvil o App nativa

16. El dilema: Web móvil vs App

17. Responsive Web Design

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

19. ¿pero, qué es exactamente?
• Un diseño sensible al contexto
en el que se visualiza
(viewport).
• Imágenes y vídeos escalables.
• HTML5 (ya vivía con nosotros).
• Media Queries

20. Media Queries
http://mediaqueri.es/

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

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

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

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

25. RWD Testing
http://mattkersley.com/responsive/

26. RWD Testing
http://www.juicecreative.co.uk/juicer/

27. RWD Testing
http://www.iammobile.co.uk/

28. Creación de una App

29. “Diseño no es sólo cómo se ve
o se percibe algo, diseño es
cómo funciona.”

30. Pasos para crear una app
1.
2.
3.
4.
5.
6.
7.
Tener una idea clara…, de verdad
Rodéate de un buen equipo
Conoce el ecosistema lo máximo posible
¿Android, iOS, Windows Phone…?
Interfaz amigable
Funcionalidad clara
Plan de mercado, difusión

31. Diseñar apps - Reglas
1• Sencillo (es difícil)
- es +
2• Honesto, directo, es lo que es y no otra cosa
3• Visual (friendly, sexy)
4• Funcional (va solo, no me hace pensar)

32. Diseño UI/UX
Análisis de requisitos

33. Diseño UI/UX
Diseño conceptual

34. Diseño UI/UX
Prototipa, sin fin
http://popapp.in

35. Diseño UI/UX
Diseño e implementación

36. Diseño UI/UX
Lanzamiento y mantenimiento

37. Diseño UI/UX
Evaluación y medición

38. 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
• Anticípate a los errores (gestión avisos)

39. Consejos fundamentales
• Si se pierde tu usuario… “irritación”
• Muestra el camino (cumple las metas usuario)
• Consistencia = no cambies las reglas del juego
ni visual ni funcional
• Implementa mejoras, no te rindas

40. Herramientas
• Mockups y prototipado:
– POP: https://popapp.in/
– Cacoo: https://cacoo.com/lang/es/
– Invisionapp: http://www.invisionapp.com/
• Inspiración:
– Behance: http://www.behance.net/
– Patterntap: http://patterntap.com/

41. ¿Qué sistema operativo?

42. Frameworks de desarrollo
http://developer.android.co
m/sdk/installing/studio.html
https://developer.apple.com/xcode/
Plataformas back-end + cloud hosting
https://parse.com/
https://developers.google.com/appengine/

43. Frameworks de desarrollo
http://www.markus-falk.com/mobile-frameworks-comparison-chart/

44. Estadísticas app
http://www.google.com/analytics/mobile/

45. Estadísticas app
http://www.flurry.com/

46. Apps de bibliotecas

47. Una gran oportunidad
• Pocos ejemplos fuera de EEUU
• Mercado por explotar, hay vida más allá del
OPAC
• Buscar los servicios que usan los usuarios
• Pocas opciones pero útiles
• Dinamización, una buena opción
• Contenido multimedia, es el rey sin duda

48. 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?

49. Toma de decisiones
• ¿Sabemos lo que quieren los usuarios que se
haga desde las bibliotecas? ¿Les hemos
preguntado alguna vez? ¿Qué servicios,
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?

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

51. Ejemplos
• Bibliotecas de Universidad de Salamanca

52. Ejemplos
• New York Public Library

53. Ejemplos
• Red Lectura Pública País Vasco

54. Recuerda…