Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Destaque (11)
Semelhante a Introducción al desarrollo web
Semelhante a Introducción al desarrollo web (20)
Introducción al desarrollo web
- 1. Introducción al desarrollo web Marcos Vanetta (aka malev)
- 2. ¿Quién soy? No se estoy seguro, pero me pueden encontrar en: @malev blog.malev.com.ar
- 7. Curva de aprendizaje empinada
- 8. Muchos lenguajes, tools, etc.
- 10. Joomla
- 11. Wordpress
- 12. Drupal
- 13. phpBB
- 14. phpWiki
- 15. …
- 17. Javascript
- 18. CSS
- 19. PHP, Python, ruby, …
- 20. SQL
- 22. Django, web2py, Rails, cakePHP
- 23. SASS o LESS
- 24. HTML5
- 26. HAML
- 27. CoffeeScript
- 29. “ How many freaking languages you have to learn to make a webpage?” Robert Martin
- 31. El cliente python -m SimpleHTTPServer
- 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. 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. Un viaje al pasado
- 39. Gif animados
- 40. Tablas y frames
- 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>
- 42. Estilos #header .message { float: right; color: white; font-size: 22px; font-family: Palatino, Georgia, serif; font-style: italic; line-height: 35px; }
- 43. Primer concepto Separar el contenido de la presentación
- 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>
- 46. El servidor
- 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.
- 48. PHP y un poco de dinamismo <html> <body> <?php echo "Hello World"; mysql_connect(localhost,$username,$password); @mysql_select_db($database) or die( "Unable to select database"); $query = "INSERT INTO contacts VALUES ('','$first','$last','$phone','$mobile','$fax','$email','$web')"; mysql_query($query); ?></body> </html>
- 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)
- 50. bottlepy.org
- 51. Ejemplo 1 from bottle import route, run @route('/') def index(): return '<b>Hola pyconar</b>' run(host='localhost', port=8080)
- 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)
- 53. Separemos lógica de presentación
- 54. Templates <html> <head> <title>{{title or 'No title'}}</title> </head> <body> %include </body> </html>
- 55. Templates 2 %if name: Hi <b>{{name}}</b> %else: <i>Hello stranger</i> %end
- 56. Templates 3 %rebase layout title=title <div style="width: 50%; float:left"> %leftblock() </div> <div style="width: 50%; float:right"> %rightblock() </div>
- 57. Preguntas ¿?