CAPÍTULO 3. APLICACIÓN JAVASCRIPT - Portal de sistemas ...

APLICACIÓN JAVASCRIPT

121

CAPÍTULO 3. APLICACIÓN JAVASCRIPT

En esta parte del proyecto hemos diseñado una aplicación web, con JavaScript, con el objetivo, igual que la aplicación Java descrita en el capítulo 2 de este proyecto, de servir como herramienta para la estimación del número de colectores solares planos para producción de ACS.

La razón de crear esta segunda aplicación es que el objetivo principal de esta parte del proyecto

era implementar los métodos de cálculo propuestos, en la aplicación Java, dentro de una web. Pensamos que el lenguaje de programación JavaScript nos permite alcanzar dicho objetivo de una manera más rápida y sencilla.

Aunque con menos detalles que la aplicación Java, con los mismos métodos de cálculo, estima

el número de colectores necesarios para la demanda energética anual, la aportación solar anual, el déficit energético anual y la fracción solar (F-chart). En este caso, los métodos de cálculos están programados con JavaScript y la aplicación se ejecuta dentro de una web, en el navegador, sin necesidad de descargar la aplicación ni tener instalado el JDK de Java. El funcionamiento de esta aplicación solo depende de si disponemos de un navegador que admita el uso de scripts. En una misma pantalla se ejecutan todas las operaciones de cálculo cada vez que cambiamos el valor de alguna variable. Otra diferencia con la aplicación Java es que no hay conexión a base de datos, no da opción a almacenar resultados ni a obtener informes sobre las variaciones de resultados respecto a las variables del problema. Además, en este caso, los datos de ocupación, temperatura de uso, inclinación y consumo de ACS permanecen constantes para todo el año y no podemos cambiarlos mes a mes como en la aplicación Java.

Igual que en la aplicación Java, aunque de forma distinta, el programa permite cambiar el valor

de las variables que intervienen en los dos métodos y ver de forma gráfica como influyen en el resultado. Hay variables que solo se emplean en uno de los dos métodos, por eso, no se trata de comparar el resultado de los dos métodos de cálculo sino de tener dos referencias a la hora de estimar la aportación solar de una instalación para la producción de ACS, mediante colector solar plano, para unas condiciones de consumo y localización dadas.

Para este proyecto hemos creado una aplicación web HTML5 desarrollada con el programa

NetBeans IDE 8.0.1 . El presente capítulo se compone de las siguientes partes:

3.1. Memoria de cálculos

3.2. Memoria descriptiva

3.2.1. HTML

3.2.2. CSS

3.2.3. JavaScript

En "Memoria de cálculos" se exponen los cálculos principales que se realizan en el programa,

las variables que intervienen en cada operación y el código JavaScript para cada uno. En

APLICACIÓN JAVASCRIPT

122

"Memoria descriptiva" se trata de mostrar de forma breve y gráfica las partes que componen la aplicación web.

Dentro de este proyecto, en el documento Apéndice I. "Ejemplos", se presenta un ejemplo de

cálculos tal como lo podemos sacar por impresora. En el documento Apéndice II. "Códigos", se muestra todo el código programado en cada una de las partes creadas para este proyecto (HTML, CSS y JavaScript).

APLICACIÓN JAVASCRIPT. MEMORIA DE CÁLCULOS

123

3.1. Memoria de cálculos

Siguiendo el método de cálculo de CENSOLAR [1], calcula el número de colectores teórico para cubrir la demanda energética anual en función de la radiación solar anual por m2, calculada para una inclinación dada y en la provincia seleccionada. Con este resultado el usuario decide el número de colectores que quiere instalar y, en función de la superficie resultante, el programa calcula la aportación solar anual y el déficit energético anual. Por otro lado, para los mismos datos de consumo de ACS, el programa aplica el método F-chart y calcula la cobertura solar anual con el mismo número de colectores decidido tras los resultados del método anterior.

El programa permite cambiar el valor de las variables que intervienen en los dos métodos y ver

de forma gráfica como influyen en el resultado. Como hay variables que se emplean en uno y en el otro no, no se trata de comparar el resultado de los dos métodos de cálculo sino de tener dos referencias a la hora de estimar la aportación solar de una instalación para la producción de ACS, mediante colector solar plano, para unas condiciones de consumo y localización dadas.


124

El presente apartado se compone de las siguientes partes: 3.1.1. Datos y resultados 3.1.2. Datos por defecto 3.1.3. Cálculo de las cargas de consumo de ACS 3.1.4. Dimensionado de la superficie de colectores

3.1.4.1. Justificación de cálculos 3.1.5. Código JavaScript para los cálculos

3.1.5.1. Consumo mensual de ACS 3.1.5.2. Salto térmico 3.1.5.3. Necesidades energéticas mensuales 3.1.5.4. Radiación media sobre superficie horizontal 3.1.5.5. Radiación media sobre superficie inclinada 3.1.5.6. Intensidad media útil de radiación solar 3.1.5.7. Rendimiento del colector solar plano 3.1.5.8. Aportación solar por m2 3.1.5.9. Energía neta disponible 3.1.5.10. Superficie colectora 3.1.5.11. Energía total obtenida 3.1.5.12. Aportación de energía solar 3.1.5.13. Déficit de energía 3.1.5.14. Aportación solar anual

3.1.6. Método F-chart 3.1.7. Código JavaScript para los cálculos (F-chart)

3.1.7.1. Estimación de la carga calorífica 3.1.7.2. Estimación de la energía absorbida y perdida 3.1.7.3. Cálculo del parámetro de ganancia D1 3.1.7.4. Cálculo del parámetro de pérdidas D2 3.1.7.5. Cobertura solar mensual f 3.1.7.6. Cobertura solar anual CSA 3.1.7.7. Volumen de acumulación


125

3.1.1. Datos y resultados Partiendo de los datos de la columna de izquierda el programa calcula los de la derecha. Método 1: basado en CENSOLAR [1] DATOS RESULTADOS Inclinación : Desviación N-S (β): 0 Corrección de H Pérdidas globales Nº de usuarios Litros/día·usuario Área de colector Parámetros b y m del colector Corrección de b Temperatura de uso Precio del kw·h : € Ocupación %mes Datos mensuales

Temperatura de red Radiación H Factor k (inclinación) Horas sol Temperatura ambiente

Nº colectores a instalar

Resultados mensuales: Consumo ACS m3 Salto térmico Demanda termias Demanda MJ H corregida Energía neta incidente Intensidad incidente Energía neta disponible MJ/m2 Energía neta total MJ/mes Rendimiento de un colector Aportación solar por m2 Sustitución % Déficit de energía Coste eléctrico de la demanda Coste eléctrico del déficit Ahorro

Resultados anuales: Demanda anual: MJ Energía/año·m2 : MJ Aportación solar: % Déficit energético: MJ Ahorro anual : € Coste energía auxiliar: €

Superficie colectora teórica: m2 Número de colectores teórico: Superficie colectora resultante (A) Condición de diseño: 60<C/A<100

VARIACIONES (*) Ocupación Litros/día·usuario Temperatura de uso Inclinación Número de colectores


126

Método 2: basado en F-Chart DATOS RESULTADOS Inclinación Desviación N-S (β): 0 Corrección de H Pérdidas globales Nº de usuarios Litros/día·usuario Área de colector Parámetros b y m del colector Corrección de b Temperatura de uso Ocupación %mes Datos mensuales

Temperatura de red Radiación H Factor k (inclinación) Horas sol Temperatura ambiente

Nº colectores a instalar Calor específico Modificación del ángulo de incidencia Factor captador-intercambiador Acumulación por m2 Volumen de acumulación (M) Temperatura mínima del ACS

Consumo de ACS litros/día Carga calorífica mensual Superficie resultante (A) Energía solar absorbida mensual Factor F’rUL Factor k1 corrección por acumulación Factor k2 corrección por Energía perdida mensual Variable D1 para f Variable D2 para f Fracción solar mensual f Energía solar útil mensual Fracción solar anual CSA volumen de acumulación teórico (V) Condiciones de diseño

0.8<=V/M<=1.2 37.5<=M/A<=300

VARIACIONES(*) Ocupación Litros/día·usuario Temperatura de uso Inclinación Número de colectores Kg de acumulación b m Factor captador-intercambiador Modificación del ángulo de incidencia

(*) Denominamos "variaciones" a las variables para las cuales el programa dispone de "select"

con los que podemos ver las variaciones de los resultados en función del incremento de estás variables. Cada vez que seleccionamos el valor de una variable se recalculan todas las operaciones y se dibujan las gráficas con los nuevos valores y resultados. Las variaciones afectan a los dos métodos y los resultados variarán según influyan o no.


127

figura 1. "select" para las variables de cálculos.

3.1.2. Datos por defecto. El programa tiene la opción de introducir los siguientes valores por defecto: Inclinación : 45 Desviación N-S (β): 0 0 Corrección de H: 1.05 Pérdidas globales: 0.15 Nº de usuarios: 32 Litros/día·usuario: 40 Área de colector: 2.01 Parámetros b y m del colector: 0.83 y 4.8 Corrección de b: 0.94 Temperatura de uso: 45 Precio €/kwh 0.12 Ocupación %mes 100 Temperatura de red Según provincia Radiación H Según provincia Factor k (inclinación) Según provincia Horas sol Según provincia Temperatura ambiente Según provincia Calor específico 4184 J/kgºC Modificación ángulo de incidencia 0.96 Factor captador-intercambiador 0.95 Acumulación por m2 70 litros Temperatura mínima del ACS 45 Valores mensuales por defecto. (fuente CENSOLAR [2]) En función de la provincia y la inclinación seleccionadas el programa introduce los valores

para cada mes de : � Temperatura de red � Radiación H � Factor k (inclinación) � Horas sol � Temperatura ambiente

seleccionar provincia


128

Seleccionando una provincia, el programa realiza todas las operaciones a la vez tomando todos los valores indicados en los demás "select" (figura 1). A partir de aquí, cada vez que cambiamos el valor de cualquier variable el programa recalcula y dibuja las gráficas con los nuevos valores y resultados.

A continuación describiremos cómo se realizan los cálculos necesarios en el programa.

3.1.3. Cálculo de las cargas de consumo de ACS

Una vez seleccionada la localización del proyecto, el programa toma los siguientes datos del

resto de select: � Inclinación: Ángulo que formarán los colectores respecto a la superficie horizontal. Por

defecto, toma el valor de 45º pero tenemos la opción de tomar los valores 35,40,45,50,55 y 60. (ventana datos generales)

� Desviación N-S: por defecto 0º, todos los datos en el programa están referidos a este valor. � Corrección de H: factor que modifica el valor de la radiación media diaria sobre superficie

horizontal (H), por defecto el programa toma un valor de 1.05, (valor para niveles de contaminación atmosférica muy bajos).

� Pérdidas globales: por defecto toma un valor de 0.15 como valor recomendado (CENSOLAR

[1]), cuando no se dispone de datos para estimar las pérdidas de calor, que dependen del aislamiento y del tipo de consumo.

� Nº de usuarios: Número máximo de usuarios, en un mes, para los que se calcula la

instalación. � Litros/día·usuario: Consumo diario estimado para cada usuario. Por defecto, 40 litros. � Área del colector: superficie útil en m2 del colector que el proyectista decida instalar. Por

defecto toma 2.01 m2. � Parámetro b: factor de eficiencia óptica de los colectores, por defecto b=0.83. � Parámetro m: Coeficiente de pérdidas de los colectores, por defecto m=4.8. � Temperatura de uso: temperatura de uso del ACS, por defecto 45ºC. � Precio del kwh: por defecto, energía eléctrica, 0.12€/kwh.

El programa asigna estos datos al proyecto y partir de aquí podemos calcular las necesidades

energéticas para cada mes, para lo cual necesitamos conocer los siguientes datos mensuales:


129

� Ocupación: Es el porcentaje del número máximo de usuarios que cada mes utilizará la instalación. Por defecto tiene un valor del 100% todos los meses, podemos cambiarlo en el "select" "% ocupación".

� Consumo mensual (m3): Es el consumo total de ACS cada mes, en m3. � Temperatura media del agua red: Por defecto el programa toma los valores de la capital de la

provincia seleccionada en el proyecto (fuente CENSOLAR [2]), podemos consultarlos en la tabla "Datos mensuales" a la que podemos acceder en el enlace "Datos mensuales" que aparece a la derecha. (figura 2)

figura 2. enlace a tabla "Datos mensuales"

� Salto térmico: Diferencia entre la temperatura de uso y la temperatura de red. � Demanda energética: Energía necesaria para calentar el agua desde la temperatura de red

hasta la de consumo. El valor calculado aparece en la columna MJ/mes en la tabla "Datos mensuales".

figura 3. tabla "Datos mensuales"

3.1.4. Dimensionado de la superficie de colectores

Se calculará una superficie colectora "teórica", siguiendo el método de CENSOLAR [1],

dividiendo la necesidad energética anual entre la disponible por metro cuadrado de superficie expuesta a la radiación solar. En el programa java, primero se calcula la demanda de energía anual (DemandaAnual) sumando la demanda de cada mes (vDemanndaMJme[i]), después calcula la energía neta disponible por m2 al año (ENDañoM2) sumando la energía disponible cada mes (vENDmes[i]), dividiendo estos dos valores obtiene la superficie SCteorica. Con el dato de la superficie de un colector (Acol), que toma de los datos de inicio, calcula el número de colectores necesarios (Ncteorico) para cubrir dicha superficie. Para todo esto necesitamos conocer los siguiente datos:


130

3.1.4.1. Justificación de cálculos � Necesidad energética diaria en MJ.

� H: Energía incidente en un m2 horizontal (MJ), su valor mensual aparecerá en la ventana

"Datos mensuales" para la provincia seleccionada. (fuente CENSOLAR [2]) � Valor de H corregido: por defecto, multiplica H por el factor 1.05 (valor para zona de sierra,

atmósfera limpia), su valor resultante puede consultarse en la tabla "Datos mensuales" (figura 3).

� Coeficiente de corrección k para una latitud de la provincia seleccionada y la inclinación

tomada como dato, su valor para cada mes aparece en la tabla "Datos mensuales" (figura 3). (fuente CENSOLAR [2])

� Energía neta incidente (MJ/m2): E=0.94kH. Considera que un 6% de la energía incidente no

se aprovecha debido a los momentos en que la intensidad es menor del valor umbral 200 W/m2 (CENSOLAR [1])

� Nº de horas de sol útiles, sus valores dependen de la provincia seleccionada y puede

consultarse en la tabla "Datos mensuales" (figura 3).. (fuente CENSOLAR [2]) � Intensidad media útil I, en W/m2, se obtiene dividiendo E (previamente pasada a julios) por

las horas de sol útiles (pasada a segundos), en la tabla "Datos mensuales" (figura 3). � Temperatura ambiente durante las horas de sol: sus valores dependen de la provincia

seleccionada y puede consultarse en la tabla "Datos mensuales" (figura 3). (fuente CENSOLAR [2])

� Rendimiento de los colectores. Por defecto, consideramos un colector con cubierta y

destinado a la obtención de ACS, el factor b () se corrige multiplicándolo por 0.94. Su valor resultante puede consultarse en la tabla "Resultados mensuales".

figura 4. tabla "Resultados mensuales"

� Aportación solar por m2: Se obtiene multiplicando la ennergía neta incidente (E) por el rendimiento de los colectores.

� Energía neta disponible al día por m2: corregimos la Aportacion con el factor 0.85 a fin de

considerar las pérdidas producidas en el acumulador (15%). � Energía neta disponible al mes por m2: multiplica por el número de días de cada mes. Su

valor puede consultarse en la tabla "Resultados mensuales" (figura 4).


131

� Superficie colectora necesaria. Dividimos la demanda energética total entre la energía neta disponible por m2.

Una vez decidido el número de colectores a instalar, el programa continúa realizando los

siguientes cálculos. � Energía solar disponible: Se obtiene multiplicando la superficie proyectada por la energía

neta por m2 � Sustitución: representa la fracción de consumo energético que es satisfecha por la energía

solar. � Déficit energético: Representa la energía auxiliar que hay que aportar los meses en que la

energía solar no basta por sí sola para cubrir el 100% de las necesidades. � Coste de la energía eléctrica ( € por kwh) para cubrir el 100% de la demanda.

� Coste de la energía eléctrica para cubrir el déficit.

� Ahorro en el coste de energía eléctrica.


132

3.1.5. Código JavaScript para los cálculos A continuación veremos como se realizan todos estos cálculos en el programa .

3.5.1.1. Cálculo del consumo mensual de agua

Multiplica los litros/día·usuarios (LitrosDia) por el número de usuarios (NunUsu), por el

número de días del mes correspondiente (vDias[i]) y por el porcentaje de ocupación del mes calculado vOcupacion[i].

El programa nos da la opción de recalcular el consumo cambiando la ocupación, tanto en

porcentaje como en número de usuarios, y los litros diarios y así observar como varían los demás resultados en función de estas variables.

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: VConsumo[i]: resultado del consumo de ACS en el mes [i]

LitrosDia : dato del consumo de ACS por día y usuario NumUsu : dato del número de usuarios vDias[i]: dato del número de días del mes [i] vOcupacion: dato del % de usuarios en el mes [i]

Método: function Calcula_vConsumo() { for(i=0;i<12;i++){

vConsumo[i]=(LitrosDia*NumUsu*vDias[i]*vOcupacion[i])/100000; mes=["enero ","febrero ","marzo ","abril ","mayo ","junio ","julio ","agosto

","septiembre ","octubre ","noviembre ","diciembre "]; var vCon="<option>"+vmes[0]+vConsumo[0]+" m3</option>";

for(j=1;j<12;j++){vCon+="<option>"+vmes[j]+vConsumo [j]+" m3</option>"; } }} Los valores calculados podemos consultarlos en la tabla "Datos mensuales" (figura 4).

3.1.5.2. Cálculo del salto térmico ( ∆T )

El salto térmico es la diferencia de temperatura entre, la temperatura de la red de distribución

de agua y la temperatura de uso o consumo del agua caliente sanitaria, producida en la instalación. Por defecto, los datos incluidos en el programa están referidos a la capital de la provincia seleccionada en cada proyecto pero también tenemos la opción de introducir los valores que queramos en la tabla de la ventana "datos mensuales".

De este salto térmico depende, la cantidad de energía que será necesario aportar mediante el

sistema de agua caliente sanitaria por energía solar, y el rendimiento de la instalación.


133

El valor de la temperatura de uso, por defecto de 45 ºC, podemos modificarlo en el select "Temp ACS".

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vSalto[i] : resultado del salto térmico en el mes [i]

Tuso : dato de la temperatura de uso del ACS VTred [i] : dato temperatura del agua red, para la provincia seleccionada, el mes [i]

Método: function CalculavSalto() { var temp=comboTuso.options[comboTuso.selectedIndex].text; var i=0; for(i=0;i<12;i++){

vSalto[i]=Tuso-vTred[i]; } }

Los valores resultantes podemos consultarlos en la tabla "Datos mensuales" (figura 4).

3.1.5.3. Cálculo de las necesidades energéticas mensuales (neMJ)

Necetitamos calcular la energía necesaria para calentar, los litros de agua calculados en el

consumo, desde la temperatura de red de distribución hasta la temperatura de consumo durante todos los días de cada mes. Los cálculos se realizan según la siguiente ecuación:

Q = m * Cp * ( ∆T )* N° días

� m es la cantidad de agua a calentar cada día. � Cp es el calor especifico del agua 4.184 KJ / litro � ∆T es el incremento de temperatura que del agua ºC � Q es la necesidad energética mensual MJ / mes � N° días es el numero de días de cada mes.

El programa nos da la opción de recalcular la demanda energética cambiando la ocupación,

litros diarios y la temperatura de uso y así observar como varían los demás resultados en función de estas variables. Los resultados se pueden consultar en la tabla "Datos mensuales" (figura 4).

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vDemandaMJmes[i] : resultado de la demanda energética en el mes [i]

vConsumo[i] : consumo mensual de ACS en el mes [i], descrito anteriormente vSalto[i] : salto térmico en el mes [i], descrito anteriormente

Método: function Calcula_vDemandaMJmes() { var i=0;var da=0; for(i=0;i<12;i++){

vConsumo[i]=(LitrosDia*NumUsu*vDias[i]*vOcupacion[i])/100000; vSalto[i]=Tuso-vTred[i]; vDemandaMJmes[i]=vConsumo[i]*vSalto[i]*4.184;//MJ/mes

da+=vDemandaMJmes[i]; } DemandaAnual=da; }


134

3.1.5.4. Cálculo de la radiación media diaria sobre superficie horizontal para cada mes ( H ) En programa contiene los datos de radiación solar de las tablas de CENSOLAR [2]. Las

unidades de partida son MJ / m2 por día medio de cada mes. Una vez seleccionada la provincia, los valores de radiación aparecen, por defecto, en la ventana "Datos mensuales". Para los cálculos, este valor se corrige multiplicándolo por el factor "CorH" según condiciones ambientales de la localización del proyecto (1.05 para atmósferas muy limpias y 0.95 para atmósferas contaminadas). Estos valores se pueden consultar en la tabla "Datos mensuales".

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vHcor[i] : resultado de la radiación media diaria, corregida, sobre superficie

horizontal, en la provincia seleccionada, para el mes [i] vH[i] : dato de la radiación media diaria sobre superficie horizontal, en la provincia seleccionada, para el mes [i] CorH : dato del factor de corrección de H, por defecto 1.05.

Método: function Calcula_vHcor() { var i=0; for(i=0;i<12;i++){

vHcor[i]=vH[i]*CorH;//CorH 1.05 para atmósfera muy limpias, CorH 0.95 para atmósfera contaminada

}}

3.1.5.5. Cálculo de la radiación media diaria sobre superficie inclinada para cada mes Según la inclinación de los colectores, se calcula la radiación media incidente, por m2 de

superficie colectora, multiplicando el valor de la radiación sobre superficie horizontal (vHcor[i]) por el factor "k" (vCork[i]) que depende la inclinación, del mes y de la localización (latitud) del proyecto. El programa contiene los valores de "k" para cada provincia y para las inclinaciones de 35,40,45,50,55 y 60º. En función del valor de inclinación con el que estemos operando los valores de k, para cada mes pueden consultarse en la tabla "Datos mensuales" (figura 3).

Por tratarse de un sistema de aprovechamiento térmico de la energía solar, se consideran una

pérdidas del 6% debido a los momentos en que, debido a la poca altura del sol, la intensidad de irradiación es menor del valor umbral de 200 w/m2. Por eso, además se corrige el resultado multiplicando por el factor 0.94 . De esta forma tendremos el valor efectivo de la energía aprovechable por los colectores.

En el programa:


135

Archivo js: localizacionjs_ACSenJS Variables: vE[i] : resultado de la radiación aprovechable que incide un día medio sobre cada

m2 de superficie inclinada de colectores en el mes [i] vHcor [i] : resultado de la irradiación horizontal media para el mes [i] en la provincia seleccionada. vCork [i] : dato del factor de corrección "k" para el mes [i], para la inclinación y la provincia seleccionada. 0.94 : dato del factor resultante de estimar un 6% de pérdida de la energía incidente debido a los momentos en que la altura del sol es pequeña resultando que la intensidad es menor del valor umbral de 200 w/m2

Método: function Calcula_vE() { Calcula_vHcor(); var i=0; for(i=0;i<12;i++){

//no es corb aunque tenga el mismo valor, es corrección de E al considerar perdidas de 6%, factor //experimental, por momentos en que la intensidad es menor que el valor umbral de 200 w/m2,

vE[i]=0.94*vCork[i]*vHcor[i]; }}

Los resultados pueden consultarse en la tabla "Datos mensuales" (figura 3).

3.1.5.6. Cálculo de la intensidad media útil de radiación solar (vI)

La intensidad media útil de la radiación solar, es la es la intensidad con que incide la radiación

de forma instantánea en un día medio de cada mes. Esta intensidad se mide en W / m2, por ello se transformaran las unidades de radiación diaria media de cada mes en unidades de radiación instantánea, dividiendo la radiación diaria media entre el número de horas medias de cada mes, obteniendo la intensidad media útil para cada mes según la siguiente ecuación:

I = H*106 / n° horas * 3600 =(MJ * 106 J/ MJ ) / m2 día * n° horas *3600 s / h =W / m 2

El programa asigna un número de horas sol útil, a cada mes, para cada provincia. Estos valores

son los que emplea para calcular la Intensidad y pueden ser consultados en la tabla "Datos mensuales". Los resultados obtenidos son de gran importancia ya que serán utilizados para calcular el rendimiento del colector solar plano de la instalación.

Archivo js: localizacionjs_ACSenJS Variables: vI[i] : resultado de la intensidad media útil de radiación solar el mes [i]

vE[i] : 277.778 : resultado del factor de conversión de MJ/m2·día a W/m2 vHorasSolUtil[i] : dato horas sol el mes [i], en la provincia seleccionada

Método: function Calcula_vI() { var i=0; for(i=0;i<12;i++){ vI[i]=277.778*vE[i]/vHorasSolU til[i];}

}

Los resultados se pueden consultar en la tabla "Datos mensuales" (figura 3).


136

3.1.5.7. Cálculo del rendimiento del colector solar plano Los colectores solares planos se ensayan generalmente siguiendo un procedimiento que

consiste en hacerlos funcionar en un banco de pruebas bajo unas condiciones estables de radiación solar, velocidad del viento, temperatura del fluido a la entrada y de ambiente, durante un periodo de tiempo en el que la temperatura de salida del fluido y la energía útil extraída no varían sensiblemente.

La ecuación para calcular el rendimiento del colector en distintas condiciones de

funcionamiento es la siguiente: η = m – b T/I

� m: coeficiente global de pérdidas, dato del colector. � b: factor de eficiencia óptica, dato del colector. Además se incluye un parámetro de

corrección de b "Corb" según el tipo de colector. Por defecto, el programa considera un colector plano con cubierta y destinado a la obtención de ACS, el factor b (0.83) se corrige multiplicando por Corb=0.94.

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vRendimiento[i] : resultado del rendimiento de los colectores para el mes [i]

vI[i] : resultado de la intensidad de la radiación solar para el mes [i] Corb : dato del factor de corrección del parámetro "b" de los colectores, por defecto 0.94. bcol : dato del factor de eficiencia óptica de los colectores mcol : dato del coeficiente general de pérdidas de los colectores Tuso : dato de la temperatura de uso del ACS vTamb[i] : dato de la temperatura ambiente para el mes [i]

Método: function Calcula_vRendimiento() { var i=0; for(i=0;i<12;i++){ vRendimiento[i]=100*Cor b*bcol-100*mcol*(Tuso-vTamb[i])/vI[i]; if(vRendimiento[i]<0){vRendimiento[i]=0;}}}

Estos datos de rendimiento son los que serán utilizados en los cálculos posteriores, para

calcular la energía que es aprovechada por el colector solar plano de la que incide sobre él. Los resultados se pueden consultar en la tabla "Resultados mensuales" (figura 4).

3.1.5.8. Cálculo de la aportación solar por m2 Llamamos "Aportación solar por m2" a la energía que incide por m2, de superficie de

colector solar plano, y que es transferida al fluido caloportador. Es decir, es la energía, procedente del sol, que el colector aprovecha de la energía total que incide sobre él. Esta energía incidente se calcula multiplicando la radiación solar que incide por día y metro cuadrado de superficie por el rendimiento del colector solar plano en cada mes y multiplicando por el numero de días de cada mes.


137

La ecuación que se aplicará para calcular la energía incidente considerando el rendimiento del colector solar plano será la siguiente:

Aportación = E * η

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vAportacion[i] : resultado de energía solar captada por m2 de colector el mes [i]

vE[i] : resultado de la radiación media diaria para el mes [i] vRendimiento [i] : resultado del rendimiento de los colectores para el mes [i]

Método: function Calcula_vAportacion() { var i=0; for(i=0;i<12;i++){

if(vOcupacion[i]>0){vAportacion[i]=vE[i]*vRendimiento[i]/100;} else{vAportacion[i]=0;}}

Los resultados, para cada mes, se pueden consultar en la tabla "Resultados mensuales" (figura

4).

3.1.5.9. Cálculo de la energía neta disponible (END)

El colector solar plano, las tuberías, el depósito interacumulador, y los demás accesorios de

una instalación solar térmica, durante el funcionamiento mantienen temperaturas superiores a la temperatura ambiente, perdiendo calor por conducción a través de las uniones del sistema a tierra y por convección y radiación al ambiente.

Las pérdidas por radiación son generalmente pequeñas siendo las pérdidas por convección las

más importantes. Las pérdidas de calor son una causa importante de la reducción del rendimiento del sistema de energía solar y obligan a aislar la instalación con el fin de minimizarlas.

En el propio colector solar plano existen pérdidas debido a los distintos fenómenos físicos de

transmisión de calor. Estas pérdidas son las siguientes: � Pérdida de calor frontal por radiación hacia el cielo debido a la absortancia del colector. � Pérdida de calor frontal por convección, en general depende de la velocidad del viento. � Pérdidas de calor posteriores y laterales del colector solar plano, que dependerán del tipo y

espesor del aislamiento estas pérdidas se estiman en un 2 o el 3 % de la energía captada. � Pérdidas por la cara posterior del colector solar plano, dependen del tipo y espesor de

aislamiento que ese utilice. � Pérdidas hacia arribas por la cara de expuesta a la radiación dependen de la emitancia del

colector solar plano. En el programa, todas estas perdidas se estiman, por defecto, en un 15 % de la energía captada

por el colector solar plano, por lo que la energía que será utilizada para el calentamiento del agua caliente sanitaria es el 85 % de la captada por el colector solar plano. Así se calculará la energía neta disponible multiplicando la energía incidente considerando el rendimiento del


138

colector solar plano, por el 85 % que será la que se aproveche. Este valor se puede cambiar en los datos de inicio del proyecto. Los cálculos se realizan según la siguiente ecuación:

Energía neta disponible = Aportación * 0,85

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vENDdia[i] : resultado de la energía neta diaria disponible por m2 para el mes [i]

vAportacion[i] : resultado de la energía solar captada por m2 de colector el mes [i] PerdGlo : dato del factor de pérdidas globales de la energía que llega a los colectores. (por defecto 0.15) vDias[i] : dato del número de días para el mes [i] vENDmes[i] : resultado de la energía neta mensual disponible por m2 el mes [i] ENDañoM2 : resultado de la energía neta disponible al año por m2.

Método: function Calcula_vENDmes() { var i=0;var anual=0; for(i=0;i<12;i++){

vENDdia[i]=vAportacion[i]*(1-PerdGlo);} for(i=0;i<12;i++){

vENDmes[i]=vENDdia[i]*vDias[i]; anual+=vENDmes[i];

}//anual ENDanualM2=anual;}

De este modo hemos calculado la energía solar por metro cuadrado y día, por mes y por año,

de la que se dispone para calentar el agua caliente sanitaria. Los resultados se pueden consultar en las tablas "Resultados mensuales" y "Resultados

anuales"(figura 5) .

3.1.5.10. Cálculo de la superficie colectora

Se calculará una superficie colectora "teórica", siguiendo el método de CENSOLAR [1],

dividiendo la necesidad energética anual entre la disponible por metro cuadrado de superficie expuesta a la radiación solar. En el programa java, primero se calcula la demanda de energía anual (DemandaAnual) sumando la demanda de cada mes (vDemanndaMJme[i]), después calcula la energía neta disponible por m2 al año (ENDañoM2) sumando la energía disponible cada mes (vENDmes[i]) , dividiendo estos dos valores obtiene la superficie SCteorica. Con el dato de la superficie de un colector (Acol), que toma de los datos de inicio, calcula el número de colectores necesarios (Ncteorico) para cubrir dicha superficie. Estos valores servirán al usuario del programa para decidir el número de captadores con los que contará la instalación que esté calculando. El valor introducido por el usuario (NCrecomendado) por la superficie de un colector (Acol) nos dará el valor de la superficie colectora total (SCresulatante) de la instalación calculada. El programa compara el dato de la superficie introducido con el consumo de ACS litros/día calculado y nos indica si cumple con la condición de diseño 60<=C/A<=100. Esta comprobación también se realizará cada vez que el usuario modifique el valor del consumo (C) y o de la superficie (A).


139

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: SCteorica : resultado de la superficie, de colectores, en m2 calculada.

NCteorico : resultado del número de colectores necesarios para la "SCteorica" calculada. DemandaAnual : resultado de la demanda energética para todo el año. ENDañoM2 : resultado de la energía neta disponible por m2 y año. Acol : dato en m2 del área de un colector. NCrecomendado : dato del número de colectores a instalar según el proyectista. Scresultante : resultado de la superficie total de colectores según el "NCrecomendado" y "Acol" ConsumoAnualACSm3 : resultado del consumo anual de ACS en m3. NumDiasAnual : resultado del número total de días del año. PruebaSC : resultado del cociente de consumo diario de ACS en m3 por m2 de colectores instalados.

Método: function Calcula_SCteorica(){ SCteorica=DemandaAnual/ENDanualM2; if(combopaneles.options[0].selected){txtsup.setAttribute("value",SCteorica.toFixed(2));

}} function Calcula_NCteorico(){

NCteorico=SCteorica/Acol; var p=combopaneles.options.length; var i=0; if(combopaneles.options[0].selected){

for(i=0;i<p;i++){ if(combopaneles.options[i].text===NCteorico.toFixed()){

combopaneles.options[i].selected=true;}}} txtnpa.setAttribute("value",NCteorico.toFixed(2));}

function Calcula_SCresultante() {

NCrecomendado=combopaneles.options[combopaneles.selectedIndex].text; SCresultante=NCrecomendado*Acol; txtsup.setAttribute("value",SCresultante.toFixed(2));}

function Calcula_PruebaSC() { PruebaSC=1000*ConsumoanualACSm3/(NumDiasAnual*SCresultante);}

function ComprobacionSC() { if(PruebaSC<60){CSC="No cumple";} else{if(PruebaSC>100){CSC="No cumple";}else{CSC="Cumple";}} var pruebaSC=PruebaSC.toFixed(2)+" "+CSC;

return CSC;}

Los resultados se pueden consultar en la tabla "Resultados anuales" (figura 5).


140

3.1.5.11. Cálculo de la energía total obtenida por el sistema de captación de energía solar térmica ( ENTotalmes )

En el apartado anterior hemos calculado la energía neta disponible por metro cuadrado de

colector para cada mes del año, en este apartado se calculará la energía total disponible y que se puede obtener por el sistema de energía solar térmica, para ello multiplicaremos la energía neta disponible por la superficie del colector solar plano en metros cuadrados.

Los cálculos de la energía total disponible se especifican a continuación según la siguiente

ecuación: Et = É * S En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vENTotalmes[i] : resultado de la energía neta total disponible, en función de la

superficie de colectores instalados, para el mes [i]. vENDmes[i] : resultado de la energía neta disponible por m2 de colector el mes [i]. Scresultante : resultado de la superficie de colectores instalada.

Método: function Calcula_vENTotalmes() { var i=0; for(i=0;i<12;i++){

vENTotalmes[i]=vENDmes[i]*SCresultante; }}

3.1.5.12. Cálculo de la aportación de energía de la instalación solar térmica a la producción de agua caliente sanitaria (Sustitución)

Para la producción de agua caliente sanitaria es necesario aportar energía, para elevar la

temperatura del agua, en el sistema objeto del proyecto, esta energía se aportará mediante un sistema de energía solar térmica. Este sistema, en días nublados y cubiertos no podrá proporcionar toda la energía necesaria, para el calentamiento de toda el agua caliente sanitaria que se consume en un día, aportando la energía que falta el sistema de aportación de energía auxiliar.

El sistema de energía solar térmica aportará una gran parte de las necesidades energéticas. Así

en este apartado se calculará el porcentaje de aportación de energía solar en el sistema de agua caliente sanitaria objeto del proyecto.

La aportación se calculará dividiendo la energía total obtenida "vENTotalmes" entre las

necesidades energéticas mensuales "vDemandaMJmes". En el programa java:


141

Archivo js: localizacionjs_ACSenJS Variables: vSustitucion[i] : resultado del cociente de la demanda energética y la energía solar

disponible para el mes [i]. vDemandaMJmes[i] : resultado de la demanda energética para el mes [i]. vENTotalmes[i] : resultado de la energía solar disponible para el mes [i].

Método: function Calcula_vSustitucion() { var i=0; for(i=0;i<12;i++){

if(vOcupacion[i]===0){vSustitucion[i]=0;} else{vSustitucion[i]=vENTotalmes[i]/vDemandaMJmes[i];}

}}

Los resultados pueden consultarse en la columna "Sustitución" de la tabla "Resultados mensuales" y en la gráfica del panel de la izquierda.

Durante los meses de verano suele producirse un superávit de energía térmica, es decir se

produce mas energía térmica de la que se consume, por lo que se podría utilizar este exceso de agua caliente sanitaria para otros usos que no sean los habituales.

3.1.5.13. Cálculo del déficit de energía aportada por la instalación solar.

El déficit de energía aportada por la instalación de energía solar, es la diferencia entre la

energía necesaria en cada mes y la energía que aporta dicha instalación para el calentamiento del agua caliente sanitaria. Es decir es la diferencia entre las necesidades energéticas mensuales ( vDemandaMJmes ) y la energía solar total disponible ( vENTotalmes ). Este déficit nos indica cuando la instalación de energía solar suministra toda la energía necesaria, y cuando es necesario que entre en funcionamiento el sistema auxiliar de aportación de energía, para suministrar el agua caliente sanitaria en las condiciones de consumo.

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: vDeficit[i] : resultado de la diferencia entre la demanda de energía y la energía

solar para cada mes [i] vDemandaMJmes[i] : resultado de la demanda energética para el mes [i]. vENTotalmes[i] : resultado de la energía solar disponible para el mes [i]. DeficitEnergeticoAnual : resultado de la suma de demanda energética no cubierta por energía solar durante todo el año.

Método: function Calcula_vDeficit() { var i=0; for(i=0;i<12;i++){

vDeficit[i]=vDemandaMJmes[i]-vENTotalmes[i];} } function Calcula_DeficitEnergeticoAnual() {

var defi=0;var i=0; for(i=0;i<12;i++){

if(vDeficit[i]<0){}else{defi+=vDeficit[i];}} deficitEnergeticoAnual=defi;}

Los resultados pueden consultarse en la columna "Déficit" de la tabla "Resultados mensuales".


142

Los valores negativos significan que existe superávit de energía disponible para el calentamiento del agua caliente sanitaria y por lo tanto están cubiertas todas las necesidades energéticas mediante la instalación de energía solar térmica para la obtención de ACS. Para calcular el déficit total anual, los valores negativos equivalen a un valor del 0%. Solo se indican en la pantalla para poder observar cuanto y cuando la energía solar disponible sobrepasa a la demandada.

3.1.5.14. Cálculo de la aportación solar anual

Nos da una idea del porcentaje de la demanda anual de energía que es sustituida por energía

solar. Como se indicó anteriormente, en los meses en que el valor de calculado vDeficit[i] resulte negativo se considera igual a 0.

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: VCobertura[i] : resultado del % de la demanda energética mensual cubierta por

energía solar para el mes [i] vDeficit[i] : resultado del déficit energético para el mes [i] aportacionAnual : resultado de % de la demanda energética anual cubierta por energía solar durante un año.

Método: function Calcula_vCobertura() { var i=0; for(i=0;i<12;i++){

vCobertura[i]=100*(1-vDeficit[i]/vDemandaMJmes[i]); }}

function Calcula_DeficitEnergeticoAnual() {

var defi=0;var i=0; for(i=0;i<12;i++){

if(vDeficit[i]<0){}else{defi+=vDeficit[i];} } deficitEnergeticoAnual=defi}

function Calcula_aportacionAnual() {

aportacionAnual=100*(DemandaAnual-deficitEnergeticoAnual)/DemandaAnual;}

3.1.5.15. Cálculo de los costes de energía ahorro

En función del coste en €/kwh, el programa calcula el coste de la energía necesaria para toda la

demanda, el coste de la energía para el déficit y el ahorro que supone la diferencia de los dos valores anteriores. Es una manera de evaluar la posible amortización de la instalación solar para ACS.

En el programa:


143

Archivo js: localizacionjs_ACSenJS Variables: Preciokwh : dato de coste del kwh, 0.12 € por defecto

vDemandaMJmes[i] : demanda energía en MJ para el mes [i] DemandaAnual : demanda energía anual en MJ vCEmes[i] : coste de la energía eléctrica para la demanda energética el mes [i]. CosteEanual : coste de la energía eléctrica para la demanda anual. vCosteAuxmes[i] : coste de la energía eléctrica para la demanda no cubierta por energía solar para el mes [i] CAuxAnual : coste de la energía eléctrica para la demanda no cubierta por energía solar durante un año. vAhorromes[i] : coste de la energía eléctrica cubierta por energía solar el mes [i]. AhorroAnual : coste de la energía eléctrica cubierta por energía solar.

Método: function Calcula_vCosteEmes() { var i=0; for(i=0;i<12;i++){

vCEmes[i]=(Preciokwh/3.6)*vDemandaMJmes[i]; }

//anual CEanual=Preciokwh/3.6*DemandaAnual;}

function Calcula_vCosteAuxmes() {

var i=0; for(i=0;i<12;i++){

if(vDeficit[i]>0){vCAuxmes[i]=Preciokwh/3.6*vDeficit[i];} else{vCAuxmes[i]=0;}

} //anual

CAuxAnual=0; for(i=0;i<12;i++){

CAuxAnual+=vCAuxmes[i];}} function Calcula_vAhorromes() {

var i=0; for(i=0;i<12;i++){

vAhorromes[i]=vCEmes[i]-vCAuxmes[i];} AhorroAnual=0; for(i=0;i<12;i++){

AhorroAnual+=vAhorromes[i];}}

Los resultados pueden consultarse en las tablas "Resultados mensuales" y "Resultados anuales"

figura 5. tabla "Resultados anuales"


144

3.1.6. Método F-CHART

3.1.6.1. Cálculo de la aportación energética en instalaciones de ACS con el método "f-chart"

El "f-chart" ó método de las curvas-f, es un método que permite estimar la aportación energética de un sistema solar para producción de ACS ó ACS y calefacción en períodos de tiempo relativamente largos. Ha sido desarrollado desde 1974 por los profesores W.A. Beckman, S. A. Klein, y J.A. Duffie en el Laboratorio de Energía Solar de la Universidad de Madison en Wisconsin. En las instalaciones solares, los parámetros que influyen en el rendimiento del captador son muy variables, y suponer unas condiciones medias de funcionamiento supone asumir un riesgo elevado. A raíz de la simulación de numerosas instalaciones, a través de TRNSYS, y el posterior estudio de resultados se concluyó que, a pesar de que efectivamente las condiciones y por tanto el rendimiento de los captadores era variable, el aporte energético de la instalación en períodos largos de tiempo (por ejemplo un mes), seguía una determinada correlación dependiente de dos parámetros adimensionales. Dicha correlación se expresa de forma gráfica en la figura 6:

Figura 6. Curvas-f

Para estimar la aportación energética de la instalación solar mensualmente, basta con determinar cada uno de los dos parámetros adimensionales y aplicar la correlación de las curvas-f. De forma numérica f se puede calcular mediante siguiente ecuación:

f=1,029·D1-0,065·D2-0,245·D1

2+0,0018·D2

2+0,0215·D1

3

El parámetro D2 representa la relación entre las pérdidas de energía del captador y la carga total de calentamiento durante un mes.

El parámetro D1 expresa la relación entre la energía absorbida en la superficie captadora y la carga total de calentamiento durante un mes.

Así pues, conocida la radiación solar sobre la superficie de captación y el tipo y número de captadores instalados, se puede calcular la aportación energética mensual para una determinada demanda mediante el empleo del método de las curvas f.


145

3.1.7. Cálculo de instalaciones mediante el programa javaScript

Para aplicar el método F- Chart procedemos de la siguiente manera: � Estimación de la carga calorífica.

� Determinación de la energía absorbida y perdida en el colector.

� Cálculo de la ganancia total.

� Cálculo de pérdidas totales.

� Determinación de cobertura solar mensual.

� Determinación de cobertura solar anual

3.1.7.1. Estimación de la carga calorífica (Qa) Se define la carga calorífica (Qa) como la cantidad de calor mensual que se necesita para

calentar agua . Qa=Ce·C·N·(ta-tr)

� Qa : Carga calorífica mensual para calentar el agua (J/mes)

� Ce : Calor específico del líquido calo-conductor en el proceso de intercambio de calor. En

caso de agua su valor es de 4187 (J /kg°C).

� C : Consumo diario de agua (litros / día).

� N : Número de días del mes.

� ta : Temperatura del agua caliente de acumulación (°C).

� tr : Temperatura del agua de red (°C).

En el programa:

Archivo js : fchart_ACSenJS Variables: vfcarga[i] : resultado de la carga calorífica para el mes [i]

Ce : dato del calor específico del fluido caloportador, por defecto el agua. N : dato del número de usuarios. C : dato del consumo diario de ACS en litros/día·usuario vDias[i] : dato del número de días del mes [i] tac : dato de la temperatura del agua caliente VTred[i] : dato de la temperatura del agua de red para el mes [i] en la provincia seleccionada.

Método: function Calcula_vfcarga() { var i=0; for(i=0;i<12;i++){vfcarga[i]=(Ce*N*C*vDias[i]*(tac- vTred[i]))/Math.pow(10,6);//MJ/mes }consufQa =N * C;}


146

3.1.7.2. Determinación de energía absorbida por el colector y pérdida del mismo (Ea, Ep). La energía que absorbe el colector (Ea), la cual es trasformada en calor se calcula a través de la

ecuación: Ea=Sc·F’r·(τα)·R1·N

Teniendo en cuenta que: � R1 : Radiación diaria media mensual incidente en la superficie de captación (kJ/m2).

� N : Número de días del mes.

� Sc : Superficie del captador (m2)

� F’r·(τα) : Producto de la transmitancia por la absorbancia del colector y el factor de transporte, equivalente a 1. En este factor ya interviene tanto la eficiencia óptica del captador, como las constantes por modificación del ángulo de incidencia, además del factor captador- intercambiador.

F’r·(τα) =FR(τα)

n· (τα)/(τα)

n ·(F’

R/F

R)

F

R(τα)

n Factor de eficiencia óptica del captador. Es la ordenada en el origen de la curva

característica del captador. En el programa corresponde a la variable "FEO". (τα)/(τα)

n Modificador del ángulo de incidencia. "MAI", valor por defecto 0.96. En general se

puede tomar como constante: 0,96 (superficie transparente sencilla) o 0,94 (superficie transparente doble).

F’r / Fr Factor de corrección del conjunto captador-intercambiador. "FCCI", por defecto toma

como valor 0.95.

En el programa:

Archivo js : fchart_ACSenJS Variables: vEabsorbida[i]: resultado de la energía absorbida para el mes [i].

FEO : dato del factor de eficiencia óptica del captador MAI : dato del factor de modificación del ángulo de incidencia FCCI : dato del factor de corrección del conjunto captador-intercambiador. Fadim : resultado del factor adimensional fSc : dato de la superficie en m2 de captación. vE[i] : resultado de la radiación incidente por m2 de superficie inclinada, para el mes [i]. Incluye factor de corrección por suciedad en la cubierta de los colectores (- 3%) y por incidencia de rayos no perpenticulares (- 3%) de valor experimental 0.94. vDias[i] : dato del número de días del mes [i].

Método: function Calcula_Fadim() { Fadim=FEO*MAI*FCCI;}

function Calcula_vEabsorbidaf() {

var i=0; for(i=0;i<12;i++){vEabsorbida[i]=fSc*Fadim*vE[i]*vD ias[i];}}


147

La energía que se pierde en el colector (Ep), se determina por medio de la siguiente ecuación:

Ep=Sc·F’r· UL·(100 – ta)·∆t· k1·k2 En donde: � Sc: Superficie útil del captador (m2).

� ta : Temperatura mensual media del ambiente. (°C).

� ∆t : Período de tiempo, considerando que funciona las 24h/día. (s)

� k1 : Factor de corrección debido al almacenamiento.

K1 = [kg acumulación /(75 Sc)]-0,25

37,5 < (kg acumulación) / (m2 captador) < 300

� k2 : Factor de corrección para el agua caliente, en donde se relaciona la temperatura mínima de ésta con el agua de la red usada y también la temperatura media mensual del ambiente.

K2 = 11,6 + 1,18 tac + 3,86 tr – 2,32 ta / (100 – ta)

donde:

tac = Temperatura mínima del ACS, por defecto 45º. tr = Temperatura del agua de red ta = Temperatura media mensual del ambiente

� F’r· UL : Factor de eficiencia del intercambiador de calor del colector solar por el coeficiente

global de pérdidas del captador. Este factor viene asociado intrínsecamente a un factor de disipación de calor. (%).

F’r· UL= Fr· UL·( F’r / Fr)

donde: Fr· UL = Pendiente de la curva característica del captador (coeficiente global de pérdidas del

captador) "CGP". F’r / Fr Factor de corrección del conjunto captador-intercambiador. "FCCI", por defecto 0.95.

En el programa:

Archivo js : fchart_ACSenJS Variables: vEperdida[i] : resultado de la energía perdida para el mes [i]

CGP : dato del coeficiente general de pérdidas del colector. FCCI : dato del factor de corrección del conjunto captador-intercambiador. FprUL : resultado de F’r· UL= Fr· UL·( F’r / Fr) vDt[i] : resultado del número de segundos del mes [i]. K1 : resultado del factor de corrección k1 para almacenamientos (acumulación) distintos de 75 litros/m2 KgA : datos de los kilogramos (volumen) de acumulación. fSc : resultado de la superficie de captación en m2


148

vK2[i] : resultado del factor de corrección k2 para el mes [i]. 0.95 : dato del FCCI Tmin : dato de la temperatura mínima del ACS, por defecto igual a la temperatura de uso. vTamb[i] : dato de la temperatura ambiente para el mes [i] en la provincia seleccionada.

Método: function Calcula_FprUL() { FprUL=CGP*FCCI; } function Calcula_vDt() {

var i=0; for(i=0;i<12;i++){

vDt[i]=vDias[i]*24*3600; }}

function Calcula_K1() { ka1=(KgA/(75*fSc)); K1=Math.pow(ka1,-0.25);}

function Calcula_vK2() {

var i=0; for(i=0;i<12;i++){

vK2[i]=(11.6+1.18*Tmin+3.86*vTred[i]-2.32*vTamb[i])/(100-vTamb[i]); }}

function Calcula_vEperdidaf() {

var i=0; for(i=0;i<12;i++){

vEperdida[i]=fSc*FprUL*(100-vTamb[i])*vDt[i]*K1*vK2[i]/1000000;//Mj/mes

}}

3.1.7.3. Cálculo de la ganancia total (D1)

A la ganancia del colector (D1) se la conoce como la energía solar útil proporcionada. Esta

ganancia relaciona la energía absorbida por la placa del colector usado y el parámetro Qa durante un mes, como se muestra en la ecuación:

D1=Ea/Qa

En el programa:

Archivo js : fchart_ACSenJS Variables: vD1[i] : resultado de la ganancia D1 para el mes [i]

vEabsorbida[i] : resultado de la energía absorbida para el mes [i]. vfcarga[i] : resultado de la carga calorífica para el mes [i].

Método: function Calcula_D1() { var i=0; for(i=0;i<12;i++){

vD1[i]=vEabsorbida[i]/vfcarga[i]; }}


149

3.1.7.4. Cálculo de pérdidas totales (D2)

Las pérdidas totales en el colector (D2) debido a la reflexión de la luz solar, relacionan las

pérdidas de energía en el captador a determinada temperatura, con la carga calorífica de calentamiento (Qa) durante un mes según la siguiente ecuación:

D2=Ep/Qa

En el programa java:

Archivo js : fchart_ACSenJS Variables: vD2[i] : resultado de las pérdidas D2 para el mes [i].

vEperdida[i] : resultado de la energía perdida para el mes [i]. vfcarga[i] : resultado de la carga calorífica para el mes [i].

Método: function Calcula_D2() { var i=0; for(i=0;i<12;i++){ vD2[i]=vEperdida[i]/vfcarga[i];

}} 3.1.7.5. Determinación de la energía útil y la cobertura solar mensual (f)

La energía útil captada en un mes determinado (Qu) se estima mediante la ecuación:

Qu = f·Qa A la fracción de carga calorífica mensual (Qa), que se transforma en energía solar, se la conoce

como parámetro f. El cálculo de este parámetro se realiza con la ecuación:

f=1,029·D1-0,065·D2-0,245·D1

2+0,0018·D2

2+0,0215·D1

3

En el programa:

Archivo js : fchart_ACSenJS Variables: vf[i] : resultado del factor f para el mes [i].

vEutilc[i] : resultado de la energía útil captada para el mes [i]. vfcarga[i] : resultado de la carga calorífica para el mes [i]. vD1[i] : resultado de la ganancia D1 para el mes [i]. vD2[i] : resultado de las pérdidas D2 para el mes [i].

Método: function Calcula_f() { var i=0; for(i=0;i<12;i++){

vf[i]=1.029*vD1[i]-0.065*vD2[i]-0.245*Math.pow(vD1[i],2)+0.0018*Math.pow(vD2[i],2)+0.0215*Math.pow(vD1[i],3);

vf[i]=vf[i]*100;}}


150

function Calcula_vEutilcaptada() {

var i=0; for(i=0;i<12;i++){

vEutilc[i]=vfcarga[i]*vf[i]/100; }}

3.1.7.6. Determinación de cobertura solar anual (CSA)

La relación entre la sumatoria de las coberturas solares mensuales (ΣQu) y la sumatoria de la

demanda de cargas caloríficas (ΣQa), determina la cobertura solar anual del colector, como se indica en la ecuación:

CSA=(ΣQu)/ (ΣQa)

En el programa:

Archivo js : fchart_ACSenJS Variables: CSA : resultado de la cobertura solar anual.

sumaQu : resultado de la suma de la energía útil captada todos los meses del año. sumaQa : resultado de la suma de las cargas caloríficas de todos los meses del año.

Método: function Calcula_CoberturaSA() { var i=0; var sumaQu=0;var sumaQa=0; for(i=0;i<12;i++){

sumaQu=sumaQu+vEutilc[i]; sumaQa=sumaQa+vfcarga[i];}

CSA=sumaQu/sumaQa; CSA=CSA*100; for(var i=0;i<12;i++){vCSA[i]=CSA;}}

function Comprueba_K1_fchart() {

pruebak1=KgA/fSc;

var pru=pruebak1.toFixed(2);

if(pruebak1<37.5){compruebak1=""+pru+" No cumple";compruebak1_1="No cumple: Kg Acumulacion/Sc= "+pru+" <37.5";}

if(pruebak1>300){compruebak1=""+pru+" No cumple";compruebak1_1="No cumple: Kg Acumulacion/Sc= "+pru+" >300";}

if(pruebak1>37.5&&pruebak1<300){compruebak1=""+pru+" Cumple";compruebak1_1="Cumple: 37.5< Kg Acumulacion/Sc= "+pru+" <300";}}

3.1.7.7. Cálculo del volumen de acumulación (V)

La dimensiones del depósito interacumulador deberán ser proporcionales al consumo

cubriendo la demanda de agua caliente sanitaria de cómo mínimo un día. En España la proporción de acumulación es de 50 – 100 litros por metro cuadrado de superficie colectora. El


151

programa, por defecto, calcula un volumen de 70 litros por m2. Este valor se puede cambiar. El resultado se tomará como una orientación del valor que el usuario del programa tiene que introducir como dato del proyecto. El programa compara el dato del volumen introducido con el calculado y nos indica si cumple con la condición de diseño 0.8<=V/M<=1.2. Esta comprobación también se realizará cada vez que el usuario modifique el valor del volumen.

En el programa:

Archivo js: localizacionjs_ACSenJS Variables: VolAcuTeorico: resultado del volumen de acumulación, por defecto 70 litros por

m2 de colector. VolAcuDiseño : dato del volumen de acumulación introducido por el proyectista. PruebaVolAcu : resultado del cociente del VolAcuTeorico entre el VolAcuDiseño

Método: function Calcula_VolAcuTeorico() { VolAcuM2=70; VolAcuTeorico=SCresultante*VolAcuM2; txtvol.setAttribute("value",VolAcuTeorico.toFixed(2));}

function Calcula_PruebaVolAcu() {

PruebaVolAcu=VolAcuTeorico/VolAcuProyecto;} function ComprobacionVolAcu() {

if(PruebaVolAcu<0.8){CVA="No cumple";} else{if(PruebaVolAcu>1.2){CVA="No cumple";}else{CVA="Cumple";}} return CVA;

var resu=PruebaVolAcu+" "+CVA;}

El sistema interacumulador se utiliza para acumular agua caliente sanitaria en las horas de máxima radiación solar y esta agua será utilizada en los momentos de demanda. La producción de agua caliente sanitaria no suele coincidir con los momentos de consumo, de ahí la necesidad de acumularla.

Los resultados se pueden consultar en la tabla "Resultados anuales" (figura 5) y en los

resultados de diseño que aparecen a la derecha (figura 7).

figura 7.- Comprobación volumen acumulación


152

APLICACIÓN JAVASCRIPT. MEMORIA DESCRIPTIVA

153

3.2. Memoria descriptiva Aplicación JavaScript en una web para Cálculos de Energía Solar Térmica para ACS. En esta parte del proyecto hemos diseñado una página web en la que podemos realizar los

mismos cálculos que en la aplicación java y presentar los resultados principales. No almacenamos los resultados por lo que no podremos obtener los informes de las variaciones de resultados, aunque si podemos imprimir los resultados para cada caso en particular. Otra diferencia con la aplicación java es que las variables mensuales que podíamos cambiar mes a mes ahora permanecen fijas. Por todo lo demás los métodos de cálculo y resultados son iguales en los dos casos (uno programado en Java y otro en JavaScript).

Para el desarrollo del proyecto se ha utilizado el entorno de desarrollo integrado (IDE) de

NetBeans. Con NetBeans hemos creado un archivo HTML5 con el que hemos diseñado una página web. En HTML5 se combinan el leguaje HTML, CSS y JavaScript. Sin adentrarnos mucho en lo que se refiere a la programación, podemos decir que HTML define la estructura de la web, CSS define la presentación en pantalla y JavaScript es la parte de la programación que define la ejecución de un código cuando se produce un determinado evento sobre la página.

En este proyecto hemos dividido la memoria descriptiva de la aplicación JavaScript en tres

partes: 3.2.1. Documento html. 3.2.2. Hoja de estilos CSS. 3.3.3. Archivos JavaScript.

Dentro de este proyecto, en el documento Apéndice I. "Ejemplos", se presenta un ejemplo de cálculos tal como lo podemos sacar por impresora. En el documento Apéndice II. "Códigos", se muestra todo el código programado en cada una de las partes creadas para este proyecto (HTML, CSS y JavaScript).

APLICACIÓN JAVASCRIPT. MEMORIA DESCRIPTIVA

154

APLICACIÓN JAVASCRIPT. MEMORIA DESCRIPTIVA. HTML

155

3.2.1. Documento HTML HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". Es el

leguaje de programación para la creación de una página web y su presentación en Internet. El navegador interpreta el código HTML y hace se que visualice la página.

El presente apartado se compone de las siguientes partes:

3.2.1.1. Elementos y etiquetas 3.2.1.2. Estructura general de la página web

� Cabecera <head> � Cuerpo <body>

B.1. zona "contenedor" B.1.1. zona "cabecera" B.1.2. zona "navegacion" B.1.3. tabla "var1" B.1.4. zona "lateralDerecha" B.1.5. zona "lateralIzquierda" B.1.6. zona "RAP" B.1.7. Datos mensuales B.1.8. Resultados mensuales B.1.9. Resultados anuales B.1.10. Cálculos fchart B.1.11. Gráficas

B.2. Scripts

156

3.2.1.1. Elementos y etiquetas

Los elementos proporcionan la estructura al documento HTML e indican al navegador como se

presentará la página. Generalmente, los elementos comienzan con una etiqueta de inicio "< >" seguida del contenido y una etiqueta de cierre "</ >". También hay algunos elementos que se abren y cierran con la misma etiqueta "<elemento />"

Las etiquetas son las marcas que señalan el inicio y final de un elemento. Algunas etiquetas

llevan atributos que aportan información a los elementos HTML. Los atributos van en la etiqueta de inicio con la forma atributo="valor".

El navegador lee el código HTML de arriba abajo y de izquierda a derecha, de esta forma, el

contenido de la página irá apareciendo según el orden en que esté escrito dicho código. Para este proyecto hemos utilizado las siguientes etiquetas: <!DOCTYPE> tipo de documento <html> </html> todo el documento <head> </head> elemento "cabecera" <title> </title> título de la página <meta charset="" /> tipo de caracteres <meta name="description" content="" /> datos para motores de búsqueda <link rel="stylesheet" href="archivo.css"/> enlace archivo.css externo <body> </body> elemento "cuerpo" <div> </div> zona del "cuerpo" <label> </label> etiqueta de texto  comentarios del código <table> </table> elemento tabla <tr> </tr> fila de una tabla <th> </th> fila encabezados de una tabla <select> </select> menú desplegable <option> </option> opción en un select <input type="text" /> control entrada de texto <h2> </h2> título tamaño de letra h2 <ul> </ul> lista desordenada <li> </li> elemento de una lista <a href="#punto"> </a> enlace en el documento a id="punto" <input type="button" /> control de entrada tipo botón <hr> línea horizontal <h1> </h1> título tamaño de letra h1 (máximo) <img src="archivo.gif" > imagen de archivo <br> salto de línea <p> </p> párrafo de texto <sub> </sub> texto subíndice <sup> </sup> texto superíndice <script src="archivo.js"> </script> archivo externo de JavaScript


157

3.2.1.2. Estructura general de la página web

El documento HTML está organizado en varias partes diferenciadas, declaradas y

determinadas por etiquetas específicas que se escriben entre < >. El lenguaje HTML utiliza etiquetas para construir la página web. Toda la estructura del HTML

se construye entre las etiquetas <html> y </html>.

<!DOCTYPE> <html>

<head> </head> <body> </body>

</html> figura 1. Estructura general del HTML

<!DOCTYPE>

Para indicar el tipo de documento, en la primera línea ponemos la etiqueta, en nuestro caso: <!DOCTYPE html>

<html>

Este elemento contiene el resto del código. El código insertado entre las etiquetas <html> se divide en dos secciones principales, la cabecera <head></head> y el cuerpo <body></body>.

<head> En la cabecera (head) ponemos el título de nuestra página web, información general del

documento para los motores de búsqueda (no se muestra en la ventana del navegador) y archivos externos de hojas de estilos CSS.

<head> <title>Simulación cálculo nºcsp para ACS</title> <meta charset="UTF-8"> <meta name="description" content="programación en JavaScript para cálculos de energía solar térmica para ACS" /> <link rel="stylesheet" href="css/estilo_0_1.css"/> </head>


158

El título que se muestra en la barra superior del navegador se introduce con la etiqueta <title>. Dentro de la cabecera también tenemos la etiqueta <meta> para especificar como será

presentado en texto en pantalla, <meta charset=""/>, y para los motores de búsqueda, <meta name="" content="" />.

Para incorporar archivos con estilos CSS empleamos el elemento <link> con el atributo href

que indica el archivo css y el atributo rel con el valor stylesheet para indicar que se trata de un archivo CSS con estilos para la presentación en pantalla.

<body>

Representa la parte visible del documento. La estructura de este elemento la hemos diseñado

principalmente con elementos <div> y <table> que dividen la página en diferentes zonas identificadas cada una el atributo id.

figura 2. <body>


159

Contenido del cuerpo

A continuación describiremos de forma breve cada uno de los elementos que intervienen dentro del <body>.

B.1. <div id="contenedor">

Zona de la página identificada con el nombre "contenedor". El objeto de esta división es

agrupar el contenido actual de la página y poder controlar su presentación independientemente de otros contenidos que se puedan añadir al <body> o futuras ampliaciones de contenido.

B.1.1. <div id="cabecera">

Zona identificada con el nombre "cabecera" que contiene los elementos <label> donde se

mostrarán los datos de localización, altitud, latitud y temperatura mínima histórica de la provincia seleccionada para los cálculos.

figura 3. <div id="cabecera">

B.1.2. <div id="navegacion"> Zona identificada con el nombre de "navegacion" que dividida con elementos <table> presenta

cada una de las variables que intervienen en los cálculos. Para las variables con valores predeterminados empleamos elementos <select> y para las variables cuyo valor podemos asignar libremente utilizamos elementos <input>. Cada uno de estos elementos está identificado por su atributo id que nos servirá para emplear su valor en un script.

figura 4. <div id="navegacion">

<label id="local"> <label id="altitud"> <label id="latitud"> <label id="tempminhis">


160

B.1.2.1. <table id="tituCombos" border> Tabla formada por las filas identificadas, con el atributo id, como "fila1" y "fila2". En las

celdas de "fila1" ponemos los nombres de las variables del problema y en la "fila2" los valores de dichas variables. El atributo border indica que se mostrarán los bordes de la tabla, no se indica nada más porque sus características se determinarán con una hoja de estilos en un archivo externo css como veremos más adelante.

B.1.2.1.1. <tr id="fila1">

Para cada variable creamos una celda e introducimos su nombre con la etiqueta <th>. Por

ejemplo, en la primera celda ponemos el nombre de la variable Provincia de la siguiente manera: <th>litros día</th>. De esta manera presentamos las siguientes variables:

� Provincia: nombre de la provincia para la que realizaremos los cálculos de ACS.

� Temp ACS: temperatura de uso del agua en los cálculos.

� Inclinación: inclinación de los colectores respecto a la horizontal.

� Nº de paneles calculado: número de csp resultante con los cálculos.

� Nº de paneles proyecto: número de csp propuesto por el diseñador.

� Superficie m2: superficie total útil en m2 de captación.

� Litros acumulador calculado: volumen de acumulación según criterio del programa.

� Volumen proyecto: volumen de acumulación propuesto por el diseñador.

� % ocupación: % del máximo número de usuarios para el que se realizan los cálculos.

� Litros día: consumo diario de ACS

� Nº usuario: número máximo de usuarios para los cálculos.

� Área csp m2: superficie útil de un csp.

B.1.2.1.2. <tr id="fila2">

En esta fila presentamos los valores de las variables nombradas en "fila1". En este proyecto, el

diseñador introduce los valores de las variables seleccionando uno de los valores que contiene el programa por defecto. Para esto utilizamos menús desplegables en los que podemos elegir uno de los valores que contiene. Para dichos menús, utilizamos las etiquetas <select> de la siguiente manera:

<th><select name="" id="" title=""><option>valor1</ option></select></th>

El atributo name define un único nombre para el menú desplegable. El atributo title define el texto que aparece cuando situamos el puntero sobre un select, de esta forma obtenemos información de los valores de la variable que contiene. Con el elemento <option> introducimos el valor que seleccionemos en el menú. La lista de valores de cada menú de selección no aparece en el HTML ya que será introducida mediante un script de un archivo js externo como veremos


161

más adelante, así el HTML será menos extenso y nos facilita la tarea en caso de tener que modificar la programación.

figura 5 . elementos option de un select En este caso tenemos un <select> para cada una de las siguientes variables: � Provincia: nombre de la provincia para la que realizaremos los cálculos de ACS.

� Temp ACS: temperatura de uso del agua en los cálculos.

� Inclinación: inclinación de los colectores respecto a la horizontal.

� Nº de paneles proyecto: número de csp propuesto por el diseñador.

� Volumen proyecto: volumen de acumulación propuesto por el diseñador.

� % ocupación: % del máximo número de usuarios para el que se realizan los cálculos.

� Litros día: consumo diario de ACS

� Nº usuario: número máximo de usuarios para los cálculos.

� Área csp m2: superficie útil de un csp.

El resto de variables que aparecen en esta fila son variables cuyos valores dependen de otras

variables del proyecto. El valor de estas variables es calculado por el programa e introducido mediante las etiquetas <input> de la siguiente manera:

<th><input type="text" id="" placeholder="" /><th>

El atributo type indica que el tipo de control de entrada, en este caso texto. El atributo

placeholder indica el contenido que aparece inicialmente en el elemento input. Así hemos empleado un <input type="text" /> para cada una de las siguientes variables:

� Nº de paneles calculado: número de csp resultante con los cálculos.

� Superficie m2: superficie total útil en m2 de captación.

� Litros acumulador calculado: volumen de acumulación según criterio del programa.

B.1.2.2. <table id="tablafila2" border>

Tabla compuesta las filas identificadas, con el atributo id, como "fila3" y "fila4", en las celdas

de "fila3" ponemos los nombres de las variables del problema y en la "fila4" los valores de dichas variables. El atributo border indica que se mostrarán los bordes de la tabla, no se indica


162

nada más porque sus características se determinarán con una hoja de estilos en un archivo externo css como veremos más adelante.

B.1.2.2.1. <tr id="fila3">

Para cada variable creamos una celda e introducimos su nombre con la etiqueta <th> como

indicamos anteriormente en "fila1".De esta manera presentamos las siguientes variables: � bcol: factor b de los paneles

� mcol: factor m de los paneles

� CorH: factor de corrección de H

� Cor b: factor de corrección de b

� Pérdidas globales: factor estimado de pérdidas globales

� Desviación NS: desviación norte sur de los paneles.

� Calor específico: calor específico del agua

� factor ángulo incidencia

� factor intercambiador

� Temperatura mínima: temperatura mínima de uso del ACS

B.1.2.2.2.<tr id="fila4">

En esta fila presentamos los valores de las variables nombradas en "fila3". Igual que en

"fila2", utilizamos menús desplegables en los que podemos elegir uno de los valores que contiene. En los casos de las variables corb, Desviación NS y calor específico, aunque el menú solo nos ofrece una opción, hemos elegido introducirlos mediante elementos <select> porque aunque son valores únicos, son valores de diseño que introduce el proyectista. Así, en próximas mejoras de este programa podemos aplicar los cálculos a otros valores de estas variables simplemente añadiendo dichos valores en el script que controla estos elementos.

figura 6. <tr id="fila4"> En este caso tenemos un <select> para cada una de las siguientes variables: � bcol: factor b de los paneles

� mcol: factor m de los paneles

� CorH: factor de corrección de H

� Corb: factor de corrección de b


163

� Pérdidas globales: factor estimado de pérdidas globales

� Desviación NS: desviación norte sur de los paneles.

� Calor específico: calor específico del agua

� factor ángulo incidencia

� factor intercambiador

� Temperatura mínima: temperatura mínima de uso del ACS

B.1.3. <table id=var1">

Elemento con estructura de tabla identificado con el atributo id="var1". Dentro de esta tabla

presentamos los valores mensuales de % de ocupación, temperatura de uso del ACS, consumo de ACS en litros día usuario e inclinación de los paneles respecto a la horizontal. Estos valores son los que anteriormente hemos seleccionado en los menús de selección y representa los valores elegidos para cada mes del año. En esta parte del proyecto, estos valores se consideran fijos para todo el año pero hemos decidido presentarlos así para en una futura ampliación de esta parte podamos especificar los valores en cada mes como hacemos en la aplicación Java de este proyecto.

Observamos que en documento HTML no aparece el contenido de la tabla. Dicho contenido se

introduce mediante un script programado en el archivo externo Graficas_ACSenJS_1.js al que llamamos desde el HTML. De esta forma simplificamos el HTML y facilitamos la programación.

figura 7. <table id="var1">

B.1.4. <div id=lateralDerecha> Zona de la página en la que se presentan un resumen de los resultados de los cálculos, enlaces

a las zonas dela página donde aparecen más detalladamente los resultados y un botón que nos permitirá imprimir todo el contenido presentado. Como toda la presentación de los resultados no cabe en el espacio de una pantalla hemos decidido presentar esta zona de manera que aparece junto a la zona donde seleccionamos el valor de las variables (div id="navegacion>). De esta manera conforme seleccionamos una variable el programa realiza todos los cálculos y podemos ver un resumen de los resultados sin movernos de la pantalla. Además podremos ver los resultados más detalladamente simplemente pinchando sobre el enlace correspondiente.


164

figura 8. <div id="lateralDerecha">

B.1.4.1. <h2 class="titlat">

Elemento para presentar un texto con el tamaño de letra h2 (segundo tamaño mayor de los

posibles tamaños de letra de h1 a h6). En este caso, con la etiqueta <h2> presentamos el título "cálculos d-a" para indicar que los resultados que aparecen debajo son de los cálculos de demanda de energía y aportación solar que se han realizado siguiendo el primer método (cálculo de paneles según la demanda y aportación anual).

El atributo class identifica los elementos con alguna característica común. Esto nos servirá para

identificar todos los elementos con el atributo class="titlat" y darles el mismo formato simplemente indicándolo en la hoja de estilos (archivo CSS).

Bajo este título presentamos, con elementos <div> las zonas identificadas como

"resume1","resume2" y "resume3" que describiremos brevemente a continuación.

B.1.4.2. <div id="resume1">

figura 9. <div id="resume1">

Zona en la que se presenta una lista con los siguientes resultados: � Demanda anual � energía anual/m2 � Superficie m2 � Nº colectores � ACS m3/año


165

La lista se introduce entre las etiquetas <ul></ul> y cada elemento de la lista con las etiquetas <li></li>. Dentro de cada elemento de la lista hay un texto, nombre de la incógnita, y una etiqueta <label> cuyo contenido no aparece en el HTML ya que es el resultado de los cálculos de dicha incógnita y que se obtiene mediante un script. Cada elemento de la lista sigue la siguiente estructura:

<li>Nombre de la incógnita: <label id=""></label></li>

De esta misma manera presentamos otros resultados en las zonas identificadas id="resume2",

id="resume3", id="resume4", id="resume5",

B.1.4.3. <div id="resume2"> Zona en la que se presenta una lista con los siguientes resultados:

� Aportación solar % � Déficit de energía


Zona en la que se presenta una lista con los siguientes resultados: � Coste energía anual � Coste auxiliar anual � Ahorro anual


Elemento para presentar un texto con el tamaño de letra h2. En este caso, con la etiqueta <h2>

presentamos el título "cálculos f-chart" para indicar que los resultados que aparecen debajo son de los cálculos de cobertura solar anual que se han realizado siguiendo el segundo método (cálculo por el método F-Chart).

Con atributo class="titlat" identificamos todos los títulos de esta zona para darles el mismo

formato indicado en la hoja de estilos (archivo CSS). Bajo este título presentamos, con elementos <div> la zona identificada como "resume4" que

describiremos brevemente a continuación.

B.1.4.6. <div id="resume4"> Zona en la que se presenta una lista con los siguientes resultados: � CSA f-char


166

B.1.4.7. <h2 class="titlat"> Elemento para presentar un texto con el tamaño de letra h2. En este caso, con la etiqueta <h2>

presentamos el título "diseño" para indicar que los resultados que aparecen debajo son de los datos y resultados que hemos llamado "datos de diseño" ya que dependen del los criterios de diseño que siga el diseñador. Con atributo class="titlat" identificamos todos los títulos de esta zona para darles el mismo formato indicado en la hoja de estilos (archivo CSS).

Bajo este título presentamos, con elementos <div> las zonas identificadas como

"resume5","resume6" y "resume7" que describiremos brevemente a continuación.

B.1.4.8. <div id="resume5"> Zona en la que se presenta una lista con los siguientes resultados: � Superficie final m2 � Acumulador litros


Zona en la que se presenta una lista con los siguientes valores característicos de los paneles y

del cambiador de calor seleccionados para los cálculos: � b � m � FCCI


Zona en la que se presenta una lista con la comprobación de resultados, según los criterios de

diseño, para el consumo de ACS, superficie de colectores y volumen de acumulación � V/M � C/A � M/A


Elemento para presentar un texto con el tamaño de letra h2. En este caso, con la etiqueta <h2>

presentamos el título "consulta datos y resultados" para indicar que los enlaces que aparecen debajo nos llevan a la zona donde se muestran los datos y resultados que se indican en dichos enlaces.

Bajo este título presentamos, en un elemento <div> identificado como "resume8", una lista de

los enlaces a distintas zonas, de la misma página, que describiremos brevemente a continuación.


167

B.1.4.12. <div id="resume8"> Zona en la que se presenta una lista cuyos componentes son enlaces a otras zonas de la misma

página. Cada elemento <li> contienen un enlace para los cuales se emplean las etiquetas <a> con el atributo href que nos indica la dirección del enlace. La estructura de cada elemento de la lista es la siguiente:

<li><a href="#identificador">Texto de enlace</a></li>

En el atributo href ponemos el carácter "#", delante del identificador del destino del enlace,

para indicar se trata de un enlace dentro de la misma página. En esta lista presentamos los siguientes enlaces: � Datos mensuales: nos lleva a donde aparece una tabla que detalla los datos empleados en

los cálculos para cada mes del año. � Resultados mensuales: nos lleva a donde aparece una tabla que detalla los resultados de los

cálculos para cada mes del año. � Resultados anuales: nos lleva a donde aparece una tabla que detalla los resultados de

carácter anual. � Resultados f-chart: nos lleva a donde aparece una tabla que detalla los resultados de los

cálculos del método f-chart. � Ver gráficas: nos lleva a zona donde aparecen las gráficas resultantes de los cálculos.

B.1.4.13. <input id="btnImprime"> Zona en la que aparece un elemento de control tipo botón identificado como "btnImprime" con

la siguiente estructura:

<input id="btnImprime" type="button" value="Imprimir todo" title="Imprimir todo" />

El atributo type indica que es un botón, el atributo value contiene el texto que se presenta en el botón y el atributo.

B.1.5.<div id="lateralIzquierda"> Zona de la página en la que se presentan dos gráficas de resultados. La zona contiene un

elemento <div> que contiene dos elementos <div> con una gráfica en cada uno. Hemos decidido esta estructura para ver las dos gráficas a la vez, de una forma cómoda, y observar como varían conforme se seleccionan los valores de las variables y se realizan los cálculos. Una gráfica representa los valores mensuales de demanda de energía y aportación solar (primer método de cálculo) y la otra gráfica representa los valores mensuales del factor f y el valor de la cobertura solar anual (segundo método de cálculo).

El contenido de estas zonas no aparece en el documento HTML ya que se introduce mediante

un script. Dicho script está programado el archivo externo "Graficas_ACSenJS_1.js" y para su ejecución es llamado desde el HTML como explicaremos más adelante en el apartado de


168

JavaScript. Conforme se seleccionan los valores de las variables y se realizan los cálculos se ejecuta el script mencionado que se represente una gráfica en cada una de estas divisiones.

figura 10. <div id=lateralIzquierda>

B.1.5.1. <div id="graficaDAyF"> Zona dentro de "lateralIzquierda" que contiene a los elementos identificados como "DA" y

"fchart".

B.1.5.1.1. <div id="DA"> Zona identificada como "DA" y que contiene una gráfica que representa los valores mensuales

de demanda de energía y aportación solar calculados con el método basado en el método de cálculo de CENSOLAR [1].

B.1.5.1.2. <div id="fchar">

Zona identificada como "fchart" y que contiene una gráfica que representa los valores

mensuales del factor f y el valor de la cobertura solar anual calculados con el método basado en el método de cálculo F-Chart. B.1.6. <div id="RAP">

Zona de la página en la que se presentan tres gráficas de resultados. El contenido de esta zona

no aparece en el documento HTML ya que se introduce mediante un script. Dicho script está programado el archivo externo "Graficas_ACSenJS_1.js" y para su ejecución es llamado desde el HTML como explicaremos más adelante en el apartado de JavaScript. Conforme se seleccionan los valores de las variables y se realizan los cálculos se ejecuta el script mencionado que divide esta zona en tres <div> y hace que se represente una gráfica en cada una de estas divisiones. En la gráfica de la zona superior se representan los valores mensuales del rendimiento de los colectores. En la gráfica de la zona intermedia se representan los valores mensuales de la aportación solar relativa (% energía solar en cada mes respecto al mes de mayor aportación). Finalmente, en la gráfica de la zona inferior se representan los valores mensuales de sustitución (%porcentaje de demanda de energía mensual cubierta con energía solar). Igual que en todas las gráficas y resultados, que se presentan en la página, los valores representados se actualizan cada vez que una variable cambia de valor. Aunque visualmente parecen pequeñas, hemos decidido


169

presentar estas gráficas en esta zona junto a la zona de las variables y con este tamaño para poder observar, sin desplazarnos en la pantalla, como influye el cambio de cada variable del proyecto en sus resultados. Si queremos ver estas mismas gráficas con mayor tamaño solo tenemos que pinchar el enlace "Ver gráficas" que aperece a la derecha de la pantalla como indicamos anteriormente.

figura 11.- <div id="RAP">

<hr > Elemento para presentar una línea horizontal.

<table>

Elemento tabla. Con el objeto de presentar las siguientes zonas separadas de las anteriormente descritas hemos

usado este elemento como forma de introducir un espacio en blanco del tamaño que necesitemos para presentar otros resultados de la página de forma que al imprimir se distribuyan en páginas distintas de manera que cada parte se vea completa. Para esto hemos empleado el atributo style con en que definimos los valore width y heigth que indican el ancho (800px) y alto (210px) en pixel de la tabla. Como el contenido de la tabla es nulo, se presentará como un espacio en blanco dentro de la web. El código html de este elemento es:

<table style="width: 800px; height: 210px;"></table>


170

B.1.7. Datos mensuales

figura 12. <table id="datosmes">

B.1.7.1. <h1 id="dm"> Elemento para representar el título "Datos mensuales" con tamaño de letra h1. Lo

identificamos con id="dm" para asignarles un estilo con el archivo externo "estilo_0_1.css" como explicamos en el apartado de CSS.

B.1.7.2. <a class="flecha" href=#cabecera>

Enlace a la zona identificada con id="cabecera". El contenido de este elemento es un elemento

<img> de forma que para que se ejecute el enlace hay que pinchar en la imagen. En este caso utilizamos el atributo class para agrupar todos los enlaces que contienen la misma imagen y así controlamos, desde la hoja de estilo css, el estilo de todos a la vez.

El código HTML de este enlace es:

<a class="flecha" href=#cabecera"><img src="flecharriba.gif" title="volver"/></a> El atributo src introduce el nombre de la ubicación de la imagen que, en este caso es un archivo

de imagen .gif que se encuentra en la misma carpeta del archivo .html en el que se presenta dicha imagen (una flecha hacia arriba). El atributo title introduce un texto que aparecerá en pantalla cuando situemos el puntero sobre la imagen flechaarriba.gif.

figura 13. flecharriba.gif

B.1.7.3. <table id="datosmes"> Elemento tabla identificado con id="datosmes" en que se representa una tabla con los valores,

para cada mes, de las variables empleadas en los cálculos. El contenido de este elemento no aparece en el HTML porque se introduce mediante el script programado en el archivo externo localizacionjs_ACSenJS.js.


171

B.1.8. Resultados mensuales

figura 14. <table id="resultadosmes"> B.1.8.1. <h1 id="rm">

Elemento para representar el título "Resultados mensuales" con tamaño de letra h1. Lo

identificamos con id="rm" para asignarles un estilo con el archivo externo "estilo_0_1.css" como explicamos en el apartado de CSS.


Enlace a la zona identificada con id="cabecera" descrito anteriormente.

B.1.8.3. <table id="resultadosmes">

Elemento tabla identificado con id="resultadosmes" en que se representa una tabla con los

valores, para cada mes, de los resultados de los cálculos obtenidos con el primer método de cálculo ( basado en el método de CENSOLAR [1]). El contenido de este elemento no aparece en el HTML porque se introduce mediante el script programado en el archivo externo "localizacionjs_ACSenJS.js". B.1.9. Resultados anuales

figura 15. <table id="resultadosanuales">


172

B.1.9.1. < h1 id="ran">

Elemento para representar el título "Resultados anuales" con tamaño de letra h1. Lo identificamos con id="ran" para asignarles un estilo con el archivo externo "estilo_0_1.css" como explicamos en el apartado de CSS.



B.1.9.3. <table id="resultadosanuales"> Elemento tabla identificado con id="resultadosanuales" en que se representa una tabla con los

valores anuales de los resultados de los cálculos obtenidos con el primer método de cálculo ( basado en el método de CENSOLAR [1]). El contenido de este elemento no aparece en el HTML porque se introduce mediante el script programado en el archivo externo "localizacionjs_ACSenJS.js".

<table>

Elemento tabla que se presentará como un espacio en blanco dentro de la web, como explicamos anteriormente en el apartado 1.8, con un ancho de 800px y una altura de 50px.

El código html de este elemento es:

<table style="width: 800px; height: 50px;"></table>

B.1.10. Cálculos fchart

figura 16. <table id="DatyRes">

B.1.10.1. <div> Zona de la página en la que presentamos un título h1 y un enlace class="flecha". Los hemos

puesto en el mismo div para que aparezcan, en pantalla, a la misma altura y encima del párrafo "formuFchart" que describiremos en el apartado 1.20


173

B.1.10.1.1. <h1 id="rf"> Elemento para representar el título "Cálculos fchart" con tamaño de letra h1. Lo identificamos

con id="rf" para asignarle un estilo con el archivo externo "estilo_0_1.css" como explicamos en el apartado de CSS.

B.1.10.1.2. <a class="flecha" href=#cabecera>


B.1.10.2. <p id="formuFchart"> Elemento identificado con id="formuFchart" que introduce, como un párrafo de texto, la

ecuación empleada para el cálculo de los valores mensuales del factor "f" del método de cálculo F-Chart. En el contenido de este elemento se utilizan etiquetas <sub> para presentar subíndices y etiquetas <sup> para presentar superíndices.

B.1.10.3. <table id="DatyResf>

Elemento tabla identificado con id="DatyResf" en que se representa una tabla con los valores

mensuales de los datos y resultados de los cálculos obtenidos con el método de cálculo F-Chart. El contenido de este elemento no aparece en el HTML porque se introduce mediante el script programado en el archivo externo "fchart_ACSenJS.js".

B.1.10.4. <div id="resf">

Zona de la página identificada con id="resf" en la que presentamos, con tres elementos label,

valores y comprobaciones resultantes de los cálculos por el método F-Chart.

B.1.10.4.1. <label id="csa"> Elemento etiqueta de texto que se presenta el valor calculado de la cobertura solar anual

(CSA). El contenido de este elemento está determinado por el script del archivo externo "fchart_ACSenJS.js".

B.1.10.4.2. <label id="k1">

Elemento etiqueta de texto que se presenta el valor calculado de K1. El contenido de este

elemento está determinado por el script del archivo externo "fchart_ACSenJS.js".

B.1.10.4.3. <label id="pk1"> Elemento etiqueta de texto que se presenta el valor calculado de la comprobación del valor K1

e indica si cumple las condiciones del método F-Chart. El contenido de este elemento está determinado por el script del archivo externo "fchart_ACSenJS.js".


174

<br>

Salto de línea para separar el contenido de la página.

<img src="logouned.jpg" title="Proyecto Fin de Carrera, UNED 2016"/> Elemento que introduce una imagen (figura 17) mediante la etiqueta <img>. El atributo src

indica la ruta del archivo de imagen. Empleamos el atributo title para que al pasar el ratón sobre la imagen aparezca el texto "Proyecto fin de Carrera, UNED 2016". De esta forma hemos querido marcar en la web la procedencia de la misma. Además, debajo de esta imagen hemos introducido con las etiquetas <p> el nobre del autor y del director de este PFC.

figura 17. logouned.jpg <p>Proyecto Fin de Carrera, UNED 2016<br>autor: Eduardo José Gajardo Sánchez</p> <p title="Departamento de Ingeniería Eléctrica, Electrónica y de Control (DIEEC)">Director: Manuel A. Castro Gil </p>

<hr>

Línea horizontal para separar el siguiente contenido de la página.

B.1.11. Gráficas

figura 18.- Gráficas

B.1.11.1. <a class="flecha" href=#cabecera> Enlace a la zona identificada con id="cabecera" descrito anteriormente.


175

B.1.11.2. <div id="Rgrande"> Zona en la que se presentará de forma gráfica los valores mensuales del rendimiento de los

paneles. Es la misma gráfica que aparece en la zona <div id="RAP"> pero de mayor tamaño, como indicamos anteriormente en el apartado 1.6. De esta forma, al imprimir los resultados se puede tener esta gráfica con un tamaño suficiente para observarla con más detalle.

El contenido de esta zona no aparece en el documento HTML ya que se introduce mediante un

script. Dicho script está programado el archivo externo "Graficas_ACSenJS_1.js" Desde la zona "cabecera" podemos acceder a esta zona pinchando sobre el enlace "Ver

gráficas" y desde esta zona podemos volver a la "cabecera" pinchando en la figura de la flecha que aparece a la derecha (enlace "flecha").

B.1.11.3. <div id="Agrande">

Zona en la que se presentará de forma gráfica los valores mensuales de la aportación solar

relativa. Es la misma gráfica que aparece en la zona <div id="RAP"> pero de mayor tamaño, como indicamos anteriormente en el apartado 1.6. De esta forma, al imprimir los resultados se puede tener esta gráfica con un tamaño suficiente para observarla con más detalle.



gráficas" y desde esta zona podemos volver a la "cabecera" pinchando en la figura de la flecha que aparece a la derecha (enlace "flecha"). B.1.11.4. <div id="Pgrande">

Zona en la que se presentará de forma gráfica los valores mensuales de sustitución. Es la

misma gráfica que aparece en la zona <div id="RAP"> pero de mayor tamaño, como indicamos anteriormente en el apartado 1.6. De esta forma, al imprimir los resultados se puede tener esta gráfica con un tamaño suficiente para observarla con más detalle.



gráficas" y desde esta zona podemos volver a la "cabecera" pinchando en la figura de la flecha que aparece a la derecha (enlace "flecha").

Todos los elementos descritos hasta aquí son los que forman el contenido del elemento <div

id="contenedor">, aunque coincide con el contenido del cuerpo (<body>) de la página, hemos decidido meterlo en un elemento <div> para controlar el estilo general, de este contenido, desde el archivo css sin que tenga que afectar a otros posibles elemento que quisiéramos incluir en el <body> .


176

B.2. Scripts

En esta parte del documento HTML ponemos los elementos scripts que se ejecutan en la

página. El contenido de los scripts no aparece en el documento HTML porque están en archivos externos, dentro de la carpeta "js". Para ejecutarlos los llamamos desde el HTML mediante el código:

<script src="js/nombrearchivo.js><script> Los scripts están programados en archivos externos situados en la carpeta llamada "js"

� <script src="js/localizacionjs_ACSen JS.js><script>

� <script src="js/fchart_ACSen JS.js><script>

� <script src="js/Gráficas_ACSen JS_1.js><script>

� <script src="js/gráfica-lineal-visor_ACSen JS.js><script>

� <script src="js/imprimir.js><script>

figura 17. archivos de la página ACSenJS.html

APLICACIÓN JAVASCRIPT. MEMORIA DESCRIPTIVA. CSS

177

3.2.2. Hoja de estilos CSS CSS (CascadingStyle Sheets, hojas de estilo en cascada) es el lenguaje de programación que

utilizamos para definir la presentación del documento HTML de este proyecto. Con CSS tratamos las cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura y posicionamiento. Aunque con HTML podemos añadir formato a la web, CSS ofrece más opciones y es más preciso. CSS está soportado por todos los navegadores. Así, HTML lo hemos usado para estructurar el contenido y CSS para darle formato. Además, separando el contenido (HTML) de la presentación (CSS) facilita el mantenimiento de la web.

El presente apartado se compone de las siguientes partes:

3.2.2.1. Sintaxis

Selectores

Comentarios

Propiedades y valores

Unidades de medida

Colores

Modelo de cajas

Propiedades

Valores

3.2.2.2 Archivos externos de CSS

Archivo.css en el proyecto

Archivo.css en el HTML

Código del archivo.css


178

3.2.2.1. Sintaxis de CSS.

El código básico en CSS se muestra en la siguiente figura: figura 1.- partes de un estilo CSS básico (fuente: "Introducción a CSS" [4])

� Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre" (}).

� Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. � Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o

más propiedades CSS. � Propiedad: permite modificar el aspecto de una característica del elemento. � Valor: indica el nuevo valor de la característica modificada en el elemento.

(fuente: "Introducción a CSS"[3])

Selectores:

Los selectores indican a qué elementos se le aplicará el estilo. Los selectores empleados en nuestro proyecto son:

� Selector de etiqueta: aplica el estilo a los elementos del HTML con etiqueta igual al selector

indicado. El código es "etiqueta{propiedad: valor;}". Por ejemplo, para darle un ancho de 800px al elemento body el código sería:

body {width:800px}

� Selector universal (*): aplica el estilo a todos los elementos de la página. El código es

"*{propiedad:valor;}". Este selector lo hemos empleado en la primera línea de la hoja de estilos para comenzar con valor 0 el margin, padding, border y background en toda la página. De esta forma estas propiedades tendrán valor nulo por defecto y sus valores serán los que le demos, después de esta línea, a cada elemento en particular. Por ejemplo:

*{margin:0px;padding:0px;border:0px;background:none;}

Regla CSS

Declaración

h1 { color : black ; } Selector Propiedad Valor


179

� Selector de ID (#id): aplica el estilo al elemento con el atributo id="Identificador". El código es "#identificador{propiedad:valor;}". Por ejemplo, para dar color de fondo al elemento identificado con id="cabecera" ponemos:

#cabecera{background-color: lightgreen;}

� Selector de clase (.class): aplica el estilo a los elementos con el atributo class="clase". El

código es ".clase{propiedad:valor;}". Por ejemplo, para poner los títulos de la class="titlat" en mayúsculas ponemos:

.titlat{ text-transform: uppercase;}

� Combinación de selectores (#Identificador 1 etiqueta 2): aplica el estilo a los elementos con

la etiqueta indicada(2) y que se encuentran dentro del elemento(1) con id="Identificador 1". El código es "#Identificador elemento{propiedad:valor;}. Por ejemplo, para darle un borde inferior azul de 2px a los div que contiene el elemento con id="lateralDerecha" ponemos:

#lateralDerecha div{border-bottom:2px blue solid;}

� Selector de hijos (#Identificador 1>etiqueta 2): aplica el estilo a los elementos con la

etiqueta(2) y que se encuentran directamente dentro del elemento(1) con id="Identificador 1". Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>): El código es "Identificador > elemento {propiedad:valor}". Por ejemplo, para darle un ancho de 70px a las celdas th del elemento id="fila1" ponemos:

#fila1>th{width:70px;}

� #Identificador 1>nombre elemento 2>nombre elemento 3: aplica el estilo a los elementos con

el nombre indicado(3) hijo directo de los elementos(2) que son hijos directos del elemento(1) conid="Identificador 1". El código es "#Identificador > elemento > elemento {propiedad:valor}". Por ejemplo, para darle un ancho de 60px a las casillas de selección que están en las celdas th del elemento id="fila2" ponemos:

#fila2>th>select{width:60px;}

� Selector 1, selector 2, ... : aplica el estilo a los elementos seleccionados con los selectores

indicados en la lista. Así, el código para tres selectores sería "selector 1, selector 2, selector 3 {propiedad:valor;}". Por ejemplo, para definir los márgenes de los elementos identificados con id="latitud", id="altitud", id="tempminhis" ponemos:

#latitud, #altitud, #tempminhis {padding: 0px 5px 0px 5px;}

Cuando el selector de dos o más reglas CSS es idéntico, se pueden agrupar las declaraciones de

las reglas, separadas por ";", para hacer las hojas de estilos más eficientes. Por ejemplo para definir la altura y el borde inferior del elemento id="resume6" ponemos:

#resume6 {height: 1.5em; border-bottom: 1px black solid;}


180

Comentarios en el código

Los comentarios en una línea los escribimos después de "//". Cuando un comentario ocupe más de una línea debe ir entre "/*" y "*/".

Propiedades y valores.

En este apartado señalaremos las propiedades de CSS y valores que hemos empleado en el presente proyecto.

P 1. Unidades de medida.

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).

A continuación se muestra la lista de unidades de medida absolutas y relativas utilizadas en

este proyecto:

� pt : (puntos) 1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros. Es la unidad preferida para indicar el tamaño de letra del texto para los documentos que se van a imprimir. Por ejemplo, en nuestro caso hemos puesto:

body{font: 8pt;}

� em: relativa respecto del tamaño de letra empleado. El valor de 1em se puede aproximar por

la anchura de la letra M ("eme mayúscula") del tipo de letra que se esté utilizando. La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando. Si se utiliza una tipografía de 8 puntos, como en nuestro caso, 1em equivale a 8 puntos.

� px: (píxel) relativa respecto de la pantalla del usuario

� % : Un porcentaje está formado por un valor numérico seguido del símbolo % y siempre está

referenciado a otra medida. Cada una de las propiedades de CSS que permiten indicar como valor un porcentaje, define el valor al que hace referencia ese porcentaje. En nuestro caso lo hemos utilizado ajustar el tamaño de letra a algunas tablas. Por ejemplo, en la tabla id="resultadosmes" hemos empleado un tamaño de letra del 80% del tamaño asignado a la página (8pt):

#resultadosmes td{font-size: 80%}


181

P 2. Colores.

Para este proyecto hemos elegidos colores distintos en cada zona, de la página, para agrupar el contenido relacionado entre si, de forma que se diferencien unas zonas de otras sin que resulten contrastes demasiado llamativos.

Los colores se han indicado de dos maneras, unos con su palabra clave (nombre en inglés de

cada color) y otros con el sistema hexadecimal RGB. A continuación enumeramos los colores empleados en este proyecto junto a una muestra de cada uno:

aquamarine

black

blue

goldenrod

gray

lavender

lightgreen

lightgrey powderblue

#68729E

#ffffff

P 3. Modelo de cajas

El modelo de cajas consiste en que todos los elementos incluidos en la página HTML se representen mediante cajas rectangulares. Con CSS controlamos el aspecto de todas las cajas, definiendo la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja. Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento.

figura 2.- Modelo de cajas


182

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes (figura 2):

� Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo,

una imagen, el texto de una lista de elementos, etc.)

� Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.

� Borde (border): línea que encierra completamente el contenido y su relleno.

� Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.

� Color de fondo (background color): color que se muestra por detrás del contenido y el

espacio de relleno.

� Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

P 4. Posicionamiento.

Para cumplir con el modelo de cajas, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son:

� Las propiedades width y height de la caja (si están establecidas). � El tipo de cada elemento HTML (elemento de bloque o elemento en línea). � Posicionamiento de la caja (normal, relativo, absoluto, fijo o flotante). � Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes,

etc.) � Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la

ventana del navegador. El HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y

elementos de bloque. Los elementos de bloque ("block elements") siempre empiezan en una nueva línea y ocupan

todo el espacio disponible hasta el final de la línea. Los elementos, empleados en este proyecto, de bloque definidos por HTML son: div, h1, h2, hr, p, table, ul, li, td, th, tr.

Los elementos en línea ("inline elements") no empiezan necesariamente en nueva línea y sólo

ocupan el espacio necesario para mostrar sus contenidos. Los elementos, empleados en este proyecto, en línea definidos por HTML son: a, br, font, img, input, label, select, sub, sup.


183

P 5. Propiedades.

� background: fondo de un elemento. � background-color: color de fondo. � border: ancho de los bordes de un elemento (superior, derecho, inferior, izquierdo) � border-bottom: borde inferior � border-radius: radios esquinas de los bordes redondeadas � border-right: borde derecho � border-top-left-radius: radio esquina izquierda borde superior � border-top-right-radius: radio esquina derecha borde superior � color � float: posicionamiento flotante del elemento � font: fuente � font-size: tamaño de fuente � font-weight: grosor de la fuente � height: altura � list-style: estilo de todas las opciones de una lista � letter-spacing: espacio entre letras de una palabra � margin: márgenes de un elemento (superior, derecho, inferior, izquierdo) � margin-left: margen izquierdo. � margin-right: margen derecho. � padding: todos los rellenos de un elemento (superior, derecho, inferior, izquierdo) � padding-right: relleno derecho. � text-align: alineación horizontal � text-transform: transforma un texto (a mayúsculas...) � width: ancho

P 6. Valores de las propiedades � auto: por defecto asignado por el navegador � bold: grosor de letra negrita � center: centrado � left: izquierdo � none: nulo � normal: grosor de letra por defecto � right: derecho � solid: continua � uppercase: mayúsculas � Verdana, Geneva, Arial, Helvética, sans-serif: tipo de letras


184

3.2.2.2. Archivos externos de CSS. En este proyecto, el código css lo hemos escrito en un archivo externo (archivo.css) que hemos

guardado en la carpeta "css" que acompaña al archivo HTML de la página.

Archivo.css

En nuestro caso, para aplicar CSS al documento HTML hemos creado una hoja de estilo

externa ("estilo_0_1.css") localizada en la carpeta "css" del proyecto.

figura 3.- archivo css dentro del proyecto.

Archivo.css en el HTML

Para enlazar el documento HTML con el archivo de la hoja de estilos CSS insertamos, con la etiqueta <link>, el siguiente código en el encabezado (entre <head> y </head>) del código HTML:

<link rel=”stylesheet” href=”css/estilo_0_1.css” />

El atributo rel indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor "stylesheet".

El atributo href indica la URL del archivo CSS que contiene los estilos. La URL indicada

puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. Este enlace (link) indica al navegador que para mostrar el HTML debe usar la presentación

según el archivo CSS "estilo_0_1.css" que está dentro de la carpeta "css".

Código del Archivo.css

A continuación mostramos el código CSS contenido del archivo "estilo_0_1.css" que hemos creado para este proyecto. En cuanto a la ordenación del código, como no es muy extenso, simplemente hemos agrupados los estilos aplicados a cada elemento.


185

//Comenzamos con valores 0 en todos los elementos *{margin:0px;padding:0px;border:0px;background:none;} //Definimos las propiedades del body: tipo y tamaño de letra, ancho, margen y //alineación del

texto. body{ font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; width:800px;margin:4px auto;text-align: center;} //Propiedades de la zona <div id="cabecera"> #cabecera{background-color: lightgreen;padding: 5px;border-top-left-radius: 10px;border-top-right-

radius: 10px;} //Propiedades de la etiqueta de texto <label id="local"> #local{font-size: 1.5em; font-weight: bold;padding-right: 10px;} //Propiedades de las etiquetas de texto <label id="latitud">, <label id="altitud"> y //<label

id="tempminhis"> #latitud,#altitud,#tempminhis{padding:0px 5px 0px 5px;} //Propiedades de la zona <div id="navegación"> #navegacion{background-color:gray} //Propiedades de las celdas <tr id="fila1"><th> </th></tr> #fila1>th{width:70px;background-color: lavender;} //Propiedades de las celdas <tr id="fila2"><th> </th></tr> #fila2>th{ background-color: powderblue; } //Propiedades de los select <tr id="fila2"><th><select> y los input //<tr id="fila2"><th><input /> #fila2>th>select,input{width: 60px;} #fila3>th{width:106px;background-color: lavender;} #fila4>th{background-color: powderblue;} #fila2>th>select{width: 60px;} #fila4>th>select{width: 60px;} //Propiedades de la zona <div id="lateralIzquierda"> #lateralIzquierda{float: right;} //Propiedades de la tabla <table id="var1"> #var1{ width: 800px; border: 1px black solid;border-radius: 10px;background: goldenrod;margin-

right: 4px;} //Propiedades del botón <input id="btnImprime" type="button" value="Imprimir todo"

title="Imprimir todo"> #btnImprime{border: 1px black solid;border-radius: 3px; margin: 5px;background:gray;width: 80px;} //Propiedades de los enlaces <a class="flecha"> .flecha{float: right;}


186

//Propiedades de las celdas de datos de la tabla <table id="datosmes"> #datosmes td{font-size: 80%;border-right: 1px black solid;padding: 5px;} //Propiedades de las celdas de encabezado de la tabla <table id="datosmes"> #datosmes th{font-size: 80%;padding: 0px 5px 0px 5px;border-bottom:1px aquamarine solid;} //Propiedades de las celdas de la tabla <table id="datosmes"> #datosmes{border: 1px black solid;} //Propiedades de las celdas de datos de la tabla <table id="resultadosmes"> #resultadosmes td{font-size: 80%;border-right: 1px black solid;padding: 5px;} //Propiedades de las celdas de encabezado de la tabla <table id="resultadosmes"> #resultadosmes th{font-size: 80%;padding: 0px 5px 0px 5px;border-bottom:1px aquamarine solid;} //Propiedades de las celdas de la tabla <table id="resultadosmes"> #resultadosmes{border: 1px black solid;} //Propiedades de las celdas de datos de la tabla <table id="resultadosanuales"> #resultadosanuales td{font-size: 80%;border-right: 1px black solid;padding: 5px;} //Propiedades de las celdas de encabezado de la tabla <table id="resultadosanuales"> #resultadosanuales th{font-size: 80%;padding: 0px 5px 0px 5px;border-bottom:1px aquamarine solid;} //Propiedades de las celdas de la tabla <table id="resultadosanuales"> #resultadosanuales{border: 1px black solid;} //Propiedades de las celdas de encabezado de la tabla <table id="DatyResf"> #DatyResf th{font-size: 75%;border-right: 1px black solid;padding:0px 3px 0px 3px; border-bottom:1px aquamarine solid;} //Propiedades de las celdas de datos de la tabla <table id="DatyResf"> #DatyResf td{font-size: 75%;padding:3px;} //Propiedades de las celdas de la tabla <table id="DatyResf"> #DatyResf{border: 2px black solid;} //Propiedades de la etiqueta de texto <label id="csa"> #csa{padding: 3px 10px 0px 5px;background: lightgrey;float: left;width: 100px;} //Propiedades de la etiqueta de texto <label id="k1"> #k1{padding: 0px 10px 0px 5px;background: lightgrey;float: left;width: 290px;} //Propiedades de la etiqueta de texto <label id="pk1"> #pk1{padding: 3px 10px 0px 5px;background: lightgrey;float: left;width: 314px;} //Propiedades de la zona <div id="resf"> #resf{height: 23px;background: lightgrey;width: 749px;}


187

//Propiedades de la zona <div id="lateralDerecha"> #lateralDerecha{float: right;text-align: left; border: 1px black solid;border-radius: 5px;background: lightgray;width: 180px; } #lateralDerecha div{border-bottom: 2px blue solid;} //Propiedades de los enlaces <a> dentro de la zona <div id="lateralDerecha"> #lateralDerecha a{margin-left: 3px;} //Propiedades de las listas <ul> dentro de la zona <div id="lateralDerecha"> #lateralDerecha ul{list-style: none;} //Propiedades de los elementos <label> en los elementos<li> dentro de la zona <div

//id="lateralDerecha"> #lateralDerecha li label{ float:right;} //Propiedades de los elementos<li> dentro de la zona <div id="lateralDerecha"> y de la //zona

<div id="resume6"> #lateralDerecha li,#resume6 {height: 1.5em; border-bottom: 1px black solid;} //Propiedades de los títulos <h2 class="titlat"> .titlat{ background-color: #68729E; color: #ffffff; font-size: 8pt; text-transform: uppercase; padding: 7px 3px 7px 8px; font-weight: normal; letter-spacing: 2px; margin: 0px 0px 8px 0px; } //Propiedades de la zona <div id="RAP"> #RAP{border: 1px black solid;border-radius: 5px;background: lightgray;width: 200px;

}


188

APLICACIÓN JAVASCRIPT. MEMORIA DESCRIPTIVA. JAVASCRIPT

189

3.2.3. Archivos JavaScript En esta parte del proyecto describiremos brevemente JavaScript como lenguaje de

programación de los scripts que se ejecutan en la página web que forma parte de nuestro proyecto. Un script es un programa insertado dentro del documento HTML y que es interpretado y ejecutado por el navegador. Estos programas se ejecutan en el ordenador del usuario directamente al leer la página o cuando se produce un evento particular.

En nuestro caso hemos programado scripts para realizar los cáculos del problema, para

presentar los resultados en distintas tablas, dibujar las gráficas y para imprimir los resultados. El presente apartado se compone de las siguientes partes:

3.2.3.1. JavaScript 3.2.3.2. Sintaxis 3.2.3.3. Variables

Variables locales variables globales Tipos de datos Array

3.2.3.4. Control de flujo y manejo de errores Condicionales Try - Catch. Control de excepciones Bucles de iteración

3.2.3.5. Funciones Declaración Funciones predefinidas Expresiones Operadores Número de decimales Objeto Math Objeto String Método getElementById y propiedad innerHTML

3.2.3.6. Objetos de control Button Select Text

3.2.3.7. Eventos Load Click Change

3.2.3.8. Archivos externos de JavaScript Archivos.js Archivos.js en el HTML

Estructura de los archivos.js


190

3.2.3.1. JavaScript JavaSript es una marca registrada de Sun Microsystems (http://www.sun.com/suntrademarks).

JavaScript está normalizado por ECMA Internacional (Asociación europea de normalización sistemas de información y comunicación) con el nombre ECMAScript Language Reference.

En junio de 2015 se cerró y publicó el estándar ECMAScript 6 (última versión hasta la fecha)

[4]. La descripción de JavaScript queda fuera del alcance de este proyecto, por eso nos limitaremos

a mencionar su uso como herramienta para programar la página web en la que presentamos los cálculos que son el objeto de nuestro proyecto. A continuación describiremos las características de JavaScript que hemos empleado en la programación de la web de este proyecto.

3.2.3.2. Sintaxis En JavaScript separamos las instrucciones (sentencias) por un punto y coma al final de cada

instrucción. El punto y coma no es necesario si la instrucción siguiente está en una línea distinta, pero para escribir varias instrucciones en la misma línea deben ir separadas por punto y coma. Se recomienda siempre añadir punto y coma para evitar efectos secundarios.

JavaScript distingue mayúsculas y minúsculas (es case-sensitive) y utiliza el conjunto de

caracteres Unicode. JavaScript no es sensible a los espacios, así que podemos alinear las instrucciones como

queramos siempre que estén separadas por punto y coma o por saltos de línea. En la presentación del código no hay reglas predefinidas para los espacios y sangrías. La forma

de organizar nuestro código responde a la intención de mostrarlo de una manera clara y ordenada que nos permita identificar cada una de sus partes de manera rápida y así facilitarnos su análisis y posibles cambios.

Dentro de los script incluimos anotaciones para explicar su funcionamiento. Estas anotaciones

no interfieren con la ejecución del script y comienzan con dos barras de división (//comentario) cuando van al final de una línea. Cuando el comentario tiene saltos de línea comenzará con /* y terminará con */

3.2.3.3. Variables Una variable es una manera de almacenar un valor. En nuestro caso, para declarar las variables

utilizamos la palabra clave "var" seguida del nombre que le demos ( var Nombre;). Una vez declarada una variable le asignamos un valor mediante el signo = (Nombre = valor;).


191

Se escriben de forma dinámica, es decir, no hace falta especificar el tipo de contenido de la variable. También podemos simplificar el código declarando una variable y asignándole un valor en la misma línea ( var Nombre = valor;).

Variables locales y variables globales. Las variables locales se definen dentro de una función y solo se tiene acceso dentro de la

misma función. Las variables globales se definen fuera de cualquier función y tenemos acceso fuera y dentro

de las funciones, es decir, están disponibles en el código del documento en el que están declaradas.

Por ejemplo, en la figura 8 podemos ver como, para la función que hemos llamado

"seleccionaProvincia", se define una variable local que llamamos "texto" dentro de la función y una variable global que llamamos "lista" fuera de dicha función.

Tipos de datos. En este proyecto hemos utilizado variables de los siguientes tipos:

� Number : representa un número (41 ó 9.7) � String : representa texto. Puede asignarse con comillas ("texto") o con apóstrofos ('texto'). � Boolean: representa los estados verdadero (true) o falso (false).

Objeto de tipo matriz, Array Un array (al que llamaremos vector) es una estructura de datos, ordenados, que permite

almacenar un conjunto de datos que expresaremos entre corchetes []. Cada dato es un elemento del array. Dentro de los corchetes, los elementos van separados por una coma (,) y, además, si son expresiones de texto entre comilla (""). Un vector se identifica por su nombre. Cada elemento de un vector queda referenciado por un subíndice que indica la posición que ocupa dentro del vector (comenzando a contar en 0).

El número de componentes de un vector, o longitud del vector, lo podemos conocer por la

propiedad lenght de la clase Array. Podemos recorrer los elementos de un vector por medio de un ciclo "for". En este proyecto hemos utilizado mucho esta estructura para datos y resultados. Esta clase nos

permite, por ejemplo, agrupar en un vector de 12 componentes, los datos mensuales de una determinada variable, de forma que cada componente del vector se corresponde con el valor de


192

dicha variable en el mes identificado con el subíndice de dicho componente dentro del vector. Así el primer elemento del vector sería el valor de la variable en enero, el segundo en febrero y así hasta el último que sería el valor en diciembre. También ha resultado muy útil el uso de arrays multidimensionales (array cuyos datos son arrays), por ejemplo, para agrupar en un vector de 52 elementos (cada uno correspondiente a una provincia), los vectores (de 12 elementos) de los valores mensuales de la variable "factor de corrección de k" (figura 1).

Para declarar un vector: var nombre = new Array (elemento0,elemento1,...,elementoN) Para acceder a un elemento: nombre[subíndice] Para expresar la longitud del vector: length.nombre

figura 1. ejemplos de vectores

3.2.3.4. Control de flujo y manejo de errores

En JavaScript utilizamos el punto y coma (;) para separar sentencias de código. Para agrupar

sentencias, que forman un bloque, utilizamos un par de llaves {}.

Condicionales Un condicional es una serie de comandos que se ejecutan si una condición es verdadera.

JavaScript soporta dos condicionales: if-else y switch

� Condiciónal "if else".

if(condición){código para condición verdadera} else{código para condición falsa }

También podemos usarlo con "else-if" para tener múltiples condiciones

if(condición){sentencia_1} else if(condición_2 ){sentencias_2}... else{última sentencia}

Los siguientes valores se evaluarán como falso: false, undefined, null, 0, NaN, y la cadena vacía "".


193

� Condicional switch Con switch el programa evalúa una expresión y compara el resultado con los casos que dispone

tal que si encuentra coincidencia con alguno ejecuta la sentencia asociada.

Try-Catch. Control de excepciones Consiste en un bloque try que contiene una o más instrucciones y un bloque catch que

contienen las sentencias que especifican qué hacer si dentro del try se ha detectado un error o excepción.

Bucles de iteración En un bucle se repite una acción un número de veces. De las sentencias para bucles disponibles en JavaScript hemos utilizado: for, break y for...in

� Bucle for Se repite hasta que la condición especificada no se cumpla. Es similar al de Java. Utilizamos esta forma para repetir una serie de instrucciones un número de veces determinado

sin tener que repetir el código. Se utiliza el operador (++) para incrementar una unidad. El diagrama de un bucle for es:

for(inicio;condición;incremento){sentencias}

En la figura 2 podemos ver un ejemplo del uso de "for" en nuestro proyecto.

figura 2. Ejemplo de bucle "for"

� Sentencia break

En nuestro caso, se utiliza para salir de un switch y de un for.


194

� Sentencia for...in Itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para

cada propiedad distinta, JavaScript ejecuta las sentencias especificadas.

for(variable en objeto){sentencias}

figura 3. Sentencia for...in utilizada en el archivo grafica-lineal-visor_ACSenJS.js

3.2.3.5. Funciones En JavaScript, una función es procedimiento formado por un conjunto de declaraciones que

realiza una tarea bien definida o calcula un valor. Así, cada vez que se repita el procedimiento utilizamos la función en lugar de repetir las todas sentencias que definen una tarea.

Declaración de una función

La declaración de una función consiste en la palabra clave "function" seguida por:

� nombre de la función � argumentos para la función, entre paréntesis y separados por comas. � declaraciones JavaScript que definen la función, entre llaves {}.

function Nombre_función (argumentos){código de la función} Para que se ejecute la función debemos llamarla desde fuera por su nombre:

Nombre_función(parámetros); Cada vez que se llama a una función se ejecutan todas las líneas de la misma, pero si no es

llamada no se ejecutará. Para las funciones que retornan un valor podemos ver el valor retornado por medio de la

palabra clave "return".


195

figura 4. función ComprobacionSC

Funciones predefinidas. En este proyecto se han utilizado las siguientes funciones predefinidas de JavaScript:

� eval(cadena): evalúa una cadena de código JavaScript sin hacer referencia a un objeto particular. En el caso de expresiones aritméticas JavaScript las evalúa automáticamente sin que tengamos que utilizar eval().

� isNaN(valor): evalúa un argumento (valor) para determinar si es NaN (no es un número). � parseInt(cadena): devuelve un valor numérico entero. � parseFloat(cadena): devuelve un número de coma flotante.

Expresiones.

Una expresión es una unidad de código válida que tiene un valor. En este proyecto utilizamos

los siguientes tipos de expresiones de JavaScript:

� aritméticas: evalúan un número � String: evalúan una cadena de caracteres � Lógica: evalúan verdadero (true) o falso (false).

Operadores En este proyecto utilizamos los siguientes tipos de operadores de JavaScript:

� de asignación: asigna un valor al operando de la izquierda en función del valor del operando

de la derecha.

= igual += (x += y) equivale a (x=x+y) -= (x -= y) equivale a (x=x-y)


196

� de comparación: compara los operandos y devuelve true o false.

== igualdad != desigualdad === igual tipo y valor !== desigual tipo y/o valor > mayor que < menor que >= mayor o igual que <= menor o igual que

� aritméticos: + suma - resta * multiplicación / división ++ suma 1 -- resta 1

� lógicos: comparan dos expresiones

&& and : devuelve true si las dos expresiones son true || or : devuelve true si alguna es true ! not : devuelve false si el operando no puede ser convertido a true

� de cadena de caracteres

concatenación (+): une dos valores string devolviendo dicha unión como un string. También usamos el operador (+=) para unir cadenas.

Número de decimales. Los cálculos se realizan con todos los decimales que resulten en cada operación pero en la

presentación de los resultados solo empleamos 2 decimales para adaptarlos al espacio del que disponemos para su presentación en la página web. De esta forma pensamos que podemos tener una presentación de los resultados es más clara sin perder precisión en los cálculos.

En nuestro proyecto hemos utilizado el método toFixed() para presentar los resultados con dos

decimales (toFixed(2)) o con ninguno (toFixed()). En la figura 5 podemos ver un ejemplo

figura 5. método toFixed() para indicar el número de decimales.


197

Objeto Math. Tiene propiedades y métodos para las constantes y funciones matemáticas. En nuestro caso

hemos utilizado la propiedad PI que tiene el valor del número pi y que se escribe como "Math.PI". De los métodos de Math hemos empleado los siguientes:

abs() : Valor absoluto sin(), cos() : funciones trigonométricas, en radianes atan2() : trigonométricas inversa, en radianes pow() : exponenciales (ejemplo Ab es: Math.pow(A,b)) floor(), ceil() : mayor/menor entero inferior /superior o igual al argumento min(), max() : lista de menor a mayor round() : completan sqrt() : raíz cuadrada

String Un string son caracteres entre comillas (simples o dobles). En este proyecto utilizamos el operador + para concatenar cadenas. La concatenación es añadir

una cadena de caracteres al final de otra. Las cadenas que resultan son literales, para agregar un número lo ponemos sin comillas y este pasa a ser parte de la cadena.

Por ejemplo en la figura 6 vemos como se forma la cadena "resultanualentabla" concatenando

tres cadenas "<tr><th>" y los números variables[a] y resultados [a]

figura 6. Ejemplo concatenación de cadenas

Método getElementById y propiedad innerHTML Con el método getElementById obtenemos la referencia de un elemento HTML y con la

propiedad innerHTML indicamos todo el código que debe cargarse en dicho elemento. (ejemplo en la figura 8)


198

3.2.3.6. Objetos de control El navegador crea un objeto visual por cada control que aparece dentro de la página. Desde

JavaScript accedemos a dichos objetos, para ejecutar los scripts en el navegador. En nuestro caso hemos utilizado los objetos de control Button, Text y Select.

A los eventos de los objetos HTML se les asocia una función que se ejecuta cuando se produce

el evento respectivo en un objeto de control(presionar un botón o cargar un dato).

Button Cuando presionamos un objeto button, en la web, se produce el evento click y se ejecutará el

script que tengamos asociado a dicho evento. Por ejemplo, en la figura 7 vemos como asociamos al evento click de un objeto tipo button identificado por id="btnImprime" la ejecución de la función "imprimePagina",

figura 7. control button

Select En un objeto Select podemos seleccionar un string de una lista y tener asociado un valor a

dicho elemento. Cuando seleccionamos un elemento de la lista se produce el evento change y se ejecutará el script que tengamos asociado a dicho evento.

Con JavaScript determinamos qué elemento de la lista está seleccionado y qué valor tiene

asociado cuando se produce el evento "Change". El objeto select tiene la propiedad options (posición) con la que accedemos al string seleccionado y al valor asociado:

document.getElementById("id").options[document.getElementById("id").selectedIndex;].text;

document.getElementById("id").options[document.getElementById("id").selectedIndex;].value; Lo que hacemos es lo siguiente:

� Identificamos el elemento select del HTML a cuyo evento change queremos asociar la ejecución de una función desde un script.

var lista=document.getElementById("id")

� Asociamos el valor de la lista seleccionado a la posición que ocupa dentro de dicha lista

numerando desde cero.

var indice= lista.selectedIndex;


199

� Accedemos al string seleccionado de la lista y a su valor asociado.

lista.options.indice.text lista.options.indice.value

Por ejemplo, en la figura 8 podemos ver un ejemplo de uso de un Select. Con la variable que

hemos llamado "lista", desde el archivo JavaScript, controlamos el elemento Select identificado con id="pro" del HTML. Así, cuando se produzca el evento change, en el select, en el elemento id="local" del HTML aparecerá el texto "Cálculos para ACS en: lugar " donde "lugar" será el nombre de la provincia que se corresponde con el string que ocupa la posición "lista" en la lista de string que contiene el select.

figura 8. control select para seleccionar una provincia

Text Un control de tipo Text permite al operador cargar caracteres por teclado. En nuestro caso,

aunque se puede, nuestro objetivo no es introducir caracteres por teclado sino que es programa calcula el valor que queremos que aparezca. Con el método setAttribute introducimos el valor que queramos y además, dicho valor queda almacenado en su propiedad "value". Esto nos resultó útil para presentar un valor en pantalla y utilizar dicho valor en otros cálculos, que es el fin que buscábamos en el diseño de este programa. Por ejemplo, en la figura 9 vemos como introducimos el valor "SCresultante" en un Text llamado "txtsup".

figura 9. control text


200

3.2.3.7. Eventos

Con JavaScript implementamos algoritmos que reaccionan a eventos que se producen en una

página web. En nuestro caso, para capturar los eventos que emite el navegador hemos utilizado el modelo de eventos W3C (World Wide Web Consortium). Con dicho modelo, implementamos un método para todos los objetos que nos permite registrar eventos. La sintaxis es:

addEventListener("evento", método a ejecutar, fase);

Evento Load El evento Load se ejecuta cuando se carga la página en el navegador. En nuestro caso lo hemos

empleado para introducir los datos en las listas de cada elemento Select que, para simplificar, en el HTML aparecen vacíos. De esta manera, al cargar la página todos los Select contendrán una lista con sus datos correspondientes. Por ejemplo, en la figura 10 observamos como se ejecutará el método que hemos llamado "carga" cuando se produzca el evento "load".

...

figura 10. evento load

Evento click Se produce cuando el usuario pulsa, sobre un elemento HTML, y suelta inmediatamente en el

mismo lugar. En nuestro caso lo hemos utilizado para imprimir los resultados a pulsar el elemento id="btnImprime" (figura 8).

Evento change

Se produce cuando varía el contenido de un elemento HTML. En nuestro caso lo hemos

utilizado cuando seleccionamos una opción en un Select y cuando varía el contenido de un elemento input tipo "text". En la figura 9 vemos un ejemplo para un elemento Select.


201

3.2.3.8. Archivos externos de JavaScript En este proyecto, el código de los scripts lo hemos escrito en archivos externos (archivos.js)

que hemos agrupado en la carpeta "js" que acompaña al archivo HTML de la página.

figura 11. Archivos JavaScript del proyecto.

Archivos.js Para nuestro proyecto hemos agrupado los scripts según el tipo de función o de cálculos para el

que han sido programados. De esta forma hemos creado cinco archivos (.js) a los que hemos llamado:

� localizacionjs_ACSenJS.js para los cálculos por el primer método [1] � fchart_ACSenJS.es para los cálculos por el segundo método (F-Chart) � imprimir.js para imprimir los resultados � Graficas_ACSenJS_1.js para dibujar las gráficas � grafica-lineal-visor_ACSenJS.js (*) para el archivo Gráficas_ACSenJS_1.js

(*) nota: este archivo no lo ha creado el autor de este proyecto, procede de los archivos

grafica-lineal-visor-nomin.js que se han utilizado como herramienta adaptándolos a las necesidades de nuestro proyecto. En la siguiente figura vemos el nombre y la dirección del autor de los archivos, en los nos hemos basado para dibujar las gráficas, y que hemos dejado como anotación dentro del archivo grafica-lineal-visor_ACSenJS.js de este proyecto.

figura 12. autor del archivo grafica-lineal-visor-nomin.js, anotación en el archivo grafica-lineal-visor_ACSenJS.js


202

Archivos.js en el HTML Para insertar las instrucciones JavaSript en el HTML, llamamos a los archivos mediante el

elemento <script>, en el cuerpo <body> del HTML de la siguiente manera:

<script type="text/javascript" src="js/archivo.js"></script> El atributo type indica el tipo de lenguaje que vamos a utilizar. En nuestro caso, en HTML5,

este atributo no es obligatorio ya que toma el valor "text/javascript" y no hace falta que indiquemos que se trata de datos de texto y JavaScript.

El atributo src indica la dirección URL correspondiente al archivo JavaScript que se quiere

insertar. El navegador lee la página web de forma lineal, es decir, primero lee <head> y después los

elementos de <body> uno después de otro. En este proyecto hemos colocado los elementos <script> justo antes de cerrar <body>. De esta forma, la página se cargará más rápidamente y los scripts se cargarán después de mostrar el contenido inicial de la página.

figura 13. Posición de los elementos <script> en el HTML

Estructura de los archivos.js

En los archivos externos en los que hemos programado los scripts que intervienen en la página

web de este proyecto, con el objetivo de tener el código de una forma ordenada que nos facilite su análisis y cambios, para introducir su contenido hemos seguido el siguiente orden:

1. Variables

2. Funciones

3. Agrupación de funciones

4. Elemento-Evento-Función


203

contenido: código JavaScript: ejemplo: Variables globales

elementos html <elemento id="el">

var Nombre1=document.getElementById("el");

datos y resultados de cálculos

var Nombre2= valor2; var Nombre3=new Array(n); var Nombre4;

Funciones

funciones cálculos

function NombreF1 (){sentencias}

agrupa funciones

function Grupo(){NombreF1(); NombreF2();...}

Elemento-Evento-Función

Nombre1.addeventListener("evento",Función);

figura 14. Esquema de un archivo.js

Comenzamos declarando las variables del problema y asignándoles sus valores iniciales en el

caso que se conozcan. Todas estas variables serán accesibles desde cualquier parte del resto del código (variables globales). Hemos procurado introducir las variables en orden a su intervención en los cálculos. Dentro de esta parte, distinguimos entre variables para los cálculos y variables que sirven de referencia a un elemento del HTML. Para asociar una variable con un elemento HTML utilizamos el método getElementById. Para indicar que dichos elemento pertenecen al documento html utilizamos el objeto "document" en la declaración de la variable. En la figura 11 podemos ver un ejemplo.

Tras las líneas donde se declaran las variables escribimos el código de las funciones. Dichas

funciones agrupan los métodos y variables para realizar los cálculos del problema y para presentar datos y resultados en la página web. Cuando tenemos varias funciones que queremos que se ejecuten en un mismo evento las podemos agrupar en una misma función y de esta forma podemos llamar a todas a la vez en lugar de llamar una a una, ahorrando así líneas de código. En el ejemplo de la figura 11 vemos como hemos agrupado tres funciones en una función llamada "Calcula_CasiTodo_fchart", así, cuando queremos ejecutar las tres funciones en el evento "change", de un elemento, solo tendremos que escribir una línea de código en lugar de tres.

En la parte final escribimos las sentencias que asocian una función a un evento en un elemento

HTML. Para esto utilizamos el método "addEventListener".


204

CAPÍTULO 3. APLICACIÓN JAVASCRIPT - Portal de sistemas ...

Documents

Transcript of CAPÍTULO 3. APLICACIÓN JAVASCRIPT - Portal de sistemas ...