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/

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

11.
¿Y ahora?

12.
Despejemos dudas
Mobile optimization best practices book

13.
Web móvil o App nativa

14.
El dilema: Web móvil vs App

15.
Responsive Web Design

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

17.
¿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

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

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://getbootstrap.com/
http://foundation.zurb.com/
http://www.getskeleton.com/
Responsive CSS Framework Comparison
http://responsive.vermilion.com/compare.php

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

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

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

26.
Creación de una App

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

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

29.
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)

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

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

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

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

34.
Diseño UI/UX
Lanzamiento y mantenimiento

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

36.
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)

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

38.
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/

39.
¿Qué sistema operativo?

40.
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/

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

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

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

44.
Apps de bibliotecas

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

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

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

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

49.
Ejemplos
• Bibliotecas de Universidad de Salamanca

50.
Ejemplos
• New York Public Library

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

52.
Recuerda…