Embed Size (px)
Citation preview
@asanzdiego @_David_Jorge
Introducción al desarrollo de Apps
para los no Informáticos
@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
@asanzdiego @_David_Jorge
¿Quién somos?
@asanzdiego @_David_Jorge
Consultor y desarrollador de apps.
@_David_Jorge
David Jorge
@asanzdiego @_David_Jorge
Asesor. Formador. Desarrollador.
@asanzdiego
http://about.me/asanzdiego
Adolfo Sanz De Diego
@asanzdiego @_David_Jorge
Hackathon Lovers
Comunidad de amantes de los hackathones.
@HackathonLovers
http://hackathonlovers.com
@asanzdiego @_David_Jorge
En el último año
+10 hackathones
+100 proyectos
+1000 hackers
@asanzdiego @_David_Jorge
JustiApps
Integra tecnología y derecho
para mejorar la Justicia.
@JustiApps
http://www.justiapps.com
@asanzdiego @_David_Jorge
¿Cómo?
concurso ideas
seminarios
hackathon
@asanzdiego @_David_Jorge
Despiertame cuando empiece
@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
@asanzdiego @_David_Jorge
Tipos de Apps
web
nativas
híbridas
@asanzdiego @_David_Jorge
Aplicaciones web
Sitios web adaptados a teléfonos/tabletas.
No se instalan en el dispositivo.
Accedemos mediante el navegador.
@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.
@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
@asanzdiego @_David_Jorge
Responsive Web Design
@asanzdiego @_David_Jorge
APIs para separar backend de frontend
@asanzdiego @_David_Jorge
Aplicaciones nativas
Se desarrollan para una plataforma.
Acceso a todas las capacidades del dispositivo.
Se pueden distribuir en los marketplaces.
@asanzdiego @_David_Jorge
Aplicaciones nativas
Requieren más tiempo de desarrollo.
Resultan más caras.
Para juegos o aplicaciones complejas.
@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.
@asanzdiego @_David_Jorge
iOS15% 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.
@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.
@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.
@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
@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
@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
@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
@asanzdiego @_David_Jorge
Requisitos de un App
Web/Nativa/Híbrida.
Gestión de usuarios.
Integración con otras web.
@asanzdiego @_David_Jorge
Requisitos de un App
Panel para administradores.
Multilingüe.
Servicios push.
@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
@asanzdiego @_David_Jorge
Capacidades de los dispositivos
Teléfono: llamadas.
Agenda: contactos.
3G, WiFi: internet.
Bluetooth, NFC: conectividad.
@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...
@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
@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?
@asanzdiego @_David_Jorge
Tienes que elegir
@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
@asanzdiego @_David_Jorge
“desarrollar transporte aéreo”
Ejemplo MVP
@asanzdiego @_David_Jorge
“Vamos a desarrollar el Concorde”
@asanzdiego @_David_Jorge
Resultado: motor a reacción
@asanzdiego @_David_Jorge
“Vamos a desarrollar un ala delta”
@asanzdiego @_David_Jorge
Resultado: ultraligero
@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
@asanzdiego @_David_Jorge
La idea
Mi proyecto está ideado.
¡Me voy a forrar!
Pero es sólo una idea...
@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?
@asanzdiego @_David_Jorge
Funcionalidad principal
¿Qué funcionalidad quiero que tenga?
¿Qué es básico, deseado y extras?
¿Qué no hace ni es?
@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.
@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
@asanzdiego @_David_Jorge
¿Puedo hacer un boceto?
Sí: hazlo tú mismo.
No: contrata un experto diseñador.
@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.
@asanzdiego @_David_Jorge
Experto en UX.
Experto en Apps
(no sólo webs)
Elegir diseñador
@asanzdiego @_David_Jorge
Que conozca varias plataformas.
Generales: precio, localización, horarios, experiencia, seriedad, dedicación, etc.
Elegir diseñador
@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
@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, …”
@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.
@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
@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
@asanzdiego @_David_Jorge
Del diseño al desarrollo
Limitaciones del tipo de app (web/nativa/mixta)
Habilidades del desarrollador.
@asanzdiego @_David_Jorge
DesarrolloMétodo de trabajo con el desarrollador.
Comunicación.
Antes de empezar.
¿Algo para probar?
Al empezar.
Plan de trabajo.
Entregables
@asanzdiego @_David_Jorge
Comienzan los problemas :(
Problemas técnicos.
Diseño no amigable.
Problemas funcionales.
Bugs. ¡En producción!
Pruebas + Control crashes.
@asanzdiego @_David_Jorge
Luz al final del túnel
Primera versión beta .
¿Usuarios de prueba?
@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
@asanzdiego @_David_Jorge
Listos para publicar
Publicamos.
¿Campaña?
¿Cómo va el presupuesto?
@asanzdiego @_David_Jorge
Salida a los marketplaces
App SEO, Web para app.
Promociones, invitación.
+Marketing -Dinero.
Reportes y Analytics.
@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.
@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
@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
@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
@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
@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
@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
@asanzdiego @_David_Jorge
Licencia
Esta obra tiene una licencia:CreativeCommons-Reconocimiento-CompartirIgual
@asanzdiego @_David_Jorge
¿Alguna pregunta?
