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.

Codemotion 2014 - Hackathones - de 0 a produccion en 24 horas

5,681 views

Published on

Charla del Codemotion 2014 sobre como participar en hackathones para desarrollar una idea y ponerla en producción en menos de 24 horas.

Published in: Technology

Codemotion 2014 - Hackathones - de 0 a produccion en 24 horas

  1. 1. Hackathones de 0 a producción en 24 horas @asanzdiego @jorgeas80
  2. 2. ¿Quienes somos? @asanzdiego @jorgeas80
  3. 3. Adolfo Sanz De Diego Asesor. Formador. Desarrollador. @asanzdiego @asanzdiego @jorgeas80
  4. 4. Jorge Arévalo Desarrollador especializado en GIS. @jorgeas80 @asanzdiego @jorgeas80
  5. 5. HackathonLovers Grupo para amantes de los hackathones. @HackathonLovers @asanzdiego @jorgeas80
  6. 6. ¿Qué es un hackathon? @asanzdiego @jorgeas80
  7. 7. Un concurso de programación @asanzdiego @jorgeas80
  8. 8. ¿Y por qué debería ir a hackathones? @asanzdiego @jorgeas80
  9. 9. Divertirse Aprender Relacionarse @asanzdiego @jorgeas80
  10. 10. Pasos de un hackathon 1. Tormenta de ideas 2. Creación de equipos 3. Planificación 4. División del trabajo 5. Desarrollo 6. Despliegue 7. Demo @asanzdiego @jorgeas80
  11. 11. Paso 1: Tormenta de ideas @asanzdiego @jorgeas80
  12. 12. @asanzdiego @jorgeas80
  13. 13. No son tu “tesoro”: ¡compártelas! @asanzdiego @jorgeas80
  14. 14. Paso 2: Creación de equipos @asanzdiego @jorgeas80
  15. 15. @asanzdiego @jorgeas80
  16. 16. ¡Juntate con quien te sientas a gusto! @asanzdiego @jorgeas80
  17. 17. Paso 3: Planificación @asanzdiego @jorgeas80
  18. 18. @asanzdiego @jorgeas80
  19. 19. Ejemplo: “desarrollar transporte aéreo” @asanzdiego @jorgeas80
  20. 20. “Vamos a desarrollar el Concorde” @asanzdiego @jorgeas80
  21. 21. Resultado: motor a reacción. @asanzdiego @jorgeas80
  22. 22. ¡ERROR! @asanzdiego @jorgeas80
  23. 23. “Vamos a desarrollar un ala delta” @asanzdiego @jorgeas80
  24. 24. Resultado: ultraligero @asanzdiego @jorgeas80
  25. 25. ¡ACIERTO! @asanzdiego @jorgeas80
  26. 26. Paso 4: División del trabajo @asanzdiego @jorgeas80
  27. 27. @asanzdiego @jorgeas80
  28. 28. back front design @asanzdiego @jorgeas80
  29. 29. Paso 5: Desarrollo @asanzdiego @jorgeas80
  30. 30. @asanzdiego @jorgeas80
  31. 31. Lenguajes, herramientas, frameworks Usa los que normalmente usas o aprovecha para aprender nuevos... ...pero no puedes malgastar tu tiempo configurando el entorno!!! @asanzdiego @jorgeas80
  32. 32. Algunos lenguajes habituales @asanzdiego @jorgeas80
  33. 33. Algunas herramientas habituales @asanzdiego @jorgeas80
  34. 34. Algunos frameworks habituales @asanzdiego @jorgeas80
  35. 35. Usa APIs REST para separar back/front @asanzdiego @jorgeas80
  36. 36. Usa APIs REST de terceros @asanzdiego @jorgeas80
  37. 37. Paso 6: Despliegue @asanzdiego @jorgeas80
  38. 38. @asanzdiego @jorgeas80
  39. 39. IaaS, PaaS, SaaS SaaS (Software as a Service) -> PaaS (Platform as a Service) <- IaaS (Infrastructure as a Service) @asanzdiego @jorgeas80
  40. 40. @asanzdiego @jorgeas80
  41. 41. FRONTEND: pelitweets.com http://pelitweets.github.io @asanzdiego @jorgeas80
  42. 42. BACKEND: pelitweets.com http://pelitweets.herokuapp.com/api/ @asanzdiego @jorgeas80
  43. 43. Paso 7: Demos @asanzdiego @jorgeas80
  44. 44. @asanzdiego @jorgeas80
  45. 45. Ten un plan B por si Internet falla @asanzdiego @jorgeas80
  46. 46. Realiza unas bonitas slides @asanzdiego @jorgeas80
  47. 47. Conecta con el público @asanzdiego @jorgeas80
  48. 48. Créditos ● Imágenes: ○ http://en.wikipedia.org/wiki/File:Steve_Jobs_and_Bill_Gates_(522695099).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://en.wikipedia.org/wiki/File:Ala_delta_sobrevolando_la_Sierra_de_Villafranca. JPG ○ http://en.wikipedia.org/wiki/File:Hardenstein_2014_-_Adventurers.jpg ○ http://en.wikipedia.org/wiki/File:Tuskegee_Airmen_presentation.jpg ○ http://mellisea.deviantart.com/art/Gollum-close-up-2-78083529 ○ http://flickr.com/photos/ter-burg/8812567121 ○ http://flickr.com/photos/nadinee/2582322082 ○ http://flickr.com/photos/sween/6272861967 ● Iconos: ○ http://www.iconsdb.com/custom-color/talk-icon.html ○ http://www.iconsdb.com/custom-color/guestion-icon.html ○ http://www.iconsdb.com/custom-color/crying-icon.html ○ http://www.iconsdb.com/custom-color/cool-icon.html ○ http://www.iconsdb.com/custom-color/wink-icon.html ○ http://www.iconsdb.com/custom-color/brain-icon.html ○ http://www.iconsdb.com/custom-color/conference-icon.html ○ http://www.iconsdb.com/custom-color/planner-icon.html ○ http://www.iconsdb.com/custom-color/puzzle-icon.html ○ http://www.iconsdb.com/custom-color/notebook-icon.html ○ http://www.iconsdb.com/custom-color/cloud-3-icon.html ○ http://www.iconsdb.com/custom-color/server-icon.html ○ http://www.iconsdb.com/custom-color/arrow-11-icon.html ○ http://www.iconfinder.com/icons/199367/presentation_slide_icon ○ http://www.iconsdb.com/custom-color/database-5-icon.html ● Logos lenguajes: ○ http://en.wikipedia.org/wiki/File:HTML5_logo_and_wordmark.svg ○ http://en.wikipedia.org/wiki/File:Html5_css3_styling.svg ○ http://en.wikipedia.org/wiki/File:JavaScript-logo.png ○ http://en.wikipedia.org/wiki/File:Python.svg ○ http://en.wikipedia.org/wiki/File:Ruby_logo.png ○ http://en.wikipedia.org/wiki/File:Java_logo_and_wordmark.svg ○ http://php.net/download-logos.php ● Logos herramientas: ○ http://en.wikipedia.org/wiki/File:Brackets_Icon.svg ○ http://en.wikipedia.org/wiki/File:Git-logo.svg ○ http://en.wikipedia.org/wiki/File:Mozilla_Firefox_logo_2013.svg ○ http://www.npmjs.org/static/img/npm.png ○ http://www.smartrabbit.co/wp-content/uploads/2014/09/yeoman.png ○ http://gulpjs.com/gulp-2x.png ○ http://bower.io/bower_logo.png ● Logos frameworks: ○ http://en.wikipedia.org/wiki/File:AngularJS_logo.svg ○ http://en.wikipedia.org/wiki/File:Boostrap_logo.svg ○ http://en.wikipedia.org/wiki/File:Ruby_on_Rails_logo.svg ○ http://en.wikipedia.org/wiki/File:Symfony2.svg ○ http://en.wikipedia.org/wiki/File:Django.png ○ http://www.meteor.com/meteor-logo.png ○ http://github.com/expressjs ● Logos APIS: ○ http://en.wikipedia.org/wiki/File:Google_Maps_Logo.png ○ http://en.wikipedia.org/wiki/File:Facebook_logo_(square).png ○ http://en.wikipedia.org/wiki/File:Twitter_bird_logo_2012.svg ○ http://en.wikipedia.org/wiki/File:TextalyticsLogo.png ○ http://en.wikipedia.org/wiki/File:The_Weather_Channel_logo_1996-2005.svg ○ http://en.wikipedia.org/wiki/File:YouTube-logo-seit-Dezember-2013.png ○ http://en.wikipedia.org/wiki/File:EBay_former_logo.svg ○ http://en.wikipedia.org/wiki/File:Flickr_logo.png ○ http://en.wikipedia.org/wiki/File:Wikipedia-es-logo-black-on-white.png @asanzdiego @jorgeas80
  49. 49. Licencia Esta obra tiene una licencia: CreativeCommons-Reconocimiento-CompartirIgual @asanzdiego @jorgeas80
  50. 50. ¿Alguna pregunta? @asanzdiego @jorgeas80
  51. 51. Nos vemos en el siguiente hackathon: http://hackathonlovers.com @asanzdiego @jorgeas80

×