Resumen

Los sitios web se han consolidado a través de los últimos años como una opción
viable para dar a conocer información de un tema en específico. Hoy en día se ha
convertido en una actividad muy común navegar por Internet, todos los sitios web
están formados por contenido en distintos formatos: texto, fotos, videos, etc. Estos
elementos se organizan cuidadosamente dentro de un diseño que debe ser
atractivo y fácil de utilizar para el usuario.

Por ende, en este reporte de residencias denominado “Diseño de una interfaz web
con almacenamiento de información, para registro de los datos de una estación
meteorológica semiautomática portátil” se establece como objetivo proveer una
plataforma para dar a conocer a la comunidad los datos recabados por la estación
meteorológica, se pensó en la realización de un sitio web, el cual pueda recabar
información a través de sensores y registrarlos en una base de datos para
posteriormente presentarlos en una interfaz web, la cual tendrá que adaptarse a
los diferentes dispositivos que actualmente existen tales como: las computadoras,
las tabletas y los celulares. También, se tomó en cuenta la implementación de los
colores que caracterizan al Instituto Tecnológico de Cuautla, de igual manera
incluir elementos que se posicionaran de manera intuitiva para la navegación en
él. Este reporte abarca seis capítulos divididos de la siguiente manera.

Capítulo 1: Explica acerca de la descripción la empresa donde se realizó el

proyecto, desde la visión y misión hasta un poco de historia de cómo fue que
surgió el campus.

Capítulo 2: Contiene las tecnologías y herramientas utilizadas para la realización

del proyecto del sistema web para la estación meteorológica.

Capítulo 3: Comprende las actividades realizadas, desde la creación de la base de

datos NoSQL hasta las pruebas que se hicieron de la visualización del sistema
web.
Capítulos 4: Describe los resultados obtenidos en las pruebas pertinentes que se
realización al sistema web.

Capítulo 5 y 6: Contiene las conclusiones obtenidas en la elaboración del sistema

web y las competencias desarrolladas obtenidas en las residencias profesionales
realizadas.
Contenido
Lista de Figuras ......................................................................................................... 1

Capítulo 1. Generalidades del proyecto .................................................................... 6

1.1 Introducción.................................................................................................. 7

1.2 Descripción de la empresa u organización .................................................. 8

1.2.1 Nombre de la empresa .......................................................................... 8

1.2.2 Descripción de la empresa .................................................................... 8

1.2.3 Organigrama de la empresa ................................................................. 9

1.2.4 Historia de la empresa .......................................................................... 9

1.2.5 Ubicación de la empresa ..................................................................... 10

1.3 Problemas a resolver ................................................................................. 11

1.4 Objetivos .................................................................................................... 12

1.4.1 General ................................................................................................ 12

1.4.2 Específicos .......................................................................................... 12

1.5 Justificación................................................................................................ 13

1.6 Alcance y limitaciones ................................................................................ 14

Capítulo 2. Marco Teórico ...................................................................................... 15

2.1 Tecnologías ....................................................................................................... 16

Capítulo 3. Desarrollo.............................................................................................. 28

3.1 Act. 1. Creación de una base de datos en la nube e instalación de librerías.

29

3.2 Act. 2. Conexión del módulo ESP32 a la base de datos en la nube ............ 32

3.3 Act. 3. Diseño y estructuración de la interfaz Web ....................................... 34

3.4 Act. 4. Agregar estilos y hacer responsive la interfaz para diferentes

dispositivos .......................................................................................................... 47

3.5 Act. 5. Extracción de información de la Base de datos a la interfaz ............. 84

 3.6 Act. 6. Creación de funciones para mostrar los datos en tiempo real .......... 85

Capítulo 4. Resultados ............................................................................................ 89

Capítulo 5 Conclusiones ......................................................................................... 95

5.1 Conclusiones del proyecto. ........................................................................... 96

5.2 Recomendaciones. ........................................................................................ 97

5.3 Experiencia personal profesional adquirida. ................................................. 98

Capítulo 6 Competencias Desarrolladas ................................................................ 99

6.1 Competencias Desarrolladas. ......................................................................... 100

Fuentes de información ......................................................................................... 101

Anexos................................................................................................................... 105
Lista de Figuras
Figura 1. Organigrama de la empresa ................................................................. 9
Figura 2. Mapa de localización del ITC .............................................................. 10
Figura 3. Logo Firebase ..................................................................................... 16
Figura 4. Logo HTML .......................................................................................... 17
Figura 5. Logo CSS ............................................................................................ 18
Figura 6. Logo JavaScript ................................................................................... 20
Figura 7. Logo VSC ............................................................................................ 21
Figura 8. Logo GitHub ........................................................................................ 23
Figura 9. Logo Lucidchart ................................................................................... 25
Figura 10. Logo Netlify.......................................................................................... 26
Figura 11. Creación del proyecto en Firebase ..................................................... 29
Figura 12. Creación de la aplicación web ............................................................ 29
Figura 13. Creación de la base de datos Realtime .............................................. 30
Figura 14. Selección de ubicación de almacenamiento ....................................... 30
Figura 15. Selección de reglas de seguridad ....................................................... 30
Figura 16. Árbol con sus nodos dentro ................................................................ 31
Figura 17. Información en los nodos altitud y cantidad de lluvia ......................... 31
Figura 18. Información en los nodos: grados y humedad .................................... 31
Figura 19. Librería utilizada en la conexión de la base de datos ......................... 32
Figura 20. Definición de valores constantes a variables ...................................... 32
Figura 21. Llamado a la base de datos para acceder a los nodos ...................... 33
Figura 22. Estrucura HTML .................................................................................. 34
Figura 23. Página principal en monitor ................................................................. 34
Figura 24. Página de datos en monitor ................................................................ 35
Figura 25. Página principal y página de los datos en tableta .............................. 35
Figura 26. Página principal y página de datos en celular .................................... 36
Figura 27. Etiqueta head ...................................................................................... 37
Figura 28. Etiqueta body y header ....................................................................... 37
Figura 29. Etiquetas contenedoras de logo TecNm y titulo del proyecto ............ 37
Figura 30. Navegación en la página web ............................................................. 38
1
Figura 31. Contenedor del ojetivo ........................................................................ 38
Figura 32. Mapa de la ubicación de la institución ................................................ 39
Figura 33. Tarjetas para la muestra de datos ...................................................... 40
Figura 34. Tarjetas de los datos faltantes ............................................................ 41
Figura 35. Datos escolares en el pie de página ................................................... 41
Figura 36. Redes sociales de la institución .......................................................... 42
Figura 37. Derechos reservados de la escuela. ................................................... 43
Figura 38. Etiquetas para el reloj.......................................................................... 43
Figura 39. Contenedor de las primeras cuatro tarjetas ........................................ 44
Figura 40. Contenedor de las segundas cuatro tarjetas ...................................... 45
Figura 41. Contenedor de las ultimas tres tarjetas .............................................. 46
Figura 42. Estilos generales de etiquetas especificas ......................................... 47
Figura 43. Estilos al header y a clases ................................................................. 48
Figura 44. Estilos al h1 y a los logos .................................................................... 49
Figura 45. Estilos de los logos e icono del menu ................................................. 50
Figura 46. Estilos del contedor, section y del objetivo ......................................... 51
Figura 47. Estilos de la ubicación ......................................................................... 52
Figura 48. Estilos del aside .................................................................................. 52
Figura 49. Estilos de las tarjetas y efecto hover................................................... 53
Figura 50. Estilos a imágenes y contenido del las tarjetas .................................. 53
Figura 51. Estilos de la etiqueta h3 y p del contenido .......................................... 54
Figura 52. Etilos de la etiqueta a y efecto hover .................................................. 54
Figura 53. Estilos del footer y la clase datEsc...................................................... 55
Figura 54. Estilos a la clase redes y a las imágenes ........................................... 55
Figura 55. Estilos al ultimo div y a elementos de la lista ...................................... 56
Figura 56. Media querie para tableta y estilos del nav......................................... 56
Figura 57. Estilos para clases y el icono del menú .............................................. 57
Figura 58. Nuevos estilos para logoTec y sus elementos.................................... 57
Figura 59. Estilos, pseudoclase y transicion ........................................................ 58
Figura 60. Nuevos estilos al contenedor y seccion .............................................. 58
Figura 61. Estilos a etiquetas dentro de la clase objetivo .................................... 59

2
Figura 62. Estilos a etiquetas dentro de la clase ubicación ................................. 59
Figura 63. Nuevos estilos para la clase datosAside y la clase container ............ 60
Figura 64. Estilos nuevos a la clase card ............................................................. 60
Figura 65. Estilos a las clases card, conteiner y a etiquetas ............................... 61
Figura 66. Estilos y efecto hover .......................................................................... 61
Figura 67. Estilos del pie de página para tableta ................................................. 62
Figura 68. Estilos a la etiqueta header para celular ............................................. 62
Figura 69. Estilos a las clases logo-header y logoTec ......................................... 63
Figura 70. Estilos a la clase logoTec y a las etiquetas que contiene ................... 63
Figura 71. Estilos a la clase cjecnt y menu-icon .................................................. 64
Figura 72. Estilos a la clase contenedor y seccion para movil ............................ 64
Figura 73. Estilos a la clase objetivo y a la etiqueta h2 ....................................... 65
Figura 74. Estilos a la clase ubicación y etiquetas contenidas ............................ 65
Figura 75. Estilos a la clase datosAside y a la etiqueta h2 .................................. 66
Figura 76. Estilos a la clase container y a la clase card ...................................... 66
Figura 77. Efecto hover y estilos a etiquetas de las calses card y contenido ...... 67
Figura 78. Estilos y efecto hover a la etiqueta <a> .............................................. 67
Figura 79. Estilos a la etiqueta footer y la clase footer ........................................ 68
Figura 80. Estilos a la clase datEsc, dat y estilos a la lista .................................. 68
Figura 81. Importación de estilos de fuente y estilos generales .......................... 69
Figura 82. Estilos a la clase del reloj y sus etiquetas ........................................... 69
Figura 83. Estios al header y a clases ................................................................. 70
Figura 84. Estilos y efecto hover .......................................................................... 70
Figura 85. Estilos a la lista desordenada y efecto hover...................................... 71
Figura 86. Estilos a la clase y al id ....................................................................... 71
Figura 87. Estilos a clase conainer y a la clase card ........................................... 72
Figura 88. Efeto hover y estilos a la imagen de la case card .............................. 72
Figura 89. Estilos a la clase card-title y card-text ................................................. 73
Figura 90. Estilos a los últimos dos contenedores de tarjetas ............................. 73
Figura 91. Estilos al footer y a la clase datEsc de los datos meteorológicos ...... 74
Figura 92. Estilos a la clase redes y etiqueta img. ............................................... 74

3
Figura 93. Estilos a la clase dat y a elemenos de la lista..................................... 75
Figura 94. Media query y estilos en la header y en otras clases ......................... 75
Figura 95. EStilso a las clases tecB, tecC, chechbtn y menu-icon ...................... 76
Figura 96. Estilos a las etiquetas de la clase logoTec ......................................... 76
Figura 97. Estilos a la clase logoTec y pseudo-clases ........................................ 77
Figura 98. Estilos a la clase container-clock y a sus elementos .......................... 77
Figura 99. Estilos a la clase container y clase card ............................................. 78
Figura 100. Estilo a la imagen y efecto hover a la clase card ............................ 78
Figura 101. Estilos a varias clases y a la etiqueta footer .................................... 79
Figura 102. Media quey y estilos a la etiqueta y clase footer ............................. 79
Figura 103. Estilos a los elementos de la clase logo-header ............................. 80
Figura 104. Estilos a la clase checkbtn y la clase menu-icon............................. 80
Figura 105. Estilos a las etiquetas dentro de la clase logoTec........................... 81
Figura 106. Estilos y pseudo-clases en la clase logoTec ................................... 81
Figura 107. Estilos a la clase container-clock y a sus elementos....................... 82
Figura 108. Estilos a la clase container y a la clase card ................................... 82
Figura 109. Estilos a los elementos de la clase card .......................................... 83
Figura 110. Efecto hover y estilos a diferentes clases ....................................... 83
Figura 111. Estilos a la etiqueta footer y a diferentes clases ............................. 84
Figura 112. Conexión a la base de datos ........................................................... 84
Figura 113. Inicialización de la base de datos. ................................................... 85
Figura 114. Objeto para acceder a los id en el HTML ........................................ 85
Figura 115. Ciclo for para obtención de las propiedades ................................... 85
Figura 116. Función para evaluación de datos registrados ................................ 86
Figura 117. Repositorio en GitHub ...................................................................... 87
Figura 118. Lenguajes utilizados en el proyecto................................................. 87
Figura 119. Proyecto en Netlify para pruebas posteriores ................................. 87
Figura 120. Comando git add . ............................................................................ 88
Figura 121. Comando git commit -m ‘nombre’ .................................................... 88
Figura 122. Comando git push ............................................................................ 88
Figura 123. Página principal en monitores ......................................................... 90

4
Figura 124. Página de los datos meteorológicos ................................................ 91
Figura 125. Página principal en tableta............................................................... 92
Figura 126. Página de los datos meteorológicos en tableta ............................... 93
Figura 127. Página pincipal y página de dat. Meteorológicos en celular ........... 94

5
 Capítulo 1.
Generalidades del
proyecto

6
1.1 Introducción
El Instituto Tecnológico de Cuautla es una institución comprometida con brindar
servicios de educación superior tecnológica de calidad para la comunidad en el
estado de Morelos, brindando diversas carreras profesionales.

En el área de ingeniería electrónica del Tecnológico de Cuautla, hoy en día esta

encarga de administrar, actualizar, registrar, supervisar y organizar los datos
meteorológicos de una estación meteorológica portable que se encuentra ubicada
en la institución. Por esta razón, la coordinación de ingeniería electrónica,
requerirá la implementación de un software que permita registrar y controlar la
visualización de esta información meteorológica, para poder hacer uso de ella de
manera rápida en el momento que sea solicitada, ya que dicho sistema debe
agilizar la consulta de información.

Puesto que en la actualidad los sistemas de información web ofrecen una gran
ventaja competitiva en las empresas tanto públicas como privadas que requieren
estar a la vanguardia con la tecnología. Por ende, este sistema permitirá la
eficiencia oportuna en la elaboración de las actividades del área de electrónica
obteniendo de esta manera la reducción de los tiempos de respuesta al realizar
una visualización de datos. La información presentada en este documento está
basada en la creación de un sistema web de información para la coordinación de
ingeniería electrónica del Tecnológico de Cuautla.

7
1.2 Descripción de la empresa u organización

1.2.1 Nombre de la empresa

Instituto Tecnológico de Cuautla

Misión
Formar seres humanos reflexivos, éticos, emprendedores, multiculturales y con
sólidos conocimientos científicos y técnicos, capaces de transformar positivamente
su entorno.

Visión
Ser la primera opción de educación superior tecnológica pública en el estado,
manteniendo un crecimiento sostenido del 10% en el número de alumnos inscritos.

1.2.2 Descripción de la empresa

El tecnológico órgano administrativo descentralizado de la secretaria de
educación pública tiene como objetivo el prestar, desarrollar coordinar y
orientar servicios de educación superior tecnológica en los niveles de
técnico superior universitario, licenciaturas y posgrados; así como la formación
de profesionistas e investigación aptos para la aplicación y generación de
conocimientos que les proporcione la habilidad para solucionar problemas con
pensamiento crítico, siendo ético, actitudes emprendedoras, de innovación y
capacidad creativa para la incorporación de avances científicos y tecnológicos que
contribuyan el desarrollo nacional y regional.

8
1.2.3 Organigrama de la empresa

Figura 1. Organigrama de la empresa

1.2.4 Historia de la empresa

Puede considerarse como precursores de esta Institución al Ing. Carmelo
Hernández Ibarra, en esa época Director del Instituto Tecnológico de Zacatepec,
con el apoyo de la Ing. Bertha Guillermina Sánchez. En febrero de 1988 la Profa.
Elvia Hebertina Rivera Sedeño, fue comisionada para realizar un estudio de
factibilidad para que la región oriente del Estado de Morelos contara con un
Instituto Tecnológico; los resultados de este estudio indicaron que la zona reunía
las condiciones para la creación del Instituto. Con el propósito de tener
personalidad jurídica y poder realizar los trámites necesarios, se creó el
denominado “Patronato Pro-Construcción del Instituto Tecnológico de Morelos

9
A.C.”, cuya idea original era crear una extensión del Instituto Tecnológico de
Zacatepec en la región. Pero se optó por crear un Tecnológico para Cuautla.

1.2.5 Ubicación de la empresa

El Instituto Tecnológico de Cuautla se encuentra ubicado en Libramiento Cuautla-
Oaxaca S/N, Col. Juan Morales, C.P.62826, Yecapixtla, Morelos. En dicho Instituto
se realizará la Acreditación de la Carrera de Ingeniería Industrial, por el consejo de
Acreditación de la enseñanza de la Ingeniería A.C.

Figura 2. Mapa de localización del ITC

10
1.3 Problemas a resolver
Actualmente el Instituto Tecnológico de Cuautla cuenta con una estación
Meteorológica que es capaz de realizar mediciones y observaciones puntuales de
los diferentes parámetros meteorológicos, como, Temperatura, Presión, Altitud,
Humedad, entre otras. El montaje de la estación consiste en varios sensores e
instrumentos de interés adecuados para así poder establecer el comportamiento
atmosférico.

La mejora principal de este proyecto consiste en la falta de automatización sobre

los registros de la estación meteorológica, esto debido a que hoy en día el
Tecnológico de Cuautla trabaja de forma manual, es decir, todo su control es
realizado a papel y a lápiz, y por consecuencia hace que su documentación sobre
el comportamiento atmosférico sea extensa, esto dificulta el trabajo y la consulta
de la información provocando varios conflictos ya que la información en ocasiones
es repetitiva e incluso extraviada por desastres físicos.

Por lo cual, para resolver esta problemática se sugiere estandarizar la manera en

la que se maneja la información de las aportaciones de la estación meteorológica,
y así, poder realizar un sistema en el cual se almacene la información para
después ser consultada, agilizando el proceso y además de poder generar otra
serie de reportes utilizando esa información. Para ello se propone desarrollar un
sistema web integral compuesto por un módulo que se alimente con la información
de parámetros meteorológicos proporcionados día con día por la estación
meteorológica.

Para poder desarrollar el sistema se han de realizar diversas actividades las

cuales tendrán como resultado una serie de funciones vitales para el sistema.

11
Dichas actividades serán listadas a continuación:
• Creación de una Base de datos que contendrá la información captada por la
estación meteorológica.
• Crear e implementar una interfaz web intuitiva.
• Unificación de la interfaz con la base de datos, con el objetivo de presentar
la obtención de los datos meteorológicos actualizada.
• Incorporación del sistema web en un servidor para realización de diversas
pruebas.

1.4 Objetivos

1.4.1 General
Crear y diseñar una interfaz web para la estación meteorológica del instituto
Tecnológico de Cuautla.

1.4.2 Específicos

• Crear de una base de datos NoSQL para el almacenamiento de

información.
• Crear y diseñar de una interfaz web que se adapté a diferentes dispositivos.
• Conectar el módulo ESP32 a una base de datos no relacional.
• Obtener y presentar los datos captados por distintos sensores calibrados en
la interfaz web de manera llamativa e intuitiva.

12
1.5 Justificación
El presente proyecto realiza una implementación tecnológica para la necesidad
que tiene el personal de electrónica y como dar solución a dicho planteamiento
utilizando un sistema para la difusión de los datos de la estación meteorológica del
Tecnológico de Cuautla.

El proyecto se origina por la necesidad de manifestar los datos de una manera

más eficaz sobre la información que se maneja en dicha estación meteorológica
para poder contar con los resultados esperados a la mano en el menor tiempo
posible. El objetivo es agilizar el despliegue de la información, así como el
almacenamiento y la consulta de los datos reduciendo el tiempo para realizar esta
actividad.

El desarrollo del sistema generará cambios benéficos para el Instituto Tecnológico

de Cuautla, especialmente en el área de electrónica ya que contará con una
plataforma de fácil acceso que permitirá conocer los datos obtenidos en tiempo
real de la estación meteorológica, posteriormente alcanzar mayores niveles de
control de los datos y brindar satisfacción al usuario, de manera estructurada para
agilizar las consultas que solicite en tiempo real.

También se permitirá divulgar la información meteorológica de manera accesible

para todo público. Esta acción es importante para contribuir a mejorar la
comprensión de la problemática de los fenómenos atmosféricos y climáticos de la
región oriente del estado de Morelos.

Ya que las estaciones meteorológicas son ampliamente usadas en el sector

público y privado para aprovechar los datos estadísticos y las predicciones sobre
los fenómenos atmosféricos y climáticos que estas permiten conocer. Con este
proyecto se provee una plataforma de fácil consulta y acceso de los datos
meteorológicos.

13
1.6 Alcance y limitaciones
El alcance que tiene este proyecto es muy importante debido a que los parámetros
meteorológicos recabados y mostrados por el sistema web integral, tendrán un
mejor concepto del funcionamiento de la estación meteorológica de manera que
ayudará a tener un mejor desempeño en las actividades de monitoreo y
realización de acciones preventivas en cuanto a las variaciones de factores como
la temperatura, la lluvia, la velocidad del viento entre otras, todas muy importantes
para las comunidades de la región.

Tomando en cuenta las necesidades del personal de electrónica y la opinión del

jefe del departamento de electrónica se pretende los siguientes alcances:

• Creación de un almacenamiento de los parámetros meteorológicos.

• Creación de una interfaz para la visualización de la información recopilada.
• Visualización factible de reconocer de los parámetros meteorológicos.
• Información sobre la ubicación de la estación meteorológica.

Las limitaciones del sistema web integral de la estación meteorológica del Instituto
de Cuautla son que cada año se pretenden actualizaciones de sensores y estará
en constante revisión ya que cada modificación a los módulos de la estación
meteorológica se deberá de modificar en la base de datos para el buen
funcionamiento del sistema.

Tomando en cuenta las necesidades se establecen las siguientes limitaciones:

• Interactuar con nuevos componentes y sensores de la estación

meteorológica.
• Comprender el funcionamiento de recopilación de información de cada
componente de los componentes de la estación meteorológica.
• Tiempo de realización del sistema de seis meses

14
 Capítulo 2.
Marco Teórico

15
2.1 Tecnologías
Firebase

Figura 3. Logo Firebase

Definición
Firebase Realtime Data base es una base de datos NoSQL alojada en la nube que
te permite almacenar y sincronizar datos entre tus usuarios en tiempo real. La
sincronización en tiempo real permite que los usuarios accedan a sus datos desde
cualquier dispositivo, web o móvil, con facilidad, y los ayuda a trabajar en conjunto.

¿Por qué se escogió Firebase?

Se utilizo la base de datos de Firebase para el almacenamiento de los datos que
estarían registrando gracias a los sensores, lo que conviene de esta base de datos
es que la información se guarda en tiempo real, para que dicha información sea
mostrada al usuario sea la correcta ya que se está actualizando constantemente.

Ventajas
• Inicio gratuito y escalable: uno de los aspectos más destacables de
Firebase es que la mayoría de sus módulos son de uso gratuito siempre y
para cualquier tamaño. Hay algunos que limitan la capacidad en el plan
gratuito, pero no debemos preocuparnos por ello, puesto que, si a futuro
nuestra app tiene éxito y es necesario aumentar las capacidades de nuestro
servidor, podemos gestionarlo fácilmente con Firebase.

16
 • Es multiplataforma, ya que se encuentra disponible para las principales
plataformas móviles (Android e iOS) y para la web. Además, otras
tecnologías comienzan a tener también soporte como Node, Flutter, Unity…
• Nos ofrece un gran poder de crecimiento al gestionar fácilmente todos los
usuarios de las aplicaciones, y potenciar el crecimiento de los mismos a
través del envío de notificaciones e invitaciones.

HTML

Figura 4. Logo HTML

Definición
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup
Language) es el componente más básico de la Web. Define el significado y la
estructura del contenido web. Además de HTML, generalmente se utilizan otras
tecnologías para describir la apariencia/presentación de una página web (CSS) o
la funcionalidad/comportamiento (JavaScript).

¿Por qué se escogió HTML?

Es un saber que para poder realizar una página web necesitamos primero de una
herramienta que nos ayude con el esqueleto de la misma, y HTML es la principal
herramienta o software para esto, ya que con la ayuda de las etiquetas podemos
construir y lo que es el encabezado, el cuerpo, el aside y el pie de página. DE
igual manera nos ayuda a poder agrupar las etiquetas para que se nos sea más
fácil al momento de nosotros darle estilos al esqueleto de la página web.

17
 Ventajas
• Es un lenguaje sencillo, fácil de aprender y fácil de leer e interpretar.
• Existen numerosas aplicaciones y editores de páginas web (WYSIWYG)
que generan el código automáticamente, por lo que no es necesario ser un
experto informático para hacer páginas basadas en HTML.
• Su sencillez hace que pueda diseñarse y desplegarse un sitio web en muy
poco tiempo.
• Es el lenguaje más extendido, todos los navegadores lo admiten.
• Código visible e interpretable por los buscadores.

CSS

Figura 5. Logo CSS

Definición
Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada»
y parten de un concepto simple pero muy potente: aplicar estilos (colores, formas,
márgenes, etc...) a uno o varios documentos (generalmente documentos HTML,
páginas webs) de forma automática y masiva. Se le denomina estilos en cascada
porque se lee, procesa y aplica el código desde arriba hacia abajo (siguiendo un
patrón denominado herencia) y en el caso de existir ambigüedad (código que se
contradice), se siguen una serie de normas para resolver dicha ambigüedad.

18
 ¿Por qué se escogió CSS?
La idea de CSS es la de utilizar el concepto de separación de presentación y
contenido. Este concepto se basa en que, lo ideal es separar claramente el código
que escribimos. ¿Por qué? Porque con el tiempo, esto hará que el código sea más
fácil de modificar y mantener.

La idea es la siguiente:

• Los documentos HTML (contenido) incluirán sólo información y datos, todo

lo relativo a la información a transmitir.
• Los documentos CSS (presentación) incluirán sólo los aspectos
relacionados con el estilo (diseño, colores, formas, etc.).

Ventajas
• CSS juega un papel importante, al usar CSS simplemente debe especificar
un estilo repetido para el elemento una vez y usarlo varias veces porque
CSS aplicará automáticamente los estilos requeridos.
• La principal ventaja de CSS es que el estilo se aplica de manera
consistente en una variedad de sitios. Una instrucción puede controlar
varias áreas, lo que es ventajoso.
• La hoja en cascada no solo simplifica el desarrollo del sitio web, sino que
también simplifica el mantenimiento, ya que un cambio de una línea de
código afecta todo el sitio web y el tiempo de mantenimiento.
• Es menos complejo por lo que el esfuerzo se reduce significativamente.
• Ayuda a formar cambios espontáneos y consistentes.
• Los cambios de CSS son aptos para dispositivos. Con personas que
emplean un lote de varios dispositivos inteligentes para acceder a sitios
web a través de la web, existe un requisito para el diseño web receptivo.

19
 JavaScript

Figura 6. Logo JavaScript

Definición
JavaScript es un lenguaje de programación que los desarrolladores utilizan para
hacer páginas web interactivas. Desde actualizar fuentes de redes sociales a
mostrar animaciones y mapas interactivos, las funciones de JavaScript pueden
mejorar la experiencia del usuario de un sitio web. Como lenguaje de scripting del
lado del servidor, se trata de una de las principales tecnologías de la World Wide
Web. Por ejemplo, al navegar por Internet, en cualquier momento en el que vea un
carrusel de imágenes, un menú desplegable “click-to-show” (clic para mostrar), o
cambien de manera dinámica los elementos de color en una página web, estará
viendo los efectos de JavaScript.

¿Por qué se escogió JavaScript?

Anteriormente, las páginas web eran estáticas, similares a las páginas de un libro.
Una página estática mostraba principalmente información en un diseño fijo y no
todo aquello que esperamos de un sitio web moderno. JavaScript surgió como una
tecnología del lado del navegador para hacer que las aplicaciones web fueran más
dinámicas. Por medio de JavaScript, los navegadores eran capaces de responder
a la interacción de los usuarios y cambiar la distribución del contenido en la página
web.

20
Cabe mencionar que se utilizó para hacer la conexión a la base de datos donde se
encuentran almacenados los datos recabados por los sensores, una vez que se
realizó la conexión, se mostraron en lo que son unas tarjetas de vista de los datos
a mostrar de manera gráfica en lo que es nuestra página web.

Ventajas
• Velocidad - JavaScript tiende a ser muy rápido porque a menudo se ejecuta
inmediatamente en el navegador. Entonces mientras no requiera recursos
externos, JavaScript no tiene permitido retrasarse por llamados del servidor
backend.
• Compatibilidad- A diferencia de PHP u otros lenguajes scripting, JavaScript
puede ser usado en cualquier página web. JavaScript puede ser usado en
diferentes tipos de aplicaciones gracias al soporte en otros lenguajes como
Pearl y PHP.
• Versatilidad- Hay muchos métodos para usar JavaScript mediante
servidores Node.js. Si tú estás en Bootstrap Node.js con Express, puedes
usar un documento database como MongoDB, y usar JavaScript en el
frontend para clientes. Es posible desarrollar una aplicación completa de
JavaScript desde principio a fin solo usando JavaScript.

Visual Studio Code

Figura 7. Logo VSC

21
 Definición
Visual Studio Code es un editor de código fuente ligero pero potente que se
ejecuta en su escritorio y está disponible para Windows, macOS y Linux. Viene
con soporte integrado para JavaScript, TypeScript y Node.js y tiene un rico
ecosistema de extensiones para otros lenguajes y tiempos de ejecución (como
C++, C#, Java, Python, PHP, Go, .NET).

¿Por qué se escogió Visual Studio Code?

La utilización de lo que es Visual Studio Code fue para poder desarrollar el
esqueleto de la página de la estación meteorológica con HTML, para poder darle
estilos a todo lo que fue el esqueleto con la ayudad de la herramienta CSS, y para
poder hacer la conexión a la base de datos con la ayuda de otra herramienta que
es JavaScript, por eso mismo es que se escogió ya que este editor de texto o
código soporta la sintaxis de otras tecnologías, además de que se le puede
descargar extensiones al editor y se nos haga más sencillo el uso del mismo.

Ventajas
• Multiplataforma: Es una característica importante en cualquier aplicación y
más si trata de desarrollo. Visual Studio Code está disponible para
Windows, GNU/Linux y macOS.
• IntelliSense: Esta característica está relacionada con la edición de código,
autocompletado y resaltado de sintaxis, lo que permite ser más ágil a la
hora de escribir código. Como su nombre lo indica, proporciona sugerencias
de código y terminaciones inteligentes en base a los tipos de variables,
funciones, etc. Con la ayuda de extensiones se puede personalizar y
conseguir un IntelliSense más completo para cualquier lenguaje.
• Depuración: Visual Studio Code incluye la función de depuración que ayuda
a detectar errores en el código. De esta manera, nos evitamos tener que
revisar línea por línea a puro ojo humano para encontrar errores. VS Code
también es capaz de detectar pequeños errores de forma automática antes
de ejecutar el código o la depuración como tal.

22
 • Uso del control de versiones: Visual Studio Code tiene compatibilidad con
Git, por lo que puedes revisar diferencias o lo que conocemos con git diff,
organizar archivos, realizar commits desde el editor, y hacer push y pull
desde cualquier servicio de gestión de código fuente (SMC). Los demás
SMC están disponible por medio de extensiones.

GitHub

Figura 8. Logo GitHub

Definición
GitHub es un portal creado para alojar el código de las aplicaciones de cualquier
desarrollador, y que fue comprada por Microsoft en junio del 2018. La plataforma
está creada para que los desarrolladores suban el código de sus aplicaciones y
herramientas, y que como usuario no sólo puedas descargarte la aplicación, sino
también entrar a su perfil para leer sobre ella o colaborar con su desarrollo.
Como su nombre indica, la web utiliza el sistema de control de versiones Git
diseñado por Linus Torvalds. Un sistema de gestión de versiones es ese con el
que los desarrolladores pueden administrar su proyecto.

¿Por qué se escogió GitHub?

Como su nombre indica, la web utiliza el sistema de control de versiones Git
diseñado por Linus Torvalds. Un sistema de gestión de versiones es ese con el
que los desarrolladores pueden administrar su proyecto.

23
 Ventajas
• Versionar tu código: Esto quiere decir guardar en determinado momento los
cambios realizados a un archivo o conjunto de archivos, con la oportunidad
de tener acceso a ese historial de cambios, ya sea para regresar a una de
esas versiones o hacer comparaciones entre ellas. En este punto hay que
destacar las ventajas frente a herramientas como Subversion y Perforce;
que son usados para este mismo fin, la principal es que no necesitarías
montar, mantener, hacer copias de seguridad, etcétera a un repositorio o
servidor para proteger el código que escribe, en este caso GitHub es la
plataforma que cumple esta función. Lo único que necesita es instalar Git
en su equipo, crear su cuenta en GitHub y luego realizar algunas
configuraciones sencillas y ejecutar los comandos adecuados podrá enviar
su código a GitHub.
• Contribuir: Si luego de copiar un proyecto (hacer fork) haces ajustes que
arreglan errores o introducen una nueva funcionalidad, puedes proponerle
al dueño del proyecto que integre tus cambios en su código. Eso lo puedes
hacer enviando un pull request con todas tus modificaciones o novedades.
Mediante un pull request el administrador del repositorio original tendrá la
posibilidad de revisar, testear o escribir comentarios sobre alguna línea de
tu propuesta, y finalmente si considera interesante tu contribución podrá
realizar la fusión de este con el código original (a esto se le conoce como
hacer merge) o en caso contrario rechazar los cambios propuestos.
• Trabajo en equipo: GitHub es el lugar perfecto para trabajar juntos en una
idea con un amigo o colega, después de crear tu proyecto podrás invitar a
otros usuarios como colaboradores, permitiendo así que estos lean y
escriban directamente sobre tu repositorio.

24
 Lucidchart

Figura 9. Logo Lucidchart

Definición
Lucidchart es una plataforma de diagramación que permite trabajar en un
documento con otros usuarios al mismo tiempo, en pocas palabras, un espacio
digital para crear en equipo sin importar el lugar donde se encuentren. A diferencia
de los tableros virtuales, esta plataforma cuenta con elementos especiales para la
creación de organigramas, mapas mentales, diagramas de flujo, entre otros
formatos para ver cómo se relacionan y conectan los conceptos.

¿Por qué se escogió Lucidchart?

Lucidchart te ofrece organizadores gráficos intuitivos y dinámicos, como líneas del
tiempo, mapas mentales y diagramas de Venn que se adaptan a todos los
estudiantes, desde los de escuela primaria hasta los de cursos avanzados de
ingeniería.
Ventajas
• Gran herramienta para crear flujos de trabajo, procesos y wireframes.
• No se necesita instalación para usar Lucidchart, al estar basado en la web,
se eliminan los problemas de instalación y se facilita el intercambio de
resultados y la colaboración.
• Se pude acceder en cualquier dispositivo con cualquier sistema operativo
utilizando navegadores compatibles.

25
 Netlify

Figura 10. Logo Netlify

Definición
Netlify es una plataforma para que los desarrolladores web alojen sus sitios en la
nube sin administrar ningún servidor en el backend donde funciona la base de
datos y la lógica de la aplicación. Las actualizaciones de las aplicaciones web se
pueden automatizar mediante la integración de cualquier sistema de control de
versiones basado en git compatible con Netlify.

Puede tener funcionalidades dinámicas que cambian constantemente. Netlify crea

su propio tipo de sistema de administración y almacenamiento de archivos para
enviar actualizaciones tanto a los proveedores de Git como a Netlify al mismo
tiempo que se conecta al repositorio.

Cada actualización/cambio realizado en el contenido se distribuye a través de los

servidores repartidos en la red de entrega de contenido (CDN) y se construye
previamente como páginas estáticas con optimización de archivos antes de
entregarse a los usuarios.

26
 ¿Por qué se escogió Netlify?
Netlify permite configurar su software más rápido y enviar mejores productos con
mayor frecuencia con los flujos de trabajo de desarrollo modernos de Netlify.
Puede usarse para crear una experiencia ganadora en cualquier motor de
plantillas o marco de interfaz. Netlify admite la entrega continua y la integración
continua. Solo tiene se necesita conectar a un repositorio de git y cada vez que un
desarrollador envíe una confirmación, automáticamente creará el sitio, ejecutará
los complementos y lo implementará.

Ventajas
• Facilidad de uso y modelo de precios simple: Netlify es conocido por su
notable facilidad de uso. Ahorra mucho tiempo para los usuarios que
requieren un alojamiento web personalizado rápido. Este beneficio puede
influir en su decisión a la hora de considerar esta plataforma.
• Implementación rápida: Las implementaciones de proyectos de Netlify son
bastante rápidas y convenientes. La funcionalidad de arrastrar y soltar
reduce en gran medida el tiempo de implementación.
• Recursos optimizados: Netlify permite a los usuarios optimizar
automáticamente los recursos del proyecto con una gama de opciones
avanzadas de mejora del rendimiento.
• Desarrollo continuo: La función de desarrollo continuo se activa
automáticamente para las implementaciones del repositorio de Git.

27
Capítulo 3.
Desarrollo

28
3.1 Act. 1. Creación de una base de datos en la nube e instalación de
librerías.

Se creó un proyecto dentro de la herramienta de en Firebase.

Figura 11. Creación del proyecto en Firebase

Dentro del proyecto se creó una aplicación web.

Figura 12. Creación de la aplicación web

Dentro del proyecto y de la aplicación web se creó una base de datos que fue en
tiempo real, como se muestra en la Figura 13.

29
 Figura 13. Creación de la base de datos Realtime

Se dejo por defecto la ubicación de almacenamiento de la base de datos en

tiempo real.

Figura 14. Selección de ubicación de almacenamiento

Se seleccionaron las reglase de seguridad.

Figura 15. Selección de reglas de seguridad

A diferencia de una base de datos de SQL, no hay tablas ni registros. Cuando se

agregan datos van al árbol JSON, estos se convierten en un nodo de la estructura
JSON, se aprecia en la Figura 16.

30
 Figura 16. Árbol con sus nodos dentro

Se muestra la funcionalidad de la base de datos, cada nodo contiene su respectiva

información recabada por los sensores de la estación meteorológica.

Figura 17. Información en los nodos altitud y cantidad de lluvia

Se muestra la información recabada en los nodos grados y humedad.

Figura 18. Información en los nodos: grados y humedad

31
3.2 Act. 2. Conexión del módulo ESP32 a la base de datos en la nube
En la conexión del módulo Esp32 a la base de datos en Firebase, se importa la
librería del módulo.

Figura 19. Librería utilizada en la conexión de la base de datos

Se definió un nombre a valores constantes de las variables que se utilizan para el

host y la autenticación, debido a que los valores que estas contienen no
cambiarán.

Figura 20. Definición de valores constantes a variables

32
Las líneas de código establecen los valores de campos diferentes en un canal
ThingSpeak, que contendrán los datos para ser transmitidos a través de Internet.
firebasedata hace a una llamado a la base de datos para que con esa propiedad
pueda acceder a los nodos o documentos.

Figura 21. Llamado a la base de datos para acceder a los nodos

33
3.3 Act. 3. Diseño y estructuración de la interfaz Web
Para el maquetado del diseño de la página web se basó en la siguiente estructura
HTML.

Figura 22. Estrucura HTML

Una vez teniendo como base el ejemplo, se maqueto de manera gráfica para que
pudiésemos ver cómo es que se va a desplegar y comportar la página web en las
distintas pantallas de los dispositivos como lo son: monitores, tabletas y celulares.

Maquetación en Monitor.

Figura 23. Página principal en monitor

34
 Figura 24. Página de datos en monitor

Maquetación para Tableta.

Figura 25. Página principal y página de los datos en tableta

35
Maquetación para Celular.

Figura 26. Página principal y página de datos en celular

Ahora se procederá a ver cómo es que se fue desarrollando la estructura de la

página web, pero en HTML, y las etiquetas que fueron utilizadas para poder ir
estructurando de manera correcta los diseños previamente realizados.

Página principal.
En la etiqueta <head> contendrá el meta con el UTF-8 que esto hará que
reconozca símbolos que en ingles no son reconocibles como lo es la letra ñ por
ejemplo, dos etiquetas link, una donde hacemos referencia a la hoja de estilos de
CSS y otra donde hacemos referencia a un icono que se mostrar en la pestaña del
navegador de igual manera se tiene una etiqueta <title> que tiene el nombre de
Estación meteorológica ya que este nombre se mostrara en la pestaña dentro del
navegador cuando este se encuentre abierto. Como se muestra en la Figura 27.

36
 Figura 27. Etiqueta head

Dentro de la etiqueta <body> se colocó una etiquete que tiene por nombre
<header> con una clase del mismo nombre.

Figura 28. Etiqueta body y header

Dentro de la etiqueta <header> se creó un <div> con una clase llamada “logo-
header”. Contiene la imagen del TecNM dentro de la etiqueta <img> y titulo dentro
de la etiqueta <h1>

Figura 29. Etiquetas contenedoras de logo TecNm y titulo del proyecto

37
Se creo otra etiqueta <div> con una clase llamada logoTec, esta etiqueta contiene
una imagen de un menú, de igual manera contiene una lista desordenada para el
navegador.

Figura 30. Navegación en la página web

Se creo una etiqueta <div> que tiene una clase que lleva por nombre contenedor,
dentro contiene dos nuevas etiquetas que son <section> y <article> cada una con
su respectiva clase, donde se contiene el objetivo dentro de una etiqueta <h2> y
de una etiqueta <p> la descripción del mismo.

Figura 31. Contenedor del ojetivo

38
Dentro de otra etiqueta <article> que tiene una clase con el nombre ubicación, se
muestra la descripción de donde se encuentra la estación meteorológica cabe
mencionar que se muestra el cierre de la etiqueta <section>. En otra etiqueta
<iframe> colocamos la dirección de la ubicación exacta del Instituto Tecnológico
de Cuautla, se mostrará como si fuera una imagen, pero al momento de nosotros
pasar el puntero encima se podrá mover como si estuviésemos directamente
desde el Google maps, esto para que se pueda tener una mayor exactitud para
poder consultar de mejor manera la ubicación.

Figura 32. Mapa de la ubicación de la institución

Dentro de la etiqueta <aside> se colocarán tarjetas para poder mostrar

información de la estación meteorológica, para esto ocuparemos la etiqueta
<card> la información está dividida por las etiquetas que se muestran a
continuación. En la etiqueta <p> contiene una id, ya que se hará uso más adelante
dentro de JavaScript. Como se muestra en la Figura 33.

39
 Figura 33. Tarjetas para la muestra de datos

Solo se mostrarán cuatro tarjetas del total de los datos a mostrar dentro página la
página de los datos meteorológicos, hacemos mención que con la etiqueta <img>
tendremos la dirección de donde se encuentras las imágenes almacenadas, al
final del último div tenemos una etiqueta <a> donde hacemos referencia a otro
HTML que contiene los datos meteorológicos que al dar clic cobre este nos llevara
hacía esa hoja HTML. Al final de las líneas se encuentra la etiqueta del <div> que
tuvo una clase que llevo como nombre contenedor. Como se muestra en la Figura
34.

40
 Figura 34. Tarjetas de los datos faltantes

Ahora dentro de la etiqueta <footer> se creará un <div> con una clase que lleva
por nombre footer, contendrá otro div que tiene una clase con nombre datEsc que
esta contiene una lista desordenada donde se mostraran los datos de la escuela
en el pie de página.

Figura 35. Datos escolares en el pie de página

41
Dentro de un div que tiene una clase con el nombre de redes, este div contendrá
etiquetas <a> con el atributo target = _blank, esto para cuando se dé clic sobre el
icono de la red social abra una pestaña con la red social seleccionada. Se hace
mención que las redes mostradas dentro de este div son las siguientes:
• El sitio oficial del Instituto Tecnológico de Cuautla.
• El Facebook oficial.
• El Gmail de la Institución.
• El Twitter oficial.
• La página de YouTube de la institución.

Figura 36. Redes sociales de la institución

Por último, un div con su respectiva clase que contendrá una lista desordenada
donde mostrará los derechos reservados de la institución y dicho departamento.
Se muestra el cierre de la etiqueta <footer>. Como se muestra en la Figura 37.

42
 Figura 37. Derechos reservados de la escuela.

Página de los datos meteorológicos

Cabe mencionar que en esta página en la parte del <head>, <header> y <footer>
contiene la mista información y contiene las etiquetas que la página principal, una
vez mencionado esto vamos a mostrar lo que va a contener en el <body>.

Vamos a crear un div que tiene una clase que tiene por nombre container-clock,
dentro de este div va a ver dos etiquetas, un <h1> y un <p> que cada etiquete
tiene un id esto porque vamos a ocuparlas en el JavaScript. Al final tenemos una
etiqueta <script> donde hacemos referencia al archivo que tiene por nombre
clock.js.

Figura 38. Etiquetas para el reloj

43
Se crearon 2 container que dentro tienen 4 tarjetas cada uno y 1 container que
dentro tendrá 3 tarjetas y cada tarjeta va a mostrar un dato meteorológico, como
podemos observar en este caso las etiquetas <p> aparte de tener una clase,
también tienen un id que nos va a servir más adelante en el JavaScript. Como se
muestra en las Figuras 39, 40 y 41.

Figura 39. Contenedor de las primeras cuatro tarjetas

44
Figura 40. Contenedor de las segundas cuatro tarjetas

45
Figura 41. Contenedor de las ultimas tres tarjetas

46
3.4 Act. 4. Agregar estilos y hacer responsive la interfaz para diferentes
dispositivos
Estilos para la visualización de la página web en monitores, tabletas y celulares
tanto en la página principal como en la de los datos meteorológicos.

Estilos de la página principal

Se importo la URL de un estilo de fuente para que se ocupara dentro del proyecto,
con el * y los estilos que contiene entre llaves es para que se le aplique a todo el
contenido y así puedan ser modificados independientemente. En el body se le dio
un tamaño máximo en horizontal del 100% con un fondo color blanco, en las
etiquetas <a> y <li> se utilizó la fuente y un color blanco.

Figura 42. Estilos generales de etiquetas especificas

47
Se le agregaron estilos en la etiqueta del header, y posteriormente podemos ver
que se agregaron estilos a clases, para diferenciarlas de las etiquetas se le agrega
un punto al inicio del nombre de la clase, estos estilos se le aplicaran a los div.

Figura 43. Estilos al header y a clases

Se le agrego estilos a las siguientes clases, en las primeras dos clases se

especificó a que etiqueta dentro de la clase se le van a aplicar esos estilos, se le
agrego un efecto hover a la etiqueta del h1 esto para que cuando se dé clic
encima cambie de color. Se le dio estilos a los logos utilizados que son el del
TecNM y del ITC. Como se muestra en la Figura 44.

48
 Figura 44. Estilos al h1 y a los logos

En las primeras tres clases se les dio estilos a etiquetas en específico, se le dio un
efecto a la etiqueta <a>, posterior mente a las siguientes dos clases se le dio
estilos a la etiqueta <img> y se le dio estilos a un id y lo podemos identificar por el
siguiente símbolo #, un display none para que no se muestre, aunque seguirá
estando en la página web en la vista para monitores. Como se muestra en la
Figura 45.

49
 Figura 45. Estilos de los logos e icono del menu

Se creó un contenedor con tendrá dentro una etiqueta <section> y este mismo
contendrá una etiqueta <article> que tiene una clase llamada objetivo, se les dio
estilos a estas etiquetas y posteriormente estilos a cada elemento de la clase
objetivos como lo es en la etiqueta <h2> y en la etiqueta <p>. Como se muestra en
la Figura 46.

50
 Figura 46. Estilos del contedor, section y del objetivo

Dentro de la etiqueta <section> se encuentra otra etiqueta <article> que tiene una
clase que tiene por nombre ubicación, a la cual se le dio estilos a cada clase y
etiqueta, destacando la etiqueta <iframe>, ya que esta contiene el mapa donde se
encuentra el Instituto Tecnológico de Cuautla. Como se muestra en la Figura 47.

51
 Figura 47. Estilos de la ubicación

Dentro de la etiqueta <aside> se le asigno una clase que esta misma contiene una
etiqueta <h2> que posteriormente se le dieron sus respectivos estilos.

Figura 48. Estilos del aside

52
Nuevamente se crea otro contenedor que este a su vez tendrá las tarjetas a
utilizar. Tanto al contenedor como a las tarjetas se les dio una clase las cuales
tienen asignados sus estilos, en las tarjetas se le asigno un efecto hover con sus
respectivos estilos.

Figura 49. Estilos de las tarjetas y efecto hover

Cada tarjeta contiene su propia imagen y su contenido, se les dio estilos de

tamaño a la imagen y alineación del texto en el contenido.

Figura 50. Estilos a imágenes y contenido del las tarjetas

53
Se le dio los estilos de la etiqueta <h3> y la etiqueta <p> que se encuentran dentro
de la clase contenido que esta misma se encuentra dentro de la clase card.

Figura 51. Estilos de la etiqueta h3 y p del contenido

Dentro de la clase datosAside se tiene una etiqueta <a> a la cual se le asignaron

estilos y posteriormente un efecto hover para que tuviera un cambio de color tanto
en el fondo como de letra, esto se muestra cuando el puntero pasa por la tarjeta.

Figura 52. Etilos de la etiqueta a y efecto hover

54
En la etiqueta <footer> hay un div que tiene una clase con el mismo nombre, y hay
otro que tiene por nombre datEsc. En la etiqueta footer se le asignaron los estilos
correspondientes y a la clase por igual, en la clase se cuenta con una lista con sus
elementos representado por la etiqueta <li> que se le asigno sus estilos.

Figura 53. Estilos del footer y la clase datEsc

Dentro del footer se encuentra otro div que tiene una clase llamada redes, y cada
red contiene su respectivo logo, se le asigno estilos a la clase y a la etiqueta
<img>.

Figura 54. Estilos a la clase redes y a las imágenes

55
EL último <div> contiene una lista desordenada con sus respectivos elementos,
así que se asignaron estilos tanto al <div> como a los elementos de la lista.

Figura 55. Estilos al ultimo div y a elementos de la lista

Estilos de la página principal en tabletas

Con ayuda de la media query de definió el tamaño para las pantallas que tienen
las medidas colocadas, posterior a esto, se dieron nuevos estilos a los elementos
del navegador de la página web.

Figura 56. Media querie para tableta y estilos del nav

56
Se dieron nuevos estilos para las clases que se tienen en el navegador, tamaño
para los logos, y estilos para el icono del menú.

Figura 57. Estilos para clases y el icono del menú

Dentro de la clase de logoTec, se asignaron nuevos estilos para ser presentados

en las medidas para dispositivos de tabletas.

Figura 58. Nuevos estilos para logoTec y sus elementos.

57
Dentro de la clase logoTec, se le asigno una pseudoclase para que tuviera nuevos
estilos a elementos específicos. De igual manera se le da transiciones a la lista.

Figura 59. Estilos, pseudoclase y transicion

Nuevos estilos asignados dentro de la clase contenedor y sección para poder

visualizarse en tabletas.

Figura 60. Nuevos estilos al contenedor y seccion

58
Tanto a la clase Objetivo como a las etiquetas que contiene como la etiqueta <h2>
y etiqueta <p> se le asignaron nuevos estilos.

Figura 61. Estilos a etiquetas dentro de la clase objetivo

A la clase Objetivo como a las etiquetas que contiene como la etiqueta <h2> y
etiqueta <p> se le asignaron nuevos estilos.

Figura 62. Estilos a etiquetas dentro de la clase ubicación

59
En la case de datosAside se le asignaron nuevos estilos y por ende a las etiquetas
que esta clase contiene. De igual maneta a la clase container se le dieron nuevos
estilos.

Figura 63. Nuevos estilos para la clase datosAside y la clase container

A la clase card se le dio estilos diferentes para una visualización en tabletas y no

solo eso si no una transición.

Figura 64. Estilos nuevos a la clase card

60
Dentro de la clase card y a su vez en el contenido que tiene las etiquetas <p> y
<h3> se le asignaron otros estilos.

Figura 65. Estilos a las clases card, conteiner y a etiquetas

En la parte de la clase del datosAside, en específico a la etiqueta <a>, se le dieron

nuevos estilos y con ello un efecto hover.

Figura 66. Estilos y efecto hover

61
Por último, en la etiqueta <footer>, a las clases y con ello a las etiquetas que estas
contienen, se les asignó unos estilos diferentes para que puedan ser visualizados
dentro de dispositivos como las tabletas.

Figura 67. Estilos del pie de página para tableta

Estilos de la página principal en Celulares

Con la ayuda de una media query, se definen el tamaño para que se apliquen los
estilos a los dispositivos celulares. Comenzando con la etiqueta <header>

Figura 68. Estilos a la etiqueta header para celular

62
 En la clase logo-header se asignaron los estilos para las etiquetas que esta
clase contiene las cuales son, la etiqueta <h1> y la etiqueta <img>.

Figura 69. Estilos a las clases logo-header y logoTec

En la clase de logoTec se le asignaron estilos a las etiquetas que contiene, como

es la lista y sus elementos, de igual manera se aplicó una pseoudo-clase.

Figura 70. Estilos a la clase logoTec y a las etiquetas que contiene

63
En la clase checkbtm y menu-icon se definieron los estilos y, se le asigno dio una
transición a un id.

Figura 71. Estilos a la clase cjecnt y menu-icon

En la clase del contenedor y de sección se le dieron estilos para que se puedan

visualizar de manera correcta en dispositivos móviles.

Figura 72. Estilos a la clase contenedor y seccion para movil

64
En la clase del objetivo y en la etiqueta que esta clase contiene, se asignaron
nuevos estilos para poder visualizarse en dispositivos móviles.

Figura 73. Estilos a la clase objetivo y a la etiqueta h2

Se asignaron estilos a la clase ubicación y a sus respectivas etiquetas utilizadas

en esta clase para mostrarse en dispositivos móviles.

Figura 74. Estilos a la clase ubicación y etiquetas contenidas

65
En la clase de datosAside se asignaron nuevos estilos y cabe mencionar que de
igual manera se hizo en la etiqueta <h2>.

Figura 75. Estilos a la clase datosAside y a la etiqueta h2

En la clase container y en la clase card que contiene las tarjetas de datos se le

otorgaron nuevos estilos para mostrarse de manera correcta.

Figura 76. Estilos a la clase container y a la clase card

66
Se asigno un efecto hover a la clase card, nuevos estilos a la clase contenido y a
las etiquetas que esta clase contiene se le asignaron unos nuevos estilos.

Figura 77. Efecto hover y estilos a etiquetas de las calses card y contenido

Se le asignaron nuevos estilos a la etiqueta <a> que se encuentra dentro de la

clase datosAside, de igual forma se le dio un efecto hover a esta etiqueta.

Figura 78. Estilos y efecto hover a la etiqueta <a>

67
En la etiqueta del footer y de igual manera en la clase que tiene el mismo nombre
se le asignaron unos estilos diferentes a lo que ya tenían, ya que, estos estilos son
para poder mostrarse en dispositivos móviles.

Figura 79. Estilos a la etiqueta footer y la clase footer

En la clase datEsc se asignaron nuevos estilos, en la etiqueta de la lista

desordenada que esta contiene de igual manera se le asignaron otros estilos. Por
último, en la clase dat se le dio un padding.

Figura 80. Estilos a la clase datEsc, dat y estilos a la lista

68
 Estilos de la página de los datos meteorológicos
Se importaron los estilos de fuente a través de una URL, se dieron estilos
generales con el signo *, aparte estilos al body y a las etiquetas <a> y <li>.

Figura 81. Importación de estilos de fuente y estilos generales

En el reloj que se utilizó se le asignaron los estilos a la clase y por ende a las
etiquetas que esta clase contiene.

Figura 82. Estilos a la clase del reloj y sus etiquetas

69
Se le dieron estilos a la etiqueta <header> y a unas clases que se encuentran en
el header.

Figura 83. Estios al header y a clases

Se dieron estilos y un efecto hover en la etiqueta <h1> que contiene la clase logo-
header, se asignaron tamaños a las clases de tecB y tecC.

Figura 84. Estilos y efecto hover

70
Se asignaron estilos a la lista desordenada juntos con sus elementos que se
encuentran en la clase logoTec, de igual manera en la etiqueta <a> se le dio un
efecto hover.

Figura 85. Estilos a la lista desordenada y efecto hover

Se le asignaron estilos a la clase menú-icon y a la etiqueta que contiene de <img>

de igual manera al Id.

Figura 86. Estilos a la clase y al id

71
La clase container tiene las tarjetas a utiliza, y estas tarjetas tienen una clase card,
se les asignaron estilos a las respectivas clases.

Figura 87. Estilos a clase conainer y a la clase card

Efecto hover a la clase card y estilos a la imagen que se encuentra en la clase

card.

Figura 88. Efeto hover y estilos a la imagen de la case card

72
Se asignaron estilos en específico a las siguientes clases: clase card-title y a la
clase card-text

Figura 89. Estilos a la clase card-title y card-text

A los últimos dos contenedores se le asignaron sus respectivos estilos, ya que se

dividieron en tres contenedores para mostrar las tarjetas, así que estos son los
estilos finales.

Figura 90. Estilos a los últimos dos contenedores de tarjetas

73
Se asignaron estilos a la etiqueta <footer > y a la clase que tiene por nombre:
datEsc, a la lista contenida en la clase antes mencionada se le asignaron otros
estilos.

Figura 91. Estilos al footer y a la clase datEsc de los datos meteorológicos

En la claes que tiene por nombre redes, se le asignaron estilos, de igual maneta
se le signaron estilos diferentes en particular a la etiqueta <img>.

Figura 92. Estilos a la clase redes y etiqueta img.

74
Se le asignaron estilos e la clase dat, contiene una lista desordenada así que a
sus elementos se le asignaron nuevos estilos,

Figura 93. Estilos a la clase dat y a elemenos de la lista

Estilos de la página de los datos meteorológicos para tableta

Con la ayuda de una media query se establecerán los pixeles, comenzó con los
estilos de la etiqueta <header>, la clase header, logo-header y la etiqueta que esta
última clase contiene que es la etiqueta <h1>.

Figura 94. Media query y estilos en la header y en otras clases

75
En las clases tecB, tecC, chechbtn y menu-icon se le asignaron nuevos estilos
para la visualización en la tableta.

Figura 95. EStilso a las clases tecB, tecC, chechbtn y menu-icon

En la clase logoTec se dieron nuevos estilos a las etiquetas que contiene, las
etiquetas son <ul> y sus elementos <li>.

Figura 96. Estilos a las etiquetas de la clase logoTec

76
En la clase de logoTec se le asignaron sus respectivos estilos a las etiquetas que
esta contiene, se utilizó unas pseudo-clases para la etiqueta de lista<ul>

Figura 97. Estilos a la clase logoTec y pseudo-clases

Se asignaron estilos a la clase container-clock, de igual maneta a las etiquetas

que esta clase contiene se asignaron nuevos estilos.

Figura 98. Estilos a la clase container-clock y a sus elementos

77
Se asignaron los estilos correspondientes a las clases siguientes, la clase
container y la clase card que esta última presenta tarjetas para mostrar datos.

Figura 99. Estilos a la clase container y clase card

En la clase card se le asigno un efecto hover al momento de que el puntero pase

por las tarjetas o se seleccione, también se le asigno estilos a la imagen que esta
clase contiene.

Figura 100. Estilo a la imagen y efecto hover a la clase card

78
En la parte final, en la etiqueta <footer>, en la clase redes y en la clase datEsc en
la etiqueta <li> se asignaron nuevos estilos para poder visualizarse de una manera
correcta.

Figura 101. Estilos a varias clases y a la etiqueta footer

Estilos de la página de los datos meteorológicos para celular

Con ayuda de una media query se asignan los pixeles, y se comenzó a dar estilos
a la etiqueta <header> y la clase con el mismo nombre.

Figura 102. Media quey y estilos a la etiqueta y clase footer

79
Se asignaron estilos a los elementos que contiene la clase logo-header como lo
son la etiqueta <h1> y la etiqueta <img>.

Figura 103. Estilos a los elementos de la clase logo-header

En la clase checkbtn y en la clase menú-icon se asignaron sus respectivos estilos

para que se puedan visualizar de manera correcta.

Figura 104. Estilos a la clase checkbtn y la clase menu-icon

80
Se asignaron estilos a los elementos que contiene la clase logoTec, en específico
a la etiqueta <img> y la etiqueta <ul>.

Figura 105. Estilos a las etiquetas dentro de la clase logoTec

Siguiendo con los estilos, dentro de la misma clase se utilizaron pseudo-clases

para la lista y los elementos de esta lista.

Figura 106. Estilos y pseudo-clases en la clase logoTec

81
En la clase del rejo que se muestra en la página, se otorgaron estilos a la clase
que lo contiene y sus elementos de esta clase que con la etiqueta <h1> y la
etiqueta <p>.

Figura 107. Estilos a la clase container-clock y a sus elementos

En la clase container y en la clase card se asignaron nuevos estilos para que

puedan ser visualizados de manera correcta en los dispositivos móviles.

Figura 108. Estilos a la clase container y a la clase card

82
Dentro de la clase card contiene elementos a los cuales se les asignaron sus
respectivos estilos, esos elementos son la etiqueta <img>, la etiqueta <h5> y la
etiqueta <p>.

Figura 109. Estilos a los elementos de la clase card

Se le signo un efecto hover a la clase card y se les dieron estilos a las clases,
card-body, container2 y container3.

Figura 110. Efecto hover y estilos a diferentes clases

83
En la etiqueta footer, en la clase footer, en las otras clases que son datEsc y dat
se asignaron estilos correspondientes, en la etiqueta <ul> de la clase datEsc se
dieron otros estilos.

Figura 111. Estilos a la etiqueta footer y a diferentes clases

3.5 Act. 5. Extracción de información de la Base de datos a la interfaz

Conexión a la base de datos
Se hizo la conexión con la base de datos y con ayuda del método getElementById
obtendrá la etiqueta HTML donde se va a mostrar la información. El objeto
firebaseConfig contiene las configuraciones que se necesitarán para acceder a
Firebase.

Figura 112. Conexión a la base de datos

84
Con el método initializeApp, hará que la base de datos comience a funcionar
obteniendo consigo los datos de los campos creados en los documentos.

Figura 113. Inicialización de la base de datos.

Este objeto permite acceder de forma más sencilla a las etiquetas HTML que se
encuentren en la página, donde dichas etiquetas tendrán el nombre de la
propiedad de dicho objeto.

Figura 114. Objeto para acceder a los id en el HTML

3.6 Act. 6. Creación de funciones para mostrar los datos en tiempo real
Con el ciclo for se iterarán cada elemento del objeto para obtener lo que hay
dentro de cada propiedad y este pueda ser mostrado en las tarjetas creadas en el
HTML.

Figura 115. Ciclo for para obtención de las propiedades

85
Función que contiene una condición que estará evaluando los datos captados para
poder mostrarlos en las tarjetas, dichos datos solo mostrarán dos dígitos después
del punto decimal si es que existe un punto decimal.

Figura 116. Función para evaluación de datos registrados

Pruebas.
Para la realización de las pruebas necesarias se contó con las tecnologías de
Netlify y GitHub, debido a que los comandos que se utilizaron en la consola de
Visual Studio Code realizaron los cambios y estos fueron mostrados de manera
instantánea en el enlace creado por Netlify. Esto ayudo para visualizar la interfaz
dentro de los diferentes dispositivos y los datos estuvieran colocados en las
tarjetas correspondientes.

Para esto se creo una cuenta en las dos herramientas antes mencionadas,
primero en GitHub para posteriormente acceder a Netlify y estas estuvieran
ligadas.

86
En la cuenta creada en GitHub se procedió a crear un repositorio que contiene el
proyecto de la estación meteorológica.

Figura 117. Repositorio en GitHub

Muestra el porcentaje de los lenguajes utilizados en el desarrollo del proyecto.

Figura 118. Lenguajes utilizados en el proyecto

En la tecnología de Netlify se subió el proyecto para poder hacer las pruebas

pertinentes. En automático con genera un enlace, se tiene la libertad de cambiar el
nombre a dicho enlace para que pueda ser reconocido de una mejor manera.

Figura 119. Proyecto en Netlify para pruebas posteriores

87
Comandos utilizados en la consola de Visual Studio Code para modificaciones
realizadas al proyecto:

git add . Comando para agregar los cambios realizados en los componentes del
proyecto, ya sean en HTML, CSS o JavaScript.

Figura 120. Comando git add .

git commit -m ‘nombre identificador’ Comando para identificar el cambio

realizado a través de la asignación de un nombre.

Figura 121. Comando git commit -m ‘nombre’

git push Comando para subir la modificación al repositorio que se encuentra en

GitHub.

Figura 122. Comando git push

88
Capítulo 4.
Resultados

89
De acuerdo a la maquetación establecida para la realización del proyecto, se
muestran los resultados obtenidos en la conclusión del diseño y desarrollo del
sistema web de la estación meteorológica ubicada en el Instituto Tecnológico de
Cuautla.
Presentación del sistema web en monitores:
Página principal

Figura 123. Página principal en monitores

90
 Página de los datos meteorológicos

Figura 124. Página de los datos meteorológicos

91
Presentación del sistema web en tabletas:
Página principal

Figura 125. Página principal en tableta

92
 Página de los datos meteorológicos en tableta

Figura 126. Página de los datos meteorológicos en tableta

93
Presentación del sistema web en celulares:
Página principal Página de los datos meteorológicos

Figura 127. Página pincipal y página de dat. Meteorológicos en celular

Se visualiza una parte en dispositivos móviles, se requiere desplazamiento en la

pantalla para poder visualizar el resto.

94
 Capítulo 5
Conclusiones

95
5.1 Conclusiones del proyecto.
Al concluir con el proyecto del diseño de una interfaz web para la visualización de
información, del registro de los datos de una estación meteorológica
semiautomática portátil elaborado para el Instituto Tecnológico de Cuautla se logra
llegar a distintas conclusiones.

Se concluyó con el objetivo principal que consistía en desarrollar una herramienta

web de apoyo para la información recolectada por la estación meteorológica, para
el personal de electrónica del Instituto Tecnológico de Cuautla, como
consecuencia se obtuvo un sistema web que cuenta con un contenido temático
que está enfocado especialmente a mostrar datos meteorológicos que son
recabados por la estación meteorológica portátil que se encuentra ubicada en la
institución educativa anteriormente mencionada.

También se busca el poder llegar a proporcionar esta información meteorológica al

público en general de una manera más atractiva y básica para que se pueda
comprender y esclarecer las posibles causas que afectan el clima de la región.

De acuerdo al proyecto desarrollado, se concluye que sin duda el apoyarse de los

sistemas web de información hoy en día es de gran ayuda, ya que el contar con
esta herramienta que favorece a obtener información precisa y confiable de la
estación meteorológica para un estudio de la atmosfera, auxilia al rendimiento del
personal de electrónica de la institución.

El avance de la tecnología hace posible que el mundo cuente con herramientas

disponibles para desarrollar diferentes trabajos, que facilitan la elaboración y la
comprensión del mismo, los cuales reducen en grandes medidas los costos de
tiempo y económicos.

96
5.2 Recomendaciones.
Las recomendaciones dadas al Instituto Tecnológico de Cuautla para el buen
funcionamiento del sistema web con almacenamiento de información
meteorológica son las siguientes:

• Mantenimiento al software y al hardware.

• Mantenimiento de la base de datos.
• Actualización de sensores más actuales.

Recomendaciones para mejorar el proyecto realizado acerca de la estación

meteorológica son las siguientes:

• Agregar la operación de generar reportes de comparación de los datos

recabados para un mejor estudio de la atmosfera.
• Agregar la función de estudio de datos para poder almacenar la información
relevante y llevar una cierta bitácora.
• Contar con un servidor local que sea propio para proyectos relacionados a
la estación meteorológica.

97
5.3 Experiencia personal profesional adquirida.
En un mundo altamente globalizado, las exigencias en el ámbito laboral se ha
crecentan, por un lado, el estar en un entorno laboral real, hace que se adquieran
habilidades y nuevos conocimientos. Al desarrollar un proyecto donde se tiene el
compromiso y se sabe de antemano que se debe hacer lo mejor posible para que
el personal y, en general la institución educativa, queden satisfechos, hace que
logre sacar lo mejor de sí mismo y por ende ser más responsables.

Al final de haber desarrollo el proyecto y cumplido los resultados exitosamente, me

queda mencionar que yo como estudiante obtuve nuevas experiencias que me
ayudaran en mi crecimiento profesional, así mismo tuve la oportunidad de aplicar y
poner a prueba los conocimientos y habilidades aprendidas durante mi carrera en
ingeniería en sistemas computacionales, como resultado se entregó un sistema
que ayudara a resolver en cierta medida un problema o que les facilitará algún
proceso importante para el Instituto Tecnológico de Cuautla en el área de
electrónica.

Por consecuencia se adquirieron conocimientos en las tecnologías que se

utilizaron para la maquetación y desarrollo del proyecto, por mencionar algunas
como las bases de datos NoSQL (Firebase), CSS, JavaScript y GitHub, resaltando
que previamente se tenía un conocimiento sobre estas tecnologías, sin en cambio
no lo suficiente como para poder llevar a cabo de manera exitosa el sistema web
de la estación meteorológica semiautomática portátil.

98
 Capítulo 6
Competencias
Desarrolladas

99
6.1 Competencias Desarrolladas.

Durante la elaboración de la residencia profesional que se aplicó, se desarrollaron

las siguientes competencias:

• Aplicación de conocimientos de cultura organizacional y habilidades para el

desarrollo del proyecto.
• Aprendizaje de los procesos que se tienen que llevar a cabo en la
recolección de información de los diferentes sensores con los que cuenta la
estación para la actualización meteorológica.
• Aplicación de conocimiento en programación web para la elaboración de la
interfaz.
• Desarrollo de capacidad de análisis, de síntesis, de organización, de
planificación, etc. Para un buen desarrollo del proyecto.
• Aplicación de conocimiento en la gestión y elaboración de base de datos
NoSQL para la recolección de datos meteorológicos.
• Adquisición de capacidad para desarrollar la arquitectura informática
centralizadas integrando hardware y software.
• Desarrollo de la capacidad para analizar y valorar el impacto social y
medioambiental de las soluciones técnicas.

100
Fuentes de información

Firebase Realtime Database. (s/f). Firebase. Recuperado el 7 de enero de 2023,

de https://firebase.google.com/products/realtime-database?hl=es-419

-solutions.com. (2022, diciembre 21). ¿Qué es Firebase? ¿Qué ventajas ofrece en

2023 a nuestras apps? NTS SEIDOR; NTS Solutions. https://www.nts-
solutions.com/blog/firebase-que-es.html

HTML: Lenguaje de etiquetas de hipertexto. (s/f). Mozilla.org. Recuperado el 9 de

enero de 2023, de https://developer.mozilla.org/es/docs/Web/HTML

¿Cuáles son los pros y los contras de HTML? (s/f). Quora. Recuperado el 9 de
enero de 2023, de https://es.quora.com/Cu%C3%A1les-son-los-pros-y-los-contras-
de-HTML

¿Qué es CSS? (s/f). Lenguajecss.com. Recuperado el 9 de enero de 2023, de

https://lenguajecss.com/css/introduccion/que-es-css/

Greyrat, R. (s/f). Ventajas y desventajas de CSS. Barcelonageeks.com.

Recuperado el 9 de enero de 2023, de https://barcelonageeks.com/ventajas-y-
desventajas-de-css/

(S/f). Amazon.com. Recuperado el 9 de enero de 2023, de

https://aws.amazon.com/es/what-is/javascript/

Zubikarai, S. (2021, marzo 15). Ventajas y Desventajas de JavaScript.

freecodecamp.org. https://www.freecodecamp.org/espanol/news/ventajas-y-
desventajas-de-javascript/

101
Documentation for Visual Studio Code. (s/f). Visualstudio.com. Recuperado el 9 de
enero de 2023, de https://code.visualstudio.com/docs

Qué es Visual Studio Code y qué ventajas ofrece. (2022, 22 de julio).

Openwebinars.net. https://openwebinars.net/blog/que-es-visual-studio-code-y-que-
ventajas-ofrece/

Fernández, Y. (2019, octubre 30). Qué es Github y qué es lo que le ofrece a los
desarrolladores. Xataka.com; Xataka. https://www.xataka.com/basics/que-github-
que-que-le-ofrece-a-desarrolladores

Quintana, E. (s/f). 10 razones para usar Github.

Educación virtual: ¿Qué es y cómo funciona Lucidchart? (s/f). Gcfglobal.org.

Recuperado el 17 de febrero de 2023, de https://edu.gcfglobal.org/es/educacion-
virtual/que-es-y-como-funciona-lucidchart/1/

Lucid para la Educación. (s/f). Lucidchart.com. Recuperado el 17 de febrero de

2023, de https://www.lucidchart.com/pages/es/casodeuso/educacion

Sas, E.-D. N. (s/f). Adquiere Lucidchart en Colombia. E-dea.co. Recuperado el 17

de febrero de 2023, de https://www.e-dea.co/lucidchart-colombia

Ajithkumarkdas, A. (2022, marzo 1). Netlify. Devopedia; Devopedia Foundation.

https://devopedia.org/netlify

Clark, J. (2020, octubre 2). Netlify vs Heroku. Back4App Blog; Low-code backend
to build modern apps. https://blog.back4app.com/es/netlify-vs-heroku-cuales-son-
las-diferencias/

102
Varty, J. (2020, agosto 4). What is Netlify and What are its Benefits? Agility CMS.
https://agilitycms.com/resources/posts/what-is-netlify-and-why-should-you-care-as-
an-editor

Aguayo, P. (2014, noviembre 20). ¿Qué es Arduino? Arduino.cl - Compra tu

Arduino en Línea; Arduino.cl. https://arduino.cl/que-es-arduino/

SensorGO, M. K. T. (2020, septiembre 15). Estaciones Meteorológicas. ¿Qué son

y cómo funcionan? SensorGO. https://sensorgo.mx/estaciones-meteologicas/

Significado de Web. (2016, junio 21). Significados.

https://www.significados.com/web/

(S/f). Com.mx. Recuperado el 10 de enero de 2023, de

https://www.digikey.com.mx/es/articles/how-to-select-and-use-the-right-esp32-wi-fi-
bluetooth-
module#:~:text=El%20m%C3%B3dulo%20ESP32%20es%20una,para%20conecta
rse%20con%20varios%20perif%C3%A9ricos.

García, I. J. B. (s/f). Backend y Frontend, ¿Qué es y cómo funcionan en la

programación? Servnet.mx. Recuperado el 10 de enero de 2023, de
https://www.servnet.mx/blog/backend-y-frontend-partes-fundamentales-de-la-
programacion-de-una-aplicacion-web

Página Web - Concepto, tipos y para qué sirve. (s/f). Concepto. Recuperado el 10
de enero de 2023, de https://concepto.de/pagina-web/

León, L. (2022, junio 8). Sitios web: tipos, ejemplos y cómo crearlos fácilmente.
Blog del E-commerce. https://www.tiendanube.com/blog/mx/sitios-web/

103
(S/f). Amazon.com. Recuperado el 19 de febrero de 2023, de
https://aws.amazon.com/es/what-is/web-application/

¿Qué es NoSQL? (s/f). Oracle.com. Recuperado el 10 de enero de 2023, de

https://www.oracle.com/mx/database/nosql/what-is-nosql/

¿Qué es una base de datos? (s/f). Oracle.com. Recuperado el 10 de enero de

2023, de https://www.oracle.com/mx/database/what-is-database/

Front End Developer: ¿cuáles son sus funciones y salidas? (2021, octubre 22).
Edix España. https://www.edix.com/es/instituto/front-end-developer/

104
Anexos
Conceptos Teóricos
Estación Meteorológica
La estación meteorológica es el dispositivo donde se recopilan los datos de
medición de las diferentes variables que influyen en los fenómenos atmosféricos y
el clima de determinada región.

Modulo ESP32
El módulo ESP32 es una solución de Wi-Fi/Bluetooth todo en uno, integrada y
certificada que proporciona no solo la radio inalámbrica, sino también un
procesador integrado con interfaces para conectarse con varios periféricos.

Arduino
Arduino es una plataforma de desarrollo basada en una placa electrónica de
hardware libre que incorpora un microcontrolador re-programable y una serie de
pines hembra. Estos permiten establecer conexiones entre el microcontrolador y
los diferentes sensores y actuadores de una manera muy sencilla (principalmente
con cables dupont).

Web
La web es el diminutivo de world wide web o www cuyas tecnologías para su
funcionamiento (HTML, URL, HTTP) fueron desarrolladas en el año 1990 por Tim
Berners Lee.

Página Web
Se conoce como página Web, página electrónica o página digital a un documento
digital de carácter multimediático (es decir, capaz de incluir audio, video, texto y
sus combinaciones), adaptado a los estándares de la World Wide Web (WWW) y a
la que se puede acceder a través de un navegador Web y una conexión activa a
Internet. Se trata del formato básico de contenidos en la red.

105
Sitio Web
Un sitio web es un espacio virtual que contiene toda la información que una
persona o empresa quiere difundir a través de internet. Los sitios web están
compuestos por páginas que suelen estar enlazadas a un menú general y su
contenido gira en torno a un tema central.

Aplicación Web
Una aplicación web es un software que se ejecuta en el navegador web. Las
empresas tienen que intercambiar información y proporcionar servicios de forma
remota. Utilizan aplicaciones web para comunicarse con los clientes cuando lo
necesiten y de una forma segura. Las funciones más comunes de los sitios web,
como los carros de compra, la búsqueda y el filtrado de productos, la mensajería
instantánea y los canales de noticias de las redes sociales, tienen el mismo diseño
que las aplicaciones web. Le permiten acceder a funcionalidades complejas sin la
necesidad de instalar o configurar un software.

Base de datos
Una base de datos es una recopilación organizada de información o datos
estructurados, que normalmente se almacena de forma electrónica en un sistema
informático. Normalmente, una base de datos está controlada por un sistema de
gestión de bases de datos (DBMS). En conjunto, los datos y el DBMS, junto con
las aplicaciones asociadas a ellos, reciben el nombre de sistema de bases de
datos, abreviado normalmente a simplemente base de datos.

Base de datos NoSQL

El término "NoSQL" se refiere a tipos de bases de datos no relacionales que
almacenan datos en un formato distinto a las tablas relacionales. Sin embargo, las
bases de datos NoSQL se pueden consultar utilizando API de lenguaje natural,
lenguajes de consulta estructurados declarativos y lenguajes de consulta mediante
ejemplo, por lo que también se les llama bases de datos "no solo SQL".

106
Frontend
El frontend es la parte del desarrollo web que se dedica a la parte frontal de un
sitio web, en pocas palabras del diseño de un sitio web, desde la estructura del
sitio hasta los estilos como colores, fondos, tamaños hasta llegar a las
animaciones y efectos.
Es esa parte de la página con la que interaccionan los usuarios de la misma, es
todo el código que se ejecuta en el navegador de un usuario, al que se le
denomina una aplicación cliente, es decir, todo lo que el visitante ve y experimenta
de forma directa.

Frontend Developer.
Un desarrollador frontend es el programador que se encarga de que una web sea
atractiva para el usuario y, al mismo tiempo, funcione correctamente.

107