Contador de accesos.
Diseño de páginas Web interactivas. 
Segundo ejemplo de cálculo de las Ingestas Recomendadas en Energía y Proteínas y Lípidos  de 2 estratos de edad y un sexo, con los 3 tipos de actividad física habituales.



Introducción

Visto el ejemplo anterior, ahora generalizaremos el cálculo a más de un estrato, tanto para nutrientes o componentes de la dieta dependientes de la actividad física desarrollada (energía, tiamina, etc... ) como para aquellos otros que no los son (proteínas, Ca, etc... ).

Estructura de la página Web.

Puesto que para cada estrato de edades y sexo se han de hacer las mismas operaciones lo mas operativo seria programar los cálculos dentro de un bucle que recorriera todos los estratos (renglones), acumulando los cálculos realizados en cada uno de ellos, y presentara los resultados al final. La construcción de la página Web obedecerá a este imperativo y al tener una mayor cantidad de datos será necesario organizarla por medio de tablas, introduciendo en cada celda la información u objetos precisos. Un posible estructura es la que se muestra es la gráfica siguiente.
 

La denominación de los objetos utilizados, cajas de texto, es una de las claves para su utilización posterior en el programa de calculo. Las cajas de texto a las que se les ponga el mismo nombre formaran una matriz a al que podrá accederse por el nombre y el indice, que será el que ocupen en orden correlativo desde el 0 según van apareciendo en la pagina Web. Así, la primera caja de texto denominada datos será datos[0], la segunda datos[1] y así sucesivamente. Usaremos también acumuladores parciales para mostrar el numero total de individuos que integran cada estrato, mostrando sus resultados, a la vez que otra serie de acumuladores internos para posibilitar los cálculos finales. En esencia un acumulador es una variable que se inicializa a cero y sobre la que se van añadiendo, sumandolos, los datos de una serie.

La estructura de la pagina Web, tras acabar su diseño 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_2</TITLE> 
</HEAD> 

<BODY BGCOLOR="#CCCCCC"> 
<FORM> 
<TABLE BORDER COLS=7 WIDTH="470" > 
<TR> 
<TD WIDTH="60">Mujeres</TD> 
<TD ALIGN=CENTER COLSPAN="3">Actividad f&iacute;sica</TD> 
<TD></TD> 
<TD ALIGN=CENTER WIDTH="60">Energ&iacute;a</TD> 
<TD ALIGN=CENTER WIDTH="60">Prote&iacute;na</TD> 
</TR> 

<TR> 
<TD>Edad</TD> 
<TD WIDTH="60">Ligera</TD> 
<TD>Normal</TD> 
<TD>Intensa</TD> 
<TD>Total</TD> 
<TD ALIGN=CENTER>KCal</TD> 
<TD ALIGN=CENTER>g</TD> 
</TR> 

<TR> 
<TD>10 - 12</TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(0)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(1)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(2)"></TD> 
<TD><INPUT type="text" name ="total" size=5 value="0" onFocus="total[0].blur()"></TD> 
<TD ALIGN=CENTER>2300</TD> 
<TD ALIGN=CENTER>41</TD> 
</TR> 

<TR> 
<TD>13 - 15</TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(3)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(4)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(5)"></TD> 
<TD><INPUT type="text" name ="total" size=5 value="0" onFocus="total[1].blur()"></TD> 
<TD ALIGN=CENTER>2500</TD> 
<TD ALIGN=CENTER>45</TD> 
</TR> 

<TR> 
<TD></TD> 
<TD ALIGN=CENTER VALIGN=CENTER COLSPAN="3"><INPUT type="button" value="Calcular" onClick="IR()"></TD> 
<TD><INPUT type="text" name ="total" size=5 value="0" onFocus="total[2].blur()"></TD> 
<TD></TD> 
<TD></TD> 
</TR> 

</TABLE> 

&nbsp; 
<BR>&nbsp; 
<TABLE BORDER COLS=3 WIDTH="470" > 
<TR> 
<TD></TD> 
<TD ALIGN=CENTER VALIGN=CENTER><INPUT type="reset" value="Borrar" name="borrar"></TD> 
<TD></TD> 
</TR> 
</TABLE> 

&nbsp; 
<BR>&nbsp; 
<TABLE BORDER WIDTH="700" > 
<TR> 
<TD ALIGN=CENTER COLSPAN="3">Ingestas Recomendadas ( IR )</TD> 
<TD>Observaciones</TD> 
</TR> 

<TR> 
<TD>Energ&iacute;a</TD> 
<TD ALIGN=CENTER VALIGN=CENTER WIDTH="50"><INPUT type="text" name ="energia" value="0" size=5 onFocus="energia.blur()"></TD> 
<TD>KCal</TD> 
<TD>Valores medios a los que ajustarse (ni mas ni menos).</TD> 
</TR> 

<TR> 
<TD>Prote&iacute;nas</TD> 
<TD ALIGN=CENTER VALIGN=CENTER><INPUT type="text" name ="proteina" value="0" size=5 onFocus="proteina.blur()"></TD> 
<TD>g</TD> 
<TD>Ha de superar la cifra indicada.</TD> 
</TR> 

<TR> 
<TD>L&iacute;pidos</TD> 
<TD ALIGN=CENTER VALIGN=CENTER><INPUT type="text" name ="lipidos" value="0" size=5 onFocus="lipidos.blur()"></TD> 
<TD>g</TD> 
<TD>Deber&iacute;a ser menos del 30% de la energ&iacute;a total ingerida.</TD> 
</TR> 
</TABLE> 

</FORM> 
</BODY> 

</HTML> 

Los objetos añadidos son cajas de texto, un botón de comando y un botón de borrado ("reseteado") que anula el contenido de todas las cajas de texto presentes en el formulario situando en ellas el valor que marca su propiedad "value" cuando se la definió. Esta acción equivale a cargar la hoja de nuevo desde el principio.
 

Programa de cálculo de las ingesta recomendadas IR.

A continuación, como en el caso anterior, ayudados por un procesador de texto plano como el "Wor Pad", abrimos el archivo en el que se guardó la página Web diseñada, y agregamos el programa necesario para que funcione de forma interactiva con el usuario.

Como siempre comience definiendo el lenguaje de guiones ("Script") que usará, iniciando con el marcador especifico y cerrándolo al finalizar, y todo ello en la cabeza (HEAD) del documento HTML.
 
<SCRIPT LANGUAGE="javascript"> 
//Definición inicial de variables. 
var EnergiaIR = new Array(2); 
var ProteinaIR = new Array(2); 
//IR del primer estrato. 
EnergiaIR[0] = 2300; 
ProteinaIR[0] = 41; 
//IR del segundo estrato. 
EnergiaIR[1] = 2500; 
ProteinaIR[1] = 45; 

</SCRIPT> 

En primer lugar se crean y se inicializan las variables que va a necesitar el programa para el calculo. La mejor forma de ordenarlas es para facilitar luego su uso es guardarlas en matrices que tengan como denominación el componente, o nutriente a que se refieran (energía, proteína, etc...) seguido de IR, y como índice el numero del estrato (renglón) en el que se encuentren (0 para el primero, 1 para el segundo, etc... ). Después de creadas las matrices como se le da valor a cada uno de sus componentes. Añadir en su momento otro nutriente al programa sería tan fácil como:
 
...
//Definición inicial de variables. 
var EnergiaIR = new Array(2); 
var ProteinaIR = new Array(2); 
var CalcioIR = new Array(2); 
//IR del primer estrato. 
EnergiaIR[0] = 2300; 
ProteinaIR[0] = 41; 
Calcio[0] = 1000; 
//IR del segundo estrato. 
EnergiaIR[1] = 2500; 
ProteinaIR[1] = 45; 
Calcio[1] = 1000; 
...

La función de validar los contenidos de una, tres, o cien casillas es siempre igual. Es la misma que la expuesta en el primer ejemplo, por lo que no vamos a comentarla en este lugar. La que si cambia ligeramente, para generalizar el cálculo de numerosos estratos, es la función de calcular las ingestas recomendadas medias (IR) de todo el colectivo.
 
//Función que calcula las IR medias del grupo. 
function IR(){ 
         //Inicializa a cero todas las variables. 
         var EnergiaFinal = 0; 
         var ProteinaFinal = 0; 

         var ActLigera = 0; 
         var ActNormal = 0; 
         var ActElevada = 0; 
         var TotalFinal = 0; 

         //Recorre cada estrato (renglón) acumulando los 
         //   cálculos realizados. 
         for (n = 0; n < 2; n++){ 
             //Lectura de los valores del grupo y cálculos. 
             ActLigera = parseFloat(document.forms[0].datos[n * 3].value); 
             ActNormal = parseFloat(document.forms[0].datos[n * 3 + 1].value); 
             ActElevada = parseFloat(document.forms[0].datos[n * 3 + 2].value); 
             var Total = ActLigera + ActNormal + ActElevada; 
             TotalFinal = TotalFinal + Total 
             if (Total > 0) { 
                 EnergiaFinal = EnergiaFinal + EnergiaIR[n] * (ActLigera * .9 + ActNormal + ActElevada * 1.2); 
                 ProteinaFinal =  ProteinaFinal + ProteinaIR[n] * Total; 
             } 
         } 
         //Presentación de resultados. 
         document.forms[0].total[2].value = Math.round(TotalFinal); 
         //Evita calcular y presentar datos imposibles. 
         if ( TotalFinal > 0 ){ 
            document.forms[0].energia.value = Math.round(EnergiaFinal / TotalFinal); 
            document.forms[0].proteina.value = Math.round(ProteinaFinal / TotalFinal * 10) / 10; 
            var LipidosFinal = EnergiaFinal / TotalFinal * .3 / 9 
            document.forms[0].lipidos.value = Math.round(LipidosFinal * 10) / 10; 
         } 
} 

 

Inicialización de los acumuladores.

En primer lugar se declaran e inicializan a cero las variables que actuarán como acumuladores parciales de los datos de cada estrato.
 
         ...
         //Inicializa a cero todas las variables. 
         var EnergiaFinal = 0; 
         var ProteinaFinal = 0; 

         var ActLigera = 0; 
         var ActNormal = 0; 
         var ActElevada = 0; 
         var TotalFinal = 0; 
         ...

 
La primera vez que se usan las variables han de ser definidas con la clausula var, tal como se ve en todas ellas.

Cálculo de las IR de cada estrato.

A continuación se van acumulando los totales de energía y proteínas correspondientes a todos los individuos que conforman cada estrato, si es que hay alguno.
 
En este lugar falta incorporar la posibilidad de mostrar el subtotal de individuos que forman cada estrato, en la caja de texto que se ha dejado para ello (total[0] y total[1] en este ejemplo). Su incorporación se efectúa después de calcular el total del estrato, escribiendo el resultado ...
 
 
         ...
         //Recorre cada estrato (renglón) acumulando los 
         //   cálculos realizados. 
         for (n = 0; n < 2; n++){ 
             //Lectura de los valores del grupo y cálculos. 
             ActLigera = parseFloat(document.forms[0].datos[n * 3].value); 
             ActNormal = parseFloat(document.forms[0].datos[n * 3 + 1].value); 
             ActElevada = parseFloat(document.forms[0].datos[n * 3 + 2].value); 
             var Total = ActLigera + ActNormal + ActElevada; 
             TotalFinal = TotalFinal + Total 
             if (Total > 0) { 
                 EnergiaFinal = EnergiaFinal + EnergiaIR[n] * (ActLigera * .9 + ActNormal + ActElevada * 1.2); 
                 ProteinaFinal =  ProteinaFinal + ProteinaIR[n] * Total; 
             } 
         } 
        ...
 
El estamento for permite realizar las operaciones comprendidas en su interior (Comprendidas entre { ... }) un numero determinado de veces (bucles), dando un valor inicial a la, o las, variables del for situadas en el primer lugar del paréntesis, realizándolo cuando se cumple la condición indicada en segundo lugar, y ejecutando la acción indicada en ultimo lugar a cada vuelta.

    for (variable = valor inicial ; condición ; acción) {
       ..............
   }

En nuestro caso recorrerá los estratos (renglones) desde le primero, valor del indice cero ( n = 0 ), hasta el último, valor del indice 1 ( n < 2 ), incrementándolo de 1 en 1 (acción -> n++).

Un acumulador como TotalFinal, inicializado a cero antes de comenzar las vueltas (bucles) "for", contendrá al finalizar la primera vuelta el total del individuos del primer estrato, los de actividad ligera, más los de actividad normal, más los que realizaban una actividad elevada. En la segunda vuelta a ese valor acumulado y guardado en la variable TotalFinal se le agregará el total del segundo estrato, y volverá a guardarse el resultado en la misma variable de nuevo. En la última vuelta tendrá los datos de todos los estratos menos ese último que se le añadirá en ese momento.

Tras ello, y para calcular la cantidad de proteína recomendada para todas las personas del estrato bastara multiplicar este numero por las IR de proteínas del mismo y añadirlas a su acumulador.
 

ProteinaFinal =  ProteinaFinal + ProteinaIR[n] * Total;

El caso de la energía es algo mas complejo ya que depende del tipos de actividad física realizada. En este caso han de reducirse un 10% las IR de energía para las personas que realicen una actividad ligera e incrementarse un 20% para las que tengan una actividad elevada.
 

Energía del estrato = EnergiaIR[n] * 0.9  * ActLigera +  EnergiaIR[n] * ActNormal  +  EnergiaIR[n] * 1.2 * ActElevada
Energía del estrato = EnergiaIR[n] * (ActLigera * .9 + ActNormal + ActElevada * 1.2);
 
EnergiaFinal = EnergiaFinal + EnergiaIR[n] * (ActLigera * .9 + ActNormal + ActElevada * 1.2);
 
 
Cálculo de las IR medias y presentación de resultados.

Una vez recorridos todos los estratos, se calcula las IR medias del grupo dividiendo el total acumulado para cada elemento por el numero total de individuos que conforman el grupo.
 
 
         ...
         //Presentación de resultados. 
         document.forms[0].total[2].value = Math.round(TotalFinal); 
         //Evita calcular y presentar datos imposibles. 
         if ( TotalFinal > 0 ){ 
            document.forms[0].energia.value = Math.round(EnergiaFinal / TotalFinal); 
            document.forms[0].proteina.value = Math.round(ProteinaFinal / TotalFinal * 10) / 10; 
            var LipidosFinal = EnergiaFinal / TotalFinal * .3 / 9 
            document.forms[0].lipidos.value = Math.round(LipidosFinal * 10) / 10; 
         } 
        ... 
 

En esta última zona se muestra en primer lugar el total de individuos que forman el grupo estudiado, guardado en la variable TotalFinal, y en función de este resultado se calculan las IR medias. Si no hay ningún dato en la pirámide de población, no hay ningún calculo que realizar y no se hace, entre otras cosas para evitar la división por cero que se provocaría. Si hay al menos 1 individuo, se efectúa el cálculo y se muestran los resultados redondeados a enteros mediante el objeto Math.round() o con un numero fijo de decimales multiplicando el dato primero por 10 elevado al numero de decimales que deseamos, redondeándolo y dividiendo por el mismo factor que multiplicamos inicialmente.

Además, en el último cálculo se ve como pueden añadirse resultados proporcionales a algunos de los ya encontrados, en este caso los lípidos que han de formar parte de la dieta, y de los que conocemos que no habrán de aportar mas del 30% de la energía de la misma y que su equivalente calórico es de 9 KCal/g.
 

var LipidosFinal = EnergiaFinal / TotalFinal * .3 / 9
 

Despues de todo esto la página deberia funcionar correctamente. Para comptobarlo se introducen datos que hallan sido calculdaos previamente y cuyo resultado conozcamos, para verificar los que nos indica la paguina diseñada.
 


Finalmente, todo el archivo de la página Web ha de tener la siguiente estructura:
 
<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_2</TITLE> 
<SCRIPT LANGUAGE="javascript"> 
//Definición inicial de variables. 
var EnergiaIR = new Array(2); 
var ProteinaIR = new Array(2); 
//IR del primer estrato. 
EnergiaIR[0] = 2300; 
ProteinaIR[0] = 41; 
//IR del segundo estrato. 
EnergiaIR[1] = 2500; 
ProteinaIR[1] = 45; 

//Funcion que calcula las IR medias del grupo. 
function IR(){ 
         //Inicializa a cero todas las variables. 
         var EnergiaFinal = 0; 
         var ProteinaFinal = 0; 

         var ActLigera = 0; 
         var ActNormal = 0; 
         var ActElevada = 0; 
         var TotalFinal = 0; 

         //Recorre cada estrato (renglon) acumulando los 
         //   cálculos realizados. 
         for (n = 0; n < 2; n++){ 
             //Lectura de los valores del grupo y cálculos. 
             ActLigera = parseFloat(document.forms[0].datos[n * 3].value); 
             ActNormal = parseFloat(document.forms[0].datos[n * 3 + 1].value); 
             ActElevada = parseFloat(document.forms[0].datos[n * 3 + 2].value); 
             var Total = ActLigera + ActNormal + ActElevada; 
             TotalFinal = TotalFinal + Total 
             if (Total > 0) { 
                 EnergiaFinal = EnergiaFinal + EnergiaIR[n] * (ActLigera * .9 + ActNormal + ActElevada * 1.2); 
                 ProteinaFinal =  ProteinaFinal + ProteinaIR[n] * Total; 
             } 
         } 
         //Presentación de resultados. 
         document.forms[0].total[2].value = Math.round(TotalFinal); 
         //Evita calcular y presentar datos imposibles. 
         if ( TotalFinal > 0 ){ 
            document.forms[0].energia.value = Math.round(EnergiaFinal / TotalFinal); 
            document.forms[0].proteina.value = Math.round(ProteinaFinal / TotalFinal * 10) / 10; 
            var LipidosFinal = EnergiaFinal / TotalFinal * .3 / 9 
            document.forms[0].lipidos.value = Math.round(LipidosFinal * 10) / 10; 
         } 

//Valida los datos introducidos en las tres casilla 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 alfabeticos. 
         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"> 
<FORM> 
<TABLE BORDER COLS=7 WIDTH="470" > 
<TR> 
<TD WIDTH="60">Mujeres</TD> 
<TD ALIGN=CENTER COLSPAN="3">Actividad f&iacute;sica</TD> 
<TD></TD> 
<TD ALIGN=CENTER WIDTH="60">Energ&iacute;a</TD> 
<TD ALIGN=CENTER WIDTH="60">Prote&iacute;na</TD> 
</TR> 

<TR> 
<TD>Edad</TD> 
<TD WIDTH="60">Ligera</TD> 
<TD>Normal</TD> 
<TD>Intensa</TD> 
<TD>Total</TD> 
<TD ALIGN=CENTER>KCal</TD> 
<TD ALIGN=CENTER>g</TD> 
</TR> 

<TR> 
<TD>10 - 12</TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(0)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(1)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(2)"></TD> 
<TD><INPUT type="text" name ="total" size=5 value="0" onFocus="total[0].blur()"></TD> 
<TD ALIGN=CENTER>2300</TD> 
<TD ALIGN=CENTER>41</TD> 
</TR> 

<TR> 
<TD>13 - 15</TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(3)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(4)"></TD> 
<TD><INPUT type="text" name ="datos" size=5 value="0" onBlur="validar(5)"></TD> 
<TD><INPUT type="text" name ="total" size=5 value="0" onFocus="total[1].blur()"></TD> 
<TD ALIGN=CENTER>2500</TD> 
<TD ALIGN=CENTER>45</TD> 
</TR> 

<TR> 
<TD></TD> 
<TD ALIGN=CENTER VALIGN=CENTER COLSPAN="3"><INPUT type="button" value="Calcular" onClick="IR()"></TD> 
<TD><INPUT type="text" name ="total" size=5 value="0" onFocus="total[2].blur()"></TD> 
<TD></TD> 
<TD></TD> 
</TR> 

</TABLE> 

&nbsp; 
<BR>&nbsp; 
<TABLE BORDER COLS=3 WIDTH="470" > 
<TR> 
<TD></TD> 
<TD ALIGN=CENTER VALIGN=CENTER><INPUT type="reset" value="Borrar" name="borrar"></TD> 
<TD></TD> 
</TR> 
</TABLE> 

&nbsp; 
<BR>&nbsp; 
<TABLE BORDER WIDTH="700" > 
<TR> 
<TD ALIGN=CENTER COLSPAN="3">Ingestas Recomendadas ( IR )</TD> 
<TD>Observaciones</TD> 
</TR> 

<TR> 
<TD>Energ&iacute;a</TD> 
<TD ALIGN=CENTER VALIGN=CENTER WIDTH="50"><INPUT type="text" name ="energia" value="0" size=5 onFocus="energia.blur()"></TD> 
<TD>KCal</TD> 
<TD>Valores medios a los que ajustarse (ni mas ni menos).</TD> 
</TR> 

<TR> 
<TD>Prote&iacute;nas</TD> 
<TD ALIGN=CENTER VALIGN=CENTER><INPUT type="text" name ="proteina" value="0" size=5 onFocus="proteina.blur()"></TD> 
<TD>g</TD> 
<TD>Ha de superar la cifra indicada.</TD> 
</TR> 

<TR> 
<TD>L&iacute;pidos</TD> 
<TD ALIGN=CENTER VALIGN=CENTER><INPUT type="text" name ="lipidos" value="0" size=5 onFocus="lipidos.blur()"></TD> 
<TD>g</TD> 
<TD>Deber&iacute;a ser menos del 30% de la energ&iacute;a total ingerida.</TD> 
</TR> 
</TABLE> 

</FORM> 
</BODY> 

</HTML> 


Puede grabar esta hoja en su ordenador y luego copiar este último programa fuente y pegarlo en un archivo vacio nuevo. Grabelo con el nombre IR_2.html y podrá verlo en su navegador y ejecutar todas sus zonas interactivas. Este archivo sera la base de las futuras ampliaciones.

Tambien 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.