Rickroleado por la vida

Una introducción al desarrollo web

(llena de memes)
Al principio te preguntás
Y cuando te ponés a averiguar más …
… Tu reacción es como esta
De qué no hablaremos hoy
Porque no queremos terminar así
 Entonces ¿De qué hablaremos?
• Lo que involucra crear una aplicación web.
– Que tanto un browser como cualquier programa
use
• Para poder crear WebApps que sean
– Escalables
– Disponibles
– Mantenibles
– Confiables
– Ubicuas
 Seguí los bookmarks acá

http://www.delicious.com/lfborjas/barcamp3
Es un asunto de comunicación
El cliente: solicitando cosas
 El cliente: ¿Cuál es?

• Browsers
• Móviles
• Cualquier programa
– Via APIs y Servicios Web
• Sea cual sea, Habla HTTP
Internet: la red de trolls redes
 Internet: ¿Cómo encontrar algo?
• Traducir:
– Un nombre de dominio corresponde a una
dirección IP (o a un grupo)
– http://catharted.info -> 208.77.222.202
• Necesitás un nombre de dominio
– .com, aprox. 10$/año
– Ahora, te falta una lugar físico…
 Internet: ¿dónde poner algo?
• Montar un servidor propio
• O conseguir hosting
– Existen opciones gratuitas (app engine, heroku)
– Servidor compartido, virtual o dedicado
– Una solución decente puede costar 20$/mes
– Pero hay gratis o más baratos…
El servidor
 El servidor: pidiéndole cosas
• Puede ser Apache, nginx, lighttpd, node.js,
etc.
• Cuando una solicitud llega, ve qué hacer
• Pueden pedirse documentos estáticos
– Texto, pdf, css, javascript, etc.
– Buscarlos y devolverlos
• O necesitarse respuestas dinámicas
– Pasar el control a un programa (cgi)
 El servidor: adentro
• Las aplicaciones web no le responden igual a
todos
• Se pueden hacer programas sencillos (perl,
node.js, etc)
• O usar frameworks
– ruby on rails, django, cakephp, express.js, etc.
– La mayor parte es gratis
 Servidor, adentro
• A veces vas a tener que interactuar con bases
de datos
– MySQL, PostgreSQL, CouchDB, MongoDB, etc.
• Muchas veces, también gratis.
• El feelin’ es construir documentos como
respuesta
El cliente: recibiendo cosas
 El cliente: ¿Qué pasa ahí?
• Interpreta respuestas
• Browser: muestra Documentos HTML
– HTML: la estructura
– Css: el estilo: diseño, colores, fuentes, etc.
• Browser: ejecuta cosas dinámicas
– Javascript, html5
– Silverlight, Flash, etc.
 Ejemplo
• El cliente pide http://www.catharted.info
• Internet lo encuentra en 208.77.222.202
• El servidor construye un html y lo devuelve
• El browser lo muestra
• Aplicando css
• Ejecutando javascript
Pero los unicornios mágicos no van a
hacer tu app
 Sumario: gente, tiempo, dinero
• Roles: vos podés ser todos
– Programadores: lado servidor+lado cliente
– Diseñadores: css+html[5]
– Admins: servidor+base de datos
• Tiempo: cada vez necesitás menos
– Un sitio grande, tres meses; uno pequeño, días.
• Dinero: si te las ingeniás, es gratis.
– Nombre: 10-30$/año
– Hosting: 0$ ó >=15$/mes
No es nada del otro mundo
 Stalkeame Contactame
• Proyectos opensource:
http://github.com/lfborjas
• Correo: me@lfborjas.com
• Twitter/Blipea: @lfborjas
• Tumblelog: http://lfborjas.com/
• Facebook: http://www.facebook.com/lfborjas
 Referencias
• Bookmarks de lo hablado hoy
– http://www.delicious.com/lfborjas/barcamp3
• Esta presentación, en internerd
– http://www.slideshare.net/lfborjas
ANEXOS
 Dinámica + Caso de Estudio
• Hagamos una dinámica -necesitamos actores
• Casos de estudio:
– http://www.catharted.info/
• Me costó 3$ en total
• Hecho en las madrugadas de tres días
– http://about-lfborjas.appspot.com/blog/
• Gratis. (hosteado en app-engine)
• Hecho en una tarde y media.
 Sumario ¿qué tenés que hacer?
• Necesitás que te puedan encontrar y saber
responder
• Programar algo que responda dinámicamente
• A veces, bases de datos.
• A veces, Diseñar documentos (html+css)
• A veces, Programar en el lado del cliente
(js+html5)