@asanzdiego @jorgeas80

Hackathones

de 0 a producción en 24 horas

@asanzdiego @jorgeas80

¿Quienes somos?

@asanzdiego @jorgeas80

Adolfo Sanz De Diego

Asesor. Formador. Desarrollador.

@asanzdiego

@asanzdiego @jorgeas80

Desarrollador especializado en GIS.

@jorgeas80

Jorge Arévalo

@asanzdiego @jorgeas80

HackathonLovers

Grupo para amantes de los hackathones.

@HackathonLovers

@asanzdiego @jorgeas80

¿Qué es un hackathon?

@asanzdiego @jorgeas80

Un concurso de programación

@asanzdiego @jorgeas80

¿Y por qué debería ir a hackathones?

@asanzdiego @jorgeas80

Divertirse Aprender Relacionarse

@asanzdiego @jorgeas80

Pasos de un hackathon

1. Tormenta de ideas2. Creación de equipos3. Planificación4. División del trabajo5. Desarrollo6. Despliegue7. Demo

@asanzdiego @jorgeas80

Paso 1: Tormenta de ideas

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

No son tu “tesoro”: ¡compártelas!

@asanzdiego @jorgeas80

Paso 2: Creación de equipos

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

¡Juntate con quien te sientas a gusto!

@asanzdiego @jorgeas80

Paso 3: Planificación

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

Ejemplo:“desarrollar transporte aéreo”

@asanzdiego @jorgeas80

“Vamos a desarrollar el Concorde”

@asanzdiego @jorgeas80

Resultado: motor a reacción.

@asanzdiego @jorgeas80

¡ERROR!

@asanzdiego @jorgeas80

“Vamos a desarrollar un ala delta”

@asanzdiego @jorgeas80

Resultado: ultraligero

@asanzdiego @jorgeas80

¡ACIERTO!

@asanzdiego @jorgeas80

Paso 4: División del trabajo

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

back front design

@asanzdiego @jorgeas80

Paso 5: Desarrollo

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

Lenguajes, herramientas, frameworks

Usa los que normalmente usas oaprovecha para aprender nuevos...

...pero no puedes malgastar tu tiempoconfigurando el entorno!!!

@asanzdiego @jorgeas80

Algunos lenguajes habituales

@asanzdiego @jorgeas80

Algunas herramientas habituales

@asanzdiego @jorgeas80

Algunos frameworks habituales

@asanzdiego @jorgeas80

Usa APIs REST para separar back/front

@asanzdiego @jorgeas80

Usa APIs REST de terceros

@asanzdiego @jorgeas80

Paso 6: Despliegue

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

IaaS, PaaS, SaaS

SaaS (Software as a Service)

-> PaaS (Platform as a Service) <-

IaaS (Infrastructure as a Service)

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

http://pelitweets.github.io

FRONTEND: pelitweets.com

@asanzdiego @jorgeas80

http://pelitweets.herokuapp.com/api/

BACKEND: pelitweets.com

@asanzdiego @jorgeas80

Paso 7: Demos

@asanzdiego @jorgeas80

@asanzdiego @jorgeas80

Ten un plan B por si Internet falla

@asanzdiego @jorgeas80

Realiza unas bonitas slides

@asanzdiego @jorgeas80

Conecta con el público

@asanzdiego @jorgeas80

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

Licencia

Esta obra tiene una licencia:CreativeCommons-Reconocimiento-CompartirIgual

@asanzdiego @jorgeas80

¿Alguna pregunta?

@asanzdiego @jorgeas80

Nos vemos en el siguiente hackathon:http://hackathonlovers.com