Este documento presenta una introducción al desarrollo de aplicaciones móviles para personas sin experiencia en programación. Explica los tipos de aplicaciones, requisitos, capacidades de los dispositivos, costos de desarrollo y etapas del proceso como la idea, boceto, diseño, desarrollo y publicación. También incluye consejos para aprender de forma autodidacta a través de cursos en línea y generadores de aplicaciones.

1. @asanzdiego @_David_Jorge
Introducción al
desarrollo de Apps
para los no
Informáticos

2. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

3. @asanzdiego @_David_Jorge
¿Quién somos?

4. @asanzdiego @_David_Jorge
Consultor y desarrollador de apps.
@_David_Jorge
david.jorge@appconcept.es
David Jorge

5. @asanzdiego @_David_Jorge
Asesor. Formador. Desarrollador.
@asanzdiego
http://about.me/asanzdiego
Adolfo Sanz De Diego

6. @asanzdiego @_David_Jorge
Hackathon Lovers
Comunidad de amantes de los hackathones.
@HackathonLovers
http://hackathonlovers.com

7. @asanzdiego @_David_Jorge
En el último año
+10 hackathones
+100 proyectos
+1000 hackers

8. @asanzdiego @_David_Jorge
JustiApps
Integra tecnología y derecho
para mejorar la Justicia.
@JustiApps
http://www.justiapps.com

9. @asanzdiego @_David_Jorge
¿Cómo?
concurso ideas
seminarios
hackathon

10. @asanzdiego @_David_Jorge
Despiertame cuando empiece

11. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

12. @asanzdiego @_David_Jorge
Tipos de Apps
web
nativas
híbridas

13. @asanzdiego @_David_Jorge
Aplicaciones web
Sitios web adaptados a
teléfonos/tabletas.
No se instalan en el
dispositivo.
Accedemos mediante el
navegador.

14. @asanzdiego @_David_Jorge
Aplicaciones web
Capacidades limitadas a
las del navegador.
Son las más rápidas de
desarrollar.
Son las más económicas.

15. @asanzdiego @_David_Jorge
Cada vez se navega más con los teléfonos/tabletas.
Pero no ha sido en detrimento del escritorio.
fuente: http://blogs.wsj.com/cmo/2015/05/26/mobile-isnt-killing-the-desktop-internet/
Evolución

16. @asanzdiego @_David_Jorge
Responsive Web Design

17. @asanzdiego @_David_Jorge
APIs para separar backend de frontend

18. @asanzdiego @_David_Jorge
Aplicaciones nativas
Se desarrollan para una
plataforma.
Acceso a todas las
capacidades del
dispositivo.
Se pueden distribuir en
los marketplaces.

19. @asanzdiego @_David_Jorge
Aplicaciones nativas
Requieren más tiempo
de desarrollo.
Resultan más caras.
Para juegos o
aplicaciones complejas.

20. @asanzdiego @_David_Jorge
Android
80% de los terminales.
Se desarrollan con Java.
Google Play:
- Las aplicaciones son
aprobadas
automáticamente.
- Tasa de 25$ una vez en la
vida.
- Los usuarios las prefieren
gratis con publicidad.

21. @asanzdiego @_David_Jorge
iOS
15% de los terminales.
Se desarrollan con
Objective-C y/o Swift.
App Store:
- Las aplicaciones son
minuciosamente revisadas.
- Tasa de 99$ anuales.
- Los usuarios están más
acostumbrados a pagar.

22. @asanzdiego @_David_Jorge
Aplicaciones híbridas
App web incrustadas en
aplicación nativa.
Se desarrolla para todas
las plataformas.
Acceso a muchas
capacidades del
dispositivo.

23. @asanzdiego @_David_Jorge
Aplicaciones híbridas
Se pueden distribuir en
los marketplaces.
Son más económicas que
las nativas.
Mejor opción para
aplicaciones sencillas.

24. @asanzdiego @_David_Jorge
● Phonegap empaqueta a distintas plataformas.
● Appcelerator viene con servicios de Backend.
● Sencha optimizado para UI nativas.
● Intel XDK soporta varios frameworks UI.
● Xamarin C# y compila a Java y Objective-C.
● Ludei pensado para juegos.
● eMobc plataforma española.
Entornos completos

25. @asanzdiego @_David_Jorge
● Ionic SASS, AngularJS, CLI.
● MobileAngularUI Bootstrap 3 + AngularJS.
● Kendo basado en jQuery.
● Famous para animaciones.
● jQueryMobile el clásico.
● HammerJS para los gestos.
● Lungo es español.
Frameworks UI

26. @asanzdiego @_David_Jorge
● Gestión de usuarios.
● Bases de Datos.
● Gestión de ficheros.
● Notificaciones Push.
● Geolocalización.
● Estadísticas.
Backend As A Service
● firebase.com
● cloudmine.me
● backendless.com
● telerik.com
● parse.com
● kumulos.com
● kinvey.com
● api.shephertz.com
● backbeam.io
● apiomat.com
● appacitive.com
● appery.io
● en.kii.com
● netmera.com

27. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

28. @asanzdiego @_David_Jorge
Requisitos de un App
Web/Nativa/Híbrida.
Gestión de usuarios.
Integración con otras
web.

29. @asanzdiego @_David_Jorge
Requisitos de un App
Panel para
administradores.
Multilingüe.
Servicios push.

30. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

31. @asanzdiego @_David_Jorge
Capacidades de los dispositivos
Teléfono: llamadas.
Agenda: contactos.
3G, WiFi: internet.
Bluetooth, NFC:
conectividad.

32. @asanzdiego @_David_Jorge
Capacidades de los dispositivos
Acelerómetro,
giroscopio,
magnetómetro:
dirección y orientación.
GPS: posición.
Cámara: fotos y vídeos.
Otros sensores: luz,
humedad, proximidad...

33. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

34. @asanzdiego @_David_Jorge
● Dependerá de:
○ Complejidad y tamaño funcionalidad principal.
○ La cantidad de extras.
○ Número de requisitos de la App.
○ Número de capacidades del dispositivo que usa.
○ Diseño, usabilidad y accesibilidad de la App.
○ Calidad de la App.
○ Tiempo de desarrollo.
¿Cuánto cuesta una App?

35. @asanzdiego @_David_Jorge
Tienes que elegir

36. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

37. @asanzdiego @_David_Jorge
“desarrollar transporte aéreo”
Ejemplo MVP

38. @asanzdiego @_David_Jorge
“Vamos a desarrollar el Concorde”

39. @asanzdiego @_David_Jorge
Resultado: motor a reacción

40. @asanzdiego @_David_Jorge
“Vamos a desarrollar un ala delta”

41. @asanzdiego @_David_Jorge
Resultado: ultraligero

42. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

43. @asanzdiego @_David_Jorge
La idea
Mi proyecto está ideado.
¡Me voy a forrar!
Pero es sólo una idea...

44. @asanzdiego @_David_Jorge
¿Qué problema resuelve?
¿Va a ser realmente útil o
es sólo mi necesidad?
¿Hay ya otras apps
similares? ¿Me puedo
diferenciar?
¿Cual va ser mi modelo
de negocio? ¿Dinero,
popularidad, otro?

45. @asanzdiego @_David_Jorge
Funcionalidad principal
¿Qué funcionalidad
quiero que tenga?
¿Qué es básico, deseado
y extras?
¿Qué no hace ni es?

46. @asanzdiego @_David_Jorge
Definiendo la idea, creando el proyecto
Tener bien claro el
objetivo principal de mi
aplicación.
Escribir, describir y
dibujar la app.

47. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

48. @asanzdiego @_David_Jorge
¿Puedo hacer un boceto?
Sí: hazlo tú mismo.
No: contrata un experto
diseñador.

49. @asanzdiego @_David_Jorge
Realizar bocetos
Herramientas y webs
para realizar bocetos:
● balsamiq.com
● gomockingbird.com
● mockupbuilder.com
● mockflow.com
● hotgloo.com
● invisionapp.com
● justproto.com
● proto.io
● inpreso.com
Consejo: busca bocetos ya hechos para seguir como ejemplo.

50. @asanzdiego @_David_Jorge
Experto en UX.
Experto en Apps
(no sólo webs)
Elegir diseñador

51. @asanzdiego @_David_Jorge
Que conozca varias
plataformas.
Generales: precio,
localización, horarios,
experiencia, seriedad,
dedicación, etc.
Elegir diseñador

52. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

53. @asanzdiego @_David_Jorge
El diseño
¿Hay presupuesto?
Sí: contrato diseñador.
No: Apariencia nativa
con diseño básico.
“Quiero un diseño especial, diferente, moderno,
elegante, interesante, brillante, atractivo, …”

54. @asanzdiego @_David_Jorge
Adaptar el contenido.
Transiciones entre pantallas.
Animaciones de elementos.
Mensajes, pop ups y alertas.
La interacción
Una App no es una secuencia de imágenes.

55. @asanzdiego @_David_Jorge
Rotaciones y orientaciones.
Tamaños de pantallas.
¡Ojo con lo que tapa el teclado!
En un monitor se ve muy bien
¿y en el móvil?
La adaptabilidad
Una App se ejecuta en distintos dispositivos

56. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

57. @asanzdiego @_David_Jorge
Del diseño al desarrollo
Limitaciones del tipo de
app (web/nativa/mixta)
Habilidades del
desarrollador.

58. @asanzdiego @_David_Jorge
Desarrollo
Método de trabajo con el
desarrollador.
Comunicación.
Antes de empezar.
¿Algo para probar?
Al empezar.
Plan de trabajo.
Entregables

59. @asanzdiego @_David_Jorge
Comienzan los problemas :(
Problemas técnicos.
Diseño no amigable.
Problemas funcionales.
Bugs. ¡En producción!
Pruebas + Control
crashes.

60. @asanzdiego @_David_Jorge
Luz al final del túnel
Primera versión beta .
¿Usuarios de prueba?

61. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

62. @asanzdiego @_David_Jorge
Listos para publicar
Publicamos.
¿Campaña?
¿Cómo va el
presupuesto?

63. @asanzdiego @_David_Jorge
Salida a los marketplaces
App SEO, Web para app.
Promociones, invitación.
+Marketing -Dinero.
Reportes y Analytics.

64. @asanzdiego @_David_Jorge
Sobreviviendo al paso del tiempo
Usuarios:
○ Opiniones.
○ Cómo usan la app.
○ Votaciones. Reseñas.
Actualizaciones y
avances tecnológicos en
las plataformas.

65. @asanzdiego @_David_Jorge
0. Quienes somos
1. Tipos de apps
2. Requisitos apps
3. Capacidades
4. Cuánto cuesta
5. El MVP
6. La idea
7. El boceto
8. El diseño
9. El desarrollo
10. La publicación
11. Autodidactas

66. @asanzdiego @_David_Jorge
Generadores de Apps:
● appsgeyser.com
● infinitemonkeys.mobi
● espartapp.com
● appinventor.org
Moocs:
● codecademy.com
● tutellus.com
● miriadax.net
● udacity.com
● coursera.org
● edx.org
● udemy.com
Autodidactas

67. @asanzdiego @_David_Jorge
Créditos
● http://blackhold.nusepas.com/2013/01/como-quieres-tu-proyecto/
● http://blogs.wsj.com/cmo/2015/05/26/mobile-isnt-killing-the-desktop-internet/
● http://en.wikipedia.org/wiki/File:Ala_delta_sobrevolando_la_Sierra_de_Villafranca.JPG
● http://en.wikipedia.org/wiki/File:British_Airways_Concorde_G-BOAC_03.jpg
● http://en.wikipedia.org/wiki/File:Engine.f15.arp.750pix.jpg
● http://thenounproject.com/term/blueprint/1050/
● http://thenounproject.com/term/cloud-learning/161514/
● http://thenounproject.com/term/competency-based-assessment/27464/
● http://thenounproject.com/term/design/60427/
● http://thenounproject.com/term/developer/6324/
● http://thenounproject.com/term/drag-and-drop/49665/
● http://thenounproject.com/term/people/112754/
● http://thenounproject.com/term/users/64761/
● http://thenounproject.com/term/whistle/5215/
● http://thenounproject.com/term/whiteboard/93458/
● http://thenounproject.com/term/wireframe/21874/
● http://upload.wikimedia.org/wikipedia/commons/1/10/Business_Model_Canvas.png
● http://www.flaticon.com/free-icon/app-store-apple-symbol_34356
● http://www.flaticon.com/free-icon/business-graphic-triangle_46972
● http://www.flaticon.com/free-icon/cart-of-ecommerce_14674
● http://www.flaticon.com/free-icon/circular-pie-chart_8810
● http://www.flaticon.com/free-icon/credit-card-with-discount-percentage_24744

68. @asanzdiego @_David_Jorge
Créditos
● http://www.flaticon.com/free-icon/gamepad_65222
● http://www.flaticon.com/free-icon/piggy-bank-with-coin_66969
● http://www.flaticon.com/free-icon/ranking_69116
● http://www.flaticon.com/free-icon/responsive-design-symbol_65381
● http://www.flaticon.com/free-icon/running-a-race_10609
● http://www.flaticon.com/free-icon/seo-performance-marketing-graphic_33381
● http://www.flaticon.com/free-icon/speed-limit-100_13340
● http://www.flaticon.com/free-icon/sports-car_68321
● http://www.flaticon.com/free-icon/swift-bird-shape_47080
● http://www.flickr.com/photos/markhillary/370268513
● http://www.flickr.com/photos/nadinee/2582322082
● http://www.flickr.com/photos/zergev/8145106535
● http://www.iconsdb.com/custom-color/add-property-icon.html
● http://www.iconsdb.com/custom-color/alarm-clock-2-icon.html
● http://www.iconsdb.com/custom-color/alert-icon.html
● http://www.iconsdb.com/custom-color/android-6-icon.html
● http://www.iconsdb.com/custom-color/android-icon.html
● http://www.iconsdb.com/custom-color/apple-icon.html
● http://www.iconsdb.com/custom-color/article-marketing-icon.html
● http://www.iconsdb.com/custom-color/available-updates-icon.html
● http://www.iconsdb.com/custom-color/banknotes-icon.html
● http://www.iconsdb.com/custom-color/bluetooth-2-icon.html

69. @asanzdiego @_David_Jorge
Créditos
● http://www.iconsdb.com/custom-color/bug-2-icon.html
● http://www.iconsdb.com/custom-color/cash-receiving-icon.html
● http://www.iconsdb.com/custom-color/check-mark-icon.html
● http://www.iconsdb.com/custom-color/chrome-icon.html
● http://www.iconsdb.com/custom-color/compass-icon.html
● http://www.iconsdb.com/custom-color/conference-icon.html
● http://www.iconsdb.com/custom-color/conference-icon.html
● http://www.iconsdb.com/custom-color/contacts-2-icon.html
● http://www.iconsdb.com/custom-color/database-5-icon.html
● http://www.iconsdb.com/custom-color/edit-9-icon.html
● http://www.iconsdb.com/custom-color/error-icon.html
● http://www.iconsdb.com/custom-color/euro-icon.html
● http://www.iconsdb.com/custom-color/extra-badge-icon.html
● http://www.iconsdb.com/custom-color/finish-flag-icon.html
● http://www.iconsdb.com/custom-color/flag-icon.html
● http://www.iconsdb.com/custom-color/flashlight-icon.html
● http://www.iconsdb.com/custom-color/flow-chart-icon.html
● http://www.iconsdb.com/custom-color/hot-chocolate-icon.html
● http://www.iconsdb.com/custom-color/idea-icon.html
● http://www.iconsdb.com/custom-color/idea-icon.html
● http://www.iconsdb.com/custom-color/iphone-icon.html
● http://www.iconsdb.com/custom-color/map-marker-icon.html

70. @asanzdiego @_David_Jorge
Créditos
● http://www.iconsdb.com/custom-color/mobile-marketing-icon.html
● http://www.iconsdb.com/custom-color/money-icon.html
● http://www.iconsdb.com/custom-color/notebook-icon.html
● http://www.iconsdb.com/custom-color/phone-2-icon.html
● http://www.iconsdb.com/custom-color/phone-42-icon.html
● http://www.iconsdb.com/custom-color/planner-icon.htmlcalendar
● http://www.iconsdb.com/custom-color/play-4-icon.html
● http://www.iconsdb.com/custom-color/rocket-icon.html
● http://www.iconsdb.com/custom-color/server-icon.html
● http://www.iconsdb.com/custom-color/slr-camera-icon.html
● http://www.iconsdb.com/custom-color/student-icon.html
● http://www.iconsdb.com/custom-color/student-icon.html
● http://www.iconsdb.com/custom-color/talk-icon.html
● http://www.iconsdb.com/custom-color/target-audience-icon.html
● http://www.iconsdb.com/custom-color/time-icon.html
● http://www.iconsdb.com/custom-color/top-navigation-toolbar-icon.html
● http://www.iconsdb.com/custom-color/unlock-icon.html
● http://www.iconsdb.com/custom-color/website-design-icon.html
● http://www.iconsdb.com/custom-color/website-design-icon.html
● http://www.iconsdb.com/custom-color/wifi-3-bars-icon.html
● http://www.iconsdb.com/custom-color/window-5-icon.html
● http://www.iconsdb.com/custom-color/x-mark-icon.html

71. @asanzdiego @_David_Jorge
Licencia
Esta obra tiene una licencia:
CreativeCommons-Reconocimiento-CompartirIgual

72. @asanzdiego @_David_Jorge
¿Alguna pregunta?

73. @asanzdiego @_David_Jorge