Introducción al desarrollo de aplicaciones web

1. Introducción al desarrollode aplicaciones web Arquitectura web en aplicaciones empresariales basadas en tecnología Java/J2EE César Fernández Acebal Universidad de Oviedo www.cesaracebal.com acebal@uniovi.es

2. Índice • Introducción a Internet y la Web • HTTP, HTML, URL, servidores web… • Introducción a las páginas dinámicas • CGI, ASP, JSP y Servlets, etc. • Mantenimiento de la sesión del usuario • Servidores de aplicaciones

3. Introducción a Internet y la Web • La Web es una vasta colección de documentos en Internet que están enlazados a través de los hiperenlaces • Internet: millones de ordenadores conectados • Un conjunto de redes heterogéneas conectadas entre sí mediante el protocolo TCP/IP • Los hiperenlaces permiten a los usuarios acceder a documentos situados en otros servidores web, sin preocuparse de su ubicación

4. Tecnologías clave de Internet Veamos una somera introducción a las tecnologías fundamentales sobre las que se sustenta Internet, que serán útiles para comprender posteriormente algunas de las dificultades intrínsecas del desarrollo de aplicaciones web.

5. Tecnologías claves de Internet • La infraestructura de Internet es proporcionada fundamentalmente por tres tecnologías: • La conmutación de paquetes • El protocolo TCP/IP • La arquitectura cliente/servidor

6. Conmutación de paquetes Consiste en dividir un mensaje en trozos denominados “paquetes”, enviar éstos por diferentes caminos y ensamblarlos una vez que lleguen a su destino para recomponer el mensaje original. • Surge como respuesta a las redes de conmutación de circuitos, como la telefónica • El primer libro sobre esta tecnología data de 1964 (Leonard Kleinrock) y luego fue desarrollada por otros en laboratorios de investigación de Estados Unidos e Inglaterra • Con la conmutación de paquetes, la capacidad de una red (su “ancho de banda”) se incrementa en un factor de 100 o más

7. Conmutación de circuitos • Era la que usaban las primeras redes de ordenadores, a imagen y semejanza de la telefónica • En ellas, se establece una comunicación “punto a punto” entre ambos extremos mientras tiene lugar la comunicación • Existe un canal “dedicado” entre ambos, independientemente de los datos que se estén enviando • Problemas: • Ineficiente • Poco fiable • (Si se corta el canal, se interrumpe la conexión)

8. Ejemplo de conmutación de circuitos Una vez establecido el circuito, es siempre el mismo durante toda la conexión. Telecable Telefónica

9. Conmutación de paquetes • Es la tecnología que emplea la red Internet • Los mensajes se dividen en paquetes • A cada paquete se le añaden la dirección de origen y destino, el número de secuencia, información de control de errores… • En vez de enviarse directamente a la dirección de destino, los paquetes viajan de una máquina a otra hasta alcanzar su destino • Estas máquinas se denominan routers • Ordenadores que interconectan las diferentes subredes y que son capaces de encaminar los paquetes de una a otra • Para asegurar que siguen la mejor ruta disponible, utilizan programas llamados algoritmos de encaminamiento (“routing algorithms”)

10. Nº de bytes 144 Nº de paquetes 4 Posición 1 Datos La heroica Origen 192.168.1.1 Destino 10.0.0.1 Origen 192.168.1.1 Origen 192.168.1.1 Destino 10.0.0.1 Destino 10.0.0.1 Nº de bytes 144 Nº de bytes 139 Nº de paquetes 4 Nº de paquetes 4 Posición 4 Posición 3 Datos rmía la si Datos esta. Origen 192.168.1.1 Destino 10.0.0.1 Nº de bytes 144 Nº de paquetes 4 Posición 2 Datos ciudad do Ejemplo El mensaje original a transmitir se divide en cuatro paquetes, con cierta información de control adicional que permita su reconstrucción en el destino. La heroica ciudad dormía la siesta.

11. Ventajas de la conmutación de paquetes • Al no tener un circuito dedicado, puede hacer uso en cada momento de cualquiera de las rutas disponibles • Hace uso de casi la totalidad del ancho de banda disponible • “Casi la totalidad” porque es necesario incluir información de control, que no formaría parte del mensaje en sí a transmitir • Si algunas líneas estuvieran caídas o demasiado ocupadas, los paquetes se envían por otra de las disponibles

12. TCP/IP • Si bien la conmutación de paquetes supuso un gran avance en la capacidad de las redes de comunicaciones, era necesario implementar el modo de llevarla a cabo • Eso es de lo que se encargan los protocolos TCP/IP • Transmission Control Protocol (TCP) • Internet Protocol (IP) • Un protocolo es un conjunto de reglas para formatear, ordenar y comprimir mensajes, comprobar errores, etc. • Pueden ser implementados por hardware o por software

13. Cuatro capas • La familia de protocolos TCP/IP se divide en cuatro capas: • La capa de red es la de más bajo nivel • Representa el medio físico encargado de enviar en última instancia los 0 y 1 que componen cada mensaje • Diversas tecnologías: Ethernet, ATM… • La capa de Internet es donde se sitúa el protocolo IP • Esquema de direcciones, encaminamiento de los mensajes… • En la capa de transporte está TCP • Envía acuses de recibo, reagrupa el mensaje en destino, vuelve a mandar los paquetes perdidos o defectuosos… • Por último, en la capa de aplicación están los programas que hacen uso de los servicios proporcionados por las capas inferiores • HTTP (HyperText Transfer Protocol), FTP (File Transfer Protocol), SMTP (Simple Mail Transfer Protocol)…

14. Arquitectura de TCP/IP

15. Encaminamiento de paquetes con TCP/IP

16. Direcciones IP • Cada ordenador conectado a Internet debe tener una dirección para poder recibir los paquetes TCP • Ésta puede ser: • Estática • Fija, siempre la misma • Dinámica • Por ejemplo, cada vez que nos conectamos a Internet con un módem telefónico, nuestro proveedor de Internet (ISP, Internet Service Provider) nos asigna una dirección temporal • Las direcciones IP son números de 32 bits separados en cuatro partes (por ejemplo, 156.35.94.5) • Cada uno va de 0 a 255; esto nos da un total de 232 direcciones (algo más de cuatro mil millones)

17. IPv6 • El problema es que con cada vez más y más dispositivos conectados, este esquema de direcciones está cercano a quedarse pequeño • Por ello, se está desarrollando una nueva versión, denominada IPv6 para sustituir a la actual (IPv4), que con 128 bits podrá tener 3,4 × 1038direcciones • Además, mejora otras deficiencias de IPv4

18. Nombres de dominio y URL • Para no tener que recordar direcciones IP tal cual, éstas pueden ser representadas mediante nombres de dominio (por ejemplo, www.euitio.uniovi.es) • El sistema de nombres de domino (DNS) permite que éstas se resuelvan a direcciones IP • Ejemplo: ping www.euitio.uniovi.es • Los URL (Uniform Resource Locator) son las direcciones que escribimos en el navegador • Como http://www.euitio.uniovi.es/

19. Computación Cliente/Servidor • En este modelo de computación distribuida, un cliente solicita una acción a un servidor, que le devuelve los resultados • Puede haber diversos tipos de clientes, desde los más ligeros (como un navegador Web, que únicamente es capaz de mostrar documentos HTML) hasta clientes pesados que también realizan procesamiento • Surgen como respuesta a los mainframes de los 60 y 70 (con 128 KB de RAM y y discos duros de 10 MB) • Despega este modelo con el advenimiento de los ordenadores personales • Toda Internet es una inmensa red cliente/servidor

20. Esquema Cliente/Servidor

21. Introducción a la Web Ahora, veremos los principios básicos de la World Wide Web (WWW o Web, a secas): lenguajes, protocolos, servidores y clientes, etcétera.

22. Internet ≠ Web • Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto • Un programa cliente en un ordenador accede a un programa servidor en otro ordenador remoto • La Web es el sistema de hipertexto que funciona sobre Internet como uno de sus servicios • En este caso, el programa cliente es nuestro navegador, y el servidor el programa que hace de servidor web que está ejecutándose en el ordenador remoto y que se encarga de entregar el documento solicitado a nuestro navegador

23. Nacimiento de la World Wide Web • En 1989, Tim Berners-Lee, en el laboratorio europeo de partículas (CERN), en Suiza, crea un lenguaje de etiquetas para representar y enlazar documentos • HTML —HyperText Markup Language • Lenguaje de Marcado de Hipertexto Tim Berners-Lee • Berners-Lee creó las versiones iniciales de: • HTML, HTTP, un servidor web y un navegador • Los cuatro componentes esenciales de la Web

24. Esquema general Cliente/Servidor Petición Red Servidor Respuesta Cliente

25. Visión general de la Web www.cesaracebal.com index.html Internet enlace El usuario teclea http://www.cesaracebal.com/ en su navegador www.uniovi.es

26. Visión general de la Web • El usuario solicita un documento tecleando su dirección en el navegador: http://www.uniovi.es • Es lo que se denomina un URL (localizador uniforme de recursos) • El cliente busca en el DNS cuál es la IP de www.uniovi.es: 156.35.14.3 • Cada ordenador en Internet está identificado por una dirección única denominada IP • El DNS traduce de nombres lógicos a direcciones físicas • Navegador y servidor web comienzan un diálogo a través del protocolo HTTP (protocolo de transferencia de hipertexto) • GET /HTTP/1.0 • El servidor, si todo es correcto, devuelve el documento solicitado más información adicional

27. Visión general de la Web • El navegador mira el tipo de documento devuelto (MIME) • Si es “text/html” es un documento HTML, lo visualiza el propio navegador • Si es otro tipo de documento se ejecutará el programa que tenga asociado, o nos preguntará si queremos guardar el documento en nuestro ordenador • Nota: estos tipos MIME los podemos configurar en nuestro navegador

28. Funcionamiento de la Web Éste envía una petición al servidor Web HTTP Tecleamos una dirección en el navegador (por ejemplo, www.euitio.uniovi.es) Quien devuelve la página solicitada (en este caso, la index.html del directorio raíz) Y el navegador se encarga de interpretar el código HTML y mostrar el resultado

29. Funcionamiento de la Web • Un servidor web es un ordenador en Internet que sirve páginas web a petición • Para ello, debe tener un programa ejecutándose que haga de servidor web: Apache, IIS, etcétera • El usuario accede a la web a través de un navegador (browser) • Se encarga de solicitar las páginas web al servidor y de mostrarlas

30. HTML • Es el lenguaje de creación de páginas Web • Al menos, de las páginas “estáticas” • Era imprescindible que la misma información se pudiese ver en diferentes plataformas • Por tanto, Berners-Lee diseñó un lenguaje de estructuración de documentos, no de presentación (ésta se dejaba al programa cliente)

31. HTML es un lenguaje • Como tal, tiene unas reglas que deben ser cumplidas, esto es, una sintaxis, una gramática... igual que el español o cualquier otro lenguaje informático • Es además un lenguaje informático, para ser procesado por ordenadores; pero no es un lenguaje de programación

32. ¿Por qué de marcado? • ¿Qué vemos de un vistazo en el siguiente texto? Acme Computer Corp. Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of top-notch experts. We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing. Have a look at our product catalog for some examples of our innovative approach. • Que tiene un título y dos párrafos • Pero un ordenador sólo vería un montón de caracteres • Necesitamos un modo de indicarle la estructura del documento

33. HTML, lenguaje de hipertexto • Por hipertexto designamos al texto al que se le añade una propiedad: determinadas porciones de texto pueden ser enlazadas a otros documentos • De ahí surge el concepto de navegación: surcamos el Web yendo de unos enlaces a otros • El hipertexto debe ser utilizado en los sitios web para facilitar al usuario la labor de búsqueda de la información

34. ¿Qué necesitamos para crear un documento HTML? • Un editor de texto • ¡Ojo!, no un procesador de textos tipo el Word, por ejemplo • Debe ser texto plano, sin formato (p. ej., con el Bloc de Notas) • Le daremos la extensión .html o .htm, y un nombre sin espacios ni caracteres especiales • Nota: ninguna de las dos características son obligatorias, pero nos ahorrarán problemas

35. ¿Y para verlo? • Un programa cliente que entienda lenguaje HTML (que pueda visualizar de alguna manera documentos HTML) • Técnicamente, recibe el nombre de HTML User Agent • Un ejemplo de agente de usuario son los navegadores (literalmente, hojeadores) web (web browsers) • El navegador es quien se encarga de la presentación del documento (el estándar no especifica cómo debe visualizarse cada elemento)

36. Especificación de HTML • La especificación del lenguaje HTML y de la mayoría de tecnologías relacionadas con el Web está definida por el World Wide Web Consortium (W3C) • www.w3c.org • Nota: Ahora, HTML ha dado lugar a una variación del mismo denominada XHTML

37. El World Wide Web Consortium (W3C) • Consorcio formado por cerca de 500 organizaciones que dicta los estándares de la Web • HTML, CSS, XML, XHTML, DOM… • http://www.w3.org • Objetivo: promover la evolución de la Web garantizando que las distintas tecnologías funcionen bien conjuntamente • Dirigido por Tim Berners-Lee, el inventor de la Web, en 1989 • Premio Príncipe de Asturias de Investigación Científica y Técnica 2002 Tim Berners-Lee

38. La Oficina Española del W3C • En octubre de 2003 se presentó la Oficina Española del W3C, sita en Asturias • www.w3c.es • Concretamente, albergada en las instalaciones de la Fundación CTIC, en el Parque Científico Tecnológico de Gijón • Responsables de la Oficina: • José Manuel Alonso • Responsable de la oficina • Jesús García • Coordinador • Experto en accesibilidad Acto de presentación de la Oficina Española, en el Hotel de la Reconquista (Oviedo)

39. Ejemplo de documento HTML holaMundo.html <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Introducción a HTML</title> </head> <body> <h1>Mi primera página Web</h1> <p> Éste es el equivalente al típico <em>¡Hola, mundo!</em> pero en HTML (cuya <a href="http://www.w3.org/MarkUp/" title="Especificación de las distintas versiones de HTML y XHTML en el W3C">especificación</a> puede encontrarse en el sitio Web del <acronym title="World Wide Web Consortium">W3C</acronym>). </p> </body> </html>

40. HTTP • HTTP (HyperText Transform Protocol) es el protocolo usado para transferir páginas web • Es el modo en que un navegador se comunica con un servidor Web (Apache, Internet Information Server…) • Es un protocolo sin estado • La sesión termina en cuanto se devuelve el objeto solicitado • Incluso, si una página contiene otros objetos (imágenes, frames, etc.) cada uno de ellos inicia una nueva petición HTTP

41. HTTP HTTP TCP/IP Pero… ¿y TCP/IP? • ¿No era TCP/IP el conjunto de protocolos sobre los que sustenta Internet? ¿Qué es eso de HTTP? • La comunicación entre el navegador y el servidor web se realiza mediante HTTP • La transmisión efectiva de información la controla TCP/IP

42. Ejemplo de mensaje HTTP Petición GET / HTTP/1.0 > > Respuesta < HTTP/1.0 200 OK < Date: Wed, 18 Sep 1996 20:18:59 GMT < Server: Apache/1.0.0 < Content-type: text/html < Content-length: 1579 < Last-modified: Mon, 22 Jul 1996 22:23:34 GMT < < HTML document

43. URL • URI: Uniform Resource Identifier • URL: Uniform Resource Locator • Un URL es la dirección única de todo documento en la Web • http://www.eutio.uniovi.es/

44. Sintaxis de un URL • Ejemplos: • http://www.princast.es/ • http://195.55.30.17/ • http://www.cfacebal.com/ • http://www.cfacebal.com/index.html • http://web.uniovi.es/Vicerrectorados/Extension/ • http://localhost:8080/ • http://petra.euitio.uniovi.es/ protocolo://dirección[:puerto]/directorio/fichero

45. Protocolo • Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo alguna tarea • Protocolo de la Web: • HTTP (HyperText Transfer Protocol) • Especifica cómo tiene lugar el diálogo entre el navegador y el servidor para conseguir el fichero especificado • No se ocupa del transporte en sí: TCP • Cada vez que tecleamos una dirección o pulsamos un enlace el navegador se comunica vía HTTP con el servidor web indicado

46. Ejemplos de protocolos

47. Dirección del sitio • Suele ser un nombre simbólico: nombre de dominio • www.uniovi.es especifica una máquina llamada “www” en el dominio “uniovi.es” • El nombre de máquina puede ser cualquiera • “www” no es más que un convenio para especificar aquellas máquinas que son servidores Web • como “ftp” suele designar a los servidores de FTP • incluso aunque muchas veces se trate de la misma máquina

48. Dirección del sitio • También podría ser directamente la dirección IP • http://156.35.14.3/ • Los nombres de dominio no distinguen entre mayúsculas y minúsculas • http://www.uniovi.es/ • http://WWW.UNIOVI.ES/ • http://wWw.UniOvi.es/

49. Directorio • Hay que indicar la ruta hasta el fichero deseado • Como mínimo, debe ir la barra (“/”) • http://www.uniovi.es/ • Si no la ponemos, la pone el navegador por nosotros • ...pero en los enlaces en HTML sí debe aparecer • También se puede indicar un subdirectorio: • http://www.uniovi.es/Vicerrectorados/Postgrado_TitulosPropios/doctorado/ • Siempre se usa la barra “/”, no “\” (incluso aunque el servidor Web sea una máquina Windows: está definido por el estándar URI, no depende del SO) • La ruta sí puede diferenciar entre mayúsculas y minúsculas (si el servidor web es, por ejemplo, una máquina Unix)

50. Nombre del fichero • Depende del sistema operativo del servidor web • Las páginas Web generalmente tienen como extensión .html o .htm • Las extensiones son importantes para que el navegador sepa cómo tratar un fichero • un .html, lo interpreta y lo muestra • un .jpg, trata de mostrar la imagen • un .doc, abre el Word si lo tenemos instalado • etcétera