Post on 31-Jan-2021
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