Introducción al desarrollo de aplicaciones Web

Arquitectura Web

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

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/

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

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

Esquema general Cliente/Servidor

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)

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

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)

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

¿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

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

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

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

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/

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

¿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

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.

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.

Conceptos

O Páginas Estáticas

O Son aquellas almacenadas en el servidor en un

arcihvo .htm o html. No pueden ser

personalizadas.

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.

Conceptos

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

del lado del 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

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.

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

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.

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.

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

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.

.

Ampliación de otras tecnologías

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/

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 <% %>

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.

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.

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.

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.

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.

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.

¿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

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

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

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