Herramientas para desarrollar rápidamente
-
Upload
carlos-toxtli -
Category
Software
-
view
1.054 -
download
7
description
Transcript of Herramientas para desarrollar rápidamente
![Page 1: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/1.jpg)
por Carlos Toxtli
Herramientas para
desarrollar rápidamente
![Page 2: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/2.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/3.jpg)
CV
![Page 4: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/4.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/5.jpg)
¿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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/6.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/7.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/8.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/9.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/10.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/11.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/12.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/13.jpg)
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 21: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/21.jpg)
prototyping - reify
http://www.smartclient.com/product/reify.jsp
![Page 25: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/25.jpg)
prototyping - appgyver
http://www.appgyver.com/prototyper
https://composer.appgyver.com/
![Page 47: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/47.jpg)
prototyping - cloud4j
http://www.cloud4j.com/webapp-builder.html
![Page 60: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/60.jpg)
Scaffolding
La técnica que nos permite a partir de un script
de base de datos crear toda la interfaz gráfica
![Page 62: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/62.jpg)
scaffolding - Rails scaffolding
http://www.tutorialspoint.com/ruby-on-rails/rails-
scaffolding.htm
![Page 64: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/64.jpg)
scaffolding - Yii scaffolding
http://www.yiiframework.com/doc/blog/1.1/en/pr
ototype.scaffold
![Page 66: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/66.jpg)
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 71: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/71.jpg)
iconos - foundation
http://foundation.zurb.com/icon-fonts.html
![Page 72: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/72.jpg)
iconos - Font Awesome
http://fortawesome.github.io/Font-Awesome
![Page 73: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/73.jpg)
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 80: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/80.jpg)
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 84: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/84.jpg)
Cross platform
Son tecnologías que nos permiten programar
una sola vez y el código pueda ser ejecutado
en cualquier dispositivo.
![Page 86: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/86.jpg)
cross platform - phonegap
http://phonegap.com
Cordovahttp://cordova.apache.org
![Page 91: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/91.jpg)
cross platform - mojito
https://developer.yahoo.com/cocktails/mojito
![Page 94: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/94.jpg)
cross platform - telerik appBuilder
http://www.telerik.com/appbuilder
![Page 95: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/95.jpg)
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 99: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/99.jpg)
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 109: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/109.jpg)
isomorphic - mojito
https://developer.yahoo.com/cocktails/mojito
![Page 115: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/115.jpg)
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 119: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/119.jpg)
cloud - google drive
https://support.google.com/drive/answer/28819
70?hl=es
Ponerles un nombre de dominio
https://gweb.io
![Page 129: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/129.jpg)
Repositorios
Un repositorio nos permite de forma ordenada
guardar nuestro código en un servidor y
poderlo compartir con otros programadores
evitando colisiones.
![Page 133: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/133.jpg)
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 137: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/137.jpg)
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 145: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/145.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/146.jpg)
librerías CDN - Google
https://developers.google.com/speed/libraries/d
evguide
![Page 154: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/154.jpg)
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 160: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/160.jpg)
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 170: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/170.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/171.jpg)
terminal - cool retro term
https://github.com/Swordfish90/cool-retro-term
![Page 172: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/172.jpg)
terminal - Cathode
http://www.secretgeometry.com/apps/cathode
![Page 173: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/173.jpg)
CMS
Los controladores de contenido nos ayudan a
publicar información en un sitio web y sea fácil
de administrar por cualquiera.
![Page 179: Herramientas para desarrollar rápidamente](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/179.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022042614/5597cc641a28ab5d608b4866/html5/thumbnails/180.jpg)
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