Técnicas Para Programar Rápido

Técnicas para programar rápido por Carlos Toxtli

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.

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

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

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 código 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 código 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

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

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

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

Frameworks Son herramientas que nos permiten programar de una forma más 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 presentación la subiré a mis redes sociales, cualquier duda estoy a sus órdenes en las mismas:

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