Page 47 - Ingeniantes 421 interactivo

Revista Ingeniantes 2017 Año 4 No.2 Vol.1
guientes con el fin de conseguir un modelo orientado a
objetos de la información a representar:
Campo.js: Esta clase se utiliza para crear un campo
que es la unidad mínima que contiene el dato JSON
que estamos recibiendo, en el constructor se recibe
nombre y contenido de dicho campo, estos datos se
muestran en la interfaz por medio de un contenedor de
tipo span.
Registro.js: Permite la agrupación múltiples objetos de
tipo Campo, tantos como sea necesario incluir dentro
de un mismo registro, para mostrarlos en la interfaz se
utiliza un contenedor de tipo div.
Tabla.js: Con esta clase se define una estructura que
puede agrupar uno o más objetos de tipo registro se-
gún se requiera, esta agrupación que se hace con la
ayuda del contenedor div permite representar la infor-
mación al usuario final como una tabla.
Un ejemplo de aplicación de este conjunto de clases lo
representa la forma en que se gestionó la descripción
de las materias y su conjunto, como se muestra en la
Figura 2.
Figura. 2. Representación OO de la información.
Controlador: El control de la vista se lleva a cabo me-
diante la instanciación de tres clases cuya finalidad es
la siguiente:
modulo_ev.js: Es la clase que se encarga de la gestión
de los eventos generados por el usuario.
modulo.js: Es una extensión de la clase yTube.js, que
lleva a cabo la actualización de la vista y mantiene las
callbacks resultantes de las solicitudes Ajax dirigidas al interfaz de ellos, obteniéndose una significativa reduc-
servidor.
yTube.js: Es el componente por el cual, mediante su
extensión, sirve de plantilla a la vista manejada por la
instancia de la clase modulo.js. Es también la responsa-
ble de: designar la estructura y áreas correspondientes
para insertar cada componente, definir la estructura de
43
los componentes principales (Menú lateral, Menú su-
perior y encabezado), definir el comportamiento y las
propiedades de cada componente principal, realizar el
insertado de cada componente principal al finalizar su
creación.
Interfaz de Comunicación:
El segmento de interfaz de comunicación está consti-
tuido por la clase denominada ajax.js que crea y envía
peticiones asíncronas de métodos AJAX derivados de
la librería JQuery consumiendo objetos tipo EcmaS-
cript6 que son convertidos a JSON para ser enviados
al servidor, este a su vez devuelve una respuesta en el
mismo formato que convierte en objetos EcmaScript6
para ser dirigidos al cliente.
RESULTADOS
El desarrollo de este proyecto es un punto de partida
para lograr la completa automatización de los diferentes
servicios que al sistema integral le competen, sumado
a lograr la unificación de los diferentes departamentos
solidificando un formato global para la consolidación de
datos del alumno/docente/jefe de carrera.
En el diseño de sus interfaces, el proyecto aplica nue-
vas tecnologías ya estandarizadas considerando las
distintas características de los dispositivos más utiliza-
dos, el uso de flexbox en gran medida fue la solución
para que la distribución de la página se adapte al tama-
ño de la pantalla del dispositivo. (Fig. 3).
Figura 3. Diseño adaptativo mostrado en diferentes dispositivos
de izquierda a derecha Celular con una pantalla de 5’’, Tablet
con Pantalla de 10’’, Equipo de Escritorio con una pantalla de
19’’, Laptop con una pantalla de 15’’.
Mediante la creación dinámica de componentes, se lo-
gra eliminar más del 90% de las líneas de código de la
ción en la taza de transferencia de este, agilizándose la
carga de los diferentes módulos.
La estructura del documento HTML sigue la recomen-
dación de la W3C, que consta de header, aside, nav y
section. Como se aprecia en la Figura 4.