proyecto de ingenierÍa electr~nica i y ii

44
m Casa abierta al tiempo UNIVERSIDAD AUTONOMA METROPOLITANA UNIDAD IZTAPALAPA DIVISIóN DE CIENCIAS BASICAS E INGENIERIA DEPARTAMENTO DE INGENIERIA ELECTRICA PROYECTO DE INGENIERÍA ELECTR~NICA I Y II SERVICIOS DE INTRANET PARA LOS LABORA TORIOS DE INGENIERÍA ELÉCTRICA . . Proyecto presentado por el alumno: LÓPEZ SOLIS JULIO 94318106 Para obtener la licenciatura en: INGENIERIA ELECTRóNICA CON AREA DE CONCENTRACIóN EN COMPUTACIóN ASESOR: PROFESOR: JUAN RAMÓN JIMÉNEZ ALANIS

Upload: others

Post on 01-Aug-2022

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

m Casa abierta al tiempo

UNIVERSIDAD AUTONOMA METROPOLITANA UNIDAD IZTAPALAPA

DIVISIóN DE CIENCIAS BASICAS E INGENIERIA DEPARTAMENTO DE INGENIERIA ELECTRICA

PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

SERVICIOS DE INTRANET PARA LOS LABORA TORIOS DE INGENIERÍA ELÉCTRICA

. .

Proyecto presentado por el alumno:

LÓPEZ SOLIS JULIO 94318106

Para obtener la licenciatura en:

INGENIERIA ELECTRóNICA CON AREA DE CONCENTRACIóN EN COMPUTACIóN

ASESOR: PROFESOR: JUAN RAMÓN JIMÉNEZ ALANIS

Page 2: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

INDICE TEMÁTICO

OBJETIVOS PersonaZes Generazes

BASES TEORICAS Redes

Tarjetas de Red Cables y conectores de Red Códiqo d e colores del cableado RJ-45

Configuración de una INTRANET Instalar la tarjeta de Red Instalar protocolos de Red Nombre y dominio de una computadora Instalar clientes de Red Compartir recursos

Operaciones Básicas de una INTRANET Buscar PC Entorno de Red Acceder a una unidad de Red Acceder a una impresora de Red

Servicios de Internet WWW(Wor1d Wide Web) HTML (Hyper Text Markup Lanquaqel Evolución del lenquaje Clientes y servidores WWW Protocolos de direccionamiento de documentos (URL)

Formularios en HTML Construcción y ejemplos

Frames en HTML Construcción u ejemplos

CGI's (Common Gateway Interface)

FRONT PAGE El explorador de Front Paqe

Page 3: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

El editor de Front Paqe El web de Front Paqe Creación de un provecto Web Vista de un provecto desde el Explorador Imáqenes URL 'S

Descripción de las características del Editor Principales características del Editor Vista previa en el proqrama explorador Naveqación similar al web Propiedades de páqina Desarrollo de paqinas Web Inclusión de imáqenes Las plantillas del editor de Front Paqe Estructura de directon'os

RESULTADOS

CONCLUSIONES

p\ BIBLIOGRAFÍA

' 1 '

RJ APENDICES ? 9

f-4

-..

h

\

h

Page 4: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Dentro de la Universidad Autónoma Metropolitana-Unidad Iztapalapa, a través de la División de Ciencias Básicas e Ingeniería (CBI) se imparten entre otras las licenciaturas:

Ing. Biomédica. Ing. en Electrónica Lic. en Computación

Como apoyo a la enseñanza de estas licenciaturas se encuentran los laboratorios de Docencia del Departamento de Ingeniería Eléctrica; los cuales tienen como objetivo complementar la formación académica de todos los alumnos de la División de CBI.

Estos laboratorios cuentan con el equipo necesario para que los alumnos desarrollen practicas y afirmen los conocimientos teóricos, realizando practicas y desarrollando proyectos.

L a investigación y el desarrollo tecnológico que se realizan en estos laboratorios, están orientados hacia el estudio y desarrollo de la información y comunicación y son una gran columna en la formación de los alumnos.

También se cuenta con un área de computo, en la cual se utiliza software de simulación, para que los alumnos puedan aprender a usar el software y simular desde circuitos hasta complejos algoritmos matemáticos para saber el comportamiento de algunas señales.

Para ampliar más la ayuda a los alumnos y complementar así su conocimiento se creo la idea de realizar un proyecto en el área de computo, realizar una “Intranet” en ese laboratorio, y así desarrollar el proyecto que se denomina “Servicios d e Intranet para los Laboratorios d e Ingeniería Eléctrica”.

Fue entonces que el proyecto se dividió en dos importantes partes: La instalación de una red LAN (Local Area Network) y la implantación de la Intranet.

La instalación de una red LAN. La red LAN es un sistema de comunicaciones de alta velocidad diseñado para interconectar desde dos hasta cientos de computadoras y otros dispositivos de procesamiento de datos ubicados dentro de u n área relativamente pequeña, es decir, una red de área local (LAN) es un grupo de equipos conectados en el mismo lugar como puede ser un departamento de una empresa, un grupo de trabajo o en un piso de un edificio. A su vez, las redes LAN se pueden interconectar con otras LAN en otros pisos o en otros edificios.

1

Page 5: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

En esta sección del proyecto se describe cómo se conectó el equipo a una red de área local (LAN, Local Area Network)) o de área extensa (WAN, Wide Area Network)), además se describe cómo se puede utilizar una red para compartir carpetas e impresoras. Las redes LAN utilizan tecnología de acceso compartido, esto quiere decir, que todos los dispositivos conectados a la red comparten un mismo medio de comunicación, usualmente cable UTP (par trenzado) o de fibra óptica. L a tecnología de redes LAN más usada en estos días es Ethernet, utilizada por más del 80% de las instalaciones de redes LAN.

Instalar una red LAN significa u n a mayor productividad, esto es, debido a que permite a los usuarios compartir los recursos vitales de computación electrónicamente hablando, incluyendo piezas costosas de hardware como son las impresoras, las unidades de CD-ROM, las unidades de almacenamiento de datos; como discos duros y unidades ZIP y sistemas administrativos entre otras aplicaciones.

Una red de área local está compuesta de dos conceptos. El primero está relacionado con la red de equipos que se conecta en el lugar deseado para proporcionar acceso de u n equipo a otro. El segundo está relacionado con la forma en que la red se conecta a Internet para proporcionar acceso a Internet desde todos los equipos de la red interna.

La implantación de la Intranet. La “Intranet”, es una red privada en una organización. Una Intranet es básicamente una red LAN que soporta los servicios de Internet. Es entonces en esta parte donde se agregó la página de Internet que contiene información de todo el equipo que se usa en los Laboratorios de Docencia del Departamento de Ingeniería Eléctrica, y el Hospedaje de las páginas de los profesores.

El propósito de ayudar a realizar el proyecto de “Servicios de Intranet para los laboratorios de Ing. Eléctrica”, fue con la intención de aprender y conocer como instalar y realizar una pagina Web.

De tal manera que se plantearon los siguientes objetivos: OBJETIVOS Personales:

O Conocer la manera de instalar una red. O Adquirir los conocimientos básicos en la administración de redes

O Aprender a hacer páginas Web. LAN (Local Area Netwok).

Generales: O Construir una red con el equipo ya existente. O Dar servicios de intranet a los alumnos de las licenciaturas antes

mencionadas. O Crear una página de Internet en donde se pongan guías rápidas

del funcionamiento de los equipos con los cuales cuentan los

2

Page 6: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

. . .

Laboratorios de Docencia del Departamento de Ingeniería Eléctrica.

o Dar alojamiento a páginas de profesores para que les sirva como una herramienta más para impartir su materia.

BASES TEORICAS: Para el desarrollo de este proyecto es necesario comprender aspectos teóricos sobre:

REDES CONFIGURACI~N DE UNA INTRANET OPERACIONES BASICAS EN UNA INTXANET SERVICIOS DE INTERNET

REDES Una red, son dos o más computadoras conectadas. Las redes se utilizan para compartir recursos como documentos, programas e impresoras. Una red de computadoras está formada por muchos elementos. En primer lugar, los adaptadores o tarjetas de red que permitan a la PC conectarse a la red. En segundo lugar, u n cable que una las tarjetas a través del cual viajan los datos, y finalmente, una determinada topología o estructura de la red.

Tarjetas d e Red Una tarjeta de red, es un hardware que se inserta en la computadora para conectarla a una red. Algunas computadoras incorporan un adaptador de red integrado en la tarjeta madre, pero normalmente debe instalarse la tarjeta de red en una de las ranuras de expansión. Existen tarjetas de red para bus ISA (Industry Standar Architecture) y para bus PC1 (Periferical Component Interconect) que son preferibles porque ofrecen mayor rendimiento. Además, es muy importante que la tarjeta de red cumpla el estándar plug and play, de forma que se configure automáticamente al instalarse, ya que facilita la configuración. Se clasifican según el método de acceso al cable de red, distinguiendo entre ARCNet, Token-Ring, ATM y Ethernet (el más utilizado).

o Adaptadores ARCNet. Hoy en día están en desuso. Pueden trabajar con cable coaxial o líneas de fibra óptica y alcanzan una velocidad máxima de 2 . 5 Mbps (megabits por segundo).

o Adaptadores Token-Ring. Utilizados en entornos de computadoras IBM. Los adaptadores Token-Ring trabajan con cable coaxial y los más comunes ofrecen una velocidad de 4 Mbps y 16 Mbps, aunque existen redes Token-Ring a mayor velocidad.

0 Adaptadores ATM. Los ATM (Asynchronous Transfer Mode; Modo de Transferencia Asíncrona) son los más modernos y el futuro estándar en redes, ofreciendo una velocidad hasta de 10 Gbps (gigabits por segundo) en computadoras conectadas por cables de fibra óptica. Crean una conexión directa entre las computadoras de la red que transfieren datos, pero resultan muy caros.

3

Page 7: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

m Adaptadores Ethernet. Son los más utilizados en la actualidad, por su bajo precio y grandes prestaciones, ofreciendo una velocidad máxima de 10 Mbps (Ethernet original) 6 100 Mbps (FastEthernet). Pueden utilizar los tres tipos de cables principales: coaxial, par trenzado y fibra óptica.

Todos los adaptadores poseen en sus circuitos un número de 6 bytes impreso de fábrica, que les identifica de forma exclusiva. La mayoría de los protocolos de red (excepto TCP/IP) utilizan ese número del adaptador de red para identificar a cada miembro de una red. En los adaptadores Ethernet este número se denomina MAC (Media Access Control).

Cables z/ conectores de red Después de haber instalado un adaptador de red en cada computadora, hay que decidir el cable que los va a unir. En realidad, la elección del cable es anterior, porque según el utilizado tendrá que comprar un determinado adaptador. Los tres tipos de cable más utilizados son:

Cable coaxial y conector BNC. Es igual que el cable de las antenas de televisión, con un hilo de cobre en la parte central que es rodeado por u n cilindro de plástico y, después, por una malla. Los conectores del cable coaxial reciben el nombre de conectores BNC, aunque se les conoce como T BNC porque tienen forma de T. Cuando se utiliza cable coaxial en una red Ethernet se necesitan adaptadores Ethernet con conectores BNC.

0 Cable par trenzado (UTP) y conector RJ45. El par trenzado, denominado UTP (Unshielded Twisted Pair) es similar al utilizado en telefónica. El cable telefónico tiene 2 hilos y utiliza conectores RJ 11. Por el contrario, el par trenzado tiene cuatro pares de cable (8 hilos) y utiliza conectores RJ45. Hay que conocer la categoría del cable (categoría UTP), que define la velocidad máxima de transmisión de datos. Los cables UTP con categoría 3 (velocidad máxima 16 Mbps) y categoría 4 (velocidad máxima 20 Mbps) son suficientes para las redes Ethernet a 10 Mbps o Token-Ring desde 4 a 16 Mbps. Pero si quieres trabajar con Ethernet a 100 Mbps (Fast Ethernet), se requiere u n cable con categoría 5 (velocidad máxima 100 Mbps). Se puede ver la categoría en el propio cable, ya que está inscrito en el cable. FTP significa ‘(Foilded Twisted PaiJ’. Se trata de un cable par trenzado cubierto con una hoja de aluminio, FSTP significa “Foilded Shielded Twisted Pair“. Se trata de una combinación entre el STP (Shielded Twisted Pair) y el FTP. Es el cable más resistente contra el ruido eléctrico. El STP, FTP y FSTP solo se utilizan en entornos muy adversos, con fuertes perturbaciones eléctricas. El UTP es el más común y es lo bastante inmune al ruido para entornos normales.

0 Cable y conectores de fibra óptica. La tecnología de fibra óptica transmite la información como pulsos de luz a través de un cable de fibra de vidrio. Nos ofrece una velocidad muy superior a la de los cables coaxial y par trenzado, pero es mucho más caro y, su

4

Page 8: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

instalación y mantenimiento exige mayores conocimientos. Sólo las grandes empresas utilizan tecnología de fibra óptica.

Si estás creando una red en casa, se recomienda utilizar par trenzado con categoría UTP 5. Rccuerda que para utilizar un cable par trenzado necesitas adaptadores de red con conectores RJ45.

Se produce una gran confusión entre los términos utilizados en redes locales ya que para nombrar un sistema se utiliza indistintamente su norma, su conector o su cable. Esta tabla resume a grandes rasgos los sistemas más utilizados con sus correspondencias a nivel de cableado, conector y topología.

Cable Coaxial fino (Thin)

Coaxial grueso (Thick) Par trenzado (TP)

. . . , . - .. -. . . ~ . . .” ,

Fibra óptica Par trenzado (TP)

Estas normas están definidas en el manual del Institute of Electrical and Electronics Engineers. En donde el 10 se refiere a la velocidad de transmisión de lOMbps, BASE se refiere a la señalización de banda base.

L a ultima sigla significa en su caso: ‘“Y Twisted-pair, “FL” representa cable de fibra óptica y el “2” y “5” se refieren al cable coaxial.

Códiqo de colores del cableado RJ45

Para saber el hilo del par trenzado que va en cada posición tomamos el siguiente código de colores.

..- 4

5

Page 9: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Usando estas imágenes podemos saber cuales son los pines 1 al 8. 'lil;:,T!, :jUPEWOR, DEL Ed-45

Pero si quieres conectar dos computadoras directamente con un cable UTP, el código de cables que debes usar es el siguiente:

cc X I 0

La topología de una red es el modelo fisico de la red. Es la que define el camino que la información debe tomar para moverse de un lugar a otro en la red. Hay tres topologias básicas de red: Bus Anillo Estrella

0 En la topología de bus todas las estaciones y servidores están conectados a un cable llamado bus o backbone, las redes de este tipo están estructuradas de segmentos de cable el cual va de una estación o servidor al próximo. El unir computadores entre si se llama encadenamiento. En los extremos del cable se instalan dos elementos llamados "terminadores" para completar el circuito de red, esto define el final del segmento.

0 En una topología de anillo, todas las estaciones o servidores están unidas entre sí, de la misma manera que están en la topología de bus, excepto que los extremos del cable están conectados entre sí antes que conectarse a terminadores. En la topología de estrella, todas las estaciones y servidores están conectadas a un dispositivo localizado centralmente, llamado concentrador o HUB (dependiendo del tipo de red usada). Con un concentrador, todos los segmentos de red están activados al mismo tiempo. Con un HUB, únicamente un transmisor y un receptor están permitidos para usar la red al mismo tiempo.

6

Page 10: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Las redes pequeiias pueden ser diseñadas basadas en estos tres modelos, pero las mas grandes y complejas es una colección de estos tres esquemas unidos entre sí como segmentos

CONFIGURACI~N DE UNA INTRANET

Una intranet, es una red interna (LAN o WAN) que soporta la tecnología de Internet. Una intranet puede ser instalada en la red de una empresa. Las aplicaciones más utilizadas en Internet, como lo son el correo electrónico, los exploradores para visualizar las páginas web (Internet Explorer y Netscape Navigator), video conferencia y FTP (File Transfer Protocoo pueden ser utilizadas por una Intranet.

A continuación se describe el procedimiento básico para configurar una Intranet:

Instalar la tarjeta de r& La instalación lógica en Windows del adaptador de red se realiza como la de cualquier otro dispositivo. Es decir, si se trata de una tarjeta de red plug and play, instálala y deja que se ejecute el asistente automático. Si no es plug and play abre el Panel de control y ejecuta la opción Agregar nuevo hardware, seleccionando luego el apartado dedicado a las tarjetas de red y eligiendo el modelo adecuado. Una vez instalado el adaptador aparecerá en la lista de componentes de red, que puede ver en el icono Red del Panel de control.

Instalar protocolos de red Para que todas las computadoras de una red puedan transmitir datos es necesario que hablen un lenguaje común, es decir, que utilicen el mismo protocolo. Los protocolos más importantes son:

o IPX/SPX. Protocolo de las redes Novel1 NetWare, que está en desuso.

o NetBEUI. Protocolo utilizado cuando se trabaja con sistemas operativos de Microsoft, como Windows 95/98, Windows NT o Windows 3.1 1 para trabajo en grupo. Si se trabaja en una red basada en alguno de estos sistemas operativos, es muy recomendable trabajar con NetBEUI debido a su simplicidad.

O TCP/IP. Protocolo muy importante porque es el utilizado en Internet. Si quieres que tu computadora pueda conectarse a Internet es obligatorio instalar TCP/IP. El método de identificación de una red TCP/IP es la dirección IP, un número de 4 bytes que se representa mediante cuatro números en decimal separados por un punto (por ejemplo, 194.205.67.1).

Es muy frecuente que una computadora tenga instalados a la vez varios protocolos. Para instalar u n protocolo de red, abre la utilidad Red del Panel de control, selecciona el botón Agregar y elige el valor Protocolo, que muestra una lista a elegir. Al finalizar la instalación, Windows crea de forma automática un enlace entre el protocolo instalado y todas las

7

Page 11: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

demás tarjetas existentes. Es imprescindible que cada adaptador esté enlazado con el protocolo que va a utilizar, pero no es necesario que todos ellos estén enlazados con todos los adaptadores. Es más, resulta muy conveniente desenlazar los protocolos que no use un adaptador, pues esto redundará en un mejor rendimiento del sistema. Por ejemplo, si el adaptador de red utiliza sólo el protocolo NetBEUI para conectase con otras computadoras Windows, no necesitará TCP/IP, mientras que si el adaptador de Acceso telefónico a redes usa TCP/IP para conectarse a Internet, no necesita NetBEUI. Para desenlazar u n protocolo de un adaptador, abre la lista de componentes de red (utilidad Red), haz doble clic en el adaptador de red, selecciona la ficha Enlaces y desmarca la casilla del protocolo que no quiere usar con el adaptador. Es posible utilizar una computadora para ejercer de traductor entre diferentes redes y/o protocolos.

Nombre z/ dominio de una computadora Todos las computadoras de una red tienen un nombre y pertenecen a un determinado dominiol, que se puede establecer abriendo el Panel de control, icono Red, ficha Identficación y (máximo de 15 caracteres). Es fundamental que cada computadora tenga su propio nombre independiente y exclusivo del resto de las computadoras de la red y resulta conveniente que varias tengan el mismo dominio para facilitar el acceso a los recursos.

Instalar cliente d e red Tenemos definido por donde se comunica nuestra computadora (tarjeta de red) y el lenguaje que utiliza (protocolo), pero no hemos definido aún lo que tiene que comunicar, ésta es la misión de los clientes de red. Es el encargado de solicitar a los servidores aquellos recursos que nosotros demandemos. Normalmente cada cliente va asociado a un determinado protocolo y con u n sólo cliente se puede acceder a todos los recursos, aunque no siempre es así.

Como cualquier otro componente de red, los clientes se aiíaden en el icono Red del Panel de control, en la ventana selecciona la ficha de identificación, haz click en el botón de cambiar y escribe el nombre de la computadora y del domino Windows NT al que se va a conectar. También tienes que cambiar el valor del campo Inicio de sesiónprincipal que aparece en la ventana donde se muestran los componentes de red para que asuma el valor diente para redes Microsoft.

En el servidor se necesita dar de alta los usuarios del dominio, y se hace de la siguiente manera: desde el administrador de usuarios para dominios, selecciona el menú de usuario y la opción seleccionar dominio; ahora en la ventana que aparece selecciona el dominio en el

I En Windows NT y Windows LO00 L I I I dominio es, un conjunto de recursos de red (aplicaciones, impresoras, etc.) para un grupo dr usuarios; el usuario únicamente necesita entrar en el dominio para obtener el acceso a los recursos, los cuales pueden ser localizados en diferentes servidores en la red LAN.

8

Page 12: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

que vas a dar de alta al usuario. En caso de tener únicamente un dominio este procedimiento no es necesario. A continuación aparece una lista detallada de los usuarios del dominio; para dar de alta a un usuario, en el mení1 de usuario selecciona la opción usuario nuevo y aparece la ventana en la que hay que poner los datos del nuevo usuario del dominio.

Compartir recursos Una vez instalados en Windows los adaptadores, protocolos y clientes de red adecuados, falta acceder a los recursos de las computadoras de la red. Microsoft incluye una utilidad, denominada Compartir archivos e impresoras para redes Microsoft, que permite compartir todas las unidades de disco e impresoras de su computadora.

Para activar la compartición de recursos, debes seguir dos pasos: Desde el explorador de Windows pulsa el botón derecho del mouse sobre el icono de algún disco y haz clic en la opción de compartir, que mostrará una ventana con las opciones de compartir.

Selecciona el recurso que quieres compartir, ya sea unidad, carpeta o impresora, abre su menú contextual para acceder a sus Propiedades y selecciona una nueva ficha que se habrá creado, llamada Compartir. En esta ficha debes seleccionar el botón Compartido como, establecer u n nombre para el recurso y especificar el tipo de acceso que deseas permitir eligiendo entre Sólo lectura, Completo o Depende d e la contraseña.

Una vez compartido el recurso en la computadora (host), el icono del recurso cambia de aspecto, afiadiendo debajo de la figura original una mano que identifica los recursos compartidos.

OPERACIONES BASICAS EN UNA INTRANET Buscar PC Cuando la red tiene computadoras con recursos compartidos, el paso siguiente es acceder a dichos recursos. Para ello, Windows incorpora varias herramientas: Buscar PC, Entorno de red, acceder a una unidad de red y acceder a una impresora de red. El método más sencillo para buscar una computadora de la red y acceder a sus recursos compartidos es abrir el menú Inicio, comando Buscar, subcomando PC. Luego, escribe el nombre de la computadora que quieres acceder y pulsa el botón Buscar ahora. Si se encuentras la computadora aparecen los tres campos de la ficha Identificación de esa computadora, es decir, el nombre de la computadora, el grupo de trabajo (que aparece bajo el campo Ubicación) y el comentario. Por supuesto, puedes abrir el menú contextual del icono de la computadora encontrada y elegir el comando Crear acceso directo para crear en el escritorio un acceso directo a la computadora. Y si haces doble clic

9

Page 13: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

sobre el icono de la computadora, accederás a todos los recursos compartidos.

Entorno de Red En el escritorio existe u n icono llamado Entomo d e red que permite acceder a los recursos de la red. Cuando se abre aparece un icono denominado Toda la red y otro icono por cada una de las computadoras que pertenecen a su mismo grupo de trabajo, incluyéndose la nuestra. Al abrir Entorno de red aparece un icono que muestra los recursos compartidos que tiene la computadora donde se abre Entomo d e red. Por ejemplo, una computadora llamada Jaime pertenece al mismo dominio del servidor y otra computadora con nombre Cristina. En ese caso, al pulsar Entorno de red aparece una ventana con un icono por cada computadora perteneciente a su dominio. Por esta razón, resulta interesante que las computadoras a las que accede con frecuencia pertenezcan al mismo dominio. Para acceder a las computadoras de otros dominios se utiliza el icono Toda la red, que al abrirse muestra primero una ventana con todos los dominios. Por supuesto, al hacer doble clic sobre el icono de un dominio aparecen todas las computadoras pertenecientes a éste. Y haciendo doble clic sobre el icono de una computadora accederás a sus recursos compartidos.

Acceder a una unidad de red Probablemente desearás acceder a una determinada computadora para entrar a su disco duro. Para incluir en la lista de su propia PC los discos duros compartidos de otras computadoras, accede a la computadora con el disco duro compartido, abre el menú contextual de la unidad de disco y selecciona el comando Conectar a unidad de red, que muestra una ventana con un campo Unidad donde debes elegir la unidad lógica que deseas utilizar en tu computadora para acceder al disco duro compartido (por defecto, se asume la primera letra de unidad libre). Al pulsar Aceptar inmediatamente se integrará la unidad de red en la lista de unidades de tu computadora, tal como puedes comprobar abriendo Mi PC. Cuando desees desconectar la unidad de red, es decir, que ya no aparezca en la lista de unidades de tu equipo, abre Mi PC, accede al menú contextual de la unidad de red y selecciona el comando Desconectar. En esa misma ventana existe una casilla denominada Conectar de nuevo al iniciar sesión.

Si deseas que una determinada unidad de red se agregue de forma automática a la lista de unidades de su equipo cada vez que lo encienda, en la ventana anterior marca la casilla Conectar de nuevo al iniciar sesión. Y si quieres añadir en la barra de herramientas de Explorer cuando funciona como navegador de disco dos iconos para conectar y desconectar de una unidad de red, abre Inicio - Configuración - Opciones de carpeta - Ver y marca la casilla Mostrar el botón Conectar a unidad de red en la barra d e herramientas.

10

Page 14: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Existe otra forma de acceder directamente al contenido de los discos de una computadora compartida y es utilizar el nombre UNC (Universal Naming Convention), que e s un estándar para identificar los recursos de una PC y su apariencia es muy parecida a una trayectoria.

Acceder a una impresora d e red 2 2 5 9 6 6 Si quieres acceder desde tu computadora a una impresora de la red, es necesario instalar el controlador de la impresora. Primero debes acceder a la computadora de la red donde está conectada la impresora, luego abrir el menú contextual del icono de la impresora de red y elegir el comando Instalar.

A partir de ese momento comienza el asistente habitual de instalación de una impresora. Si se trata de una cuyo controlador no está incluido en la lista de controladores de Windows, tendrás que utilizar el específico de esa impresora.

Al finalizar el asistente, tendrás una impresora nueva que aparece como cualquier otra en la lista de impresoras. Para imprimir sólo has de seguir el método habitual, pero eligiendo como impresora de destino la impresora de red. Puesto que el controlador de la de red está instalado en tu computadora, puedes modificar todas sus características sin preocuparte de los demás usuarios de la red.

SERVICIOS DE INTERNET

Internet es un conjunto de servicios distribuidos alrededor del mundo, que pueden accederse desde cualquier computador conectado a la red. Las conexiones pueden ir desde económicas líneas telefónicas y módems, hasta muy costosas tecnologías de comunicación que enlazan grandes empresas y universidades.

Los más populares servicios que Internet nos ofrece son el correo electrónico y el World Wide Web (también conocido simplemente como "el web"). El correo electrónico es el equivalente de una casilla postal común, donde usted recibe su correspondencia y a la vez puede despachar sus cartas hacia todo el mundo.

WWW (world wide web) El servicio Web o WWW es una nueva forma de representar la información en Internet basada en páginas. Una página WWW puede incluir tres tipos de información: texto, gráficos e hipertexto. Un hipertexto es texto resaltado que el usuario puede activar para cargar otra página WWW. La diferencia entre u n documento hipertexto y un documento normal consiste en que el hipertexto contiene, además de la información, una serie de enlaces o conexiones con otros documentos relacionados, de manera que el lector puede pasar de un tema a otro y volver al documento original en el momento en que le interese.

11

Page 15: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Las principales ventajas del servicio WWW son tres. Primera, que puede combinar texto y gráficos. Segunda, que los hiperenlaces permiten cargar páginas de cualquier otro servidor conectado a Internet, da igual que esté localizado en España o en Australia. Y, tercera, que la creación de páginas WWW es bastante sencilla mediante el lenguaje HTML.

El gran éxito de Web no se debe solamente al empleo del hipertexto. Es normal encontrar que los documentos WWW están compuestos de texto y gráficos, y los enlaces con otros documentos pueden ser palabras clave subrayadas o resaltadas en el texto, pero también la totalidad de una imagen o incluso partes de ella (como un mapa "sensible", que permite acceder a información sobre una ciudad haciendo un "click" del ratón sobre un determinado detalle del plano). Las últimas versiones de los programas navegadores (y la mayor rapidez de las telecomunicaciones) permiten integrar en un mismo documento texto, gráficos, sonidos o, incluso animaciones de video. Estos documentos compuestos son los que reciben el nombre de hipermedia.

HTML (Hvper Text Markup Lanquaqe) HTML es un lenguaje simple utilizado para crear documentos de hipertexto para WWW: No es u n lenguaje de descripción de página como Postcript; HTML no permite definir de forma estricta la apariencia de una página, aunque una utilización algo desviada hace que se utilice en ocasiones como u n lenguaje de presentación.

Una de las claves del éxito de WWW, aparte de lo atractivo de su presentación es sin duda, su organización y coherencia. Todos los documentos WWW comparten un mismo aspecto y una única interfaz, lo que facilita enormemente su manejo por parte de cualquier persona.

Esto es posible porque el lenguaje HTML, en que están escritos los documentos, no solo permite establecer hiperenlaces entre diferentes documentos, sino que es un "lenguaje de descripción de página" independiente de la plataforma en que se utilice. Es decir u n documento HTML contiene toda la información necesaria sobre su aspecto y su interacción con el usuario, y es luego el browser que utilicemos el responsable de asegurar que el documento tenga un aspecto coherente, independientemente del tipo de estación de trabajo desde donde estemos efectuando la consulta.

Su simplicidad es tal que no es necesario utilizar u n editor particular. Su gran permisividad exige rigor y atención en la estructura de documentos con el fin de que éstos se visualicen correctamente al margen del contexto y el browser utilizado.

Por tanto, como hemos visto, HTML es un lenguaje muy sencillo que nos permite preparar documentos Web insertando en el texto de los mismos una serie de marcas (tags) que controlan los diferentes aspectos de la presentación y comportamiento de sus elementos.

12

Page 16: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Para escribir HTML lo <mico que se necesita es un editor de texto ASCII, como EDIT del MS-DOS o el "Bloc de notas" de Windows. Las marcas o tags que controlan el comportamiento del documento son fragmentos de texto encerrados entre los signos "mayor que" y "menor que" (<marca>).

Existen diferentes tipos de marcas: algunas controlan simplemente la presentación del texto del documento; otras, la forma en que se incluirán en él imágenes; otras, finalmente, los hiperenlaces con documentos o con diferentes partes del mismo documento. Existen una serie de programas que ayudan en la elaboración de documentos HTML, como HTMLED (shareware) o HTML Assistant, ambos para Windows, pero no son imprescindibles para escribir el código. Lo que si es necesario es un programa cliente WWW, tal como Mosaic, o Netscape, para probar el documento a medida que lo vamos desarrollando.

Las marcas funcionan muchas veces por parejas, una para indicar el inicio de enlace o formato, y otra para señalar el final. La marca de inicio consiste en una letra o una palabra (por ejemplo, estas son marcas de inicio: <B>, <TITLE>). La marca de final es la misma letra o palabra precedida por la barra inclinada o "slash" (es decir,</B>, </TITLE>). Existen, no obstante, algunas marcas que no requieren su pareja de cierre, como <BR> (que forza un salto de línea). Es importante señalar que las marcas, en general pueden estar indistintamente en mayúsculas o en minúsculas.

Evolución del lenquaje El lenguaje HTML nace en 1991 de manos de Tim Bernes-Lee como un sistema hipertexto con el Único objetivo de servir como medio de transmisión de información entre físicos de alta energía como parte de la iniciativa WWW. En 1993 Dan Connelly escribe el primer DTD (Document Type Definition) describiendo el lenguaje. En 1994 el sistema había tenido tal aceptación que la especificación se había quedado ya obsoleta. Por aquel entonces WWW y Mosaic eran casi sinónimos debido a que el browser Mosaic del NCSA (National Center for Supercomputing Applications) era el más extendido debido a las mejoras que incorporaba. Es entonces cuando nace el HTML 2.0 en un encuentro realizado también por Dan Connelly. El crecimiento exponencial que comienza a sufrir el sistema lleva a organizar la First International WWW Conference en Mayo de 1994. El principal avance de 2.0 de HTML es la incorporación de los llamados "forms" (formas), formularios que permiten que el usuario cliente envié información al servidor y ésta sea recogida y procesada allí. Precisamente con este fin, NCSA presenta la especificación del CGI (Common Gateway Interface) versión 1.0, que define una interfaz entre programas ejecutables y el sistema WWW. Con la incorporación de las formas, aparecen por primera vez campos donde el usuario puede escribir, menús "pull- down" y los denominados "radio-buttons'' integrados en páginas WWW.

13

Page 17: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Desde entonces, el lenguaje ha seguido creciendo como algo dinámico, como una lengua humana, algo vivo, siendo modificado sobre todo por las personas que lo utilizan. Así, una evolución en el lenguaje suele surgir de una propuesta que es adoptada por algunos clientes (browsers). Con el uso se ve si es eficiente y es adoptada y si es así, finalmente se incorpora al estándar. De este modo, a finales de 1993 se comienza a hablar de HTML+ propuesto por Dave Raggett, de HEP Labs, en Bristol que lleva a un nuevo encuentro en Marzo de 1994 para la versión HTML 3.0 incorporando nuevas posibilidades como la realización de tablas complejas, control de proceso de formatos e incorporación de expresiones matemáticas.

El lenguaje pasa del browser Mosaic al Netscape, que incorpora nuevas mejoras. Aunque el equipo de Netscape anuncia desde el principio que su browser trata HTML 3.0, lo cierto es que no se adapta al estándar. Por el momento, el Único browser de HTML 3.0 es experimental y recibe el nombre de Arena. El lenguaje de Netscape, el más utilizado en la actualidad, incorpora etiquetas no definidas en HTML 3.0, y tiene algunas diferencias con algunas de las definidas, por ejemplo en la realización de tablas. Por otra parte, hasta la versión 2.0, recién aparecida, no permitía el empleo de expresiones matemáticas (al escribir este artículo el autor aún no ha analizado la versión 2.0). Y como gran idea propone la incorporación de un tipo MIME experimental que permite la actualización dinámica de documentos, del que se hablará en el apartado dedicado a la programación de CGI. Por ello, en "los ambientes" se ha comenzado a denominar este lenguaje de Netscape como NHTML 1.1 para diferenciarlo de la verdadera propuesta de HTML 3.0.

Clientes u servidores WWW Para poder utilizar el servicio Web se necesitan dos partes. Por un lado, la empresa o institución que quiere facilitar su información tiene que crear páginas WWW, siguiendo el estándar definido por el lenguaje HTML, y ponerlas a disposición del público en Internet, en lo que se llama un servidor WWW. Por otro lado, el usuario que quiere acceder a dichas páginas tiene que utilizar u n programa (cliente WWW) que lea las páginas WWW e interprete su significado (por ejemplo, un hiperenlace). Estos programas navegadores o clientes WWW son los que permiten a la computadora del usuario interpretar el lenguaje HTML.

Existen numerosos programas gratuitos, y algunos comerciales, para leer los documentos WWW. El más conocido es probablemente el Mosaic, del Centro Nacional de Aplicaciones de Supercomputación (NCSA) de los Estados Unidos, del que existen versiones para diferentes plataformas (UNIX, Mac, Windows). Otros programas muy difundidos son Netscape (cuya versión beta es de libre disposición y que resulta más rápido que Mosaic), Cello, WinWeb o MacWeb (para Macintosh). Las capacidades de los diferentes navegadores pueden variar de uno a otro programa: aunque la mayor parte permiten el uso de gráficos como

14

Page 18: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

enlaces, quedan algunos como Lynx, para DOS, Unis o VMS que sólo funcionan en modo texto.

Protocolo de direccionamiento de documentos. El URL Interconectar documentos por todo el planeta sobreentiende un medio Único de identificación en la red Internet. La dirección única de un documento en WWW es llamada URL -Uniform Resource Locator- y se compone de los siguientes elementos:

O El protocolo de intercambio de datos entre el cliente y el servidor (HTTP) .

O La dirección Internet del servidor que difunde los documentos. Esta dirección es única en toda la red, es la dirección TCP/IP de la máquina. Tiene la forma de una serie de números como 134.158.69.1 13; al ser estos números dificiles de memorizar, un anuario (DNS) resuelve generalmente la relación entre dirección numérica y nombre simbólico de la máquina/nombre del ámbito (ejemplo: 134.158.48.1 es la dirección de la máquina sioux.in2p3.fr en la que Sioux representa el nombre de la máquina y .in2p3.fr el nombre del ámbito).

O El árbol de directorios (el camino) que conduce al documento O El nombre del documento que tendrá siempre la extensión .html o

.htm.

Menos frecuentemente esta dirección podrá completarse con otros elementos:

O El puerto. O Información de autentificación (username y password).

Argumentos que se pasarán a un programa en la llamada de un enlace ejecutable.

La sintaxis mínima utilizada para representar el URL de un documento es la siguiente: protocolo://nombre-del-servidor/

Cuando no se especifica un nombre de archivo se acudirá al archivo predeterminado del servidor, habitualmente la página d e inicio.

La sintaxis que se encuentra habitualmente es: protocolo://nombre-del_servidor/directo~o/subdirectorio/nombre_del - documento

L a sintaxis completa es: protocolo://usemame;password~ombre_del-servidor:pue~o/directorio/ subdirectorio//nombre-del -documento?argurnentos

Se observará también en ciertas direcciones la presencia del signo tilde (-) delante del nombre de u n directorio. Se trata de home pages personales, posibilidad ofrecida a los usuarios que tienen una cuenta en la máquina servidor.

15

Page 19: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Ejemplos de URL: http://www. fnac. f r http:// www. ra. net/ routing. arbiter/ NFSNET/ NFS. transition. html http:// www. in2p3. f r / -dupont/jean. dupont. html

Una vez terminada la construcción de la Intranet pasamos a la parte de la creación de la página de los laboratorios, en donde se aplicarán los conceptos siguientes:

FORMULARIOS EN HTML FRAMES EN HTML CGl's f RONTPA GE

FORMULARIOS EN HTML

Un formulario es una plantilla para representar un conjunto de datos y generar en la pantalla cuadros de diálogo con el lector. Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificación, listas de selección, etc.

El usuario rellenará zonas en su formulario que se identifican con un nombre simbólico. Cuando el formulario se envía al programa que lo va ha tratar, éste recibe el identificador de cada zona y el valor introducido.

Es importante señalar que la utilidad de los formularios está limitada al uso de las páginas junto con servidores, ya que las acciones asociadas son programas (generalmente scripts de CGI). Estos programas deben funcionar en un servidor al que se le proporcionan los datos de un formulario para ser procesados.

Construcción ejemplos Declaración del formulario <FORM> La marca <FORM> y </FORM> definen un formulario y entre ellas se situaran todas las marcas que generan los diversos elementos que componen u n formulario. Esta marca debe ir acompañada obligatoriamente por dos atributos:

o El atributo METHOD está dirigido al programador que codifica el script. Al que puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script.

O El atributo ACTION que define el URL de un programa (script) encargado de tratar los datos adquiridos desde el formulario.

<FORM METHOD=tipo_.de-metodo ACTION=URL-del-script> <FORM METHOD="pot" ACTION=" cgi-bin/inscripcion">

16

Page 20: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

El atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser Único. NAME=nombre-deplapvariahle~-asociada

El atributo VALUE definido para un campo de: TEXTO: permite definir el contenido del campo.

Botón SUBMIT: indica el texto a escribir en el botón.

Botón RADIO, Botón CHECKBOX: valor asociado al botón cuando está pulsado. NAME identifica el bloque de botones

Campos d e entrada <INPUT>

L a marca <INPUT> servirá para definir campos para entrar u n texto y botones que permiten escoger opciones.

Ejemplo: Definir una zona de entrada de texto simple.

Principio del formulario

I Final del formulario < input name="identidad" >

El atributo TYPE asociado a la marca INPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores:

SUBMIT: desencadena el envio del formulario hacia el script; el texto definido en value se escribirá en el botón:

Principio del formulario <form> <input type="submit" value="Enviar"> </form>

Final del formulario

RESET: permite borrar los datos ya entrados:

". ,. , 1 Principio del formulario <form>

Restablecer <input type="reset" value="Restablecer"> </form>

Final del formulario

17

Page 21: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

PASSWORD: permite entrar una palabra clave de forma confidencial:

1 Principio del formulario <form>

Final del formulario < /form >

<input type="password" name "pwd">

CHEKBOX: crea un bloque de botones que permiten una selección múltiple de opciones:

Principio del formulario < form > <input type="checkbox" name="micro"

<input type="checkbox" name="micro" value="pc">PC < /form>

Macintosh value="mac">Macintosh

PC Final del formulario

RADIO: crea un bloque de botones que permiten una selección exclusiva entre varias opciones

Principio del formulario <form> P. <input type="radio" name="media" ' CD-ROM value="cd" checked>CD-ROM

Disquete <input type="radio" name="media" value="dk">Disquete < /form>

Final del formulario

HIDDEN: sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en la pantalla <input type="hidden" name=nombre_de_variable value=valor-de_la_variable>

CAMPOS DE SELECCIóN <SELECT>

La marca <SELECT> permite generar listas de selección simple o de selección variable. Se programa con una lista en la que los items se especifican mediante la marca <OPTION>. La presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 o está ausente, la lista se interpreta como u n menú desplegable (pop-list). En caso contrario la lista se visualiza en una ventana con barra de desplazamiento. El valor dado al atributo SIZE da entonces el número de líneas visibles en la ventana. L a opción de selección múltiple se deriva de la presencia del atributo MULTIPLE.

18

Page 22: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Ejemplos:

Menú despegable:

- "

<form > <select NAME="sede">

<option>Entrada lateral <option SELECTED>Entrada directa < / select> < /form>

En?tads. lcjirecti2 <option>Entrada indirecta

Ventana con barra de desplazamiento: (con opción de selección múltiple).

<form> <select MULTIPLE NAME="lenguaje" SIZE="3"> <option SELECTED>Ada <option>C++ <option>Cliper <option>Pascal <option>Fortran <option>Cobol </select> </form>

ÁREA DE TEXTO <TEXTAREA>

La marca <TEXTAREA> permite crear una ventana con barras de desplazamiento horizontales y verticales en la que se podrá escribir texto. El valor dado a los atributos ROWS (líneas) y COLS (columnas) delimita el tamaño de esta ventana.

Ejemplo: <form > <textarea name="comment" rows=5 cols=40> Introduzca aquí sus comentarios < / textarea> </form>

19

Page 23: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Estas líneas de código muestran la siguiente ventana:

FRAMES EN HTML

Los frames (en inglés frume = cuadro, bastidor, marco o panel) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. Cada una de estas zonas es capaz de mostrar código HTML, como en las celdas de una tabla. Sin embargo, no hay que confhdir paneles con tablas ya que existe una gran diferencia; en el caso de una tabla, todas las celdas forman parte del mismo documento HTML, mientras que en el caso de los frames cada zona de la pantalla es un documento HTML propio. Se ve pues, simultáneamente, en la misma ventana de un browser, la página correspondiente a varios archivos.

El concepto de frame elimina una de las limitaciones del Web ya que hasta ahora, cada nuevo documento destruía el anterior, y obligaba al usuario a usar demasiado el comando Back de los browsers. Ahora es posible dedicar ciertas zonas a tareas bien definidas, como por ejemplo tener en una zona un menú que casi nunca será necesario recargar.

Construcción y ejemplos La estructura general de un documento dividido en varios paneles difiere de la de un documento clásico ya que en éstos el cuerpo se inserta en las marcas <BODY> y </BODY>, mientras que en los paneles, el cuerpo del documento se inserta entre las marcas <FRAMESET> y </FR&I.!&"ET>; el elemento <FRAMESET> permitirá precisar la forma de los diferentes paneles por medio de dos atributos: ROWS y COLS. <FRAME> es la marca de definición de los paneles creados con FRAMESET.

La mayoría de los visualizadores no soportan los frames. Para que nuestra página con frame no resulte opaca a ellos se utilizará el elemento <NOFRAMES>que permite ofrecer u n texto alternativo en entorno normal.

20

Page 24: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Los paneles pueden estar relacionados y tener enlaces de unos a otros para ello se utiliza el atributo TARGET que indica en qué panel debe mostrarse el documento asociado a un enlace de hipertexto.

FRAMESET 225966 Este elemento sustituye al elemento <BODY> y permite dividir una zona en subzonas, bien verticalmente, bien horizontalmente. Si no hay ninguna zona todavía, las divisiones se aplican a la zona inicial formada por el conjunto de la ventana del browser. Esta marca posee dos atributos:

ROWS: Se utiliza para dividir la zona en subzonas horizontales. La sintaxis es:

ROWS="altura_zona-l, altura-zona-2 ,..., altura-zona- n"

ROWS e s una lista de valores enteros separados por comas. El número de elementos de la l ista corresponde al número de subzonas horizontales a crear. Cada uno de los valores de la lista puede darse según uno de los tres formatos siguientes, donde n es un entero:

o n: indica la altura de la subzona en pixels. 0 n%: indica la altura de la subzona expresada en porcentajes del

o n*: n es opcional. El carácter * indica al browser que debe dar a tamaño de la zona madre.

la zona todo el espacio a ú n disponible.

COLS: Se utiliza para dividir la zona en subzonas verticales. La sintaxis es igual que en el atributo ROWS.

ROWS="altura-zona-l, altura-zona-2,. . . ,altura-zona-n"

Ejemplo: A continuación se muestra dos maneras idénticas de dividir una zona en tres. Las dos subzonas superiores son de tamaño idéntico y la última es el doble de las anteriores.

<FRAMESET , _, . ROWS="25%,25%,50%''~ ...< FRAMESET>

<FRAMESET ROWS="*,*,2*"> ...< FRAMESET>

<FRAME> es la marca utilizada para caracterizar las subzonas definidas mediante la marca <FRAMESET>. Esta caracterización se realiza mediante los siguientes atributos: SCR: Indica el URL del documento que debe mostrarse en esa zona. Si el atributo no se indica, entonces la zona estará vacía.

21

Page 25: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

SCR="url"

NAME: Se utiliza para nombrar la zona a fin de que pueda convertirse en el destino de cualquier enlace de hipertexto. La sintaxis del atributo es:

NAME="nombre-de-la-zona"

Por ejemplo:<FRAME SRC="doc-a.htm">

MARGINWIDTH: Se utiliza para precisar el número de pixels entre los bordes izquierdo y derecho de la zona y el documento HTML a visualizar, en definitiva marca el margen izquierdo. La sintaxis es :

MARGINWIDTH="n"

MARGINHEIGHT: Se utiliza para precisar el número de pixels entre los bordes superior e inferior de la zona y el documento HTML a visualizar. La sintaxis es:

MARGINHEIGHT="n"

SCROLLING: Indica si la zona debe poseer una barra de desplazamiento SCROLLING="yes"), si no debe contar con ella (SCROLLING="no") o si esta elección se deja en manos del browser (SCROLLING="auto"). La sintaxis es: SCROLLING="ves/no/auto"

NORESIZE: Indica al browser que no debe permitir que el usuario modifique el tamaño de la zona. Cuando este atributo no se precisa es posible deformar una zona desplazando su frontera mediante el ratón.

NOFRAMES

Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto irá entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignorarán las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre éstas últimas. Por el contrario u n browser capaz de gestionar paneles interpretará las marcas <NOFRAMES y < / N O F R A M E S y sabrá que debe ignorar el texto comprendido entre ellas.

UN FRAME BÁSICO. SINTAXIS GENERAL En general, todas las páginas que contengan un frame deberán ser más o menos así: <HTMLr <HEAD><TITLE> <Mi titulo ></TITLE></HEAD> <FRAMESET COLS=*,*>

22

Page 26: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

<NOFF"ES> <BODY>

Su visualizador no soporta frames. Pulse <A HREF="indice.htm">aqui</A> para volver.

</BODY> </NOFRAMES2 <FRAME SRC="doc-a.htm" > <FRAME SRC="doc-b.htm" >

</FRAMESET> < / HTML>

U n frame d e 3 áreas verticales (COLSl

Se vería así:

A B C

Y se escribiría; así: <FRAMESET COLS=30%,20°/ó,500/o>

<FRAME SRC="doc-a.htm"> <FR4ME SRC="doc-b.htm"> <FRAME SRC="doc-c.htm">

< /FRAMESET>

Un frame de 3 áreas horizontales (ROWS)

Se vería así:

Y se escribiría así: <FRAMESET ROWS=25%,25%,5O%>

A <FRAME SRC="doc-a.htm"> :B <FRAME SRC="doc-b.htm">

. ,. C <FRAME SRC="doc-c.htm">

< / FRAMESET>

Un frame combinado de un área uertical rl dos horizontales. El frame A, no podrá ser redimensionado (NORESIZE).

Se vería así:

- " ._,

A iB : .c

Y se escribiría así: <FRAMESET COLS=20%,*>

<FRAME SRC="doc-a.htm" NORESIZE>

<FRAME SRC="doc-b.htm"> <FRAME SRC="doc-c.htm">

<FRAMESET ROWS=4O0h,*>

</FRAMESET> < / FRAMESET>

Page 27: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

CGI's

Cuando el World Wide Web inició su funcionamiento como lo conocemos, empezando a tomar popularidad aproximadamente en 1993, solo se podía apreciar texto, imágenes y enlaces. La introducción de Plugins en los navegadores permitió mayor interactividad entre el usuario y el cliente, aunque estaba limitado por la velocidad y la necesidad de tener que bajar e instalar cada plugin que se necesitara, por lo que estos se desarrollaron mayormente en áreas de video, audio y realidad virtual.

El CGI (Por sus siglas en inglés "Common Gateway Interface") cambio la forma de manipular información en el web.

En sí, e s u n método para la transmisión de información hacia un compilador instalado en el servidor. Su función principal es la de añadir una mayor interacción a los documentos web que por medio del HTML se presentan de forma estática.

El CGI es utilizado comúnmente para contadores, bases de datos, motores de búsqueda, formularios, generadores de correo electrónico automático, foros de discusión, chats, comercio electrónico, rotadores y mapas de imágenes, juegos en línea y otros.

Esta tecnología tiene la ventaja de correr en el servidor cuando el usuario lo solicita por lo que es dependiente del servidor y no de la computadora del usuario.

U n documento HTML es estático, lo que significa que existe en u n estado constante; es un archivo de texto que no cambia. Un script CGI por otro lado, es ejecutado en tiempo real, lo que permite que regrese información dinámica. Por ejemplo, digamos que quieres conectar tus bases de datos de Unix al World Wide Web para permitir que las personas de todo el mundo las manipulen. Básicamente, lo que debes hacer es crear un script CGI que será ejecutado por el servidor para transmitir información al motor de la base de datos, recibir los resultados y mostrárselos al cliente. Este es u n ejemplo sencillo que muestra donde el CGI tiene sus orígenes.

Los programas que maneja el CGI pueden estar compilados en diferentes lenguajes de programación. El más popular para el desarrollo de contenidos Web es el lenguaje Per1 de distribución gratuita, aunque también podemos mencionar: C , C++ y Java.

El funcionamiento de esta tecnología es muy sencillo. Los scripts residen en el servidor, donde son llamados, ejecutados y regresan información de vuelta al usuario.

24

Page 28: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Hay que tomar en cuenta que existen dos formas de enviar información; siendo estas por medio de GET y POST.

El primero envía la información dentro del URL separando los campos del formulario con signos de interrogación '?' antes de la información, como por ejemplo:

http: / /wmv. paginadeinternet/ cgi- bin/ejernplo.cgi?nombre=Juan&carpo=ayudante

Esta forma presenta varias desventajas, ya que no permite manejar grandes cantidades de información y por ser una dirección, los Caches de los navegadores pueden guardar los resultados, lo que dificulta el poder acceder nuevamente a la aplicación, pero simplifica el uso de los scripts con solo utilizar una dirección URL.

La otra forma de enviar la información es por medio de POST, el cual envía la información directamente al servidor, haciéndolo invisible en el URL y permitiendo cualquier cantidad de información, como el envío de archivos.

Las diferencias entre GET y POST son primordiales para adaptar una aplicación y hacerla funcionar.

Así, el siguiente paso luego de manejar el diseño de páginas web es aventurarse a estas tecnologías que darán un nuevo concepto de interacción en un sitio web.

FRONTPAGE

El Frontpage es una aplicación que se ejecuta en Windows 95 o Windows NT, que nos permite tener una visión completa de u n proyecto web como si fuera apenas una página. En el Frontpage se combina la facilidad de crear páginas ureb, con insertar dinamismo a las páginas a través de scripting y al mismo tiempo una administración global de todas las páginas en nuestro sitio web (hipervínculos, navegación, directorios, etc.).

El explorador de frontpaqe El Explorador de Frontpage es la aplicación de administración; con é1 podemos ver nuestro Web de Frontpage organizado por directorios (modo de carpetas), u organizado por flujo (modo de hipervínculos): Como podemos ver el modo de carpetas es totalmente familiar a la del explorador de Windows. Podemos revisar el contenido de cada directorio haciendo click sobre éI en el panel izquierdo de la ventana, el contenido se mostrará en el panel derecho, exactamente de la misma forma que trabaja el explorador de Windows. En el modo de hipervínculos la presentación se orienta a controlar el flujo de la información; con esta

2 5

Page 29: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

presentación visual vemos claramente la forma que nuestras visitas pueden navegar en nuestro web. También podemos controlar la consistencia de los hipervínculos, tanto internos como externos.

El Editor d e FrontPaqe El editor es una herramienta para el desarrollo de las páginas web individuales que componen nuestros proyectos web; su entorno de desarrollo es muy similar a los programas de la familia Office de Microsoft, lo que reduce el esfuerzo de aprendizaje. El editor nos ofrece además la creación de formularios y de scripting básico para agregarle interactividad a las páginas. El editor se integra de forma transparente a todos los navegadores instalados en el PC, de tal forma que se puede visualizar las páginas en cualquiera de ellos sin tener que reconfigurar el sistema; además ofrece la posibilidad de simular diferentes resoluciones de pantalla, para ver las páginas en la mayor cantidad de situaciones posibles.

Como vemos, el Frontpage es realmente una herramienta completa de desarrollo de proyectos web que nos será muy útil para el éxito de nuestros planes de trabajo.

El Web d e Frontpaqe Cuando nos proponemos diseñar el web de nuestra empresa, antes que nada, debemos pensar la cantidad de trabajo involucrado y el tiempo disponible para realizarlo. En algunas circunstancias el volumen de información e s lo suficientemente grande como para ocupar muchas horas de trabajo de un equipo completo de desarrolladores. Para estos casos el Frontpage define el concepto de Web de Frontpage, que puede ser un sitio web entero, o puede ser una parte definida de un proyecto de mayor envergadura, que envuelva varios webs de Frontpage. La ventaja de esta idea es poder dividir todo el sitio web en partes más pequeñas, de forma de poder asignarlas a una persona responsable de su ejecución. Los diferentes webs de Frontpage pueden relacionarse para formar el proyecto competo.

Creación d e un Proyecto Web Comencemos a crear nuestro primer Web de Frontpage. Al lanzar la aplicación el FrontPage nos presenta el cuadro de diálogo Introducción a Microsoft FrontPage .

Desde esta ventana podremos crear nuestro primer Web de Frontpage. Para crear un Web nuevo tenemos las tres opciones siguientes:

Desde un asistente o plantilla. Quienes tienen experiencia con el uso del Microsoft Office saben la valiosa ayuda que nos ofrecen los asistentes y las plantillas; en el Frontpage nos ofrecen gran parte del trabajo base para nuestras tareas, como son definir la estructura de directorios y de flujo de la información. Nosotros podremos elegir entre los asistentes o plantillas que se adecuen

26

Page 30: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

mas a nuestro problema, y luego haremos la personalización del modelo hasta haber alcanzado nuestra meta.

0 Con el asistente para importar. Esta opción es útil cuando ya tenemos páginas creadas anteriormente y a partir de ahora queremos continuar nuestro desarrollo usando el Frontpage; el asistente le guiará paso a paso en la manera de recuperar la información que ya creó, e incluirla dentro de un nuevo Web de Frontpage.

o Web de FrontPage en blanco. Esta es la alternativa que deberemos tomar cuando no encontramos ningún asistente o plantilla que se adecue a nuestro propósito. En este caso todo esta por hacer, así que nuestro siguiente paso seria definir la organización del web, tanto de los directorios como del flujo de información. En cualquiera de los casos, el FrontPage nos preguntará el nombre del servidor donde vamos a crear el Web de FrontPage, y el nombre del web que vamos a crear. La ubicación del servidor puede ser local o remota, basta indicar el nombre Internet de la máquina. Si uno quiere crear un Web de FrontPage independientemente de un servidor, podrá indicar un directorio local o de red en el cual crearlo.

Vista de un Proyecto desde el Explorador Como ya mencionamos el Explorador nos permite observar la organización física y de flujo de nuestro Web de FrontPage (Fig. 1). Cuando abrimos un Web de FrontPage, en el panel derecho de la ventana podemos ver los hipervínculos a los que apunta una página, así como los hipervinculos desde los que se hace referencia a la página. Podemos expandir o contraer esta vista a varios niveles usando los signos de expansión (+) o de contracción (-) de las páginas correspondientemente. Podemos también mover una página específica al centro del panel dando un click derecho sobre él y eligiendo la opción correspondiente. Cuando expandirnos una vista de flujo podemos ver que el "camino" que seguimos se v a pintando de color negro, de esa forma podemos fácilmente simular la navegación que pueden tomar nuestras visitas.

- b

"...

Fig. 1. Modo Exploración

27

Page 31: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

En el modo carpetas (Fig. 2) podemos organizar la estructura de directorios del Web. El ambiente familiar del explorador de Windows nos hace más fácil usar sus funcionalidades, por ejemplo, en la ordenación de los archivos por diferentes campos.

En este modo una información muy útil es el tamaño de la página en bytes; esta información es trascendental para el desarrollo para Internet e intranets, donde las velocidades de comunicaciones son una limitación permanente. Los trabajos sobre los archivos tales como eliminación, cambio de nombre, cambio de ubicación, etc., son hechas como en el explorador de Windows; en estos casos el FrontPage se encarga automaticamente de reparar los hipervínculos que se originan por los cambios.

Imáqenes Antes de llegar a la edicicin de páginas debemos discutir algo sobre de que manera se incluyen imágenes, sonido o video a las páginas. En todos estos casos estos efectos son archivos externos, a los que las páginas web hacen referencia, pero que existen de forma independiente de las páginas.

Los archivos pueden ser creados por aplicaciones especializada en cada tarea; por ejemplo, los archivos gráficos pueden trabajarse con aplicaciones como el Core1 Draw, Adobe Photoshop, o el Image Composer que viene con el CD del Frontpage. Existen muchos formatos para guardar imágenes. sonido o video; para páginas web un factor importante es el tamaño de los archivos, por lo que generalmente se incluyen formatos que ofrecen compresión de la información. En el caso de archivos de imágenes los mas difundidos son el formato GIF y el formato JPG.

URLs Internet es una red global de alcance mundial; este hecho hace particularmente dificil 1mdc.r ubicar los recursos que están disponibles en esta gran red; se necesita un método de ubicar los recursos y/o

28

Page 32: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

servicios de manera f5cil v cOmoda: este problema lo resuelven los URLs (del inglés Uniform Resou~ce Locator). El URL es la dirección de algún recurso en Internet, de forma que puede ser encontrado. La notación para los URLs es, por ejemplo: http://www.microsoft.com/fpage/index.html

http: Protocolo a usarse en l a comunicación; puede ser http, ftp, gopher, wais, mailto, etc. Www.microsoft.com: Nombre del servidor internet. Fpage: Ruta del directorio donde se encuentra el recurso, dentro del servidor especificado. 1ndex.html: Nombre del archivo que contiene el recurso al que hacemos referencia.

Descripción d e las Características del Editor

Hasta ahora hemos discutido la parte de organización y conceptos generales para la construccion de Webs de Frontpage; ahora veamos como construir las células que forman los Webs, e s decir, las páginas web.

Para realizar esta tarea, el FrontPage nos ofrece el Editor de FrontPage; este programa posee u n a apariencia muy familiar que los programas de la suite Office con las facilidades que tiene el editor, podremos usar las más comunes características de las páginas web publicadas en Internet, de una forma fácil y rápida; además sin tener que aprender los códigos HTML.

Para lanzar el editor de FrontPage puede hacer doble-click en una página HTML que aparece en el Explorador de Frontpage; en este caso se abre el editor y además se carga la página para su edición; o también se puede hacer uso del botón "Mostrar Editor de FrontPage" de la barra de herramientas del Explorador.

Principales Caructerístzccls del Editor Incluir información existente: Al igual que los otros programas de Windows, el Editor acepta ingreso de información a través de Copiar y Pegar, para poder incluir información parcial presente en algún archivo de nuestro PC. Si queremos incluir en nuestras páginas archivos enteros de la suite Office, también podremos hacerlo rápidamente, a través de la operaci¿m ilwnstrur y Soltar, desde el Explorador de Windows.

Vista previa en el proqrunm explorador Esta opción, que se encuentra en el menú Archivo, nos permite ver la página web activa en cualquiera de los navegadores instalados en nuestro PC; además de poder escoger la resolución a la que queremos visualizarlo.

29

Page 33: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Naveqacidn similar al We11 El Editor nos permite ir cambiando la página activa a través de botones de navegación de forma similar a los navegadores web; esto hace nuestras tareas más fáciles y rápidas, disminuyendo el tiempo de aprendizaje.

Propiedades de la Páqina Antes de introducir textos e imágenes a nuestras páginas, veamos como podemos configurar sus características generales; esto se hace definiendo las propiedades de las páginas (haciendo clic con el botón derecho del mouse en cualquier parte de la página estando abierta desde el editor, se puede seleccionar desde el menú propiedades de página), Entre las propiedades miis importantes de la página se encuentran:

O Colores. Aquí dcfilumos el color de fondo, el color del texto, el color de los hipervinculos, así como de los hipervínculos que ya fueron visitados.

O Título. El titulo e s e l texto que describe el contenido de la página. Hay que tomar especial cuidado al escogerlo, por que este texto se asocia a la dirección cuando uno visita la elige como bookmark (favoritos); de forma que u n título que parece correcto en el contexto de u n Web, puede ser imposible de identificar cuando esta de forma aislada. Sonido. En las propiedades también podremos asociar un sonido de fondo a las paginas. Hay que tener especial consideración en estos casos, por que no necesariamente nuestros visitantes tendrán multimedia para poder reproducirla.

Desarrollo de Pkqinas Web Ahora veamos como usar los recursos de edición del FrontPage. En líneas generales l a edicitin e s muy similar a la de cualquier editor de textos para Windows vamos a concentrarnos primeramente en la creación de listas, tablas, marcos, marcadores e hipervínculos.

-

a) Listas. Las listas sirven para mostrar ordenadamente una serie de items relacionados. Las listas pueden ser numeradas, no numeradas, de definiciones, o una combinaciones de listas.

b) Tablas. En las tablas se presenta información organizada en filas y columnas; el uso de las tablas es particuiarmente extendido en las páginas web, debido a que ademas de presentar información, se usa como herramienta para crear estilos especiales de páginas (texto en columnas, organización de gráficos, etc.).

c) Marcos. Los marcos son una distribución especial de la ventana del navegador. Con los marcos podemos mostrar varias páginas web simultáneamente,

30

Page 34: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

en la misma pantalla: así crear efectos muy interesantes y que son muy útiles para fines de navegación.

d) Marcadores. Los marcadores son selializadores de posiciones específicas en las páginas; se usan para poder hacer referencia a algún lugar especial de una página web.

e) Hipervinculos. Los hipervínculos son la implementación de los documentos de hipertexto; con ellos podemos enlazar diferentes páginas web y crear sistemas de navegación.

f) Acabados de presentación. Con el FrontPage tarnbikn podemos mejorar la presentación de nuestras páginas web, al agregarle diferentes apariencias a los párrafos y textos.

Inclusión d e Imáqenes

a) Imágenes. Las imágenes son archivos externos a las páginas web; nosotros podemos incluirlas en nuestras páginas haciendo referencia a estos archivos externos, desde nuestra página.

b) Formatos de Imagen. Para incluir imágenes en nuestras páginas web debemos usar archivos con formatos GIF o JPG; ambos son formatos con compresión de datos, de forma que son los mas adecuados para enviarlos por Internet. En la mayoría de casos nosotros tendremos que incluir imágenes que las tenemos disponibles en otros formatos, es por eso que el FrontPage nos ofrece la posibilidad de trabajar con los siguientes formatos gráficos :

1. 2. 3. 4. 5 . 6. 7 . 8. 9.

CompuServ (GIF) JPEG (JPG) Bitmap (BMP) TIFF (TIF) Windows Metsfile (LVMF] Sun Raster (RAS) Encapsulated Postscript (EPS) Paintbrush (PCX) Targa (TGA)

Cuando usted guarde la página que contiene la imagen, el FrontPage le ofrecerá guardarlo en s u Web de FrontPage en el formato GIF. Ahora para incluir las imageries podemos hacer uso de la opción Imagen del menú Inset-tur, o hacerlo directamente usando el botón correspondiente de la barra de herramientas.

31

Page 35: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Aquí aparecen dos opciones para especificar el origen de la imagen: O Desde archivo. Si la imagen está en nuestro PC o en la red local,

usamos la opcion 'Desde Archivo", y examinamos los discos hasta ubicar la imagen. Si la imagen está fuera de nuestra red local, usamos la opción "Desde Ubicación", y en el cuadro de texto ponemos el URL de la imagen requerida. En ambos casos al guardar la página, el FrontPage importará el archivo a nuestro Web de FrontPage. Imágenes. L a maJ-oria de las veces nosotros vamos a necesitar gráficos muy comunes, como líneas divisorias gráficas, o íconos diversos. El Front Page nos ofrece una galería de imágenes que cubren estas necesidades; para acceder a la galería basta entrar en la opción correspondiente y escoger de acuerdo a lo que necesitamos.

c) Propiedades de imágellcs. Para tener mayor control de la forma que la imagen aparece en la pantalla tenemos a disposicion el cuadro de propiedades de imagen; para entrar a las propidades hacemos un click-derecho sobre la imagen y elegimos la opcion "Propiedades de imagen", en donde podemos ver el directorio donde se encuentra la imagen, el formato de la imagen, así como asociarle u n hipervínculo, etc.

d) Imágenes transparentes. El formato GIF ofrece la posibilidad de presentar un color como transparente; esto quien, decir que nosotros podremos hacer que uno de los colores de la imagen deje ver el fondo de la página, como si fuera un vidrio. El FrontPagc vfrece una herramienta para definir un color como transparente, de forma fácil y rápida. Para hacerlo seleccionamos la imagen en el Editor cle Frontpage, damos un click en el botón de Hacer Transparente de la barra de herramientas de imagen, y finalmente hacemos click en el color de la imagen que queramos hacer transparente.

Las plantillas del Editor de FrontPaqe El FrontPage ofrece una serie de plantillas que nos ayudan a crear las páginas que comúnmente aparecen en los proyectos web, como son por ejemplo: registro de visit-antes, páginas de productos, preguntas mas frecuentes, etc. Las plantillas nos ahorran una enorme cantidad de tiempo de diseño v permiten darle los toques de sofisticación que ayudan al éxito de nuestras publicaciones.

Para crear una página n ~ c b u s m d o las plantillas debe abrir el Editor de FrontPage y escoger la oprión nuevo del menú archivo; en este punto se mostrará un cuadro de diálogo donde podemos elegir entre las diferentes plantillas disponibles.

32

Page 36: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Estructura de Directorios Para terminar la parte de diseno y construcción de las páginas que componen nuestro proyecto, debemos tocar el tema de la organización de la información. De la misma forma que cuando en nuestro computador organizamos nuestro trabajo diario en directorios, también debemos organizar las piginas web que componen nuestro proyecto. A medida que el número de páginas y la información del web se hace más voluminosa, tenemos q u y contar con mejores herramientas y organizar las cosas de forma jerárquica, para que sea posible administrar proyectos grandes.

El Explorador de Frontpage nos permite tener la visión jerárquica que es necesaria para lograr este objetivo. Generalmente la estructura de directorios obedece a las divisiones ofrecidas dentro de nuestro sitio web; así, si en nuestro Home Page tenemos hipervínculos a la sección de Servicios, Productos, Soporte y Ventas en línea, una buena alternativa seria crear directorios separados para cada una de estas sub-secciones, haciendo así más fácil para el equipo de desarrollo ubicar la información c u ; ~ n d o sea necesario.

RESULTADOS

Se han alcanzado los objetivos generales de este proyecto, ya que ahora se tiene una red de computadoras con topología estrella, enlazada con cable UTP nivel 5 con 10 computadoras y capacidad para ampliarla a corto plazo a 25 , ya que se cuenta con la estructura necesaria y solamente se tendrían que conectar y configurar las maquinas; y a muchas más a largo plazo, pero sería necesario cablear y conectar más concentradores.

Se ha terminado la página de Internet que contiene las guías rápidas de los equipos, además contiene un buzón de comentarios, para que los alumnos puedan ahí expresar sus inquietudes e inconformidades con todo lo relacionado a 10. laboratorios y a la página antes mencionada; también contiene un manual básico de compuertas TTL que son muy usadas en las ueas referentes a circuitos lógicos; a esta página se puede accesar en la dirección: http:/ /bonampac.uam.mx

A los profesores se les ha proporcionado u n espacio en el servidor para que puedan poner paginas de Internet referentes a la uea que estén impartiendo y así tengan una herramienta más para la formación de los alumnos.

33

Page 37: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

CONCLUSIONES Las intranets son atractivas porque disminuyen el costo de mantenimiento de una red interna y, al mismo tiempo, aumentan la productividad, ya que ofrecen a los usuarios un acceso más eficaz a la información y a los servicios que necesitan.

Las redes tienen u n costo de acuerdo a su topología, por ejemplo e s mucho más costoso el perder u n nodo en la topología tipo “bus” que en la topología tipo “estrella” ya que el funcionamiento de la red puede perderse por completo en la primera, no siendo así en el caso de la red tipo “estrella”.

Aunque el atractivo de las intranets es evidente, el proceso de instalación no lo es tanto. Una alternativa es comenzar con algo pequeño, es decir, que si se tiene una empresa es más fácil instalar una red por departamento, para después interconectarlas. Estas sencillas intranets ofrecen un valor real mejorando la información compartida con costos de configuration y administración relativamente bajos.

Una intranet sencilla permite a los equipos aprovechar el método de exploración intuitivo del Web para buscar y compartir información de forma más eficaz. A diferencia de las soluciones de intranet más sofisticadas, las intranets sencillas son muy específicas en su propósito e instalación, permite adcmás, aprovechar las ventajas de las intranets a nivel de equipo o de departamento, utilizando tecnologías actuales o fáciles de adquirir. Estas intranets populares ofrecen sus propias ventajas y son el primer paso para desarrollar una intranet más completa.

Con respecto al diseño de páginas web, es muy importante tener conocimientos básicos d t . HTML antes de usar el Front page, ya que así será mucho más sencillo comprender y organizar todas las páginas y las imágenes, y así evitar tener errores como duplicidad de imágenes, o que los direccionamiell~os a ellas se pierdan; se da una relación parecida a querer programar en lenguajes visuales y de alto nivel sin antes comprender las bases de la programación.

En el diseño de la página se aprovecho la experiencia adquirida en el manejo de los aparatos para la realización de las guías rápidas, y en cualquier momento que se tenga una duda se puede recurrir a la página de comentarios. La parte de los comentarios es muy importante, ya que es una forma de interactuar con los usuarios de los laboratorios y con los visitantes de l a página.

Una de las justificacionc>s mas importantes de la realización de este proyecto es, que tanto los alumnos y los maestros cuentan ya con una herramienta más para que los laboratorios de docencia del departamento de Ing. Electrica cumplan con la función para la cual fueron creados.

34

Page 38: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

BIBLIOGRAFÍA

BLACK, DYLLES, Redes d e computadoras: Protocolos, normas e interfaces, Editorial Macrobit, 1989, México.

Frontpaqe, Editorial Micxosoft, 1996, Redmond, Washington. LEHTO, KERRY y POLONSKY, W. BRETT, Introducinq Microsoft.

o MULLEN, ROBERT, HTML Quick Reference, Editorial QUE, 1996, E.U.A. 0 RUSSEL, CHARLIE, The ABCs of Windows NT (Workstation 41, Editorial

o ZIMMERMAN, SCOTT, Buildinq an internet with windows NT 4, Editorial

o Revista “PCComputing” AIio 06 Número 9. Editorial Televisa S.A. de

o http:/ /Www.whatis.com (septiembre-2000)

SYBEX, 1996, E.U.A.

Samsnet, 1996, E.U..i\.

c. v.

35

Page 39: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Apéndice A. Equipos existentes en Zos Zaboratorios de docencia del departamento de Ingeniería Eléctrica.

Hewlett Packard -~ - Tektronix CFG-250

~~ CFG-253

I

Tektronix TDS-2 10

. -___ ~ ~~ ~- ~- ~ ~ - Triplett 630-PLK

- - - - - - - " 260

I Multímetro Digital* Tektronix ~ c]

~. ~~ ~ ~- .

Fuente de Alimentacicin* _c -- Toward1 int Fuente de Alimentación*

TPS-4000

Fuente de Alimentación* CPS-250 Tektronix

Medidor de Frecuencia* Medidor ~____ de FrecTencia -~ ~ " Tektronix 19000"

~ -

I

.-___

___ ~~ ~ ~- - - - Tektronix

CFC-250 I Tektronix

PS-280 I

" - ~ ~~ 1-

I

.~ ~~~~.~ - ~ ~~ ~

Analizador de Estados LG,' ~ l C O S * Tektronix 1230 ~ -~-1. ~~~

. Analizador de Estados¡,ogicos* ~- ~ ". 1 Tektronix TLA-704 _" - ~~ "" ___

Analizador de .- Espectros* . I Tektronix Analizador de Espectros* 1

2710

8590" ~ ~ ~

Analizador de Es>ectros* , Hewlett Packard 3580" Analizador de EspecTros* Hewlett Packard 27 12 Analizador de Espectros* Tektronix 271 1 Tektronix

Programador Uni\-el-sal*

~ ~. ~~ ~ -

~.~ ~ .-

___- ___" - ~

I """ TUP-400 -~ "

1- Analizador L0gic.o ~ -I" - -

I Tektronix ___ "" ___

Todos los equipos c u c t ~ t r ~ n con instructivo (según información de los laboratoristas). * Equipos que cuentan con guía rápida en l a página de Internet.

36

Page 40: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Apéndice B. Código del formuZario usado en la Página (EL TEXTO EN NEGRITAS ES ÚNICAMENTE UN COMENTARIO, NO PONERLO EN EL CODIGO)

<HTML> <HEAD> <TITLE>Comentarios!< /'TITLE>

</HEAD> <body bgcolor="#000000" text="#3399FF"> <p>Díganos lo que piensa de nuestro sitio Web,&nbsp; de nuestros

laboratorios, o de cualquier tema relacionado con los laboratorios de Ing. Electrónica.</p> <form name="Contact" action="./cgi-bin/MailForm.exe"

Ubicación del programa exe

<input type="hidden" name="Subject" value="Comentario!"> El value indica el "subject que tendrá el e-mail" e

<input type="hidden" name="File" value=". . /formok.htm"> ?:.a

El value indica la pagina de confirmación del formulario. u *

<input type="hidden" name="SMTP" value="labelec.uam.mx"> 5 ' : n

aquí indicas el servidor de correo SMTP F4 - i

<input type="hidclcn' name="To" value="[email protected]"> P ""T' aquí indicas la dirección del correo r".'

a la que van a llegar los resultados del formulario rzr "- <input type="hiddcn" name="From" value="[email protected]"> 277

y aquí pones la dirección desde rrrJ . " la cual aparecerá el correo 1; I,!

enviar?</strong></p> 2

method="POST">

-a ... d..*

I ?

<p><strong>CQué clase de comentario quiere

<dl> i: b 7". ,

< d d x i n p u t typc="radio" name="TipoMensaje" value="Queja">Queja

<input type="radio" checked name="TipoMensaje" value="Sugerencia">Sugerencia

< / d d > </dl>

<p><strong><Cuál es el tema de su comentario?</strong></p> <dl>

<dd><select name="Asunto" size=" I"> <option selected>Sitio Web< /option> <option>Laboratorios< /option> <option>(Otros)</option> </select> Otros: < input type="text" size="26" maxlength="256"

name="AsuntoOtro"> </dd>

</dl> Ponga aquí sus comentarios:<br> <textarea name="Commentario" rows="5" c01~="42"x/textarea~<p>

37

Page 41: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

<p><strong>Diganos c6mo ponernos en contacto con

<dl> usted:</strong></p>

<dd> <table>

< tr> <td>Nombre <td><input type="text" size="35" maxlength="256"

name="NombreUsuario"> < / t r> < tr>

<td>Correo electrónico <td><input type="text" size="35" maxlength="256"

name="CorreoElectronicoUsuario"> </tr> < tr> <td> Carrera <td>.rinput type="tc-xt" size="35" maxlength="256"

name="CarreraUsuario"> < / tr>

</table> </dd>

</dl> <dl>

<dd><input type="checkbox" name="ContactoSolicitado" value="ContactoSolicitado">

posible en Por favor, pónganse m contacto conmigo tan pronto como sea

referencia a esta materia.</dd> </dl> <input type="submit" value="Enviar">&nbsp;&nbsp;&nbsp;<input

type="reset" value="Limpiar-"> </form>

</BODY> < / HTML>

38

Page 42: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Apéndice C . Código del frame usado en la página.

<html> <head> <meta http-equiv="Content-Type" content="text/html;

charset=windows- 1252"> <title>Manual Básico de TTL's< / title>

< /head>

<frameset cols="l 17;'"> <frame name="contenido" target="principal" src="izquierdo.html"> <frame name="principal" src="framemsg.htm" scrolling="auto"

target="-self'> <nof rames <body>

</body> </noframes>

</frameset> < / html>

<p>Esta página usa mt\l-c.os. pero su explorador no los admite.</p>

39

Page 43: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Apéndice D. Plantillas dispoliibles para Frontpage

Agenda de reuniones: Crea una agenda para reuniones programadas. Bibliografia: Crea una página bibliográfica que hace referencia a trabajos impresos o electronicos. Comunicados de prensa: Crea 1Jn comunicado de prensa listo para ser vinculado en la plantilla Directorio de comunicados de prensa. Descripción de producto: Crea una página de descripción de un producto según sus caracttLrísticas, ventajas, y especificaciones. Directorio de comunicudos de prensa: Crea u n directorio que indica todos sus comunicados de prensa, ordenados por fecha. Directorio de empleados: Crea un listado alfabético de los empleados de su empresa, con una tabla de contenido y con hipervínculos. Directorio de oficinas: Crea una página con una lista de las direcciones de todas las oficinas de su organización. Favoritos: C r r a L ~ L I p:iginn dc \%xulos a sus sitios web favoritos, dividida en catcgorias. Formulario de comerttcrrios: Crea una página a través de la cual los usuarios pueden enviar comentarios sobre su sitio web, productos u organizacion. Formulario de confirmaci6n: Crea una página de confirmación de la recepción de informaci¿>n I\ través de un formulario. Formulario de encuesta: Crea u n formulario de encuesta para recoger informacibn de los lectorcs v almacenarla en su servidor web. Glosario de tkrminosr Crea una página de definición de términos relacionado:,. ~ I i \ ~ i d 1 < i : ~ : ! I t :hC':i~'ar-nente ( ' t i secciones. Hoja técnica de software: Crea una hoja de datos en la que se describen las caracterislicas y ventajas de un producto de software. Libro de invitados: Cr-c;~ uní2 página en la que los visitantes de su web pueden dejar sus comentarios en u n registro público de invitados. Novedades: Crea uua ptgina en la que se informa a los usuarios de los cambios ocurridos en SI] sitio web en los dos últimos meses, ordenados por fecha. Oportunidades de enzpleo: Crea un listado de posibles puestos de trabajo en su o r g a n ~ m c ~ ó n , con u n formulario para pedir mas información. Programa de seminarios: Crea la página principal de una jerarquía que describe un sernin;1rio. utilicela con la plantilla Resumen de conferencia. Página de brísqueda: Crea una pagina en la que los usuarios puedan buscar palabras c l a w m - 1 todos los documentos de u n web. Página de vínculos: (.']-?a una página en m documento dividido jerárquicamente en secciones. Registro de productos o eventos: Crea una página donde los usuarios pueden registrarse pal-:+ recibir soporte técnico o para asistir a algiln evento. Registro de usuarios: Crea una página en la que los usuarios puedan registrarse ellos rnisn~os en 1111 web protegido. Solo se puede utilizar en u n web raíz.

40

Page 44: PROYECTO DE INGENIERÍA ELECTR~NICA I Y II

Respuesta a las preguntas mas frecuentes: Crea una página de respuestas a las preguntas mas frecuentes sobre ciertos temas. Resumen de conferencias: Crea una página de descripción de una conferencia próxima; utilícela con la plantilla programa de seminarios. Tabla de contenidos: Crca una página con vínculos a todos los documentos de su web. rnostrando la en formato esquematizado.

41