por Carlos Toxtli

Herramientas para

desarrollar rápidamente

Presentación

Mexicano

15 años de experiencia en TI

Maestro en Innovación Empresarial y

Tecnológica

CV

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.

¿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.

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.

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.

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 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.

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á.

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.

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

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

http://www.invisionapp.com

prototyping - invision

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/webapp-builder.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

prototyping - macaw

http://macaw.co

prototyping - bootstraptor

http://bootstraptor.com

Scaffolding

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

de base de datos crear toda la interfaz gráfica

scaffoling - phpscaffold

http://www.phpscaffold.com

scaffolding - Rails scaffolding

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

scaffolding.htm

scaffolding - yeoman

http://yeoman.io

scaffolding - Yii scaffolding

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

ototype.scaffold

scaffolding - knackhq

https://www.knackhq.com

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.

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 básicas que HTML nos soporta

mediante CSS3 podemos extender la

capacidad de usar distintos tipos más.

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 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.

back end - parse

http://parse.com

back end - Google Apps Script

http://script.google.com

back end - backendless

https://backendless.com

Cross platform

Son tecnologías que nos permiten programar

una sola vez y el código pueda ser ejecutado

en cualquier dispositivo.

cross platform - appcelerator

http://www.appcelerator.com

cross platform - phonegap

http://phonegap.com

Cordovahttp://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

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.

frameworks - kendo

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

frameworks - sencha

http://www.sencha.com

frameworks - jquery mobile

http://jquerymobile.com

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.

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

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.

cloud - Google cloud

https://cloud.google.com

cloud - openshift

https://www.openshift.com

cloud - heroku

https://www.heroku.com

cloud - google drive

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

70?hl=es

Ponerles un nombre de dominio

https://gweb.io

cloud - github pages

https://pages.github.com

cloud - juju

https://juju.ubuntu.com

cloud - aws

http://aws.amazon.com/es

cloud - azure

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

cloud - openstack

http://www.openstack.org

cloud - rackspace

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

cloud - bluemix

https://console.ng.bluemix.net

cloud - bitnami

https://bitnami.com

cloud - digitalocean

https://www.digitalocean.com

Repositorios

Un repositorio nos permite de forma ordenada

guardar nuestro código en un servidor y

poderlo compartir con otros programadores

evitando colisiones.

repositorios - google code

http://code.google.com

repositorios - github

http://github.com

repositorios - bitbucket

https://bitbucket.org

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.

ambiente - vagrant

https://www.vagrantup.com

ambiente - docker

https://www.docker.com

ambiente - ansible

http://www.ansible.com

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.

IDE - nitrous

https://www.nitrous.io

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

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.

librerías CDN - Google

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

evguide

librerías CDN - cdnjs

https://cdnjs.com

librerías CDN - cdnjs

https://cdnjs.com

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

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

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

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

librerías - CDN

http://www.fastly.com

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.

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 página de

presentación 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

landing - statuspage

https://www.statuspage.io

Terminal

Es importante usar una terminal para que nos

sea más sencillo ejecutar instrucciones de

línea 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 información en un sitio web y sea fácil

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

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 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