Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
Internet Aplicada a la Empresa:
INTRANET
Escuela Politécnica SuperiorUAM
Angel R. González y Juan A. Sigüenza [email protected] / [email protected]
Introducción General
Ciencia y ficción: Ciberespacio
"Con la consola esperándolo, allá en el altillo; una
Cyberespace 7 Ono-Sendai.
.......
En la pantalla se formaban y volvían a formarse dibujos
Escuela Politécnica Superior IntranetIntranet
3
En la pantalla se formaban y volvían a formarse dibujos
de hielo mientras el tanteaba en busca de brechas, esquivaba
las trampas mas obvias y trazaba la ruta que tomaría a
través del hielo de la Senso/Red."
William Gibson
Neuromante
Ciencia y ficción: El ordenador
invisible
A largo plazo, el ordenador personal y la terminal
de trabajo desaparecerán porque el acceso a la
informática estará en todas partes: en las paredes,
en nuestras muñecas y en “ordenadores para
borrador” (como el papel para borrador)
Escuela Politécnica Superior IntranetIntranet
4
borrador” (como el papel para borrador)
distribuidos para ser utilizados cuando sea
necesario.
Mark Weiser
Xerox PARC
Ciencia y ficción: Efecto
multiplicador de la tecnología
Si la automoción hubiera experimentado un desarrollo
parecido a la informática, se podría disponer de un Rolls-
Royce por menos de 300 ptas. (2 euros). Además el vehículo
dispondría de la potencia de un trasatlántico para ser
capaz de recorrer un millón de kilómetros (25 veces la
Escuela Politécnica Superior IntranetIntranet
5
capaz de recorrer un millón de kilómetros (25 veces la
vuelta al mundo) con sólo un litro de gasolina.
Tom Forester
Las visiones de Negroponte
� Átomos y Bits� El valor de un PC (átomos de hardware) y ..el de
su contenido (bits de información).� La economía de los bits, ¿en un mercado
capitalista, será posible su socialización?
El mundo digital
Escuela Politécnica Superior IntranetIntranet
6
capitalista, será posible su socialización?� Acceso a la información y el entretenimiento,
donde, cuando y como queramos.
¿Qué es Internet?
� La red de redes� Una anarquía autoorganizada� El sueño de la aldea global de McLuhan
Escuela Politécnica Superior IntranetIntranet
7
� El sueño de la aldea global de McLuhan
Síncrono y Asíncrono
� Medios de comunicación e interactividad• Radio y TV (broadcasting)• Internet y TV digital (la posibilidad de elegir)
Set top boxes. ¿Una nueva síntesis?
Escuela Politécnica Superior IntranetIntranet
8
• Set top boxes. ¿Una nueva síntesis?
� Chat versus e-mail
Historia de Internet I
� La salvaguarda de la información y coordinación mil itar en tiempos de crisis nuclear. El “simulacro” de Zbigniew Brzezinski en 1977.
� Las tecnologías de ARPA• Teleconferencias
Escuela Politécnica Superior IntranetIntranet
9
• Teleconferencias• Realidad Virtual• Satélites GPS• Correo electrónico
� Una red sin reglas burocráticas, sin censura y sin intromisión gubernamental .
Historia de Internet II
� ARPANET• Inicialmente conectó: UCLA, UC Santa Bárbara, Insti tuto de
Investigaciones de Stanford y la Universidad de Uta h.• En 1971 había dos docenas de nodos.• En 1974 se consolidan 62 nodos.• En 1981, se superaron los 200 nodos.
Escuela Politécnica Superior IntranetIntranet
10
• En 1981, se superaron los 200 nodos.• Hasta mediados los ochenta no se alcanzó una masa cr ítica de
importancia.• Al finalizar la guerra fría el relevo lo tomó la Nat ional Science
Foundation (NSF)• En 1994 se había incorporado hasta 45.000 redes peq ueñas.
Historia de Internet III
� El estándar TCP/IP� El crecimiento en Europa (EARN)� El desarrollo del WWW en el CERN
• Tim Berners-Lee y el lenguaje HTML
Escuela Politécnica Superior IntranetIntranet
11
� El binomio Clinton /Gore y las Autopistas de la Información
La repercusión de Internet
� Comparación con el invento de la imprenta por Gutenberg . Antes de este invento sólo había unos 30.000 libros en toda Europa. En 1500 ya había mas de
Escuela Politécnica Superior IntranetIntranet
12
toda Europa. En 1500 ya había mas de 9.000.000 de libros en toda Europa.
¿Como funciona Internet?
� Los orígenes: ordenador central-terminales tontas
� La actualidad: redes LAN y WAN� El futuro: ¿Los Network Computers NC)?
Escuela Politécnica Superior IntranetIntranet
13
El futuro: ¿Los Network Computers NC)?� Identificación numérica de máquinas
según el protocolo TCP/IP� DNS (Domain Name System)
Críticas a Internet IPocos aspectos de la vida diaria requieren
ordenadores, redes digitales o conectividad masiva.
Son irrelevantes para cocinar, conducir, hacer visitas,
negociar, comer, salir de excursión, bailar, hablar,
cotillear. No se necesita un teclado para hornear el
pan, jugar al fútbol americano, confeccionar un
edredón, construir una pared de piedra, recitar un
Escuela Politécnica Superior IntranetIntranet
14
edredón, construir una pared de piedra, recitar un
poema o rezar una oración.
Clifford Stoll
Silicon Snake Oil
Críticas a Internet II
� La proliferación de basura� El exceso de información� Los cuellos de botella
Escuela Politécnica Superior IntranetIntranet
15
� Los cuellos de botella
Mejoras para el futuro
� Mejorar los anchos de banda.� Diseñar mejores interfaces.� Crear agentes inteligentes.
Escuela Politécnica Superior IntranetIntranet
16
� Crear agentes inteligentes.� Utilizar filtros personalizados.
Soluciones a los cuellos de botella
� Mejora de la transmisión del soporte tradicional de cobre ( RDSI, ASDL).
� Conversión digital de las señales analógicas y su compresión posterior
Escuela Politécnica Superior IntranetIntranet
17
analógicas y su compresión posterior (MPEG).
� Infraestructura de fibra óptica y utilización de luz láser para la transmisión de la información.
Nuevas interfaces
� El paso a la TV digital interactiva .• HDTV• Fusión de TV e Internet• Pantallas murales
� Interfaces inteligentes y Domótica
Escuela Politécnica Superior IntranetIntranet
18
� Interfaces inteligentes y Domótica• Reconocimiento de la voz• Detección de presencia• Reconocimiento de la cara• Reconocimiento de la conducta
Agentes inteligentes
� ¿Qué tipo de inteligencia buscamos? P.e. ¿Cual es la siguiente letra en la secuencia UDTCC?
� Nivel inferior• Filtrado del correo electrónico: deshacerse del cor reo
basura, dar prioridad a las cartas y ordenarlas.
� Nivel superior
Escuela Politécnica Superior IntranetIntranet
19
� Nivel superior• Actualizar agendas, atender llamadas importantes y
bloquear las peticiones molestas.• Buscar al usuario en casos de emergencia.
Realidad Virtual y Ciberciencia
� Recrear mundos en el interior de un ordenador.
� Lenguajes VRML
Escuela Politécnica Superior IntranetIntranet
20
� Aplicaciones• Enseñanza• Medicina• Simulación de sistemas físicos complejos
Internet y la protección de los
derechos de autor
� Tipos de software según su propiedad• Freeware• Shareware
Software propietario
Escuela Politécnica Superior IntranetIntranet
21
• Software propietario
� El ejemplo de UNISYS y el formato GIF
Internet 2
� Objetivos• Crear una red de datos de alta velocidad, tanto
en los backbone como en los puntos finales. • Crear una red para uso exclusivo de
Escuela Politécnica Superior IntranetIntranet
22
• Crear una red para uso exclusivo de investigadores y científicos dentro del mundo de la educación.
Internet 2
� Miembros• Regulares: Universidades y Centros de
educación. (122 en la actualidad)• Afiliados: NCSA, etc.
Escuela Politécnica Superior IntranetIntranet
23
• Afiliados: NCSA, etc.• Corporativos: AT&T, IBM, Nokia, Apple, etc.
Internet 2
� Se encuentra dentro de la iniciativa Next Generation Internet ( www.ngi.gov ) aunque es independiente.Algunas de sus Universidades (53) estan
Escuela Politécnica Superior IntranetIntranet
24
� Algunas de sus Universidades (53) estan conectadas a través de vBNS (very high perfomance Backbone Network Service). En la actualidad 622 MB/s, en el 2000 2.4 GB/s.
La Internet 2 europea
� TEN-34 (Trans-European Network - 34 MB/s). A nivel de RedIris la velocidad es de 22 MB/s.Proyecto QUANTUM espera alcanzar los
Escuela Politécnica Superior IntranetIntranet
25
� Proyecto QUANTUM espera alcanzar los 155 MB/s.
� www.dante.net/quantum.html
Escuela Politécnica Superior IntranetIntranet
26
Bibliografía recomendada
� El Mundo digital• Nicholas Negroponte
� Camino al futuro
Escuela Politécnica Superior IntranetIntranet
27
• Bill Gates
� La red• Juan Luis Cebrián
Comercio electrónico
¿ Internet = Negocio ?
� La fortuna de Jim Clark co-fundador de Netscape alcanzó la cifra de 500 millones de dólares el día de su salida a bolsa. A los 18 meses el valor se duplicó.
Escuela Politécnica Superior IntranetIntranet
29
los 18 meses el valor se duplicó.� Bill Gates co-fundador de Microsoft tardó
12 años en conseguir dicha fortuna.
Definición de Comercio electrónico
� Es la compra y venta a través del ordenador de productos y servicios entre personas individuales y/o empresas.
� Estos sistemas están basados en en el
Escuela Politécnica Superior IntranetIntranet
30
� Estos sistemas están basados en en el procesamiento y transmisión de datos digitalizados (textos, imágenes, sonidos) y que son transportados a través de redes abiertas como Internet.
Comercio Electrónico
� Información de los productos� Especificación de las transacciones
(transferencia electrónica de fondos, dinero digital, autorización de tarjetas de crédito)
� Confirmación de la entrega de los productos y
Escuela Politécnica Superior IntranetIntranet
31
� Confirmación de la entrega de los productos y servicios tanto digitales (información, software, etc.) como físicos (libros, discos,.)
� Atención al cliente (servicio postventa )
Comercio electrónico (historia)
� La venta por catálogo• Correo• teléfono
� La informatización bancaria
Escuela Politécnica Superior IntranetIntranet
32
� La informatización bancaria• Cajeros• Terminales Punto de Venta
� Videotex� Internet
Comercio Electrónico:Tipos de relación
� Empresa-Empresa (B2B)� Empresa-Administración� Empresa -Consumidor (B2C)
Escuela Politécnica Superior IntranetIntranet
33
� Empresa -Consumidor (B2C)� Administración-Ciudadano� Individuo-Individuo
Comercio electrónicoPuntos fuertes
� Mejora las relaciones con el cliente� Reduce costes� Acceso a un mercado global
Escuela Politécnica Superior IntranetIntranet
34
� Acceso a un mercado global
Comercio electrónicoPuntos débiles
� Seguridad� Desconfianza en los medios de pago� Malas infraestructuras de comunicación
Escuela Politécnica Superior IntranetIntranet
35
� Malas infraestructuras de comunicación� Costes adicionales para el usuario (telef)� Cuestiones lingüísticas
Informe Forrester
� Motivos para introducirse en Internet• Descenso de los costes• Reducción del tiempo de respuesta
Mejora del flujo de información
Escuela Politécnica Superior IntranetIntranet
36
• Mejora del flujo de información
Tipos de Web en su aplicación
comercial
� Web de presencia� Web de marketing� Web de valor añadido (banco en casa)
Escuela Politécnica Superior IntranetIntranet
37
� Web de valor añadido (banco en casa)� Web como negocio (tienda en casa)� Web corporativo --> Intranet
Tipos de negocio a través del Web
� Venta de productos • Soporte analógico• Soporte digital
Escuela Politécnica Superior IntranetIntranet
38
� Venta de servicios• Soporte digital
� El negocio esta en soportar publicidad
Otras aplicaciones comerciales
� Cobrar por el leer el correo� Pagar por lo que uno exactamente desea:
p.e. Una sola canción de un CD musical.
Escuela Politécnica Superior IntranetIntranet
39
� Pay per view
Aspectos claves para un cátalogo Web
de éxito
� Según la valoración de los clientes:• Organización• Contenido
Interactividad
Escuela Politécnica Superior IntranetIntranet
40
• Interactividad• Respuesta
Recomendaciones finales I
� Investigar y analizar la red como un medio para el marketing
� Decidir a quién llegar
Escuela Politécnica Superior IntranetIntranet
41
� Determinar la precisión que queremos en las respuestas de los clientes
� Resaltar las ventajas de nuestra empresa, asi como destacar las características clave de sus productos y servicios
Recomendaciones finales II
� Elegir la tecnología a utilizar� Decidir que información se debe presentar� Convertir en digital la información y
Escuela Politécnica Superior IntranetIntranet
42
� Convertir en digital la información y colocarla en la red
� Promocionar el sitio Web� Para aprender y mejorar, hay que
escuchar a los clientes
Seguridad
¿Qué hay que proteger?
� Datos.� Entradas no deseadas a los sistemas.� Intento de intercepción de mensajes.
Escuela Politécnica Superior IntranetIntranet
44
� Intento de intercepción de mensajes.� Protección ante virus.� Derechos de autor.
Protección de datos
� Datos que afectan a la intimidad de las personas: identificación personal, datos médicos, etc. (LOPD).Datos confidenciales de una organización
Escuela Politécnica Superior IntranetIntranet
45
� Datos confidenciales de una organización (casos de espionaje industrial).
Entradas no deseadas a los sistemas
� Manipulación remota de archivos y controles.
� Manipulación de transacciones bancarias.
Escuela Politécnica Superior IntranetIntranet
46
� Accesos a control de salas de operaciones en complejos industriales.
Intercepción de mensajes
� Escaneado de eventos con el fin de:• Acceder a password.• Número de tarjeta de crédito.
Escuela Politécnica Superior IntranetIntranet
47
Los que no buscan beneficio propio
� El único objetivo es causar daño:• Virus• Gusanos
Algoritmos dañinos
Escuela Politécnica Superior IntranetIntranet
48
• Algoritmos dañinos• Vandalismo y terrorismo cibernético
Derechos de autor
� Protección mediante Copyright� En Internet abarca:
• Forma: Diseño de las páginas (conceptual y de navegación)
Escuela Politécnica Superior IntranetIntranet
49
navegación)• Fondo: Contenidos (textos y materiales
multimedia)
Mecanismos de proteccíón
� Concienciar a los usuarios� Medidas preventivas� Cortafuegos
Escuela Politécnica Superior IntranetIntranet
50
� Cortafuegos� Criptografía� Autentificación� Seguridad en las transacciones
Concienciar a los usuarios
� Cambiar regularmente las contraseñas de acceso.
� Evitar las contraseñas de acceso fácilmente deducibles.
Escuela Politécnica Superior IntranetIntranet
51
fácilmente deducibles.� Mantener la confidencialidad de las
contraseñas de acceso.� Utilizar solamente los privilegios para los
que se está autorizado.
Medidas preventivas
� Seguridad física: Control de acceso a instalaciones, control de entrada y salida de materiales informáticos. Utilización de Tokens para ordenadores portátiles.
Escuela Politécnica Superior IntranetIntranet
52
para ordenadores portátiles.� Seguridad en ordenadores centrales. Control de
contraseñas y administración efectiva: Evitar cuentas inactivas o temporales.
� Seguridad en ficheros: solo lectura, lectura y escritura, etc.
Cortafuegos (Firewalls)
� Son máquinas donde el hardware y el sistema operativo han sido provistos de un sistema de seguridad de acuerdo con las certificaciones C2, B1 y B2.
� Pueden ser:• Basados en routers: Filtran ciertos paquetes. Solo dejan
Escuela Politécnica Superior IntranetIntranet
53
• Basados en routers: Filtran ciertos paquetes. Solo dejan acceder a usuarios conectados a ordenadores que pos een una dirección IP de acceso autorizado.
• Basados en circuitos: Un ordenador actúa de pasarel a con posibilidad de filtrar paquetes y utilizar funcione s avanzadas de autentificación.
Criptografía I
� Codificación de un mensaje con el fin de que ninguna persona no deseada lea su contenido.
� Alan Turing y la máquina de cifrado
Escuela Politécnica Superior IntranetIntranet
54
� Alan Turing y la máquina de cifrado ENIGMA en la segunda guerra mundial.
� En 1976 DES (Data Encryption Standard)� En 1978 RSA (Rivest Shamir y Adelman)
Criptografía II
� Criptografía de clave simétrica : Se utiliza la misma clave para codificar y descodificar. Está basada en números primos, polinomios, etc.
Escuela Politécnica Superior IntranetIntranet
55
primos, polinomios, etc.� Criptografía de clave compartida : Hay
varios usuarios autorizados que tienen parte de la clave y son necesarios para el desciframiento.
Criptografía III
� Criptografía de clave maestra : Una organización posee una llave maestra de las que se derivan las claves de los usuarios, utilizando por ejemplo el DNI
Escuela Politécnica Superior IntranetIntranet
56
usuarios, utilizando por ejemplo el DNI como base. La clave maestra conjuntamente con el número de identificación permiten desencriptar la información.
Criptografía IV
� Criptografía de clave pública : El método de encriptación es público (p.e. Una fórmula matemática) pero el método de desencriptación solo lo sabe la persona
Escuela Politécnica Superior IntranetIntranet
57
desencriptación solo lo sabe la persona propietaria. De esta manera el usuario difunde la clave pública y se reserva la privada.
Pretty Good Privacy
� Software de criptografía prácticamente inviolable creado por Phil Zimmerman en 1991.Utiliza parcialmente el algoritmo RSA.
Escuela Politécnica Superior IntranetIntranet
58
� Utiliza parcialmente el algoritmo RSA.
Autentificación
� Consiste en demostrar la veracidad del origen de un documento.
� Su implementación es la firma digital y consta de dos partes:
Escuela Politécnica Superior IntranetIntranet
59
consta de dos partes:• Identificación: certifica que el emisor es quién
dice ser.• Compromiso: certifica que el emisor es el
autor de la operación.
Métodos para la firma digital
� Firma de comprobación aleatoria o “hash”: los datos se someten a un proceso de barajado.
� Digital Signature Standard (DSS): clave
Escuela Politécnica Superior IntranetIntranet
60
� Digital Signature Standard (DSS): clave pública desarrollado por el NIST.
� RSA: clave pública.
Seguridad en las transacciones
� Secure Sockets Layer (SSL): propuesta por Nescape, utiliza la tecnología RSA y diferentes algoritmos de encriptación.Secure HTTP (S-HTTP): es una ampliación
Escuela Politécnica Superior IntranetIntranet
61
� Secure HTTP (S-HTTP): es una ampliación de HTTP.
Secure Sockets Layers (SSL)
� Construye una conexión de comunicación donde todos los datos son encriptados antes de ser transmitidos a través de Internet.
Escuela Politécnica Superior IntranetIntranet
62
Internet.
Secure Electronic Transmission
SET
� Incluye un método para la autentificación de todas las partes mediante certificación a través de terceros.Puede sustitir a SSL en transacciones de
Escuela Politécnica Superior IntranetIntranet
63
� Puede sustitir a SSL en transacciones de alto valor.
Control de accesos: Una nueva
perspectiva
� Algo que sabes : Clave de acceso� Algo que tienes : Tarjeta de coordenadas
Escuela Politécnica Superior IntranetIntranet
64
� Algo que tienes : Tarjeta de coordenadas� Algo que eres: Biometría
¿Qué es la biometría?
� La biometría es el estudio de los organismos vivos en base a sus medidas y distribuciones estadísticas de su morfología.
Escuela Politécnica Superior IntranetIntranet
65
morfología.� La biometría está asociada a diversas
disciplinas científicas como la Biología, Medicina, Estadística e Informática.
¿Qué es la Biometría digital?
� Con este término nos referimos a los métodos y tecnologías digitales para efectuar estudios biométricos.La investigación en este campo pertenece
Escuela Politécnica Superior IntranetIntranet
66
� La investigación en este campo pertenece al área del Reconocimiento de Patrones y está asociada a métodos estadísticos avanzados aplicados a problemas de clasificación.
Intersección Biometría/Criptografía
� Privacidad : Los métodos de cifrado están basados en una clave. La biometría digital se puede usar para calcular esa clave.Autentificación : La clave biométrica
Escuela Politécnica Superior IntranetIntranet
67
� Autentificación : La clave biométrica permite asegurarnos de la identidad.
� Integridad : Por el mismo motivo se asegura la integridad del mensaje.
Problemas planteados
� Biometría estática:• Reconocimiento de caras• Reconocimiento de huella dactilar y retina• Reconocimiento de la escritura y de la firma
� Biometría dinámica
Escuela Politécnica Superior IntranetIntranet
68
� Biometría dinámica• Reconocimiento de la voz• Reconocimiento de la escritura y de la firma• Reconocimiento del tecleo
El lenguaje HTML
� Hipertexto e Hipermedia� HTML: HyperText Markup Language� Lenguaje basado en etiquetas ó tags,
Escuela Politécnica Superior IntranetIntranet
69
� Lenguaje basado en etiquetas ó tags, utilizado en la Web para crear documentos con contenidos hipermedia (texto, imágenes, vídeo, audio,...).
� Documento HTML: fichero ASCII, con sufijo html ó htm.
Edición de páginas HTML
� Editores de propósito general.� Editores asociados al navegador utilizado:
• Netscape Composer
Escuela Politécnica Superior IntranetIntranet
70
• MS Internet Explorer
� Editores específicos:• HoTMetaL• MS FrontPage
� Procesadores de texto.
Manuales y Guías de Referencia HTML
� A Beginners Guide to HTML (accesible en formato PDF a través del web)
� HTML Avanzado. Bruce Morris. McGraw-Hill, Microsoft Press.
Escuela Politécnica Superior IntranetIntranet
71
Microsoft Press.� Multitud de manuales y guías en Internet:
• www.vmaestro.com• webarch.com/barebones• www.ncsa.uiuc.edu/general/internet/Www/htmlpri
mer.html
Elementos del Lenguaje HTML
� Formato general:• <etiqueta> Especificación </etiqueta>
� No se distinguen mayúsculas de minúsculas.
Escuela Politécnica Superior IntranetIntranet
72
� Retornos de carro, espacios en blanco y tabulaciones no son significativos.
� La inclusión de comentarios no son procesados por el navegador:• <! comentario>
Estructura básica del documento HTML
� Etiqueta de apertura y cierre del documento:• <html></html>
Escuela Politécnica Superior IntranetIntranet
73
� Definiciones de la cabecera:• <head></head>
� Cuerpo del documento HTML:• <body></body>
Estructura básica del documento HTML
� <HEAD></HEAD>, contiene etiquetas que definen el documento HTML. • Establece el título del documento:
# <title> Título del documento </title>
Escuela Politécnica Superior IntranetIntranet
74
# <title> Título del documento </title>
• Establece el nombre del autor del documento:# <meta name=“Autor” content=“Angel González” >
• Espera 5 segundos y redirecciona a otra URL:# <meta http-equiv=“refresh”
content=“5;url=http://www.ii.uam.es” >
Estructura básica del documento HTML
� <BODY></BODY>, engloba todas las etiquetas que forman el documento HTML.
� Los atributos de la etiqueta <BODY> definen el aspecto general del documento HTML:
Escuela Politécnica Superior IntranetIntranet
75
el aspecto general del documento HTML:• <body background=“url ó fichero gráfico”>• <body bgcolor=“color de fondo”>• <body text=“color del texto”>• <body link=“color de los enlaces no visitados”>• <body vlink=“color de los enlaces visitados”>• <body alink=“color del enlace cuando se hace click sobre el”>
Formateo elemental de textos
� Encabezamientos:• <h1></h1>, <h2></h2>, <h3></h3>,..., <h6></h6>
� Centrado de texto ó imágenes:
Escuela Politécnica Superior IntranetIntranet
76
• <center></center>
� Definición de parráfo:• <p align=“alineación” >
# Izquierda: <p align=“left” > # Derecha: <p align=“right” ># Centro: <p align=“center” >
Formateo elemental de textos
� Retorno de carro en el documento:• <br>
� Texto preformateado:
Escuela Politécnica Superior IntranetIntranet
77
• <pre></pre>
� Negrita:• <b></b>
� Itálica ó cursiva:• <i></i>
Formateo elemental de textos
� Subrayado:• <u></u>
� Texto grande:
Escuela Politécnica Superior IntranetIntranet
78
• <big></big>
� Texto pequeño:• <small></small>
� Introducción de líneas:• <hr align=“left | right | center” noshade size=“n”
width=“n” >
Formateo elemental de textos
� Cambio de letra• < font face=“arial” size=“12” color=“red”>
Escuela Politécnica Superior IntranetIntranet
79
Creación de Listas
� Listas no ordenadas:<ul type=“disc ó circle ó square” ><li>
Escuela Politécnica Superior IntranetIntranet
80
</ul>
� Listas ordenadas:<ol start=n type=“1 ó A ó I” ><li></ol>
Creación de Listas
� Listas de Definición:<dl><dt> Término 1
Escuela Politécnica Superior IntranetIntranet
81
<dd> Definición del Término 1......<dt> Término n<dd> Definición del Término n</dl>
Creación de Listas
� Listas anidadas:<ul type=“square” >
<li> Flor
Escuela Politécnica Superior IntranetIntranet
82
<ol start=1 type=“A” ><li> Rosa<li> Tulipan
</ol><li> Animal
</ul>
Etiquetas específicas de Navegadores
� Desplazamiento horizontal de texto. Sólo en MS Explorer:
Escuela Politécnica Superior IntranetIntranet
83
• <marquee> Texto desplazamiento </marquee>
� Objetos que parpadean. Sólo en Netscape Navigator:• <blink> Texto que parpadea </blink>
Inclusión de Imágenes
� Formatos utilizados: GIF y JPEG� Sintaxis:
• <img src=“fichero_imagen.gif | jpg | jpeg” >
� Atributos:
Escuela Politécnica Superior IntranetIntranet
84
� Atributos:• alt=“texto explicativo”• align=“top | middle | bottom | left | right”• height=n• width=n• border=n
Creación de Hiperenlaces
� Permiten enlazar con otro página local, una zona de la misma página u otra situada en otro ordenador de la red.Ejemplos:
Escuela Politécnica Superior IntranetIntranet
85
� Ejemplos:• <a href=“autores.html” > Autores de la
Generación del 27 </a>• <a href=“principal.html#indice” > Indice </a>• <a href=“http://www.ii.uam.es” > Escuela
Politécnica Superior </a>
Hiperenlaces de un documento a otro
� Sintaxis:• <a href=“url absoluta ó url relativa” > Texto </a>• url absoluta:
# http://direccion_web/path/fichero.html
Escuela Politécnica Superior IntranetIntranet
86
# http://direccion_web/path/fichero.html
• url relativa:# se puede omitir el nombre de la direccion_web y el path
� Ejemplo:• <a href=“autores.html” > Autores de la
Generación del 27 </a>
Hiperenlaces en una misma página
� Se deben utilizar los anclajes� Para definir un anclaje:
• <a name=“nombre_anclaje” > Texto </a>
Escuela Politécnica Superior IntranetIntranet
87
• name: referencia el anclaje• Texto: es la información asociada a ese anclaje y
punto de destino del hiperenlace que utiliza ese anclaje.
� Ejemplo:• <a name=“indice” > Indice </a>
Hiperenlaces en una misma página
� Una vez definido el anclaje, el hiperenlace se construye utilizando la siguiente sintaxis:• <a href=“#nombre_anclaje” > Ir a anclaje </a>
Escuela Politécnica Superior IntranetIntranet
88
� Ejemplo:• <a href=“#indice” > Indice del libro </a>
Hiperenlaces a un anclaje en otra página
� Para realizar un hiperenlace a un anclaje definido en otra página:• <a href=“url#nombre_anclaje > Texto </a>
Escuela Politécnica Superior IntranetIntranet
89
� Ejemplo: Si se ha definido un anclaje llamado apendice en la página autores.html, el hiperenlace será de la forma:• <a href=“autores.html#apendice > Apéndice </a>
Tablas
� Permiten mostrar la información distribuida en filas y columnas
� Se utilizan básicamente para mostrar resultados o conjunto de datos
Escuela Politécnica Superior IntranetIntranet
90
resultados o conjunto de datos� Otro uso que se da a las tablas es el de
composición o formateo dentro de una página de elementos textuales ó gráficos
� No es necesario definir previamente el número de filas y columnas de la tabla
Tablas
� Declaración de inicio/fin de la tabla:• <table> </table>
� Definición de fila:
Escuela Politécnica Superior IntranetIntranet
91
• <tr> </tr>
� Definición de columna:• celda de cabecera: <th> </th>• celda de datos: <td> </td>
Tablas
� Definición de una tabla de 2 filas y 2 columnas:
<table>
<tr><td> Fila 1 Columna 1 </td>
Escuela Politécnica Superior IntranetIntranet
92
<td> Fila 1 Columna 1 </td><td> Fila 1 Columna 2 </td>
</tr><tr>
<td> Fila 2 Columna 1 </td><td> Fila 2 Columna 2 </td>
</tr></table>
Tablas
� Atributos de TABLE:• ALIGN: <table align=“left | center | right” >• BACKGROUND: <table background=“gif | jpg” >
Escuela Politécnica Superior IntranetIntranet
93
• BORDER: <table border=n >• BGCOLOR: <table bgcolor=“color” >• WIDTH: <table width=“% | valor absoluto” >
Tablas
� Atributos de TD y TH:• ALIGN: <td align=“left | center | right”>• BGCOLOR: <td bgcolor=“color”>
Escuela Politécnica Superior IntranetIntranet
94
• VALIGN: <td valign=“top | middle | bottom”>• HEIGHT: <td height=“valor absoluto(pixels)”>• WIDTH: <td width=“valor absoluto (pixels) | %”>• COLSPAN: <td colspan=n>• ROWSPAN: <td rowspan=n>
Tablas
� Atributos de TR:• ALIGN: <tr align=“left | center | right”>• BGCOLOR: <tr bgcolor=“color”>
Escuela Politécnica Superior IntranetIntranet
95
• VALIGN: <tr valign=“top | middle | bottom”>
Mapas Gráficos
� Son imágenes sensibles al ratón� Se definen mediante coordenadas� Envían a diferentes páginas ó a diferentes
Escuela Politécnica Superior IntranetIntranet
96
� Envían a diferentes páginas ó a diferentes partes de un mismo documento al pulsar sobre áreas distintas
� Existe software de ayuda: MAPEDIT
Mapas Gráficos
� Declaración de un mapa ó zona sensible al ratón:• <map name=“nombre_mapa”> ... </map>
Escuela Politécnica Superior IntranetIntranet
97
� Definición del área sensible al ratón:• <area shape=“poly | rect | circle”
coords=“coordenadas_pixels” href=“url”>
� Utilización de una imagen como base del mapa:• <img src=“imagen” usemap=“#nombre_mapa”>
Mapas Gráficos
� Especificación de coordenadas• Tipo POLY: coordenadas de los puntos que
forman la figura: “cx1,cy1,cx2,cy2,cx3,cy3,...cxN,cyN”
Escuela Politécnica Superior IntranetIntranet
98
“cx1,cy1,cx2,cy2,cx3,cy3,...cxN,cyN”• Tipo RECT: coordenadas de la esquina superior
izquierda, coordenadas de la esquina inferior derecha: “cx1,cy1,cx2,cy2”
• Tipo CIRCLE: coordenadas del centro del circulo y valor del radio del circulo: “cx1,cx2,radio”
Mapas Gráficos
<map name=“colores”><area shape=“poly”
coords=“10,49,29,10,49,49” href=“verde.html”>
<area shape=“rect” coords=“60,10,49,99,49”
Escuela Politécnica Superior IntranetIntranet
99
coords=“60,10,49,99,49” href=“rojo.html”>
<area shape=“circle” coords=“130,30,20” href=“azul.html”>
</map>
<img src=“colores.gif” usemap=“#colores”>
Frames ó Marcos
� Permite subdividir el área de visualización del navegador con diferentes páginas HTML
� Cada marco muestra su propia URL
Escuela Politécnica Superior IntranetIntranet
100
� Los marcos pueden tener nombre� En los hiperenlaces se puede especificar en
que marco se desea ver el documento referenciado
Frames ó Marcos
� Definición de marcos en documentos HTML:<frameset rows=“% | valor absoluto (pixels) | *”
cols=“% | valor absoluto (pixels) | * ><frame src=“url” name=“nombre del frame”>
Escuela Politécnica Superior IntranetIntranet
101
<frame src=“url” name=“nombre del frame”><frame src=“url” name=“nombre del frame”><frame src=“url” name=“nombre del frame”>....</frameset>
Frames ó Marcos
� Atributos de FRAME:• SRC: <frame src=“url”>• NAME: <frame name=“nombre de marco”>
Escuela Politécnica Superior IntranetIntranet
102
• MARGINWIDTH: <frame marginwidth=valor absoluto (en pixels)>
• MARGINHEIGHT: <frame marginheight=valor absoluto (en pixels)>
• SCROLLING: <frame scrolling=“yes | no | auto”>• NORESIZE: <frame noresize>
Frames ó Marcos
� Ejemplo: Creación de un documento html, llamado pagina.html, con 2 frames verticales<html><head></head>
Escuela Politécnica Superior IntranetIntranet
103
<head></head><frameset cols=“30%,70%”>
<frame src=“indice.html” name=“indice”><frame src=“pprincipal.html” name=“contenido”>
</frameset></html>
Frames ó Marcos
� El atributo TARGET, se utiliza para especificar en que frame se muestran los documentos HTML• <a href=“url” target=“nombre_marco”>
Escuela Politécnica Superior IntranetIntranet
104
• <a href=“url” target=“nombre_marco”>
� Basandonos en el ejemplo anterior, si deseamos mostrar el documento curriculum.html en el segundo marco definido, debemos utilizar:• <a href=“curriculum.html” target=“contenido”>
CGI: Common Gateway Interface
� CGI define un interfaz para ejecutar aplicaciones externas y programas en el servidor web.La aplicación CGI se ejecuta usando datos
Escuela Politécnica Superior IntranetIntranet
105
� La aplicación CGI se ejecuta usando datos de entrada y devuelve los resultados al servidor, que a su vez, los pasa al cliente.
� CGI es un mecanismo para ampliar las posibilidades y funcionalidad de un web.
Programas CGI: Funcionamiento
� Son ejecutados por el usuario de forma semejante a como se ve una página HTML, al pulsar sobre un enlace.El navegador usa la dirección URL del
Escuela Politécnica Superior IntranetIntranet
106
� El navegador usa la dirección URL del programa CGI para contactar con el servidor web donde se instaló el programa y el servidor lo ejecuta
� El programa CGI puede generar dinámicamente resultados en forma de HTML
Formularios HTML
� Se utilizan como método de intercambio de información entre un usuario del web y una aplicación CGI.Se debe crear una página HTML que
Escuela Politécnica Superior IntranetIntranet
107
� Se debe crear una página HTML que contenga el formulario.
� Se debe crear una aplicación CGI que actúe sobre los datos recogidos en el formulario.
� Opcionalmente, la aplicación CGI debe crear una página HTML respuesta al usuario
Formularios HTML
� Creación de un formulario:<form method=“post | get” action=“accion_ejecutar”>
...Elementos del formulario...
Escuela Politécnica Superior IntranetIntranet
108
<form>• METHOD: método de envío de la información al
servidor (get o post). • ACTION: programa CGI que se ejecuta en el
servidor ó acción a realizar una vez que se procesa el formulario.
Formularios HTML
� Ejemplo:<form method=“post” action=“/cgi-bin/proceso.pl”>
<h3>Nombre</h3><input type =“text” name=“nombre”><br><h3>Apellidos</h3><input type =“text”
Escuela Politécnica Superior IntranetIntranet
109
<h3>Apellidos</h3><input type =“text” name=“apellidos”><br><h3>Comentarios</h3><textarea name=“comentarios” cols=50 rows=2></textarea><input type=“submit” value=“enviar”><input type=“reset” value=“borrar”>
</form>
Formularios HTML
� La etiqueta INPUT define campos de entrada en el formulario• <input type=“tipo” name=“nombre” value=“valor”>
Escuela Politécnica Superior IntranetIntranet
110
� Atributo TYPE, tipo de entrada:• TEXT: una línea de texto• CHECKBOX: opciones no excluyentes• RADIO: opciones excluyentes• SUBMIT: envío de la información al CGI• RESET: borrado del contenido del formulario
Formularios HTML
� Atributo NAME, especifica el nombre de la entrada y sirve como nombre de la variable donde se almacenará la información introducida
Escuela Politécnica Superior IntranetIntranet
111
introducida� Atributo VALUE, determina el valor por
defecto que va a contener esa entrada� Ejemplo:
<input type=text name=nombre value=“Luis”>
Elemento INPUT, tipo Texto
� Nombre y Apellidos: <input type=“text” name=“nombre_apellidos” size=“40”>
� Domicilio: <input type=“text” name=“domicilio” size=“36”>
Escuela Politécnica Superior IntranetIntranet
112
size=“36”>� Tfno contacto: <input type=“text” name=“tfno”
size=“9”>
Elemento INPUT, tipo Checkbox
� Que peliculas no ha dirigido John Ford: <input type=“checkbox” name=“padrino” value=“no ha dirigido”>El Padrino<input type=“checkbox” name=“diligencia”
Escuela Politécnica Superior IntranetIntranet
113
� <input type=“checkbox” name=“diligencia” value=“no ha dirigido”>La diligencia
� <input type=“checkbox” name=“centauros” value=“no ha dirigido”>Centauros del desierto
Elemento INPUT, tipo Radio
� Capital de Ukrania: <input type=“radio” name=“capital” value=“Moscu”>Moscu
� <input type=“radio” name=“capital” value=“Kiev”>Kiev
Escuela Politécnica Superior IntranetIntranet
114
value=“Kiev”>Kiev� <input type=“radio” name=“capital”
value=“Gdansk”>Gdansk
Elemento INPUT, tipo Submit y Reset
� <input type=“submit” value=“Enviar Resultados”>
� <input type=“reset” value=“Borrar Formulario”>
Escuela Politécnica Superior IntranetIntranet
115
Formulario”>
Formularios HTML
� La etiqueta SELECT presenta una lista desplegable con opciones para que el usuario elija<select name=nombre size=n>
Escuela Politécnica Superior IntranetIntranet
116
<select name=nombre size=n><option>Opción 1<option>Opción 2....<option>Opción n
</select>
Formularios HTML
� Atributo NAME define el nombre de la etiqueta
� Atributo SIZE establece el número de elementos que se ven en la lista desplegable
Escuela Politécnica Superior IntranetIntranet
117
elementos que se ven en la lista desplegable� Ejemplo:
<select name=ciudad size=1><option>Madrid<option>Barcelona<option>Sevilla
</select>
Elemento SELECT
� Nombre del Descubridor de America: � <select name=“descubridor” size=1>� <option>Hernan Cortes� <option>Francisco Pizarro
Escuela Politécnica Superior IntranetIntranet
118
� <option>Francisco Pizarro� ...� </select>
Formularios HTML
� La etiqueta TEXTAREA permite la entrada de información en varias líneas, permitiendo si es necesario scrolling<textarea name=“nombre” cols=n rows=n>
Escuela Politécnica Superior IntranetIntranet
119
<textarea name=“nombre” cols=n rows=n></textarea>
� El atributo NAME define el nombre� COLS define el número de columnas que
ocupa el área de texto� ROWS establece el número de filas
Elemento TEXTAREA
� Comentarios acerca del test:� <textarea name=“comentarios” rows=2
cols=50>
Escuela Politécnica Superior IntranetIntranet
120
� </textarea>
Formularios HTML
� La información introducida en el formulario pasa al servidor web almacenado en forma de cadena de caracteres. El formato de la cadena de caracteres es:
Escuela Politécnica Superior IntranetIntranet
121
� El formato de la cadena de caracteres es:nombre_etiqueta1=valor_introducido&nombre_etiqueta2=valor
_introducido&.... &etiquetaN=valor_introducido
� El formato de valor introducido:valor_introducido->dato1+dato2+dato3+...+datoN
Formularios HTML
� Para el formulario:<form method=“post” action=“/cgi-bin/proceso.pl”>
<h3>Nombre</h3><input type=“text” name=“nombre”><br><h3>Apellidos</h3><input type=“text” name=“apellidos”><br><h3>Comentarios</h3><textarea name=“comentarios” cols=50
Escuela Politécnica Superior IntranetIntranet
122
<h3>Comentarios</h3><textarea name=“comentarios” cols=50 rows=2></textarea><input type=“submit” value=“enviar”><input type=“reset” value=“borrar”>
</form>
� Con los datos introducidos:“nombre”---> “Luis Alfonso”“apellidos” --> “Rodríguez Martín”“comentarios”---> “Licenciado en Ciencias Políticas”
Formularios HTML
� La cadena de caracteres contiene:
nombre=Luis+Alfonso&apellidos=Rodríguez+Martín&comentarios=Licenciado+en+Ciencias+Políticas
Escuela Politécnica Superior IntranetIntranet
123
comentarios=Licenciado+en+Ciencias+Políticas
� Existe una variable, CONTENT_LENGTH, que especifica la longitud de la cadena
CONTENT_LENGTH=91
Perl, un lenguaje para CGI’s
� Perl (Practical Extraction and Report Language), lenguaje de programación interpretado con una sintaxis similar al lenguaje C
Escuela Politécnica Superior IntranetIntranet
124
lenguaje C� Desarrollado por Larry Wall� Ofrece un magnífico manejo de cadenas� Lenguaje favorito entre los programadores de
CGI’s.
Perl, un lenguaje para CGI’s
� Mi primer programa en Perl ejecutado en el servidor Web (hola.pl)
# Mi primer programaprint “Content-type: text/html\n\n”;
Escuela Politécnica Superior IntranetIntranet
125
print “Content-type: text/html\n\n”;print “<h2>¡¡ Hola Mundo !! </h2>”;
� Se ejecuta escribiendo en el navegador, el URL:
http://localhost/cgi-bin/hola.pl
Perl, un lenguaje para CGI’s
� Código Perl para la recogida de valores introducidos en un formulario
read (STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
Escuela Politécnica Superior IntranetIntranet
126
@pares = split(/&/, $buffer);foreach $par (@pares) {
($nombre, $valor) = split(/=/, $par);$valor =~ tr/+/ /;$valor =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;$contenidos($nombre) = $valor;
}
Perl, un lenguaje para CGI’s
� Código Perl para mostrar en una página HTML los datos introducidos en el formularioprint << "HTML";
<html><head><title>Datos del formulario</title></head>
Escuela Politécnica Superior IntranetIntranet
127
<body><ul>
<li>Dato 1: $contenidos{’nombre_etiqueta1'}<li>Dato 2:: $contenidos{’nombre_etiqueta2'}..... <li>Dato N:: $contenidos{’nombre_etiquetaN'}
</ul></body></html>
HTML
Ejemplos de programas CGI’s
� Contador de visitas (visitas.html)<html><head><title>Contador de Visitas</title></head><body><form method=“post” action=“/cgi-bin/contador.pl”>
Escuela Politécnica Superior IntranetIntranet
128
<form method=“post” action=“/cgi-bin/contador.pl”><center><h2>Pulse el botón para incrementar el contador de visitas</h2><input type=“submit” value=“Nueva Visita”></center>
</form></body></html>
Ejemplos de programas CGI’s
� Contador de visitas (contador.pl)open(IN,”cuenta”);$n_visitas=<IN>;close(IN);$n_visitas++;
Escuela Politécnica Superior IntranetIntranet
129
$n_visitas++;open(OUT,”>cuenta_nueva”);print OUT $n_visitas;close(OUT);unlink(“cuenta”);rename(“cuenta_nueva”,”cuenta”);print "content-type: text/html\n\n";print “<h2>El numero de visitas de esta pagina es $n_visitas</h2>”;
Ejemplos de programas CGI’s
� Test de evaluación (evaluacion.html)<html><head><title>Test de Evaluacion</title></head>
<body><h2>Realice el siguiente test</h2>
<form method=“post” action=“/cgi-bin/testeval.pl”><b>Calcular: 4 + (3 * 8) / 2 </b>
Escuela Politécnica Superior IntranetIntranet
130
<b>Calcular: 4 + (3 * 8) / 2 </b><input type=text name=“operacion1” value=0><br><b>Calcular: (( 2 + 3 ) - 7) * 2 </b><input type=text name=“operacion2” value=0><br><br><input type=“submit” value=“Evaluar”><input type=“reset” value=“Borrar Calculos”>
</form></body>
</html>
Ejemplos de programas CGI’s
� Test de evaluación (testeval.pl)read (STDIN, $buffer, $ENV{'CONTENT_LENGTH'});@pares = split(/&/, $buffer);foreach $par (@pares) {
($nombre, $valor) = split(/=/, $par);$valor =~ tr/+/ /;$valor =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;
Escuela Politécnica Superior IntranetIntranet
131
$valor =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C",hex($1))/eg;$contenidos{$nombre} = $valor;
}print << "HTML";
<html><body><h2>Compruebe sus contestaciones</h2><ul><li>Operación 1: 4 + (3*8) / 2: $contenidos{’operacion1'} Solución-><i>16</i><li>Operación 2: ((2+3)-7)*2: $contenidos{'operacion2'} Solución > <i>-4</i></body></html>
HTML
Ejemplos de programas CGI’s
� Cesta de la compra (comprar.html)<html><body><h2>Mercado Virtual</h2><form method=“post” action=“/cgi-bin/cesta.pl”>
<b>Tarjeta Crédito: </b><input type=text name=“tcredito” size=10><br><br>
Escuela Politécnica Superior IntranetIntranet
132
<b>Tarjeta Crédito: </b><input type=text name=“tcredito” size=10><br><br><h3>Artículos para Comprar</h3><b>Televisor: </b><input type=checkbox name=“tv” value=“si”>120.000 pts<br><b>Vídeo: </b><input type=checkbox name=“video” value=“si”>50.000 pts<br><b>DVD: </b><input type=checkbox name=“dvd” value=“si”>75.000 pts<br><br><input type=submit value=“Comprar”><input type=reset value=“Vaciar cesta de la compra”>
</form></body></html>
Ejemplos de programas CGI’s
� Cesta de la compra (cesta.pl)# Código para la recogida de valores introducidos en el formulario
$suma_factura=0;if ($contenidos{’tv'} eq “si”) {$suma_factura+=120000;}
Escuela Politécnica Superior IntranetIntranet
133
if ($contenidos{’video'} eq “si”) {$suma_factura+=50000;} if ($contenidos{’dvd'} eq “si”) {$suma_factura+=75000;} print << “HTML”;
<html><body><center><h2>Factura de Cliente</h2><h3>La Tarjeta de Crédito $contenidos{‘tcredito’} tiene un cargo de$suma_factura pts.<br><br>Gracias por su compra</h3></center></body></html>
HTML
Ejemplos de programas CGI’s
� Búsqueda de artículos en stock (search.html)<html><body><h2>Articulos en Stock</h2><form method=“post” action=“/cgi-bin/buscar.pl”>
<b>Teclee el articulo que desea buscar en nuestra Base de Datos: </b>
Escuela Politécnica Superior IntranetIntranet
134
<b>Teclee el articulo que desea buscar en nuestra Base de Datos: </b><input type=text name=“articulo” size=30><br><br><br><input type=submit value=“Buscar”><input type=reset value=“Borrar búsqueda”>
</form></body></html>
Ejemplos de programas CGI’s
� Búsqueda de artículos en stock • Formato de la Base de Datos:
Nombre de producto :: Precio :: Cantidad
Escuela Politécnica Superior IntranetIntranet
135
• Ejemplo:video hifi :: 50000 :: 120televisor :: 84995 :: 73dvd :: 65983 :: 24
ordenador / pc :: 130800 :: 12
Ejemplos de programas CGI’s
� Búsqueda de artículos en stock (buscar.pl)# Código para la recogida de valores introducidos en el formularioopen (IN,”base_datos”);while ($linea_leida = <IN>) {
@campos = split (/::/, $linea_leida);
Escuela Politécnica Superior IntranetIntranet
136
@campos = split (/::/, $linea_leida);if ($campos[0] =~ /.*$contenidos{‘articulo’}.*/i) {
print << “HTML”;<html><body><center><h2>Articulo encontrado</h2><h3>Su precio es de $campos(1) y hay $campos(2) en stock</h3></center></body></html>
HTMLclose (IN); exit;
}; // cierre del if
Ejemplos de programas CGI’s
� Búsqueda de artículos en stock (continuación)} // cierre del whileprint << “HTML”;
Escuela Politécnica Superior IntranetIntranet
137
print << “HTML”;<html><body><center><h2>Articulo no disponible en nuestra Base de Datos</h2></center></body></html>HTMLclose (IN); exit;