Internet Aplicada a la Empresa: INTRANET€¦ · Internet Aplicada a la Empresa: INTRANET Escuela...

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)


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


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


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


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?


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


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.


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


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


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)?


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


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


15

� Los cuellos de botella

Mejoras para el futuro

� Mejorar los anchos de banda.� Diseñar mejores interfaces.� Crear agentes inteligentes.


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


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


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


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


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


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


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.


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


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


25

� Proyecto QUANTUM espera alcanzar los 155 MB/s.

� www.dante.net/quantum.html


26

Bibliografía recomendada

� El Mundo digital• Nicholas Negroponte

� Camino al futuro


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


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


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


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


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)


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


34

� Acceso a un mercado global

Comercio electrónicoPuntos débiles

� Seguridad� Desconfianza en los medios de pago� Malas infraestructuras de comunicación


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


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)


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


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.


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


40

• Interactividad• Respuesta

Recomendaciones finales I

� Investigar y analizar la red como un medio para el marketing

� Decidir a quién llegar


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


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.


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


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.


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.


47

Los que no buscan beneficio propio

� El único objetivo es causar daño:• Virus• Gusanos

Algoritmos dañinos


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)


49

navegación)• Fondo: Contenidos (textos y materiales

multimedia)

Mecanismos de proteccíón

� Concienciar a los usuarios� Medidas preventivas� Cortafuegos


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.


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.


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


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


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.


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


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


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.


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:


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


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


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.


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


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


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.


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


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


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


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,


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


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.


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.


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>


73

� Definiciones de la cabecera:• <head></head>

� Cuerpo del documento HTML:• <body></body>


� <HEAD></HEAD>, contiene etiquetas que definen el documento HTML. • Establece el título del documento:

# <title> Título del documento </title>


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” >


� <BODY></BODY>, engloba todas las etiquetas que forman el documento HTML.

� Los atributos de la etiqueta <BODY> definen el aspecto general del documento HTML:


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:


76

• <center></center>

� Definición de parráfo:• <p align=“alineación” >

# Izquierda: <p align=“left” > # Derecha: <p align=“right” ># Centro: <p align=“center” >


� Retorno de carro en el documento:• <br>

� Texto preformateado:


77

• <pre></pre>

� Negrita:• <b></b>

� Itálica ó cursiva:• <i></i>


� Subrayado:• <u></u>

� Texto grande:


78

• <big></big>

� Texto pequeño:• <small></small>

� Introducción de líneas:• <hr align=“left | right | center” noshade size=“n”

width=“n” >


� Cambio de letra• < font face=“arial” size=“12” color=“red”>


79

Creación de Listas

� Listas no ordenadas:<ul type=“disc ó circle ó square” ><li>


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


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


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:


83

• <marquee> Texto desplazamiento </marquee>

� Objetos que parpadean. Sólo en Netscape Navigator:• <blink> Texto que parpadea </blink>

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:


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


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>


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>


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>


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


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:


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>


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” >


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”>


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”>


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


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>


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”


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”


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


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”>


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”>


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>


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”>


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


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


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


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


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”


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”>


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


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”>


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”


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


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”>


115

Formulario”>

Formularios HTML

� La etiqueta SELECT presenta una lista desplegable con opciones para que el usuario elija<select name=nombre size=n>


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


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


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>


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>


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:


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


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


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


124

lenguaje C� Desarrollado por Larry Wall� Ofrece un magnífico manejo de cadenas� Lenguaje favorito entre los programadores de

CGI’s.


� Mi primer programa en Perl ejecutado en el servidor Web (hola.pl)

# Mi primer programaprint “Content-type: text/html\n\n”;


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


� Código Perl para la recogida de valores introducidos en un formulario

read (STDIN, $buffer, $ENV{'CONTENT_LENGTH'});


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;

}


� 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>


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”>


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>


� Contador de visitas (contador.pl)open(IN,”cuenta”);$n_visitas=<IN>;close(IN);$n_visitas++;


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>”;


� 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>


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>


� 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;


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


� 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>


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”>



� 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;}


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


� 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>


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”>



� Búsqueda de artículos en stock • Formato de la Base de Datos:

Nombre de producto :: Precio :: Cantidad


135

• Ejemplo:video hifi :: 50000 :: 120televisor :: 84995 :: 73dvd :: 65983 :: 24

ordenador / pc :: 130800 :: 12


� 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);


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


� Búsqueda de artículos en stock (continuación)} // cierre del whileprint << “HTML”;


137

print << “HTML”;<html><body><center><h2>Articulo no disponible en nuestra Base de Datos</h2></center></body></html>HTMLclose (IN); exit;

Internet Aplicada a la Empresa: INTRANET€¦ · Internet Aplicada a la Empresa: INTRANET Escuela...

Documents

Transcript of Internet Aplicada a la Empresa: INTRANET€¦ · Internet Aplicada a la Empresa: INTRANET Escuela...