Este documento de Carlos Toxtli presenta herramientas y estrategias para desarrollar soluciones informáticas rápidamente, abordando diversas técnicas como el prototipado, el uso de frameworks y plataformas en la nube. Se enfatiza la importancia de validar ideas antes de su desarrollo y se proporcionan recursos útiles en áreas como back end, iconos, fuentes y CMS. Al final, se propone un proyecto práctico que incluye la creación de una landing page, video y prototipo.

1. Herramientas para
desarrollar rápidamente
por Carlos Toxtli

2. Presentación
Mexicano
15 años de experiencia en TI
Maestro en Innovación Empresarial y
Tecnológica

3. CV

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

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

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

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

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

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

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

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

12. Prototyping
El modelo de prototipos es empleado para el
desarrollo en la ingeniería de software.
http://es.wikipedia.org/wiki/Modelo_de_prototip
os

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

14. prototyping - invision
http://www.invisionapp.com

15. prototyping - popapp
https://popapp.in

16. prototyping - marvel
https://marvelapp.com/iphone/

17. prototyping - proto.io
https://proto.io

18. prototyping - justinmind
http://www.justinmind.com

19. prototyping - ninja mock
http://ninjamock.com

20. prototyping - napkee
http://www.napkee.com

21. prototyping - reify
http://www.smartclient.com/product/reify.jsp

22. prototyping - Appery
http://appery.io

23. prototyping - appmakr
http://www.appmakr.com

24. prototyping - balsamiq
http://balsamiq.com

25. prototyping - appgyver
http://www.appgyver.com/prototyper
https://composer.appgyver.com/

26. prototyping - bootply
http://www.bootply.com

27. prototyping - webflow
https://webflow.com

28. prototyping - divshot
http://divshot.com

29. prototyping - sitesupra
http://sitesupra.com

30. prototyping - froont
https://froont.com

31. prototyping - corporatecentral
http://corporatecentral.com

32. prototyping - duda
http://dudamobile.com

33. prototyping - knack
https://www.knackhq.com

34. prototyping - buildfire
http://buildfire.com

35. prototyping - taplytics
https://taplytics.com

36. prototyping - appsbar
http://www.appsbar.com

37. prototyping - appypie
http://www.appypie.com

38. prototyping - eachscape
https://eachscape.com

39. prototyping - appmachine
http://www.appmachine.com

40. prototyping - biznessapps
http://www.biznessapps.com

41. prototyping - mobileroadie
https://mobileroadie.com

42. prototyping - appsme
http://www.appsme.com

43. prototyping - mippin
http://www.mippin.com

44. prototyping - Game Salad
http://gamesalad.com

45. prototyping - como
http://www.como.com

46. prototyping - wakanda
http://www.wakanda.org

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

48. prototyping - mozeo
http://www.mozeo.com

49. prototyping - app.io
https://app.io

50. prototyping - codiqa
https://codiqa.com

51. prototyping - kinvey
http://www.kinvey.com

52. prototyping - keen.io
https://keen.io

53. prototyping - urbanairship
http://urbanairship.com

54. prototyping - apigee
http://apigee.com

55. prototyping - Cloudbase
http://cloudbase.io

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

57. prototyping - App Inventor
http://appinventor.mit.edu

58. prototyping - macaw
http://macaw.co

59. prototyping - bootstraptor
http://bootstraptor.com

60. Scaffolding
La técnica que nos permite a partir de un script
de base de datos crear toda la interfaz gráfica

61. scaffoling - phpscaffold
http://www.phpscaffold.com

62. scaffolding - Rails scaffolding
http://www.tutorialspoint.com/ruby-on-rails/rails-scaffolding.
htm

63. scaffolding - yeoman
http://yeoman.io

64. scaffolding - Yii scaffolding
http://www.yiiframework.com/doc/blog/1.1/en/pr
ototype.scaffold

65. scaffolding - knackhq
https://www.knackhq.com

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

67. iconos - Iconmoon
https://icomoon.io

68. iconos - glyphsearch
http://glyphsearch.com

69. iconos - ionicons
http://ionicons.com

70. iconos - Github Octicons
https://octicons.github.com

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

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

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

74. fuentes - Google fonts
http://www.google.com/fonts

75. fuentes - Adobe TypeKit
https://typekit.com/fonts

76. fuentes - Adobe Edge Web Fonts
https://edgewebfonts.adobe.com

77. fuentes - css font stack
http://www.cssfontstack.com

78. fuentes - font squirrel
http://www.fontsquirrel.com

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

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

81. back end - parse
http://parse.com

82. back end - Google Apps Script
http://script.google.com

83. back end - backendless
https://backendless.com

84. Cross platform
Son tecnologías que nos permiten programar
una sola vez y el código pueda ser ejecutado
en cualquier dispositivo.

85. cross platform - appcelerator
http://www.appcelerator.com

86. cross platform - phonegap
http://phonegap.com
Cordova
http://cordova.apache.org

87. cross platform - xamarin
http://xamarin.com

88. cross platform - rhomobile
http://rhomobile.com

89. cross platform - coronalabs
http://coronalabs.com

90. cross platform - haxe
http://haxe.org

91. cross platform - mojito
https://developer.yahoo.com/cocktails/mojito

92. cross platform - monocross
http://monocross.net

93. cross platform - livecode
http://livecode.com

94. cross platform - telerik appBuilder
http://www.telerik.com/appbuilder

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

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

97. frameworks - sencha
http://www.sencha.com

98. frameworks - jquery mobile
http://jquerymobile.com

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

100. isomorphic - Meteor
https://www.meteor.com

101. isomorphic - rendr
https://github.com/rendrjs/rendr

102. isomorphic - derbyjs
http://derbyjs.com

103. isomorphic - ezeljs
http://ezeljs.com

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

105. isomorphic - cassisjs
http://cassisjs.org

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

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

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

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

110. isomorphic - LoopBack
http://loopback.io

111. isomorphic - mootools
http://mootools.net

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

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

114. isomorphic - chaplin
http://chaplinjs.org

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

116. cloud - Google cloud
https://cloud.google.com

117. cloud - openshift
https://www.openshift.com

118. cloud - heroku
https://www.heroku.com

119. cloud - google drive
https://support.google.com/drive/answer/28819
70?hl=es
Ponerles un nombre de dominio
https://gweb.io

120. cloud - github pages
https://pages.github.com

121. cloud - juju
https://juju.ubuntu.com

122. cloud - aws
http://aws.amazon.com/es

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

124. cloud - openstack
http://www.openstack.org

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

126. cloud - bluemix
https://console.ng.bluemix.net

127. cloud - bitnami
https://bitnami.com

128. cloud - digitalocean
https://www.digitalocean.com

129. Repositorios
Un repositorio nos permite de forma ordenada
guardar nuestro código en un servidor y
poderlo compartir con otros programadores
evitando colisiones.

130. repositorios - google code
http://code.google.com

131. repositorios - github
http://github.com

132. repositorios - bitbucket
https://bitbucket.org

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

134. ambiente - vagrant
https://www.vagrantup.com

135. ambiente - docker
https://www.docker.com

136. ambiente - ansible
http://www.ansible.com

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

138. IDE - nitrous
https://www.nitrous.io

139. IDE - ideone
https://ideone.com

140. IDE -compileonline
http://compileonline.com

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

142. IDE - compilr
https://compilr.com

143. IDE - codepad
http://codepad.org

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

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

146. librerías CDN - Google
https://developers.google.com/speed/libraries/d
evguide

147. librerías CDN - cdnjs
https://cdnjs.com

148. librerías CDN - cdnjs
https://cdnjs.com

149. librerías CDN - jsdelivr
http://www.jsdelivr.com

150. librerías CDN - jsdelivr
http://www.jsdelivr.com

151. librerías CDN - jsdelivr
http://www.jsdelivr.com

152. librerías CDN - cdncatalog
http://cdncatalog.com

153. librerías - CDN
http://www.fastly.com

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

155. videos - Powtoon
http://powtoon.com

156. videos - Wideo
http://wideo.co

157. video - moovly
http://www.moovly.com

158. video - goanimate
http://goanimate.com

159. video - videoscribe
http://www.videoscribe.co

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

161. landing - LeadPages
http://www.leadpages.net

162. landing - sidengo
https://sidengo.com

163. landing - unbounce
http://unbounce.com

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

165. landing - LaunchRock
http://launchrock.co

166. landing - Lander
http://landerapp.com

167. landing - kickofflabs
http://kickofflabs.com

168. landing - launcheffectapp
http://launcheffectapp.com

169. landing - statuspage
https://www.statuspage.io

170. Terminal
Es importante usar una terminal para que nos
sea más sencillo ejecutar instrucciones de
línea de comandos.

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

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

173. CMS
Los controladores de contenido nos ayudan a
publicar información en un sitio web y sea fácil
de administrar por cualquiera.

174. CMS - Joomla
http://joomla.org

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

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

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

178. CMS - modx
http://modx.com

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

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