Info TEc
Info TEc
Info TEc
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.
1.1 Introducción.................................................................................................. 7
1.5 Justificación................................................................................................ 13
Capítulo 3. Desarrollo.............................................................................................. 28
3.2 Act. 2. Conexión del módulo ESP32 a la base de datos en la nube ............ 32
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.
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
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.
8
1.2.3 Organigrama de la empresa
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.
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.
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
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.
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.
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.
14
Capítulo 2.
Marco Teórico
15
2.1 Tecnologías
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.
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
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).
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
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:
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
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.
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.
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).
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
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.
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
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.
25
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.
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.
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
30
Figura 16. Árbol con sus nodos dentro
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.
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.
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.
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.
34
Figura 24. Página de datos en monitor
35
Maquetación para Celular.
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.
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>
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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>.
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.
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ú.
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.
58
Tanto a la clase Objetivo como a las etiquetas que contiene como la etiqueta <h2>
y etiqueta <p> se le asignaron nuevos estilos.
A la clase Objetivo como a las etiquetas que contiene como la etiqueta <h2> y
etiqueta <p> se le asignaron nuevos estilos.
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.
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.
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.
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>.
63
En la clase checkbtm y menu-icon se definieron los estilos y, se le asigno dio una
transición a un id.
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.
65
En la clase de datosAside se asignaron nuevos estilos y cabe mencionar que de
igual manera se hizo en la etiqueta <h2>.
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
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.
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>.
En el reloj que se utilizó se le asignaron los estilos a la clase y por ende a las
etiquetas que esta clase contiene.
69
Se le dieron estilos a la etiqueta <header> y a unas clases que se encuentran en
el header.
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.
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.
71
La clase container tiene las tarjetas a utiliza, y estas tarjetas tienen una clase card,
se les asignaron estilos a las respectivas clases.
72
Se asignaron estilos en específico a las siguientes clases: clase card-title y a la
clase card-text
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.
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>.
74
Se le asignaron estilos e la clase dat, contiene una lista desordenada así que a
sus elementos se le asignaron nuevos estilos,
75
En las clases tecB, tecC, chechbtn y menu-icon se le asignaron nuevos estilos
para la visualización en la tableta.
En la clase logoTec se dieron nuevos estilos a las etiquetas que contiene, las
etiquetas son <ul> y sus elementos <li>.
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>
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.
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.
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.
79
Se asignaron estilos a los elementos que contiene la clase logo-header como lo
son la etiqueta <h1> y la etiqueta <img>.
80
Se asignaron estilos a los elementos que contiene la clase logoTec, en específico
a la etiqueta <img> y la etiqueta <ul>.
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>.
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>.
Se le signo un efecto hover a la clase card y se les dieron estilos a las clases,
card-body, container2 y container3.
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.
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.
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.
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.
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.
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.
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.
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
90
Página de los datos meteorológicos
91
Presentación del sistema web en tabletas:
Página principal
92
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
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.
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:
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.
98
Capítulo 6
Competencias
Desarrolladas
99
6.1 Competencias Desarrolladas.
100
Fuentes de información
¿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
101
Documentation for Visual Studio Code. (s/f). Visualstudio.com. Recuperado el 9 de
enero de 2023, de https://code.visualstudio.com/docs
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
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
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/
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.
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