5.1. introducción - meteo.ieec.uned.esmeteo.ieec.uned.es/ · aplicación web para el conocimiento...

Aplicación web para el conocimiento y conversión de unidades

88

CAPÍTULO V. APLICACIÓN WEB PARA EL CONOCIMIENTO Y CONVERSIÓN DE LAS UNIDADES DE MEDIDA

5.1. Introducción

Este capítulo está destinado a la presentación de la herramienta software construida en lenguaje de programación html, Java y JavaScript. El objetivo ha sido crear una aplicación versátil y fácil de manejar. Ésta, pretende facilitar todo lo referente a las unidades de medida, tanto en su conocimiento como en su manejo.

La aplicación está estructurada en las siguientes partes:

� Diccionario de Unidades: en esta primera sección se pueden consultar aquellas definiciones de las unidades de uso más frecuente en el mundo de la ingeniería. Al igual que todas las secciones está desarrollada con html para que pueda ser interpretada por el navegador web. Así mismo, con el fin de no mostrar información innecesaria para el usuario, contiene un programa JavaScript que permite seleccionar aquella unidad que se quiera consultar, mostrando su definición.

� Convertidor de Unidades: aplicación Java que permite convertir entre varias

unidades del mismo tipo, con la posibilidad de mostrar el resultado en el número de decimales elegido. Pretende ser una herramienta de intuitivo y fácil uso, que ayude a los usuarios a realizar las conversiones con rapidez y comodidad.

� Ortografía técnica: se ha incluido una sección de normas y reglas para la

correcta escritura de símbolos y números de imprescindible conocimiento para la correcta expresión de las unidades de medida.

� Bibliografía y enlaces: con el objetivo de servir de puente para que, aquellos

usuarios que lo deseen, puedan profundizar más en el conocimiento de las unidades de medida y en el desarrollo de aplicaciones web, se ha incluido una sección con enlaces y bibliografía sobre estos temas.

� Kit y enlaces Java: aquí se da una pequeña introducción de que es Java, y de

cómo iniciarse en el mundo de la programación web con está lenguaje.

� Ejemplos de Java: en esta sección se muestran ejemplos de aplicaciones sencillas desarrolladas en Java. Se podrá consultar el código fuente, de modo que aquellos interesados puedan practicar y aprender más acerca de este lenguaje de programación.

5.2. Presentación de la aplicación

Se podrá ejecutar la aplicación, bien desde el CD adjunto (Apéndice A), o bien desde la siguiente dirección de Internet: http://meteo.ieec.uned.es/www_Usumeteo2/


89

Figura 5.1. Panel de presentación del proyecto fin de carrera

Pulsando <<ENTRAR>>, como se indica en la figura 5.2, se accederá al menú

principal de la aplicación (figura 5.3).

Figura 5.2. Acceso a la aplicación.

Pulsar para acceder a la aplicación


90

Figura 5.3. Menú principal

5.2.1. Diccionario de unidades

El primer enlace que aparece es el <<DICCIONARIO DE UNIDADES>>. A través de él (figura 5.4), el usuario accederá a la página en la que se muestra la definición de las distintas unidades de medida (figura 5.5).

A dicha información se podrá acceder de dos formas independientes. La primera

será accediendo desde la parte superior de la página, seleccionando en el combo el tipo de unidad de la cuál se quiere obtener su definición (figura 5.6). Una vez seleccionada ésta, aparecerán en el combo adyacente las unidades correspondientes al tipo seleccionado. Seleccionando una de ellas (figura 5.7) se obtendrá finalmente su definición en el área de texto inferior a ambos (figura 5.8).

Otra posibilidad para obtener la definición buscada es por orden alfabético Para ello

se deberá seleccionar en el combo inferior izquierdo la letra por la que comienza la unidad (figura 5.9). Aparecerán, entonces, en el combo contiguo las unidades que se podrán consultar. Pulsando ahora sobre la unidad (figura 5.10) se obtendrá la información correspondiente a la misma (figura 5.11).


91

Figura 5.4. Acceso al diccionario de unidades

Figura 5.5. Diccionario de unidades

Pulsar para acceder a las definiciones de unidades


92

Figura 5.6. Selección del tipo de unidad

Figura 5.7. Selección de la unidad según el tipo indicado

Seleccionar la unidad

Seleccionar el tipo de la unidad


93

Figura 5.8. Definición de la unidad por tipo

Figura 5.9. Selección por orden alfabético

Seleccionar la letra de comienzo de la unidad

Definición buscada


94

Figura 5.10. Selección de la unidad según letra de comienzo

Figura 5.11. Definición de la unidad por orden alfabético

Definición buscada

Seleccionar la unidad


95

5.2.2. Convertidor de unidades

A través del enlace <<CONVERTIDOR DE UNIDADES>> del menú principal (figura 5.12), el usuario accederá al convertidor de unidades (figura 5.13), que permite convertir entre las unidades de medida más utilizadas.

Figura 5.12. Acceso al convertidor de unidades

El manejo del convertidor se ha diseñado para que sea lo más sencillo e intuitivo

posible. Inicialmente es necesario seleccionar el tipo de unidad en la lista desplegable superior “Tipo de unidad”, cómo se indica en la figura 5.14

Aparecerán entonces en las áreas de texto etiquetadas con “Unidad de Origen” y “Unidad de Destino” aquellas unidades del tipo seleccionado entre las que se podrá convertir. Se deben seleccionar cuales de ellas van a intervenir en la conversión, teniendo en cuenta cual es la unidad de valor conocido, denominada unidad de origen y cual en la que se quiere convertir este dato, siendo ésta última la de destino.(figura 5.15).

En el área de texto inferior izquierda (dónde aparece por defecto un 1), se introduce el valor de la unidad de origen que se quiere convertir en la unidad de destino, sin más que seleccionar con el ratón dicha área de texto y teclear la cantidad deseada. En caso de no indicar nada, se realizará la conversión de la unidad.

Pulsar para acceder al convertidor de unidades


96

Figura 5.13. Convertidor java de unidades

Figura 5.14. Selección del tipo de unidad

Seleccionar el tipo de unidad


97

Figura 5.15. Selección de las unidades para la conversión

El programa permite elegir el número de decimales en que se mostrará el resultado, mediante un seleccionable etiquetado con “Numero de decimales”. En caso de que la conversión no sea posible mostrará un mensaje de alerta indicando el número de decimales, más próximo al indicado, en que se ha realizado la conversión. (figuras 5.16 y 5.17). En caso de no selección del número de decimales, el programa redondeará a dos decimales, siempre que sea posible.

La conversión se realizará al pulsar el botón de convertir. Apareciendo el resultado

en el área de texto inferior derecha.

El convertidor muestra un mensaje de alerta cuando el resultado no se pueda mostrar con el número de decimales definido, indicando los decimales a los que se ha redondeado (figura 5.19).

5.2.3. Ortografía técnica

En el menú principal se muestra el acceso a la ortografía técnica a través del enlace <<ORTOGRAFÍA TÉCNICA>> (figura 5.20). Dentro de esta sección, se observan en el menú de la figura 5.21 aquellas normas o reglas que se pueden consultar.

Seleccionar la unidad de origen

Seleccionar la unidad de destino


98

Figura 5.16. Conversión con cuatro decimales

Figura 5.17. Conversión imposible al número de decimales indicado

Alerta que INDICA EL REDONDEO REALIZADO

PULSAR PARA CONVERTIR

Número de decimales


99

Figura 5.19. Mensaje de alerta por ausencia de número a convertir

Figura 5.20. Acceso a la ortografía técnica

Mensaje de alerta

Pulsar para acceder a la ortografía técnica


100

Figura 5.21. Menú de ortografía técnica

Aparecen cuatro apartados de ortografía técnica a los cuales se podrá acceder directamente pulsando sobre el texto:

� Normas ISO y UNE (figura 5.22). � Escritura de símbolos (figura 5.23).

� Escritura de números (figura 5.24). � Símbolos literales utilizados en electrotecnia (figura 5.25).

Las flechas situadas en la parte inferior proporcionan una navegación horizontal

entre todos los apartados, con un click de ratón sobre la propia flecha. 5.2.4. Bibliografía y enlaces

Cómo se indica en la figura 5.26, dentro del menú principal se podrá acceder con

un click en <<BIBLIOGRAFÍA Y ENLACES>> a la bibliografía utilizada para el desarrollo de la aplicación y a enlaces de Internet interesantes (figura 5.27).


101

Figura 5.22. Normas ISO y UNE

Figura 5.23. Escritura de símbolos

Acceso a la escritura de símbolos


102

Figura 5.24. Escritura de números

Figura 5.25. Símbolos literales utilizados en electrotecnia


103

Figura 5.26. Acceso a la bibliografía y enlaces

Figura 5.27. Bibliografía y enlaces 5.2.5. Kit y enlaces Java

A través de este enlace del menú principal (figura 5.28) se accederá a la página donde se explica los orígenes del lenguaje Java y el porque de su importancia dentro de la informática moderna. También se indican aquellos entornos donde poder desarrollar

Pulsar para acceder a la bibliografía y enlaces


104

Java y dónde poder acceder a ellos. Por último, se indican aquellas variables de entorno del PC que se han de modificar para poder desarrollar programas Java.

La página consta por tanto de las siguientes secciones (figura 5.29):

� ¿Qué es Java? � Entorno de desarrollo Java

� Variable CLASS y CLASSPATH

Figura 5.28. Acceso a kit y enlaces Java

Pulsar para acceder al kit y enlaces java


105

Figura 5.29. Kit y enlaces Java

5.2.6. Ejemplos de Java

El acceso a diversos ejemplos desarrollados en lenguaje de programación Java, se muestra en la figura 5.30.

Aparecen nueve ejemplos sencillos (figura 5.31) a los que se accede pinchando

encima del texto que los identifica.

� Reloj: muestra la hora actual de nuestro PC (figura 5.32). Para ver el código fuente Java, se pulsa con el botón izquierdo del ratón en el enlace según se indica en la figura 5.33 y aparece seguidamente el código del ejemplo con comentarios explicativos (figura 5.34).

� Portapapeles: se trata de un ejemplo sencillo de tratamiento de texto a través de

cajas de texto.

� Checkers: este ejemplo permite simular movimiento sin más que ir repintando un círculo rojo en una zona de la pantalla.

� Neko: en ocasiones parecen complejos aquellos programas que dotan de

movimiento un dibujo. Este ejemplo, nos muestra como de forma sencilla se puede conseguir movimiento.

� Seleccionables: el siguiente applet trata de ser un sencillo ejemplo de relación

entre desplegables, botones y cajas de texto.


106

� Spots: se muestra como el programa interactúa con el usuario y a reacciona a los click del ratón dibujando en la pantalla

� Colores: los rótulos o títulos de las páginas web, pueden ser muy llamativos.

Aquí se tiene un ejemplo java de ello.

� Banner: los banner dinámicos están presentes en muchas páginas web. Este ejemplo muestra como desplegar una serie de mensajes en una “pancarta”.

� Líneas: al igual que Spots, muestra la interacción usuario-applet.

Figura 5.30. Acceso a ejemplos de Java

Figura 5.31. Menú de ejemplos de Java

Pulsar para acceder a los ejemplos de java


107

Figura 5.32. Acceso al ejemplo Neko

Figura 5.33. Ejemplo Neko

Pulsar para acceder al ejemplo Neko


108

Figura 5.34. Acceso al código fuente del ejemplo Neko

import java.awt.Graphics;

import java.awt.Image;

import java.awt.Color;

public class Neko extends java.applet.Applet

implements Runnable {

Image nekoPics[] = new Image[9];

Image currentImg;

Thread runner;

int x;

int y = 50;

public void init() {

String nekoSrc[]= { "right1.gif", "right2.gif",

"stop.gif", "yawn.gif", "scratch1.gif",

"scratch2.gif", "sleep1.gif", "sleep2.gif",

"awake.gif" };

for (int i=0; i< nekoPics.length; i++) {

nekoPics[i] = getImage(getCodeBase(),

"Neko_Imag/" + nekoSrc[i]);

}

}

public void start() {

if (runner == null) {

runner = new Thread(this);

runner.start();

}

Pulsar para ver el código fuente


109

}

public void stop() {

if (runner != null) {

runner = null;

}

}

public void run() {

setBackground(Color.white);

// Correr de izq a derecha (llamo a metodo posterior)

nekoRun(0, getSize().width/2);

// Detenerse y hacer una pausa

currentImg = nekoPics[2];

repaint();

pause(1000); //el metodo pause tb a continuacion

// Bostezar


repaint();

pause(1000);

// Rascarse 4 veces (metodo posterior)

nekoScratch(4);

// Dormir 5 turnos (idem)

nekoSleep(5);

// Despertarse y salir corriendo


repaint();

pause(500);

nekoRun(x,getSize().width + 10);

}

// METODOS DE LAS ACCIONES

void nekoRun(int start, int end) {

for (int i = start; i < end; i += 10) {

x = i;

//intercambio de imagenes

if (currentImg == nekoPics[0])


else currentImg = nekoPics[0];

repaint();

pause(150);

}

}

void nekoScratch( int numTimes) {

for (int i = numTimes; i > 0; i--) {


repaint();

pause(150);


repaint();

pause(150);


110

}

}

void nekoSleep ( int numTimes) {

for (int i = numTimes; i > 0; i--) {


repaint();

pause(250);


repaint();

pause(250);

}

}

void pause (int time) {

try {

Thread.sleep(time);

} catch (InterruptedException e) {}

}

public void paint (Graphics screen) {

if (currentImg != null)

screen.drawImage(currentImg, x, y, this);

}

}

Figura 5.35. Código fuente del ejemplo Neko 5.2.7. Memoria PDF

La memoria de este proyecto se puede consultar, en formato PDF, a través del último enlace que aparece en la aplicación (figura 5.36).

Figura 5.36. Acceso a la memoria

Pulsar para acceder a la memoria de este pfc


111

Los capítulos se pueden consultar y descargar sin más que pulsar sobre el propio capítulo, cuyo contenido se indica a la derecha de los mismos, de modo que sean fácilmente identificables (figura 5.37).

Figura 5.37. Memoria PDF

La aplicación contiene en cada una de sus páginas un menú situado en su parte

inferior (figura 5.38), para poder realizar también una navegación horizontal entre las diversas secciones de que consta esta web.

Figura 5.38. Menú de navegación

Pulsar para VER EL CAPÍTULO

Menú de navegación

5.1. introducción - meteo.ieec.uned.esmeteo.ieec.uned.es/ · aplicación web para el conocimiento...

Documents