Servidores Web E2B2C Leandro Radusky Esteban Lanzarotti Nov 2014 Agenda Mañana HTTP: Arquitectura Cliente/Servidor: introducción teórica. Elementos de una página web: HTML, JavaScript y CSS básicos. python-bottle: montaje de un servidor web minimal y análisis de su funcionamiento. Tarde Conceptos del patron de diseño de sistemas Model-View-Controller(MVC). Conceptos teóricos y análisis de su utilidad para el montaje de servidores web. Montaje de un servidor con arquitectura MVC utilizando la herramienta Django. Descripción de las diferentes herramientas disponibles en la actualidad para el desarrollo de servidores web y análisis comparativo de las mismas. Contexto: OSI-ISO Application Layer Comunicación entre dispositivos Páginas web: ¿Que son? ● ● ● Una página Web consiste en un archivo HTML base el cual incluye varias referencias a otros recursos Web. Los recursos Web pueden ser archivos HTML, imágenes JPEG, Java applet, archivos de audio,... Cada recurso es direccionable por un URL. URL: Uniform Resource Locator Ejemplos: http://www.google.com/ http://localhost/phpmyadmin/ http://proxy.fcen.uba.ar:8080/ http://www.w3.org/ HTTP: HyperText Transfer Protocol ● ● ● La primer versión (HTTP 1.0) es de 1996 y la siguiente versión (HTTP 1.1) es de 1999 Es un protocolo cliente-servidor, donde el cliente inicia la conección, realiza un pedido (REQUEST) de los recursos que necesita y el servidor se los envia en respuesta (RESPONSE) No conserva “estado”. No mantiene memoria entre los distintos pedidos de un cliente HTTP: diferencia entre versiones HTTP 1.1 HTTP 1.0 HTTP: diferencia entre versiones HTTP 1.1 HTTP 1.0 HTTP Proxy ● ● ● ● Los proxies HTTP funcionan como caches locales. Muchas veces son usados para establecer filtros. Reciben conexiones TCP de un dominio interno (i.e.: la UBA) y las resuelven hacia Internet Se suelen configurar a explicitamente aunque, a veces se usan transparentemente HTTP Messeges El protocolo HTTP define mensajes orientados a texto (texto plano) para ser enviados por el cliente y el servidor con la siguiente estructura: START_LINE<CRLF> MESSAGE_HEADER<CRLF> <CRLF> MESSAGE_BODY<CRLF> HTTP Requests Mensajes del cliente al servidor HTTP Requests Mensajes del cliente al servidor Los mas usados son: – HEAD, GET y POST HTTP Requests Mensajes del cliente al servidor Los mas usados son: – HEAD, GET y POST HTTP Responses Mensajes servidor al cliente HTTP Responses Mensajes servidor al cliente HTTP Request y Response Tecnologías Web Tecnologías Web: Server side Usos • • • Programar aplicaciones web Procesar pedidos del usuario Interactuar con almacenamieto (SQL, archivos, etc). Lenguajes • • • • PHP Ruby Python ASP.Net in C#, C++, or Visual Basic Tecnologías Web: Client side Usos • • • • Programar eventos dinamicos, sin recargar la página entera Hacer páginas interactivas. Interactuar con variables del lado cliente (Cookies) Realizar requests al server (JQuery) Lenguajes • • • HTML CSS JavaScript HTML: HyperText Markup Language ● ● ● ● ● HTML es un lenguaje estructurado en forma de arbol Esta compuesto por elementos HTML llamados tags. Es posible hacer comentarios entre <!-- y --> Cada tag sirve para distintos fines: estructurar el texto, dar estilo, embeber imagenes, etc Cada documento html tiene tags que van siempre: <head> y <body> que a su vez, estan dentro de <html> HTML: Tags CSS: Cascading Style Sheets ● ● ● Dan estilo al documento HTML, generalizando los aspectos estéticos para cada tag que se especifique En general vienen en un archivo separado: otro recurso para pedirle al servidor Definen principalmente colores, tamaños, fuentes, margenes, bordes, etc Javascript ● Programación del lado del cliente (y del servidor! Node.js) ● ● ● Lenguaje de scripting Muy relacionado con Java: Orientado a Objetos Basado en prototipos Bottle: Hello world! Linea por linea 1er linea: imports relativos al uso de bottle propiamente dicho ( route y run ) 2da linea: define la ruta para el recurso, en este caso es http://localhost/hello 3er y 4ta linea: Definen el código que se ejecuta cuando se pide al recurso 5ta linea: Establece la “escucha” del servicio, en el puerto 8080 Bottle: Ejemplo 1 ● ● Un “hola mundo” un poco mas sofisticado Usando parámetros en la definición de la función, es posible crear rutas con variables – http://localhost/hello/NOMBRE Bottle: Ejemplo 2 ● ● Ahora, un login ... En este ejemplo podemos ver un formulario, ¿que tipo de request HTTP se usa? Bottle: Ejemplo 3 ● Rutas estáticas ● Para ofrecer css, por ejemplo... … o imágenes estáticas como ser logotipos … o archivos con código javascript