Aplicación web para el conocimiento y conversión de unidades 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/ 88 Aplicación web para el conocimiento y conversión de unidades 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). Pulsar para acceder a la aplicación Figura 5.2. Acceso a la aplicación. 89 Aplicación web para el conocimiento y conversión de unidades 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). 90 Aplicación web para el conocimiento y conversión de unidades Pulsar para acceder a las definiciones de unidades Figura 5.4. Acceso al diccionario de unidades Figura 5.5. Diccionario de unidades 91 Aplicación web para el conocimiento y conversión de unidades Seleccionar el tipo de la unidad Figura 5.6. Selección del tipo de unidad Seleccionar la unidad Figura 5.7. Selección de la unidad según el tipo indicado 92 Aplicación web para el conocimiento y conversión de unidades Definición buscada Figura 5.8. Definición de la unidad por tipo Seleccionar la letra de comienzo de la unidad Figura 5.9. Selección por orden alfabético 93 Aplicación web para el conocimiento y conversión de unidades Seleccionar la unidad Figura 5.10. Selección de la unidad según letra de comienzo Definición buscada Figura 5.11. Definición de la unidad por orden alfabético 94 Aplicación web para el conocimiento y conversión de unidades 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. Pulsar para acceder al convertidor de unidades 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. 95 Aplicación web para el conocimiento y conversión de unidades Figura 5.13. Convertidor java de unidades Seleccionar el tipo de unidad Figura 5.14. Selección del tipo de unidad 96 Aplicación web para el conocimiento y conversión de unidades Seleccionar la unidad de origen Seleccionar la unidad de destino 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. 97 Aplicación web para el conocimiento y conversión de unidades Número de decimales PULSAR PARA CONVERTIR Figura 5.16. Conversión con cuatro decimales Alerta que INDICA EL REDONDEO REALIZADO Figura 5.17. Conversión imposible al número de decimales indicado 98 Aplicación web para el conocimiento y conversión de unidades Mensaje de alerta Figura 5.19. Mensaje de alerta por ausencia de número a convertir Pulsar para acceder a la ortografía técnica Figura 5.20. Acceso a la ortografía técnica 99 Aplicación web para el conocimiento y conversión de unidades 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). 100 Aplicación web para el conocimiento y conversión de unidades Acceso a la escritura de símbolos Figura 5.22. Normas ISO y UNE Figura 5.23. Escritura de símbolos 101 Aplicación web para el conocimiento y conversión de unidades Figura 5.24. Escritura de números Figura 5.25. Símbolos literales utilizados en electrotecnia 102 Aplicación web para el conocimiento y conversión de unidades Pulsar para acceder a la bibliografía y enlaces 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 103 Aplicación web para el conocimiento y conversión de unidades 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 Pulsar para acceder al kit y enlaces java Figura 5.28. Acceso a kit y enlaces Java 104 Aplicación web para el conocimiento y conversión de unidades 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. 105 Aplicación web para el conocimiento y conversión de unidades 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. Pulsar para acceder a los ejemplos de java Figura 5.30. Acceso a ejemplos de Java Figura 5.31. Menú de ejemplos de Java 106 Aplicación web para el conocimiento y conversión de unidades Pulsar para acceder al ejemplo Neko Figura 5.32. Acceso al ejemplo Neko Figura 5.33. Ejemplo Neko 107 Aplicación web para el conocimiento y conversión de unidades Pulsar para ver el código fuente 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(); } 108 Aplicación web para el conocimiento y conversión de unidades } 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 currentImg = nekoPics[3]; repaint(); pause(1000); // Rascarse 4 veces (metodo posterior) nekoScratch(4); // Dormir 5 turnos (idem) nekoSleep(5); // Despertarse y salir corriendo currentImg = nekoPics[8]; 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]) currentImg = nekoPics[1]; else currentImg = nekoPics[0]; repaint(); pause(150); } } void nekoScratch( int numTimes) { for (int i = numTimes; i > 0; i--) { currentImg = nekoPics[4]; repaint(); pause(150); currentImg = nekoPics[5]; repaint(); pause(150); 109 Aplicación web para el conocimiento y conversión de unidades } } void nekoSleep ( int numTimes) { for (int i = numTimes; i > 0; i--) { currentImg = nekoPics[6]; repaint(); pause(250); currentImg = nekoPics[7]; 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 110 Aplicación web para el conocimiento y conversión de unidades 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). Pulsar para VER EL CAPÍTULO 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. Menú de navegación Figura 5.38. Menú de navegación 111