Tcnicas para programar

rpido
por Carlos Toxtli

Presentacin
Mexicano
15 aos de experiencia en TI
Maestro en Innovacin Empresarial y
Tecnolgica

CV

Introduccin
El proceso de desarrollar cualquier solucin
informtica cada vez es ms sencillo y rpido
de hacer. Esta gua va dirigida a todo tipo de
audiencia que guste de hacer las cosas por si
misma, con o sin conocimiento de
programacin.

Qu desarrollar?
Muchas veces los desarrollos surgen a
peticin de clientes, otras veces suelen ser
necesidades de nuestro negocio y muchas
otras suelen ser ideas que queremos
emprender.

Para un cliente
Los requerimientos de un cliente pueden ser
prototipados previamente al desarrollo de
forma rpida, de esta manera el cliente
tendr una idea ms clara de lo que va a
recibir.

Para nuestro negocio

Muchas veces nuestras necesidades pueden
ser cubiertas con desarrollos sencillos de
plataformas existentes, es importante saber
cules existen y cules son open source.

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.

Lenguajes empleados
La tecnologa que se ha convertido en una
tendencia es HTML5 por lo que en est gua
nos enfocaremos en HTML5, javascript y
CSS3 entre otras.

Prototyping
Es importante cuando necesitamos mostrar
a alguien una idea ensear como se ver.
Existen prototipos de bajo nivel Wireframes
que slo muestran de forma esquemtica
cmo funcionar. Existen tambin los
Mockups que muestran de forma grfica
como se ver.

Prototyping
Esto se trata de demostrar rpido y ser
prcticos, 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 cdigo para ser descargado.

Prototyping
Es siempre importante ver varias opciones
para ver cul de se ellas se aproxima a lo que
ustedes, su posible usuario o su cliente
tienen en mente. A continuacin mostramos
varias de ellas

Prototyping - invision
http://www.invisionapp.com

Prototyping - PopApp
https://popapp.in

Prototyping

- Marvel

https://marvelapp.com/iphone/

Prototyping - Proto.io

https://proto.io

Prototyping - JustInMind
http://www.justinmind.com

Prototyping - Ninja mock

http://ninjamock.com

Prototyping - Napkee
http://www.napkee.com

Prototyping - Reify
http://www.smartclient.com/product/reify.jsp

Prototyping - Appery

http://appery.io

Prototyping - appmakr

http://www.appmakr.com

Prototyping - balsamiq

http://balsamiq.com

Prototyping - appgyver

http://www.appgyver.com/prototyper
https://composer.appgyver.com/

Prototyping - bootply

http://www.bootply.com

Prototyping - webflow

https://webflow.com

Prototyping - divshot
http://divshot.com

Prototyping - sitesupra
http://sitesupra.com

Prototyping - froont

https://froont.com

Prototyping - corporatecentral
http://corporatecentral.com

Prototyping - duda
http://dudamobile.com

Prototyping - knack
https://www.knackhq.com

Prototyping - buildfire
http://buildfire.com

Prototyping - taplytics
https://taplytics.com

Prototyping - appsbar
http://www.appsbar.com

Prototyping - appypie
http://www.appypie.com

Prototyping - eachscape
https://eachscape.com

Prototyping - appmachine
http://www.appmachine.com

Prototyping - biznessapps
http://www.biznessapps.com

Prototyping - mobileroadie
https://mobileroadie.com

Prototyping - appsme
http://www.appsme.com

Prototyping - mippin
http://www.mippin.com

Prototyping - Game Salad

http://gamesalad.com

Prototyping - como
http://www.como.com

Prototyping - wakanda
http://www.wakanda.org

Prototyping - cloud4j
http://www.cloud4j.com/webappbuilder.html

Prototyping - mozeo
http://www.mozeo.com

Prototyping - app.io
https://app.io

Prototyping - codiqa
https://codiqa.com

Prototyping - kinvey
http://www.kinvey.com

Prototyping - keen.io
https://keen.io

Prototyping - urbanairship
http://urbanairship.com

Prototyping - apigee
http://apigee.com

prototyping - Cloudbase
http://cloudbase.io

prototyping - telerik
http://www.telerik.com/appbuilder

prototyping - App Inventor

http://appinventor.mit.edu

Scaffolding
La tcnica que nos permite a partir de un
script de base de datos crear toda la interfaz
grfica

Scaffoling - phpscaffold
http://www.phpscaffold.com

Scaffolding - Rails scaffolding

http://www.tutorialspoint.com/ruby-onrails/rails-scaffolding.htm

Scaffolding - yeoman
http://yeoman.io

scaffolding - Yii scaffolding

http://www.yiiframework.com/doc/blog/1.
1/en/prototype.scaffold

Iconos
Es importante siempre contar con una
librera completa de iconos, es por ello que
veremos algunas de las ms completas y
gratuitas. Un icono en HTML5 se representa
tambin como una fuente usando CSS3.

Iconos - Iconmoon
https://icomoon.io

Iconos - glyphsearch
http://glyphsearch.com

Iconos - ionicons
http://ionicons.com

iconos - Github Octicons

https://octicons.github.com

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

iconos - Font Awesome

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

Fuentes
Las fuentes web son empleadas para no usar
solo las bsicas que HTML nos soporta
mediante CSS3 podemos extender la
capacidad de usar distintos tipos ms.

fuentes - Google fonts

http://www.google.com/fonts

fuentes - Adobe TypeKit

https://typekit.com/fonts

fuentes - Adobe Edge Web Fonts

https://edgewebfonts.adobe.com

fuentes - css font stack

http://www.cssfontstack.com

fuentes - font squirrel

http://www.fontsquirrel.com

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

Back end
El cdigo que est diseado a correr desde el
servidor es el denominado Back end, ya no
es necesario contratar un servicio o pagar
por ello, a continuacin veremos servicios
que corren en la nube que pueden
ayudarnos.

back end - parse

http://parse.com

back end - Google Apps Script

http://script.google.com

back end - backendless

https://backendless.com

Cross platform
Son tecnologas que nos permiten
programar una sola vez y el cdigo pueda ser
ejecutado en cualquier dispositivo.

cross platform - appcelerator

http://www.appcelerator.com

cross platform - phonegap

http://phonegap.com
Cordova
http://cordova.apache.org

cross platform - xamarin

http://xamarin.com

cross platform - rhomobile

http://rhomobile.com

cross platform - coronalabs

http://coronalabs.com

cross platform - haxe

http://haxe.org

cross platform - mojito

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

cross platform - monocross

http://monocross.net

cross platform - livecode

http://livecode.com

cross platform - telerik appBuilder

http://www.telerik.com/appbuilder

cross platform - JQuery mobile

http://jquerymobile.com

Hosting
Nos permite almacenar nuestro cdigo en la
nube, de esta manera podemos ya sea
controlar un servidor (VPS o dedicado) o solo
espacio y capacidad de correr cdigo en l.

hosting - Google cloud

https://cloud.google.com

hosting - openshift
https://www.openshift.com

hosting - heroku
https://www.heroku.com

hosting - google drive

https://support.google.
com/drive/answer/2881970?hl=es
Ponerles un nombre de dominio
https://gweb.io

hosting - github pages

https://pages.github.com

Repositorios
Un repositorio nos permite de forma
ordenada guardar nuestro cdigo en un
servidor y poderlo replicar con otros
programadores evitando colisiones.

repositorios - google code

http://code.google.com

repositorios - github
http://github.com

repositorios - bitbucket
https://bitbucket.org

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 cdigo desde internet.

IDE - ideone
https://ideone.com

IDE -compileonline
http://compileonline.com

IDE - onlinecompiler
http://www.onlinecompiler.net

IDE - compilr
https://compilr.com

IDE - codepad
http://codepad.org

IDE - programmr
http://www.programmr.com

Libreras CDN
Las libreras CDN son librerias que nuestro
cdigo puede consultar y estn alojados en
servidores que aseguran que se descargan
rapido y en caso de ya estar guardadas en el
navegador no se vuelvan a descargar.

libreras CDN - Google

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

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 ms un video que solo
texto o una imagen.

Videos - Powtoon
http://powtoon.com

Videos - Wideo
http://wideo.co

Video - moovly
http://www.moovly.com

Video - goanimate
http://goanimate.com

Video - videoscribe
http://www.videoscribe.co

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 pgina de presentacin de nuestro
producto.

Landing - LeadPages
http://www.leadpages.net

landing - sidengo
https://sidengo.com

landing - unbounce
http://unbounce.com

landing - instapage
https://www.instapage.com

landing - LaunchRock
http://launchrock.co

landing - Lander
http://landerapp.com

landing - kickofflabs
http://kickofflabs.com

landing - launcheffectapp
http://launcheffectapp.com

Isomorphic
Desarrollo isomrfico implica programar una
sola vez y que ese mismo cdigo 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 tecnologas de
servidor.

Isomorphic - Meteor
https://www.meteor.com

Isomorphic - rendr
https://github.com/rendrjs/rendr

isomorphic - derbyjs
http://derbyjs.com

isomorphic - ezeljs
http://ezeljs.com

isomorphic - invisible.js
http://invisiblejs.github.io

isomorphic - cassisjs
http://cassisjs.org

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

isomorphic - Este.js
https://github.com/steida/este

isomorphic - sarajs
http://sarajs.github.io

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

isomorphic - LoopBack
http://loopback.io

isomorphic - mootools
http://mootools.net

isomorphic - brisket
https://github.
com/bloomberg/brisket

isomorphic - taunus
https://github.com/taunus/taunus

isomorphic - chaplin
http://chaplinjs.org

Terminal
Es importante usar una terminal para que
nos sea ms sencillo ejecutar instrucciones
de lnea de comandos.

terminal - cool retro term

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

terminal - Cathode
http://www.secretgeometry.
com/apps/cathode

CMS
Los controladores de contenido nos ayudan
a publicar informacin en un sitio web y sea
fcil de administrar por cualquiera.

CMS - Joomla
http://joomla.org

CMS - Wordpress
https://es.wordpress.org

CMS - Drupal
https://www.drupal.org

CMS - Silvertripe
http://www.silverstripe.com

CMS - modx
http://modx.com

Frameworks
Son herramientas que nos permiten
programar de una forma ms sencilla

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

Frameworks - sencha
http://www.sencha.com

Frameworks - jquery mobile

http://jquerymobile.com

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.

Gracias
La presentacin la subir a mis redes
sociales, cualquier duda estoy a sus rdenes
en las mismas:

+CarlosToxtli
http://facebook.com/carlos.toxtli
http://google.com/