SEMINARIO: Web móvil. Desarrollo de APPs y aplicación en bibliotecas
David ManiegaICAlia Solutions – CTO
www.icalia.es
dmaniega icaliasolutions
David ManiegaCo-Fundador y Director de Tecnología (CTO)
www.icalia.es www.davidmaniega.me
Qué vamos a ver
• Concepto de movilidad• Características• ¿Necesito una app?• Consejos y herramientas• Apps para bibliotecas } Preguntas
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013/
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013/
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013/
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013/
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013/
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013/
¿Cómo era la web?
• 90’s --------------- 640 x 480px• 2000 -------------- 800 x 600 px• 2005 -------------- 1024 x 768 px
¿Y ahora?
Despejemos dudas
Mobile optimization best practices book
Web móvil o App nativa
El dilema: Web móvil vs App
Responsive Web Design
“Una manera de presentar nuestro contenido sin saber en qué dispositivo va a verse.”
Ethan Marcotte
¿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
Media Queries
http://mediaqueri.es/
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
Inconvenientes
• Supone complejidad técnica (novedoso)• No hay mucha gente especializada• Curva de aprendizaje amplia• Costes de migración • Incompatiblidad de algunos navegadores
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
Frameworks de desarrollo
http://responsive.vermilion.com/compare.php
Responsive CSS Framework Comparison
http://getbootstrap.com/
http://foundation.zurb.com/
http://www.getskeleton.com/
RWD Testing
http://mattkersley.com/responsive/
RWD Testing
http://www.juicecreative.co.uk/juicer/
RWD Testing
http://www.iammobile.co.uk/
Creación de una App
“Diseño no es sólo cómo se ve o se percibe algo, diseño es cómo funciona.”
Pasos para crear una app
1. Tener una idea clara…, de verdad2. Rodéate de un buen equipo3. Conoce el ecosistema lo máximo posible4. ¿Android, iOS, Windows Phone…?5. Interfaz amigable6. Funcionalidad clara7. Plan de mercado, difusión
Diseñar apps - Reglas
• Sencillo (es difícil) - es +
• Honesto, directo, es lo que es y no otra cosa
• Visual (friendly, sexy)
• Funcional (va solo, no me hace pensar)
1
2
3
4
Diseño UI/UX
Análisis de requisitos
Diseño UI/UX
Diseño conceptual
Diseño UI/UX
Prototipa, sin finhttp://popapp.in
Diseño UI/UX
Diseño e implementación
Diseño UI/UX
Lanzamiento y mantenimiento
Diseño UI/UX
Evaluación y medición
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)
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
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/
¿Qué sistema operativo?
Frameworks de desarrollo
http://developer.android.com/sdk/installing/studio.html
https://developer.apple.com/xcode/
Plataformas back-end + cloud hostinghttps://parse.com/https://developers.google.com/appengine/
Frameworks de desarrollo
http://www.markus-falk.com/mobile-frameworks-comparison-chart/
Estadísticas app
http://www.google.com/analytics/mobile/
Estadísticas app
http://www.flurry.com/
Apps de bibliotecas
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
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?
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?
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?
Ejemplos
• Bibliotecas de Universidad de Salamanca
Ejemplos
• New York Public Library
Ejemplos
• Red Lectura Pública País Vasco
Recuerda…