1

TTóópicos depicos de IngenierIngenieríía Weba Web

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

Contenidos Contenidos Parte IParte I

GIDIS, Facultad de Ingeniería, UNLPam,GIDIS, Facultad de Ingeniería, UNLPam,La Pampa La Pampa -- ArgentinaArgentinaTE 02302 430497 Ext. 6501TE 02302 430497 Ext. 6501EE--mail mail olsinal@ing.unlpam.edu.ar

Maestría en Ingeniería de SoftwareDepartamento de Informática

Universidad Nacional de San Luis

EsquemaEsquema

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

2

InternetInternet

InternetInternet es un inmenso conjunto de es un inmenso conjunto de redes de redes de computadorascomputadoras, y otros dispositivos, etc., que se , y otros dispositivos, etc., que se encuentran interconectadas entre sí, dando lugar a encuentran interconectadas entre sí, dando lugar a la mayor la mayor red de redesred de redes de alcance mundial. de alcance mundial. Proporciona recursos informáticos distribuidos Proporciona recursos informáticos distribuidos

para procesos de entrega/recuperación de para procesos de entrega/recuperación de información y servicios en forma semiinformación y servicios en forma semi--estructurada estructurada y estructurada.y estructurada.En evolución constante y crecimiento exponencial.En evolución constante y crecimiento exponencial.

InternetInternetComparación respecto de la Comparación respecto de la Velocidad de Velocidad de AdopciónAdopción con Otras Tecnologíascon 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)

3

InternetInternet

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

Constituye un Sistema Universal de comunicacionesConstituye un Sistema Universal de comunicacionesAdmite todo tipo de equipos (supercomputadoras, Admite todo tipo de equipos (supercomputadoras, PCs, PDAs, celulares, etc.) de todo tipo de fabricantesPCs, PDAs, 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, a su alcance (locales o LAN, metropolitanas o MAN, extendidas o WAN); extendidas o WAN);

–– tecnologías (protocolos) de red soportadas por TCP/IP tecnologías (protocolos) de red soportadas por TCP/IP ((EthernetEthernet, FDDI, ATM, etc.) ; , FDDI, ATM, 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 Algunas características de Internet desde el punto de vista de las aplicaciones :el punto de vista de las aplicaciones :

Es única en cuanto a múltiples serviciosEs única en cuanto a múltiples servicios–– EE--mail, FTP, Web, Chat, etc.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 Sitio Informativo –– bajobajo–– Transacción de ETransacción de E--commerce commerce --muy altosmuy altos

4

EsquemaEsquema

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

Servicios deServicios de InternetInternet

Servicios Básicos, Aplicaciones InternetServicios Básicos, Aplicaciones InternetCorreo Electrónico (ECorreo Electrónico (E--mailmail))Transferencia de Archivos Transferencia de Archivos (FTP (FTP -- File Transfer Protocol File Transfer Protocol ))World Wide Web (WWW o Web)World Wide Web (WWW o Web)Grupos de Noticias (Grupos de Noticias (NewsgroupNewsgroup))Listas de interésListas de interésComunicación en tiempo real (IRC, ICQ, Video Comunicación en tiempo real (IRC, ICQ, Video conferencia, Internet conferencia, Internet PhonePhone, , etc.)etc.)

5

Servicios deServicios de Internet: WebInternet: Web

Sitio Sitio WebWeb::Conjunto de páginas que se acceden a través Conjunto de páginas que se acceden a través de un navegador de un navegador WebWeb. Puede contener textos, . Puede contener textos, imágenes, sonidos, animaciones,..., y imágenes, sonidos, animaciones,..., y enlacesenlaces..

EnlacesEnlaces::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: DestinoEnlace: Puede ser entretextos, imágenes,...

URL Pág. 1

Servicios de Internet: WebServicios de Internet: Web

LocalizadorLocalizador Universal de Recursos Universal de Recursos (URL,(URL, Uniform ResourceUniform Resource LocatorLocator))

El URL permite ubicar la información o recursos El 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:

httphttp://://wwwwww.clarin.com/diario/hoy/.clarin.com/diario/hoy/index.htmlindex.html

Protocolo

Dirección WebIP o nombre lógico

Directorios internos, documento

6

Tipos de EnlacesTipos de Enlaces

Enlaces (por su Función)Enlaces (por su Función)Estructurales, Estructurales, –– Navegacionales.Navegacionales.

Semánticos, Semánticos, –– AsociativosAsociativosOrientados a la AcciónOrientados a la Acción

Enlaces (por su Alcance)Enlaces (por su Alcance)InternosInternos, Externos, Externos

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

... Por su Generación (Estáticos, Dinámicos)... Por su Generación (Estáticos, Dinámicos)

EsquemaEsquema

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

7

Internet y su InfraestructuraInternet y su Infraestructura

Caracterizado por una arquitectura Caracterizado por una arquitectura clientecliente--servidorservidordonde el servidor procesa y los clientes son donde el servidor procesa y los clientes son múltiples, relativamente anónimos y por lo general múltiples, relativamente anónimos y por lo general de naturaleza heterogénea (en cuanto a Sistemas de naturaleza heterogénea (en cuanto a Sistemas Operativos, Operativos, SwSw cliente, cliente, Hw servidor,Hw servidor, …)…)Desde el punto de vista de Arquitectura de Sistemas Desde el punto de vista de Arquitectura de Sistemas (Sw) tres componenetes básicos: (Sw) tres componenetes básicos: el clienteel cliente, , el el servidorservidor, , la persistencia (datos)la persistencia (datos)Y el soporte tecnológico de Y el soporte tecnológico de Infraestructura de Infraestructura de RedesRedes, que implica capas de red, protocolos, que implica capas de red, protocolos y y aplicaciones aplicaciones disponibles en Internet: disponibles en Internet:

Protocolo Protocolo TCP/IPTCP/IP,, HTTP HTTP yy WebWeb

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:

PresentaciPresentacióón (Clientes)n (Clientes)LLóógica de Negocio (Servidor)gica de Negocio (Servidor)Persistencia (Datos, Bases de Datos)Persistencia (Datos, Bases de Datos)

8

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áginasHTML

AppsCGI

HTTP HTTPDBMS

Cliente Web

HTML, Java

RMI

RMIApps

Objetos deNegocios

Navegador Web

Arquitectura Cliente/ServidorArquitectura Cliente/Servidor

Arquitectura e Infraestructura de RedArquitectura e Infraestructura de Red

9

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áginasHTML

DBMS

Cliente Web

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

Internet: Tecnologías WebInternet: Tecnologías Web

10

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

NetscapeNetscape CommunicatorCommunicator, , 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 WebLos 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 de http, los protocolos ftpftp, , nntp,nntp, file, etc.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 LocatorUniform Resource Locator).).Sintaxis:Sintaxis:

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

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

Internet: Tecnologías WebInternet: Tecnologías Web

11

Servidor Servidor WebWeb ((WebWeb ServerServer):):Es un software de gestión de páginas (existe el hw Es un software de gestión de páginas (existe el hw en el que se encuentran almacenadas las mismas). en el que se encuentran almacenadas las mismas). Se encarga de administrar el acceso a ellas Se encarga de administrar el acceso a ellas respondiendo ante solicitudes del cliente por medio respondiendo ante solicitudes del cliente por medio del navegador.del navegador.

Cliente WebServidor de Web

Página WebHTML, ...

Internet: TecnologíasWebInternet: TecnologíasWeb

HTTP

12

HTTP HTTP ((HyperTextHyperText TransferTransfer ProtocolProtocol)):: Protocolo Protocolo que permite la interacción: 1) entre servidores y que permite la interacción: 1) entre servidores y un programa cliente un programa cliente Web (1) Web (1) entre servidoresentre servidoresWeb;Web; con el objetivo de intercambiar documentos con el objetivo de intercambiar documentos hipermediales hipermediales

básicamente en formato HTML.básicamente en formato HTML.

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íasWebProtocolo HTTP:Protocolo HTTP:

12

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

El cliente establece una conexión TCP/IP con el servidorEl cliente establece una conexión TCP/IP con el servidorEl cliente envía una solicitud (El cliente envía una solicitud (RequestRequest) formada por:) formada por:

[][][]El servidor envía una respuesta (Response):El servidor envía una respuesta (Response):

[][]El servidor generalmente cierra la conexión El servidor generalmente cierra la conexión

Internet: TecnologíasWebInternet: TecnologíasWebProtocolo HTTP:Protocolo HTTP:

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:

13

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 aparienciaaparienciaLa 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 (plugplug--insins).).

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

Tecnología Web: LenguajeTecnología Web: Lenguaje HTMLHTML

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–– xxxxxxxxx xxxxxxxxx –– 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.w3c.orgwww.w3c.org

14

Estructura de una página WebEstructura de una página Web

Información de la cabecera de la página

Información del cuerpo de una página

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

Ejemplo:

Tecnología Web: LenguajeTecnología Web: Lenguaje HTMLHTML

Ejemplo de texto sin formatoEjemplo de texto sin formato

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.

Ref. pt_texto12.html

Tecnología Web: LenguajeTecnología Web: Lenguaje HTMLHTML

15

LenguajeLenguaje HTMLHTML

Elementos de la Cabecera (Head)Elementos de la Cabecera (Head)

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

–– 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 Al mismo documentomismo documento TextoTexto….…. Texto Texto del enlace del enlace

A A otros documentootros documento TextoTexto del enlace del enlace A A contenidos especialescontenidos especiales Enlace a un Enlace a un archivoarchivo

postcriptpostcript EnviarEnviar un email un email

al usuario1al usuario1Ref. H*.html

Lenguaje Lenguaje HTMLHTML HiperenlacesHiperenlaces

16

Lenguaje Lenguaje HTMLHTML ImágenesImágenes

ImágenesImágenes

Tecnologías de Programación/Especificación del lado del Tecnologías de Programación/Especificación del lado del clientecliente

DHTMLDHTMLJavaScriptJavaScriptCSS CSS Applets de Java Applets de Java –– ActiveX de MicrosoftActiveX de Microsoft

Tecnologías del lado del Tecnologías del lado del el servidorel servidorCGICGI

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

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