Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web móvil - Seminario Jornadas Valencianas Documentación 2013

429 views

Published on

  • Be the first to comment

  • Be the first to like this

Web móvil - Seminario Jornadas Valencianas Documentación 2013

  1. 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. 2. David Maniega Co-Fundador y Director de Tecnología (CTO) david.maniega@icalia.es www.icalia.es www.davidmaniega.me dmaniega icaliasolutions
  3. 3. Qué vamos a ver • • • • • Concepto de movilidad Características ¿Necesito una app? Consejos y herramientas Apps para bibliotecas } Preguntas
  4. 4. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013/
  5. 5. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013/
  6. 6. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013/
  7. 7. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013/
  8. 8. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013/
  9. 9. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013/
  10. 10. ¿Cómo era la web? • 90’s --------------- 640 x 480px • 2000 -------------- 800 x 600 px • 2005 -------------- 1024 x 768 px
  11. 11. ¿Y ahora?
  12. 12. Despejemos dudas Mobile optimization best practices book
  13. 13. Web móvil o App nativa
  14. 14. El dilema: Web móvil vs App
  15. 15. Responsive Web Design
  16. 16. “Una manera de presentar nuestro contenido sin saber en qué dispositivo va a verse.” Ethan Marcotte
  17. 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. 18. Media Queries http://mediaqueri.es/
  19. 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. 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. 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. 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. 23. RWD Testing http://mattkersley.com/responsive/
  24. 24. RWD Testing http://www.juicecreative.co.uk/juicer/
  25. 25. RWD Testing http://www.iammobile.co.uk/
  26. 26. Creación de una App
  27. 27. “Diseño no es sólo cómo se ve o se percibe algo, diseño es cómo funciona.”
  28. 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. 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. 30. Diseño UI/UX Análisis de requisitos
  31. 31. Diseño UI/UX Diseño conceptual
  32. 32. Diseño UI/UX Prototipa, sin fin http://popapp.in
  33. 33. Diseño UI/UX Diseño e implementación
  34. 34. Diseño UI/UX Lanzamiento y mantenimiento
  35. 35. Diseño UI/UX Evaluación y medición
  36. 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. 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. 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. 39. ¿Qué sistema operativo?
  40. 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. 41. Frameworks de desarrollo http://www.markus-falk.com/mobile-frameworks-comparison-chart/
  42. 42. Estadísticas app http://www.google.com/analytics/mobile/
  43. 43. Estadísticas app http://www.flurry.com/
  44. 44. Apps de bibliotecas
  45. 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. 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. 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. 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. 49. Ejemplos • Bibliotecas de Universidad de Salamanca
  50. 50. Ejemplos • New York Public Library
  51. 51. Ejemplos • Red Lectura Pública País Vasco
  52. 52. Recuerda…

×