SEMINARIO: Web móvil. Desarrollo de APPs y aplicación en bibliotecas

David ManiegaICAlia Solutions – CTO

david.maniega@icalia.es

www.icalia.es

dmaniega icaliasolutions

David ManiegaCo-Fundador y Director de Tecnología (CTO)

david.maniega@icalia.es

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…