Proyecto: 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.
ACCESOALASCAPACIDADESDELDISPOSITIVO
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
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
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
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>
<div id="entrada">
<input type="range" id="pisos_num" value="0" min="0"
</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>
<div id="entrada">
<input type="range" id="antena_num" value="0" min="30"
</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>
<div id="entrada">
<input type="range" id="ampli_num" value="0" min="0"
</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>
<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>
choice-22" />
metro" >NK 10 CC - 0,7 dB pérdida por metro</label>
choice-23" />
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>
<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:hove
r,#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%;
text-align: center;
color: #000;
font-size: 36px;
}
//** Estilo de los inputs de la tabla.
input{
background-color:#CCC;
text-align: center;
font-style: italic;
text-align: center;
color:#000;
font-size: 25px;
}
//** Estilo de la tabla de tomas finales.
table.tablestyle{
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='non
e';
document.getElementById('submenu3').style.display='none';
((bt1=1)&&(bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0));
}
else {
bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0;
}

}
function pi(){
if(bt2==0) {
document.getElementById('submenu1').style.display='non
e';
((bt2=1)&&(bt1=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0));
}
else {
bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0;
}
}
function ant(){
if(bt3==0) {
((bt3=1)&&(bt1=0,bt2=0,bt4=0,bt5=0,bt6=0,bt7=0));
}
else {
bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0;
}
}

bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0;
}
}
function tom(){
if(bt7==0) {
((bt7=1)&&(bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0));
}
else {
bt1=0,bt2=0,bt3=0,bt4=0,bt5=0,bt6=0,bt7=0;
}
}
//** Sección tabla derivadores: este apartado crea la tabla
con los cuatro derivadores por planta.
functiontabla_deriv(){
var
plantas=document.getElementById('plantas_num').value;
var pisos=document.getElementById('pisos_num').value;
//borrar filas
while (document.getElementById('llenar1').lastChild)
{
document.getElementById('llenar1').removeChild(documen
t.getElementById('llenar1').lastChild);
}
for (y=plantas;y>0;y--)
{
document.getElementById('llenar1').innerHTML+="<th><br
>"+[y]+" ªPLANTA>> Salidas: 1 paso "+[pisos]+"
derivación</br></th>";
for (z=1;z<5;z++)
{
document.getElementById('llenar1').innerHTML+="<th>Der
ivador "+[1+z-1]+":<input type='radio'"+[z+1]+"'

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
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 =
var deriv_pl_3 =
var deriv_pl_4 =
var deriv_pl_5 =
var deriv_pl_6 =
var deriv_pl_7 =
var deriv_pl_8 =
var deriv_pl_9 =
var deriv_pl_10=
//**Crear una array con todas las variables anteriores.
deriv_final.push(deriv_pl_1,deriv_pl_2,deriv_pl_3,deri
v_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))
{
{
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;
varmts_cable=3;
{
}
}
if (deriv==3)
{
mts_cable=3;
vars_deriv=s_in-16;
{
}
}
if (deriv==4)
{
mts_cable=3;
vars_deriv=s_in-14;
vars_paso=s_in-3.5;
{

}
}
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;
{
}
}
if (deriv==2)
{
mts_cable=3;
vars_deriv=s_in-18;
vars_paso=s_in-1.5;
{
}
}
if (deriv==3)
{
mts_cable=3;

vars_deriv=s_in-16;
vars_paso=s_in-2.5;
for(x=0;x<pisos;x++)
{
}
}
if (deriv==4)
{
mts_cable=3;
vars_deriv=s_in-14;
vars_paso=s_in-3.5;
{
}
}
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;
//**While: borra la tabla de cálculos anteriores.
while (document.getElementById('llenar2').lastChild)
{
document.getElementById('llenar2').removeChild(documen
t.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]

Proyecto: Aplicación web para el cálculo de ICT

Recomendados

Recomendados

Más contenido relacionado

Similar a Proyecto: Aplicación web para el cálculo de ICT

Similar a Proyecto: Aplicación web para el cálculo de ICT (20)

Más de Francesc Perez

Más de Francesc Perez (20)

Último

Último (20)

Proyecto: Aplicación web para el cálculo de ICT