Introducción a las aplicaciones Web
Tecnologías de la Web
Aplicaciones Web/Sistemas Web
Juan Pavón Mestras
Dep. Ingeniería del Software e Inteligencia Artificial
Facultad de Informática
Universidad Complutense Madrid
Material bajo licencia Creative Commons
Web - Conceptos básicos
Lenguajes de marcado
Texto + etiquetas (marcas, en inglés, tags)
Las etiquetas proporcionan información adicional acerca de la
estructura del texto o su presentación
En la Web:
HTML (HyperText Markup Language)
• Hipertexto: Habilidad de navegar desde un documento a otro a
través de conexiones (hyperlinks o links)
XHTML (eXtensible HyperText Markup Language)
• HTML expresado como XML válido
• Extiende HTML 4.0 combinando
• HTML diseñado para mostrar datos
• XML diseñado para describir datos
• Puede incluir otros lenguajes (SVG, SMIL, MathML, etc.)
RDF (Resource Description Framework)
• Framework para metadatos en la Web
WSDL (Web Services Description Language)
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
2
HTML
Lenguaje con el que se definen páginas Web
Permite describir el contenido de una página, incluyendo texto y otros
elementos (imágenes, videos, pequeñas aplicaciones, etc.)
Texto plano que incluye etiquetas que sirven para indicar un
tratamiento especial
Meta-información: <meta name="keywords" content="Curso Web, UCM"/>
Estructura del documento: <head><body><h1>
Formato: <b>Texto en negrita</b>
Enlaces a otros objetos: <a href="http://www.ucm.es/">
Formularios: <form>
Scripts: <script>
Versiones actuales:
HTML 4.01 (W3C, 1999)
• Estandarizado también por ISO en 2000
HTML 5 (W3C, 17/12/2012)
• Para 2014 se definirán los tests de interoperabilidad
XHTML 1.1 (2001), actualmente definiéndose XHTML 5
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
Web - Conceptos básicos
Identificadores de Recursos
UniformResourceLocator (URL)
• Descriptor del acceso (cómo encontrar) un recurso
• esquema://autoridad/ruta/archivo?solicitud
• Esquema: http, https, ftp, mailto, ldap, file, …
• Autoridad: www.ucm.es
https://cv3.sim.ucm.es/portal/help/main?help=sakai.siteinfo
• Se puede incluir también el puerto
(por defecto 80 para http y 443 para https)
https://cv3.sim.ucm.es:443/portal/help/main?help=sakai.siteinfo
UniformResourceIdentifier (URI)
• Identificador inequívoco de un recurso
• Definido en RFC 2396
• Más completo que URL, permite identificar una parte del recurso
principal, determinada por el “fragmento”
• esquema://máquina/directorio/archivo?solicitud#fragmento
http://www.sans.org/top25‐software‐errors/#cat1
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
3
4
Web - Conceptos básicos
Modelo cliente-servidor
Un cliente demanda servicios o recursos a un servidor a través de una
interfaz, usando un protocolo
petición
Cliente
Servidor
respuesta
HTTP GET www.ucm.es
index.html
Navegador (HTML5,
Applet, Flash, JavaFX)
Servidor web (Apache, lighttpd, …),
servidor de aplicaciones (Jboss,
Resin, Tomcat, Cherokee)
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
5
Funcionamiento
UDP/IP
1
http://www.ucm.es
53
int
com
edu
gov
mil
org
net
jp
us
es
fr
ar
…
amazon
ooc
sun
acm
ieee
omg
ucm
rediris
uba
java
Servidor DNS
TCP/IP
80
internet
index.html
home.css
jquery.min.js
ucm.png
…
Servidor web UCM
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
6
Protocolo HTTP
Protocolo de aplicación para transferencia de hipertexto
Funciona sobre TCP/IP
Permite a un navegador (cliente, user agent) solicitar una página
a un servidor y que éste la envíe
Basado en el envío de comandos y respuestas en texto ASCII
Servidor
80
x
Cliente
y
conexión
1
solicitud
2
respuesta
cierre
3
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
Protocolo HTTP
Tipos de mensajes
HTTP/1.0
• GET
• Solicitud de un recurso
• POST
• Envío de datos al servidor para que los procese (p.ej. con un script CGI)
• Ejemplo: datos de un formulario
• HEAD
• Como el GET pero pide al servidor que solo envíe la cabecera de la
respuesta (esto es, que responda sin enviar el objeto requerido)
• Para comprobar características de un recurso sin descargarlo
HTTP/1.1
• GET, POST, HEAD
• PUT
• Sube archivos en el cuerpo de la solicitud
• DELETE
• Borra el archivo especificado en el campo URL
• Otros: OPTIONS, TRACE and CONNECT
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
7
8
Protocolo HTTP
Mensajes HTTP
Línea inicial
0..n líneas de cabecera
Línea en blanco (CRLF)
Cuerpo de mensaje opcional (un fichero, solicitud de datos, datos
resultado de una solicitud)
<línea inicial, diferente para solicitud o respuesta>
Cabecera1: valor1
Cabecera2: valor2
Cabecera3: valor3
<opcional – cuerpo de mensaje, contenido de fichero o datos de query;
puede tener cualquier cantidad de líneas, incluso datos binarios $&*%@!^$@>
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
9
Protocolo HTTP
Mensajes HTTP - Línea inicial
Solicitud (request)
• GET /path/to/file/index.html HTTP/1.0
Respuesta
• HTTP/1.0 200 OK
• HTTP/1.0 404 Not Found
Códigos de estado típicos
• 200 OK Solicitud existosa – el recurso resultante sigue en el cuerpo
• 400 Bad Request El servidor no entiende la solicitud
• 404 Not Found El recurso solicitado no existe en el servidor
• 301 Moved Permanently
• 302 Moved Temporarily
• 303 See Other (solo en HTTP 1.1) El recurso se ha movido a otro
URL (indicado en la cabecera Location:), y debe ser
automáticamente recuperado por el cliente (redirección)
• 500 Server Error Error inesperado del servidor
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
10
Protocolo HTTP
Mensajes HTTP – Líneas de cabecera
Proporcionan información de la solicitud o respuesta
Estructura: Nombre-cabecera: valor
Nombre de cabecera
• HTTP 1.0 define 16 (ninguno obligatorio)
• HTTP 1.1 define 46, y requiere al menos una (Host:)
Por net-politeness (cortesía en la red) el cliente pone las siguientes:
• From: dirección email o programa solicitante
• User-Agent: identifica el programa que hace la petición con la forma:
“nombre-programa/x.xx“
Host:www.ucm.es
User‐Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:11.0) Gecko/20120313 Firefox/11.0
El servidor suele poner las siguientes:
• Server: identifica el software del servidor "Program-name/x.xx".
• Last-Modified: fecha de modificación del recurso (se usa para
gestioanr las cachés). En Greenwich Mean Time
Content‐Type:text/html; charset=iso‐8859‐1
Date:Fri, 14 Dec 2012 09:23:36 GMT
Server:Apache
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
11
Protocolo HTTP - Ejemplo
Para recuperar el fichero en el URL
http://www.dominio.com/path/fichero.html
Solicitar una conexión en el puerto 80 del host www.dominio.com
Enviar a través del nuevo socket el siguiente texto:
GET /path/fichero.html HTTP/1.0
From:
[email protected]
User‐Agent: HTTPTool/1.0
[línea en blanco CRLF]
La respuesta del servidor llegará por el mismo socket:
HTTP/1.0 200 OK
Date: Wed, 12 Dec 2012 12:09:34 GMT
Content‐Type: text/html
Content‐Length: 1354
<html>
<body>
<h1>Bienvenido al curso de la Web</h1>
(resto del contenido)
.
.
</body>
</html>
Tras enviar la respuesta el servidor cierra el socket
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
12
Seguridad con HTTPS
HTTPS (Hypertext Transfer Protocol Secure)
Permite que la información sensible (datos de usuario, passwords,
pagos, etc.) no pueda ser interceptada durante la transferencia de
datos
La información viaja por un canal cifrado sobre SSL/TLS
• TLS (Transport Layer Security) es el protocolo estandarizado por
IETF (RFC 2246), basado en SSL (Secure Sockets Layer)
• Última versión: TLS 1.2 (RFC 5246, 2008)
• Usa
• Criptografía asimétrica (sistema de clave pública) para acordar el protocolo
y claves de sesión
• Criptografía simétrica para el intercambio confidencial de información
• Códigos de autenticación de mensajes para la integridad de los mensajes
• Requiere que el servidor tenga un certificado digital
• Normalmente debe estar firmado por una Autoridad de certificación para
que el navegador web lo acepte
Para utilizar HTTPS el servidor recibe las conexiones en el puerto 443
(por defecto)
La URL indica el uso de este protocolo: https://...
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
13
Protocolo HTTP – Ejercicios
Experimentar el protocolo HTTP usando telnet (en Unix)
telnet www.dominio.com 80
$ telnet www.google.es 80
Trying 212.106.221.27...
Connected to www.google.es.
Escape character is '^]'.
HEAD / HTTP/1.1
Host: www.google.es
No olvidar dejar línea en blanco
HTTP/1.1 200 OK
Date: Fri, 01 Mar 2013 15:54:35 GMT
Expires: ‐1
Cache‐Control: private, max‐age=0
Content‐Type: text/html; charset=ISO‐8859‐1
Set‐Cookie: PREF=ID=8730c30ca4e6210e:FF=0:TM=1362153275:LM=1362153275:S=lr3Lm912j2Rdd2mS;
expires=Sun, 01‐Mar‐2015 15:54:35 GMT; path=/; domain=.google.es
Set‐Cookie: NID=67=e839boWwCqTrzsUkPjpafLY_5vLVoYBWhX7bWejx8RvmRylUJDbLCKFEh0jwpu0LtySsKu‐
AYG0z5rvinJoYwzjLXbDgE4nHmXQIrsVJwrT2WUyeQH1mITNowDsJJ_oo; expires=Sat, 31‐Aug‐2013 15:54:35 GMT;
path=/; domain=.google.es; HttpOnly
P3P: CP="This is not a P3P policy! See
http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
Server: gws
X‐XSS‐Protection: 1; mode=block
X‐Frame‐Options: SAMEORIGIN
Transfer‐Encoding: chunked
Connection closed by foreign host.
$
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
14
Protocolo HTTP – Ejercicios
Escribir un programa Java sencillo que implemente un cliente de
HTTP
Usa las clases del paquete java.net y java.io
Otra alternativa más directa es usar la clase JEditorPane que puede
interpretar código HTML
Juan Pavón - UCM 2013-14
Aplicaciones Web / Sistemas Web
15
Cookies
HTTP
Crear cuenta
Comentarios de: Introducción a las aplicaciones Web (0)
No hay comentarios