Dr. Luis Olsina Luis Olsina• Internet• Servicios Internet• Arquitectura• Tecnologías Web

Contenidos Contenidos Parte IParte I

GIDIS_Web, Facultad de Ingeniería, GIDIS_Web, Facultad de Ingeniería,

UNLPam, La Pampa - ArgentinaUNLPam, La Pampa - Argentina

TE 02302 430497 Ext. 6501TE 02302 430497 Ext. 6501

E-mail E-mail olsinal@ing.unlpam.edu.arolsinal@ing.unlpam.edu.ar© 2007 GIDIS_Web© 2007 GIDIS_Web

Ingeniería Web: Ingeniería Web: Marco de Marco de

Medición y Evaluación de CalidadMedición y Evaluación de Calidad

Curso de Posgrado Universidad Nacional de San Luis / La Rioja / Catamarca

EsquemaEsquema

• Introducción a InternetIntroducción a Internet• Servicios InternetServicios Internet• ArquitecturaArquitectura• Tecnologías WebTecnologías Web

InternetInternet

InternetInternet es un inmenso conjunto de es un inmenso conjunto de redes de redes de computadoras y otros dispositivoscomputadoras y otros dispositivos, que se , que se encuentran interconectadas entre sí, dando lugar a encuentran interconectadas entre sí, dando lugar a la mayor la mayor red integradared integrada de alcance mundial. de alcance mundial.

– Internet MóvilInternet Móvil– Aplicaciones con IU comúnAplicaciones con IU común

Proporciona recursos informáticos distribuidos para Proporciona recursos informáticos distribuidos para procesos de entrega/recuperación de datos, procesos de entrega/recuperación de datos, información y servicios en forma información y servicios en forma semi-estructuradasemi-estructurada y y estructuradaestructurada..

– Procesamiento de Información?Procesamiento de Información?

En evolución constante y crecimiento exponencial.En evolución constante y crecimiento exponencial.

InternetInternet Comparación respecto de la Comparación respecto de la Velocidad de Velocidad de

AdopciónAdopción con Otras Tecnologías con Otras Tecnologías

Años para alcanzar 50 M de usuarios::

Radio

Radio = 38

TV

TV = 13

Cable

Cable = 10

Internet/Web

Internet/Web = 5

0

30

60

90

120

‘22 ‘30 ‘38 ‘46 ‘54 ‘62 ‘70 ‘78 ‘86 ‘94 ‘02

Usu

ario

s (M

illon

es)

InternetInternet

AlgunasAlgunas características de características de Internet Internet desde el desde el punto de vista de infraestructurapunto de vista de infraestructura::

Constituye un Sistema Universal de comunicacionesConstituye un Sistema Universal de comunicacionesAdmite todo tipo de equipos (supercomputadoras, PCs, Admite todo tipo de equipos (supercomputadoras, PCs,

PDAs, celulares, etc.) de todo tipo de fabricantesPDAs, celulares, etc.) de todo tipo de fabricantesAdmite todo tipo de redes en cuanto: Admite todo tipo de redes en cuanto:

– a su alcance (locales o LAN, metropolitanas o MAN, extendidas a su alcance (locales o LAN, metropolitanas o MAN, extendidas o WAN); o WAN);

– tecnologías (protocolos) de red soportadas por TCP/IP tecnologías (protocolos) de red soportadas por TCP/IP (Ethernet, FDDI, ATM, Wireless etc.) ; (Ethernet, FDDI, ATM, Wireless etc.) ;

– medios físicos de transmisión (cables de cobre, fibra óptica, medios físicos de transmisión (cables de cobre, fibra óptica, ondas de radio, satélites, etc.)ondas de radio, satélites, etc.)

InternetInternet

Algunas características de Internet desde el Algunas características de Internet desde el punto de vista de las aplicaciones :punto de vista de las aplicaciones :

Es única en cuanto a múltiples serviciosEs única en cuanto a múltiples servicios– E-mail, FTP, Web, Chat, etc.E-mail, FTP, Web, Chat, etc.

Acceso público, generalmente anónimoAcceso público, generalmente anónimoAcceso privado (Intranet, Extranet, Internet)Acceso privado (Intranet, Extranet, Internet)Número ilimitado/limitado de usuarios Número ilimitado/limitado de usuarios Requerimientos de seguridad variados. Por ej., WebRequerimientos de seguridad variados. Por ej., Web

– Sitio Informativo – bajoSitio Informativo – bajo– Transacción de E-commerce -muy altosTransacción de E-commerce -muy altos

EsquemaEsquema

• Introducción a InternetIntroducción a Internet• Servicios InternetServicios Internet• ArquitecturaArquitectura• Tecnologías WebTecnologías Web

Servicios de InternetServicios de Internet

Servicios Básicos, Aplicaciones InternetServicios Básicos, Aplicaciones Internet Correo Electrónico (E-mail)Correo Electrónico (E-mail)Transferencia de Archivos (FTP - File Transfer Protocol )Transferencia de Archivos (FTP - File Transfer Protocol )World Wide Web (WWW o Web)World Wide Web (WWW o Web)Grupos de Noticias (Newsgroup)Grupos de Noticias (Newsgroup)Comunicación sincrónica y/o en tiempo real (IRC, ICQ, Comunicación sincrónica y/o en tiempo real (IRC, ICQ,

Video conferencia, Internet Phone -VoIP, etc.)Video conferencia, Internet Phone -VoIP, etc.)

Servicios de Internet: WebServicios de Internet: Web

Sitio Web:Sitio Web:Conjunto de páginas que se acceden a través Conjunto de páginas que se acceden a través

de un navegador Web. Puede contener textos, de un navegador Web. Puede contener textos, imágenes, sonidos, animaciones,..., y enlaces.imágenes, sonidos, animaciones,..., y enlaces.

Enlaces:Enlaces:Enlaza a páginas o partes de la misma, etc.Enlaza a páginas o partes de la misma, etc.

URL Pág. 2 Pág.1: FuentePág. 2: Destino

Enlace: Puede estar entreel textos, imágenes enlazadas,...

URL Pág. 1

Servicios de Internet: WebServicios de Internet: Web

Localizador Universal de Recursos Localizador Universal de Recursos (URL, (URL, Uniform Resource LocatorUniform Resource Locator)) Un URL permite ubicar la información o recursos Un URL permite ubicar la información o recursos

contenidos en un servidor.contenidos en un servidor. Un URL contiene una descripción completa de la Un URL contiene una descripción completa de la

ubicación de recursos dentro de los servidores.ubicación de recursos dentro de los servidores.Ejemplo de URL para la Web: Ejemplo de URL para la Web:

http://www.clarin.com/diario/2004/08/19/index_diario.htmlhttp://www.clarin.com/diario/2004/08/19/index_diario.html

Protocolo Dirección Web:IP o nombre

lógico

Directorios internos, documento

Estructuras Lógicas de un SitioEstructuras Lógicas de un Sitio

Jerárquica

Secuencial

Malla

URL base

Tipos de EnlacesTipos de Enlaces Enlaces (Enlaces (por su Funciónpor su Función))

Estructurales, Estructurales, – Navegacionales.Navegacionales.

Semánticos, Semánticos, – AsociativosAsociativos

Orientados a la AcciónOrientados a la Acción

Enlaces (Enlaces (por su Alcancepor su Alcance)) Internos, ExternosInternos, Externos

Enlaces (Enlaces (por su Tipo de Mediapor su Tipo de Media)) Textual, Gráfico, Mapa de ImagenTextual, Gráfico, Mapa de Imagen

... ... por su Generaciónpor su Generación Estáticos, DinámicosEstáticos, Dinámicos

(Pensar en tipos de páginas)(Pensar en tipos de páginas)

EsquemaEsquema

• Introducción a InternetIntroducción a Internet• Servicios InternetServicios Internet• ArquitecturaArquitectura• Tecnologías WebTecnologías Web

Internet y su InfraestructuraInternet y su Infraestructura

Caracterizado por una arquitectura Caracterizado por una arquitectura cliente-servidorcliente-servidor donde el servidor procesa y los clientes son múltiples, donde el servidor procesa y los clientes son múltiples, relativamente anónimos y por lo general de naturaleza relativamente anónimos y por lo general de naturaleza heterogénea (en cuanto a Sistemas Operativos, Sw heterogénea (en cuanto a Sistemas Operativos, Sw cliente, Hw servidor, …)cliente, Hw servidor, …)

Desde el punto de vista de Arquitectura de Sistemas (Sw) tres Desde el punto de vista de Arquitectura de Sistemas (Sw) tres componenetes básicos: componenetes básicos: el clienteel cliente, , el servidorel servidor, , la persistencia la persistencia (datos)(datos)

Y el soporte tecnológico de Y el soporte tecnológico de Infraestructura de RedesInfraestructura de Redes, que , que implica capas de red, protocolosimplica capas de red, protocolos y aplicaciones y aplicaciones disponibles en disponibles en Internet: Internet:

– Protocolo Protocolo TCP/IPTCP/IP,, HTTP HTTP yy Web Web

Arquitectura Cliente/ServidorArquitectura Cliente/Servidor

El cliente es el que inicia generalmente la El cliente es el que inicia generalmente la comunicación.comunicación.

El servidor es el que está siempre activo, El servidor es el que está siempre activo, esperando peticiones de servicio/conexión por esperando peticiones de servicio/conexión por parte de los clientes.parte de los clientes.

Se habla de Arquitectura de Sw en Capas:Se habla de Arquitectura de Sw en Capas:

Presentación (Clientes)Presentación (Clientes) Lógica de Negocio (Servidor)Lógica de Negocio (Servidor) Persistencia (Datos, Bases de Datos)Persistencia (Datos, Bases de Datos)

Arquitectura Cliente/ServidorArquitectura Cliente/Servidor

Evolución de las Arquitecturas Sistemas InformáticosEvolución de las Arquitecturas Sistemas Informáticos

Datos

Sistemas Monolíticos

BD

Negocio

Presentación

C/S 3 Capas

Datos

Negocio

Presentación

BD

Cliente Web

InternetTCP/IP

HTML yForms

Navegador Web Servidor Web

Páginas HTML

AppsCGI

HTTP HTTPDBMS

Cliente Web

HTML, Java

RMI

RMI

AppsObjetos deNegocios

Navegador Web

Arquitectura Cliente/ServidorArquitectura Cliente/Servidor

Arquitectura e Infraestructura de RedArquitectura e Infraestructura de Red

EsquemaEsquema

• Introducción a InternetIntroducción a Internet• Servicios InternetServicios Internet• ArquitecturaArquitectura• Tecnologías WebTecnologías Web

Cliente Web

HTTPTCP/IP

HTML

Navegador Web Servidor Web

Páginas HTML

DBMS

Cliente Web

Arquitectura y Tecnologías para la WebArquitectura y Tecnologías para la Web

Internet: Tecnologías WebInternet: Tecnologías Web

NavegadoresNavegadores ( (BrowsersBrowsers): Son aplicaciones cliente ): Son aplicaciones cliente que permiten acceder a que permiten acceder a servidores Webservidores Web, recuperar y , recuperar y visualizar páginas, habilitando así al usuario para la visualizar páginas, habilitando así al usuario para la navegación y búsqueda en el Web. navegación y búsqueda en el Web.

Ejemplos de navegadores:Ejemplos de navegadores: Netscape Communicator, Netscape Communicator, Internet Explorer, Internet Explorer, Opera, Opera, otros.otros.

Internet: Tecnologías WebInternet: Tecnologías Web

Los Navegadores como clientes WebLos Navegadores como clientes Web

Los Navegadores como clientes WebLos Navegadores como clientes Web Los Los navegadoresnavegadores presentan la información en el presentan la información en el formato formato

hipertextohipertexto y pueden soportar varios protocolos. Además y pueden soportar varios protocolos. Además de http, los protocolos ftp, nntp, file, etc.de http, los protocolos ftp, nntp, file, etc.

Para localizar un documento en el sistema de información Para localizar un documento en el sistema de información universal se utiliza el universal se utiliza el URL URL (Uniform Resource Locator).(Uniform Resource Locator). Sintaxis:Sintaxis:

esquema://dominio_servidor[:puerto]/ruta/fichero[#etiqueta]esquema://dominio_servidor[:puerto]/ruta/fichero[#etiqueta]Ej. Ej. httphttp://://www.ing.unlpam.edu.arwww.ing.unlpam.edu.ar//index.htmlindex.html

donde esquema puede ser http, file, ftp, etc. y el dominio donde esquema puede ser http, file, ftp, etc. y el dominio del servidor puede venir especificado por una dirección IP o del servidor puede venir especificado por una dirección IP o un DNSun DNS

Internet: Tecnologías WebInternet: Tecnologías Web

Servidor Web (Web Server):Servidor Web (Web Server):

Es un software de gestión de páginas (existe el hw en el que Es un software de gestión de páginas (existe el hw en el que se encuentran almacenadas las mismas). se encuentran almacenadas las mismas).

Se encarga de administrar el acceso a ellas respondiendo Se encarga de administrar el acceso a ellas respondiendo ante solicitudes del cliente por medio del navegador.ante solicitudes del cliente por medio del navegador.

Cliente WebServidor de Web

Página WebHTML, ...

Internet: TecnologíasWebInternet: TecnologíasWeb

HTTP

12

HTTP HTTP (HyperText Transfer Protocol)(HyperText Transfer Protocol):: Protocolo que Protocolo que permite la interacción: 1) entre servidores y un programa permite la interacción: 1) entre servidores y un programa cliente Web (1) entre servidores Web; con el objetivo de cliente Web (1) entre servidores Web; con el objetivo de intercambiar documentos hipermediales intercambiar documentos hipermediales básicamente en formato HTML. básicamente en formato HTML.

HTTP es un paradigma solicitud/respuesta entre cliente y HTTP es un paradigma solicitud/respuesta entre cliente y servidor Web.servidor Web.

El El protocolo de comunicación HTTPprotocolo de comunicación HTTP es un protocolo de es un protocolo de comunicación entre clientes y servidores Web a nivel de comunicación entre clientes y servidores Web a nivel de aplicación TCP/IP (niveles 4)aplicación TCP/IP (niveles 4)

Internet: TecnologíasWebInternet: TecnologíasWeb

Protocolo HTTP:Protocolo HTTP:

Internet: TecnologíasWebInternet: TecnologíasWeb

HTTP Status Codes: HTTP Status Codes: Algunos mensajes de Error

• 401 Unauthorized (requires authorization)

• 404 Can Not Found the URL requested

• 410 Can Not Found the URL requested and there is no forwarding info

• 500 Internal Server Error

• 503 Service Unavailable, cause server is too busy

Codificación:Codificación:Las páginas son especificadas haciendo uso del Las páginas son especificadas haciendo uso del

lenguaje lenguaje HTMLHTML (HyperText Markup Language)(HyperText Markup Language). . HTML es un lenguaje estándar para la HTML es un lenguaje estándar para la

codificación de documentos hipermediales.codificación de documentos hipermediales.HTML es texto ASCIIHTML es texto ASCIIAl igual que XML, derivan del SGML Al igual que XML, derivan del SGML (Standard (Standard

Generalized Markup Language)Generalized Markup Language)

Internet: TecnologíasWebInternet: TecnologíasWebImplementación de Páginas Web:Implementación de Páginas Web:

HTMLHTML (HyperText Markup Language)(HyperText Markup Language). . No es un lenguaje de programación sino de No es un lenguaje de programación sino de

codificación codificación Describe el contenido de un documento y de Describe el contenido de un documento y de

algún modo el formato de la página y su algún modo el formato de la página y su aparienciaapariencia

La representación de la página puede depender La representación de la página puede depender del navegador utilizado, de su versión y de los del navegador utilizado, de su versión y de los módulos de extensión instalados (módulos de extensión instalados (plug-insplug-ins).).

Internet: TecnologíasWebInternet: TecnologíasWebImplementación de Páginas Web:Implementación de Páginas Web:

Tecnología Web: Lenguaje HTMLTecnología Web: Lenguaje HTML

HTML (Hypertext Markup Language)HTML (Hypertext Markup Language) Consta de un conjunto de elementos, denominados Consta de un conjunto de elementos, denominados

etiquetas o marcas, que se utilizan par incluir texto, etiquetas o marcas, que se utilizan par incluir texto, imágenes, tablas, etc.imágenes, tablas, etc.

La mayoría de las etiquetas se desdoblan en dos una de La mayoría de las etiquetas se desdoblan en dos una de comienzo y una de fin. Y un conjunto de atributoscomienzo y una de fin. Y un conjunto de atributos

– <ETQ1><ETQ1> xxxxxxxxx xxxxxxxxx </ETQ1></ETQ1>– <ETQ1<ETQ1 atributo1atributo1=“valor1” =“valor1” atributo2atributo2=“valor2”...=“valor2”...>>

La última versión es HTML 4 aprobada por el W3C La última versión es HTML 4 aprobada por el W3C (World Wide Web Consortium) (World Wide Web Consortium) www.w3cwww.w3c..orgorg

Estructura de una página WebEstructura de una página Web<HTML> <HEAD> Información de la cabecera de la página </HEAD> <BODY> Información del cuerpo de una página </BODY></HTML>

Existe una etiqueta que no se incluye en la cabecera ni en el Existe una etiqueta que no se incluye en la cabecera ni en el

cuerpo cuerpo <!DOCTYPE><!DOCTYPE>

Ejemplo: <!DOCTYPE HTML PUBLIC “.//W3C//DTD HTML 4.0//EN”>

Tecnología Web: Lenguaje HTMLTecnología Web: Lenguaje HTML

<HTML><HTML>

<HEAD><HEAD>

<TITLE>Ejemplo de texto sin formato</TITLE><TITLE>Ejemplo de texto sin formato</TITLE>

</HEAD></HEAD>

<BODY><BODY>

El número de blancos que se incluyan El número de blancos que se incluyan

en una página HTML y los cambios de en una página HTML y los cambios de

línea se interpretan como un único blanco. línea se interpretan como un único blanco.

El navegador determina dónde debe El navegador determina dónde debe

incorporar los cambios de línea.incorporar los cambios de línea.

</BODY></BODY>

</HTML></HTML>

Ref. pt_texto12.html

Tecnología Web: Lenguaje HTMLTecnología Web: Lenguaje HTML

Lenguaje HTMLLenguaje HTML

Elementos de la Cabecera (Head)Elementos de la Cabecera (Head) <TITLE><TITLE>

– Título de la página que aparecerá en los Título de la página que aparecerá en los navegadores.navegadores.

– Los buscadores lo utilizan para clasificar las páginas.Los buscadores lo utilizan para clasificar las páginas.

<META><META>– Sirve para incluir información sobre:Sirve para incluir información sobre:

» el autor de la página, el autor de la página, » nombre del editor de HTML,nombre del editor de HTML,» una descripción breve de la página, etc.una descripción breve de la página, etc.

Al mismo documentoAl mismo documento<A<A namename = “nombre” = “nombre”>> Texto…. Texto….</A> </A> <A<A hrefhref = “#nombre” = “#nombre”>> Texto del enlace Texto del enlace </A></A>

A otros documentoA otros documento<A<A hrefhref = destino = destino>> Texto del enlace Texto del enlace </A></A>

A contenidos especialesA contenidos especiales<A<A hrefhref = “archivo.ps” = “archivo.ps”>> Enlace a un archivo postcript Enlace a un archivo postcript</A></A><A<A hrefhref = “mailto:usuario1@direccion” = “mailto:usuario1@direccion”>> Enviar un email al Enviar un email al

usuario1usuario1</A></A>

Ref. H*.html

Lenguaje HTMLLenguaje HTML HiperenlacesHiperenlaces

Lenguaje HTMLLenguaje HTML ImágenesImágenes

ImágenesImágenes<IMG<IMG SRCSRC=“foto.gif”=“foto.gif”

ALIGNALIGN=“top | bottom | middle” =“top | bottom | middle”

LOWSRCLOWSRC=“fotobw.gif” =“fotobw.gif”

HSPACEHSPACE=x=x

VSPACEVSPACE=Y=Y

WIDTHWIDTH=120 =120 HEIGHTHEIGHT=200 =200

ALTALT=“Texto alternativo” =“Texto alternativo”

TITLETITLE=“Descripción”=“Descripción”>>

Tecnologías de Programación/Especificación del lado del Tecnologías de Programación/Especificación del lado del clientecliente DHTMLDHTML JavaScriptJavaScript CSS CSS Applets de Java – ActiveX de MicrosoftApplets de Java – ActiveX de Microsoft

Tecnologías del lado del el servidorTecnologías del lado del el servidor CGICGI

– C, Perl, etc.C, Perl, etc. JAVA (JSP y Servlets)JAVA (JSP y Servlets) ASP de ASP de MicrosoftMicrosoft PhP3PhP3

Tecnologías Web: Tecnologías Web: más allá del HTMLmás allá del HTML

Páginas Web Generadas Estática y DinámicamentePáginas Web Generadas Estática y Dinámicamente