Volver a la página anterior. Contador de accesos.
Diseño de páginas Web interactivas.
Prof. Dr. Luis Garcia Diz

Ejemplo inicial de cálculo de las Ingestas Recomendadas en Energía y Proteínas de un estrato de edad y un sexo, con los 3 tipos de actividad física habituales.



Introducción.

El formato HTML deberá diseñarse para que presente un aspecto parecido al que muestra el gráfico adyacente.

En esta "interface" (pantalla que se muestra al usuario/a para intercambiar datos con el) aparecen zonas pasivas, y algunas con posibilidades interactivas con el usuario: las cajas de texto (3 iniciales para los datos de entrada y 2 finales para los resultados de salida) y el botón (para efectuar el cálculo).

El objetivo de esta página sencilla es la de permitir la introducción del numero de personas que forman parte de cada estrato (divididas por su tipo de actividad físicas clasificadas como ligeras, normales y elevadas) y realizar el cálculo de la IR media del grupo formado por tales sujetos, cuando se pulse el botón de "Calcular", mostrando los resultados en las 2 cajas inferiores.

Archivo fuente HTML.

Esta primera "interface" se diseña y realiza con el Composer de Netscape, o cualquier otro editor de HTML, y deberá generar un archivo fuente así:
 
<HTML> 

<HEAD> 
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
   <META NAME="Author" CONTENT="Prof. Dr. Luis Garcia Diz"> 
   <META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]"> 
   <TITLE>IR_1</TITLE> 
</HEAD> 

<BODY BGCOLOR="#CCCCCC"> 
Mujeres 
<FORM> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Actividad F&iacute;sica 
<BR> 
Edad&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Ligera&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Normal&nbsp;&nbsp;&nbsp;&nbsp; 
Intensa&nbsp;&nbsp;&nbsp;&nbsp; 
Energ&iacute;a&nbsp;&nbsp;&nbsp;&nbsp;Prote&iacute;nas 
<BR> 
10 - 13 a&ntilde;os&nbsp; 
<INPUT type="text" name ="datos" size=5 value="0"> 
<INPUT type="text" name ="datos" size=5 value="0"> 
<INPUT type="text" name ="datos" size=5 value="0"> 
&nbsp;&nbsp;&nbsp; 
2300&nbsp;&nbsp; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
41 
<BR> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<INPUT type="button" value="Calcular"> 
<BR> 
<BR>Ingestas Recomendadas (IR). 
<BR>Energ&iacute;a :&nbsp;&nbsp;&nbsp;&nbsp; 
<INPUT type="text" name ="energia" value="0" size=5> 
<BR> 
Prote&iacute;nas :&nbsp; 
<INPUT type="text" name ="proteina" value="0" size=5> 
</FORM> 
</BODY> 

</HTML> 

Este archivo fuente puede verse con un procesador de "texto plano" como el "NotePad" o el "WordPad", para que no añada códigos de control al texto que nosotros escribamos.

Los códigos mostrados como <...> son los denominados "tag", propios del lenguaje HTML y le indican al navegador que ha de hacer con el texto: centrarlo <CENTER> ... </CENTER>, cambiar de tamaño <FONT SIZE=1> ... </FONT>, empezar un nuevo párrafo <P>, etc... La mayor parte de ellos comienzan y terminan enmarcando el grupo de caracteres a los que afectan.

Puesto que originalmente el idioma de desarrollo es el ingles no existe código simple para las vocales acentuadas o la ñ, y estas se codifican de la siguiente forma:
 

á &aacute; ó &oacute;
é &eacute; ú &uacute;
í &iacute; ñ &ntilde;
 

Por último, los espacios en blanco se indican con el código: &nbsp;

 
Programa interactivo.

Tras la confección de esta zona pasiva de la pagina habrán de añadirse las partes que permitan su interacción con el usuario.

En primer lugar se han se considerar los "eventos" o sucesos que pueden ocurrir sobre la pagina cuando el usuario realice algunas acciones sobre ella.

Veremos estas 3 posibilidades por orden, añadiendo la captación de estos sucesos y su vinculación con programas (acciones) a realizar cuando se produzcan.
 

Rutina de cálculo de las IR.

En primer lugar ligaremos la pulsación del botón de calcular a una función (programa) que realice el calculo de las ingestas recomendadas de las personas que figuran en las 3 casillas iniciales.

Sitúe a continuación de la descripción HTML del botón mencionado la vinculación con el suceso de pulsarlo de la siguiente forma:

<INPUT type="button" value="Calcular" onClick="IR()">

De esta manera se vincula un suceso onClick a una rutina IR (se han de añadir un paréntesis abierto e inmediatamente otro cerrado cuando no se envían argumentos). Después de efectuado este cambio en el archivo fuente de la pagina HTML puede volver a cargarse en el navegador y comprobar que no genera errores, pero que evidentemente nada sucede cuando se pulsa el botón. Se detecta la pulsación y se intenta ejecutar la función denominada IR() pero como no existe, nada sucede.

A continuación se ha de incorporar dicha función, escrita en un lenguaje interpretable por cualquier navegador. Esto ha de ser incorporado en la parte inicial del archivo HTML, de la siguiente manera:
 
<HEAD> 
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
   <META NAME="Author" CONTENT="Prof. Dr. Luis Garcia Diz"> 
   <META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]"> 
   <TITLE>IR_1</TITLE> 

<SCRIPT LANGUAGE="javascript"> 
//Función que calcula las IR medias del grupo. 
function IR(){ 
         //Lectura de los valores del grupo y cálculos. 
         var lig = parseFloat(document.forms[0].datos[0].value); 
         var nor = parseFloat(document.forms[0].datos[1].value); 
         var ele = parseFloat(document.forms[0].datos[2].value); 
         var tot = lig + nor + ele; 
         //Inicializa a cero la variable ene y evita hacer cálculos 
         //   incorrectos cuando están a cero las 3 casillas. 
         var ene = 0 
         var pro = 0 
         if (tot > 0) { 
            ene = 2300 * (lig * .9 + nor + ele * 1.2) / tot 
            pro = 41 
         } 
         //Presentación de resultados. 
         document.forms[0].energia.value = Math.round(ene); 
         document.forms[0].proteina.value = pro; 
} 
</SCRIPT> 

</HEAD> 

 
La forma de comprobar que trabaja correctamente la función es introducir una persona de cada uno de los tipos de actividad física y comprobar que el cálculo se hace correctamente. Para una persona de actividad física ligera se ha de descontar un 10% a los datos de la tabla de referencia, mientras que para las de actividad intensa se ha de aumentar un 20% dicho valor. Unos ejemplos bastaran para comprobar que el programa funciona correctamente.
 

 
Después de verificado este resultado preliminar se ha de comprobar que realiza bien el cálculo de estamentos completos, verificando con algunos datos precalculados con otro sistema.
 
 

Tras esta incorporación ya puede grabar el archivo y visualizarlo con su navegador. Introduzca valores numéricos positivos en las 3 casilla iniciales y pulse el botón de calcular. El suceso provocado al hacer "Click" sobre dicho botón es interceptado por el navegador y pone en marcha la función IR. Este pequeño programa lee los valores introducidos en las 3 casillas de texto iniciales, transformando su contenido en números reales, calcula la suma total de individuos del estrato, inicializa a 0 los que serán los resultados finales del calculo, realiza el calculo definitivo, si hay algo que calcular, y finalmente muestra los resultados en las 2 ultimas cajas de texto.
 

Validación de los datos.

La introducción de datos incorrectos en las cajas de texto iniciales puede provocar cálculos absurdos. Para evitar que esto pueda suceder se ha de ligar el suceso de perdida de foco de cada una de estas cajas a una nueva función que valide los datos recién introducidos.

Como en el otro caso se ha de ligar el suceso a una posible acción programada dentro del cuerpo del archivo HTML.

<INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(0)">
<INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(1)">
<INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(2)">

Luego, o antes si se quiere, se ha de programar la accion que se vinsulara al suceso desencadenado en la pagina Web cuando el usuario haga algo determinado.
 
//Valida los datos introducidos en las tres casillas iniciales. 
function validar (indice){ 
         var numero = document.forms[0].datos[indice].value 
         //Comprueba si la casilla está vacia. 
         if (numero == ""){ 
            alert("Debe introducir algún dato en la celda."); 
            document.forms[0].datos[indice].value = 0; 
         } 
         //Comprueba si la casilla contiene caracteres alfabéticos. 
         if (isNaN(numero)){ 
            alert("Debe introducir un dato numérico."); 
            document.forms[0].datos[indice].value = 0; 
         } 
         //Comprueba si el número introducido es negativo. 
         if (numero < 0 ){ 
            alert("Se ha equivocado. Lo valores deben ser positivos."); 
            document.forms[0].datos[indice].value = 0; 
         } 
} 

La verificación de esta nueva rutina se realiza grabando la página Web modificada, viendola con el navegador e introduciendo valores incorrectos en las cajas de texto de los datos para comprobar si son atrapados y corregidos.
 
 
Celdas no accesibles.

Por último se ha de evitar que puedan alterarse los contenidos de las cajas de resultados para que solamente aparezcan los datos calculados por el programa interactivo. Esto se soluciona retirando el foco de estas cajas cada vez que se adquiere. Cuando el usuario intente entrar en ellas para modificar su contenido (ganancia de foco de la caja) se le expulsa fuera (retirando el foco de la misma).

...
<INPUT type="text" name ="energia" value="0" size=5 onFocus="energia.blur()">
...
<INPUT type="text" name ="proteina" value="0" size=5 onFocus="proteina.blur()">
...
 



Despues de efectuados todos estos cambios, el programa fuente completo es:
 
<HTML> 

<HEAD> 
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
   <META NAME="Author" CONTENT="Prof. Dr. Luis Garcia Diz"> 
   <META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]"> 
   <TITLE>IR_1</TITLE> 

<SCRIPT LANGUAGE="javascript"> 

//Función que calcula las IR medias del grupo. 
function IR(){ 
         //Lectura de los valores del grupo y cálculos. 
         var lig = parseFloat(document.forms[0].datos[0].value); 
         var nor = parseFloat(document.forms[0].datos[1].value); 
         var ele = parseFloat(document.forms[0].datos[2].value); 
         var tot = lig + nor + ele; 
         //Inicializa a cero la variable ene y evita hacer cálculos 
         //   incorrectos cuando están a cero las 3 casillas. 
         var ene = 0 
         var pro = 0 
         if (tot > 0) { 
            ene = 2300 * (lig * .9 + nor + ele * 1.2) / tot 
            pro = 41 
         } 
         //Presentacion de resultados. 
         document.forms[0].energia.value = Math.round(ene); 
         document.forms[0].proteina.value = pro; 

//Valida los datos introducidos en las tres casillas iniciales. 
function validar (indice){ 
         var numero = document.forms[0].datos[indice].value 
         //Comprueba si la casilla está vacia. 
         if (numero == ""){ 
            alert("Debe introducir algún dato en la celda."); 
            document.forms[0].datos[indice].value = 0; 
         } 
         //Comprueba si la casilla contiene caracteres alfabéticos. 
         if (isNaN(numero)){ 
            alert("Debe introducir un dato numérico."); 
            document.forms[0].datos[indice].value = 0; 
         } 
         //Comprueba si el número introducido es negativo. 
         if (numero < 0 ){ 
            alert("Se ha equivocado. Lo valores deben ser positivos."); 
            document.forms[0].datos[indice].value = 0; 
         } 

</SCRIPT> 

</HEAD> 

<BODY BGCOLOR="#CCCCCC"> 
Mujeres 
<FORM> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Actividad F&iacute;sica 
<BR> 
Edad&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Ligera&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
Normal&nbsp;&nbsp;&nbsp;&nbsp; 
Intensa&nbsp;&nbsp;&nbsp;&nbsp; 
Energ&iacute;a&nbsp;&nbsp;&nbsp;&nbsp;Prote&iacute;nas 
<BR> 
10 - 13 a&ntilde;os&nbsp; 
<INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(0)"> 
<INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(1)"> 
<INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(2)"> 
&nbsp;&nbsp;&nbsp; 
2300&nbsp;&nbsp; 
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
41 
<BR> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<INPUT type="button" value="Calcular" onClick="IR()"> 
<BR> 
<BR>Ingestas Recomendadas (IR). 
<BR>Energ&iacute;a :&nbsp;&nbsp;&nbsp;&nbsp; 
<INPUT type="text" name ="energia" value="0" size=5 onFocus="energia.blur()"> 
<BR> 
Prote&iacute;nas :&nbsp; 
<INPUT type="text" name ="proteina" value="0" size=5 onFocus="proteina.blur()"> 
</FORM> 
</BODY> 

</HTML> 


Puede grabar esta hoja en su ordenador y luego copiar este último programa fuente y pegarlo en un archivo vacío nuevo. Grabelo con el nombre IR_1.html y podrá verlo en su navegador y ejecutar todas sus zonas interactivas. Este primer ejemplo no es mas que un primer diseño, y se modificará notablemente para su posible ampliación posterior.

También puede conectar directamente con esta página ya construida y ejecutarla y/o grabarla en su propio ordenador.



Volver al índice de la página.
Prof. Dr. Luis Garcia Diz. Diciembre de 1998.