Para la implementación de la página web “Web MVZ” se utilizaron las siguientes

herramientas de desarrollo:
 Se utilizo el editor de texto Visual Studio Code. Ilustración 2.

Ilustración 1 Visual Studio Code

 Se utilizo Vue, Vue (pronunciado /vjuː/, como view) es un framework progresivo

para construir interfaces de usuario. A diferencia de otros frameworks monolíticos,
Vue está diseñado desde cero para ser utilizado incrementalmente. La librería
central está enfocada solo en la capa de visualización, y es fácil de utilizar e integrar
con otras librerías o proyectos existentes. Por otro lado, Vue también es
perfectamente capaz de impulsar sofisticadas Single-Page Applications cuando se
utiliza en combinación con herramientas modernas y librerías de apoyo.
Ilustración 2.

Ilustración 2. Vue.js
 JavaScript es un lenguaje de programación o de secuencias de comandos que te
permite implementar funciones complejas en páginas web, cada vez que una página
web hace algo más que sentarse allí y mostrar información estática para que la veas,
muestra oportunas actualizaciones de contenido, mapas interactivos, animación de
Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes
apostar que probablemente JavaScript está involucrado. Ilustración 3.

Ilustración 3. JavaScript
 HTM es un lenguaje de marcado que define la estructura de tu contenido. HTML
consiste en una serie de elementos que usarás para encerrar diferentes partes del
contenido para que se vean o comporten de una determinada manera. Las etiquetas
de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio,
se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Ilustración 4.

Ilustración 4. HTMl

 Adicionalmente se implementaron las siguientes herramientas:

1. Bootstrap-vue, Como sabemos Bootstrap nos permite hacer aplicaciones web

responsive y Vue es un framework front-end javascript que nos hace la vida
muy fácil. Por ende con BootstrapVue podemos utilizar Vue con Bootstrap con
los css de Bootstrap y darle un bonito diseño a nuestra aplicacione.
Ilustración 5.

Ilustración 5. Bootstrap-vue
2. Chart.js es una biblioteca JavaScript gratuita de código abierto para la
visualización de datos, que admite 8 tipos de gráficos: barra, línea, área, circular,
burbuja, radar, polar, dispersión.
Creado por el desarrollador web con sede en Londres Nick Downie en 2013, ahora
es mantenido por la comunidad y es la segunda biblioteca de gráficos JS más
popular en GitHub por la cantidad de estrellas después de D3.js, considerada
significativamente más fácil de usar aunque menos personalizable que esta. Chart.js
se representa en HTML5 Canvas y está ampliamente considerado como una de las
mejores bibliotecas de visualización de datos. La cual la utilizamos para dibujar
nuestras graficas de estadísticas. Ilustración 6.

Ilustración 6. chart js

3. Firebase, Firebase es una plataforma para el desarrollo de aplicaciones web y

aplicaciones móviles lanzada en 2011 y adquirida por Google en 2014.1
Es una plataforma ubicada en la nube, integrada con Google Cloud Platform, que
usa un conjunto de herramientas para la creación y sincronización de proyectos que
serán dotados de alta calidad, haciendo posible el crecimiento del número de
usuarios y dando resultado también a la obtención de una mayor monetización.

De todos los servicios que ofrece Firebase, emos utilizado los de base de datos en
tiempo real conocido como Realtime Database, asi mismo el Storage nos permite
alojar todos los archivos de evidencias y firmas recolectadas durante la práctica de
campo, y por ultimo y quizás el mas importante esta el servicio de alojamiento del
sitio web el “Hosting”. Ver Ilustración 7.

Ilustración 7. Servicios de Firebase

De forma general se presenta un cuadro representativo del porcentaje algunas herramientas

Ilustración 8. Herramientas o idiomas

más usadas en nuestra implementación Ilustración 9