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