1 CAPÍTULO 1. INTRODUCCIÓN.bibing.us.es/proyectos/abreproy/10960/fichero/memoria.pdf1.1...

Capítulo 2. Análisis del Ámbito de Aplicación

Escuela Superior de Ingenieros 1

1 CAPÍTULO 1. INTRODUCCIÓN.

1.1 Preliminares y justificación.

Con el amplio desarrollo de las Tecnologías de la Información y de las

Telecomunicaciones en general, Internet se ha consolidado como un medio de

comunicación e intercambio de datos masivo, cada vez más útil y próspero, y a la vez

accesible a un gran número de personas. La información fluye libremente de un

continente a otro en décimas de segundo con un solo clic de ratón. Todos se benefician

de este hecho: empresas, particulares, entidades gubernamentales, docentes o de

investigación, asociaciones, etc.

Así mismo la Universidad, al igual que la sociedad, está sufriendo una

metamorfosis provocada por el ingente avance tecnológico que estamos

experimentando. Los sistemas educativos se están viendo claramente influenciados por

las nuevas tecnologías de la enseñanza, lo que permite la introducción de nuevas

técnicas y medios docentes hasta ahora no imaginados.

La realidad educativa de los últimos años ha sido afectada por la suma de dos

fenómenos. De una lado, la introducción progresiva de nuevos medios informáticos,



equipos, y recursos audiovisuales en las universidades de forma significativa, de hecho

hoy día prácticamente todas las facultades poseen un centro de calculo o aula de

informática donde los alumnos pueden en acceder a ordenadores personales y a

aplicaciones informáticas. Por otra parte se han producido cambios globales que han

supuesto grandes avances tecnológicos en las TIC1 en la mayoría de los sectores de la

sociedad. Existe, sin duda, una relación mutua entre estos dos fenómenos, ya que la

aparición de estas nuevas tecnologías son las que han propiciado la introducción de

éstas en los centros educativos, y concretamente en la universidad.

Las que han sido denominadas nuevas tecnologías, para diferenciarlas de las

tradicionales, tienen cuatro pilares básicos que son: la informática, la electrónica, los

medios audiovisuales y las redes de comunicación. Estos conceptos interrelacionan

entre si, constituyendo un marco tecnológico que nos obliga a avanzar en los métodos

pedagógicos actuales.

No obstante no debemos olvidar que antaño las nuevas tecnologías ya se

introdujeron en los centros educativos como un intento de mejora de la calidad de

enseñanza, mediante medios audiovisuales, proyecciones, televisión, etc. Sin embargo,

los cambios que han supuesto las TIC en los organismos educativos han superado toda

expectativa y han supuesto una implantación masiva en un, relativamente, corto periodo

de tiempo, afectando de raíz a los sistemas educativos, a sus modelos y al escenario en

el que tendría lugar el proceso de aprendizaje y enseñanza.

De este modo podemos afirmar que el profesorado debe adaptarse a los nuevos

recursos que van apareciendo, para cambiar su metodología y utilizar los nuevos

recursos telemáticos y elementos multimedia que están presentes en la sociedad como

nuevas herramientas de trabajo que nos lleve a aumentar la calidad de enseñanza.

Este cambio implica una evolución en el papel tanto por parte del profesor como

del alumno dentro de la clase, desapareciendo la idea clásica de profesores en sus atriles

1 Tecnologías de la Información y de la Comunicación.



y alumnos en sus pupitres en la que el profesor era un mero transmisor de información y

el alumno adquiría un papel meramente pasivo.

De todo lo visto, podemos afirmar que se considera a las nuevas tecnologías

como útiles desde el punto de vista de la metodología docente por varios motivos:

introducen un aprendizaje más activo sin que esta responsabilidad recaiga de forma

absoluta sobre el docente, permiten que el alumno avance de forma individual en sus

conocimientos sin someterse a horarios ni emplazamientos imprescindibles lo que

responde a las posibilidades y necesidades de cada alumno, hacen el aprendizaje mucho

más participativo e interactivo. En definitiva, podemos admitir la necesidad de su uso

(especialmente de las herramientas multimedia, diseños Web, realidad virtual, etc.) y

por tanto, de realizar nuevas herramientas basadas en ellas.

Además, y ahondando en lo anterior, en las Escuelas de Ingeniería de España se

está produciendo un notable cambo en los planes de estudio, cambio al que no es ajena

la Escuela Superior de Ingenieros de Sevilla, que está afectando notablemente a la

metodología docente. Este cambio se traduce en el mayor peso de las clases de tipo

práctico en la búsqueda de fomentar el concepto aprender-realizando. El objetivo

perseguido no es otro que simplificar la docencia de materias que son complicadas de

impartir empleando el método de enseñanza tradicional.

1.2 Objetivos y Alcance.

El objetivo de este proyecto, es la de aplicar a la enseñanza las enormes

posibilidades que nos brindan las nuevas tecnologías de modo que podamos abrir un

nuevo horizonte en el seguimiento de cualquier asignatura, de forma que se convierta en

una tarea mucho más participativa y atractiva para el alumno. Por tanto, y a grandes

rasgos, se pretende con este proyecto dar un paso adelante en la evolución de la

educación, dejando a un lado la clásica relación profesor-alumno y dando paso a nuevos

conceptos como el autoaprendizaje de forma remota.



En líneas generales el proyecto va a contemplar el desarrollo de un portal web

educacional, relacionado con una asignatura en concreto, pero que se podría extender y

aplicar a otros ámbitos lectivos. A continuación se desglosan brevemente los cometidos

que se llevarán a cabo durante la realización del proyecto.

• Desarrollar un entorno de trabajo en el que el alumno, de forma remota,

pueda realizar todas y cada una de las tareas que podría desarrollar si se

encontrara realmente asistiendo a una clase práctica.

• Crear un espacio virtual en el que se represente el escenario de trabajo

real, para introducir así al alumno de una forma óptima en la situación

habitual del desarrollo de cualquier asignatura. Lograremos de esta

forma, no solo que el alumno conozca de ante mano el ambiente lectivo

en el que se va a desenvolver si no que además pueda familiarizarse con

él y desarrollar una actividad lectiva más eficiente.

• Suministrar de forma rápida y clara toda la información necesaria para

poder desarrollar la asignatura de manera que el alumno no se vea

abocado, como ocurre en numerosas ocasiones, a asistir a clases sin

apenas conocimientos de lo que se va a encontrar. Así mismo, despertar

un mayor interés por la asignatura y conseguir un aprovechamiento

mucho mejor de ésta.

• Administración a través de una base de datos interactiva de todos los

alumnos pertenecientes a la asignatura, así como todos los movimientos,

operaciones, tareas, etc. que se puedan registrar en una sesión de trabajo

en el entorno desarrollado.

Estos son los aspectos generales en que se basará este proyecto. A continuación

se mostrará más detalladamente como hemos ido logrando cada uno de estos objetivos y

hacia donde podemos dirigir nuestras futuras líneas de trabajo.



2 CAPÍTULO 2. ANÁLISIS DEL ÁMBITO DE

APLICACIÓN.

2.1 Introducción.

En el presente proyecto fin de carrera se desarrolla una herramienta software en

la que se engloban varias líneas de trabajo, todas ella dedicadas a una labor conjunta, la

de implantar en la educación las Nuevas Tecnologías y acrecentar la calidad de

enseñanza.

El trabajo realizado en este proyecto se enmarca en el Departamento de

Ingeniería Electrónica, concretamente en la asignatura “Laboratorio de Instrumentación

Electrónica” de 5º curso de Ingeniería de Telecomunicaciones, asignatura

eminentemente práctica. Aunque el enfoque del proyecto se fije en esta asignatura, éste

es aplicable a muchas otras asignaturas de naturaleza práctica tanto del mismo

departamento como de cualquier otro.



La asignatura LIE2, alrededor de la cual gira este proyecto, se encuentra en el

último curso de la carrera, lo que nos puede llevar a pensar que la materia de la que

consta es ampliamente conocida, y esto es un error, ya que los conocimientos,

información, sistemas, etc. que hay que emplear durante el desarrollo de la asignatura

son abundantes y en gran medida desconocidos por el alumno. En base a esto, podemos

decir que la elección del proyecto ha sido derivada de la experiencia propia del alumno

al cursar el año anterior la asignatura.

Actualmente, en el transcurso de la asignatura se lleva a cabo la realización de

una serie de prácticas, en las cuales hay que trabajar con diversos aparatos como

analizadores lógicos, analizadores de espectro, osciloscopios digitales, cuyas

características, funciones básicas, etc. hay que aprender en base a documentación

teórica demasiado abundante y tediosa. Sumado a esto, nos encontramos que la

elaboración de las prácticas no es una labor liviana.

Con todos estos condicionantes, descubrimos que a pesar de ser una asignatura

tremendamente atractiva, el alumno no aprovecha totalmente sus horas lectivas, lo que

nos lleva a buscar una ayuda a esta tarea de enseñanza, desembocando en la concepción

del presente proyecto.

2.2 Estudio del ámbito de aplicación.

El escenario donde nos vamos a ubicar en la actualidad y sobre el que se van a

establecer las líneas de trabajo del proyecto fin de carrera, es un portal web que posee el

profesor responsable de la asignatura D. Federico José Barrero García, portal de carácter

docente y que esta dirigido a los alumnos que se encuentren cursando la asignatura

“Laboratorio de Instrumentación Electrónica”.

2 Laboratorio de Instrumentación Electrónica.



Se compone de una parte estática (principalmente apuntes y diverso material

docente relacionado con la asignatura, que el alumno podrá visualizar o descargar,

según el caso), y una serie de servicios (consulta de notas y calificaciones, tablón de

dudas, noticias, etc.) basados en la generación dinámica de páginas e implementados

mediante PHP y cuyos datos se almacenan en un servidor de bases de datos MySQL.

El portal ofrece una serie de servicios al alumno. A saber:

• Información general de la asignatura, en la que se dan información

básica como programa de la asignatura, criterios de evaluación, examen,

etc.

• Consulta del “tablón de dudas”, lugar donde se recogerán las dudas más

frecuentas de los estudiantes y la correspondiente respuesta que haya

dado el profesor.

• Consulta del “tablón de noticias”, donde el profesor podrá emitir diversa

información y comunicados a los alumnos.

• Consulta de las calificaciones, mediante el cual el alumno tendrá acceso a

las notas de la asignatura.

• Sistema de recogida y evaluación de una “encuesta de calidad”, acerca de

todos los aspectos docentes de la asignatura. Sólo tienen opción de

realizarla los alumnos matriculados en la asignatura.

• Consulta del listado de “monitores” adscritos a la asignatura.

Los datos usados en cada servicio son almacenados en bases de datos, y estas

últimas residen en un servidor MySQL. De esta forma, la aplicación puede lanzar

peticiones al servidor MySQL, en forma de sentencias SQL, y así poder acceder a los



datos, ya sea para consultarlos o realizar operaciones de administración (añadir, editar o

borrar) sobre ellos.

El lenguaje de programación usado en la aplicación es, como anunciamos ya,

PHP. Entre sus características principales contamos con un fácil acceso a bases de

datos. El API de PHP es muy amplio: cuenta con multitud de funciones para manejar

cadenas, arrays y en general cualquier tipo de datos. Tiene soporte para el acceso a

diversas bases de datos, y en general está orientado a la programación web, lo que lo

hace ideal en nuestro escenario. Además se integra perfectamente con diferente software

de servidor web, y en especial, con el software Apache, que será el que utilizaremos en

nuestro proyecto.

Así pues un esquema que ilustra los componentes que definen el escenario en el

cual se ejecutará nuestra aplicación es el siguiente:

El cliente se conecta al servidor web y realizará peticiones de páginas HTML y

PHP. En este último caso, el módulo de PHP, instalado en el servidor Apache, llevará a

cabo las acciones que mande el código incrustado en él.



Algunas de estas acciones requerirán el acceso al servidor MySQL. Por falta de

espacio de disco en el servidor web principal, los ficheros y páginas web que componen

el portal se encuentran distribuidas en dos servidores web diferentes.

El servidor web principal, llamado “woody”, es el único de los dos que tiene

salida a Internet (tiene una IP pública). Sus datos son:

• Nombre: woody.us.es

• IP: 193.147.161.237

• Alias: www.gte.us.es

El servidor web secundario se llama “apache” y no tiene salida a Internet (tiene

una IP privada):

• Nombre: apache

• IP: 172.16.1.48

Nota: Existe una cierta ambigüedad por el hecho de haber usado el nombre de

máquina “apache”, que también coincide con el nombre del software que usaremos para

servir páginas (“Apache”). El contexto, en estos casos, siempre ayuda a diferenciar,

pero además intentaremos, de ahora en adelante, escribir el nombre de máquina todo en

minúsculas mientras que cuando nos refiramos al software usaremos mayúsculas al

principio de palabra.

Ambos servidores web corren el software Apache, y para que todas las páginas

(incluidas las albergadas en el servidor secundario) sean visibles desde Internet, se hace

uso de una funcionalidad que tiene el software Apache y que permite que un servidor

actúe de proxy hacia un segundo servidor.



La mayoría de las páginas, incluida la principal, se encuentran en:

• LIE: http://www.gte.us.es/~fbarrero/LIE

(Nota: se podría sustituir «www.gte.us.es » por « woody.us.es », ya que el

primero es en realidad un alias al segundo).

Las páginas PHP residen físicamente en la máquina con IP interna

(llamada“apache”) y son servidas en primera instancia por esta última. De hecho todo el

procesado del código PHP y acceso a la base de datos se realiza ahí mismo: en“apache”.

Sin embargo, “woody” realiza funciones de proxy sobre estas páginas, deforma que

quedarán “mapeadas” sobre este último, que es quien de verdad tiene acceso a Internet

(y lógicamente también a la red interna donde se encuentra la máquina “apache”) y el

cual recibirá normalmente todas las peticiones de clientes reales. La URL “virtual” de la

que estamos hablando es:

• LIE: http://www.gte.us.es/fbarrero/lie/

Cuando un cliente haga una petición sobre una de estas URLs, automáticamente

“woody” lanzará la misma petición sobre “apache”, recogerá la respuesta, y la reenviará

al cliente. Es decir, “woody” está actuando como simple intermediario de la

información (el procesado y en general, todo el trabajo pesado se realiza en “apache”).

Desde el punto de vista de “apache”, “woody” ha actuado como cliente. Desde el punto

de vista del cliente original, “apache” es como si no existiera (es totalmente

transparente).

Para crear este “efecto espejo” se ha hecho uso de un módulo de Apache

(http://httpd.apache.org/docs/mod/mod_proxy.html) y se ha configurado añadiendo las

siguientes líneas al “httpd.conf” de “woody”:

• ProxyPass /fbarrero http://172.16.1.48/fbarrero



• ProxyPassReverse /fbarrero http://172.16.1.48/fbarrero

Este túnel entre ambos servidores web, que se establece por medio del proxy,

puede tener implicaciones en la seguridad. Hablaremos sobre esto más adelante.

Por último, y para finalizar con la descripción del escenario a utilizar,

comentaremos algunos aspectos relacionados con la base de datos.

La estructura actual de los datos en el servidor MySQL se resume en los

siguientes puntos:

• Existen diferentes bases de datos, y cada una de ellas tiene asociada una

o varias tablas.

• Cada servicio de nuestra aplicación tiene asociada una base de datos

diferente.

• La aplicación accede al servidor MySQL mediante un único usuario:

root (el “superusuario”).

• Existen diversas tablas de “usuarios”, correspondientes a distintos

servicios (cada una de ellas se encuentra en la base de datos

correspondiente al propio servicio), de forma que los usuarios de un

servicio no tienen por qué coincidir con los de otro.

2.3 Soluciones para la implementación de la herramienta.

La tarea de implementación de la herramienta en la que ha consistido el

desarrollo de este proyecto no ha sido una labor sencilla, ya que se han abarcado varias

líneas de trabajo, teniendo que confluir finalmente en un objetivo común.



Una vez finalizado el estudio del estado del ámbito de aplicación se ha podido

desarrollar aun más claramente los distintos puntos de inicio desde los que comenzar a

trabajar. Partíamos de un entorno en el que predominaban servicios para el alumno

demasiado pasivos desde el punto de vista de la enseñanza, así, con este trabajo se ha

querido profundizar más en la idea desarrollar una situación de auto-aprendizaje con

unas miras mucho más amplias que el simple hecho de facilitar diversa información al

alumno.

De este modo, se decide crear un portal web que donde se pueda albergar este

tipo de enfoque de la relación profesor-alumno. Lo primero que se intenta es diseñar un

portal de interfaz sencilla de modo que el alumno pueda, tanto acceder rápidamente a

aquella información o tarea que quiera realizar, como navegar en un entorno con mucha

riqueza tanto lectiva como recreativa.

Para ello se utilizan distintas herramientas de desarrollo web como el

Dreamweaver 4.0, desde el que se escriben las primeras líneas de código HTML, más

concretamente para crear el diseño y la maquetación de la página web. A parir de aquí

se irán inyectando las sentencias PHP que comulgan fantásticamente con HTML y

también se añadirán las líneas de código SQL en las páginas que corresponda a la

administración de los alumnos en las distintas utilidades que ofrece el portal en relación

a las bases de datos MySQL.

Sumando a esto, hemos de decir que el portal se ha concebido en gran medida,

como lanzadera ideal para ofrecer al alumno dos tipos de servicios implementados y que

representan dos pilares fundamentales del trabajo desarrollado, como son, la posibilidad

de realizar una Práctica Virtual, y la implantación vía Internet de la herramienta

multimedia realizada con Macromedia Director.

La creación de una Práctica Virtual, tiene como intención ofrecer al alumno la

posibilidad de realizar una labor desde su propia estación de trabajo, en casa, oficina,

etc. sin tener que desplazarse al laboratorio. Este es unos de los puntos fundamentales



de la educación a distancia a través de Internet, objetivo fundamental de estudio de este

proyecto.

Así mismo, el desarrollo de la Práctica Virtual no solo ha llevado consigo la

mera realización de un simple trabajo de laboratorio, con una interfaz y un intercambio

de datos entre alumno y ordenador, sino que ha llevado consigo la implantación de un

entorno de realidad virtual en el que el laboratorio de Instrumentación del L2 se ha

tomado como primer nivel, en una carrera hacia el desarrollo de todo un mundo de

posibilidades desde el punto de vista de la realidad virtual. Este laboratorio ha sido

creado siguiendo las técnicas de un lenguaje de programación llamado VRML, además

de apoyarnos en una potentísima herramienta de diseño gráfico como es el

3DStudioMax. La unión de estas dos herramientas nos ha valido para engendrar el

laboratorio de forma virtual, en el que el alumno puedo moverse como si se encontrara

realmente en él, e interaccionar con los aparatos que se podría encontrar allí, pudiendo

acceder a información de primera mano sobre los mismos.

Además de la Práctica, el otro bloque fundamental sobre el que descansa el

portal es la implantación de la herramienta multimedia realizada con Macromedia

Director. Con ella el alumno va a poder estudiar de una manera más atractiva y directa

el aspecto, funcionamiento, funcionalidad, etc. de los aparatos que se encontrará en el

laboratorio de cualquier asignatura de instrumentación y en concreto en la asignatura de

5º curso Laboratorio de Instrumentación Electrónica. La herramienta consiste en ofrecer

una serie de películas interactivas, una sobre cada aparato, en la que se explica

detalladamente todos los entresijos de cada instrumento, de forma que el alumno

aprende de la misma forma que si leyera el manual de usuario, resultando una gran

diferencia entre esto dos métodos, la cual es la dificultad de aprender e intentar estudiar

un manual, frente a la facilidad de visualizar un documento mucho más intuitivo e

interactivo.



3 CAPÍTULO 3. APLICACIÓN PRÁCTICA.

3.1 Introducción.

A lo largo de los capítulos anteriores hemos ido desgranando las ideas básicas de

este proyecto fin de carrera, dando una descripción superficial de lo que iba a tratar el

desarrollo del trabajo. A continuación, en este capítulo, vamos a profundizar en todos y

cada uno de los aspectos del proyecto que se han ido enumerando en las páginas

anteriores. Veremos como se ha desarrollado el portal web, los lenguajes y técnicas de

programación utilizadas, como PHP, o inyecciones de sentencias JavaScript, además de

explicar más claramente en qué ha consistido la herramienta de Macromedia.

A su vez nos adentraremos en los mundos virtuales de la mano del VRML y

expondremos lo que ha sido el trabajo para este proyecto. También dedicaremos unas

líneas al desarrollo de la base de datos en MySQL y al trabajo dedicado a la

implantación de la práctica virtual y al enfoque que se le ha dado.



3.2 Aplicación práctica usando PHP. Implantación del portal

educacional.

PHP es un lenguaje de programación, con una sintaxis similar a los lenguajes C

y Perl, para crear páginas web con contenido dinámico, que se interpreta por un servidor

web Apache y genera código HTML dinámico. Es decir, nos permite crear un programa

que se pueda ejecutar en el servidor desde un programa visualizador de páginas web y

dar respuesta en función de los datos que introduzca el usuario.

El PHP es un lenguaje embebido en HTML, que se ejecuta en el servidor, de

manera similar a los “Server Side Incluyes” (SSI) de Apache, o los ASP de Microsoft,

pero PHP es mucho más potente.

El lenguaje de programación PHP dispone de funciones para realizar las

operaciones habituales de los lenguajes de programación, usar ficheros, tratamiento de

cadenas, texto, etc.

Una de las virtudes estrella de PHP y que figura como característica más

importante es su capacidad para conectarse a bases de datos, como MySQL, y generar

páginas en función de los resultados obtenidos en la correspondiente consulta. Las

consultas se pueden realizar, bien en modo nativo, o bien, mediante ODBC, este modo

nativo es el compatible con MySQL.

A continuación vamos a ver las ventajas que presenta este lenguaje de

programación frente a otros lenguajes:

• Interfaz: En primer lugar el PHP se ejecuta a través de una interfaz muy

familiar para el usuario: el cliente web. No es necesario que el usuario

aprenda nuevas combinaciones de teclas, ni nada parecido, para

aprender a usar el programa. Tampoco es necesario tener que instalar

ningún software adicional en la estación del trabajo del cliente para usar



un programa PHP aparte del propio navegador web. De este misma

forma, la ejecución de un programa PHP se puede realizar desde un

cliente web de cualquier plataforma: el usuario puede escoger su sistema

operativo y su cliente web preferidos.

• Acceso en red: El propio diseño de PHP lleva incorporada esta virtud.

El programa de ejecuta en un servidor al cual se puede acceder desde

cualquier puesto de una red. El servidor siempre podría limitar el acceso

a sólo determinados puestos y además obligar a la autentificación de un

usuario para poder acceder a aciertas partes de un programa.

• Protección del código: Al tener el código albergado en el servidor, este

código esta protegido tanto de la manipulación de los usuarios como de

la presencia de virus.

• Facilidad: Hemos de señalar que el lenguaje PHP es realmente fácil de

aprender. Cualquier persona que sepa algún lenguaje de programación

puede aprender los fundamentos de PHP en un breve espacio de tiempo.

• Interconexión con Bases de Datos: Por último, y como ya

introdujimos anteriormente, el PHP cuenta con una gran conectividad

con bases de datos, lo que le dota de una gran potencia a la hora de

generar páginas web dinámicas. Prácticamente se podrá consultar

cualquier motor de bases de datos SQL, lo que engloba al nuestro que es

el MySQL.

Una vez comentados los aspectos más importantes del PHP vamos a

continuación a concretar el trabajo desarrollado en PHP del presente proyecto.

El primer gran bloque de trabajo de este proyecto fin de carrera ha sido la

implantación del portal educacional. En los capítulos anteriores, hemos expuesto

someramente las razones por la cual se decidió construir un portal web, como primer



paso hacia la realización de este proyecto. Tras un estudio previo de los trabajos que se

habían realizado como proyectos fin de carrera en el departamento relacionados con el

desarrollo web, en concreto con la página dedicada a la asignatura de Laboratorio de

Instrumentación Electrónica de 5º curso, se concluyó que era necesario la implantación

de un portal un poco más enfocado a la tarea que se iba a desarrollar como era un

sistema de educación a distancia que englobara varios aspectos.

Así lo primero es diseñar toda una estructura de páginas en los que queden

recogidos los aspectos más importantes que estamos buscando. Además se buscó un

diseño algo más novedoso y atractivo desde el punto de vista plástico.

3.2.1 Estructura del portal web.

El portal tiene un diseño muy similar a la de cualquier página que se pueda

encontrar navegando por “la red”.

Al portal se le ha dado el nombre de “Laboratorio Virtual”. De este modo, al

inicio se muestra una página en la que se da una información general acerca de lo que es

el laboratorio virtual. Como ya dijimos anteriormente, se ha intentado crear un portal

atractivo, pero sobre todo sencillo en la forma de ofrecer la información a los alumnos.

Quien no ha tenido la experiencia en diversas ocasiones en que navegando por alguna

página y buscando alguna información en concreto nos hemos tenido que ir con las

manos vacías, ya que no hemos sido capaces de encontrar lo que queremos, debido a la

mala concepción de la página, esto se debe a que el diseñador no se ha tomado el tiempo

necesario para ordenar y presentar de forma clara la información que desea ofrecer.

Por esta razón, se ha tomado un tiempo de ejecución de este proyecto, dedicado

a hacer un estudio importante previo de todo el portal, de forma que al terminarlo

tuviéramos perfectamente definida la estructura del éste y la disposición de la

información.



A continuación vamos a ir desgranado el portal para tener presente y poder

visualizar a la vez que se describen cada una de las páginas.

Hemos de decir que se ha mantenido el mismo diseño en todas las partes de la

página. Así, podremos ver como todas cuentan con una cabecera con el nombre del

portal “Laboratorio Virtual”, seguidamente un pequeño párrafo, donde se da una

explicación de lo que se puede ver en esa página. Seguido a esto la información o el

contenido concreto de esa página.

Veamos el primer lugar la página inicial del portal:

Laboratorio.php

Como podemos ver en imagen, el contenido de la primera página, es una

explicación de lo que es el laboratorio virtual, sumado a estos los links que nos llevan al

sitio al que queremos acceder:

• Visita Virtual: Si pinchamos en este botón tendremos acceso a la

representación virtual del laboratorio de Instrumentación Electrónica,



que se ha realizado con VRML. En ella el alumno podrá navegar como

si se encontrara realmente en él. Más adelante a lo largo de la lectura de

este proyecto se explicará más a fondo todo este apartado.

• Instrumentos: Desde aquí tenemos acceso a otra página en la que se

listan los distintos instrumentos que se pueden encontrar en el

laboratorio, y desde la cual se puede acceder a una especie de película

interactiva de cada uno de los instrumentos, con la que se puede

aprender el manejo de los aparatos de forma muy sencilla. También se

extenderá la información sobre este apartado.

• Práctica Virtual: Con este link se da paso a la realización de una de las

prácticas del laboratorio. La particularidad de la realización de esta

práctica es que se realiza de forma remota, pero de manera real en el

laboratorio. De la misma forma explicaremos en páginas posteriores este

punto.

• Contactar: Este botón nos da acceso a toda la información que podemos

necesitar, teléfono, email, etc. si queremos ponernos en contacto con el

responsable del laboratorio virtual, en este caso el profesor de la

asignatura don Federico José Barrero.

Veámosla en la siguiente figura:



Contactar.php

• Enlaces: Como era de esperar, al igual que en cualquier portal tenemos

un apartado donde se recogen enlaces relacionados con los temas de la

página, en concreto en la nuestra, y desde este botón se puede acceder a

las páginas de los principales fabricantes de aparatos encontrados en el

laboratorio Hameg, HP, Tektronix, etc. También podemos encontrar los

enlaces a páginas relacionadas con los mundos virtuales como Cortona,

Parallel Graphics, etc. En éstas el alumno puede encontrar muchos

ejemplos de creación de mundos virtuales, y mucha más información.

Por último, encontraremos enlaces a páginas relacionadas con las

herramientas que se han utilizado para crear el laboratorio virtual como

LabView, National Instruments, relacionadas con el protocolo GPIB,

como etc. y también a su mantenimiento desde el punto de vista de

gestión de usuarios en las bases de datos, como MySQL. Podemos ver

su estructura a continuación:



Enlaces.php

3.2.2 Aplicación de Macromedia Director en el Portal Web.

En este apartado vamos a ver detalladamente el trabajo realizado en el portal

web con la herramienta Macromedia Director.

3.2.2.1 Introducción.

Como hemos dicho en repetidas ocasiones a lo largo de este proyecto, la idea

fundamental sobre la que gira la concepción del mismo, es el aplicar a la enseñanza

todas las nuevas tecnologías, tanto hardware como software, que se desarrollan en la

actualidad.



De forma concreta y ya hablando en el entorno del Departamento en el que se

desarrolla el proyecto, teniendo en cuenta la dificultad con la que se encuentra el

alumno al intentar trabajar con aparatos y dispositivos que ha visto en contadas

ocasiones a lo largo de la carrera y con algunos otros que no ha visto nunca, se pensó en

realizar un medio interactivo en el que se explicara el manejo, funcionamiento, etc. de

los aparatos del laboratorio.

Surge así, la idea de utilizar un programa para crear este tipo de trabajos con lo

que se llega por fin al Macromedia Director.

Macromedia Director es un entorno completo para la creación de multimedia.

Para mucha gente, Director es sólo una herramienta de animación, de hecho, proviene

de una de ellas. Aunque posee funciones que van más allá de la animación, gran parte

de la apariencia y del funcionamiento de Director está basado en su uso como

herramienta de animación. El conocimiento de aquello que Director tiene de

herramienta de animación es sólo un comienzo de las posibilidades que encierra

Director.

Director es mucho más que una herramienta de animación o presentaciones. Es

posible elaborar aplicaciones completas, applest en la Web y utilidades software. Se

pueden diseñar juegos, software educativo y aplicaciones empresariales. Casi cualquier

cosa que se pueda hacer mediante software es posible con Director.

La clave de escribir software potente con Director es Lingo, el lenguaje de

programación de Director. En sus comienzos, Lingo era un juego de comandos de script

simples que se usaba para controlar la animación, ahora es un lenguaje completo

orientado a objetos que rivaliza con los tradicionales, como C++, Pascal o Java.

Las presentaciones, al contrario que las animaciones, son películas de Director

interactivas, así, los usuarios finales en lugar de ser meros espectadores pasivos,

participan durante la reproducción de la presentación. Así el diseño por tanto de la

película se realizó en Macromedia editándose en un cd a modo de película.



Y este era justamente el problema, toda esta información se encontraba en un cd

interactivo que el alumno podía consultar en cualquier momento en ordenador personal,

pero esto, traía consigo la rémora de que la información esta supeditada a llevarla en un

cd. Lo que se ha llevado a cabo en este proyecto es aunar el trabajo realizado en

Macromedia Director con las posibilidades de exportarlo a un entorno web, y que esta

información sea accesible desde cualquier sitio y en cualquier momento sin la atadura

de tener el cd.

En un principio, esta idea es fácil de concebirla, el problema llega cuando uno se

pone manos a la obra para realizar la migración. Macromedia Director es una

herramienta que dispone de enormes posibilidades, de modo que a la hora de crear un

medio interactivo como el que se elaboró, el propio diseñador se pierde en todo un

mundo de menús, forma de distribuir la información, etc. Lo que ha llevado esto

consigo es que, una tarea que al priori parecía sencilla en su concepción, ha resultado

ser un trabajo mucho más tedioso y que ha ocupado más tiempo del esperado en la

realización del proyecto.

3.2.2.2 Análisis de la información.

Director utiliza como analogía el diseño de una película con sus actores,

escenario, guión, etc. En el escenario el programador representa su propia producción,

donde cualquier elemento de la misma se denomina miembro del reparto, o

simplemente miembro. La pantalla del ordenador donde se desarrolla la acción es una

ventana llamada escenario. El resto de de los elementos que componen Director siguen

la misma metáfora cinematográfica. Así para crear una película, Director dispone de

diferentes ventanas con las que realizar la mayoría de las tareas, que están a su vez

complementadas con una barra de menús desde la que acceder a todas las funciones de

la aplicación.



Dentro de esta metáfora, el propio programa tiene una denominación acorde a la

situación; se trata de un “director de cine” (director), que elabora unos archivos que son

las “películas” (movies) generadas en un “escenario” (stage) con unos “actores”

(sprites) que forman parte de un “reparto” (cast) y siguen un “guión” (“score”,

“scripts”). Dichas películas pueden ser visualizadas de forma independiente utilizando

unos archivos ejecutables llamados “proyectores” (proyector). Esta metáfora facilita la

comprensión, y sobre todo, hace mucho más intuitivo el proceso de creación de un

producto multimedia. Veamos cada uno de los miembros de dicha metáfora por

separado:

• Película (movie): Archivo principal de Director. Contiene una o varias

listas de reparto y un Store.

• Guión (Score): No es más que el guión o partitura de nuestra película;

el aspecto de su ventana recuerda mucho a los timelines de los editores

de video. El score está dividido horizontalmente en fotogramas

(“frames”, que son las unidades mínimas en que se divide nuestro eje

temporal de reproducción) y verticalmente en canales agrupados en dos

partes: una superior formada por canal dedicado a las transiciones, los

dos canales de sonido, otro dedicado a la paleta de colores usada en la

película, otro dedicado al control temporal de la misma y por último

otro destinado a los scripts o guiones Lingo. La parte inferior está

formada por los canales de sprite que no son otra cosa que los

personajes del cast que han saltado a escena. Cuando se coloca un

personaje del reparto en el score, éste también aparece en la stage, y

viceversa. El score sirve pues de referencia temporal, pero también

espacial de lo que acontece en el escenario, ya que los miembros de

reparto colocados que se sitúan en el primer canal son cubiertos por los

de los canales sucesivos, como si se trabajase con capas (por eso se

suele colocar el fondo que se vaya a usar en el primer canal del score).

Por otra parte, en la parte superior del score se encuentra una franja



blanca dedicada en la que se pueden poner etiquetas a la película con

idea de tener un mayor control y claridad del conjunto de la misma.

Ventana de Guión

• Escenario (Stage): Es el escenario donde se sitúan nuestros actores. La

ventana de stage actúa como previsualizador de la película que se está

creando, pero también sirve como herramienta de edición porque dentro

de ella se pueden ir modificando los elementos que intervienen en la

película.

• Reparto (cast): Ventana donde se almacenan los elementos importados

o creados en cada película de Director. Existen dos tipos de cast: el

interno, el cual forma parte de la película y se incluye dentro de la

misma, y el externo que no forma parte del archivo de la película, pero

cuyos miembros están vinculados a la misma y se utilizan en su

reproducción. Normalmente el cast interno se usa para almacenar

aquellos elementos que van a usarse exclusivamente en la película. El



cast externo se usará, por lo general, para guardar los miembros del

reparto que son usados por varias películas, como por ejemplo los

behaviors (después hablaremos de ellos); con los cast externos se evita

la repetición de elementos en distintas películas que van a emplearse en

la misma aplicación.

Ventana de Reparto

• Miembro (member): Elemento básico de cualquier película de

Director. Cualquier forma multimedia puede representarse en Director

en forma de miembro del reparto. Existen infinitos tipos de miembros,

algunos se pueden crear y editar en Director, y otros hay que crearlos en

programas como herramientas de edición de vídeo o sonido y después

importarlos. Tipos de miembros:

• Mapas de bits (bitmap): Básicamente no es más que un gráfico o una

imagen. Puede ser un diseño, una fotografía, o incluso una imagen



generada con un programa de 3D. La edición en Director de mapas de

bits se realiza mediante la ventana Saint.

• Texto: Miembro que contiene caracteres con formato. Pueden editarse

directamente en Director o importar archivos creados en procesadores

de texto. Director cuenta con propiedades como anti-aliasing (caracteres

suavizados), que dotan al editor de Director de gran capacidad.

• Campos: Son como los miembros de texto, su origen se encuentra en

versiones anteriores de Directores las que los campos eran la única

opción para mostrar texto. Ocupan menos espacio de archivo pero no es

posible aplicarles la técnica anti-aliasing.

• Sonidos: Director puede importar diferentes formatos de sonido, pero

no tiene capacidad para crear o editar sonidos.

• Formas: Son miembros del reparto especiales, líneas, óvalos,

rectángulos…con contorno o relleno, permiten crear elementos gráficos

sin necesidad de recurrir a los mapas de bits.

• Vectores: Son formas únicas y complejas llamadas vectores que son

similares a los multimedia creados con programas como Macromedia

Frenad y Adobe Ilustratror.

• Flash: Macromedia posee también otro tipo de programas de creación

de películas. Flash a diferencia de Director, no cuenta con un lenguaje

de programación sólido como Lingo. Las películas desarrolladas con

Flash se pueden importar a Director como miembros de reparto, al igual

que ocurre con secuencias animadas y elementos interactivos.

• Botones: Es posible crear botones simples y rápidos.



• Vídeo Digital: Los miembros de vídeo pueden provenir de distintos

formatos pero normalmente poseen formatos Apple Quick Time o

Windows AVI.

• Scripts: Son los miembros que contienen código Lingo y controlan, así,

los elementos que aparecen en la película. Existen diferentes clase de

scripts, de comportamiento (behavior), son los asociados a un sprite, de

cuadro son los asociados a un cuadro y los de película que controlan la

totalidad de la misma.

• Xtra: Son pequeños archivos que amplían las capacidades de Director,

mediante la adición de miembros del reparto, comandos de Lingo, o

bien herramientas de desarrollo. Son componentes que proporcionan a

Macromedia una forma de desarrollar partes de Director de manera

independiente, añaden características, como Lingo para la red, y

mejoran las funcionalidades de Director en general. Director tiene

componentes Xtra como ActiveX, Photoshop Filtres, Flash Asset,

Animated GIF Asset, Multiuser, QuickTime 3, Save As Java, entre otros

Los miembros del reparto están por lo general relacionados unos con otros de

muchas formas, por ejemplo, suelen tener un script adjunto. Los scripts no son

miembros del reparto aparte, sino una propiedad del miembro del reparto al que se

asocie, dotando, de esta forma, de interactividad.

Una vez creada la presentación, existen básicamente tres opciones disponibles

para presentar el producto final. Usar Director para la presentación, crear un proyector

independiente o comprimir la película para utilizarla en Internet o en una red interna.

En nuestro caso se determina la utilización de comprimir la película ya que si

vamos a colgarla en la red, uno de las consideraciones importantes en cualquier archivo

es la necesidad de tamaño reducido. Shocking a movie es en realidad comprimir la

película. El nuevo archivo será una copia de la película con imágenes, texto, sonidos y



la información del guión comprimida. Este archivo ocupa por lo general, menos de la

mitad del original, permitiendo al usuario descargarlas desde internet, sobre todo si se

usa modem. El código de un archivo Shockwave suele estar protegido. Los servidores

usan la extensión “.dcr” para identificarlas como películas Shockwave e informar al

explorador de que ha de usar plug-in de Shockwave para su reproducción

Veamos a continuación una descripción general de lo que nos vamos a encontrar

en las películas Macromedia realizadas.

Mediante estas películas se van a distribuir a los alumnos la parte teórica que

corresponde a los equipos que se utilizan en el Laboratorio de Instrumentación

Electrónica, hasta ahora sólo disponían de los tutoriales extensos y con información a

veces excesiva, mientras que con el software presentado aquí, dispondrán de una

herramienta más amena y con la información justa y necesaria, para el conocimiento del

manejo de los instrumentos, además de la posibilidad de acceder a toda la información

recogida en los tutoriales de los mismos, que se presentarán en formato PDF

perfectamente descargables por parte de los alumnos.

Se ha realizado trece películas correspondientes a trece equipos utilizados para la

realización de las prácticas del Laboratorio de Instrumentación.

En cuanto a la forma de presentar la materia, se ha procurado no resultar tedioso

con las explicaciones, con la intención de que la asimilación de ésta exija el mínimo

esfuerzo por parte del estudiante, para lo que se han utilizado las facilidades que

proporciona la tecnología multimedia. A pesar de la dificultad del tema a tratar, se ha

huido de minuciosas explicaciones en pantallas llenas de texto, que harían penosa su

lectura y que serían claramente desfavorables frente a ese texto expuesto en papel

impreso. Así, se ha intentado reducir al máximo el contenido de cada pantalla,

realizando en lo posible partes interactivas en las que el alumno decide lo que desea que

se le explique sin necesidad de visualizar todo el contenido de la pantalla.



Pero, por otra parte, tampoco se ha querido abusar de efectos especiales que

hagan de ésta una herramienta espectacular, pero que distraigan la atención de la

materia que se expone. Se han utilizado, es cierto, este tipo de efectos, pero siempre con

la idea de dirigir el interés hacia la materia y no hacia otra parte.

A continuación se describe detalladamente cada parte de la película y se describe

el sistema de navegación. Se ha procurado realizar un sistema de navegación que resulte

sencillo a la hora de manejarlo pero que sea lo más completo posible, es decir, que

permita en cualquier momento y de una forma rápida y concisa el acceso a toda la

información de los equipos. Se puede decir que este sistema tiene cuatro funciones

principales, que se detallan a continuación:

Navegación Principal: El sistema de navegación principal permite en todo

momento situarse en la primera página de los cuatro apartados en los que se divide la

descripción de cada uno de los equipos electrónicos. Es el sistema de navegación del

equipo. Estos cuatro apartados son los puntos principales en que se ha dividido la

descripción del equipo. Éstos son:

• Introducción. Descripción somera de la funcionalidad del instrumento.

• Características Generales: Descripción de las características técnicas

básicas del funcionamiento, así como de las limitaciones del equipo.

• Mandos de Control: Descripción de la funcionalidad de los mandos de

que consta el equipo, haciendo hincapié en aquellos en los que, por su

importancia o por su función, resulte más necesario. Debido a la

importancia de este apartado, la descripción se ha realizado de forma

más gráfica para la total comprensión del alumno.

• Tutorial (PDF): Tutorial de funcionamiento del equipo, en formato

PDF con información más detallada, para aquel alumno que desee



profundizar aún más en las posibilidades del equipo de instrumentación

que esté analizando.

Navegación Principal

En la imagen se reseñan los apartados descritos anteriormente. La película en

proyección se encuentra en el apartado de Introducción, puede verse en la imagen cómo

se diferencia en color de los demás.

Navegación Secundaria: Los controles de navegación secundaria sirven para

moverse dentro de los apartados en los que se ha dividido la descripción del equipo.

Están situados en la parte inferior derecha de la pantalla y son de dos tipos: Uno para el

avance de página y otro para el retroceso de página.

Estos cursores estarán presentes en el momento que se precisen, es decir, si el

apartado sólo supone de una página, no será necesario el uso de cursores.

Apartados



En la imagen se muestra la descripción del equipo mediante el apartado de

características, y puesto que posee más de una página se usan los cursores.[Parte

inferior derecha]

Navegación Secundaria

3.2.2.3 Realización de la migración.

Una vez que disponemos de toda la información contenida en el cd, lo primero

que hemos de realizar es un estudio previo de cómo vamos a descomponer los datos que

tenemos en bloques, pertenecientes cada uno de ellos a los distintos aparatos que

tenemos.

Como ya hemos explicado la información en el Macromedia Director esta

dispuesta en distintos tipos de ficheros. Uno de los problemas que nos encontramos es el

de la reorganización de los “cast”, que van apareciendo y que son requeridos por cada

uno de los ficheros. Debido a que tenemos que subir la información aun servidor web,



hemos de comprimir la información lo máximo posible, o que nos lleva a realizar un

mismo archivo genérico o cast para todos los archivos html que queremos crear.

Así mismo, como lo que necesitamos es seccionar la información del cd en

archivos html, hemos de ir creando uno a uno cada uno de estos archivos con la

consiguiente película shockwave.

Se aprovecha así la ocasión para eliminar archivos y para depurar los errores que

se crean al migrar de un tipo de estructura a otra.

Así por ejemplo surgió un problema con la opción de descarga del manual pdf

que tienen cada uno de los aparatos en su correspondiente archivo macromedia, debido

a que el programa tenía las referencias de la ejecución del programa Acrobat Reader, al

directorio raíz, el cual se pierde al hacer el traslado a html. Por lo tanto se tuvo que

redirigir en el código del programa de ejecución del Acrobat Reader, esto se hace

modificando el código en el lenguaje de programación propio del que dispone el

Macromedia Director, a continuación mostramos un resumen del código rectificado:

on mouseUp cursor(0) open "dswmedia\manuales\TeK1230.pdf" end on mouseEnter me cursor(280) end on mouseLeave me cursor(0) end

Una vez que hemos eliminado archivos innecesarios para nuestro propósito, y

reconstruido la información a nuestra consideración, comenzamos la migración

obteniendo todos los archivos html que luego se colgaran en la red y a los que se

accederá fácilmente.

Un dato importante a comentar ya no sólo para la explicación del trabajo en este

proyecto, sino para un futuro lector que necesite realizar algún trabajo de este tipo, es



que todos los archivos generados en una migración a html, tanto los archivos cct, los dcr

y los propios html, deben colocarse en una carpeta denominada “DSWMEDIA”, esto es

debido a que los cast externos que se crean, son genéricos para todos los archivos dcr, es

decir para las películas creadas para cada uno de los html, y se identifican en esta

carpeta por defecto. Esto es importante ya que de otro modo, es decir si se dispusieran

los archivos en distintas carpetas no funcionaría, y todo el trabajo sería en vano.

3.2.3 Aplicación de Javascript en el Portal Web.

3.2.3.1 Introducción.

Hoy en día, todo usuario habitual de Internet, puede comprobar que el diseño de

las páginas por las que navega cambia cada dos por tres, los diseñadores se afanan en

convertir la página en algo más que simple información “colgada” en la red, y darle más

juego y atractivo a ésta, es a lo que se le llama dinamizar una página, o crear páginas

dinámicas. Como consecuencia de esto, van apareciendo de forma vertiginosa múltiples

aplicaciones, variaciones de código, lenguajes nuevos y técnicas de diseño innovadoras,

PHP, DHTML, Java, etc Entre todas ellas se encuentra Javascript.

Javascript es un lenguaje de guiones interpretado, cuyo código va inserto en los

mismos archivos HTML, dentro de las etiquetas HTML. No tiene mucha potencia, de

hecho no es un lenguaje completo como pueden ser Java o C, pero si dispone de lo

adecuado para comprobar formularios, gestionar una navegación, cambiar propiedades

físicas de los documentos, pequeños cálculos, etc.

No es un lenguaje orientado a objetos, pero hace uso del modelo de objetos, de

forma que el propio navegador crea unos cuantos, dejando también abierta la

posibilidad de poder usar y construir objetos propios. Su estructura y sintaxis es

bastante parecida al C, y por lo tanto a Java.



3.2.3.2 Inyección se sentencias Javascript.

Aunque parezca una contradicción con las premisas que se dieron al inicio de

creación del portal web, recordemos que buscábamos sencillez, y rapidez, no podemos

caer en el error de crear una página con poco atractivo para el alumno, sobre todo si la

información que contiene no es fácil de asimilar. Así, se han ido buscando técnicas

modernas de programación web, para poder añadir algunos detalles atrayentes para el

usuario, respetando eso si, la austeridad que necesitamos, sobre todo cuando tenemos

una cuota de espacio en el servidor.

Es por esto que, pensando siempre en al comodidad del alumno, se han utilizado

sentencias Javascript en la codificación del portal.

Aunque la aplicación de Javascript a nuestro proyecto ha sido más bien escasa,

no queremos dejar de pasar la ocasión para señalar que las posibilidades que ofrece son

enormes, y que nosotros hemos utilizado una mínima parte de su potencial.

A continuación vamos a presentar la página en la que se ha incluido código

Javascript.

Se trata de la página “instrumentos.html”. Con esta página se intenta hacer una

introducción de forma visual a los aparatos del laboratorio. De esta forma se listan los

aparatos, de manera que el alumno al pasar el ratón por encima de cada aparato, puede

ver una fotografía del mismo en la parte derecha de la pantalla. Aunque parezca una

idea simple, al menos a título personal pienso que es muy importante, ya que al alumno

le resultará mucho más fácil reconocer cualquier aparato si antes ha visto su imagen,

que si sólo se guía por el nombre.

Veamos una figura de la página:

Instrumentos.html

Hemos de decir, que los nombres de los aparatos no sólo permiten la activación

del código Javascript, sino que además sirven de enlaces al archivo html

correspondiente a cada aparato creado con el Macromedia Director. De esta forma

hacemos que esta página no sólo sirva como contemplación sencilla de los aparatos,

sino que creamos además un nuevo acceso a la información de Macromedia.

Presentamos el código Javascript:

<html> <head> <title>Laboratorio Virtual</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <SCRIPT LANGUAGE="JavaScript1.1"> var activado1=new Image(); activado1.src="Multi-FLUKE.jpg"; var activado2=new Image(); activado2.src="Multi-HM8011.jpg"; var activado3=new Image(); activado3.src="osciloscopio-hm.jpg";

document[nombreImagen].src=activado9.src; } function activar10(nombreImagen) { document[nombreImagen].src=activado10.src; } function activar11(nombreImagen) { document[nombreImagen].src=activado11.src; } function activar12(nombreImagen) { document[nombreImagen].src=activado12.src; } function activar13(nombreImagen) { document[nombreImagen].src=activado13.src; } function desactivar(nombreImagen) { document[nombreImagen].src=desactivado.src; } </SCRIPT> <ul type="disc"> <li> <ahref="./dswmedia/Multimetro%20Fluke%2037.htm" onMouseOver="activar1('prueba');" onMouseOut="desactivar('prueba');"> Multimetro Fluke 37</a> </li> <li> <ahref="./dswmedia/Multimetro%20HM8011_3.htm"onMouseOver="activar2('prueba');" onMouseOut="desactivar('prueba');"> Multimetro HM-8010</a></li> <li> <ahref="./dswmedia/osciloscopio%20HM408.htm"onMouseOver="activar3('prueba');" onMouseOut="desactivar('prueba');"> Osciloscopio HM-408</a></li> <li> <ahref="./dswmedia/Osciloscopio%20PM3335-3375.htm"onMouseOver="activar4('prueba');" onMouseOut="desactivar('prueba');"> Osciloscopio PM-3375</a></li> <li> <ahref="./dswmedia/Generador%20Funciones%20HM8030.htm"onMouseOver="activar5('prueba');" onMouseOut="desactivar('prueba');"> Generador de funciones HM-8030</a></li>

<li> <ahref="./dswmedia/Generador%20Funciones%20PM5135.htm"onMouseOver="activar6('prueba');" onMouseOut="desactivar('prueba');"> Generador de funciones PM-5135</a></li> <li> <ahref="./dswmedia/TripleFuenteHM8040.htm"onMouseOver="activar7('prueba');" onMouseOut="desactivar('prueba');"> Fuente Alimentación HM-8040</a></li> <li> <ahref="./dswmedia/Triple%20Fuente%20PE.htm"onMouseOver="activar8('prueba');" onMouseOut="desactivar('prueba');"> Fuente Alimentación PE-1542</a></li> <li> <ahref="./dswmedia/Analizador%20Espectro%20Tektronix_2711.htm"onMouseOver="activar9('prueba');" onMouseOut="desactivar('prueba');"> Analizador de espectros Tektronix-2711</a></li> <li> <ahref="./dswmedia/Analizador%20espectro%20HM5010.htm"onMouseOver="activar10('prueba');" onMouseOut="desactivar('prueba');"> Analizador de espectros HM-5010</a></li> <li> <ahref="./dswmedia/Analiz_L%F3gico%20gould.htm"onMouseOver="activar11('prueba');" onMouseOut="desactivar('prueba');"> Analizador lógico Gould-K25</a></li> <li> <ahref="./dswmedia/Analizador%20Log%20Tektronix%20%201230.htm"onMouseOver="activar12('prueba');" onMouseOut="desactivar('prueba');"> Analizador lógico Tektronix-1230</a></li> <li> <ahref="./dswmedia/Analizador%20Logico%20Tektronix.htm"onMouseOver="activar13('prueba');" onMouseOut="desactivar('prueba');"> Analizador lógico Tektronix-3001 GPX</a></li> </ul>

A continuación vamos a explicarlo pormenorizadamente para que el lector pueda

comprender un poco más el código Javascript utilizado.

En primer lugar hemos de señalar que cualquier inyección de código javascript

se inicia con la sentencia, para que el intérprete de html, en este caso el navegador,

interprete lo siguiente como javascript.

<SCRIPT LANGUAGE="JavaScript1.1">

De la misma forma al acabar debe utilizase la sentencia:

</SCRIPT>

Una vez dicho esto, seguimos desgranando el código. Se definen como variables

locales a la página instrumentos.html, las distintas imágenes que se quieren mostrar en

la página, “activado1”, “activado2”, etc.

var activado1=new Image();

activado1.src="Multi-FLUKE.jpg";

A continuación se definen las distintas funciones para cada una de las imágenes.

function activar1(nombreImagen) {

document[nombreImagen].src=activado1.src; }

Estas funciones tienen como objetivo activar la imagen cuando sea necesario, es

decir, cuando ocurra el evento de pasar el ratón por encima del texto, pero eso se verá

más adelante.

Una vez definidas las variables y las funciones de Javascript, se inyectan las

funciones “onMouseOver” y “onMouseOut”, nos valemos de ellas para crear los

eventos del ratón, tanto de pasar el ratón por encima del texto como al retirarlo. Estos

dos eventos se vinculan con las funciones ”activar” y “desactivar” respectivamente, así

cuando se pase el ratón por encima del texto (onMouseOver) se ejecutará la función

definida en el código Javascript activar, lo que produce la activación de la imagen

correspondiente. De la misma forma cuando se deje de pasar el ratón por ese texto, y

por ende, por cualquier otro texto, se ejecutará “desactivar”, lo que producirá la

activación de la imagen “nulo”, creándose así el efecto de no haber ninguna imagen

señalada.

Vamos a ver un ejemplo quenos aclare un poco más todo esto. Escogemos el

código para la primera imagen, la del Multimetro Fluke.

Lo primero que tenemos es, como dijimos anteriormente el enlace al archivo

html creado con Macromedia “MultimetroFluke.html”:

<a href="./dswmedia/Multimetro%20Fluke%2037.htm"

A continuación la creación del evento onMouseOver, que al hacerlo en la página

se activa la función “activar1” que es la que corresponde a activarla imagen1, es decir la

variable “activado1.src” que corresponde como no podía ser de otra manera a la imagen

del multímetro Fluke.

onMouseOver="activar1('prueba');"onMouseOut="desactivar('prueba');">

Después tenemos el evento onMouseOut, a la que se asocia la función

“desactivar” que tiene como objetivo, activar la imagen “nulo” que es el truco utilizado

para parecer que no tenemos imagen. Seguidamente se ha de escribir propiamente el

texto del enlace con la sentencia:

<fontface="Tahoma" size="2">Multimetro Fluke 37</a>



Esta es la forma con la que se crean todos los vínculos que podemos encontrar

en la página “instrumentos.html”, y para los que se ha utilizado Javascript.

3.3 Aplicación práctica usando VRML. Implantación del

entorno virtual.

3.3.1 Introducción

Si como hemos dicho en páginas anteriores Javascript, DHTML, PHP, Java, etc

se están haciendo fuertes en la programación web como lenguajes de programación para

modernizar y dinamizar el mundo de la red, la generación de efectos visuales,

animaciones, no hacen más que ganar terreno en este sentido. Podemos observar, a

medida que pasan el tiempo, como Internet va evolucionando, en el sentido en que las

páginas contienen cada vez menos texto y más imágenes, efectos visuales y

animaciones.

Entre todos estos medios, que se pueden utilizar, efectos Flash, Fireworks,

fusión de imágenes, disponemos de un lenguaje poco conocido para el usuario de

Internet que es el VRML, Virtual RealityModelling Language. El VRML es el formato

más popular para exponer contenido en tres dimensiones vía Internet, y desde luego es

el mejor candidato para nuestro propósito.

La historia del VRML es sencilla y reciente. Había un VRML, originalmente, la

versión 1.0. Éste fue el primer esfuerzo hacia un idioma de modelado en 3D para

Internet, y después de un tiempo se revisó, apareciendo el VRML 2.0, que cambió la

estructura de los archivos, y añadió muchos nuevos rasgos, como la animación. VRML

2.0 se sometió entonces al ISO/IEC para su aprobación y estandarización. VRML97 es

el resultado de ese proceso, y es una norma de ISO/IEC. VRML97 es prácticamente

idéntico a VRML 2.0, con un par de cambios menores en detalles muy pequeños.



Así hemos escogido este lenguaje de programación porque cumplía

perfectamente los objetivos que estábamos buscando, crear un mundo virtual de forma

que al alumno interactuara con él de forma activa y no solo se limitase a contemplar la

información del portal.

3.3.2 Edición del Laboratorio Virtual.

La idea clara de lo que queremos realizar, es un entorno virtual, en concreto el

Laboratorio de Instrumentación Electrónica que se encuentra en el L2 de la Escuela

Superior de Ingenieros. Este entorno, va a servir al alumno para familiarizarse con todo

el conjunto que se puede encontrar al cursar esta asignatura.

Además de este propósito, se quiere tomar la creación de este laboratorio virtual

como base para poder realizar todo un sistema virtual interactivo de e-learning,

partiendo desde este laboratorio donde realizar una práctica, como llegar a crear toda

una escuela de ingeniería. Así mismo, esto ha servido al alumno que realiza este

proyecto, como método ideal de conocer y dominar unos de los lenguajes ideado para

Internet con más futuro en nuestros días.

A pesar de las virtudes expuestas anteriormente del lenguaje VRML, hemos de

reconocer un defecto importante y es que a la hora de crear entornos algo más

complejos, en los que vamos a exigir un nivel de detalle algo mayor, el VRML resulta

ser un lenguaje tedioso, ya que el lenguaje en sí mismo es tan simple, que no

disponemos de otra forma de codificar que hacerlo línea a línea, esto implica que lo que

hacen la mayoría de los programadores, y en concreto el alumno que ha realizado este

proyecto, es valerse de una herramienta de modelado 3D mucho más potente, y a

continuación realizar la conversión de archivos del modelador a VRML, junto con una

depuración exhaustiva.

Así, y siguiendo el consejo del tutor del proyecto, se decidió utilizar un

programa gráfico de gran potencia y enormemente conocido, como es el 3DStudioMax.



Hoy en día, el 3DStudioMax, es una de las herramientas de diseño gráfico más

utilizada por los diseñadores, tanto en arquitectura, animaciones, programación web,

etc. La gran potencia de esta herramienta hace que el alumno haya tomado bastante

tiempo de este proyecto para llegar a dominar el manejo de este programa.

Gracias al uso de éste, el proceso de creación del laboratorio ha sido mucho más

intuitivo que no sencillo, ya que se ha ido elaborando palmo a palmo el laboratorio

ahondando en la profundidad de detalles.

3.3.2.1 Aplicación de 3DStudioMax.

La primera tarea, como hemos explicado, ha sido la creación del habitáculo del

laboratorio con 3DSMax, de forma estática.

Con una serie de fotografías tomadas del laboratorio se han ido creando

elementos poco a poco, hasta que el nivel de detalle ha sido el aprobado por el tutor.

Seguidamente se han ido añadiendo los elementos del laboratorio como ordenadores,

sillas, armarios, etc. Por último, y no por ello menos importante, se realizaron los

aparatos del laboratorio, analizadores de espectro, fuentes de alimentación,

osciloscopios, etc.

En este proceso de creación se utilizan los distintos elementos con los que se

cuentan en el 3DStudioMax, planos, cubos, intersecciones, operaciones booleanas entre

ellos, y una serie de operaciones complejas, que no tiene lugar enumerarlas en la

redacción de este proyecto.

Veamos una imagen simple del “esqueleto” del laboratorio tal y como sale del

3DStudioMax.



Laboratorio-3DStudio

Una vez que se tiene este conjunto de planos, cubos, líneas, paralelepípedos, etc.

Se procede a una tarea que por muy sencilla que parezca no lo es en absoluto, darle

apariencia real al laboratorio. Para ello se usa tanto el 3DSMax como la texturización en

VRML, pero de esto último hablaremos más tarde.

A partir de lo visto anteriormente, se tienen que crear las luces que se dispondrán

en el laboratorio. El problema, que nos hemos encontrado, como a cada paso con el

3DSMax es que las posibilidades son enormes. Existen en el programa cinco tipos

distintos de iluminación, focos omnidireccionales, focos direccionales, etc. y cada uno

de ellos con infinitos parámetros, lo que implica que este paso en la creación del

laboratorio ha sido aun más tedioso si cabe que el anterior. No se debe caer en el error

de pensar que la iluminación de una escena tridimensional es algo superfluo, de una

buena iluminación depende si un entorno virtual da la verdadera sensación de realidad

frente a parecer una simple representación a ordenador.



Por otra parte, y entrando ya en detalle con este proyecto, el proceso de

iluminación ha resultado algo tedioso. Por un lado, nos encontramos con un problema.

El VRML, trae por defecto una iluminación estándar en todos los mundos, es decir,

tienen un campo “headlight” del usuario en ON, con lo que se iluminará allá donde se

mire. Esto perjudicaba seriamente toda la iluminación que se diseñara. El problema se

producía al eliminar esta iluminación. El navegador VRML daba problemas si solo se

utilizaba la iluminación propuesta por el alumno. Así que hubo que combinar ambas

tipos. Contando con esa rémora, se utilizaron finalmente dos focos de luz

omnidireccionales, colocados en puntos separados de forma que quedara iluminado el

entorno virtual por igual en todos sitios.

A continuación se detalla el código de las luces de VRML:

DEF Omni01 PointLight { ambientIntensity 0.5 intensity 0.3 color 1 1 1 location -142.4 69.77 -22.01 on TRUE radius 200 } DEF Omni02 PointLight { ambientIntensity 0.2 intensity 0.5 color 1 1 1 location 92.74 73.97 52.34 on TRUE radius 200 }

Observamos que tenemos dos focos de luz llamados Pointlight. Los campos de

los que consta son fácilmente comprensibles. El único que cabe destacar es el campo

radius, que determina el radio de acción de la luz.

Veamos finalmente, como queda la imagen anterior incorporando a ella la

iluminación del sitio.



Laboratorio-Iluminación

Por último, cuando ya tenemos el boceto de nuestro laboratorio realizado en

3DStudioMax, se realiza con el mismo programa una exportación a lenguaje VRML.

Gracias a la progresión de los programas, la versión utilizada del 3DStudio cuenta con

la opción de exportar el archivo a lenguaje VRML.

Una vez realizada esta operación pasaremos a la texturización y depuración en el

código VRML directamente.

3.3.2.2 Aplicación de VRML.

Vamos a explicar ahora un poco más sobre el VRML, su estructuración de datos,

especificaciones, etc.



Lo primero que se debe saber es que todo archivo VRML comienza con una

línea de cabecera:

#VRML V2.0 utf8

Esto dice al navegador que está recibiendo un archivo de VRML, y la versión

correspondiente del lenguaje. En este caso, es versión 2.0. VRML es sensible a

mayúsculas y minúsculas. La parte del utf8 dice al navegador qué standard de cadenas

de texto debe emplear. VRML 1.0 usaba ascii o utf8, pero la versión 2 tiene sólo utf8.

Cualquier línea que comience con una almohadilla (#) es un comentario, y será ignorado

por el intérprete VRML. La primera línea es una excepción, y es leída por el navegador,

a pesar de que tenga un # en el comienzo.

Sigamos ahora con la estructura de un archivo VRML. Un mundo VRML está

hecho a partir de nodos, que son tipos de objeto. Dentro de estos nodos, se encuentran

campos, que son propiedades del objeto. Los campos pueden ser cualquier cosa, desde

el tamaño de una caja, a otro nodo dentro del primero. Los nodos se escriben como

sigue:

Group { children [ ] }

Esto muestra el nodo Group. Es el nodo más simple. Lo único que hace es

agrupar otros nodos. El nodo se escribe en el archivo poniendo el nombre del nodo

(Group), y después un par de llaves. Dentro de estas llaves tenemos los campos. En este

caso, los children, pueden contener otros nodos. De este modo los nodos pueden

anidarse entre si, creando un tipo de jerarquía de nodos, a veces llamado el Grafo de la

Escena. Se muestran debajo unos ejemplos simples de nodos anidados, usando dos

nodos Group, uno dentro del otro.

Group { children [ Group { }



] }

Esto resulta ser un fragmento bastante vacío de VRML, pero muestra cómo

agrupar nodos y cómo se anidan.

Como se ha dicho anteriormente, algo importante que se debe recordar es que el

VRML es sensible a mayúsculas y minúsculas. Los nombres de los nodos comienzan

con mayúscula (Group, Transform, IndexedFaceSet), mientras que los de los campos lo

hacen con minúscula. Aún así, pueden tener una letra central mayúscula si el nombre es

compuesto (children, translation, coordIndex).

Esta es la mínima información que se debe tener entre manos sobre el VRML

para poder seguir la lectura de este proyecto sin perderse y entender el método de

texturización. Para el lector que esté interesado en tener más información sobre el

VRML, se ha preparado un apéndice, en el que se desarrollará en mucha mayor

profundidad la información sobre este lenguaje.

Ya que sabemos algo más sobre el VRML, podemos pasar a analizar el trabajo

que se ha hecho a partir de este lenguaje.

Como ya hemos explicado anteriormente, resulta más conveniente crear los

mundos VRML a partir de herramientas potentes y luego trabajar sobre el código

generado. Esto es lo que hemos ido realizando en la consecución de este proyecto.

Una vez generado el archivo .wrl a través del 3DSMax, pasamos a texturizar,

que se realizará haciendo modificaciones directamente en el código. Es importante

explicar, porque generará una duda razonable, que si se hace todo el trabajo de creación

del laboratorio en 3DSMax, porqué no se texturiza también utilizando este programa. El

problema es que este proceso es imposible realizarlo en el 3DStudio ya que las texturas

que se utilizan en este programa se asocian a objetos de tres dimensiones, y nosotros

texturizamos a partir de dos dimensiones que es la forma de trabajar que tiene el

VRML.



Recordemos el inconveniente que tenía el VRML, que era la acusada falta de un

interfaz gráfico, es decir, que la forma de programar en VRML, es crear código línea a

línea, para lo cual existen editores bastante aceptables como el VRMLPad, o se puede

crear como cualquier archivo de texto y luego guardarlo con la extensión .wrl. Aunque

esta queja de tener que escribir línea a línea parezca una tontería, no lo es. Nosotros

estamos acostumbrados a escribir el código de programas línea a línea, pero suele

hacerse para programación en lenguajes como C, C++, Java, etc. pero recordemos que

estamos tratando con un programa de diseño grafico en tres dimensiones, una vez visto

desde esta perspectiva se debe considerar una rémora importante. Así, a título personal

del alumno, se cree que este lenguaje no despegará totalmente, hasta que no se cree una

buena interfaz gráfica que comulgue perfectamente con la programación en código.

Una vez explicados los pros y los contras, pasemos a ver como se ha texturizado

nuestro laboratorio virtual.

Quizás desde hace algún rato se preguntará el lector, qué es eso de la

texturización, pues es un proceso por el cual, sobre una capa de cualquier elemento

dibujado tanto escribiendo código VRML como exportada desde el 3DSMax, que

tendrá un color homogéneo y liso, se mapea una imagen o textura, sobre esa capa. Es

decir se utiliza un mapa de textura básico, que traza una imagen inmóvil sobre este

objeto. Hemos de señalar que en VRML las texturas deben tener formato de archivo

JPEG o PNG.

La texturización se realiza en el nodo “Appearance” introduciendo un nuevo

nodo que llamado ImageTexture. El nodo contiene tres campos:

• El primero, el url, especifica la imagen para usar en un formato de URL

normal. Se puede especificar una lista de imágenes dentro de corchetes

y el navegador mostrara la primera que encuentre.



• Los otros dos son repeatS y repeatT que controlan si la textura se repite

en la dirección horizontal (S) o en la vertical (T). Estos toman valores

booleanos de TRUE (Verdadero) o FALSE (Falso).

Vamos a ver el código básico de texturización.

appearance Appearance { texture ImageTexture { url "imagen.jpg" repeatS FALSE repeatT FALSE } }

Antes de introducirnos en el trabajo realizado, vamos recalcar un problema

importante que debe conocer el lector, y cualquier interesado en el tema. Se trata del

método de texturización en VRML, por el cual la textura se aplica al objeto entero, y no

a la parte que nosotros queramos. Veamos lo que quiere decir esto con un ejemplo.

Si nosotros queremos dibujar una caja de color rojo en VRML escribiremos el

siguiente código:

#VRML V2.0 utf8 Transform { scale 2 0.5 2 rotation 0 1 0 0.78 translation 0 -1.5 0 children [ Shape { appearance Appearance { material Material { emissiveColor 1 0 0 } } geometry Box {} } ]



El resultado será el siguiente:

Si ahora nosotros texturizamos esa caja con una textura de por ejemplo un

bloque de ladrillo, deberíamos escribir el siguiente código:

#VRML V2.0 utf8 Transform { scale 2 0.5 2 rotation 0 1 0 0.78 translation 0 -1.5 0 children [ Shape { appearance Appearance { texture ImageTexture { url "brick.jpg" } } geometry Box {} } ] }

Obteniendo el siguiente resultado:



Podemos comprobar a simple vista, como nuestra textura de ladrillos se aplica a

toda la caja por igual, es decir se mapea en todas las caras del elemento. Esto nos trae un

problema a nuestra intención de texturizar nuestros elementos del laboratorio, ya que si

por ejemplo tenemos, como más tarde veremos un ejemplo, un Analizador Lógico

Gould, nuestra textura, que será el frontal del aparato, sólo debe aplicarse a la cara que

nosotros tendremos delante, como es evidente, porque es en lo que nos vamos a fijar, así

que no podemos crear un bloque en VRML y ponerle la textura directamente. La

sencilla solución que hemos adoptado es pintar un plano de texturización para cada

elemento que vayamos a texturizar, y poner sobre ellos la textura.

Lo que necesitamos para texturizar un determinado objeto son las propias

texturas. Estas se han obtenido tomando fotografías digitales de todos los elementos del

laboratorio susceptibles de reflejar de manera clara en nuestra representación del

laboratorio, y que vayan a dar un aspecto de realidad fehaciente al mismo, así se toman

fotos de aparatos como los osciloscopios, analizadores, ventanas, pizarras, armarios, etc.

Como es evidente, esto tiene un trabajo previo y posterior, ya que hay que optimizar las

fotografías, tanto en tamaño como en atributos.

Una vez nos hemos hecho con un adecuado álbum de texturas, se pasa al proceso

de ir seleccionando en el código cada uno de los elementos a texturizar y a clasificarlos

por grupos. Es decir, si queremos reflejar fielmente un laboratorio no podemos disponer

de solo un aparato de cada clase, sino de varios. Así se han ido eligiendo un número

aleatorio de osciloscopios, fuentes de tensión, generadores de función etc.

Vamos a ir exponiendo este proceso con un ejemplo para que resulte algo más

sencilla la explicación. Tomemos entonces como ejemplo la texturización de un

Analizador Lógico Gould, uno de los varios que tenemos. Si buscamos en nuestro

código VRML un Analizador Lógico Gould, encontramos la siguiente declaración:

DEF gould Transform { translation -62.17 6.784 26.99 children [ DEF Plano07 Transform { translation -3.669 0.003142 0.01001



rotation 0.5774 -0.5774 0.5774 -4.189 children [ Shape { appearance Appearance { material Material { diffuseColor 0.6824 0.6667 0.5647 } } geometry DEF Plano07-FACES IndexedFaceSet { ccw TRUE solid TRUE coord DEF Plano07-COORD Coordinate { point [ -2.702 0 1.613, -1.351 0 1.613, 0 0 1.613, 1.351 0 1.613, 2.702 0 1.613, -2.702 0 0.8067, -1.351 0 0.8067, 0 0 0.8067, 1.351 0 0.8067, 2.702 0 0.8067, -2.702 0 0, -1.351 0 0, 0 0 0, 1.351 0 0, 2.702 0 0, -2.702 0 -0.8067, -1.351 0 -0.8067, 0 0 -0.8067, 1.351 0 -0.8067, 2.702 0 -0.8067, -2.702 0 -1.613, -1.351 0 -1.613, 0 0 -1.613, 1.351 0 -1.613, 2.702 0 -1.613] } coordIndex [ 5, 0, 6, -1, 1, 6, 0, -1, 6, 1, 7, -1, 2, 7, 1, -1, 7, 2, 8, -1, 3, 8, 2, -1, 8, 3, 9, -1, 4, 9, 3, -1, 10, 5, 11, -1, 6, 11, 5, -1, 11, 6, 12, -1, 7, 12, 6, -1, 12, 7, 13, -1, 8, 13, 7, -1, 13, 8, 14, -1, 9, 14, 8, -1, 15, 10, 16, -1, 11, 16, 10, -1, 16, 11, 17, -1, 12, 17, 11, -1, 17, 12, 18, -1, 13, 18, 12, -1, 18, 13, 19, -1, 14, 19, 13, -1, 20, 15, 21, -1, 16, 21, 15, -1, 21, 16, 22, -1, 17, 22, 16, -1, 22, 17, 23, -1, 18, 23, 17, -1, 23, 18, 24, -1, 19, 24, 18, -1] } } ] },

Esta primera parte de código define la caja que albergará el analizador. Podemos

comprobar que el 3DSMax al crear un bloque no lo define como BOX, como vimos en

el ejemplo anterior, sino que utiliza un nodo mucho más intuitivo como es el

IndexedFaceSet. Este nodo es una colección de caras, que se puede definir

manualmente, y permiten construir los propios objetos con cualquier forma.

DEF Plano14 Transform { translation 100.9 -5.462 -53.93 rotation -0.8968 0.3128 -0.3128 -1.679



children [ Shape { appearance Appearance { texture ImageTexture { url "gould.jpg" } textureTransform TextureTransform { scale 1 1.8 } material Material { diffuseColor 0.651 0.898 0.898 } } geometry DEF Plano14-FACES IndexedFaceSet { ccw TRUE solid TRUE coord DEF Plano14-COORD Coordinate { point [ -3.533 0 2.008, -1.766 0 2.008, 0 0 2.008, 1.766 0 2.008, 3.533 0 2.008, -3.533 0 1.004, -1.766 0 1.004, 0 0 1.004, 1.766 0 1.004, 3.533 0 1.004, -3.533 0 0, -1.766 0 0, 0 0 0, 1.766 0 0, 3.533 0 0, -3.533 0 -1.004, -1.766 0 -1.004, 0 0 -1.004, 1.766 0 -1.004, 3.533 0 -1.004, -3.533 0 -2.008, -1.766 0 -2.008, 0 0 -2.008, 1.766 0 -2.008, 3.533 0 -2.008] } coordIndex [ 5, 0, 6, -1, 1, 6, 0, -1, 6, 1, 7, -1, 2, 7, 1, -1, 7, 2, 8, -1, 3, 8, 2, -1, 8, 3, 9, -1, 4, 9, 3, -1, 10, 5, 11, -1, 6, 11, 5, -1, 11, 6, 12, -1, 7, 12, 6, -1, 12, 7, 13, -1, 8, 13, 7, -1, 13, 8, 14, -1, 9, 14, 8, -1, 15, 10, 16, -1, 11, 16, 10, -1, 16, 11, 17, -1, 12, 17, 11, -1, 17, 12, 18, -1, 13, 18, 12, -1, 18, 13, 19, -1, 14, 19, 13, -1, 20, 15, 21, -1, 16, 21, 15, -1, 21, 16, 22, -1, 17, 22, 16, -1, 22, 17, 23, -1, 18, 23, 17, -1, 23, 18, 24, -1, 19, 24, 18, -1] } } ] }

Este código que hemos presentado es el perteneciente al plano de texturización

utilizado para este analizador en particular. Vemos como se utiliza la textura del

analizador “gould.jpg” que se dispone sobre este plano con lo que por fin se verá el

siguiente resultado.



Texturización de un Gould.

Una vez explicado el método de texturización, hemos de señalar que se ha hecho

hincapié en la idea de haber representado los equipos del laboratorio lo más fielmente

posible, habiendo dejado de un lado el aspecto ambiental del laboratorio. Aún así,

hemos dado forma a todos y cada uno de los elementos de nuestro laboratorio,

evidentemente los aparatos, pero también armarios, ventanas, suelo, pizarra, etc.

Esto nos lleva a que la texturización se convierte en un proceso tedioso, ya que

no solo tenemos un analizador de espectro o un solo Tektronic, sino que tenemos un

número elevado de aparatos. Así, se tomó la determinación de dividir los aparatos por

grupos e ir texturizando cada uno de ellos por separado, además esto resultó ser una idea

acertada, ya que las texturas de una fuente de alimentación, no correspondían al mismo

tamaño que el de un osciloscopio por ejemplo. Por lo tanto, hubo que modificar las

coordenadas de las texturas de forma independiente. Lo mismo ocurrió con las texturas

de ventanas, suelo, etc.

Solo nos queda observar cómo, utilizando este método de trabajo, conseguimos

darle un aspecto mucho más real y cercano a nuestro laboratorio virtual. Podemos verlo

a continuación.



Texturización del Laboratorio

3.3.3 Navegación en el Laboratorio Virtual con VRML.

Llegado a este punto del camino, disponemos de una fantástica maqueta virtual

en tres dimensiones de nuestro laboratorio. El lector se preguntará para qué queremos

esta representación en principio inanimada, y que no nos sirve de nada sino para

contemplarla de manera pasiva. Pues el VRML es el que da respuesta a esta pregunta.

El fundamento principal de creación de un mundo en VRML es la posibilidad de la

navegación en el mismo, como si el usuario se encontrara dentro de él, es decir, crear

una representación lo más fiel a la realidad y que el alumno pueda interactuar con la

misma.

Para ver un mundo VRML, lo primero que se necesita es un navegador. La

mayoría de los navegadores de VRML operarán como plugins para Netscape o Internet

Explorer. Hay también navegadores disponibles para la mayoría de los otros sistemas



operativos. Una vez instalado el plugin, sólo se tendrá que cargar el archivo VRML y se

podrá ver como una página web. Para desarrollar este proyecto de ha utilizado el

navegador Cortona de Parallel Graphics.

Al ejecutar nuestro archivo VRML, éste se verá como una página web

cualquiera, con la salvedad de que se dispone de dos menús de navegación, uno a la

izquierda y otro en la parte inferior.

Pantalla de navegación

A través de estos menús podremos navegar fácilmente a través de nuestro

mundo VRML. Existen cuatro tipos de navegación básicos:

• WALK: Donde el usuario camina normalmente siendo afectado por la

gravedad.

• FLY: Donde el usuario se mueve sin ser afectado por la gravedad.



• STUDY: Donde el usuario permanece inmóvil, pero puede rotar el

mundo para verlo desde distintos ángulos.

• NONE: Donde el usuario no tiene control de movimiento en absoluto.

La elección del tipo de navegación da una gran flexibilidad en la manera de usar

el VRML. Con el campo a WALK o FLY, se podrá tener la sensación de mundo virtual.

Con STUDY se podrá tener un modelo de un coche u otro elemento, de manera que

pueda examinarse fácilmente. Finalmente, NONE, está pensado para poner al usuario a

mirar lo que se pone en frente suya. Este tipo de navegación, aunque parezca poco

práctica, viene muy bien cuando es usada para películas tres 3D, animaciones, o

anuncios.

Estos tipos de navegación, se puede cambiar a lo largo de la ejecución del

archivo mientras se esta viendo, simplemente pinchando en los botones de los menús,

aunque también pueden ser predefinidos por el programador en un nodo llamado

NavigationInfo.

Los demás botones que nos podemos encontrar en el menú son muy intuitivos:

• PLAN: Es el que aparece por defecto y deja al usuario navegar

libremente.

• PAN: Se utiliza para navegar de forma panorámica.

• TURN: Como su propio nombre indica este botón se usa para girar

nuestro mundo. Démonos cuenta que cuando elegimos el modo de

navegación a STUDY, pasa a iluminarse por defecto TURN en vez de

PLAN, pero luego nosotros podemos combinarlos como queramos para

sacarle más partido a nuestro viaje virtual.



• ROLL: Es muy parecida a la forma de navegar en modo TURN, pero en

este caso se gira el mundo virtual que se esta viendo, pero sin un punto

fijo al que darle vueltas.

En el menú de la parte inferior aparecen seis botones de los cuales sólo vamos a

usar los siguientes:

• GOTO: Este botón nos permite elegir un punto cualquiera de nuestro

mundo y acercarnos a él.

• ALIGN: Con este botón podemos alinear el mundo al nivel que nosotros

queramos, es decir alinearnos es un punto cualquiera del objeto.

• RESTORE: Este botón es bastante importante, ya que después de los

giros, avances, retrocesos, y miles de modificaciones que hacemos sobre

el objeto para examinarlo, pinchando en este botón se vuelve a la

posición en la que se presentó inicialmente el mundo VRML.

• FIT: Este botón es parecido a RESTORE. Lo que hace es dejar el

mundo en una posición alejada de forma que lo veamos desde lejos,

pero en la posición en la que nosotros lo tengamos en ese momento, y

no en la posición inicial. Así, si nosotros hemos girado 45º nuestro

mundo y pingamos en FIT, podremos ver nuestro objeto desde un punto

de vista lejano, pero girado los 45º.

Esto es a groso modo, esta es la forma que tenemos para movernos a través de

nuestros mundos virtuales y en concreto de nuestro laboratorio virtual.

Hay una serie de elementos adicionales que pueden añadir más interactividad al

mundo, enlaces, música, películas, animaciones, etc. Nosotros en concreto, hemos

creado una serie de enlaces en nuestro laboratorio, desde los distintos aparatos que se



han dispuesto, los osciloscopios, las fuentes de tensión, etc. para que el alumno al

navegar en el laboratorio pueda tener información de primera mano de lo que está

viendo, pinchando sobre el aparato sobre el cual esté interesado. Así mismo se creará

también el enlace a la práctica virtual de forma que el alumno pueda acceder

directamente desde el portal, o a través de la navegación en el laboratorio.

La manera de realizar esos enlaces dentro de un mundo VRML es bien sencilla.

Se toma un objeto cualquiera de nuestro mundo, al cual se quiere hacer un enlace. A su

definición en lenguaje VRML hay que añadirle el siguiente código.

Anchor {

children [

OBJETO SOBRE EL QUE SE CREA

EL ENLACE

]

description "Descripción del enlace"

url "enlace.html"

}

Así, si tomamos el ejemplo concreto de nuestro Analizador Lógico Gould, se

escribe lo siguiente:

Anchor { children [ DEF gould Transform { translation -62.17 6.784 26.99 children [ DEF Plano07 Transform { translation -3.669 0.003142 0.01001 rotation 0.5774 -0.5774 0.5774 -4.189 children [ Shape { appearance Appearance { material Material { diffuseColor 0.6824 0.6667 0.5647 } }



geometry DEF Plano07-FACES IndexedFaceSet { ccw TRUE solid TRUE coord DEF Plano07-COORD Coordinate { point [ -2.702 0 1.613, -1.351 0 1.613, 0 0 1.613, 1.351 0 1.613, 2.702 0 1.613, -2.702 0 0.8067, -1.351 0 0.8067, 0 0 0.8067, 1.351 0 0.8067, 2.702 0 0.8067, -2.702 0 0, -1.351 0 0, 0 0 0, 1.351 0 0, 2.702 0 0, -2.702 0 -0.8067, -1.351 0 -0.8067, 0 0 -0.8067, 1.351 0 -0.8067, 2.702 0 -0.8067, -2.702 0 -1.613, -1.351 0 -1.613, 0 0 -1.613, 1.351 0 -1.613, 2.702 0 -1.613] } coordIndex [ 5, 0, 6, -1, 1, 6, 0, -1, 6, 1, 7, -1, 2, 7, 1, -1, 7, 2, 8, -1, 3, 8, 2, -1, 8, 3, 9, -1, 4, 9, 3, -1, 10, 5, 11, -1, 6, 11, 5, -1, 11, 6, 12, -1, 7, 12, 6, -1, 12, 7, 13, -1, 8, 13, 7, -1, 13, 8, 14, -1, 9, 14, 8, -1, 15, 10, 16, -1, 11, 16, 10, -1, 16, 11, 17, -1, 12, 17, 11, -1, 17, 12, 18, -1, 13, 18, 12, -1, 18, 13, 19, -1, 14, 19, 13, -1, 20, 15, 21, -1, 16, 21, 15, -1, 21, 16, 22, -1, 17, 22, 16, -1, 22, 17, 23, -1, 18, 23, 17, -1, 23, 18, 24, -1, 19, 24, 18, -1] } } ] } ] description "Analizador Lógico Gould" url "./dswmedia/AnalizadorLogicoGould.html" }

Como podemos observar, para crear este enlace hay que introducir la definición

del objeto Gould dentro del nodo ANCHOR, para que se contemple como un enlace.

Con esto terminamos la descripción del trabajo reanalizado en VRML.



3.4 Aplicación práctica usando MySQL. Administración de

usuarios.

3.4.1 Introducción.

La propia naturaleza de este proyecto, el cual esta enfocado al desarrollo de la

enseñanza a través de la aplicación de las nuevas tecnologías, lleva consigo el hecho de

que todo esta enfocado hacia un grupo de alumnos.

Evidentemente estos alumnos, aún siendo universitarios no dejan de formar un

grupo de usuarios sobre el cual hay que tener un cierto control. Sumando a esto,

tenemos la idea de que el proyecto contempla la realización de una práctica virtual, que

tal vez su nombre nos lleve a error, ya que el concepto “virtual” desvirtúa la grandeza

de esta práctica y es que el alumno desde casa, en su ordenador podrá realizar una

práctica que física y simultáneamente se estará desarrollando en el laboratorio, visto de

forma sencilla esto quiere decir, que si por ejemplo el alumno tiene una disposición de

un circuito con un condensador, resistencias, etc. y el alumno pone en el osciloscopio

virtual una sobre tensión de 20 voltios, la resistencia o el condensador se quemarán

realmente en el laboratorio. Así, todo lo que ocurra en el ordenador del alumno en su

casa de manera virtual, estará ocurriendo de verdad en el laboratorio del L2 de la

Escuela Superior de Ingenieros de Sevilla.

Esto hace que sea totalmente necesario un exhaustivo control y administración

de los usuarios del laboratorio. Es aquí donde comienza a actuar MySQL.

MySQL al contrario de lo que pueda pensar mucha gente no es una base de

datos, sino un gestor de bases de datos relacionales cliente-servidor SQL. MySQL

incluye un servidor SQL, programas cliente para acceder al servidor, herramientas

administrativas y una interfaz de programación para que se puedan escribir programas

propios.



Las características más importantes que podemos destacar de MySQL son las

siguientes:

• Velocidad: MySQL es una de los gestores de bases de datos más rápidos

si no es el más rápido.

• Facilidad de uso: MySQL es un sistema de bases de datos de alto

rendimiento pero relativamente simple y es mucho menos complejo de

configurar y administrar que sistemas más grandes.

• Coste: MySQL es gratuito para la mayoría de los usos internos. Lo que

lo sitúa en una posición muy ventajosa con respecto a otros gestores.

• Capacidad de gestión de lenguajes de consulta: MySQL comprende

SQL (Structured Query Language, Lenguaje de consulta estructurado),

el lenguaje elegido para todos los sistemas de bases de datos modernos.

• Capacidad: Pueden conectarse muchos clientes simultáneamente al

servidor. Los clientes pueden utilizar varias bases de datos

simultáneamente. Pueden acceder de forma interactiva a MySQL

empleando diferentes interfaces que le permiten introducir consultas y

visualizar los resultados: cliente de línea de comando, navegadores web

o clientes de sistema X Window. Además esta disponible una amplia

varias de interfaces de programación para lenguajes como C, Perl, PHP,

etc. Por tanto, tiene la posibilidad de elegir entre usar un software

cliente pre-empaquetado o escribir sus propias aplicaciones a medida.

• Conectividad y seguridad: MySQL esta completamente preparado para

el trabajo en red y las bases de datos pueden ser accedidas desde

cualquier lugar de internet, por lo que puede compartir sus datos con

cualquiera, en cualquier parte. Pero MySQL dispone de control de

acceso, lo cual es ideal para nuestro proyecto.



Hemos de comentar, que evidentemente la forma de comunicarnos con MySQL,

el usar el lenguaje SQL, Lenguaje de Consulta Estructurado. SQL es hoy en día el

estándar en lenguaje de bases de datos, y todos los sistemas importantes lo entienden.

SQL incluye muchas clases diferentes de sentencias, todas diseñadas para hacer posible

la interactuación con nuestra base de datos de modo útil.

3.4.2 Control de acceso al laboratorio.

Como hemos dicho anteriormente, la creación de la práctica virtual lleva consigo

el realizar un control de acceso para los alumnos que quieran ser usuarios del

laboratorio y por ende de la práctica virtual. Esta claro que esta parte del proyecto se

encuentra profundamente ligada al portal de la asignatura Laboratorio de

Instrumentación Electrónica de 5º curso, desde el cual nace este proyecto fin de carrera.

Realizando un profundo estudio de la misma podemos ver que se disponen de

un sistema de acceso de usuarios a los distintos servicios que ofrece este portal. Este

sistema de acceso se basa en una sistema de privilegios sujeto a permisos que se dan a

los alumnos registrados como usuarios. Esta gestión de usuarios se gestiona con la

conjunción de PHP y MySQL. Asociado a cada usuario existen una serie de flags que

representan los privilegios de los que un usuario goza en el sistema. Si un flag está

activo, quiere decir que se le concede al usuario el privilegio por él representado. Así el

usuario tendrá flags para determinados servicios u operaciones, como los siguientes:

• Admin_tool: permite acceso al menú general de administración

• Chpass: el usuario podrá cambiar su contraseña.

• Notas_r: permite acceder al servicio de consulta de notas.



En este punto, nosotros hemos añadido un nuevo permiso llamado “laboratorio”,

de forma que aquel usuario que no posea este permiso, no podrá acceder a realizar la

práctica virtual. Aclararemos que el permiso, se concede en la página del laboratorio de

Instrumentación y no en el propio portal implementado por dos razones: una porque el

sistema de privilegios se encuentra registrado en esta página, y otra porque es evidente

que todo alumno que vaya a acceder o que quiera ser registrado para realizar una

práctica virtual va a ser alumno de la asignatura de 5º curso, con lo cual la tarea re

conceder permisos es mucho más fácil desde aquí.

La adición del nuevo permiso se hace reconstruyendo de nuevo la base de datos

de permisos de MySQL, albergada en el servidor MySQL de la máquina Apache, de la

siguiente forma:

USE usuarios_lie; CREATE TABLE cuentas (user char(16) primary key not null, pass char(32) not null, realname varchar(50), modificado timestamp); CREATE TABLE permisos (user char(16) primary key not null, usuarios_list bool not null default 0, usuarios_edit bool not nulldefault 0, usuarios_del bool not null default 0, usuarios_add bool not null default 0, download bool not null default 0, dudas_r boolnot null default 0, dudas_w bool not null default 0, encuesta_r boolnot null default 0, encuesta_w bool not null default 0, encuesta1bool not null default 0, encuesta2 bool not null default 0, encuesta3 bool not null default 0, notas_r bool not null default 0, notas_w bool not null default 0, noticias_r bool not null default 0, lab_virtual bool not null default 0, noticias_w bool not null default 0, cuestionario_r bool not nulldefault 0, cuestionario_w bool not null default 0, monitores_r boolnot null default 0, monitores_w bool not null default 0, admin_toolbool not null default 0, chpass bool not null default 0);



grant select, insert, update, delete on usuarios_lie.* to csed_admin@localhost ; grant select on usuarios_lie.* to csed@localhost ; insert into cuentas values ('root', md5('j0nj0n'), 'Administrador', NULL); insert into permisos values ('root', 1 ,1,1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);

El sistema de usuarios implantado consta de una base de datos, en nuestro caso

llamada “usuarios_lie” (esta nomenclatura hace referencia al nombre del portal

“Laboratorio de Instrumentación”.

Como es natural, antes de utilizar el fichero anterior deberemos haber creado la

base de datos vacía (mediante: “mysqladmin -u root -p create usuarios_lie”) y haber

definido los usuarios “lie” y “lie_admin” del servidor MySQL. El fichero consta de tres

partes. En la primera se definen las dos tablas que albergarán los datos de usuario:

“cuentas” y “permisos”. En la segunda se asignan los privilegios correspondientes

según la política de seguridad de usuarios MySQL ya vista con anterioridad. Por último,

creamos la cuenta de Administración por excelencia: el superusuario o “root”, el cual

tendrá todos los flags de acceso o permisos activos, como es lógico. Utilizando dicha

cuenta tendremos acceso a la herramienta de administración de usuarios y podremos

crear desde allí nuevos usuarios, asignarle los privilegios que deseemos y en definitiva,

no será necesario utilizar de nuevo la utilidad “mysql” (interfaz de administración) del

paquete MySQL, la cual entendemos, opera a un nivel más bajo que la propia

Aplicación que define nuestro portal.

En la tabla “permisos” se guardarán los flags asociados a los distintos usuarios, y

que definirán el sistema de privilegios. Ambas tablas se encuentran indexadas por

nombre de usuario, ya que éste será único y es por tanto idóneo para realizar este papel.

Una vez se ha constatado que el usuario se encuentra en la base de datos de

alumnos de la asignatura Laboratorio de Instrumentación de 5º, seguidamente se van a

registrar sus datos, nombre de usuario, y su nombre real completo en una nueva base de

datos llamada laboratorio. Además del alias y el nombre completo también quedará

registrada la hora de entrada al laboratorio virtual, de esta forma queda totalmente claro

quien y a que hora se ha producido un acceso al laboratorio. La creación de esta nueva

base de datos, lleva consigo acceder a la consola de MySQL y crear la base de datos y

sus tablas correspondiente. Para ello tenemos hemos creado el siguiente código:

DROP DATABASE usuarios_lvir;

CREATE DATABASE usuarios_lvir;

USE usuarios_lvir;

DROP TABLE IF EXISTS registro;

CREATE TABLE registro (

user varchar(16) NOT NULL default ' ',

realname varchar(50) default NULL,

modificado timestamp(14) NOT NULL,

PRIMARY KEY (user)

) TYPE=MyISAM;

Una vez creada nuestra base de datos solo tenemos que acceder a ella y

rellenarla con los datos del alumno cada vez que se produzca un acceso. Eso tiene lugar

en la página php creada como acceso a la práctica llamada práctica.php.

<?php

// Conectamos con la base de datos de usuarios del laboratorio

conectar_admin();

mysql_select_db($db_laboratorio);

// Creamos la sentencia SQL para añadir el registro de usuario

$sql = "INSERT INTO registro VALUES ('".$SESSION['user']."' ,

'".$SESSION['realname']."')";

mysql_query ($sql,) or die ("Fallo en la inserción de registro.");

?php>



Como vemos, solo tenemos que conectar con la base de datos creada, y a

continuación añadir en la tabla registro, las variables de sesión activas en la página, que

contienen el alias y el nombre real completo del alumno.

Con esto concluye el capítulo dedicado al control y administración de usuarios.

3.5 Práctica Virtual.

3.5.1 Introducción.

En este último apartado vamos a tratar de explicar en que ha consistido la

creación de la práctica virtual. Este trabajo es el resultado de muchas horas empleadas

en poner en común el ideas y planes por dos alumnos, uno de ellos el que realiza este

proyecto fin de carrera. Como ya hemos explicado en varias ocasiones, pero al ser un

dato importante lo vamos a volver a resaltar, es que la naturaleza de este práctica no es

virtual sino real. Lo novedoso es que todo lo que el alumno realice tras su pantalla de

ordenador en su propia casa se verá reflejado de manera física en el Laboratorio de

Instrumentación de la Escuela Superior de Ingenieros.

Introduciremos algo de lo que serán los aspectos técnicos desarrollados en esta

práctica virtual como la conexión entre PC servidor y aparatos del laboratorio a través

del Protocolo GPIB, y el modo de funcionamiento de este servidor cara al mundo

exterior.

Finalmente explicaremos algo de esta consola virtual creada y el modo de operar

frente a ella a la hora de realizar dicha práctica.



3.5.2 Conexión PC Servidor-Laboratorio. Protocolo GPIB.

La instrumentación controlable desde el ordenador, y con ello de los sistemas de

instrumentación, comienza a usarse con la aparición en el año 75 del estándar IEEE-488

conocido habitualmente por el bus GPIB (General Purpose Interface Bus), que como ya

sabemos será estándar que se va a usar para interconexionar los equipos. Los cables que

se usan para ellos son de especiales características y se pueden ver en la figura.

Existen dos maneras de interconectar los equipos de medida a la máquina, en

forma de Estrella figura a, y en forma de Bus figura b, o una mezcla de ambos. Entre

ellas no existe diferencia en cuanto a velocidad o situación crítica, ya que la conexión de

un dispositivo a otro se hace directamente entre los cables y no en el equipo.

a) b)

Posibles formas de interconexión del bus GPIB entre los equipos y la máquina



La conexión con el ordenador se hace mediante una tarjeta GPIB, que debe tener

unas características concretas para que se pueda usar en este sistema. La más importante

es que sea capaz de controlar los dispositivos que envían datos (Talker) y a los que

reciben datos (Listener).

Generalmente casi todas las tarjetas GPIB que existen en el mercado cumplen

este requisito, la mayor diferencia entre ellas suele ser el software que contiene para

configurar la tarjeta y la velocidad de transferencia.

En el mercado existen tarjetas de 100KB/s, 300KB/s y 1GB/s; la primera resulta

insuficiente teniendo en cuenta que hoy en día, las conexiones domésticas suelen ser de

mayor velocidad, y la última resulta excesiva. Nos inclinamos por la segunda ya que

posee una velocidad media bastante aceptable. Con respecto software de la tarjeta, no es

un aspecto crítico para nosotros ya que el entorno que usamos (Labview) se encarga de

toda la gestión de controladores.

Es por ello por lo que adquirimos la tarjeta PCI-GPIB de Measurement Computing

como la que se muestra en la Figura 1.10.

Tarjeta PCI-GPIB de Measurement Computing

El resto de características de esta tarjeta son:

• Soporta el estándar IEEE 488.2.

• Posibilidad de conectar hasta 32 dispositivos.

• Posee 7 interrupciones con capacidad de compartirse.



• Se puede habilitar o deshabilitar la transparencia de las interrupciones

En cada equipo, se puede configurar la dirección GPIB con la que va a ser

reconocido desde la tarjeta.

Para el control de los equipos con la aplicación, el protocolo pasa por tres tipos

de drivers antes de llegar al nivel de la interfaz.

El primero de ellos es el que controla a la tarjeta GPIB propiamente dicha, lo

que proporciona el paso de los datos desde los cables de interconexión al

microprocesador de la máquina. En realidad este controlador no lo proporciona

Labview, sino el fabricante de la tarjeta física (Measurement Computing) junto con la

misma tarjeta. Su instalación es muy sencilla, ya que no es necesario ningún software

adicional al encargarse el Labview del resto de las capas.

El segundo controlador ya lo gestiona Labview y es que interpreta los comandos

SCPI. En las librerías del programa existen funciones de escritura y lectura de

comandos GPIB. Donde hay que especificar todos los aspectos del envío (tiempo máx.

de espera, dirección GPIB del equipo al que va destinado el comando….etc). Estas

funciones pueden ser usadas perfectamente para el desarrollo del proyecto pero

restringiría el sistema únicamente a instrumentos controlados por GPIB.

Por último, y para mejorar lo anterior, Labview contiene unas librerías de

superior nivel que engloban a las funciones de GPIB, son las VISA (Virtual Instrument

Software Architecture). Con ellas nos desentendemos del protocolo de conexión de los

equipos y así, si queremos usar algún equipo con otra conexión o ampliar el sistema con

otro equipo que use, por ejemplo RS-232, no tendremos que cambiar de funciones. En

el Anexo 2 se detallan el resto de protocolos que contiene VISA y demás aspectos

técnicos sobre la librería.



Una vez que tenemos ya la interpretación de los comandos que se usan en la

comunicación con los equipos pasamos a desarrollar la manera de representarlos en la

pantalla.

3.5.3 Consola Virtual. Interfaz gráfico.

El interfaz gráfico es la parte visible del sistema y por tanto hay que

implementarlo con gran detalle. Lo que se pretende es que el usuario encuentre la menor

diferencia posible con los paneles de los instrumentos reales. El sistema debe resultar lo

mas transparente posible al ingeniero o alumno que realice las prácicas, puesto que se

intenta hacer remoto el control de un instrumento, no modificar su aspecto o su

funcionamiento.

Para ello, Labview contiene unas librerías con controles cuyo aspecto imitan a la

perfección los de los instrumentos reales (botones, potenciómetros, selectores…etc).

En la siguiente figura se muestra el aspecto del panel final de la plataforma, a

través del cual se controlan los tres equipos descritos.



Panel frontal que se ha implementado como interfaz gráfico.

Se observa que el panel esta dividido en cinco subpaneles. En ellos se representa

el generador de funciones, la fuente de alimentación, la parte controlable del

osciloscopio (escritura), la webcam y la parte de medida del osciloscopio (lectura). La

distribución de los subpaneles dentro de la pantalla puede variar sin que se altere su

funcionamiento, se pueden colocar de la manera que sea lo más cómo posible para su

visualización y control.

Cada equipo tiene representados únicamente los controles mínimos necesarios

para casi todas las prácticas.

A parte de la representación de los equipos y la webcam, se ha dotado al sistema

de algunas utilidades para facilitar el uso del sistema.

• Barra de mensajes en pantalla.

Esta utilidad sirve para enviar mensajes a las pantallas de los equipos.

Es bastante útil en cuanto que facilita la comunicación con el

laboratorio. Se puede usar para indicar alguna incidencia, para informar

del estado de los equipos, para informar a algún operario o profesor que

se encuentre en la sala... etc.

• Indicador de error en el sistema. Muestra el estado

del sistema en el momento de ejecución. Si algún equipo no esta

disponible o existe algún error en el sistema el indicador pasa a color

rojo y muestra un mensaje de error. Lo que se aconseja en este momento

es hacer un reset.

• Botón de RESET. Sirve para resetear los tres equipos en el

caso que se produzca algún bloqueo, error o se quiera comenzar alguna

medida. Pone todos los equipos en su valor por defecto.



• Menú de ayuda. Es un menú desplegable donde se

muestra una ayuda para cada parte del panel. El menú contiene las

siguientes ayudas: General, Uso del Generador, Uso de la Fuente, Uso

del osciloscopio, Uso del panel de medida y un Acerca de….

Como Labview 7.0 se encuentra instalado en la máquina servidor, el panel del

sistema se muestra su pantalla mientras lo usa el cliente desde su máquina, esto hace

que los controlen varíen a la vez que lo varía el usuario desde la máquina cliente.

Para que el cliente vea esta misma pantalla en su navegador se usa el servidor

Web, que viene descrito en el siguiente apartado.

3.5.4 Servidor Web.

El servidor Web permite que se pueda acceder a la máquina del laboratorio

desde otro equipo mediante Internet, al panel virtual se puede acceder de dos maneras:

• La máquina cliente necesita tener instalado LabView 7.0.Accedemos

mediante la opción Connect to remote Pannel del menú Operate en la

barra de tareas. El programa nos pide la dirección IP del servidor (en

nuestro caso 172.16.2.12 o labinst.gte) y el nombre de la aplicación. De

esta manera podemos tener control absoluto del panel, es decir,

podremos usarlo exactamente igual que si estuviésemos en la máquina

servidor.



Muestra del acceso a un panel remoto desde el cliente

La presentación en la pantalla del LabView cliente es exactamente igual que la

de la máquina local, con la peculiaridad que en un principio, cuando se establece la

conexión, no se puede tocar el instrumento, debemos pedir el control mediante el botón

derecho del ratón en la opción Request Control VI.

Menú de petición de control (botón derecho encima del panel)

Una vez que se ha concedido el control del panel al cliente, en la máquina

servidor aparece un mensaje indicando su nombre o IP. Si queremos ver las máquinas

que están conectadas al servidor y el flujo de datos, el programa contiene una función de

monitorización que lo indica.

Ejemplo de monitorización de una conexión con la máquina manreyes(hdl.gte)

• La otra manera de acceder al panel virtual es sin necesidad de tener

instalado el Labview, a través del navegador Web. En este caso el Web



Server responde presentando el panel en formao JPG, lo que significa

que solo se puede visualizar, nunca controlar. Para ello podemos colocar

en el campo de dirección del navegador dos tipos de direcciones:

http://nombre del PC/.snap?Nombre del vi.vi para una única captura o

http://nombre del PC/.monitor?Nombre del vi.vi para un refresco

periódico de los datos.

La primera forma de acceso no nos interesa para nuestro sistema, ya que sería

inviable que cada usuario necesite tener la licencia del programa. La segunda

obviamente tampoco es aceptable porque no podemos modificar los controles.

Por tanto, lo que buscamos realmente es una mezcla de estas dos formas: que se

pueda tener control absoluto del instrumento pero simplemente desde el navegador. Para

conseguir esto debemos crear una generar un archivo html que contenga una referencia

al archivo .vi e instalar en el navegador del cliente un plug-in que National Instruments

ofrece gratuitamente.

Con esto, al acceder a este archivo html desde el navegador (colocando en el

campo de direcciones http://nombre del PC/Nombre del archivo .html) conseguimos el

mismo comportamiento que si estuviésemos en un panel remoto pero directamente

desde el navegador. Existen plug-in disponibles para Microsoft Explorer, Netscape

Navigator y para sistemas operativos Linux.

LabView contiene un editor del archivo html donde podemos elegir varias

opciones de construcció. Podremos seleccionar si queremos ver la imagen estática, la

imagen con refresco o el control absoluto del instrumento. También podemos hacer que,

una vez cargada la página, se pida el control automáticamente (Request Control).



Muestra de la función para crear el archivo HTML

En la siguiente figura se muestra un ejemplo de cómo se vería el panel de los

instrumentos desde el navegador Microsoft Explorer, con un archivo html de prueba que

ha sido creado por este procedimiento.

Titulo de la página

Titulo de cabecera

Texto de cabecera

Muestra del panel funcionando desde el navegador con la página HTML

Como se puede comprobar, en el caso de que no quepa el panel en la pantalla, se

pueden usar las barras de exploración propias del cuadro, aparte de las del navegador. El

tamaño del cuadro del instrumento se puede variar en el archivo html.

Otra peculiaridad que ofrece el archivo generado es que si el cliente no tiene los

plug-in de visualización del instrumento instalados, se accede automáticamente al sitio

Web de National Instrument para instalarlos. Todo ello se puede ver en la descripción

del archivo, que se muestra a continuación.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN"> <HTML> <HEAD> <TITLE>Titulo de la página creada</TITLE> </HEAD> <BODY > <H1>Titulo de la página creada</H1> Texto de cabecera <TABLE BORDER = 1 BORDERCOLOR = #000000><TR><TD> <OBJECT ID="LabVIEWControl" CLASSID="CLSID:A40B0AD4-B50E-4E58-8A1D-8544233807AB" WIDTH=1200 HEIGHT=730 CODEBASE="ftp://ftp.ni.com/support/labview/runtime/windows/7.0/LVRunTimeEng.exe"> <PARAM name="LVFPPVINAME" value="Proyecto.vi"> <PARAM name="REQCTRL" value=true> <EMBED SRC=".LV_FrontPanelProtocol.rpvi7" LVFPPVINAME="Proyecto.vi" REQCTRL=true TYPE="application/x-labviewrpvi7" WIDTH=1018 HEIGHT=708 PLUGINSPAGE="http://www.ni.com/webappdemos/lv"></EMBED> </OBJECT> </TD></TR></TABLE> 

Referencia al

instrumento virtual (.VI)

Acceso al Website

de los plug-in

Tamaño del cuadro

Texto de cola </BODY> </HTML>



4 CAPÍTULO 4. CONCLUSIONES Y FUTURAS

LÍNEAS DE TRABAJO.

4.1 Introducción.

En este último expondremos que conclusiones se han extraído de la realización

de este proyecto, así como las posibles líneas de trabajo que quedan abiertas o se puedan

abrir en un futuro.

4.2 Conclusiones.

Vamos a presentar a continuación la síntesis de los resultados obtenidos y

comentaremos todo cuanto estimemos necesario para una mejor comprensión del

proyecto y de los objetivos logrados.

• La primera conclusión que en realidad ha significado un objetivo de este

proyecto es que el futuro de la educación pasa por la utilización de las

nuevas tecnologías que día a día nos sorprenden aún más. Cada vez



existen más adelantos en todos los campos, en los que se incluye la

enseñanza y por lo tanto es fundamental aprovechar esa oportunidad que

se nos brinda para mejorar poco a poco el sistema de educación en

general, tanto el universitario como el de niveles inferiores.

• Otra conclusión fundamental es que no hay límites a la hora de

apoyarnos en nuevos medios. A medida que se avanzaba en este

proyecto surgían nuevas ideas que se podían sumar a la lista de mejoras

a realizar y que se contemplarán más tarde en el apartado de futuras

líneas de trabajo. El único límite, evidentemente, ha sido el tiempo

dedicado a la realización del presente proyecto.

• Se hace patente que los medios utilizados han sido desarrollados a bajo

nivel, sobre todo en el tema de las simulaciones virtuales que necesitan

y disponen de muchos recursos de la máquina, y a fecha de hoy el

alumnado en general dispone de equipos de media capacidad. Lo que

nos lleva a una idea algo utópica pero que esta más cerca

cronológicamente hablando de lo que pensamos. Se trata de que si las

nuevas tecnologías hacen que los métodos de educación evolucionen,

deben evolucionar tanto en el campo del personal que enseña como en el

alumnado. Es decir, que debe producirse un progreso del lado del

equipamiento de los alumnos tanto en la Universidad como fuera de

ella. Nuestro país, en este sentido, se encuentra muy atrasado con

respecto a muchos otros, lo que hace inevitable llamar la atención sobre

este aspecto de forma general y que se haga notar como un problema

importante.

• Otro punto importante a resaltar es que este proyecto sumado a la

realización completa de la práctica virtual y el establecimiento de una

consola en forma de triada PC-GPIB-Laboratorio, ha resultado ser un

trabajo innovador en el campo del e-learning. El hecho de realizar una

conexión física desde cualquier estación de trabajo en cualquier lugar



del mundo con el laboratorio es el resultado de la unión de dos

ambiciosos proyectos uno de ellos el presente proyecto.

• Pensando ya en concreto en este proyecto, hemos podido observar

varias determinaciones. La administración de cualquier grupo numeroso

de personas, en este caso alumnos, hace necesario un control, ya que si

no resultaría imposible un desarrollo normal de todas las actividades, y

más, si nos ceñimos a la realización de una práctica que solo puede ser

realizada por un alumno en el tiempo. Así, ha resultado un acierto

utilizar MySQL como herramienta de administración de bases de datos

de alumnos.

• Por último y desde el punto de vista personal, el autor de este proyecto

ha adquirido conocimientos y habilidad en desarrollo de diversas

aplicaciones PHP. También ha desarrollado habilidades como

administrador de bases de datos MySQL, sin olvidar por último el

campo de diseño mundos virtuales 3D. Han resultado ser tareas muy

enriquecedoras, así como también lo es la propia realización del

proyecto en sí. Esto último ha supuesto un verdadero ejercicio del

intelecto y ha contribuido al desarrollo de cualidades técnicas y

aptitudes como la capacidad de planteamiento de nuevas alternativas o

la creatividad. Todo esto podrá utilizarlo el alumno autor del proyecto

como gran experiencia de cara al mundo laboral que le espera a término

de la carrera.



4.3 Futuras líneas de trabajo.

Como hemos indicado en el apartado anterior, si por algo se caracteriza este

proyecto es el ilimitado conjunto de mejoras y propuestas que se pueden ir añadiendo.

Es evidente que con una buena planificación, la consecución de este proyecto se puede

convertir en una tarea de varios años en los que las mejoras sean continuas. Para ello se

dan a continuación algunas ideas.

• En este proyecto se plantea la realización de una práctica virtual, y en

realidad es eso una única práctica. Como dijimos este proyecto tiene su

pilar básico en la asignatura de Laboratorio de Instrumentación de 5º de

Ing. de Telecomunicaciones, y actualmente, en esta asignatura se

realizan entre diez y quince práctica en todo el curso. Es por esto que la

primera línea de trabajo de este proyecto en conjunto con el de la

realización de la práctica es ampliar el número de prácticas que se

puedan realiza vía Internet al conjunto total de las de la asignatura.

Tendría así que modificarse el portal diseñado, ya que éste da cabida a

sólo una práctica y habría que implementar alguna forma de

administración de las prácticas.

• Otro gran reto, pensando esta vez en el diseño 3D es aportar un mapa

virtual mucho más grande, lo cual sería un proyecto muy ambicioso el

poder crear el Laboratorio completo, y por extensión crear toda la

representación de la Escuela Superior de Ingenieros. Este sería un paso

muy grande y que traería consecuencias magníficas no solo para la

asignatura en cuestión sino para el conjunto de la docencia en la escuela.

Así mismo y todavía centrados en el tema del diseño, hemos de

proponer también que se podría realizar un diseño del laboratorio mucho

más detallado y minucioso de forma que el alumno identificara

perfectamente cada centímetro del laboratorio con la representación

virtual.



• Tratando ahora la administración de usuarios se hecha en falta, y de

hecho se habría creado con algo de más tiempo, alguna forma de gestión

de la base de datos de alumnos usuarios del laboratorio, de manera que

se pudiera presentar al administrador una interfaz web, donde pudiera

observar con facilidad los cambios y actualizaciones de la dicha base de

datos. Hemos de decir que por el momento esa administración debe

hacerse a través de la consola MySQL, pero que no resulta en ninguna

forma complicado realizar cualquier tipo consulta. En el apéndice

dedicado a esta materia se dejarán las premisas para realizar las

consultas idóneas para la administración de los alumnos.

• Por último y no menos importante, se hecha en falta una comunicación

directa entre al alumno y el profesor. Todos los aspectos que se recogen

en este proyecto llevan al alumno a ser el único protagonista de los

“hechos”, y hemos de recordar que en este proyecto se trata de ayudar a

la implementación de portales educacionales, es decir que la presencia

del profesor se hace también necesaria, aunque contradiga esto algunas

de las premisas del inicio del proyecto. Es por esto que se han pensado

varias líneas de trabajo que se pueden añadir a las mejoras propuestas.

Una de ellas es la creación una tutoría interactiva, una especie de chat,

en la que alumnos y profesor puedan comentar dudas, problemas, etc.

Sumado a esto también se ha pensado en crear una pizarra virtual. De

siempre hemos tenido presente que el profesor lleva solidario a él, una

pizarra y tiza, proponemos así, que se le de cabida en este proyecto. Así

el profesor podrá utilizarla como la pizarra de antaño y poder ayudarse

de ella en las explicaciones que imparta a través de la red.



5 APÉNDICE A. LENGUAJE VRML.

5.1 Introducción.

El objetivo de este apéndice es profundizar en el lenguaje utilizado para la

creación de los mundo virtuales, el VRML.

5.2 Nodos VRML.

Vamos a presentar a continuación todos los nodos con los que se cuentan en

VRML. Esta es una guía bastante interesante para todos aquellos que quieran comenzar

a realizar sus primeros diseños en VRML.

Anchor

Anchor { eventIn MFNode addChildren eventIn MFNode removeChildren exposedField MFNode children [] exposedField SFString description "" exposedField MFString parameter [] exposedField MFString url [] field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1 }



Appearance

Appearance { exposedField SFNode material NULL exposedField SFNode texture NULL exposedField SFNode textureTransform NULL } AudioClip

AudioClip { exposedField SFString description "" exposedField SFBool loop FALSE exposedField SFFloat pitch 1.0 exposedField SFTime startTime 0 exposedField SFTime stopTime 0 exposedField MFString url [] eventOut SFTime duration_changed eventOut SFBool isActive } Background

Background { eventIn SFBool set_bind exposedField MFFloat groundAngle [] exposedField MFColor groundColor [] exposedField MFString backUrl [] exposedField MFString bottomUrl [] exposedField MFString frontUrl [] exposedField MFString leftUrl [] exposedField MFString rightUrl [] exposedField MFString topUrl [] exposedField MFFloat skyAngle [] exposedField MFColor skyColor [0 0 0] eventOut SFBool isBound } Billboard

Billboard { eventIn MFNode addChildren eventIn MFNode removeChildren exposedField SFVec3f axisOfRotation 0 1 0 exposedField MFNode children [] field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1 } Box

Box { field SFVec3f size 2 2 2 } Collision



Collision { eventIn MFNode addChildren eventIn MFNode removeChildren exposedField MFNode children [] exposedField SFBool collide TRUE field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1 field SFNode proxy NULL eventOut SFTime collideTime } Color

Color { exposedField MFColor color [] } ColorInterpolator

ColorInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [] exposedField MFFloat keyValue [] eventOut SFFloat value_changed } Cone

Cone { field SFBool bottom TRUE field SFFloat bottomRadius 1 field SFFloat height 2 field SFBool side TRUE } Coordinate

Coordinate { exposedField MFVec3f point [] } CoordinateInterpolator

CoordinateInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [] exposedField MFVec3f keyValue [] eventOut MFVec3f value_changed } Cylinder

Cylinder { field SFBool bottom TRUE field SFFloat height 2 field SFFloat radius 1



field SFBool side TRUE field SFBool top TRUE } CylinderSensor

CylinderSensor { exposedField SFBool autoOffset TRUE exposedField SFFloat diskAngle 0.262 exposedField SFBool enabled TRUE exposedField SFFloat maxAngle -1 exposedField SFFloat minAngle 0 exposedField SFFloat offset 0 eventOut SFBool isActive eventOut SFRotation rotation_changed eventOut SFVec3f trackPoint_changed } DirectionalLight

DirectionalLight { exposedField SFFloat ambientIntensity 0 exposedField SFColor color 1 1 1 exposedField SFVec3f direction 0 0 -1 exposedField SFFloat intensity 1 exposedField SFBool on TRUE } ElevationGrid

ElevationGrid { eventIn MFFloat set_height exposedField SFNode color NULL exposedField SFNode normal NULL exposedField SFNode texCoord NULL field MFFloat height [] field SFBool ccw TRUE field SFBool colorPerVertex TRUE field SFFloat creaseAngle 0 field SFBool normalPerVertex TRUE field SFBool solid TRUE field SFInt32 xDimension 0 field SFFloat xSpacing 0.0 field SFInt32 zDimension 0 field SFInt32 zSpacing 0.0 } Extrusion

Extrusion { eventIn MFVec3f set_crossSection eventIn MFRotation set_orientation eventIn MFVec2f set_scale eventIn MFVec3f set_spine field SFBool beginCap TRUE



field SFBool ccw TRUE field SFBool convex TRUE field SFFloat creaseAngle 0 field MFVec2f crossSection [1 1, 1 -1, -1 -1, -1 1, 1 1] field SFBool endCap TRUE field MFRotation orientation 0 0 1 0 field MFVec2f scale 1 1 field SFBool solid TRUE field MFVec3f spine [0 0 0, 0 1 0] } Fog

Fog { eventIn SFBool set_bind exposedField SFColor color 1 1 1 exposedField SFString fogType "LINEAR" exposedField SFFloat visibilityRange 0 eventOut SFBool isBound FontStyle

FontStyle { field MFString family "SERIF" field SFBool horizontal TRUE field MFString justify "BEGIN" field SFString language "" field SFBool leftToRight TRUE field SFFloat size 1.0 field SFFloat spacing 1.0 field SFString style "PLAIN" field SFBool topToBottom TRUE } Group

Group { eventIn MFNode addChildren eventIn MFNode removeChildren exposedField MFNode children [] field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1 } ImageTexture

ImageTexture { exposedField MFString url [] field SFBool repeatS TRUE field SFBool repeatT TRUE } IndexedFaceSet

IndexedFaceSet { eventIn MFInt32 set_colorIndex eventIn MFInt32 set_coordIndex



eventIn MFInt32 set_normalIndex eventIn MFInt32 set_texCoordIndex exposedField SFNode color NULL exposedField SFNode coord NULL exposedField SFNode normal NULL exposedField SFNode texCoord NULL field SFBool ccw TRUE field MFInt32 colorIndex [] field SFBool colorPerVertex TRUE field SFBool convex TRUE field MFInt32 coordIndex [] field SFFloat creaseAngle 0 field MFInt32 normalIndex [] field SFBool normalPerVertex TRUE field SFBool solid TRUE field MFInt32 texCoordIndex [] } IndexedLineSet

IndexedLineSet { eventIn MFInt32 set_colorIndex eventIn MFInt32 set_coordIndex exposedField SFNode color NULL exposedField SFNode coord NULL field MFInt32 colorIndex [] field SFBool colorPerVertex TRUE field MFInt32 coordIndex [] } Inline

Inline { exposedField MFString url [] field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1 } LOD

LOD { exposedField MFNode level [] field SFVec3f center 0 0 0 field MFFloat range [] } Material

Material { exposedField SFFloat ambientIntensity 0.2 exposedField SFColor diffuseColor 0.8 0.8 0.8 exposedField SFColor emissiveColor 0 0 0 exposedField SFFloat shininess 0.2 exposedField SFColor specularColor 0 0 0 exposedField SFFloat transparency 0



} MovieTexture

MovieTexture { exposedField SFBool loop FALSE exposedField SFFloat speed 1 exposedField SFTime startTime 0 exposedField SFTime stopTime 0 exposedField MFString url [] field SFBool repeatS TRUE field SFBool repeatT TRUE eventOut SFTime duration_changed eventOut SFBool isActive } NavigationInfo

NavigationInfo { eventIn SFBool set_bind exposedField MFFloat avatarSize [0.25, 1.6, 0.75] exposedField SFBool headlight TRUE exposedField SFFloat speed 1.0 exposedField MFString type "WALK" exposedField SFFloat visibilityLimit 0.0 eventOut SFBool isBound } Normal

Normal { exposedField MFVec3f vector [] } NormalInterpolator

NormalInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [] exposedField MFVec3f keyValue [] eventOut MFVec3f value_changed } OrientationInterpolator

OrientationInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [] exposedField MFRotation keyValue [] eventOut SFRotation value_changed } PixelTexture

PixelTexture { exposedField SFImage image 0 0 0 field SFBool repeatS TRUE



field SFBool repeatT TRUE } PlaneSensor

PlaneSensor { exposedField SFBool autoOffset TRUE exposedField SFBool enabled TRUE exposedField SFVec2f maxPosition -1 -1 exposedField SFVec2f minPosition 0 0 exposedField SFVec3f offset 0 0 0 eventOut SFBool isActive eventOut SFVec3f trackPoint_changed eventOut SFVec3f translation_changed } PointLight

PointLight { exposedField SFFloat ambientIntensity 0 exposedField SFVec3f attenuation 1 0 0 exposedField SFColor color 1 1 1 exposedField SFFloat intensity 1 exposedField SFVec3f location 0 0 0 exposedField SFBool on TRUE exposedField SFFloat radius 100 } PointSet

PointSet { exposedField SFNode color NULL exposedField SFNode coord NULL } PositionInterpolator

PositionInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [] exposedField MFVec3f keyValue [] eventOut SFVec3f value_changed } ProximitySensor

ProximitySensor { exposedField SFVec3f center 0 0 0 exposedField SFVec3f size 0 0 0 exposedField SFBool enabled TRUE eventOut SFBool isActive eventOut SFVec3f position_changed eventOut SFRotation orientation_changed eventOut SFTime enterTime eventOut SFTime exitTime }



ScalarInterpolator

ScalarInterpolator { eventIn SFFloat set_fraction exposedField MFFloat key [] exposedField MFFloat keyValue [] eventOut SFFloat value_changed } Script

Script { exposedField MFString url [] field SFBool directOutput FALSE field SFBool mustEvaluate FALSE Also, any number of the following: eventIn Type eventInName field Type fieldName default value eventOut Type eventOutName } Shape

Shape { exposedField SFNode appearance NULL exposedField SFNode geometry NULL } Sound

Sound { exposedField SFVec3f direction 0 0 1 exposedField SFFloat intensity 1 exposedField SFVec3f location 0 0 0 exposedField SFFloat maxBack 10 exposedField SFFloat maxFront 10 exposedField SFFloat minBack 1 exposedField SFFloat minFront 1 exposedField SFFloat priority 0 exposedField SFNode source NULL field SFBool spatialize TRUE } Sphere

Sphere { field SFFloat radius 1 } SphereSensor

SphereSensor { exposedField SFBool autoOffset TRUE exposedField SFBool enabled TRUE



exposedField SFRotation offset 0 1 0 0 eventOut SFBool isActive eventOut SFRotation rotation_changed eventOut SFVec3f trackPoint_changed } SpotLight

SpotLight { exposedField SFFloat ambientIntensity 0 exposedField SFVec3f attenuation 1 0 0 exposedField SFFloat beamWidth 1.570796 exposedField SFColor color 1 1 1 exposedField SFFloat cutOffAngle 0.785398 exposedField SFVec3f direction 0 0 -1 exposedField SFFloat intensity 1 exposedField SFVec3f location 0 0 0 exposedField SFBool on TRUE exposedField SFFloat radius 100 } Switch

Switch { exposedField MFNode choice [] exposedField SFInt32 whichChoice -1 } Text

Text { exposedField MFString string [] exposedField SFNode fontStyle NULL exposedField MFFloat length [] exposedField SFFloat maxExtent 0.0 } TextureCoordinate

TextureCoordinate { exposedField MFVec2f point [] } TextureTransform

TextureTransform { exposedField SFVec2f center 0 0 exposedField SFFloat rotation 0 exposedField SFVec2f scale 1 1 exposedField SFVec2f translation 0 0 } TimeSensor

TimeSensor { exposedField SFTime cycleInterval 1



exposedField SFBool enabled TRUE exposedField SFBool loop FALSE exposedField SFTime startTime 0 exposedField SFTime stopTime 0 eventOut SFTime cycleTime eventOut SFFloat fraction_changed eventOut SFBool isActive eventOut SFTime time } TouchSensor

TouchSensor { exposedField SFBool enabled TRUE eventOut SFVec3f hitNormal_changed eventOut SFVec3f hitPoint_changed eventOut SFVec2f hitTexCoord_changed eventOut SFBool isActive eventOut SFBool isOver eventOut SFTime touchTime } Transform

Transform { eventIn MFNode addChildren eventIn MFNode removeChildren exposedField SFVec3f center 0 0 0 exposedField MFNode children [] exposedField SFRotation rotation 0 0 1 0 exposedField SFVec3f scale 1 1 1 exposedField SFRotation scaleOrientation 0 0 1 0 exposedField SFVec3f translation 0 0 0 field SFVec3f bboxCenter 0 0 0 field SFVec3f bboxSize -1 -1 -1 } Viewpoint

Viewpoint { eventIn SFBool set_bind exposedField SFFloat fieldOfView 0.785398 exposedField SFBool jump TRUE exposedField SFRotation orientation 0 0 1 0 exposedField SFVec3f position 0 0 10 field SFString description "" eventOut SFTime bindTime eventOut SFBool isBound } VisibilitySensor

VisibilitySensor { exposedField SFVec3f center 0 0 0 exposedField SFBool enabled TRUE



exposedField SFVec3f size 0 0 0 eventOut SFTime enterTime eventOut SFTime exitTime eventOut SFBool isActive } WorldInfo

WorldInfo { field MFString info [] field SFString title "" }

6 APÉNDICE B. CÓDIGO DEL PORTAL

IMPLEMENTADO.

6.1 Introducción.

A continuación vamos a presentar el código del portal implementado

“Laboratorio Virtual”.

6.2 laboratorio.php

<html> <head> <title>Laboratorio Virtual</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#000000" text="#999999" link="#999999"> <div align="left"> <table width="939" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="15" height="64"></td> <td width="11"></td> <td width="16"></td>

<td valign="top" colspan="2"><img src="gte_small_ani.gif" width="105" height="58"></td> <td width="63"></td> <td colspan="6" rowspan="2" valign="top"><img src="baner.jpg" width="569" height="115"><img src="vrml97.gif" width="120" height="30"></td> <td width="17"></td> </tr> <tr> <td height="58"></td> <td></td> <td valign="top" colspan="2"> <div align="center">Departamento de Ingeniería Electrónica</div> </td> <td width="16"></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td></td> <td width="89"></td> <td></td> <td></td> <td valign="top" colspan="6" rowspan="2"> <hr> </td> <td></td> </tr> <tr> <td height="24"></td> <td colspan="4" rowspan="22" valign="top"><img src="cabecera_n.gif" width="132" height="334"></td> <td></td> <td></td> </tr> <tr> <td height="11"></td> <td></td> <td width="158"></td> <td width="46"></td> <td width="272"></td> <td width="115"></td> <td width="29"></td> <td width="92"></td> <td></td>

</tr> <tr> <td height="18"></td> <td></td> <td colspan="7" valign="top"> El Laboratorio Virtual de Instrumentación Electrónica es una herramienta creada para poder </td> </tr> <tr> <td height="19"></td> <td></td> <td colspan="7" valign="top">realizar prácticas de forma remota desde cualquier ordenador. También ofrece la posibilidad </td> </tr> <tr> <td height="18"></td> <td></td> <td colspan="7" valign="top"> de conocer el laboratorio y familiarizarte con el material que manejarás durante el curso.</td> </tr> <tr> <td height="37"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="10"></td> <td></td> <td rowspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="155" height="30" id="gbgb"> <param name=movie value="button9.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#000000">

</object></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="20"></td> <td></td> <td colspan="5" valign="top">Aquí podras obtener información del instrumental que encontrarás en el laboratorio</td> <td></td> </tr> <tr> <td height="11"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td rowspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="155" height="30"> <param name="BASE" value="."> <param name=movie value="button11.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#000000"> <embed src="button11.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="155" height="30" bgcolor="#000000" base="."> </embed> </object></td> <td></td> <td></td> <td></td> <td></td> <td></td>

<td></td> </tr> <tr> <td height="20"></td> <td></td> <td colspan="4" valign="top">Realiza una de las prácticas del laboratorio sin moverte de tu casa</td> <td></td> <td></td> </tr> <tr> <td height="11"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td rowspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="155" height="30"> <param name="BASE" value="."> <param name=movie value="button12.swf"> <param name=quality value=high> <param name="BGCOLOR" value="#000000"> <embed src="button12.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="155" height="30" bgcolor="#000000" base="."> </embed> </object></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="20"></td> <td></td> <td colspan="3" valign="top">Para cualquier

duda contacta con el Webmaster</td> <td></td> <td></td> <td></td> </tr> <tr> <td height="11"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td rowspan="3" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="155" height="30"> <param name=movie value="button13.swf"> <param name=quality value=high> <param name="BASE" value="."> <param name="BGCOLOR" value="#000000"> <embed src="button13.swf" base="." quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="155" height="30" bgcolor="#000000"> </embed> </object></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="19"></td> <td></td> <td colspan="4" valign="top">Aquí encontrarás enlaces a páginas y programas de interés</td> <td></td> <td></td> </tr>

<tr> <td height="12"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="66"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="19"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="4"></td> <td colspan="7" rowspan="2" valign="top">© Federico José Barrero / Miguel Ángel Moreno</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="15"></td>

<td></td> <td colspan="4" rowspan="2" valign="top">Página optimizada para resolución 1024x768</td> </tr> <tr> <td height="3"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html>

6.3 instrumentos.html

<html> <head> <title>Laboratorio Virtual</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <SCRIPT LANGUAGE="JavaScript1.1"> var activado1=new Image(); activado1.src="Multi-FLUKE.jpg"; var activado2=new Image(); activado2.src="Multi-HM8011.jpg"; var activado3=new Image(); activado3.src="osciloscopio-hm.jpg"; var activado4=new Image(); activado4.src="Osciloscopio-Pm3375.jpg"; var activado5=new Image(); activado5.src="generador HM.jpg"; var activado6=new Image(); activado6.src="Generador-PM.jpg"; var activado7=new Image(); activado7.src="Fuente-HM8040.jpg"; var activado8=new Image(); activado8.src="Fuente-PE1542.jpg"; var activado9=new Image();



activado9.src="AEspectros-Tektronix2711.jpg"; var activado10=new Image(); activado10.src="AEspectro-HM5010.jpg"; var activado11=new Image(); activado11.src="ALogico- Gould.jpg"; var activado12=new Image(); activado12.src="ALogico Tektronix 1230.jpg"; var activado13=new Image(); activado13.src="ALogico-3001 GPX.jpg"; var desactivado= new Image(); desactivado.src="nulo.jpg"; function activar1(nombreImagen) { document[nombreImagen].src=activado1.src; } function activar2(nombreImagen) { document[nombreImagen].src=activado2.src; } function activar3(nombreImagen) { document[nombreImagen].src=activado3.src; } function activar4(nombreImagen) { document[nombreImagen].src=activado4.src; } function activar5(nombreImagen) { document[nombreImagen].src=activado5.src; } function activar6(nombreImagen) { document[nombreImagen].src=activado6.src; } function activar7(nombreImagen) { document[nombreImagen].src=activado7.src; } function activar8(nombreImagen) { document[nombreImagen].src=activado8.src; } function activar9(nombreImagen) { document[nombreImagen].src=activado9.src; } function activar10(nombreImagen) { document[nombreImagen].src=activado10.src; } function activar11(nombreImagen) { document[nombreImagen].src=activado11.src; } function activar12(nombreImagen) { document[nombreImagen].src=activado12.src; }

function activar13(nombreImagen) { document[nombreImagen].src=activado13.src; } function desactivar(nombreImagen) { document[nombreImagen].src=desactivado.src; } </SCRIPT> <ul type="disc"> <li> <ahref="./dswmedia/Multimetro%20Fluke%2037.htm" onMouseOver="activar1('prueba');" onMouseOut="desactivar('prueba');"> Multimetro Fluke 37</a> </li> <li> <ahref="./dswmedia/Multimetro%20HM8011_3.htm"onMouseOver="activar2('prueba');" onMouseOut="desactivar('prueba');"> Multimetro HM-8010</a></li> <li> <ahref="./dswmedia/osciloscopio%20HM408.htm"onMouseOver="activar3('prueba');" onMouseOut="desactivar('prueba');"> Osciloscopio HM-408</a></li> <li> <ahref="./dswmedia/Osciloscopio%20PM3335-3375.htm"onMouseOver="activar4('prueba');" onMouseOut="desactivar('prueba');"> Osciloscopio PM-3375</a></li> <li> <ahref="./dswmedia/Generador%20Funciones%20HM8030.htm"onMouseOver="activar5('prueba');" onMouseOut="desactivar('prueba');"> Generador de funciones HM-8030</a></li> <li> <ahref="./dswmedia/Generador%20Funciones%20PM5135.htm"onMouseOver="activar6('prueba');" onMouseOut="desactivar('prueba');"> Generador de funciones PM-5135</a></li> <li> <ahref="./dswmedia/TripleFuenteHM8040.htm"onMouseOver="activar7('prueba');" onMouseOut="desactivar('prueba');">

Fuente Alimentación HM-8040</a></li> <li> <ahref="./dswmedia/Triple%20Fuente%20PE.htm"onMouseOver="activar8('prueba');" onMouseOut="desactivar('prueba');"> Fuente Alimentación PE-1542</a></li> <li> <ahref="./dswmedia/Analizador%20Espectro%20Tektronix_2711.htm"onMouseOver="activar9('prueba');" onMouseOut="desactivar('prueba');"> Analizador de espectros Tektronix-2711</a></li> <li> <ahref="./dswmedia/Analizador%20espectro%20HM5010.htm"onMouseOver="activar10('prueba');" onMouseOut="desactivar('prueba');"> Analizador de espectros HM-5010</a></li> <li> <ahref="./dswmedia/Analiz_L%F3gico%20gould.htm"onMouseOver="activar11('prueba');" onMouseOut="desactivar('prueba');"> Analizador lógico Gould-K25</a></li> <li> <ahref="./dswmedia/Analizador%20Log%20Tektronix%20%201230.htm"onMouseOver="activar12('prueba');" onMouseOut="desactivar('prueba');"> Analizador lógico Tektronix-1230</a></li> <li> <ahref="./dswmedia/Analizador%20Logico%20Tektronix.htm"onMouseOver="activar13('prueba');" onMouseOut="desactivar('prueba');"> Analizador lógico Tektronix-3001 GPX</a></li> </ul> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>

<tr> <td height="277"></td> <td></td> <td></td> <td colspan="2" valign="top"><a href="http://tectronic.com" onMouseOver="activar1('prueba');" onMouseOut="desactivar('prueba');"><img name="prueba" src="nulo.JPG" border=0 width="292" height="174"></a></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="51"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="4"></td> <td colspan="6" rowspan="2" valign="top">© Federico José Barrero / Miguel Ángel Moreno</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="15"></td> <td></td>

<td></td> <td></td> <td colspan="3" rowspan="2" valign="top">Página optimizada para resolución 1024x768</td> </tr> <tr> <td height="3"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html>

6.4 practica.php

<?php require('../config/config.php'); check_privs('lab_virtual'); ?> <html> <head> <title>Laboratorio Virtual</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#000000" text="#999999" link="#999999"> <?php // Conectamos con la base de datos de usuarios del laboratorio conectar_admin(); mysql_select_db($db_laboratorio); // Creamos la sentencia SQL para añadir el registro de usuario $sql = "INSERT INTO registro VALUES ('".$SESSION['user']."' , '".$SESSION['realname']."')"; mysql_query ($sql,) or die ("Fallo en la inserción de registro."); ?>

<div align="left"> <table width="939" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="15" height="64"></td> <td width="11"></td> <td width="16"></td> <td valign="top" colspan="2"><img src="gte_small_ani.gif" width="105" height="58"></td> <td width="63"></td> <td colspan="3" rowspan="2" valign="top"><img src="baner.jpg" width="569" height="115"><img src="vrml97.gif" width="120" height="30"></td> <td width="17"></td> </tr> <tr> <td height="58"></td> <td></td> <td valign="top" colspan="2"> <div align="center">Departamento de Ingeniería Electrónica</div> </td> <td width="16"></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td></td> <td width="89"></td> <td></td> <td></td> <td valign="top" colspan="3" rowspan="2"> <hr> </td> <td></td> </tr> <tr> <td height="24"></td> <td colspan="4" rowspan="2" valign="top"><img src="cabecera_n.gif" width="132" height="334"></td> <td></td> <td></td> </tr>

<tr> <td height="369"></td> <td></td> <td width="204"></td> <td width="272"></td> <td width="236"></td> <td></td> </tr> <tr> <td height="19"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="4"></td> <td colspan="6" rowspan="2" valign="top">© Federico José Barrero / Miguel Ángel Moreno</td> <td></td> <td></td> <td></td> </tr> <tr> <td height="15"></td> <td></td> <td colspan="2" rowspan="2" valign="top">Página optimizada para resolución 1024x768</td> </tr> <tr> <td height="3"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body>

</html>

6.5 contactar.php

<html> <head> <title>Laboratorio Virtual</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> a{text-decoration:none} </style> </head> <body bgcolor="#000000" text="#999999" link="#999999"> <div align="left"> <table width="939" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="15" height="64"></td> <td width="11"></td> <td width="16"></td> <td valign="top" colspan="2"><img src="gte_small_ani.gif" width="105" height="58"></td> <td width="63"></td> <td colspan="5" rowspan="2" valign="top"><img src="baner.jpg" width="569" height="115"><img src="vrml97.gif" width="120" height="30"></td> <td width="17"></td> </tr> <tr> <td height="58"></td> <td></td> <td valign="top" colspan="2"> <div align="center">Departamento de Ingeniería Electrónica</div> </td> <td width="16"></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td></td> <td width="89"></td> <td></td>

<td></td> <td valign="top" colspan="5" rowspan="2"> <hr> </td> <td></td> </tr> <tr> <td height="24"></td> <td colspan="4" rowspan="8" valign="top"><img src="cabecera_n.gif" width="132" height="334"></td> <td></td> <td></td> </tr> <tr> <td height="10"></td> <td></td> <td width="204"></td> <td width="272"></td> <td width="157"></td> <td width="17"></td> <td width="62"></td> <td></td> </tr> <tr> <td height="23"></td> <td></td> <td colspan="5" valign="top">Para contactar, solicitar información, o aclarar cualquier tipo de duda sobre el laboratorio puede utilizar:</td> <td></td> </tr> <tr> <td height="10"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="61"></td> <td></td> <td colspan="3" valign="top"> <ul> <li>Teléfono +34 954487368 </li>

<li>Fax +34 954487373 </li> </ul> </td> <td></td> <td></td> <td></td> </tr> <tr> <td height="29"></td> <td></td> <td colspan="3" valign="top">O enviar un e-mail a la dirección:</td> <td></td> <td></td> <td></td> </tr> <tr> <td height="51"></td> <td></td> <td colspan="4" valign="top"> <ul> <li>Correo Electrónico: <a href="mailto:[email protected]">[email protected]</a> </li> </ul> </td> <td></td> <td></td> </tr> <tr> <td height="173"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="51"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>

<td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="4"></td> <td colspan="6" rowspan="2" valign="top">© Federico José Barrero / Miguel Ángel Moreno</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="15"></td> <td></td> <td colspan="4" rowspan="2" valign="top">Página optimizada para resolución 1024x768</td> </tr> <tr> <td height="3"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html>

6.6 enlaces.php

<html> <head> <title>Laboratorio Virtual</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style>

a{text-decoration:none} </style> </head> <body bgcolor="#000000" text="#999999" link="#999999"> <div align="left"> <table width="939" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="15" height="64"></td> <td width="11"></td> <td width="16"></td> <td valign="top" colspan="2"><img src="gte_small_ani.gif" width="105" height="58"></td> <td width="63"></td> <td colspan="12" rowspan="2" valign="top"><img src="baner.jpg" width="569" height="115"><img src="vrml97.gif" width="120" height="30"></td> <td width="17"></td> </tr> <tr> <td height="58"></td> <td></td> <td valign="top" colspan="2"> <div align="center">Departamento de Ingeniería Electrónica</div> </td> <td width="16"></td> <td></td> <td></td> </tr> <tr> <td height="9"></td> <td></td> <td></td> <td width="89"></td> <td></td> <td></td> <td valign="top" colspan="12" rowspan="2"> <hr> </td> <td></td> </tr> <tr> <td height="24"></td> <td colspan="4" rowspan="8" valign="top"><img src="cabecera_n.gif" width="132" height="334"></td> <td></td> <td></td>

</tr> <tr> <td height="10"></td> <td></td> <td width="43"></td> <td width="18"></td> <td width="111"></td> <td width="18"></td> <td width="14"></td> <td width="33"></td> <td width="136"></td> <td width="10"></td> <td width="68"></td> <td width="25"></td> <td width="206"></td> <td width="30"></td> <td></td> </tr> <tr> <td height="23"></td> <td></td> <td colspan="12" valign="top">Aqui tienes algunos enlaces interesantes relacionados con el laboratorio virtual:</td> <td></td> </tr> <tr> <td height="28"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="32"></td> <td></td> <td></td> <td></td>

<td colspan="2" valign="top"> FABRICANTES</td> <td></td> <td></td> <td valign="top">MUNDOS VIRTUALES</td> <td></td> <td></td> <td colspan="2" valign="top">HERRAMIENTAS DEL LABORATORIO</td> <td></td> <td></td> </tr> <tr> <td height="156"></td> <td></td> <td></td> <td colspan="2" rowspan="2" valign="top"> <ul> <li><a href="http://www.tektronic.com">Tektronix </a> </li> <li><a href="http://www.fluke.es"> Fluke </a></li> <li><a href="http://www.yokogawa.es">Yokogawa</a></li> <li><a href="http://www.promax.es">Promax</a></li> <li><a href="http://www.hameg.es">Hameg</a></li> <li><a href="http://www.lecroy.com">Lecroy</a></li> <li><a href="http://www.agilent.com">Agilent</a></li> </ul> </td> <td></td> <td></td> <td></td> <td colspan="2" valign="top"> <ul> <li> <a href="http://www.parallelgraphics.com/products/cortona/download/iexplore"> Cortona</a> Player</li>

<li><a href="http://www.cosmo.sgi.com/cgi-bin/download.cgi">Cosmo Player</a></li> <li><a href="http://www.ocnus.com/vrml.html">Modelos VRML</a></li> <li><a href="http://www.parallelgraphics.com">Parallel Graphics</a></li> </ul> </td> <td></td> <td colspan="4" valign="top"> <ul> <li><a href="http://www.ni.com/labview"> Lab View</a></li> <li><a href="http://www.php.com"> PHP</a></li> <li><a href="http://www.ni.com">National Instruments</a></li> <li><a href="http://www.measurementcomputing.com">Measurement Computing Corporation</a></li> <li><a href="http://www.techsoft.de/htbasic/tutgpib.htm">Protocolo GPIB</a></li> </ul> </td> </tr> <tr> <td height="44"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="75"></td> <td></td> <td></td> <td></td> <td></td>

<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="51"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="4"></td> <td colspan="10" rowspan="2" valign="top">© Federico José Barrero / Miguel Ángel Moreno</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td height="15"></td> <td></td>

<td></td> <td></td> <td></td> <td></td> <td colspan="3" rowspan="2" valign="top">Página optimizada para resolución 1024x768</td> </tr> <tr> <td height="3"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html>



7 BIBLIOGRAFÍA.

7.1 Libros.

• PHP 4, “Serie Práctica”. Pedro Pablo Fábrega. Prentice Hall, 2000.

ISBN 84-205-3112-X.

• Edición Especial MySQL. Paul DuBois. Prentice Hall, 2001. ISBN 84-

205-2956-7.

• Programación en JavaScript. Danny Goodman. Anaya Multimedia,

1997. ISBN 84-415-0080-0.

• Macromedia Director 8, “Iniciación y referencia”. Luz De-León

Fernández, Daniel Burgos. McGraw-hill, 2001. 84-446-0546-4.

• Herramienta de autor multimedia: creación y diseño con Director 8.

M-A Castro Gil. Ra-Ma. Madrid, 2001. ISBN 255-26-0254-7.

• 3DStudioMax, Edición Especial. José Manuel Díaz. Prentice Hall,

2003. ISBN 84-205-4200-8.



• El gran libro de 3DSMax. Christian Immler. Marombo, 1997. ISBN 84-

207-1109-X.

• VRML, Curso de iniciación. Ilde Gámez, Martín Martín. Infor Books

Ediciones, 2001. ISBN 84-95318-70-9.

• Aprendiendo MySQL en 21 Días. Mark Maslakowski, Tony Butcher.

Pearson Educación, 2001. ISBN 970-26-0036-7.

7.2 Documentos de la Red.

• PHP Manual. PHP Documentation Group. Octubre, 2002.

www.php.net/manual/en

• MySQL AB. MySQL Reference Manual for version 4.0.0-alpha.

www.mysql.com/Downloads/Manual/manual.pdf

• James Hoffman. Introduction to Structured Query Language. V.4.73.

www.nj.devry.edu/~kjudge/sqltut.htm

• Tutorial VRML97. José Luis Pumarega.

http://web3d.vapourtech.com/

1 CAPÍTULO 1. INTRODUCCIÓN.bibing.us.es/proyectos/abreproy/10960/fichero/memoria.pdf1.1...

Documents

Transcript of 1 CAPÍTULO 1. INTRODUCCIÓN.bibing.us.es/proyectos/abreproy/10960/fichero/memoria.pdf1.1...