Herramientas para desarrollar rápidamente

180
por Carlos Toxtli Herramientas para desarrollar rápidamente

description

Más de 150 herramientas en linea que debes conocer para crear desarrollos asombrosos en muy poco tiempo. La era de hacer todo desde cero cada vez es más lejana, ahora tenemos herramientas que pueden hacer que un desarrollo antes tardaría 2 meses tarde menos de 2 semanas.

Transcript of Herramientas para desarrollar rápidamente

Page 1: Herramientas para desarrollar rápidamente

por Carlos Toxtli

Herramientas para

desarrollar rápidamente

Page 2: Herramientas para desarrollar rápidamente

Presentación

Mexicano

15 años de experiencia en TI

Maestro en Innovación Empresarial y

Tecnológica

Page 3: Herramientas para desarrollar rápidamente

CV

Page 4: Herramientas para desarrollar rápidamente

Introducción

El proceso de desarrollar cualquier solución

informática cada vez es más sencillo y rápido

de hacer. Esta guía va dirigida a todo tipo de

audiencia que guste de hacer las cosas por si

misma, con o sin conocimiento de

programación.

Page 5: Herramientas para desarrollar rápidamente

¿Qué desarrollar?

Muchas veces los desarrollos surgen a petición

de clientes, otras veces suelen ser

necesidades de nuestro negocio y muchas

otras suelen ser ideas que queremos

emprender.

Page 6: Herramientas para desarrollar rápidamente

Para un cliente

Los requerimientos de un cliente pueden ser

prototipados previamente al desarrollo de

forma rápida, de esta manera el cliente tendrá

una idea más clara de lo que va a recibir.

Page 7: Herramientas para desarrollar rápidamente

Para nuestro negocio

Muchas veces nuestras necesidades pueden

ser cubiertas con desarrollos sencillos de

plataformas existentes, es importante saber

cuáles existen y cuáles son open source.

Page 8: Herramientas para desarrollar rápidamente

Para nuestro emprendimiento

Es importante si queremos crear una nueva

idea, primero validar que es una necesidad real

que varios comparten es por ello que mostrarla

y detectar personas interesadas es importante

antes de comenzar y descubrir si realmente

funcionará.

Page 9: Herramientas para desarrollar rápidamente

Lenguajes empleados

La tecnología que se ha convertido en una

tendencia es HTML5 por lo que en está guía

nos enfocaremos en HTML5, javascript y CSS3

entre otras.

Page 10: Herramientas para desarrollar rápidamente

Prototyping

Es importante cuando necesitamos mostrar a

alguien una idea enseñar como se verá.

Existen prototipos de bajo nivel “Wireframes”

que sólo muestran de forma esquemática cómo

funcionará. Existen también los Mockups que

muestran de forma gráfica como se verá.

Page 11: Herramientas para desarrollar rápidamente

Prototyping

Esto se trata de demostrar rápido y ser

prácticos, por lo que les recomiendo no perder

su tiempo en plataformas de wireframes o de

mockups no funcionales. Los mejores son

aquellos que ya generan un prototipo y el

código para ser descargado.

Page 12: Herramientas para desarrollar rápidamente

El modelo de prototipos es empleado para el

desarrollo en la ingeniería de software.

http://es.wikipedia.org/wiki/Modelo_de_prototip

os

Prototyping

Page 13: Herramientas para desarrollar rápidamente

Prototyping

Es siempre importante ver varias opciones

para ver cuál de se ellas se aproxima a lo que

ustedes, su posible usuario o su cliente tienen

en mente. A continuación mostramos varias de

ellas

Page 14: Herramientas para desarrollar rápidamente

http://www.invisionapp.com

prototyping - invision

Page 15: Herramientas para desarrollar rápidamente

prototyping - popapp

https://popapp.in

Page 16: Herramientas para desarrollar rápidamente

prototyping - marvel

https://marvelapp.com/iphone/

Page 17: Herramientas para desarrollar rápidamente

prototyping - proto.io

https://proto.io

Page 18: Herramientas para desarrollar rápidamente

prototyping - justinmind

http://www.justinmind.com

Page 19: Herramientas para desarrollar rápidamente

prototyping - ninja mock

http://ninjamock.com

Page 20: Herramientas para desarrollar rápidamente

prototyping - napkee

http://www.napkee.com

Page 21: Herramientas para desarrollar rápidamente

prototyping - reify

http://www.smartclient.com/product/reify.jsp

Page 22: Herramientas para desarrollar rápidamente

prototyping - Appery

http://appery.io

Page 23: Herramientas para desarrollar rápidamente

prototyping - appmakr

http://www.appmakr.com

Page 24: Herramientas para desarrollar rápidamente

prototyping - balsamiq

http://balsamiq.com

Page 25: Herramientas para desarrollar rápidamente

prototyping - appgyver

http://www.appgyver.com/prototyper

https://composer.appgyver.com/

Page 26: Herramientas para desarrollar rápidamente

prototyping - bootply

http://www.bootply.com

Page 27: Herramientas para desarrollar rápidamente

prototyping - webflow

https://webflow.com

Page 28: Herramientas para desarrollar rápidamente

prototyping - divshot

http://divshot.com

Page 29: Herramientas para desarrollar rápidamente

prototyping - sitesupra

http://sitesupra.com

Page 30: Herramientas para desarrollar rápidamente

prototyping - froont

https://froont.com

Page 31: Herramientas para desarrollar rápidamente

prototyping - corporatecentral

http://corporatecentral.com

Page 32: Herramientas para desarrollar rápidamente

prototyping - duda

http://dudamobile.com

Page 33: Herramientas para desarrollar rápidamente

prototyping - knack

https://www.knackhq.com

Page 34: Herramientas para desarrollar rápidamente

prototyping - buildfire

http://buildfire.com

Page 35: Herramientas para desarrollar rápidamente

prototyping - taplytics

https://taplytics.com

Page 36: Herramientas para desarrollar rápidamente

prototyping - appsbar

http://www.appsbar.com

Page 37: Herramientas para desarrollar rápidamente

prototyping - appypie

http://www.appypie.com

Page 38: Herramientas para desarrollar rápidamente

prototyping - eachscape

https://eachscape.com

Page 39: Herramientas para desarrollar rápidamente

prototyping - appmachine

http://www.appmachine.com

Page 40: Herramientas para desarrollar rápidamente

prototyping - biznessapps

http://www.biznessapps.com

Page 41: Herramientas para desarrollar rápidamente

prototyping - mobileroadie

https://mobileroadie.com

Page 42: Herramientas para desarrollar rápidamente

prototyping - appsme

http://www.appsme.com

Page 43: Herramientas para desarrollar rápidamente

prototyping - mippin

http://www.mippin.com

Page 44: Herramientas para desarrollar rápidamente

prototyping - Game Salad

http://gamesalad.com

Page 45: Herramientas para desarrollar rápidamente

prototyping - como

http://www.como.com

Page 46: Herramientas para desarrollar rápidamente

prototyping - wakanda

http://www.wakanda.org

Page 47: Herramientas para desarrollar rápidamente

prototyping - cloud4j

http://www.cloud4j.com/webapp-builder.html

Page 48: Herramientas para desarrollar rápidamente

prototyping - mozeo

http://www.mozeo.com

Page 49: Herramientas para desarrollar rápidamente

prototyping - app.io

https://app.io

Page 50: Herramientas para desarrollar rápidamente

prototyping - codiqa

https://codiqa.com

Page 51: Herramientas para desarrollar rápidamente

prototyping - kinvey

http://www.kinvey.com

Page 52: Herramientas para desarrollar rápidamente

prototyping - keen.io

https://keen.io

Page 53: Herramientas para desarrollar rápidamente

prototyping - urbanairship

http://urbanairship.com

Page 54: Herramientas para desarrollar rápidamente

prototyping - apigee

http://apigee.com

Page 55: Herramientas para desarrollar rápidamente

prototyping - Cloudbase

http://cloudbase.io

Page 56: Herramientas para desarrollar rápidamente

prototyping - telerik

http://www.telerik.com/appbuilder

Page 57: Herramientas para desarrollar rápidamente

prototyping - App Inventor

http://appinventor.mit.edu

Page 58: Herramientas para desarrollar rápidamente

prototyping - macaw

http://macaw.co

Page 59: Herramientas para desarrollar rápidamente

prototyping - bootstraptor

http://bootstraptor.com

Page 60: Herramientas para desarrollar rápidamente

Scaffolding

La técnica que nos permite a partir de un script

de base de datos crear toda la interfaz gráfica

Page 61: Herramientas para desarrollar rápidamente

scaffoling - phpscaffold

http://www.phpscaffold.com

Page 62: Herramientas para desarrollar rápidamente

scaffolding - Rails scaffolding

http://www.tutorialspoint.com/ruby-on-rails/rails-

scaffolding.htm

Page 63: Herramientas para desarrollar rápidamente

scaffolding - yeoman

http://yeoman.io

Page 64: Herramientas para desarrollar rápidamente

scaffolding - Yii scaffolding

http://www.yiiframework.com/doc/blog/1.1/en/pr

ototype.scaffold

Page 65: Herramientas para desarrollar rápidamente

scaffolding - knackhq

https://www.knackhq.com

Page 66: Herramientas para desarrollar rápidamente

Iconos

Es importante siempre contar con una librería

completa de iconos, es por ello que veremos

algunas de las más completas y gratuitas. Un

icono en HTML5 se representa también como

una fuente usando CSS3.

Page 67: Herramientas para desarrollar rápidamente

iconos - Iconmoon

https://icomoon.io

Page 68: Herramientas para desarrollar rápidamente

iconos - glyphsearch

http://glyphsearch.com

Page 69: Herramientas para desarrollar rápidamente

iconos - ionicons

http://ionicons.com

Page 70: Herramientas para desarrollar rápidamente

iconos - Github Octicons

https://octicons.github.com

Page 71: Herramientas para desarrollar rápidamente

iconos - foundation

http://foundation.zurb.com/icon-fonts.html

Page 72: Herramientas para desarrollar rápidamente

iconos - Font Awesome

http://fortawesome.github.io/Font-Awesome

Page 73: Herramientas para desarrollar rápidamente

Fuentes

Las fuentes web son empleadas para no usar

solo las básicas que HTML nos soporta

mediante CSS3 podemos extender la

capacidad de usar distintos tipos más.

Page 74: Herramientas para desarrollar rápidamente

fuentes - Google fonts

http://www.google.com/fonts

Page 75: Herramientas para desarrollar rápidamente

fuentes - Adobe TypeKit

https://typekit.com/fonts

Page 76: Herramientas para desarrollar rápidamente

fuentes - Adobe Edge Web Fonts

https://edgewebfonts.adobe.com

Page 77: Herramientas para desarrollar rápidamente

fuentes - css font stack

http://www.cssfontstack.com

Page 78: Herramientas para desarrollar rápidamente

fuentes - font squirrel

http://www.fontsquirrel.com

Page 79: Herramientas para desarrollar rápidamente

fuentes - fonts.com

http://www.fonts.com/web-fonts

Page 80: Herramientas para desarrollar rápidamente

Back end

El código que está diseñado a correr desde el

servidor es el denominado Back end, ya no es

necesario contratar un servicio o pagar por ello,

a continuación veremos servicios que corren

en la nube que pueden ayudarnos.

Page 81: Herramientas para desarrollar rápidamente

back end - parse

http://parse.com

Page 82: Herramientas para desarrollar rápidamente

back end - Google Apps Script

http://script.google.com

Page 83: Herramientas para desarrollar rápidamente

back end - backendless

https://backendless.com

Page 84: Herramientas para desarrollar rápidamente

Cross platform

Son tecnologías que nos permiten programar

una sola vez y el código pueda ser ejecutado

en cualquier dispositivo.

Page 85: Herramientas para desarrollar rápidamente

cross platform - appcelerator

http://www.appcelerator.com

Page 86: Herramientas para desarrollar rápidamente

cross platform - phonegap

http://phonegap.com

Cordovahttp://cordova.apache.org

Page 87: Herramientas para desarrollar rápidamente

cross platform - xamarin

http://xamarin.com

Page 88: Herramientas para desarrollar rápidamente

cross platform - rhomobile

http://rhomobile.com

Page 89: Herramientas para desarrollar rápidamente

cross platform - coronalabs

http://coronalabs.com

Page 90: Herramientas para desarrollar rápidamente

cross platform - haxe

http://haxe.org

Page 91: Herramientas para desarrollar rápidamente

cross platform - mojito

https://developer.yahoo.com/cocktails/mojito

Page 92: Herramientas para desarrollar rápidamente

cross platform - monocross

http://monocross.net

Page 93: Herramientas para desarrollar rápidamente

cross platform - livecode

http://livecode.com

Page 94: Herramientas para desarrollar rápidamente

cross platform - telerik appBuilder

http://www.telerik.com/appbuilder

Page 95: Herramientas para desarrollar rápidamente

Frameworks

Son herramientas que nos permiten programar

de una forma más sencilla. Es una librería o

conjunto de código reutilizable. A continuación

solo veremos los más usados en desarrollo

web multiplataforma.

Page 96: Herramientas para desarrollar rápidamente

frameworks - kendo

http://www.telerik.com/kendo-ui

Page 97: Herramientas para desarrollar rápidamente

frameworks - sencha

http://www.sencha.com

Page 98: Herramientas para desarrollar rápidamente

frameworks - jquery mobile

http://jquerymobile.com

Page 99: Herramientas para desarrollar rápidamente

Isomorphic

Desarrollo isomórfico implica programar una

sola vez y que ese mismo código funcione del

lado del servidor y del cliente. Por lo general se

utiliza javascript ya que es un lenguaje

interpretado ya por los navegadores y por

algunas tecnologías de servidor.

Page 100: Herramientas para desarrollar rápidamente

isomorphic - Meteor

https://www.meteor.com

Page 101: Herramientas para desarrollar rápidamente

isomorphic - rendr

https://github.com/rendrjs/rendr

Page 102: Herramientas para desarrollar rápidamente

isomorphic - derbyjs

http://derbyjs.com

Page 103: Herramientas para desarrollar rápidamente

isomorphic - ezeljs

http://ezeljs.com

Page 104: Herramientas para desarrollar rápidamente

isomorphic - invisible.js

http://invisiblejs.github.io

Page 105: Herramientas para desarrollar rápidamente

isomorphic - cassisjs

http://cassisjs.org

Page 106: Herramientas para desarrollar rápidamente

isomorphic - react

http://facebook.github.io/react/

Page 107: Herramientas para desarrollar rápidamente

isomorphic - Este.js

https://github.com/steida/este

Page 108: Herramientas para desarrollar rápidamente

isomorphic - sarajs

http://sarajs.github.io

Page 109: Herramientas para desarrollar rápidamente

isomorphic - mojito

https://developer.yahoo.com/cocktails/mojito

Page 110: Herramientas para desarrollar rápidamente

isomorphic - LoopBack

http://loopback.io

Page 111: Herramientas para desarrollar rápidamente

isomorphic - mootools

http://mootools.net

Page 112: Herramientas para desarrollar rápidamente

isomorphic - brisket

https://github.com/bloomberg/brisket

Page 113: Herramientas para desarrollar rápidamente

isomorphic - taunus

https://github.com/taunus/taunus

Page 114: Herramientas para desarrollar rápidamente

isomorphic - chaplin

http://chaplinjs.org

Page 115: Herramientas para desarrollar rápidamente

Cloud platforms

Nos permite almacenar nuestro código en la

nube, de esta manera podemos ya sea

controlar un servidor (VPS o dedicado) o solo

espacio y capacidad de correr código en él.

Muchos de ellos además de hosting soportan

servicios adicionales además de hosting.

Page 116: Herramientas para desarrollar rápidamente

cloud - Google cloud

https://cloud.google.com

Page 117: Herramientas para desarrollar rápidamente

cloud - openshift

https://www.openshift.com

Page 118: Herramientas para desarrollar rápidamente

cloud - heroku

https://www.heroku.com

Page 119: Herramientas para desarrollar rápidamente

cloud - google drive

https://support.google.com/drive/answer/28819

70?hl=es

Ponerles un nombre de dominio

https://gweb.io

Page 120: Herramientas para desarrollar rápidamente

cloud - github pages

https://pages.github.com

Page 121: Herramientas para desarrollar rápidamente

cloud - juju

https://juju.ubuntu.com

Page 122: Herramientas para desarrollar rápidamente

cloud - aws

http://aws.amazon.com/es

Page 123: Herramientas para desarrollar rápidamente

cloud - azure

http://azure.microsoft.com/es-es

Page 124: Herramientas para desarrollar rápidamente

cloud - openstack

http://www.openstack.org

Page 125: Herramientas para desarrollar rápidamente

cloud - rackspace

http://www.rackspace.com/es/cloud

Page 126: Herramientas para desarrollar rápidamente

cloud - bluemix

https://console.ng.bluemix.net

Page 127: Herramientas para desarrollar rápidamente

cloud - bitnami

https://bitnami.com

Page 128: Herramientas para desarrollar rápidamente

cloud - digitalocean

https://www.digitalocean.com

Page 129: Herramientas para desarrollar rápidamente

Repositorios

Un repositorio nos permite de forma ordenada

guardar nuestro código en un servidor y

poderlo compartir con otros programadores

evitando colisiones.

Page 130: Herramientas para desarrollar rápidamente

repositorios - google code

http://code.google.com

Page 131: Herramientas para desarrollar rápidamente

repositorios - github

http://github.com

Page 132: Herramientas para desarrollar rápidamente

repositorios - bitbucket

https://bitbucket.org

Page 133: Herramientas para desarrollar rápidamente

Ambientes compartidos

Los ambientes compartidos replican no solo el

código con otros colaboradores, sino también

una máquina virtual donde todos tienen un

sistema operativo con las mismas

configuraciones.

Page 134: Herramientas para desarrollar rápidamente

ambiente - vagrant

https://www.vagrantup.com

Page 135: Herramientas para desarrollar rápidamente

ambiente - docker

https://www.docker.com

Page 136: Herramientas para desarrollar rápidamente

ambiente - ansible

http://www.ansible.com

Page 137: Herramientas para desarrollar rápidamente

IDEs

Es importante poder programar donde quiera

que estemos es por eso que les muestro una

lista de las herramientas de desarrollo que nos

permiten programar y probar nuestro código

desde internet.

Page 138: Herramientas para desarrollar rápidamente

IDE - nitrous

https://www.nitrous.io

Page 139: Herramientas para desarrollar rápidamente

IDE - ideone

https://ideone.com

Page 140: Herramientas para desarrollar rápidamente

IDE -compileonline

http://compileonline.com

Page 141: Herramientas para desarrollar rápidamente

IDE - onlinecompiler

http://www.onlinecompiler.net

Page 142: Herramientas para desarrollar rápidamente

IDE - compilr

https://compilr.com

Page 143: Herramientas para desarrollar rápidamente

IDE - codepad

http://codepad.org

Page 144: Herramientas para desarrollar rápidamente

IDE - programmr

http://www.programmr.com

Page 145: Herramientas para desarrollar rápidamente

Librerías CDN

Las librerías CDN son librerias que nuestro

código puede consultar y están alojados en

servidores que aseguran que se descargan

rapido y en caso de ya estar guardadas en el

navegador no se vuelvan a descargar.

Page 146: Herramientas para desarrollar rápidamente

librerías CDN - Google

https://developers.google.com/speed/libraries/d

evguide

Page 147: Herramientas para desarrollar rápidamente

librerías CDN - cdnjs

https://cdnjs.com

Page 148: Herramientas para desarrollar rápidamente

librerías CDN - cdnjs

https://cdnjs.com

Page 149: Herramientas para desarrollar rápidamente

librerías CDN - jsdelivrhttp://www.jsdelivr.com

Page 150: Herramientas para desarrollar rápidamente

librerías CDN - jsdelivrhttp://www.jsdelivr.com

Page 151: Herramientas para desarrollar rápidamente

librerías CDN - jsdelivrhttp://www.jsdelivr.com

Page 152: Herramientas para desarrollar rápidamente

librerías CDN - cdncataloghttp://cdncatalog.com

Page 153: Herramientas para desarrollar rápidamente

librerías - CDN

http://www.fastly.com

Page 154: Herramientas para desarrollar rápidamente

Videos

Es importante poder mostrar nuestra idea de

forma sencilla y un video es la forma que nos

impacta tanto por vista como por oido, es por

ello que cautiva más un video que solo texto o

una imagen.

Page 155: Herramientas para desarrollar rápidamente

videos - Powtoon

http://powtoon.com

Page 156: Herramientas para desarrollar rápidamente

videos - Wideo

http://wideo.co

Page 157: Herramientas para desarrollar rápidamente

video - moovly

http://www.moovly.com

Page 158: Herramientas para desarrollar rápidamente

video - goanimate

http://goanimate.com

Page 159: Herramientas para desarrollar rápidamente

video - videoscribe

http://www.videoscribe.co

Page 160: Herramientas para desarrollar rápidamente

Landing pages

Es importante cuando creamos una idea que

mostrar que la gente la vea como un producto

terminado y quiera conocerla y probarla es por

eso que las Landing Pages nos da la página de

presentación de nuestro producto.

Page 161: Herramientas para desarrollar rápidamente

landing - LeadPages

http://www.leadpages.net

Page 162: Herramientas para desarrollar rápidamente

landing - sidengo

https://sidengo.com

Page 163: Herramientas para desarrollar rápidamente

landing - unbounce

http://unbounce.com

Page 164: Herramientas para desarrollar rápidamente

landing - instapage

https://www.instapage.com

Page 165: Herramientas para desarrollar rápidamente

landing - LaunchRock

http://launchrock.co

Page 166: Herramientas para desarrollar rápidamente

landing - Lander

http://landerapp.com

Page 167: Herramientas para desarrollar rápidamente

landing - kickofflabs

http://kickofflabs.com

Page 168: Herramientas para desarrollar rápidamente

landing - launcheffectapp

http://launcheffectapp.com

Page 169: Herramientas para desarrollar rápidamente

landing - statuspage

https://www.statuspage.io

Page 170: Herramientas para desarrollar rápidamente

Terminal

Es importante usar una terminal para que nos

sea más sencillo ejecutar instrucciones de

línea de comandos.

Page 171: Herramientas para desarrollar rápidamente

terminal - cool retro term

https://github.com/Swordfish90/cool-retro-term

Page 172: Herramientas para desarrollar rápidamente

terminal - Cathode

http://www.secretgeometry.com/apps/cathode

Page 173: Herramientas para desarrollar rápidamente

CMS

Los controladores de contenido nos ayudan a

publicar información en un sitio web y sea fácil

de administrar por cualquiera.

Page 174: Herramientas para desarrollar rápidamente

CMS - Joomla

http://joomla.org

Page 175: Herramientas para desarrollar rápidamente

CMS - Wordpress

https://es.wordpress.org

Page 176: Herramientas para desarrollar rápidamente

CMS - Drupal

https://www.drupal.org

Page 177: Herramientas para desarrollar rápidamente

CMS - Silvertripe

http://www.silverstripe.com

Page 178: Herramientas para desarrollar rápidamente

CMS - modx

http://modx.com

Page 179: Herramientas para desarrollar rápidamente

Actividad

El proyecto consiste en desarrollar una idea

que tengan en mente, lo necesario es crear:

● Landing Page

● Video

● Prototipo

Al final deben presentarla al frente, tienen 4

minutos para presentarlo y convencernos.

Page 180: Herramientas para desarrollar rápidamente

Gracias

La presentación la subiré a mis redes sociales,

cualquier duda estoy a sus órdenes en las

mismas:

http://google.com/+CarlosToxtli

http://facebook.com/carlos.toxtli