Post on 30-Jul-2020
Máster en Sistemas y Servicios en la Sociedad de la Información
Especialidad Derecho y Tecnologías de la Información y Comunicaciones
Introducción a la tecnología web
Web y Lenguajes de programación
Introducción a la tecnología web (parte 3)
World Wide Web
o El triunfo de la anarquía
o La (limitada) visión inicial del WWW tiene muypoco que ver con lo que es su (impresionante)realidad actual.
o Los usuarios de la web han innovado de maneraconsistente inventando nuevas formas de aplicaciónde este potente medio de comunicación.
o Los desarrolladores de la Web intentan ampliar(parchear) la infraestructura para soportar losnuevos usos.
Introducción a la tecnología web (parte 3)
¿Cómo se inicio?
o Tim Barnes Lee (CERN, 1989).
o Repositorio estático de documentos:
o Una forma cómoda de acceder a documentos estáticosinterrelacionados almacenados en servidoresdistribuidos alrededor del mundo.
o La especificación inicial incluía:
o Un lenguaje para dar formato a los documentos(HTML).
o Un protocolo sencillo para comunicar navegadores(clientes) y servidores (HTTP).
Introducción a la tecnología web (parte 3)
El primer navegador gráfico
o En 1993 Marc Andreesen (estudiante) escribe
Mosaic. Precursor de Netscape.
Introducción a la tecnología web (parte 3)
Cómo funciona la web
Introducción a la tecnología web (parte 3)
Servidor de nombres
(DNS)
Servidor WebCliente Web
(Mosaic, Netscape,
Internet Explorer, Firefox, etc.)
Internet
Abrir dirección “http://www.uv.es/mastic/index.html”
Estructura de un URL
Introducción a la tecnología web (parte 3)
URL = Uniform Resource Locator
http://www.uv.es/mastic/index.html
Nombre del protocolo de comunicación
con el servidor
(http es el estándar para web)
Nombre del dominio del servidor web
donde se almacena el documento (página)
Localización del documento dentro del
sistema de archivos del servidor web
Cómo funciona la web
Introducción a la tecnología web (parte 3)
Servidor de nombres
(DNS)
Servidor Web
Cliente Web
(Mosaic, Netscape,
Internet Explorer, Firefox, etc.)
Internet
Abrir dirección “http://www.uv.es/mastic/index.html”
Buscando
host:
www.uv.es
¿Dirección IP
de www.uv.es?
147.156.11.1
Cómo funciona la web
Introducción a la tecnología web (parte 3)
Servidor de nombres
(DNS)
Servidor Web
Cliente Web
(Mosaic, Netscape,
Internet Explorer, Firefox, etc.)
Internet
Abrir dirección “http://www.uv.es/mastic/index.html”
Envíame el documento
mastic/index.html
Conectando
con:
www.uv.es
WWW es un sistema Cliente/Servidor
o Clientes Web:
o Utilizan el protocolo HTTP para conectar con los servidores.
o Solicitan y muestran las páginas web almacenadas en los
servidores.
o Clientes típicos: navegadores web.
o Servidores Web:
o "Escuchan" conexiones entrantes desde clientes.
o Utilizan el protocolo HTTP para conversar con los clientes.
o Almacenan y transmiten páginas web a los clientes.
Introducción a la tecnología web (parte 3)
El concepto original WWW
o Lectores humanos acceden a documentos estáticos
interconectados.
o Principal ventaja:
o Universalidad
o Principal desventaja:
o Falta de interactividad
Introducción a la tecnología web (parte 3)
Hagamos una página web
Introducción a la tecnología web (parte 3)
Act.1
Evolución de la web
o Posibilita transacciones.
o Permite interactividad entre navegador y servidor.
o Permite personalización.
o Soporta múltiples dispositivos de navegación.
o Mejor organización y recuperación de contenidos
Web.
o Soporta aplicaciones B2B (negocio a negocio).
Introducción a la tecnología web (parte 3)
La web facilita las transacciones
o Mecanismo barato que permite a los clientes
conectarse al sistema de la empresa:
o Registro de clientes / Cambio de direcciones
o Seguimiento de pedidos / Soporte al cliente
o Transacciones online: comercio electrónico (eCommerce)
o Cómo se consigue tecnológicamente: …
Introducción a la tecnología web (parte 3)
Formularios web (Web Forms)
o Páginas que contiene campos a cumplimentar por el
usuario.
o Normalmente poseen un botón "enviar" (Submit).
o Cuando el usuario pulsa "Enviar" el servidor
responde enviando una página con información
específica sobre los datos proporcionados.
o Ejemplo:
o Herramientas de búsqueda en la web
o Formularios de pedidos en web comerciales
Introducción a la tecnología web (parte 3)
Formularios web (2)
o El servidor envía la página html original conteniendo loscampos de entrada.
o El usuario completa los campos y pulsa el botón de envío.
o El cliente establece una conexión con un programa en elservidor que procesará los datos (el nombre del programaestá contenido en la página web).
o El cliente recopila los datos de entrada del usuario enforma de cadena y lo envía con una orden HTTP alservidor:
o POST cliente=Jesus+Albert&tarjeta=1234&expira=01/08
o El programa en el servidor lee la cadena de datos y,generalmente, produce como resultado una nueva página.
Introducción a la tecnología web (parte 3)
Act.2
CGI
o CGI = Common Gateway Interface
o Conjunto de normas para escribir programas en el
servidor.
o Cómo funciona:
o Todas las URL que hacen referencia a un directorio
especial (p.ej. /cgi) provocan la ejecución del
correspondiente programa en el servidor.
o Los programas pueden estar escritos en diferentes
lenguajes de programación.
Introducción a la tecnología web (parte 3)
ASP
o ASP = (Microsoft) Active Server Pages
o Es una tecnología "competidora" con los CGI
o Utiliza un lenguaje propio similar a Visual Basic
o Requiere un servidor web de Microsoft.
Introducción a la tecnología web (parte 3)
Evolución de la web
o Posibilita transacciones.
o Permite interactividad entre navegador y servidor.
o Permite personalización.
o Soporta múltiples dispositivos de navegación.
o Mejor organización y recuperación de contenidos
Web.
o Soporta aplicaciones B2B (negocio a negocio).
Introducción a la tecnología web (parte 3)
La Web interactiva
o Permite interacciones complejas entre el usuario y
los servidores de empresa.
o La Web se convierte en una extensión del
ordenador personal del usuario.
o El navegador web se convierte en una ventana de
acceso a una gran variedad de aplicaciones
empresariales.
Introducción a la tecnología web (parte 3)
Problemas con Formularios/CGI/ASP
o En los 3 casos el procesamiento se realiza en el
servidor.
o No es posible una interacción rápida con la página
web.
o Es necesario el procesamiento local (en el cliente)
para crear páginas web altamente interactivas.
Introducción a la tecnología web (parte 3)
Java Applets
o Programas escritos en Java que se descargan en elcliente desde una página web y que se ejecutan enel ordenador del usuario.
o Los Applets son independientes de la máquina(plataforma):
o Se pueden ejecutar igualmente en Windows XP,Windows Vista, Linux, Mac OS.
o OJO!: Requieren navegadores que soporten Java. Esdecir, que incluyan un intérprete que traduzca allenguaje máquina.
Introducción a la tecnología web (parte 3)
Introducción a la tecnología web (parte 3)
internetLinux
Windows XP
Windows Vista
Mac OS
Servidor
página
HTML
applet
Java
intérprete
HTML
intérprete
Java
Netscape (WinXP)
SO WinXP
Hardware PC
página
HTML
applet
Java
intérprete
HTML
intérprete
Java
Netscape (MacOS)
MacOS
Hardware PowerMac
Entornos de
Clientes
=
dife
ren
tes
Evolución de la web
o Posibilita transacciones.
o Permite interactividad entre navegador y servidor.
o Permite personalización.
o Soporta múltiples dispositivos de navegación.
o Mejor organización y recuperación de contenidos
Web.
o Soporta aplicaciones B2B (negocio a negocio).
Introducción a la tecnología web (parte 3)
Interacción personalizada
o Mecanismo barato para recopilar información
sobre los clientes que permite:
o Servicio personalizado,
o Publicidad específica, etc.
o Las técnicas tradicionales no permiten una sencilla
identificación de los distintos clientes.
Introducción a la tecnología web (parte 3)
Cookies
o Son un método para identificar a los usuarios web yproporcionarles páginas web personalizadas.
o La primera vez que el usuario accede al portal web serecopila información personaliza del mismo.
o El servidor "empaqueta" la información en una "cookie" y laenvía en forma de archivo al navegador del cliente, que laalmacena en el sistema de archivos.
o Cada vez que el usuario se conecta al mismo portal web elnavegador envía la "cookie" al servidor como identificaciónpersonalizada.
o El servidor utiliza la información de la "cookie" parapersonalizar las páginas enviadas al usuario.
Introducción a la tecnología web (parte 3)
Cookies
o Son un método para identificar a los usuarios web yproporcionarles páginas web personalizadas.
o La primera vez que el usuario accede al portal web serecopila información personaliza del mismo.
o El servidor "empaqueta" la información en una "cookie" y laenvía en forma de archivo al navegador del cliente, que laalmacena en el sistema de archivos.
o Cada vez que el usuario se conecta al mismo portal web elnavegador envía la "cookie" al servidor como identificaciónpersonalizada.
o El servidor utiliza la información de la "cookie" parapersonalizar las páginas enviadas al usuario.
Introducción a la tecnología web (parte 3)
¿¿¿¿ Privacidad ????
Cookies: Ejemplo
Introducción a la tecnología web (parte 3)
Act.3
Evolución de la web
o Posibilita transacciones.
o Permite interactividad entre navegador y servidor.
o Permite personalización.
o Soporta múltiples dispositivos de navegación.
o Mejor organización y recuperación de contenidos
Web.
o Soporta aplicaciones B2B (negocio a negocio).
Introducción a la tecnología web (parte 3)
Múltiples dispositivos de acceso
o Actualmente es posible acceder a la web mediante:
o Ordenadores personales,
o PDA,
o Teléfono móvil, etc…
o Problemas:
o Cada dispositivo tiene diferentes requisitos de
visualización.
o HTML especifica formato pensando en PCs.
Introducción a la tecnología web (parte 3)
Organizar e indexar contenidos
o La Web es poco útil si somos incapaces de localizar
recursos de información interesantes.
o Solución actual: Buscadores
o Indexan (categorizan) la Web de manera automática
organizando las páginas en función de palabras clave
localizadas en su texto.
Introducción a la tecnología web (parte 3)
¿Cómo funciona un buscador?
o Incluso antes de introducir una consulta:
o Hay programas (web crawlers, spiders) que siguen losenlaces entre páginas en toda la web.
o Los programas construyen índices con qué palabrasaparecen en qué páginas y guardan esos índices en"granjas" de servidores en la sede de la empresa"buscadora".
o A cada página también se le asigna una puntuaciónbasada en el número de referencias que tiene.
o Páginas que son enlazadas desde otras muchas páginasreciben puntuacione más elevadas.
Introducción a la tecnología web (parte 3)
Valoración de páginas de Google
o V(A) = (1-d) + d . [V(p1)/C(p1) + … + V(pn)/C(pn)]
o Donde:
o V indica valoración de la página,
o p1.. pn son páginas que enlazan con la página A,
o C es el número de enlaces externos que tiene una página,
o d es un factor, normalmente 0,85
o En otras palabras:
o V(A) = 0,15 + 0,85 * (una contribución de la
valoración de todas las páginas que referencian a la
página A)
Introducción a la tecnología web (parte 3)
¿Cómo funciona un buscador? (2)
o Después de introducir una consulta:
o Hay programas que comprueban los índices para
determinar que páginas contienen la combinación de
palabras introducidas.
o El buscador proporciona como resultado un listado de
esas páginas por orden de valoración.
o El orden suele depender también de otros factores
Introducción a la tecnología web (parte 3)
Google en cifras
o Aproximadamente 5 mil millones de páginascompletamente indexadas (promedio de 10Kb deinformación por página).
o Miles de PCs en un cluster.
o Varias decenas de clusters.
o Aproximademente 1 petabyte de datos por cluster.
o Transferencias sostenidas del orden de Gbps en uncluster.
o Estimación de que 2 máquinas por día van a fallar.
Introducción a la tecnología web (parte 3)
Evolución de la web
o Posibilita transacciones.
o Permite interactividad entre navegador y servidor.
o Permite personalización.
o Soporta múltiples dispositivos de navegación.
o Mejor organización y recuperación de contenidos
Web.
o Soporta aplicaciones B2B (negocio a negocio).
Introducción a la tecnología web (parte 3)
Soporte para aplicaciones B2B
o La web original estaba concebida para comunicarmáquinas y seres humanos.
o Se pueden generar nuevas aplicaciones si lasmáquinas pueden entender automáticamentepáginas web.
o "mi sistema de compras se entiende con tu sistema deventas"
o Problemas:
o HTML es un lenguaje desestructurado orientado a lapresentación y no a los contenidos.
Introducción a la tecnología web (parte 3)
Problema subyacente
o Cuando se almacena un documento en la web se
necesita no sólo especificar su apariencia, sino
también su significado (semántica).
Introducción a la tecnología web (parte 3)
Hacia la Web Semántica
o La web del futuro debe establecer la infraestructura paraespecificar información de forma precisa, legible por el serhumano e interpretable por una máquina.
o Debe permitir la interoperabilidad entre aplicaciones Web(independientemente desarrolladas), facilitando larealización de tareas complejas.
o Debe permitir el acceso a recursos Web en función de susemántica y no por palabras clave.
o Debe permitir la inferencia:
o “Jesús es profesor titular en la Universitat de València”
o “Los profesores titulares ocupan un puesto de trabajo estable”
o “Jesús tiene un puesto de trabajo estable en la Universitat deValència”
Introducción a la tecnología web (parte 3)
eXtensible Markup Language
XML
Introducción a la tecnología web (parte 3)
W3C
o World Wide Web Consortium
o Fundado en 1994 por Tim Barnes Lee.
o Objetivos del Consorcio:
o Guiar el uso y ampliación de la web medianteRecomendaciones consensuadas por la comunidadinternacional.
o Asegurar la estabilidad de la web y el accesouniversal a ella.
o Las Recomendaciones del W3C son estándares defacto en la comunidad web.
Introducción a la tecnología web (parte 3)
Qué es XML
o Lenguaje de marcas (en realidad, un metalenguaje)
con un formato consistente, que permite
intercambiar datos por medio de cualquier
programa, en no importa qué lenguaje o
plataforma.
o Utiliza etiquetas que tienen un sentido semántico.
o "esto es una dirección"
Introducción a la tecnología web (parte 3)
Ejemplo de documento
Introducción a la tecnología web (parte 3)
<! Ejemplo de documento -->
<universidad>
<nombre>
Universitat de València
</nombre>
<departamento>
<nombre>
Departamento de Informática
</nombre>
<direccion>
Av. Vicente Andrés Estellés s/n
</direccion>
</departamento>
</universidad>
Familia XML
o Esquemas XML: definen la estructura y semántica de
los documentos.
o Qué entidades pueden aparecer en un documento
XML.
o Naturaleza de los datos y restricciones.
o XPath, XPointer: localización de elementos en
documentos.
o XLink, XBase, XInclude: permiten la inclusión y
vinculación entre documentos.
Introducción a la tecnología web (parte 3)
Familia XML (2)
o XQuery: consultas sobre documentos.
o XSLT: eXtended Stylesheet Language Tranformation.
Lenguaje basado en reglas para la transformación
de documentos XML en otro formato, de acuerdo
con una hoja de estilos
Introducción a la tecnología web (parte 3)
Ejemplo de transformación de XML
Introducción a la tecnología web (parte 3)
<?xml version = “1.0”?>
<?xml-stylesheet type = “text/xsl” href = “intro.xsl”?>
<miMensaje>
<mensaje> Prueba de XSLT </mensaje>
</miMensaje>
<?xml version = “1.0”?>
<xsl:stylesheet version = “1.0”
xmlns:xsl = “http://www.w3c.org/199/XSL/Transform”>
<xsl:template match = “miMensaje”>
<html>
<body><xsl:value-of select = “mensaje”/></body>
</html>
</xsl:template>
</xsl:stylesheet>
intro.xml
intro.xsl
La transformación
Introducción a la tecnología web (parte 3)
<html>
<body>Prueba de XSLT</body>
</html>
intro.xml
DATOS
intro.xsl
VISUALIZACIÓN/TRANSFORMACIÓNPrueba de XSLT
intro.xml
Act.4
Lenguajes de programación
Introducción a la tecnología web (parte 3)
Tipos de software (programas)
o Software de sistema:
o Sistemas operativos,
o Lenguajes de programación,
o Sistemas de bases de datos, …
o Software de aplicación:
o Tareas de oficina (procesador de textos, hoja de
cálculo, etc.),
o Contabilidad,
o Diseño gráfico, …
Introducción a la tecnología web (parte 3)
Lenguajes de programación
o Todo el software se ha construido utilizando un
lenguaje de programación.
o Tipos de lenguajes de programación:
o Lenguaje máquina
o Ensamblador
o Lenguajes de alta nivel
o Cualquier programa para poder ejecutarse en el
ordenador debe de estar traducido a lenguaje
máquina.
Introducción a la tecnología web (parte 3)
Lenguaje Máquina
o Lenguaje binario.
o Dependiente de la máquina (CPU).
o Ejemplo:
o 00010101100010100101….
Introducción a la tecnología web (parte 3)
Lenguaje Ensamblador
o Traducción literal del lenguaje máquina peroutilizando elementos simbólicos:
o Leng. Alfanumérico.
o Palabras reservadas para las operaciones, en lugar decódigos binarios.
o Almacenamiento simbólico, nombres de variables, enlugar de direcciones de memoria.
o Ejemplo:
o store w
o load b
o add b
Introducción a la tecnología web (parte 3)
Traducción de Ensamblador a Máquina
Introducción a la tecnología web (parte 3)
get x
add y
store z
…
11001000100
01100100011
10001011001
…
Ensamblador
Programa en
Leng. Ensamblador
(“código Fuente”)
Programa en
Leng. Máquina
(“código Objeto”)
Un programa en ensamblador
Introducción a la tecnología web (parte 3)
Instrucciones Reconocidas
por el procesador (CPU)
Cód. Op. Simbólico
000 stop
1xx add
2xx substract
3xx store
5xx load
901 get
902 put
Leng. máquina Leng. ensamblador
Leng. Máquina
(Código objeto)
Posición Instrucción
00 901
01 398
02 901
03 399
04 598
05 199
06 902
07 000
Leng. Ensamblador
(Código fuente)
Paso Instrucción
00 get
01 store w
02 get
03 store b
04 load w
05 add b
06 put
07 stop
w = w + b
Lenguajes de alto nivel
o Poseen elementos que les aproximan a la forma en
que las personas piensan.
o Las instrucciones no corresponden a instrucciones del
lenguaje máquina.
o Son de propósito general.
o Ejemplo:
o z = x + y
Introducción a la tecnología web (parte 3)
Ejemplos de leng. de alto nivel
o Fortran
o Visual Basic
o C/C++
o Java
Introducción a la tecnología web (parte 3)
Ejemplo 1: Basic
Introducción a la tecnología web (parte 3)
CLS
PRINT “ESTE PROGRAMA CALCULA LA MEDIA DE LOS ENTEROS INTRODUCIDOS.”
PRINT “ESCRIBE 999 PARA INDICAR EL FINAL DE LOS DATOS”
SUMA=0
CONT=0
PRINT “INTRODUCE UN NUMERO”
INPUT NUMERO
DO WHILE NUMERO <> 999
SUMA=SUMA+NUMERO
CONT=CONT+1
PRINT “INTRODUCE EL SIGUIENTE NUMERO”
INPUT NUMERO
LOOP
MEDIA=SUMA/CONT
PRINT “LA MEDIA ES:”; MEDIA
END
Ejemplo 2: C++
Introducción a la tecnología web (parte 3)
#include <iostream.h>
main()
{
float media;
int numero, cont = 0;
int suma = 0;
cout << “ESTE PROGRAMA CALCULA LA MEDIA DE LOS ENTEROS INTRODUCIDOS.”;
cout << “ESCRIBE 999 PARA INDICAR EL FINAL DE LOS DATOS”;
cout << “INTRODUCE UN NUMERO”;
cin >> numero;
while (numero != 999)
{
suma = suma + numero;
cont++;
cout << “INTRODUCE EL SIGUIENTE NUMERO”;
cin >> numero;
}
media = suma / cont;
cout << “LA MEDIA ES:” << media;
}
Ejemplo 3: Java
Introducción a la tecnología web (parte 3)
import java.io.*;
import java.lang.*;
class MediaNumeros {
public static void main(String[] args) {
float media;
int cont = 0, suma = 0;
System.out.println (“ESTE PROGRAMA CALCULA LA MEDIA DE LOS
ENTEROS INTRODUCIDOS. ESCRIBE 999 PARA INDICAR EL FINAL DE LOS DATOS”);
try {
BufferedReader in = new BufferedReader (new InputStreamReader (system.in));
String cin = “0”;
System.out.println (“INTRODUCE UN NUMERO”);
while ( !(cin=in.readLine()).equals(“999”)) {
suma = suma + Integer.parseInt (cin);
cont++;
System.out.println ( “INTRODUCE EL SIGUIENTE NUMERO”);
}
in.close();
media = suma / cont;
System.out.println (“LA MEDIA ES:” + media);
}
catch (IOException e) {
System.out.println (“Error”);
}
}
}
Traducción de Lenguaje AN a Máquina
Introducción a la tecnología web (parte 3)
z = x + y
…
11001000100
01100100011
10001011001
…
Compilador
Programa en
Leng. de Alto Nivel
(“código Fuente”)
Programa en
Leng. Máquina
(“código Objeto”)
Intérprete
Act.5
Compilador vs. Intérprete
o El compilador traduce todo el programa fuente y
genera una versión en lenguaje máquina del
programa que es directamente ejecutable.
o Visión global del problema.
o Más eficiente
o El intérprete traduce y ejecuta una a una las
instrucciones del programa fuente.
o Visión local del problema.
o Menos eficiente, más sencillo.
Introducción a la tecnología web (parte 3)
Programación orientada a objetos
o Un tipo especial de lenguajes de alto nivel
o Incrementa la posibilidad de "reutilización" de
software.
o Combina datos y operaciones en los llamados
"objetos".
o La mayoría de los lenguajes más utilizados
actualmente son orientados a objetos.
o Java es un lenguaje orientado a objetos.
Introducción a la tecnología web (parte 3)
Java
o Java es el lenguaje "de moda" actualmente.
o Portabilidad: Si el ordenador tiene instalada una
"máquina virtual de Java" puede ejecutar cualquier
programa escrito en Java
Introducción a la tecnología web (parte 3)
Código fuente
progr.java
Byte Code
progr.class
javac
Código
ejecutable
java
Java (2)
o Java y Web:
o Las aplicaciones tradicionales basadas en Web se
ejecutan en el servidor y el resultado es enviado al
cliente.
o Los applets de Java se descargan en el cliente y es allí
donde se ejecutan.
o Lenguaje "seguro".
Introducción a la tecnología web (parte 3)
Introducción a la tecnología web (parte 3)
internetLinux
Windows XP
Windows Vista
Mac OS
Servidor
página
HTML
applet
Java
intérprete
HTML
intérprete
Java
Netscape (WinXP)
SO WinXP
Hardware PC
página
HTML
applet
Java
intérprete
HTML
intérprete
Java
Netscape (MacOS)
MacOS
Hardware PowerMac
Entornos de
Clientes
=
dife
ren
tes