Ingeniería Web: Marco de Medición y Evaluación de Calidad Curso de Posgrado Universidad Nacional de San Luis / La Rioja / Catamarca Ingeniería Web: Marco de Medición y Evaluación de Calidad Internet Servicios Internet Arquitectura Tecnologías Web Contenidos Parte I Dr. Luis Olsina GIDIS_Web, Facultad de Ingeniería, UNLPam, La Pampa - Argentina TE 02302 430497 Ext. 6501 E-mail olsinal@ing.unlpam.edu.ar © 2007 GIDIS_Web

Esquema Introducción a Internet Servicios Internet Arquitectura Tecnologías Web

Internet Internet es un inmenso conjunto de redes de computadoras y otros dispositivos, que se encuentran interconectadas entre sí, dando lugar a la mayor red integrada de alcance mundial. Internet Móvil Aplicaciones con IU común Proporciona recursos informáticos distribuidos para procesos de entrega/recuperación de datos, información y servicios en forma semi-estructurada y estructurada. Procesamiento de Información? En evolución constante y crecimiento exponencial.

Internet Comparación respecto de la Velocidad de Adopción 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 30 60 90 120 ‘22 ‘30 ‘38 ‘46 ‘54 ‘62 ‘70 ‘78 ‘86 ‘94 ‘02 Usuarios (Millones)

Internet Algunas características de Internet desde el punto de vista de infraestructura: Constituye un Sistema Universal de comunicaciones Admite todo tipo de equipos (supercomputadoras, PCs, PDAs, celulares, etc.) de todo tipo de fabricantes Admite todo tipo de redes en cuanto: a su alcance (locales o LAN, metropolitanas o MAN, extendidas o WAN); tecnologías (protocolos) de red soportadas por TCP/IP (Ethernet, FDDI, ATM, Wireless etc.) ; medios físicos de transmisión (cables de cobre, fibra óptica, ondas de radio, satélites, etc.)

Internet Algunas características de Internet desde el punto de vista de las aplicaciones : Es única en cuanto a múltiples servicios E-mail, FTP, Web, Chat, etc. Acceso público, generalmente anónimo Acceso privado (Intranet, Extranet, Internet) Número ilimitado/limitado de usuarios Requerimientos de seguridad variados. Por ej., Web Sitio Informativo – bajo Transacción de E-commerce -muy altos

Esquema Introducción a Internet Servicios Internet Arquitectura Tecnologías Web

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

Servicios de Internet: Web Sitio Web: Conjunto de páginas que se acceden a través de un navegador Web. Puede contener textos, imágenes, sonidos, animaciones,..., y enlaces. Enlaces: Enlaza a páginas o partes de la misma, etc. URL Pág. 2 Pág.1: Fuente Pág. 2: Destino Enlace: Puede estar entre el textos, imágenes enlazadas,... URL Pág. 1

Servicios de Internet: Web Localizador Universal de Recursos (URL, Uniform Resource Locator) Un URL permite ubicar la información o recursos contenidos en un servidor. Un URL contiene una descripción completa de la ubicación de recursos dentro de los servidores. Ejemplo de URL para la Web: http://www.clarin.com/diario/2004/08/19/index_diario.html Dirección Web: IP o nombre lógico Directorios internos, documento Protocolo

Estructuras Lógicas de un Sitio URL base Jerárquica Secuencial Malla

Tipos de Enlaces Enlaces (por su Función) Enlaces (por su Alcance) Estructurales, Navegacionales. Semánticos, Asociativos Orientados a la Acción Enlaces (por su Alcance) Internos, Externos Enlaces (por su Tipo de Media) Textual, Gráfico, Mapa de Imagen ... por su Generación Estáticos, Dinámicos (Pensar en tipos de páginas)

Esquema Introducción a Internet Servicios Internet Arquitectura Tecnologías Web

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

Arquitectura Cliente/Servidor El cliente es el que inicia generalmente la comunicación. El servidor es el que está siempre activo, esperando peticiones de servicio/conexión por parte de los clientes. Se habla de Arquitectura de Sw en Capas: Presentación (Clientes) Lógica de Negocio (Servidor) Persistencia (Datos, Bases de Datos)

Arquitectura Cliente/Servidor Evolución de las Arquitecturas Sistemas Informáticos Datos Sistemas Monolíticos BD Negocio Presentación C/S 3 Capas Datos Negocio Presentación BD

Arquitectura Cliente/Servidor Arquitectura e Infraestructura de Red Cliente Web Internet TCP/IP HTML y Forms Navegador Web Servidor Web Páginas HTML Apps CGI HTTP DBMS HTML, Java RMI Objetos de Negocios

Esquema Introducción a Internet Servicios Internet Arquitectura Tecnologías Web

Internet: Tecnologías Web Arquitectura y Tecnologías para la Web Cliente Web HTTP TCP/IP HTML Navegador Web Servidor Web Páginas DBMS

Los Navegadores como clientes Web Internet: Tecnologías Web Los Navegadores como clientes Web Navegadores (Browsers): Son aplicaciones cliente que permiten acceder a servidores Web, recuperar y visualizar páginas, habilitando así al usuario para la navegación y búsqueda en el Web. Ejemplos de navegadores: Netscape Communicator, Internet Explorer, Opera, otros.

Los Navegadores como clientes Web Internet: Tecnologías Web Los Navegadores como clientes Web Los navegadores presentan la información en el formato hipertexto y pueden soportar varios protocolos. Además de http, los protocolos ftp, nntp, file, etc. Para localizar un documento en el sistema de información universal se utiliza el URL (Uniform Resource Locator). Sintaxis: esquema://dominio_servidor[:puerto]/ruta/fichero[#etiqueta] Ej. http://www.ing.unlpam.edu.ar/index.html donde esquema puede ser http, file, ftp, etc. y el dominio del servidor puede venir especificado por una dirección IP o un DNS

Internet: TecnologíasWeb Servidor Web (Web Server): Es un software de gestión de páginas (existe el hw en el que se encuentran almacenadas las mismas). Se encarga de administrar el acceso a ellas respondiendo ante solicitudes del cliente por medio del navegador. Servidor de Web Página Web HTML, ... Cliente Web 1 2 HTTP

Internet: TecnologíasWeb Protocolo HTTP: HTTP (HyperText Transfer Protocol): Protocolo que permite la interacción: 1) entre servidores y un programa cliente Web (1) entre servidores Web; con el objetivo de intercambiar documentos hipermediales básicamente en formato HTML. HTTP es un paradigma solicitud/respuesta entre cliente y servidor Web. El protocolo de comunicación HTTP es un protocolo de comunicación entre clientes y servidores Web a nivel de aplicación TCP/IP (niveles 4)

Internet: TecnologíasWeb 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

Implementación de Páginas Web: Internet: TecnologíasWeb Implementación de Páginas Web: Codificación: Las páginas son especificadas haciendo uso del lenguaje HTML (HyperText Markup Language). HTML es un lenguaje estándar para la codificación de documentos hipermediales. HTML es texto ASCII Al igual que XML, derivan del SGML (Standard Generalized Markup Language)

Implementación de Páginas Web: Internet: TecnologíasWeb Implementación de Páginas Web: HTML (HyperText Markup Language). No es un lenguaje de programación sino de codificación Describe el contenido de un documento y de algún modo el formato de la página y su apariencia La representación de la página puede depender del navegador utilizado, de su versión y de los módulos de extensión instalados (plug-ins).

Tecnología Web: Lenguaje HTML HTML (Hypertext Markup Language) Consta de un conjunto de elementos, denominados etiquetas o marcas, que se utilizan par incluir texto, imágenes, tablas, etc. La mayoría de las etiquetas se desdoblan en dos una de comienzo y una de fin. Y un conjunto de atributos <ETQ1> xxxxxxxxx </ETQ1> <ETQ1 atributo1=“valor1” atributo2=“valor2”...> La última versión es HTML 4 aprobada por el W3C (World Wide Web Consortium) www.w3c.org

Tecnología Web: Lenguaje HTML Estructura 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 cuerpo <!DOCTYPE> Ejemplo: <!DOCTYPE HTML PUBLIC “.//W3C//DTD HTML 4.0//EN”>

Tecnología Web: Lenguaje HTML <HEAD> <TITLE>Ejemplo de texto sin formato</TITLE> </HEAD> <BODY> El número de blancos que se incluyan en una página HTML y los cambios de línea se interpretan como un único blanco. El navegador determina dónde debe incorporar los cambios de línea. </BODY> </HTML> Ref. pt_texto12.html

Lenguaje HTML Elementos de la Cabecera (Head) <TITLE> Título de la página que aparecerá en los navegadores. Los buscadores lo utilizan para clasificar las páginas. <META> Sirve para incluir información sobre: el autor de la página, nombre del editor de HTML, una descripción breve de la página, etc.

Lenguaje HTML Al mismo documento A otros documento Hiperenlaces Al mismo documento <A name = “nombre”> Texto….</A> <A href = “#nombre”> Texto del enlace </A> A otros documento <A href = destino> Texto del enlace </A> A contenidos especiales <A href = “archivo.ps”> Enlace a un archivo postcript</A> <A href = “mailto:usuario1@direccion”> Enviar un email al usuario1</A> Ref. H*.html

Lenguaje HTML Imágenes Imágenes <IMG SRC=“foto.gif” ALIGN=“top | bottom | middle” LOWSRC=“fotobw.gif” HSPACE=x VSPACE=Y WIDTH=120 HEIGHT=200 ALT=“Texto alternativo” TITLE=“Descripción”>

Tecnologías Web: más allá del HTML Páginas Web Generadas Estática y Dinámicamente Tecnologías de Programación/Especificación del lado del cliente DHTML JavaScript CSS Applets de Java – ActiveX de Microsoft Tecnologías del lado del el servidor CGI C, Perl, etc. JAVA (JSP y Servlets) ASP de Microsoft PhP3