Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducción al desarrollo web

1,460 views

Published on

Mi charla

  • Be the first to comment

  • Be the first to like this

Introducción al desarrollo web

  1. 1. Introducción al desarrollo web Marcos Vanetta (aka malev)
  2. 2. ¿Quién soy? No se estoy seguro, pero me pueden encontrar en: @malev blog.malev.com.ar
  3. 3. ¿Qué motiva a esta charla? <ul><li>Arquitectura compleja
  4. 4. Muchos conceptos nuevos
  5. 5. Frameworks actuales
  6. 6. Incompatibilidad de browsers
  7. 7. Curva de aprendizaje empinada
  8. 8. Muchos lenguajes, tools, etc. </li></ul>
  9. 9. Lenguajes y tools <ul><li>PHP
  10. 10. Joomla
  11. 11. Wordpress
  12. 12. Drupal
  13. 13. phpBB
  14. 14. phpWiki
  15. 15.
  16. 16. MVC - MVP </li></ul><ul><li>HTML
  17. 17. Javascript
  18. 18. CSS
  19. 19. PHP, Python, ruby, …
  20. 20. SQL
  21. 21. jQuery, Prototype, Mootools
  22. 22. Django, web2py, Rails, cakePHP
  23. 23. SASS o LESS
  24. 24. HTML5
  25. 25. ActionScript (flash)
  26. 26. HAML
  27. 27. CoffeeScript
  28. 28. Backbone.js, Sproutcore </li></ul>
  29. 29. “ How many freaking languages you have to learn to make a webpage?” Robert Martin
  30. 30. Programación web – 2 lugares <ul><li>Cliente </li></ul>El browser interpreta el HTML y CSS enviado desde el cliente. Ejecuta el javascript en un sandbox. <ul><li>Servidor </li></ul>Responde a las peticiones de los clientes analizando URL, parámetros y tipo de petición. En gral. responde con HTML, CSS y Javascript.
  31. 31. El cliente python -m SimpleHTTPServer
  32. 32. Génesis <ul>En el principio creó Dios los cielos y la tierra y la web. Y la web estaba desordenada y vacía, y las tinieblas estaban sobre la faz del abismo, y el Espíritu de la Web se movía sobre la faz de las aguas. Y dijo Dios: Sea el HTML; y fue el HTML. </ul>
  33. 33. HTML HTML, siglas de HyperText Markup Language, es el lenguaje de marcado . Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>).
  34. 34. HTML - Ejemplo <!DOCTYPE html> <html> <head> <title>Ejemplo de HTML</title> </head> <body> <h1>Hola PyCon</h1> <p>Esto es Junín</p> </body> </html>
  35. 35. Un viaje al pasado
  36. 37. ¿Qué teníamos en ese entonces? <ul><li>HTML
  37. 38. Estilos embebidos: </li></ul><font size=&quot;1&quot; face=&quot;Verdana, Arial&quot; color=&quot;#339999&quot; size=&quot;5&quot;> <strong>Territorial</strong> </font> <ul><li>Javascript
  38. 39. Gif animados
  39. 40. Tablas y frames </li></ul>
  40. 41. ¿Cómo son ahora? <!DOCTYPE html> <html dir='ltr' lang='en-US'> <head> <title>App47</title> <!-- ... .--> </head> <body> <div id='header'> <div class='message'>Welcome back to App47!</div> <h1 class='logo'>App47</h1> </div> <!-- ... .--> </div> </body> </html>
  41. 42. Estilos #header .message { float: right; color: white; font-size: 22px; font-family: Palatino, Georgia, serif; font-style: italic; line-height: 35px; }
  42. 43. Primer concepto Separar el contenido de la presentación
  43. 44. Comportamiento en el cliente Programamos Javascript, un lenguaje que se ejecuta en el cliente y entre otras cosas puede modificar el documento HTML y el CSS. <script> var suma; Suma = 4 + 6; alert(suma); </script>
  44. 45. Ejemplos jQuery UI
  45. 46. El servidor
  46. 47. El servidor Debe poder generar el HTML de manera dinámica desde el servidor para cada pedido desde el cliente. Debe buscar información en bases de datos, relizar pedidos a otros servidores o realizar cálculos. Ejemplo, un blog o un diario online.
  47. 48. PHP y un poco de dinamismo <html> <body> <?php echo &quot;Hello World&quot;; mysql_connect(localhost,$username,$password); @mysql_select_db($database) or die( &quot;Unable to select database&quot;); $query = &quot;INSERT INTO contacts VALUES ('','$first','$last','$phone','$mobile','$fax','$email','$web')&quot;; mysql_query($query); ?></body> </html>
  48. 49. ¿Qué pasa cuando ingresamos a una URL? Antes localhost/archivo.php El browser se conectaba con el server, el server buscaba el archivo, lo ejecutaba y se lo devuelve al browser Ahora localhost/pyconar El browser se conecta al server, el server llama a un método, el método genera una respuesta y la enviá al cliente (browser)
  49. 50. bottlepy.org
  50. 51. Ejemplo 1 from bottle import route, run @route('/') def index(): return '<b>Hola pyconar</b>' run(host='localhost', port=8080)
  51. 52. Ejemplo 2 from bottle import route, run @route('/hello/:name') def index(name='World'): return '<b>Hello %s!</b>' % name run(host='localhost', port=8080)
  52. 53. Separemos lógica de presentación
  53. 54. Templates <html> <head> <title>{{title or 'No title'}}</title> </head> <body> %include </body> </html>
  54. 55. Templates 2 %if name: Hi <b>{{name}}</b> %else: <i>Hello stranger</i> %end
  55. 56. Templates 3 %rebase layout title=title <div style=&quot;width: 50%; float:left&quot;> %leftblock() </div> <div style=&quot;width: 50%; float:right&quot;> %rightblock() </div>
  56. 57. Preguntas ¿?

×