Introducción a la tecnología webmural.uv.es/maromo3/downloads/ITWxtema3.pdf · Introducción a la...

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.


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


El primer navegador gráfico

o En 1993 Marc Andreesen (estudiante) escribe

Mosaic. Precursor de Netscape.


Cómo funciona la web


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


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



Servidor de nombres

(DNS)

Servidor Web

Cliente Web

(Mosaic, Netscape,


Internet


Buscando

host:

www.uv.es

¿Dirección IP

de www.uv.es?

147.156.11.1

http://www.uv.es/



Servidor de nombres

(DNS)

Servidor Web

Cliente Web

(Mosaic, Netscape,


Internet


Envíame el documento

mastic/index.html

Conectando

con:

www.uv.es

http://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.


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


Hagamos una página web


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


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: …


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


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.


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.


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.








Web.



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.


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.


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.



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







Web.



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.


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.


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.


¿¿¿¿ Privacidad ????

Cookies: Ejemplo


Act.3







Web.



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.


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.


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


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)


¿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


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.








Web.



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.


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


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”


eXtensible Markup Language

XML


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.


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"


Ejemplo de documento


<! 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.


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


Ejemplo de transformación de XML


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


<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


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, …


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.


Lenguaje Máquina

o Lenguaje binario.

o Dependiente de la máquina (CPU).

o Ejemplo:

o 00010101100010100101….


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


Traducción de Ensamblador a Máquina


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


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


Ejemplos de leng. de alto nivel

o Fortran

o Visual Basic

o C/C++

o Java


Ejemplo 1: Basic


CLS

PRINT “ESTE PROGRAMA CALCULA LA MEDIA DE LOS ENTEROS INTRODUCIDOS.”

PRINT “ESCRIBE 999 PARA INDICAR EL FINAL DE LOS DATOS”

PRINT

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


#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


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


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.


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.


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


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".



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

Introducción a la tecnología webmural.uv.es/maromo3/downloads/ITWxtema3.pdf · Introducción a la...

Documents

Transcript of Introducción a la tecnología webmural.uv.es/maromo3/downloads/ITWxtema3.pdf · Introducción a la...