18 de Junio de 2014
David Maniega Legarda
CTO de ICAlia Solutions
david.maniega@icalia.es dmaniega
www.icalia.com
De qué va a ir esto
• Contexto en el que nos movemos
• Cómo llevar mis contenidos a móvil:
• Web adaptativa o Responsive w...
http://madrid.theappdate.com/informe-apps-2013
Nomofobia en España
Nomofobia en España
http://madrid.theappdate.com/informe-apps-2013
Principales usos de los móviles
Dispositivos y su contexto
Uso de apps vs browsing
90’s --------------- 640 x 480 px
2000 -------------- 800 x 600 px
2005 -------------- 1024 x 768 px
¿Cómo era la web?
¿y qué sucede ahora?
Web móvil o App nativa
Mobile optimization best practices book
Aclaremos algunos conceptos
Responsive Web Design
Minnesota University - Libraries
Minnesota University - Libraries
“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).
Ventajas
• Menos coste de mantenimiento (1 site)
• Mejor SEO y usabilidad
• Reutilización en diversos dispositivos
• Opcio...
Inconvenientes
• Supone complejidad técnica (novedoso)
• No hay mucha gente especializada
• Curva de aprendizaje amplia
• ...
Consejos
• Diseña en pequeño, piensa en móvil primero
• Prioriza lo importante primero
• Contenido (clave)
• Navegación (a...
Frameworks de desarrollo
http://responsive.vermilion.com/compare.php
Responsive CSS Framework Comparison
http://getbootstr...
http://www.responsinator.com/
RWD Testing: Responsinator
http://www.iammobile.co.uk/
RWD Testing: I am Mobile
El dilema: Web móvil vs App
El dilema: Web móvil vs App
Responsive, Híbrida o Nativa
App híbrida
http://blog.brightcove.com/
Creación de una App
Pasos previos
1. Tener una idea clara…, de verdad
2. Rodéate de un buen equipo
3. Conoce el ecosistema lo máximo posible
4...
Proceso de creación
Estrategia Usabilidad Calidad
Idea
Validación
Presupuesto
Audiencia
Correcciones
Mejoras
Diseño
Desarr...
Diseño UI/UX
• Capacidad que
tiene tu diseño
para conectar con
las emociones del
usuario.
http://www.studioaum.in/service_...
Diseño UI/UX
http://goo.gl/cRxpIz
Diseño UI/UX
Análisis de requisitos
Diseño conceptual
Prototipado, mockups
Diseño e implementación
Evaluación y métricas
Consejos fundamentales
• Fácil de usar, cumple su objetivo y punto
• Eficiente, no más de 3 pasos para una tarea
• Memorab...
¿Qué sistema operativo?
Para tomar una decisión…
Frameworks para apps híbridas
http://www.sencha.com/ http://phonegap.com/
http://www.appcelerator.com/titanium/
http://jqu...
Frameworks para apps nativas
http://developer.android.com/
sdk/installing/studio.html https://developer.apple.com/xcode/
h...
Y si no sabes programar…
App Builders, crea tu app fácil
• Uso sencillo, intuitivo, sin programar
• Diseño basado en plantillas (pros/cons)
• Tipo ...
Cada vez son más y mejores
http://es.goodbarber.com/ http://www.appmachine.com/
http://www.como.com/
http://www.mobincube....
#biblioapps
¿Por qué #biblioapps?
• Porque todo el mundo tiene una app
• Porque nos hace parecer más modernos
• Porque mis usuarios es...
Qué cosas tiene que hacer
• Todo!! Cuidado con eso…
• Haz un estudio de mercado local
• Define tu estrategia digital
• Fun...
Planificación
• ¿Me va a afectar en mis servicios?
• ¿Está el equipo preparado para ello?
• ¿Qué servicios voy a ofrecer?
...
Toma de decisiones
• ¿Conocemos a nuestros usuarios, sus hábitos
de consumo de nuestros servicios y productos?
• ¿Entendem...
• ¿Sabemos qué quieren los usuarios que se
haga desde las bibliotecas? ¿Les hemos
preguntado alguna vez?
• ¿Qué productos ...
• ¿Estamos preparados para comprender los
usos que se derivan de una aplicación móvil?
• ¿Y nuestra "competencia", qué est...
Aspectos funcionales
Descubrimiento
• Acceso al catálogo
• Datos de contacto
• Horarios
• Noticias
• Videoteca
• Rankings
...
Consejos finales
• Estrategia digital - ¿Qué quiero ser de mayor?
• Detecta necesidades específicas – Subapps
• No repliqu...
ht t p: //soci al bi bl
i o. com
David Maniega Legarda
CTO de ICAlia Solutions
david.maniega@icalia.es
www.icalia.com
dman...
Biblioapps, o cómo crear aplicaciones móviles para bibliotecas
Upcoming SlideShare
Loading in …5
×

Biblioapps, o cómo crear aplicaciones móviles para bibliotecas

555 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
555
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Biblioapps, o cómo crear aplicaciones móviles para bibliotecas

  1. 1. 18 de Junio de 2014 David Maniega Legarda CTO de ICAlia Solutions david.maniega@icalia.es dmaniega www.icalia.com
  2. 2. De qué va a ir esto • Contexto en el que nos movemos • Cómo llevar mis contenidos a móvil: • Web adaptativa o Responsive web • Webapps • Apps híbridas • Apps nativas • Pautas para la creación de una app • #biblioapps o cómo aplicarlo en bibliotecas
  3. 3. http://madrid.theappdate.com/informe-apps-2013 Nomofobia en España
  4. 4. Nomofobia en España http://madrid.theappdate.com/informe-apps-2013
  5. 5. Principales usos de los móviles
  6. 6. Dispositivos y su contexto
  7. 7. Uso de apps vs browsing
  8. 8. 90’s --------------- 640 x 480 px 2000 -------------- 800 x 600 px 2005 -------------- 1024 x 768 px ¿Cómo era la web?
  9. 9. ¿y qué sucede ahora?
  10. 10. Web móvil o App nativa
  11. 11. Mobile optimization best practices book Aclaremos algunos conceptos
  12. 12. Responsive Web Design
  13. 13. Minnesota University - Libraries
  14. 14. Minnesota University - Libraries
  15. 15. “Una manera de presentar nuestro contenido sin saber en qué dispositivo va a verse.” Ethan Marcotte
  16. 16. Pero… ¿qué es exactamente? Un diseño sensible al contexto en el que se visualiza (viewport).
  17. 17. 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
  18. 18. Inconvenientes • Supone complejidad técnica (novedoso) • No hay mucha gente especializada • Curva de aprendizaje amplia • Costes de migración • Incompatiblidad de algunos navegadores
  19. 19. 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
  20. 20. Frameworks de desarrollo http://responsive.vermilion.com/compare.php Responsive CSS Framework Comparison http://getbootstrap.com/ http://foundation.zurb.com/ http://www.getskeleton.com/
  21. 21. http://www.responsinator.com/ RWD Testing: Responsinator
  22. 22. http://www.iammobile.co.uk/ RWD Testing: I am Mobile
  23. 23. El dilema: Web móvil vs App
  24. 24. El dilema: Web móvil vs App
  25. 25. Responsive, Híbrida o Nativa
  26. 26. App híbrida http://blog.brightcove.com/
  27. 27. Creación de una App
  28. 28. Pasos previos 1. Tener una idea clara…, de verdad 2. Rodéate de un buen equipo 3. Conoce el ecosistema lo máximo posible 4. ¿Android, iOS, Windows Phone…? 5. Interfaz amigable y funcionalidad clara 6. Contenido adaptado, ¡no es una web! 7. Plan de difusión, promociónala
  29. 29. Proceso de creación Estrategia Usabilidad Calidad Idea Validación Presupuesto Audiencia Correcciones Mejoras Diseño Desarrollo Contenidos Testing
  30. 30. Diseño UI/UX • Capacidad que tiene tu diseño para conectar con las emociones del usuario. http://www.studioaum.in/service_ux.html
  31. 31. Diseño UI/UX http://goo.gl/cRxpIz
  32. 32. Diseño UI/UX Análisis de requisitos Diseño conceptual Prototipado, mockups Diseño e implementación Evaluación y métricas
  33. 33. 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 • Gestión de avisos al usuario • Consistencia = no cambies las reglas del juego ni visual ni funcional • Implementa mejoras, no te rindas • Originalidad (contenido y diseño)
  34. 34. ¿Qué sistema operativo?
  35. 35. Para tomar una decisión…
  36. 36. Frameworks para apps híbridas http://www.sencha.com/ http://phonegap.com/ http://www.appcelerator.com/titanium/ http://jquerymobile.com/ Top 7 Mobile Application HTML5 Framework http://www.gajotres.net/top-7-mobile-application-html5-frameworks/
  37. 37. Frameworks para apps nativas http://developer.android.com/ sdk/installing/studio.html https://developer.apple.com/xcode/ http://www.microsoft.com/es- es/download/details.aspx?id=35471
  38. 38. Y si no sabes programar…
  39. 39. App Builders, crea tu app fácil • Uso sencillo, intuitivo, sin programar • Diseño basado en plantillas (pros/cons) • Tipo de app (nativa o HTML) • Aportan sistemas para compartir contenido • Son de pago (coste mucho menor) • Cuidado con la publicidad • CMS interno – actualiza tu contenido en caliente • Analítica, datos, datos, datos…
  40. 40. Cada vez son más y mejores http://es.goodbarber.com/ http://www.appmachine.com/ http://www.como.com/ http://www.mobincube.com/es/ 10 Excellent Platforms for Building Mobile Apps http://mashable.com/2013/12/03/build-mobile-apps/
  41. 41. #biblioapps
  42. 42. ¿Por qué #biblioapps? • Porque todo el mundo tiene una app • Porque nos hace parecer más modernos • Porque mis usuarios están en el móvil • Porque… • ¿Necesito realmente una app?
  43. 43. Qué cosas tiene que hacer • Todo!! Cuidado con eso… • Haz un estudio de mercado local • Define tu estrategia digital • Funcionar en TODOS los dispositivos • Sin coste • Sencillez + Claridad = Usable • Con valor añadido
  44. 44. Planificación • ¿Me va a afectar en mis servicios? • ¿Está el equipo preparado para ello? • ¿Qué servicios voy a ofrecer? • ¿Necesito un desarrollo específico? • ¿Qué desean los usuarios? • Vamos a tomar decisiones
  45. 45. 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?
  46. 46. • ¿Sabemos qué quieren los usuarios que se haga desde las bibliotecas? ¿Les hemos preguntado alguna vez? • ¿Qué 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
  47. 47. • ¿Estamos preparados para comprender los usos que se derivan de una aplicación móvil? • ¿Y nuestra "competencia", qué está haciendo? • ¿Qué sería para nosotros un caso de éxito en el entorno móvil, o cómo nos gustaría que fuera? Toma de decisiones
  48. 48. Aspectos funcionales Descubrimiento • Acceso al catálogo • Datos de contacto • Horarios • Noticias • Videoteca • Rankings • … Transaccionales • Reservas y renovaciones • Gestión de actividades • Comentar • Valorar y puntuar • Compartir contenido • Descarga de eBooks • …
  49. 49. Consejos finales • Estrategia digital - ¿Qué quiero ser de mayor? • Detecta necesidades específicas – Subapps • No repliques tu website en una app • Transforma tus servicios si es necesario • Transforma tu forma de trabajar si es necesario • Reflexiona sobre si webapp o app • Aporta valor y piensa en el uso final • Véndela una y otra vez, di cuan chula es tu app
  50. 50. ht t p: //soci al bi bl i o. com David Maniega Legarda CTO de ICAlia Solutions david.maniega@icalia.es www.icalia.com dmaniega

×