Introducción a la Web Jesús Arias Fisteus Computación Web (2017/18) Computación Web (2017/18) Introducción a la Web 1
La World Wide Web La World Wide Web (WWW, o simplemente la Web) es un espacio de información en el cual los artículos de interés, llamados recursos, se identifican mediante identificadores globales llamados Identificador de Recursos Uniforme (Uniform Resource Identifier, URI) entrelazados mediante hipervínculos, y se accede a ellos mediante Internet. Computación Web (2017/18) Introducción a la Web 2
Historia de la Web 1994 XHTML 1.0 HTTPS (RFC 2818) 1999 2000 2004 2008 HTTPS 1993 MOSAIC (first graphical web browser) 1998 CSS 2 2011 CSS 3 2015 HTTP 2 1995 1989 Tim Berners-Lee proposes the project at CERN 1990 First working prototype HTML 2.0 JavaScript 1996 2001 2005 AJAX 2007 iphone 2014 HTML 5 2016 1991 Public presentation outside CERN HTML Tags HTTP 0.9 HTTP 1.0 CSS 1 1997 HTML 3.2 HTML 4.0 HTTP 1.1 2003 2006 Computación Web (2017/18) Introducción a la Web 3
Lado del cliente El cliente utiliza normalmente un navegador (Google Chrome, Firefox, etc.) para acceder a un recurso (típicamente, una página Web). El recurso tiene un Identificador de Recurso Uniforme (URI) que lo identifica: Por ejemplo: http://www.uc3m.es/inicio Computación Web (2017/18) Introducción a la Web 4
Lado del cliente El navegador sigue una serie de pasos para cargar y mostrar un recurso: 1. Analiza el URI del recurso. 2. Obtiene una dirección IP para el nombre de dominio mediante una consulta al Sistema de Nombres de Dominio (DNS). 3. Abre una conexión TCP con el servidor. 4. Envía una petición HTTP. 5. Recibe la respuesta HTTP que contiene el recurso (típicamente, un documento HTML). 6. Analiza el documento HTML. 7. Envía peticiones HTTP para el resto de recursos necesarios (hojas de estilos, imágenes, código JavaScript, etc.). 8. Representa el documento HTML. 9. Cierra la conexión TCP si no se prevé que sea necesaria en un futuro inmediato. Computación Web (2017/18) Introducción a la Web 5
Paso 1: analiza el URI Identificador de Recursos Uniforme (URI) http://www.uc3m.es/inicio protocolo nombre de dominio ruta Computación Web (2017/18) Introducción a la Web 6
Paso 2: resuelve el nombre de dominio del servidor Usa el Sistema de Nombres de Dominio (DNS) para obtener una dirección IP que se corresponda con el nombre de dominio del servidor. P.e. para www.uc3m.es se obtiene la dirección IP 176.58.10.138. Computación Web (2017/18) Introducción a la Web 7
Paso 3: abre una conexión TCP con el servidor Abre una conexión mediante el Protocolo de Control de Transmisión (Transmission Control Protocol, TCP) con la dirección IP del servidor, puerto 80 (puerto por defecto de HTTP). Se usará esta conexión para enviar peticiones HTTP y recibir sus respuestas. P.e. se abre una conexión TCP con 176.58.10.138 puerto 80. Computación Web (2017/18) Introducción a la Web 8
Paso 4: envía una petición TCP El navegador envía una petición HTTP a través de la conexión TCP: GET /Inicio HTTP/1.1 Host: www.uc3m.es Connection: keep-alive Cache-Control: max-age=0 User-Agent: Chrome/62.0.3202.89 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9 Accept-Encoding: gzip, deflate, br Accept-Language: es-es,es;q=0.9,en;q=0.8,en-us;q=0.7 Computación Web (2017/18) Introducción a la Web 9
Peticiones HTTP Las peticiones HTTP incluyen: Una ĺınea de petición: Método: GET, POST, PUT, DELETE, HEAD, OPTIONS, etc. Ruta del recurso. Versión del protocolo. Cabeceras: Información adicional acerca del cuerpo del mensaje, para negociación de contenido, autenticación, caché de recursos, cookies, etc. Un cuerpo de la petición: Recurso a transmitir al servidor (p.e. datos de un formulario, fichero a subir). No se permite en peticiones GET. Computación Web (2017/18) Introducción a la Web 10
Ejemplo de petición HTTP cabeceras ruta GET /Inicio HTTP/1.1 Host: www.uc3m.es Connection: keep-alive Cache-Control: max-age=0 User-Agent: Chrome/62.0.3202.89 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9 Accept-Encoding: gzip, deflate, br Accept-Language: es-es,es;q=0.9,en;q=0.8,en-us;q=0.7 Computación Web (2017/18) Introducción a la Web 11
Paso 5: recibe la respuesta HTTP El navegador recibe la respuesta HTTP que incluye el recurso pedido: HTTP/1.1 200 OK Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=E26E82630...; Domain=www.uc3m.es; HttpOnly Cache-Control: no-store Last-Modified: Fri, 10 Nov 2017 11:44:28 CET Content-Type: text/html;charset=utf-8 Transfer-Encoding: chunked Date: Fri, 10 Nov 2017 10:44:28 GMT <!DOCTYPE html> <html lang="es" class="no-js"> <head> <title>inicio UC3M</title> (...) Computación Web (2017/18) Introducción a la Web 12
Respuestas HTTP Las respuestas HTTP incluyen: Línea de estado: Versión del protocolo. Código de estado (200, 404, etc.). Frase de motivo ( OK, Not Found, etc.). Cabeceras: Información adicional acerca del cuerpo del mensaje, caché de recursos, cookies, etc. Cuerpo de la respuesta: Recurso a transmitir al cliente (p.e. una página HTML, una imagen, una hoja de estilos CSS, etc.). Computación Web (2017/18) Introducción a la Web 13
Ejemplo de respuesta HTTP cabeceras cuerpo código de estado HTTP/1.1 200 OK y frase de motivo Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=E26E82630...; Domain=www.uc3m.es; HttpOnly Cache-Control: no-store Last-Modified: Fri, 10 Nov 2017 11:44:28 CET Content-Type: text/html;charset=utf-8 Transfer-Encoding: chunked Date: Fri, 10 Nov 2017 10:44:28 GMT <!DOCTYPE html> <html lang="es" class="no-js"> <head> <title>inicio UC3M</title> (...) Computación Web (2017/18) Introducción a la Web 14
Paso 6: analiza el documento HTML Un documento HTML es un fichero de texto compuesto por marcas. Incluye: Una cabecera: metadatos acerca del documento (p.e. su título). Un cuerpo: contenido a ser representado, incluyendo párrafos, hipervínculos a otros recursos, listas, tablas, imágenes, vídeos, secciones, títulos de secciones, formularios, etc. Computación Web (2017/18) Introducción a la Web 15
Ejemplo de documento HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>main characters in Harry Potter</title> <link rel="stylesheet" href="example.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/ jquery.min.js"></script> <script src="example.js" type="text/javascript"></script> </head> <body> <h1>main characters</h1> <p> These are the <strong>main characters</strong> in Harry Potter: </p> <ul> <li id="harry"><a href="harry.html">harry Potter</a></li> <li id="ron"><a href="ron.html">ron Weasley</a></li> <li id="herm"><a href="hermione.html">hermione Granger</a></li> </ul> <div> <img class="image" src="harry-potter.jpeg" alt="main character's portrait"> </div> </body> </html> Computación Web (2017/18) Introducción a la Web 16
Paso 7: envía peticiones HTTP para recursos adicionales El documento HTML puede hacer referencia a otros recursos, en el mismo servidor o en uno distinto, que son necesarios para representarlo correctamente: Imágenes. Hojas de estilos. Código fuente JavaScript. Computación Web (2017/18) Introducción a la Web 17
Paso 8: representar el documento HTML El documento HTML contiene la información que debe ser representada. Las hojas de estilos CSS contienen instrucciones acerca de cómo representar visualmente esta información. El código JavaScript añade dinamismo a la página Web. Computación Web (2017/18) Introducción a la Web 18
Ejemplo de representación de HTML Computación Web (2017/18) Introducción a la Web 19
Ejemplo de documento CSS body { background: rgb(245, 245, 245); } h1, strong { color: navy; }.image { transition: all 0.5s ease; border: 2px solid black; }.image:hover { border-radius: 50 %; transform: rotate(360deg); filter: brightness(200 %); } Computación Web (2017/18) Introducción a la Web 20
JavaScript Los programas JavaScript hacen la página HTML interactiva: Reaccionando a las acciones del usuario en la página Web (manejadores de eventos). Modificando dinámicamente la página Web (API DOM). Los navegadores implementan un conjunto de APIs estándar para facilitar el desarrollo de aplicaciones Web complejas en el lado del cliente: Websockets, eventos enviados por el servidor, interacción con la reproducción de audio y vídeo, acceso a cámara Web y micrófono, almacenamiento de datos en el lado del cliente, notificaciones de escritorio, servicios de geolocalización, vídeo conferencia, gráficos acelerados por hardware, acceso a sensores, vibración, arrastrar y soltar, etc. Computación Web (2017/18) Introducción a la Web 21
Computación var reset_image Web (2017/18) = function(canvas, image) Introducción { a la Web 22 Ejemplo de programa JavaScript $(function() { var image = $("img"); var canvas = image_to_canvas(image); $("#harry").hover(function(){ draw_circle(canvas, 100, 70, 70); }, function() { reset_image(canvas, image); }); }); var image_to_canvas = function(image) { canvas = $("<canvas>").addclass('image'); canvas.height = image.height; canvas.width = image.width; reset_image(canvas, image); image.replacewith(canvas); return canvas } var draw_circle = function(canvas, cx, cy, r) { var ctx = canvas[0].getcontext("2d"); ctx.beginpath(); ctx.strokestyle = "red"; ctx.linewidth = 5; ctx.arc(cx, cy, r, 0, 2 * Math.PI, true); ctx.stroke(); }
Paso 9: cierra las conexiones TCP abiertas El navegador mantiene las conexiones TCP abiertas momentáneamente, y las reutiliza si es necesario enviar nuevas peticiones a los mismos servidores. Tras un pequeño período de inactividad en una conexión (de 10 a 30 segundos típicamente), el navegador la cierra. Computación Web (2017/18) Introducción a la Web 23
Lado del servidor Un servidor Web es un programa que acepta conexiones TCP entrantes, analiza las peticiones HTTP recibidas y genera las respuestas HTTP apropiadas que incluyen los recursos pedidos. Los recursos pueden ser: Estáticos: son exactamente iguales para cada petición, y el servidor simplemente los carga desde su sistema de ficheros. Dinámicos: son generados sobre la marcha para cada petición por un programa que se ejecuta normalmente en el servidor (aunque a veces se ejecuta en el lado del cliente). Computación Web (2017/18) Introducción a la Web 24
Recursos dinámicos Se ejecuta una aplicación Web en el lado del servidor. Las rutas HTTP se mapean a distintos componentes de la aplicación, ya sean recursos estáticos o programas que generen recursos dinámicos. La aplicación suele almacenar datos en y recuperar datos desde una base de datos. Computación Web (2017/18) Introducción a la Web 25
Entornos populares de ejecución de aplicaciones Web Lenguaje de programación PHP Ruby Python Java JavaScript Varios lenguajes Algunos entornos bien conocidos Laravel, CodeIgniter, CakePHP, Symphony Rails Django, Flask Java Server Faces, Spring MVC, Vaadin Express, Meteor, Angular, React ASP.NET Computación Web (2017/18) Introducción a la Web 26
HTTP Seguro (HTTPS) Adaptación de HTTP para comunicaciones seguras, donde los mensajes se transmiten sobre el protocolo Seguridad de la Capa de Transporte (Transport Layer Security, TLS): La conexión es privada, dado que los datos se cifran mediante criptografía simétrica. La identidad del servidor puede ser comprobada mediante la infraestructura de clave pública. La integridad de los datos puede ser comprobada, esto es, se pueden detectar la pérdida y alteración de datos durante la transmisión. Se utiliza el puerto 443 de TCP por defecto. Computación Web (2017/18) Introducción a la Web 27
Formularios de HTML Se usan formularios de HTML para pedir información al usuario desde una página HTML. HTML define un conjunto de controles de formulario tales como: Campos de texto de una o varias ĺıneas. Campos para contraseñas, direcciones de correo electrónico, números de teléfono, búsqueda de texto, números, etc. Campos para fechas y horas, colores, etc. Listas desplegables. Campos para subida de ficheros. Campos ocultos. Botones (en especial, botones de envío). Los datos recogidos en un formulario se envían desde el navegador al servidor mediante una petición HTTP. Ejemplo: https://html5doctor.com/demos/forms/forms-example.html Computación Web (2017/18) Introducción a la Web 28
Cookies El protocolo HTTP no mantiene estado, esto es, cada petición es independiente del resto de peticiones. Las cookies permiten al servidor almacenar pequeñas cantidades de datos en el navegador del usuario, que serán transferidas desde el navegador en futuras peticiones al mismo servidor: Los servidores envían cookies a los navegadores añadiendo cabeceras Set-Cookie a sus respuestas HTTP. Los navegadores envían cookies a los servidores añadiendo cabeceras Cookie a sus peticiones HTTP. Computación Web (2017/18) Introducción a la Web 29
Cookies HTTP/1.1 200 OK Server: Apache-Coyote/1.1 Set-Cookie: JSESSIONID=E26E82630...; Domain=www.uc3m.es; HttpOnly Cache-Control: no-store Last-Modified: Fri, 10 Nov 2017 11:44:28 CET Content-Type: text/html;charset=utf-8 Transfer-Encoding: chunked Date: Fri, 10 Nov 2017 10:44:28 GMT <!DOCTYPE html> <html lang="es" class="no-js"> <head> <title>inicio UC3M</title> (...) Computación Web (2017/18) Introducción a la Web 30
Cookies GET /Inicio HTTP/1.1 Host: www.uc3m.es Connection: keep-alive Cookie: JSESSIONID=E26E82630... Cache-Control: max-age=0 User-Agent: Chrome/62.0.3202.89 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9 Accept-Encoding: gzip, deflate, br Accept-Language: es-es,es;q=0.9,en;q=0.8,en-us;q=0.7 Computación Web (2017/18) Introducción a la Web 31
Cookies Una cookie es una pequeña cadena de texto que contiene: Un nombre. Un valor. Atributos: Domain y Path: especifican en qué peticiones HTTP debe el navegador incluir la cookie en función de su nombre de dominio y ruta. Expires: indica el período durante el cual una cookie persistente puede ser almacenada y utilizada por el navegador. Secure: indica al servidor que sólo debe enviar la cookie en peticiones HTTPS, para mantenerla privada durante su transmisión. HttpOnly: indica al navegador que no debe permitir que programas en el lado del cliente accedan a la cookie, para defenderse de ataques cross site scripting. Computación Web (2017/18) Introducción a la Web 32
Cookies Algunos usos típicos de las cookies son los siguientes: Gestión de sesiones: el usuario se autentica al principio para crear una sesión (el servidor envía una cookie con un token de sesión). El servidor identifica peticiones subsiguientes como parte de la misma sesión porque incluyen este token de sesión. Almacenamiento de preferencias: se pueden almacenar en cookies las preferencias del usuario para el sitio Web. Rastreo de usuarios: los sitios Web puede utilizar cookies para rastrear el comportamiento de los usuarios (cuando terceros hacen este rastreo, se considera que su uso es abusivo). Computación Web (2017/18) Introducción a la Web 33
Servicios Web Un servicio Web es un servicio proporcionado por un programa de ordenador a otros programas, en el cual la comunicación tiene lugar a través de la World Wide Web. Los servicios Web son una forma habitual de integrar más de una aplicación o distribuir los módulos de una misma aplicación. Hay principalmente dos tecnologías para la implementación de servicios Web: REST (Representational State Transfer): mensajes simples sin estado sobre HTTP. SOAP sobre HTTP: una pila de protocolos completa para mensajería compleja y con capacidad de mantener estado. Hay dos formatos frecuentes para representar los datos intercambiados: JSON (JavaScript Object Notation). XML (Extensible Markup Language). Computación Web (2017/18) Introducción a la Web 34
Referencias Andrew S. Tanenbaum, David J. Wetherall, Computer Networks, 5th ed., Prentice Hall (2010): Capítulo 7.3 (The World Wide Web). Acceso en ĺınea en Safari Computación Web (2017/18) Introducción a la Web 35