6. Capitulo 4

4. TECNOLOGÍAS IMPLICADAS EN EL DISEÑO
El presente proyecto ha sido desarrollado en los lenguajes HTML, JavaScript y
SVG. Todo el código se escribió con el editor de JavaScript: “Antechinus JavaScript
Editor v7.0 Build 6” . Si bien el autor era conocedor en alguna medida del lenguaje
html, esto no fue así para los otros dos. Se tuvo que hacer un gran esfuerzo con algún
que otro manual en castellano y otros excelentes manuales que, como casi todo lo
bueno, estaban en inglés. Me gustaría destacar así la gran labor llevada a cabo, para que
de forma autodidacta y partiendo de cero, lograr el resultado obtenido. A continuación
describiremos brevemente cada una de las tecnologías empleadas.
4.1.
JavaScript
Muchos confunden el JavaScript con el Java pero ambos lenguajes son diferentes y
tienes sus características singulares.
COMO VENTAJAS PODEMOS DESTACAR:
•
No se necesitan conocimientos expertos de programación para poder programar
en JavaScript. (No sucede lo mismo con el SVG…)
•
Puede ser incorporado en cualquier página web, puede ser ejecutado sin la
necesidad de instalar otro programa para ser visualizado. No se necesita tener
instalado ningún Framework ni una máquina virtual como con Java.
•
Es un lenguaje interpretado, basado en prototipos, mientras que Java es un
lenguaje más orientado a objetos. No requiere de compilación. El código
JavaScript se ejecuta en el lado cliente, siendo los navegadores los encargados de
interpretar estos códigos, por lo que el servidor no es solicitado más de lo debido.
Autor: Jonathan Fco. Ginés Monteagudo
33
•
Es dinámico, responde a eventos en tiempo real. Eventos como presionar un
botón, pasar el puntero del mouse sobre una determinada zona, texto o el
simple hecho de cargar la página ... Con esto podemos hacer cálculos en base a
variables cuyo valor es determinado por el usuario.
9
•
Esto se ve claramente en los cálculos de los parámetros del amplificador
(K, Estabilidad,…), que son recalculados en tiempo real cada vez que
cambia cualquiera de sus parámetros [S]
Maneja objetos dentro de nuestra página Web y sobre ese objeto podemos
definir diferentes eventos.
Autor: Jonathan Fco. Ginés Monteagudo
34
COMO DESVENTAJAS PODEMOS DESTACAR:
•
Un problema es que el código es visible y puede ser leído por cualquiera.
•
Los scripts tienen capacidades limitadas, por razones de seguridad, por lo cual
no es posible hacer todo con JavaScript, sino que es necesario usarlo
conjuntamente con otros lenguajes evolucionados, posiblemente más seguros,
como Java. Dicha limitación es aún más evidente si queremos operar en el
hardware del ordenador, como, por ejemplo, la fijación automática de la
resolución vídeo o la impresión de un documento.
•
El código del script debe descargarse completamente antes de poderse
ejecutar. El tiempo en descargarse podría ser muy largo, dependiendo de si los
datos que utiliza son muchos. (Aunque esto no ocurre en el caso que nos ocupa, a
menos que implementásemos parámetros [S] tabulados. Ver Pág. 106)
Autor: Jonathan Fco. Ginés Monteagudo
35
ALGUNAS CARACTERÍSTICAS DEL LENGUAJE SON:
o Sintaxis similar a la usada en Java y C.
o Funciones propias del lenguaje y predefinidas por los usuarios
o Comentarios para una sola línea: // Comentarios
o Comentarios para varias líneas:
/*
Comentarios
*/
o Ciclos: for(i; i<10; i++){ … } /
o Arreglos: var miArreglo = new Array(“12”, “77”, “5”)
o Condiciones: if(i<10){ … }
o Variables: var = “Hola”, n=103
o Una misma variable puede ser definida o utilizada indistintamente como:
string, integer, float o bolean, simplemente utilizando “var”. Podemos usar
“+” para concatenar cadenas y variables.
9 Esto último es tan potente como peligroso, pues a veces lleva horas
encontrar el fallo o el error!! Principalmente porque no arroja
warnings de conversión, pues no obliga a hacer ”cast” como si exigen
otros lenguajes…
Autor: Jonathan Fco. Ginés Monteagudo
36
4.1.1.
Clases Creadas para la Programación
A continuación describimos cada una de las clases creadas para la
programación de la herramienta. Copiamos el código tal cual, pues los
comentarios son lo suficiente explicativos por si mismos.
CLASE Complex()
En este caso, mostramos solamente los procedimientos (o prototipos) de la
clase que fueron creados por necesidad desde cero por el presente autor.
function Complex(real, imaginary) {
this.x = real;
this.y = imaginary;
// The real part of the number
// The imaginary part of the number
}
//
Devuelve el módulo al cuadrado de un numero complejo. Se ha implementado porque // el cálculo
del módulo al cuadrado haciendo Complex.magnitude()*Complex.magnitude() // producía pérdida de
precisión,cosa lógica pues deshacemos el efecto del sqrt que es // el que introduce, por 2 veces, la
pérdida de precisión...
Complex.prototype.magnitude2 = function() {
return (this.x*this.x + this.y*this.y);
};
//
Devuelve el argumento del un numero complejo en Radianes. Definido como el
// angulo
formado con el origen. Se tiene en cuenta si pertenece al 2º o 3º cuadrantes // (parte real negativa)
en cuyo caso,atan no funciona bien, usandose atan2 en su lugar. // Comprobamos que podría usar
directamente atan2, que lo hace perfecto.
Complex.prototype.argument = function() {
if (this.x<0)
return Math.atan2 (this.y,this.x);
else return Math.atan (this.y/this.x);
};
// Devuelve el conjugado del un numero complejo. Definido como el complejo con ángulo
dado.
Complex.prototype.conjugate = function() {
return new Complex (this.x,-this.y);
};
// negativo del
// Devuelve la division de un numero complejo entre otro. Para ello multiplicamos por el // conjugado
del denominador arriba y abajo, pero haciendo uso de una funcion que fue
// creada por necesidad de
la presente, magnitude2(), que devuelve el módulo al
// cuadrado. Se podría estudiar la
implementacion en base a discriminar (con typeof,
// valueOf,etc) si that es un real e igualmente
hacer bien la division.
Complex.prototype.divide = function(that) {
temp = new Complex (1/that.magnitude2(),0);
return this.multiply(that.conjugate()).multiply(temp);
};
Autor: Jonathan Fco. Ginés Monteagudo
37
CLASE Complex1()
Recordemos que el porqué de esta clase, se comentó en el capitulo 2 (Pág. 23)
function Complex1(module, phase) {
this.m
this.p
this.x
this.y
=
=
=
=
module;
phase;
this.m*Math.cos(this.p);
this.m*Math.sin(this.p);
}
Complex1.prototype = new Complex(0,0);
// Multiply this complex number by another and return the product as a
// new Complex object.
Complex1.prototype.multiply = function(that) {
return new Complex1(this.m * that.m , this.p + that.p);
}
Autor: Jonathan Fco. Ginés Monteagudo
38
CLASE Circle ()
////////////////////////////////////////////////////////////////////////////////////////
//
Defino el objeto circulo, con sus tres propiedades en el plano complejo, radio,
//
módulo del
centro y fase del centro en radianes. Ademas existe la variable booleana // plane, que es True en caso
de pertenecer al plano Ro_g y False en caso de ser de Ro_l
function Circle(radius, magnitude, argument, plane){
this.r=radius;
this.m=magnitude;
this.a=argument;
this.p=plane;
}
Autor: Jonathan Fco. Ginés Monteagudo
39
CLASE StabilAmp ()
////////////////////////////////////////////////////////////////////////////////////////
//
Defino el objeto StabilAmp, propio de cada amplificador , que tendrá entre sus
// variables
miembro, los parámetros K, Delta, una cadena de texto indicando el tipo de estabilidad, condicional o
incondicional y el valor de la MSG.
-function StabilAmp(K, DELTA,STABILITY,MSG){
this.k=K;
this.delta=DELTA;
this.stability=STABILITY;
this.msg=MSG;
}
Autor: Jonathan Fco. Ginés Monteagudo
40
4.2.
SVG
Es importante reseñar, que para poder hacer uso de esta tecnología, es necesario
instalar el plugin correspondiente de Microsoft, para que el navegador pueda mostrar
los gráficos que esta herramienta dibuja sobre la carta. La compatibilidad es máxima
con Internet Explorer 7. No ocurre así para versiones posteriores u otros navegadores
como Firefox o GoogleChrome.
SVG es una tecnología para describir gráficos de dos dimensiones, en XML. Sus
siglas se traducen como Scalable Vector Graphics, algo así como Gráficos
Vectoriales Escalables. Es una gramática XML para el desarrollo de gráficos
vectoriales. Scalable significa que incrementa o disminuye uniformemente. Los
gráficos SVG pueden ser desplegados en forma independiente de la resolución de
pantalla, también pueden ser magnificados para la observación de detalles, lo
cual es muy interesante cuando se representan, como es el caso, puntos o medidas en
un plano o ábaco.
Los vectores gráficos contienen objetos geométricos, tales como, líneas y curvas,
estos dan gran flexibilidad, comparados con formatos como PNG o JPEG, donde la
información esta almacenada para cada píxel del gráfico. Es decir, a la hora de
generar la carta de Smith, no se ha importado o cargado ninguna “foto” de la
misma, si no que se han dibujado partiendo de sus ecuaciones para círculos de
r=cte y de x=cte, (resistencia y reactancia normalizadas), donde como sabemos:
ZL/Z0= r +j x
4.2.1.
VENTAJAS DE LA UTILIZACIÓN DE SVG:
SVG permite la utilización de tres tipos de objetos gráficos:
Autor: Jonathan Fco. Ginés Monteagudo
41
•
Objetos gráficos vectoriales (líneas, elipses, rectángulos, etc.). Estos pueden ser
agrupados, formateados, transformados y compuestos para su visualización.
•
Imágenes.
•
Texto.
SVG soporta características avanzadas como:
•
Transformaciones anidadas (matrices de transformación).
•
Clipping Paths, Alpha Masks, Filtros gráficos…
•
Interactividad y dinamismo, soportados tanto de forma declarativa como vía
scripting, pues existe la posibilidad de asignar eventos a los distintos elementos.
9
He aquí una de las ventajas que se han explotado en este proyecto, a la
hora por ejemplo de capturar los eventos que se producen en el principal
gráfico SVG (que no es otro que la Carta de Smith), eventos tales como
‘onmouseover’ u ‘onclick’.
Gracias a la estandarización de los elementos en SVG y su integración con XHTML,
podemos tener conviviendo scripts XHTML y SVG dentro del mismo documento. El
tipo MIME que utiliza SVG es "image/svg+xml" [RFC3023].
Autor: Jonathan Fco. Ginés Monteagudo
42
Otras ventajas de utilizar SVG son:
•
Renderizado con antialiasing.
•
Patrones de relleno y gradientes.
•
Filtros y efectos avanzados.
•
Clipping.
•
Animaciones. (SLIM)
•
No pierde calidad si se hace zoom o si se redimensiona.
•
Puede escalarse.
•
Ideal para ser impreso.
•
Pueden mostrarse de forma progresiva (igual que los GIF), no teniendo que
esperar a que todo el documento sea descargado.
•
Pueden distribuirse en formato comprimido GZIP para la reducción del tiempo de
descarga .SVGZ.
•
Pueden ser indexados y buscados debido a que su contenido es XML y es
textual.
•
Pueden ser transformados por hojas de estilos (XSL o CSS).
•
Integración con otras tecnologías XML del W3 y compatible con:
•
XML 1.0 y XML Namespaces
•
XLink y XML Base para la referencia a URIs
•
Xpointer
•
CSS
•
XSL
•
DOM nivel 1 y 2 incluyendo DOM-Style y DOM-Event
•
SMIL 1.0. Sólo algunas de sus funcionalidades
•
HTML 4 y XHTML 1.0
•
UNICODE
•
Accesibilidad a contenidos web (WAI)
Autor: Jonathan Fco. Ginés Monteagudo
43
4.3.
OMNIPRESENTE HTML
Resulta inevitable comentar algo acerca del poco código HTML que contiene la
herramienta… No vamos a adentrarnos en las características del lenguaje, como si
hemos hecho con Javascript, pero si vamos a enumerar los distintos tipos de
elementos que se han usado para la creación de la misma…
FRAMES / FRAMESETS O MARCOS
La ventana del navegador puede ser dividida en varios frames que contengan cada
uno de ellos un documento en el que mostrar contenidos diferentes. Al igual que con las
ventanas, cada uno de estos frames puede ser nombrado y referenciado, lo que nos
permite cargar documentos en un marco sin que esto afecte al resto.
Siendo fiel a este esquema es como se ha desarrollado la aplicación, asignando dentro
del fichero de cada marco, las funciones que controlan todo lo que ese marco alberga y
ocurre en él. En el código de CartaSmith.htm se puede ver como se anidan y definen
estos 5 marcos con el tag <frameset>. Aquí podemos ver los 5 marcos en rojo:
Autor: Jonathan Fco. Ginés Monteagudo
44
FORMULARIOS
Su nombre lo indica todo, y en este proyecto se usa principalmente en la recogida de
datos (módulos y fases de los parámetros S y demás variables del amplificador).
Su declaración queda recogida por las tags <form>.....</form> y dentro de ellas se
recogerán todos los parámetros.
Tenemos 3 principales formularios en el marco izquierdo, en donde anidamos distintos
selects o inputs con el objeto de poderlos referenciarlos desde distintos puntos del
código…
PARAMETERS Æ Para los parámetros S y demás variables de ruido…
FUNCTIONS Æ Para los 9 distintos tipos de circunferencias.
VALUES Æ Para introducir el valor de los db’s para el cálculo de las circunferencias.
Autor: Jonathan Fco. Ginés Monteagudo
45
SELECTS
Las tags <select>.....</select> encierran los valores que podremos elegir a partir de
una lista. Las diferentes opciones de la lista se indican mediante la tag <option> que
puede acompañarse del atributo selected para indicar cual es la opción que aparecerá
por defecto (en nuestro caso no la hemos especificado).
Se han usado selects en este proyecto para:
•
MODELOS DE TRANSISTOR y
FRECUENCIA DE OPERACIÓN
•
LOS 9 DISTINTOS TIPOS DE
CIRCULOS QUE LA
HERRAMIENTA CALCULA
Como ejemplo podemos ver el código correspondiente a este último:
<FORM name="functions">
<select name="Circles" size="9" id="Circles">
<option name="election" value="CEG">(CEG) Stability Gen.</option>
<option name="election" value="CEC">(CEC) Stability Load</option>
<option name="election" value="CGG">(Gg) Constant Gain Gen.</option>
<option name="election" value="CGL">(Gl) Constant Gain Load</option>
<option name="election" value="Ga"> (Ga) Available Power Gain</option>
<option name="election" value="Gp"> (Gp) Power Gain</option>
<option name="election" value="F"> (F) Constant Noise Factor</option>
<option name="election" value="DesIn"> Constant Desadap IN (VSWRi %)</option>
<option name="election" value="DesOut"> Constant Desadap OUT (VSWRo %)</option>
</select>
</FORM>
Autor: Jonathan Fco. Ginés Monteagudo
46
INPUTS
La tag <input> define la introducción de variables. Hemos usado sus siguientes
tipos:
•
Tipo ‘radio’ para selectores tipo punto o circulo, donde elegimos unidades
naturales o en decibelios (por defecto)
•
Tipo ‘text’ para casilleros donde introducir valores
numéricos
•
Tipo ‘button’ , objetos propios de Javascript que sirven para realizar la acción
que se les asigne (en este caso se asocian a las funciones correspondientes)
•
El último tipo usado es el llamado ‘checkbox’ donde el campo que se quiere
activar, se elige marcando de entre varias opciones una casilla cuadrada.
Autor: Jonathan Fco. Ginés Monteagudo
47
4.4.
COMUNICACIÓN SVG ÅÆ JAVASCRIPT
Uno de los aspectos más cruciales y dificultosos a la hora de implementar la
herramienta fue la comunicación entre el código JavaScript, presente en toda la
página web, y el marco central de la Carta de Smith desarrollada completamente en
SVG.
Mostrando directamente las líneas del código correspondiente, podemos observar
las acciones que implicaban la comunicación entre ambas tecnologías:
// Asocio mis llamadas a funciones del svg hechas desde el html (marco izq en este caso), a mis
funciones en el SVG. Comunicacion html -><- svg
top.drawChart=svgdrawChart;
top.drawCircle=ordersvgdrawCircle;
top.RemoveElement=svgRemoveElement;
top.CutPoints=svgcutPoints;
top.TransfCircle=svgtransfCircle;
Los nombres a la izquierda del igual se corresponden con los nombres de las
funciones llamadas desde el código JavaScript del marco izq.htm y los de la derecha
con sus correspondientes funciones en el fichero smithchart.svg… de forma similar,
la otra comunicación se corresponde con:
// Comunicacion SVG->HTML ///////////////////////
top.htmlround=round;
top.htmlupdateComplexValues=updateComplexValues;
top.htmlupdatePoints=updatePoints;
top.htmlCutPoints=CutPoints;
top.htmlTransfCircle=TransfCircle;
// Comunicacion SVG->HTML ///////////////////////
Es decir, tanto para hacer llamadas a funciones de SVG desde el código HTML,
como al revés, para hacer llamadas a funciones de HTML desde el código SVG,
estas funciones tenían que declararse como:
top.nombreFunción= nombreFunción asociada
Autor: Jonathan Fco. Ginés Monteagudo
48
Por otra parte, el papel de cada una de las funciones, queda explicada por sus propios
nombres.
Un ejemplo de comunicación, de los 5 expuestos más arriba, podría ser el de la
transformación de círculos entre planos. Lo describimos a continuación:
izq.htm
top.htmlTransfCircle=TransfCircle
smithchart.svg
top.TransfCircle=svgtransfCircle
Se hace Click en Trans. Circ.
top.TransfCircle(parám.1)
Function TransfCircle(parám.2)
{
.
.
}
Function svgtransfCircle(parám.1)
{
transfCircles=1
.
.
}
.
.
Function catchCircle(event)
{
if (transfCircles=1)
.
.
top.htmlTransfCircle(parám.2)
}
1º) Al pulsar el botón de Transf. Circ., se llama desde el marco izq.htm a la
función top.TransfCircle(…) del fichero smithchart.svg
2º) El smithchart.svg identifica la llamada con su top.TransfCircle y la
redirecciona a la función adecuada, svgtransfCircle()
Autor: Jonathan Fco. Ginés Monteagudo
49
3º) Una vez capturado el círculo, se pasan los datos de su centro y radio
(parám.2) a la función del html top.htmlTransfCircle()
4º) El izq.htm identifica la llamada con su top.htmlTransfCircle=TransfCircle
Y la redirecciona a la función adecuada TransfCircle ()
5º) TransfCircle () realiza los cálculos complejos necesarios y después llamará
(nuevamente aparece otra vez la comunicación) a la función svg encargada
de dibujar el circulo transformado.
Autor: Jonathan Fco. Ginés Monteagudo
50