42
Introducción al desarrollo de aplicaciones Web Arquitectura Web

Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Embed Size (px)

Citation preview

Page 1: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Introducción al desarrollo de aplicaciones Web

Arquitectura Web

Page 2: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías claves de Internet

O La infraestructura de Internet es

proporcionada fundamentalmente por tres

tecnologías:

O La conmutación de paquetes

O El protocolo TCP/IP

O La arquitectura cliente/servidor

Page 3: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Nombres de dominio y URL

O Para no tener que recordar direcciones IP tal cual,

éstas pueden ser representadas mediante nombres

de dominio (por ejemplo, www.google.com)

O El sistema de nombres de domino (DNS) permite que

éstas se resuelvan a direcciones IP

O Ejemplo: ping www.google.com

O Los URL (Uniform Resource Locator) son las

direcciones que escribimos en el navegador

O Como http://www.google.com/

Page 4: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Internet ≠ Web O Internet permite a cualquier ordenador del mundo

compartir datos con otro ordenador remoto

O Un programa cliente en un ordenador accede a un

programa servidor en otro ordenador remoto

O El Web es el sistema de hipertexto que funciona sobre

Internet como uno de sus servicios

O 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

Page 5: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Nacimiento del World Wide Web

O 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

O HTML —HyperText Markup Language

O Lenguaje de Marcado de Hipertexto

Berners-Lee creó las versiones iniciales de:

HTML, HTTP, un servidor Web y un navegador

Los cuatro componentes esenciales del Web

Page 6: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Esquema general Cliente/Servidor

Page 7: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Visión general del Web

1. El usuario solicita un documento tecleando su

dirección en el navegador: http://www.elheraldo.hn

O Es lo que se denomina un URL (localizador uniforme de recursos)

2. El cliente busca en el DNS cuál es la IP de www…

O Cada ordenador en Internet está identificado por una dirección única denominada IP

O El DNS traduce de nombres lógicos a direcciones físicas

3. Navegador y servidor web comienzan un diálogo a través del protocolo HTTP (protocolo de transferencia de hipertexto)

Page 8: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Funcionamiento del Web

Tecleamos una

dirección en el

navegador (por

ejemplo,

www.euitio.uniovi.es)

Éste envía una petición al

servidor Web

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

http

Page 9: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

HTML

O Es el lenguaje de creación de páginas Web

O Al menos, de las páginas “estáticas”

O Era imprescindible que la misma

información se pudiese ver en diferentes

plataformas

O Por tanto, Berners-Lee diseñó un lenguaje

de estructuración de documentos, no de

presentación (ésta se dejaba al programa

cliente)

Page 10: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

HTML es un lenguaje O 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

O Es además un lenguaje informático, para ser procesado por

computadores; pero no es un lenguaje de programación

O Por hipertexto designamos al texto al que se le añade una

propiedad: determinadas porciones de texto pueden ser

enlazadas a otros documentos

O De ahí surge el concepto de navegación: surcamos el Web

navegando de unos enlaces a otros

O El hipertexto debe ser utilizado en los sitios web para facilitar al

usuario la labor de búsqueda de la información

Page 11: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

¿Qué necesitamos para crear un documento HTML?

O Un editor de texto

O Un procesador de textos

O Debe ser texto plano, sin formato (p. ej., con el Bloc

de Notas)

O Le daremos la extensión .html o .htm, y un nombre

sin espacios ni caracteres especiales

Page 12: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Especificación de HTML

O 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)

O www.w3c.org

O Nota: Ahora, HTML ha dado lugar a una

variación del mismo denominada XHTML

Page 13: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

HTTP

O HTTP (HyperText Transform Protocol) es el protocolo usado para transferir páginas Web

O Es el modo en que un navegador se comunica con un servidor Web (Apache, Internet Information Server…)

O Es un protocolo sin estado

O La sesión termina en cuanto se devuelve el objeto solicitado

O Incluso, si una página contiene otros objetos (imágenes, frames, etc.) cada uno de ellos inicia una nueva petición HTTP

Page 14: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Dirección del sitio

O Suele ser un nombre simbólico: nombre de

dominio

O www.hsbc.com especifica una máquina llamada

“www” en el dominio “hsbc.com”

O El nombre de máquina puede ser cualquiera

O “www” no es más que un convenio para especificar

aquellas máquinas que son servidores Web

O como “ftp” suele designar a los servidores de FTP

O incluso aunque muchas veces se trate de la misma

máquina

Page 15: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Puerto

O Por omisión, una petición HTTP se dirige al

puerto 80

O Por eso casi nunca la especificamos

O Pero se podría configurar el servidor Web

para que “escuchase” peticiones en otro

puerto

O En ese caso, hay que indicarlo

explícitamente:

O http://www.midominio.com:8080/

Page 16: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

¿Qué es un servidor Web? O Un programa que atiende las peticiones

HTTP llegadas a un puerto determinado de

la máquina

O También se denomina así, por extensión,

a la máquina que cuenta con uno de

tales programas

O Ejemplos de servidores Web:

O Apache

O Apache HTTP Server Project

O http://httpd.apache.org/

O Internet Information Server (IIS)

Page 17: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

¿Qué hace un servidor Web cuando recibe una solicitud?

O Si el último elemento del URL es un archivo:

O Si se incluye una ruta de directorios, lo buscará a partir del

indicado en la directiva DocumentRoot

O Por omisión, es el directorio htdocs dentro del directorio de

instalación de Apache

O En el caso de que el último elemento del URL sea un directorio,

sin especificar el fichero:

O Si en dicho directorio existe un fichero index.html (o lo que se

especifique en DirectoryIndex), se devolverá éste

O Si no existe dicho fichero, y siempre y cuando esté habilitada

la opción Options Indexes) se hará un listado del directorio

Page 18: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Servicios

O Se denomina servicio a cualquier funcionalidad que puede proporcionar una red.

O Todo servicio necesita de un servidor que lo gestione y de un cliente que lo consuma.

O El paradigma cliente/Servidor consiste en que existe un recurso que es gestionado por un proceso servidor (que se ejecuta en un ordenador al que se llamará servidor); un proceso cliente (que se ejecuta en un ordenador al que se llamará cliente) demanda su utilización al servidor y éste se encarga de satisfacer esta necesidad.

Page 19: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Conceptos

O Página Web

O Documento HTML almacenado de forma estática o

generado de forma dinámica que muestra una

información útil para el usuario, o permite

personalizarla.

O Sitio Web

O Conjunto de páginas web que tratan sobre un tema

O Portal Web

O Conjunto de sitios web, que pueden pertenecer a

una o a varias organizaciones.

Page 20: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Conceptos

O Páginas Estáticas

O Son aquellas almacenadas en el servidor en un

arcihvo .htm o html. No pueden ser

personalizadas.

Page 21: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Conceptos

O Páginas Dinámicas

O Son aquellas que permiten un cierto grado de

interactividad. Esta interactividad puede

producirse en uno o dos de los siguientes niveles:

O Páginas Dinámicas del Lado del Servidor

O Son aquellas generadas por una aplicación

web, tal que la información contenida en

ellas puede haber sido personalizada por el

usuario. La interactividad se realiza del lado

del servidor.

O Se implementa con diversas tecnologías.

Page 22: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Conceptos

O Proceso de generación de página dinámica

del lado del cliente:

Page 23: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas estáticas

O HTML

O Lenguaje de marcado basado en etiquetas que

representan ciertos elementos.

O Permiten mostrar el texto.

O CSS

O Cascading Style Sheet (Hojas de Estilo)

O Permiten maquetar las páginas HTML

Page 24: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas dinámicas – Client Side

O Lenguajes de scripts

O VBScript

O Versión de Visual Basic

O Competidor de Java Script

O Válido sólo para navegadores de Microsoft.

O JavaScript

O Derivado de LiveScript de Netscape.

O Basado en la familia de los lenguajes C

O Tiene muchos elementos de Java, pero no es Java.

Page 25: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas dinámicas – Client Side

O Aplicaciones para ejecución local

O Java Applets O Aplicación gráfica Java que se queda embebida en una página

web.

O Necesita una Máquina Virtual Java

O Al ser Java es Multiplataforma.

O Active X Controls O Aplicación realizada en VB o en C++ basada en

O Tecnologías Microsoft que se embebe en HTML

O Sólo válido para Internet Explorer, por lo que está en desuso.

O Animaciones Flash. O Objetos realizados en Macromedia Flash y embebidos en la

página Web

Page 26: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas dinámicas – Server Side

O Ejecutan programa o aplicaciones en el servidor que genera dinámicamente como resultado código HTML

O Permiten que el navegador sea un cliente neutro.

O Es posible la ejecución distribuida, accediendo a distintos recursos distribuidos como bases de datos.

O Dos tecnologías: O Independiente de la arquitectura de la página

O Dependiente de la arquitectura de la página.

Page 27: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas dinámicas – Server Side

O Independiente de la Arquitectura

O Common Gateway Interfaces (CGI) Tecnología usada durante mucho tiempo en los servidores que adolecía de problemas de rendimientos (lanzaba una instancia de la aplicación por cada petición del cliente independientemente del servidor web)

O Aplicaciones escritas en C, C++ o Perl para un tratamiento adecuado de cadenas de caracteres.

O Tecnología muy difícil de aprender y de utilizar, aunque muy difundida y utilizada.

Page 28: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas dinámicas – Server Side

O Dependiente de la Arquitectura

O Active Server Pages (ASP)

O Construida usando VBScript o JavaScript

O Acceden a los mismos servicios que una aplicación

Windows de escritorio, incluyendo ADO, SMTP y COM

O Eran script interpretados cada vez que eran solicitados, por

lo que son lentas.

O Servidor Web: Internet Information Server (IIS) y otros

servidores con addons

O Java Server Pages (JSP)

O Son como las páginas ASP pero implementadas en Java.

O Destaca el concepto de Servlet

O Es la plataforma más difundida y actualizada, aunque

adolece una serie de problemas.

O Pueden usar EJBs (propietario) y Servicios Web

O Servidor Web: Tomcat, Apache y derivados e IIS

Page 29: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tecnologías para páginas dinámicas – Server Side

O Dependiente de la Arquitectura

O PHP Hypertext Preprocessor (PHP)

O Similar a ASP, pero usando C y Perl.

O Es código libre

O Servidor Web: Apache y derivados, IIS.

O ASP.NET

O Evolución de ASP que permite usar cualquiera de los lenguajes .NET (VB.NET, C#, C++, …)

O Resuelve muchos de los problemas de rendimiento de ASP al ser compilado.

O Puede utilizar Servicios Web XML

O Servidor Web: IIS.

.

Page 30: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Ampliación de otras tecnologías

Page 31: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Lenguaje ASP

O Uno de los inconvenientes de ASP es que es dependiente de un servidor Web concreto

O El Internet Information Server (IIS) de Microsoft

O Dicho servidor ya viene de manera predeterminada en las últimas versiones de Windows

O Aunque quizá no lo hayamos instalado junto con el Sistema Operativo

O En ese caso, podríamos hacerlo a través de la opción de Añadir o quitar componentes de Windows del Panel de Control

O ¿Cómo probar si está instalado?

O Teclear en el navegador http://localhost/

Page 32: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Sintaxis general

O ASP, al igual que las JSP de Java, se basa en mezclar instrucciones de programación en nuestras páginas HTML

O El motor de ASP procesará dichas instrucciones dinámicamente y obviará el HTML

O Esto permite generar HTML dinámicamente, añadiendo lógica a nuestras páginas

O Para ello, hay que encerrar el código ASP entre los símbolos <% %>

Page 33: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Java

O Java es un lenguaje de programación orientado a objetos desarrollado por la compañía Sun Microsystems. Está construido a partir de lenguajes orientados a objetos anteriores, como C++, pero no pretende ser compatible con ellos sino ir mucho más lejos, añadiendo nuevas características como recolección de basura, programación multihilos y manejo de memoria a cargo del lenguaje.

Page 34: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Java DataBase Connectivity O JDBC es una interfaz que provee comunicación con bases de

datos. Consiste en un conjunto de clases e interfaces escritas

en Java, que proveen una API (Interfaz de Programación de

Aplicación) estándar para desarrolladores de herramientas de

base de datos.

O La API JDBC es la interfaz natural a las abstracciones y

conceptos básicosde SQL (Lenguaje de Consultas Simple):

permite crear conexiones, ejecutar sentencias SQL y manipular

los resultados obtenidos.

Page 35: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Applets de Java

O Un applet es un componente de software

que corre en el contexto de otro programa,

por ejemplo un navegador web. El applet

debe correr en un contenedor, que es

proporcionado por un programa anfitrión,

mediante un pluggin o en aplicaciones como

teléfonos celulares que soportan el modelo

de programación por applets.

Page 36: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Servlets

O El servlet se puede considerar como una

evolución de los CGIs desarrollada por SUN

Microsystems como parte de la tecnología

Java. Son programas Java que proveen la

funcionalidad de generar dinámicamente

contenidos web.

Page 37: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Java Server Pages

O JSP provee a los desarrolladores de web de un entorno

de desarrollo para crear contenidos dinámicos en el

servidor usando plantillas HTML y XML (eXtensible

Markup Language) en código Java, encapsulando la

lógica que genera el contenido de las páginas.

O Cuando se ejecuta una página JSP es traducida a una

clase de Java, la cual es compilada para obtener un

servlet. Esta fase de traducción y compilación ocurre

solamente cuando el archivo JSP es llamado la primera

vez, o después de que ocurran cambios.

Page 38: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

eXtensible Markup Language

O La familia XML es un conjunto de especificaciones que conforman el estándar que define las características de un mecanismo independiente de plataformas desarrollado para compartir datos. Se puede considerar a XML como un formato de transferencia de datos multi-plataforma.

O XML ha sido diseñado de tal manera que sea fácil de implementar. No ha nacido sólo para su aplicación en Internet, sino que se propone como lenguaje para intercambio de información estructurada.

Page 39: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

¿Qué son las cookies?

O Las cookies son pequeñas porciones datos

que son almacenados localmente por el

navegador en forma de pequeños ficheros

de texto

O Cada vez que el cliente envía información al

servidor, incluye en la petición HTTP las

cookies que previamente haya guardado

provenientes de ese servidor

Page 40: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Ventajas

O Menor uso de los recursos del servidor O Los servidores “sin estado” no necesitan reservar

y mantener recursos para guardar el estado de la sesión

O Fácil escalabilidad y uso de clusters O Al no tener estado, cualquier servidor puede

atender a cualquier cliente O No hace falta que un cliente siempre sea

atendido por el mismo servidor, ni ningún tipo de distribución del estado entre servidores

O La sesión del cliente podría sobrevivir a una caída del servidor O Un reintento por parte del cliente con el mismo

URL suele funcionar

Page 41: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Inconvenientes

O Privacidad O Otros servidores podrían leer información

almacenada en las cookies del cliente O No son válidas para guardar números de tarjeta,

contraseñas y cosas por el estilo

O Los datos pueden ser alterados O Un usuario podría modificar el fichero de una

cookie O Lo mismo ocurre con otros mecanismos de

cliente: URL, formularios, etc.

O Aumenta el tráfico por la red O El estado se transmite con cada petición al

servidor

Page 42: Introducción al desarrollo de aplicaciones Web · Internet ≠ Web O Internet permite a cualquier ordenador del mundo compartir datos con otro ordenador remoto O Un programa cliente

Tendencias Actuales O Así mismo, el modo de generar páginas

dinámicas ha evolucionado, desde la

utilización del CGI, hasta los servlets

pasando por tecnologías tipo JSP. Todas

estas tecnologías se encuadran dentro de

aquellas conocidas como Server Side, ya

que se ejecutan en el servidor web.

HTML Inicio •CGIs

•JSP, ASP, etc

Server

Sides

•Javascripts

•Applets

Client Sides