Aplicación web para el cálculo de ICT

APP para el cálculo de ICT Página 1 de 63

APLICACIÓN WEB

PARA EL CÁLCULO DE ICT

JORGE BARRAGÁN GRANADO

PROYECTO FINAL

TUTOR: FRANCESC PÉREZ

STI2M

STUCOM 2011-2013


ÍNDICE:

1. INTRODUCCIÓN ...................................... 4

1.1.PRESENTACIÓN Y ESTUDIOS ACTUALES ............... 4

1.2.DESCRIPCIÓN DEL PROYECTO ....................... 5

1.3.DIAGRAMA DE FLUJO DE LA APLICACIÓN ............. 6

1.4.MOTIVACIONES Y CONOCIMIENTOS PREVIOS ........... 8

1.5.OBJETIVOS MÍNIMOS Y MÁXIMOS .................... 8

2. APLICACIÓN WEB ....................................10

2.1.¿QUÉ ES UNA APLICACIÓN WEB? ....................10

2.2.¿CUÁL ES LA ESTRUCTURA DE UNA APLICACIÓN WEB? ...10

2.3.CARACTERÍSTICAS DE LAS APLICACIONES WEB.........11

2.4.APLICACIÓN NATIVA Y NO NATIVA ..................11

3. APP PARA EL CÁLCULO DE ICT .........................14

3.1.PROGRAMACIÓN UTILIZADA .........................14

3.2.PROGRAMA UTILIZADO .............................14

3.3.ESTRUCTURA DE CARPETAS PARA LA APP .............15

3.4.ESTRUCTURA Y PARTES DE LA APLICACIÓN ...........16

3.5.APARTADO DEL CÓDIGO HTML5 ......................17

3.6.APARTADO DEL CÓDIGO CSS3 .......................24

3.7.APARTADO DEL CÓDIGO JAVASCRIPT .................31

4. RESULTADOS ........................................39

4.1.TESTEO DE LA APLICACIÓN ........................39

5. CONCLUSIONES ......................................43

5.1.VALORACIÓN DE LOS OBJETIVOS ....................43

5.2.LÍNEAS DE MEJORA ...............................43

6. ANEXO .............................................45

6.1.CÓDIGO HTML5:..................................45

6.2.CÓDIGO CSS3: ..................................50

6.3.CÓDIGO JAVASCRIPT: .............................53

7. BIBLIOGRAFÍA Y WEBGRAFÍA ...........................63


1. INTRODUCCIÓN

1.1. Presentación y estudios actuales Me llamo Jorge Barragán Granado y soy estudiante del segundo curso del grado superior de Sistemas de Telecomunicaciones e Informáticos en el centro de estudios STUCOM de Barcelona.

Mi trayectoria en el mundo de la electrónica y las nuevas tecnologías empezó hace ya nueve años, cuando cursé un grado medio en Diseño y Mantenimiento de Equipos Electrónicos de Consumo, en el Instituto Montilivi de Gerona. Al finalizar estos estudios, tuve la oportunidad de entrar en el mundo laboral y desarrollar todos los conocimientos adquiridos durante el grado. Primero, gracias a un convenio de prácticas con el instituto, pude trabajar como reparador de VHS, TVs, HiFi y reproductores DVDs en Electrónica Losada S.A.

Una vez terminado el contrato de prácticas, encontré el trabajo con el que desarrollé mis habilidades técnicas en el campo de las ICT. Empecé como aprendiz y durante los más de 6 años que fui empleado de Gironès i Rodés, pude profundizar mis conocimientos en electricidad (RBT), infraestructura de telecomunicaciones y, sobretodo, pude especializarme en domótica, atendiendo un curso oficial impartido por Jung Ibéria S.A.

En 2011, y debido a la situación del país, no pude continuar desarrollando mis aptitudes profesionales y ante la imposibilidad de encontrar un nuevo trabajo, decidí apostar por la formación superior. Así que me inscribí al Curso de Especialización en Producción y Post-producción Audiovisual de ERAM-UdG, para satisfacer mi gran interés en las tecnologías TIC. Compaginé este curso con la formación del grado superior de STUCOM para actualizar y ampliar mis capacidades, para, en un futuro, poder dedicarme profesionalmente a las nuevas tecnologías.

Este proyecto es fruto de toda la experiencia adquirida durante mi andadura profesional, así como los conocimientos asimilados a lo largo del grado. Este trabajo final se basa en el cálculo de ICT, como se describe en el siguiente apartado.


1.2. Descripción del proyecto

La aplicación que hemos desarrollado está enfocada a nivel de soporte académico y tiene como finalidad realizar el cálculo de la señal de TDT en la toma final de los usuarios. Servirá para, en base a la señal recibida en la antena, verificar el número de plantas, pisos, tipo de cable y pérdidas de derivación, si la calidad de señal será óptima dentro de los márgenes legales establecidos según la normativa para ICT.

Si nos basamos en el cálculo real de una ICT, existen una gran variedad de variables a tener en cuenta, debido al amplio número de componentes posibles (cable, conectores, componentes intermedios, antenas, amplificadores,…). Por este motivo, hemos realizado un esquema con los componentes básicos, en el que se pueden definir los siguientes parámetros delimitados de la siguiente manera:

1. Número de plantas y pisos determinado (de 1 a 10)

2. Potencia de antena, que debe estar dentro de los

márgenes legales (entre 0-90 dBµV)

3. Potencia del amplificador (de 0 a 20 dBµV)

4. Derivadores, 4 tipos a escoger con mayor y menor

pérdida de paso, según sea necesario.

5. Tipo de cable a seleccionar entre 3 tipos, con

diferentenivel de pérdida en dB por metro.


1.3. Diagrama de flujo de la aplicación


Enel anteriordiagrama de flujo se puede visualizar de una manera sencilla el funcionamiento interno de la aplicación. Este tipo de esquema es muy útil para localizar los posibles errores que se generen en el cálculo final.

1. Como se observa en el esquema, la aplicación se inicia a petición del usuario.

2. Tras ser cargada en el navegador, esta se mantiene a la espera de que se seleccionen todos los datos. Si es así, se inicia la recogida de los valores y los almacena en variables. De lo contrario, se mantiene a la espera hasta que se completen.

3. La aplicación comprueba que todos los datos estén dentro de los márgenes definidos y todos los parámetros seleccionados. Indica si existen datos sin seleccionar y permanece a la espera hasta que se definan todos los campos.

4. Tras introducir los datos y haberlos verificado, si se presiona el botón de “Realizar cálculo” del apartado final, se realizan los cálculos y se vuelca el resultado en una tabla, mostrando el valor de potencia final en toma de todos los pisos y para cada planta.

En todo momento es posible eliminar los datos a través del botón “Eliminar datos”. Entonces, la aplicación regresa al modo inicial, a la espera dereiniciar todo el proceso.


1.4. Motivaciones y Conocimientos previos

La motivación principal de este proyecto es poder crear una aplicación para Smartphone en un lenguaje no nativo y adquirir nuevas competencias en lenguaje de programación web con el cual se desarrolla el proyecto. Dado que he trabajado en el sector de lainstalación de ICT estoy muy motivado al realizar un proyecto que personalmente pienso que puede ser una buena plataforma formativa.

1.5. Objetivos Mínimos y Máximos

El objetivo mínimo es el de realizar una aplicación que calcule el valor de señal final para las tomas, en base al valor de potencia de antena y el número de pisos.

Los puntos que he delimitado para la aplicación son el poder realizar el cálculo de la potencia de señal final en toma en base a 5 parámetros:

1-Número de pisos

2-Número de plantas

3-Potencia recibida en la antena

4-Potencia asignada al preamplificador

5-Pérdidas por derivación

6-Pérdidas por metros y tipo de cable.

Un punto extra para mejorar el contenido mínimo es realizar un control de errores.

Como puntos máximos está la optimización de los puntos mencionados anteriormente para poderadquirir valores desde una base de datos en referencia a los diferentes proveedores de componentes para las ICT como alcad, ikusi, televes, entre otros.


2. APLICACIÓN WEB

2.1. ¿Qué es una aplicación web?

Una aplicación web es una aplicación de software codificada en un lenguaje hecho para los navegadores web y es el navegador el que la ejecuta. Estas aplicaciones contienen elementos que permiten al usuario interactuar con la información que contienen.

Las aplicaciones web tienen mucho éxito, principalmente, porque solo requieren un navegador web independientemente del sistema operativo y no se necesita instalar ningún software en los equipos de los miles de usuarios que las utilizan. Una aplicación web puede ser ejecutada en múltiples plataformas diferentes.

2.2. ¿Cuál es la estructura de una aplicación web?

Existen muchas variaciones posibles. Una aplicación web está normalmente estructurada como una aplicación de trescapas. En su forma más común, el navegador web ofrece la primera capa y un motor capaz de usar alguna tecnología web dinámica (PHP, JavaServlets o ASP, ASP. NET, CGI, ColdFusion, embPerl, Python [Programminglanguage] o Ruby onRails), que constituye la capa intermedia. Por último, una base de datos constituye la tercera y última capa.

El navegador web manda peticiones a la capa media que ofrece servicios valiéndose de consultas y actualizaciones a la base de datos. A su vez, proporciona una interfaz de usuario.


2.3. Características de las aplicaciones web

El usuario puede acceder fácilmente a estas aplicaciones empleando un navegador web (cliente) o similar. Si es por internet, el usuario puede entrar desde cualquier lugar del mundo donde tenga un acceso a internet. Pueden existir miles de usuarios pero una única aplicación instalada en un servidor. Por lo tanto, se puede actualizar y mantener una única aplicación y todos sus usuarios verán los resultados inmediatamente. Emplean tecnologías como Java, JavaScript, HTML5, Flash, Ajax, etc. que dan gran potencia a la interfaz de usuario. Emplean tecnologías que permiten una gran portabilidad entre diferentes plataformas.

2.4. Aplicación nativa y no nativa

Hoy día, en función de cómo se aborda su desarrollo, se suele hablar de tres tipos de aplicaciones móviles: nativas, no nativas (web) e híbridas. Las podemos definir de la siguiente manera:

Aplicaciones nativas: son aquellas que están íntegramente programadas en el entorno de desarrollo específico para cada sistema operativo (Android, IOS, Symbian, etc.). Aplicaciones web:están completamente desarrolladas en lenguaje HTML5. Aplicaciones híbridas

Uno de los puntos fuertes de las aplicaciones web móviles es su funcionamiento en todas las plataformas. Solo se debe

: son aplicaciones desarrolladas en parte con el entorno de desarrollo nativo y en parte en lenguaje WEB (HTML5).


tener en cuenta la compatibilidad con el motor de browser/navegador.

Una aplicación web funcionará en “casi” todos los Smartphone. Las aplicaciones nativas requieren un desarrollo para cada uno de los sistemas operativos (e incluso para versiones diferentes de éstos) y las híbridas necesitan, por lo menos, el desarrollo del “contenedor” nativo que aloje las partes en lenguaje web.

Existen diferentes frameworks como Phonegap, Learn, Lungo, entre otros, que trabajan para crear estos contenedores, y facilitanla programación posterior en HTML5.

Phonegap, por ejemplo, maneja API’s que permiten tener acceso a elementos como el acelerómetro, cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, etc.

ACCESO A LAS CAPACIDADES DEL DISPOSITIVO

AFINIDAD CON LA PLATAFORMA

APPS NATIVAS · AFINIDAD PLATAFORMA ÚNICA · ESCRITURA POR MEDIO DE PLATAFORMA SDK · DEBEN SER ESCRITOS PARA CADA PLATAFORMA · DISTRIBUCIÓN POR APPSTORE · ALTO RENDIMIENTO GRÁFICO

APPS HIBRIDAS · AFINIDAD CON MULTIPLATAFORMA · ESCRITURA POR MEDIO DE PLATAFORMA WEB (HTML5, CSS 3 & JAVASCRIPT) · FUNCIONAMIENTO DE FORMA LOCAL EN EL DISPOSITIVO, PERMITE FUNCIÓN OFFLINE · DISTRIBUCIÓN POR APPSTORE · ALTO RENDIMIENTO GRÁFICO

APPS WEB MÓVIL · AFINIDAD CON MULTIPLATAFORMA · ESCRITURA POR MEDIO DE PLATAFORMA WEB (HTML5, CSS 3, JAVASCRIPT, ASP.NET, PHP,…) · FUNCIONAMIENTO DESDE SERVIDOR, VISIBLE EN MULTIPLES DISPOSITIVOS · ACTUALIZACIONES CENTRALIZADAS · ALTO RENDIMIENTO GRÁFICO


3. APP PARA EL CÁLCULO DE ICT

3.1. Programación utilizada

Para realizar la aplicación he utilizado 4 lenguajes de programación web:

HTML5: con el que se define la estructura de la aplicación, definiendo botones, secciones desplegables o fijas, texto a visualizar, etc.

CSS3: con este código se define el estilo visual de la página, y se pueden definircolores, sombras, posiciones y dimensiones de los apartados definidos en HTML5.

JavaScript: este es el lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una APP o página web.

Jquerymobile:

3.2. Programa utilizado

nos permite generar aplicaciones cuya apariencia será siempre la misma independientemente del dispositivo desde el que acceda un usuario, siempre que este usuario acceda desde un dispositivo que acepte HTML5.

Para la creación de una aplicación web podemos utilizar programas de escritura de código que nos facilitaránmucho esta tarea. Yo he utilizado el programa Dreamweaver de Adobe. Una vez instalado, debemos abrir un nuevo proyecto y escoger la base de HTML5. Esto creará un archivo específico para este código y facilitará a medida que escribamos, con la tecla tabular, las funciones, apartados y secciones a los que podemos optar por medio de una lista desplegable donde poder seleccionar la que precisemos. Esto facilitará enormemente la creación del código.


3.3. Estructura de carpetas para la APP

La estructura de archivos para esta aplicación es la que describimos a continuación.He creado una carpeta principal, la cual ha sido nombrada “APP para el cálculo de ICT

”. Dentro de esta carpeta, he creado cuatro carpetas más. Tres de estas hacen referencia a los códigos de programación a utilizar (CSS3, HTML5 y JavaScript) y la cuarta sirvepara posibles imágenes que se utilicen en el programa.

Dentro de cada carpeta he creado un archivo con la extensión adecuada.

Dentro de la carpeta HTML5 Dentro de la carpeta CSS3 Dentro de la carpeta JS

Una vez definida la estructura de archivos, es momento deiniciar la creación de la APP. Para ello ejecutamos el archivo principal HTML5, que es el cuerpo de la aplicación.

Posteriormente definiremos el contenido CSS3 para darle estilo visual. Por último añadiremos el código JS para crear las funciones que dotarán la aplicación de funcionalidad realizando los cálculos, transiciones y lectura de las variables, entre otras.


3.4. Estructura y partes de la aplicación

La parte principal de la aplicación es la definida en el código HTML5. Consta de tres apartados (head, body, footer).

La distribución de los campos en la página es la que se detalla en la figura de la derecha.

En la aplicación se puedenidentificar los campos de lasiguientemanera:

Elheader(encabezado): es la parte superior dela página. Generalmente está formado por una serie de elementos comunes: logo de la empresa, nombre, imagen o imágenes representativas y, en algunos casos, datos de contacto, como teléfono y email.

Elbody (cuerpo): es la parte de la página que contiene el contenido, secciones y divisiones, entre otros.

Elfooter (pie): representa el pie de un documento o sección. La información que se suele añadir en este bloque es el autor del documento, enlaces a contenido relacionado, información de copyright, avisos legales, etc.

Header

Body

Footer


3.5. Apartado del códigoHTML5

A nivel de código,definiré las siguientes partes: la primera es la que se contiene dentro del <head></head>:

Title: es el nombre que aparecerá en la pestaña del

navegador.

Shortcuticon: define el icono que se mostrará en la pestaña del navegador.

Meta: la función de este atributo varía. Puede ser informativo, para los buscadores y usuarios, indicándoles el tipo de contenido de la web, sus palabras claves, etc., o pueden predefinir una actuación a la página.

Los siguientes link y script son los referentes a los archivos CSS3, JavaScript y Jquery. De esta manera enlazamos esos archivos, creados anteriormente, al proyecto.

La segunda parte y la principal es el body. Es donde se definen las secciones, divisiones, botones y todas las partes que se creen a nivel visual.


El primer elemento es el header. Por medio de un <h1>, definimos el título que se mostrará en la página. Por otra parte el <h1> también se utilizará como referencia en el archivo CSS3 para dar formato altexto. La siguiente imagen muestra el resultado.

Tras cerrar la parte anterior, creamos los apartados principales de la aplicación. Para ello creamos una sección “section” y un formulario “form” que contendrá todos los camposa los que nos referimos en el punto 1.5.


Los campos plantas, pisos, antena y amplificadorhan sido creados de la misma manera. En esta ocasión, se ha creado un <h2> y se han definido los siguientes parámetros:

data-roleydata-icon: son atributos de Jquery, los cuales no posee HTML5. Con ellos se agiliza la creación de contenido para el HTML5. En particular estos atributos definen el apartado como botón y crean un icono con el signo suma dentro de botón, respectivamente.

Title: con este comando podemos definir el texto que se mostrará al posicionarse sobre el botón.

El texto introducido entre “>texto <h2>” se mostrará

literalmente dentro del botón definido anteriormente.

Seguidamente, creamos una nueva sección, a la que llamaremos “section”, y dentro de esta una división “div”, le asignamos un “id” a las dos para poder, entre otras opciones, definir el estilo posteriormente en CSS3 y obtener valores desdeJavaScript.

Dentro de la división añadimos un “input” y

especificamoslos siguientes parámetros:

Type (range): muestra un slider para seleccionar el valor deseado dentro del menú, además del cuadro con las flechas para aumentar y disminuir el valor.

id: definimos el nombre según el “id” especificado en el botón incluyendo “num”. Para poder diferenciar el valor

introducido en cada uno de los apartados del menú.

value: este campo mostrará el valor por defecto dentro del cuadro input. Por este motivo, por ello se iguala a 0.

minymax: se utilizan para definir el rango que debe cubrir el valor a introducir, acotándolo para evitar que el usuario introduzca valores no permitidos.


Para el botón de derivadores definimos los mismos parámetros que en los anteriores apartados para <h2>, section y div. No obstante, dentro de “div” especificamos otros parámetros:

button: crea un botón dentro de la división a diferencia de los apartados anteriores donde se creaba un input.

type: con esto indicamos que el botón es un botón simple sin funciones específicas.

onclick: con este parámetro definimos que al hacer clic se realice la función “tabla_deriv()” especificada en JavaScript. Esta función creará una tabla con 4 derivadores por planta. Existen otros atributos como ondbclic, onselect, onmouseup,…

Para poder cargar la tabla creamos un nuevo apartado dentro de la sección, pero fuera de la división y definimoslos siguientes parámetros:

table: sirve para definir el principio y el final de una tabla.

class: permite definir el estilo por medio del archivo *.css.

id: permite identificar la tabla para importar los datos desde JavaScript.

aligne: este comando centra la tabla en la pantalla.

tbody: se utiliza para agrupar el contenido delatabla en el documento HTML5.


Para el apartado de cable, creamos el <h2>, section y div del mismo modo que en los apartados anteriores. Después, definimos dentro de “div” los siguientes parámetros:

input: sirve para crear una nueva entrada.

type: este comando es definido como “radio”. Mostrará un círculo de selección para cada uno de los tres tipos de cable.

name: este parámetro identifica el input por medio de un nombre, para realizar operaciones futuras con él si es preciso.

value: asigna un valor determinado por defecto. Al no tratarse de un input que modifique su valor, al seleccionarlo, el valor del “value” será el que se asignará a la variable.

label: define una categorización para un elemento de

entrada.

for: debe ser igual al id del input. Esto vincula el label con el input concreto.


title: el texto que se especifica aquí se mostrará al

posicionarse sobre cada uno de los tipos de cable.

El último apartado de la aplicación es el de “tomas finales”. Lo hemos creado siguiendo el mismo procedimiento que con los derivadores.

Se ha definidoun nombre de función (“cálculo()”) y un nuevo “id” para importar los datos desde JavaScript. Al tratarse del último apartado, debemos cerrar el formulario y la sección abiertos al iniciar el documento dentro del “body”.


Por último, hemos creado una nueva sección y división dentro del apartado <body> para definir un botón que eliminará todos los valores del formulario. Para ello hemos definido un “button” dentro de <div> y con los siguientes atributos:

type: el nombre “reset” es predefinido por HTML5 y realiza un borrado o reset de todos los campos del formulario, tal

y como indica su nombre.

id: este nombre se utilizará para referenciarlo posteriormente en el CSS.

form: vincula la función del botón definida en el tipo con el formulario.

><button>: este texto se muestra en el interior del botón.

Al finalizar la configuración del botón cierro la div, section y el body (</div>, </section>, </body>).

Al final del documento HTML5 hemos añadido un <footer>, en el que especificamoslos datos del alumno y la función del programa. Para ello utilizamos <p></p>. El texto que aparece entre ambas se mostrará literalmente en la página. Posteriormente, utilizaremos la <p> como id para definirel formato del texto.


3.6. Apartado del código CSS3

El archivo CSS es el que contiene el código que define el estilo visual de la aplicación. Para vincular los diferentes apartados del HTML5 a un código del CSS3 utilizamos los nombres definidos en los “id” del documento HTML5.

El primer apartado hace referencia a cada uno de los botones y su función es ocultar automáticamente los “inputs” (sliders) que hay dentro de cada uno delos

apartados.

El siguiente apartado es el referente a los botones y el texto que se visualiza en cada uno de ellos. Con los parámetros indicados definimos el ancho que ocuparán estos botones en la pantalla, así como su posición. Del mismo modo, también definimos la posición del texto en cada uno de ellos.

margin-left: asigna un margen en la parte izquierda de la página del tamaño especificado (12%).

margin-right: asigna un margen en la parte derecha de la página del tamaño especificado (12%).

Sin el código CSS3

Con el código CSS3


text-align: posiciona el texto en el lado izquierdo del

botón.

width: al indicar “auto”, ajusta el tamaño del botón dentro de los márgenes entre los definidos en el apartado “margin”.

Con la opción “:hover” después del nombre, definimos acciones específicas que modificarán el estilo del botón al posicionarse sobre él. Cabe indicar que esto es una mejora dentro del HTML5, ya que en antiguas versiones este efecto sobre el texto se debía realizar a través de JavaScript.

Sin el código CSS3

Con el código CSS3

Sin el código CSS3

Con el código CSS3


Del mismo modo que hemos configurado los atributos para los botones, lo hacemos seguidamente con los “inputs” (sliders)para centrarlos debajo del botón principal, con“id” específico (nombre de botón + “_num”).

Para definir el estilo visual del botón “cargar plantas” del apartado “derivadores”, hemos aplicado los siguientes atributos, referenciándonos al id “entrada_deriv” para ajustar el tamaño y la posición del mismo.

Sin el código CSS3

Con el código CSS3

Sin el código CSS3

Con el código CSS3


Igual que hemos configurado el botón del apartado “derivadores”, lo hacemos con el botón del “apartado tomas finales”.

Para ajustar el tamaño de las divisiones que contienen los sliders de todos los apartados, hemos utilizado el “id” “entrada”. Asimismo, lo relacionamos con el apartado cable con el “id” “entrada_cable”.

Sin el código CSS3

Con el código CSS3

Sin el código CSS3

Con el código CSS3


Para el botón final, el de “eliminar datos”, hemos utilizado los mismos atributos anteriores y hemos ajustado el valor de “marge-left/right”.

Para definir el tamaño del texto de cabecera utilizamos el “id” asignado <h1>. Para el texto del pie de la aplicaciónen cambio, utilizaremos el “id” asignado “p”.

Sin el código CSS3

Con el código CSS3

Sin el código CSS3


Por último definimos el id “input” para modificar el tamaño, color y tipo de letra de los resultados de la tabla que hacen referencia a los valores finales del cálculo que se mostrará en cada apartado de la tabla dentro de la sección “tomas finales”. Con el id “table.tablestyle” definimos el tamaño y tipo de letra, el ajuste del texto que aparece en la tabla, haciendo referencia al número de planta y piso.

Sin el código CSS3

Con el código CSS3

Con el código CSS3


Sin el código CSS3

Con el código CSS3

Con el código CSS3


3.7. Apartado del código JavaScript

El último apartado de la aplicación es el referente a JavaScript. Se trata de un lenguaje de programación que permite desarrollar acciones para dotar de funcionalidad la aplicación.

Por lo general, en el código del JavaScript se debe crear una función “function”, seguida del nombre deseado, abrir y cerrar paréntesis y abrir y cerrar corchetes. En la imagen, se muestra la estructura básica con la que se deben empezar las funciones.

Seguidamente, indicaremos todas las funciones que hemos utilizado, así como su funcionamiento paso a paso.

La primera función que hemos creado es la referente al estado de los botones, para controlar que al clicar se despliegue el contenido. Para esta verificación, realizamos dos funciones distintas. La primera función “iniciar” es la utilizada para verificar si se ha clicado alguno de los botones.

plantas=document.getElementById(‘plantas’): almacenamos el “ID” del botón plantas en una variable llamada plantas.

plantas.addEventLinstener(‘click’,pl,false): esta línea se mantiene a la escucha, para comprobar si se realiza clic sobre el botón. De ser así realiza la función especificada “pl”y pone la variable “bt1” a 0.

Para completar el funcionamiento del botón, a continuación definimos la siguiente función, con la que completaremos el mostrar/ocultar para los botones.


Tras la definición del nombre de la función “pl” en el apartado anterior, creamos una nueva función referente a“pl”.

El funcionamiento de esta función es la de mostrar únicamente el botones referentes a “bt1”. Para tal efecto oculta todos los submenús (botones), excepto el “submenu1” que lo bloquea. Además, al poner la “bt1” a 1 este permanecerá abierto hasta que no se pulse el mismo u otro botón, que cambiará su estado a 0.

Este conjunto de funciones se deben realizar para todos los submenús (botones), modificando el nombre de las variables y la función a referenciar.


Tras realizar el control de los desplegables de cada botón, hemos realizado la creación de la tabla para el apartado de derivadores. El objetivo es obtener una tabla con 4 tipos de derivadores con diferentes atenuaciones de paso y de derivación ya preestablecidas, para poder seleccionar el que más se adapte a las necesidades.

La función “tabla_deriv” está definida en el apartado de derivadores junto con el atributo “onclick”.

Las dos primeras líneas recogen el valor del “.value” de los “id” (plantas y pisos) del formulario y lo almacenan en variables con el mismo nombre, respectivamente.

Para generar los 4 derivadores por planta, realizo un “for” de dichas plantas de la mayor a la menor y dentro de este un nuevo “for” para los derivadores. Cada uno de los derivadores son de tipo “radio” y le asignamos un “name”, un “value” y un “id” para poder recoger datos posteriormente, haciendo referencia del nombre o el id.


document.getElementById('llenar1').innerHTML+: añade nuevas líneas en “llenar1” sin eliminar las anteriores. Si se desea que se eliminen las anteriores líneas únicamente se debe eliminar el signo “+”.

Con “while” analizamos si existe una tabla y la eliminamos para añadir los resultados de nuevos cálculos.

La función principal que se encarga de realizar todo el cálculo es la de “cálculo”, que está definida en el apartado final de “tomas finales”.


El primer apartado de la función cálculo es la que se encarga de recoger los datos y almacenarlos en variables, con el atributo “document.getElementById”.

En el caso de los valores de los derivadores, primero los recogemos uno a uno. A continuación los almacenamos en una array con el atributo “push”. Previamente creamos la array y le asignamos el nombre “deriv_final”. Esta variable

contendrá el valor de todos los valores.

Tras almacenar los valores del formulario en variables, iniciamos el cálculo para generar el valor final de las tomas, que se mostrarán en la tabla final.

Para iniciar el cálculo creamos un “for” de las plantas recorriéndolas de la mayor a la menor. Dentro de “for” creamos un “if” para identificar si el número de “for” es igual al número máximo de plantas seleccionadas. Si es así, almacenamos en la variable “s_in” el valor de laantena más el amplificador. De lo contrario, deberemos coger el valor de paso del derivador.

Seguidamente crearemos un “if” para cada derivador. De este modo, delimitaremos el derivador que se ha seleccionado para centrar el cálculo en los valores que le corresponden.


En este “if” referente al derivador, creamos una variable, llamada“mts_cable”. Le asignamos un valor inicial de 3. Esta variable se utilizará para calcular posteriormente los metros de cable. Creamos otra variable, “s_deriv”, donde almacenamos el valor de “s_in”, calculado anteriormente, menos el valor de pérdida de derivación, que en este caso es 20. Este valor dependerá del tipo de derivador. Del mismo modo creamos la variable “s_paso” que almacenará el cálculo del “s_in” menos la perdida de paso, que en este caso es de 0,5.

Tras definir cada uno de los derivadores, añadimos un “if” final para el control de errores. Con esto conseguimos que no se realice el cálculo si no hay un derivador por planta seleccionado. En el caso que falte alguno, mostrará una pop-up (ventana emergente) con el error que se muestra en la imagen.

El siguiente paso es crear un “else”, que será la sentencia que se debe realizar si la condición del primer “if” no es verdadera. Dentro del “else”, y a diferencia del “if” principal, creamos una variable “s_in”, que almacenará el valor de la salida de paso del derivador de la planta superior.

Creamos también una variable “deriv”, cuyo valor será el de la variable “deriv_final” en la posición de y correspondiente al número de planta en la que se encuentre el “for” menos 1, al tratarse de una array cuyas posiciones van de 0 a 9. Los resultados se almacenan en una variable


llamada “valor_toma” y será desde donde obtendremos los

datos para la tabla final.

Por último y antes de cerrar la función “cálculo”, creamos una tabla del mismo modo que realizamos la de los derivadores, para volcar los resultados ordenados por pisos y plantas.

La diferencia principal en esta tabla es que creamos un “input”, en el que el “value” será el referente a la posición “v” de la variable “valor_toma”. Como han sido almacenadas de manera ordenada, ahora, únicamente es preciso que leamos de menos a más y las añadamos a la tabla.

Para finalizar hemos añadido al final del documento dos alertas que se mostrarán si la potencia de la antena es inferior a 45dBµV, ya que este es el valor mínimo para

garantizar el posterior tratamiento de la señal.


4. RESULTADOS

4.1. Testeo de la aplicación

Para realizar el testeo de la aplicación hemos realizado el cálculo a nivel teórico, y posteriormente realizamos el mismo ejercicio sobre la aplicación. A continuación, presentamos los resultados obtenidos.

A NIVEL TEÓRICO:

Tenemos un bloque de viviendas que consta de 5 plantas. Hay 2 pisos por planta. La potencia recibida en la antena es de 90 dBµV y los derivadores por planta son los siguientes:

0.5 dB paso y 20 dB derivación 1.5 dB paso y 18 dB derivación 2.5 dB paso y 16 dB derivación 3.5 dB paso y 14 dB derivación La pérdida de señal por el cable es de 0.7dB por metro.

Para resolver el ejercicio realizamos el cálculo planta por planta. Seguimos los siguientes pasos:

5ªPlanta(potencia antena + potencia del amplificador)-(pérdida derivación)-(pérdida en el cable*metro). Con este cálculo obtenemos el valor de los pisos de dicha planta.

Seguidamente, calculamos el valor de señal que llegará al piso inmediatamente inferior a través de la salida de paso del derivador.

5ªPlanta (potencia antena + potencia del amplificador)-(pérdida de paso)-(pérdida en el cable*metro).

Este mismo procedimiento se realiza en todas las plantas.


A NIVEL PRÁCTICO:

Partiendo del mismo enunciado del apartado anterior indicamos en cada caso el valor preciso desde la aplicación. Para ello comenzamos indicando el número de plantas, pisos y potencia de antena.

Utilizaremos el apartado del amplificador en caso de que la señal final sea insuficiente en alguna de las tomas.

Por último seleccionamos los derivadores y el tipo de cable con una pérdida de 0.7 dB/m

Ahora únicamente se debe crear la tabla final y comprobar que los valores están dentro de los márgenes que marca la normativa sobre ICT. El resultado es el siguiente:


A NIVEL TEÓRICO: A NIVEL TEÓRICO

5º1ª -> (90)-(14)-(0.7*3)=73.9 dBµV

5ªPlanta

5º2ª -> (90)-(14)-(0.7*6)=71.8 dBµV

4º1ª -> (84.4)-(16)-(0.7*3)=66.3 dBµV

4ªPlanta

4º2ª -> (84.4)-(16)-(0.7*6)=64.2 dBµV

3º1ª -> (79.8)-(16)-(0.7*3)=61.7 dBµV

3ªPlanta

3º2ª -> (79.8)-(16)-(0.7*6)=59.6 dBµV

2º1ª -> (75.2)-(18)-(0.7*3)=55.1 dBµV

2ªPlanta

2º2ª -> (75.2)-(18)-(0.7*6)=53 dBµV

El cálculo a nivel teórico es muy largo de realizar y cualquier pequeña modificación implica que el este sea erróneo y que se deba repetir todo el proceso. Mientras que con la aplicación aumenta la agilidad y la facilidad para realizar una medición aproximada del nivel de señal en cada una de las tomas finales.

1ªPlanta

1º1ª -> (71.6)-(20)-(0.7*3)=49.5 dBµV

1º2ª -> (71.6)-(20)-(0.7*6)=47.4 dBµV


5. CONCLUSIONES

5.1. Valoración de los objetivos

Tras finalizar el proyecto hemos verificado que se ha conseguido abarcar los objetivos mínimos propuestos al inicio de la creación de la aplicación. Además, se han podido incluir los puntos de control de errores que, pese a no estar entre los objetivos iniciales de este proyecto, pueden ser útiles para controlar o avisar de posibles errores en la aplicación o el mal uso por parte del usuario final. No descartamos seguir desarrollando esta aplicación para optimizar su funcionalidad y conseguir más estabilidad en los cálculos y la recogida de valores.

5.2. Líneas de mejora

Es probable que las líneas de mejora sean amplias debido a que el conocimiento de programación adquirido antes de desarrollar esta aplicación no era para nada elevado.

Por mi parte unos de los puntos más sencillos a mejorar sería el poder especificar el nivel de atenuación de los derivadores a petición del usuario, así como la atenuación y los metros de cable. Con esta pequeña modificación, la aplicación podría adaptarse a todo tipo de infraestructuras con tantos valores como fueran precisos.

La mejora más complicada de realizar, pero no por ello imposible, sería interactuar con las bases de datos de los principales proveedores de componentes para las instalaciones ICT. De este modo los cálculos tomarían valores de componentes reales y los niveles de señal que se mostrasen en la tabla final serían completamente reales.


6. ANEXO

En este apartado se muestra el código de la aplicación al completo, separando los tres lenguajes principales que se utilizaran como son el HTML5, CSS3, JavaScript.

6.1. Código HTML5:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> //** Este apartado contiene las referencias a archivos, como el icono y de los lenguajes a utilizar CSS, Jquery yJavaScript. <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Calculo ICT</title> <link rel="shortcut icon" href="../imagenes/logo.ico" sizes="16x16" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="../css3/principal.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="../js/ICTS.js"></script> <scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head>


//** Inicio del programa: dentro de header se especifica el título que aparecerá en la página. <body> <header> <h1>APP para el cálculo de Infraestructura Común de Telecomunicaciones (ICT)</h1> </header> <section data-role="content"> <form id="formulario"> //** Sección plantas: se define el botón y la funcionalidad del slider. <h2 data-icon="plus" data-role="button" id="plantas" title="Indica el número de plantas de las que consta el edificio">Plantas</h2> <section id="submenu1"> <div id="entrada"> <input on type="range" id="plantas_num" value="0" min="0" max="10" data-highlight="true" /> </div> </section> //** Sección pisos: se define el botón y la funcionalidad del slider. <h2 data-icon="plus" data-role="button" id="pisos" title="Indica el número de pisos de los que consta el edificio">Pisos</h2> <section id="submenu2"> <div id="entrada"> <input type="range" id="pisos_num" value="0" min="0" max="10" data-highlight="true" /> </div> </section>


//** Sección plantas: se define el botón y la funcionalidad del slider. <h2 data-icon="plus" data-role="button" id="antena" title="Indica la potencia de recepción en la antena (dBµV)">Potencia en antena</h2> <section id="submenu3"> <div id="entrada"> <input type="range" id="antena_num" value="0" min="30" max="90" data-highlight="true" /> </div> </section> //** Sección amplificador: se define el botón y la funcionalidad del slider. <h2 data-icon="plus" data-role="button" id="ampli" title="Indica la potencia que aplicará el preamplificador (dBµV)">Preamplificador</h2> <section id="submenu4"> <div id="entrada"> <input type="range" id="ampli_num" value="0" min="0" max="20" data-highlight="true" /> </div> </section> //** Sección derivadores: se define el botón y el id para importar los derivadores desde JavaScript. <h2 data-icon="plus" data-role="button" id="derivadores" title="Indica el tipo de derivadores según sus salidas">Derivadores</h2> <section id="submenu5" > <div id="entrada_deriv"> <button type="button" onclick="tabla_deriv()" >Cargarplantas</button> </div> <table class="tablestyle" id="tabla_deriv" align="center"> <tbody id="llenar1"> </tbody> </table> </section>


//** Sección cable: se define el botón y la funcionalidad de cada uno de los tres tipos de cable. <h2 data-icon="plus" data-role="button" id="cable" title="Indica el tipo de cable para la la ICT">Tipo de Cable</h2> <section id="submenu6"> <div id="entrada_cable"> <input type="radio" name="cable" value="1.2" id="radio-choice-21" /> <labelfor="radio-choice-21" title="1.2 dB pérdida por metro" >NK 10 CB - 1,2 dB pérdida por metro</label> <input type="radio" name="cable" value="0.7" id="radio-choice-22" /> <labelfor="radio-choice-22" title="0.7 dB pérdida por metro" >NK 10 CC - 0,7 dB pérdida por metro</label> <input type="radio" name="cable" value="0.5" id="radio-choice-23" /> <labelfor="radio-choice-23" title="0.5 dB pérdida por metro" >NK 10 AL - 0,5 dB pérdida por metro</label> </div> </section> //** Sección derivadores: se define el botón y el id para importar los derivadores desde JavaScript. <h2 data-icon="plus" data-role="button" id="tomas" title="Esta tabla muestra el nivel de señal teórico que se debería obtener en las tomas de cada piso">Tomas finales</h2> <section id="submenu7"> <div id="entrada"> <div id="entrada_result"> <button type="button" onclick="calculo()" onclick="tabla_tomas()" >RealizarCalculos</button> </div> <table class="tablestyle" id="tabla_tomas" align="center"> <tbody id="llenar2"> </tbody> </table> </div> </section> </form> </section>


//** Sección del botón “Eliminar Datos”: se define el botón y su funcionalidad. <section> <div id="boton_borrar"> <button type="reset" id="boton_reset" form="formulario" >Eliminardatos</button> </div> </section> </body> //** Definición del texto que aparece en el footer. <footer> <p>APP diseñada por Jorge Barragán Granado, alumno de STUCOM-STI2M. </p> <p>Esta aplicación ha sido diseñada para realizar un cálculo teórico aproximado del nivel de señal en las tomas finales de cada piso. Se pretende proporcionar una plataforma para agilizar el cálculo basándose en los parámetros básicos de una Infraestructura Común de Telecomunicaciones (ICT). </p> </footer> </html>


6.2. Código CSS3:

//** Estilo del los submenús (botones), ocultados por defecto. #submenu1,#submenu2,#submenu3,#submenu4,#submenu5,#submenu6,#submenu7 { display:none; } //** Estilo del texto que aparece dentro de los botones. #plantas,#pisos,#derivadores,#antena,#cable,#ampli,#tomas{ margin-left:12%; margin-right:12%; text-align:left; width:auto; } //** Estilo de los botones al posicionar el puntero sobre ellos. #plantas:hover,#pisos:hover,#derivadores:hover,#antena:hover,#cable:hover,#ampli:hover,#tomas:hover{ color:#03F; border-bottom-color:#03F; } //** Estilo del sliderpara los botones de selección. #plantas_num,#pisos_num,#antena_num,#cable_num,#ampli_num{ text-align:inherit; width:auto; margin-left:10%; margin-right:5%; } //** Estilo de la tabla en la sección de derivadores. #entrada_deriv{ text-align:inherit; width:auto; margin-left:70%; margin-right:12%; }


//** Estilo del botón de sección final. #entrada_result{ text-align:inherit; width:auto; margin-left:70%; margin-right:2%; }

//** Definición de los márgenes que ocupan los sliders. #entrada{ margin-left:12%; margin-right:12%; } //** Márgenes de la tabla que aparece en la sección cable.

#entrada_cable{ margin-left:25%; margin-right:20%; } //** Estilo del botón “Eliminar Datos”. #boton_borrar{ width:auto; margin-left:65%; margin-right:13%; } //** Estilo del pie de página footer. p{ margin-left: 15%; margin-right: 15%; font-weight: normal; text-align: center; color: #000; font-family: "Courier New", Courier, monospace; font-size: 20px; text-shadow: 0px 2px 8px rgba(14, 9, 232, 0.7); }


//** Estilo del título. h1 { margin-left: 20%; margin-right: 20%; font-weight: normal; text-align: center; color: #000; font-family: "Courier New", Courier, monospace; font-size: 36px; text-shadow: 0px 2px 8px rgba(14, 9, 232, 0.7); } //** Estilo de los inputs de la tabla. input{ background-color:#CCC; text-align: center; font-style: italic; font-weight: normal; text-align: center; color:#000; font-family: "Courier New", Courier, monospace; font-size: 25px; text-shadow: 0px 2px 10px rgba(10, 9, 232, 0.8); } //** Estilo de la tabla de tomas finales. table.tablestyle{ font-family: "Courier New", Courier, monospace; font-weight: bold; border-collapse: separate; width: 100%;


6.3. Código JavaScript:

//** Control de los botones, para que solo uno se mantenga desplegado. function iniciar(){ plantas=document.getElementById('plantas'); plantas.addEventListener('click',pl,false); bt1=0; pisos=document.getElementById('pisos'); pisos.addEventListener('click',pi,false); bt2=0; derivadores=document.getElementById('antena'); derivadores.addEventListener('click',ant,false); bt3=0; tomas=document.getElementById('ampli'); tomas.addEventListener('click',amp,false); bt4=0; antena=document.getElementById('derivadores'); antena.addEventListener('click',der,false); bt5=0; cable=document.getElementById('cable'); cable.addEventListener('click',cab,false); bt6=0; tomas=document.getElementById('tomas'); tomas.addEventListener('click',tom,false); bt7=0; } function pl(){ if(bt1==0) { document.getElementById('submenu1').style.display='block'; document.getElementById('submenu2').style.display='none'; document.getElementById('submenu3').style.display='none'; document.getElementById('submenu4').style.display='none'; document.getElementById('submenu5').style.display='none'; document.getElementById('submenu6').style.display='none'; document.getElementById('submenu7').style.display='none'; ((bt1=1)&&(bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0));

} else { document.getElementById('submenu1').style.display='none'; bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0; }


} function pi(){ if(bt2==0) { document.getElementById('submenu1').style.display='none'; document.getElementById('submenu2').style.display='block'; document.getElementById('submenu3').style.display='none'; document.getElementById('submenu4').style.display='none'; document.getElementById('submenu5').style.display='none'; document.getElementById('submenu6').style.display='none'; document.getElementById('submenu7').style.display='none'; ((bt2=1)&&(bt1=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0)); } else { document.getElementById('submenu2').style.display='none'; bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0; } } function ant(){ if(bt3==0) { document.getElementById('submenu1').style.display='none'; document.getElementById('submenu2').style.display='none'; document.getElementById('submenu3').style.display='block'; document.getElementById('submenu4').style.display='none'; document.getElementById('submenu5').style.display='none'; document.getElementById('submenu6').style.display='none'; document.getElementById('submenu7').style.display='none'; ((bt3=1)&&(bt1=0,bt2=0,bt4=0,bt5=0,bt6=0,bt7=0)); } else { document.getElementById('submenu3').style.display='none'; bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0; } }


name='nderiv"+[y]+"' value='"+[z]+"' id='nderiv"+[y]+"'/> "+[(1+z-1)-0.5]+" dB paso y "+[22-((z-1)+(z+1))]+" dB derivación</th>"; } } } //** Función cálculo: esta es la que realiza todo el cálculo tras obtener los valores de las variables. function calculo(){ varderiv_final = new Array (); varvalor_toma = new Array (); var plantas=document.getElementById('plantas_num').value; varplantas_select=document.getElementById('plantas_num').value; var pisos=document.getElementById('pisos_num').value; var antena=document.getElementById('antena_num').value; varampli=document.getElementById('ampli_num').value; vars_in=parseInt(antena)+parseInt(ampli); var cable = $("input[name='cable']:checked").val(); vars_ant=sin[plantas]=parseInt(antena)+parseInt(ampli);


//**Para obtener el valor del radio seleccionado en los derivadores y almacenarlosen variables separadas. var deriv_pl_1 = $("input[name='nderiv1']:checked").val(); var deriv_pl_2 = $("input[name='nderiv2']:checked").val(); var deriv_pl_3 = $("input[name='nderiv3']:checked").val(); var deriv_pl_4 = $("input[name='nderiv4']:checked").val(); var deriv_pl_5 = $("input[name='nderiv5']:checked").val(); var deriv_pl_6 = $("input[name='nderiv6']:checked").val(); var deriv_pl_7 = $("input[name='nderiv7']:checked").val(); var deriv_pl_8 = $("input[name='nderiv8']:checked").val(); var deriv_pl_9 = $("input[name='nderiv9']:checked").val();

var deriv_pl_10= $("input[name='nderiv10']:checked").val(); //**Crear una array con todas las variables anteriores. deriv_final.push(deriv_pl_1,deriv_pl_2,deriv_pl_3,deriv_pl_4,deriv_pl_5,deriv_pl_6,deriv_pl_7,deriv_pl_8,deriv_pl_9,deriv_pl_10) //**Sección para el cálculo de la señal en toma. Se realiza un “for” desde la planta superior definida por el usuario hasta la planta final.En cada planta se calcula la señal según el derivador seleccionado, los metros y la pérdida en cable, obteniendo la señal final en la toma para cada piso. if ((plantas!=0)&&(pisos!=0)&&(antena>40)&&(cable!=0)) { for (y=plantas;y>0;y--) { if (y==plantas_select) { vars_in=parseInt(antena)+parseInt(ampli); varderiv=deriv_final[plantas_select-1]; if (deriv==1) { mts_cable=3;


vars_deriv=s_in-20; vars_paso=s_in-(mts_cable*cable)-0.5; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==2) { mts_cable=3; vars_deriv=s_in-18; vars_paso=s_in-(mts_cable*cable)-1.5; varmts_cable=3; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==3) { mts_cable=3; vars_deriv=s_in-16; vars_paso=s_in-(mts_cable*cable)-2.5; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==4) { mts_cable=3; vars_deriv=s_in-14; vars_paso=s_in-3.5; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable;


vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==null)//Control de errores { alert ('Existen derivadores por seleccionar!!. Seleccione todos los derivadores por planta y posteriormente realice el cálculo final'); } } else { vars_in=s_paso; varderiv=deriv_final[y-1]; if (deriv==1) { mts_cable=3; vars_deriv=s_in-20; vars_paso=s_in-0.5; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==2) { mts_cable=3; vars_deriv=s_in-18; vars_paso=s_in-1.5; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==3) { mts_cable=3;


vars_deriv=s_in-16; vars_paso=s_in-2.5; for(x=0;x<pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==4) { mts_cable=3; vars_deriv=s_in-14; vars_paso=s_in-3.5; for(x=1;x<=pisos;x++) { varperdida_cable=mts_cable*cable; vars_toma=s_deriv-perdida_cable; valor_toma.push(s_toma); mts_cable=mts_cable+3; } } if (deriv==null)//Control de errores { alert ('Existen derivadores por seleccionar!!. Seleccione todos los derivadores por planta y posteriormente realice el cálculo final'); } } } //**Este apartado genera la tabla para mostrar el nivel de señal en las tomas de cada piso. var plantas=document.getElementById('plantas_num').value; var pisos=document.getElementById('pisos_num').value; //**While: borra la tabla de cálculos anteriores. while (document.getElementById('llenar2').lastChild) { document.getElementById('llenar2').removeChild(document.getElementById('llenar2').lastChild); }


7. BIBLIOGRAFÍA Y WEBGRAFÍA

La mayor parte de la información y soportes para la creación de la aplicación es de páginas y foros de internet relacionados con la programación web.

El gran libro de HTML5, CSS3 y JavaScript.

http://www.w3schools.com/ [20/06/2013]

http://www.desarrolloweb.com/ [10/05/2013]

http://jquerymobile.com/ [7/04/2013]

http://www.codexexempla.org/ [7/05/2013]

http://www.programacionfacil.com/ [5/06/2013]

http://www.virtualnauta.com/html-formularios

[17/03/2013]

http://www.librosweb.es/JavaScript [2/04/2013]

http://www.w3schools.com/�

http://www.desarrolloweb.com/�

http://jquerymobile.com/�

http://www.codexexempla.org/�

http://www.programacionfacil.com/�

http://www.virtualnauta.com/html-formularios�

http://www.librosweb.es/javascript�

Aplicación web para el cálculo de ICT

Education

Transcript of Aplicación web para el cálculo de ICT