TFG_ELMA_GALLARDO_SOTOS

Matemáticas Aplicada

•

Escuela Universidad Nacional

angierocionaicipagomez2004

20/2/2024

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Matemáticas Aplicada

19.892 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Universidad Politécnica
de Madrid
Escuela Técnica Superior de
Ingenieros Informáticos
Grado en Ingeniería Informática
Trabajo Fin de Grado
Las Matemáticas en la Arquitectura 1
Autor: Elma Gallardo Sotos
Tutor(a): Susana Cubillo Villanueva
Madrid, junio 2022
Este Trabajo Fin de Grado se ha depositado en la ETSI Informáticos de la
Universidad Politécnica de Madrid para su defensa.
Trabajo Fin de Grado
Grado en Ingeniería Informática
Título: Las Matemáticas en la Arquitectura 1
Abril 2022
Autor: Elma Gallardo Sotos

Tutor:
Susana Cubillo Villanueva
Departamento de Matemática Aplicada a las TIC
ETSI Informáticos
Universidad Politécnica de Madrid

i
Resumen
A lo largo de la historia, las matemáticas han tenido un papel importante en el
desarrollo de la arquitectura, en donde aparecen desde elementos tan simples
como las medidas, hasta formas geométricas.
Le Corbusier afirmó que “las matemáticas están en el corazón de la arquitectura”
[1]. Las primeras referencias del uso de las matemáticas datan del 3000 antes
de Cristo, en Egipto y Babilonia [2]. En el caso de la arquitectura, hace cinco
mil años, se construyó “Stonehenge” (Ilustración 1), un conjunto de piedras
coronadas por dinteles, distribuidas en cuatro circunferencias concéntricas [3].
El que las primeras manifestaciones de ambas disciplinas daten de la misma
época, suponen en cierto modo un apoyo a la sentencia de Le Corbusier.

Ilustración 1: Stonehenge
Cada vez, los arquitectos proponen problemas más complejos que requieren de
la investigación de matemáticos para la búsqueda de posibles soluciones [1].
Por otra parte, en la actualidad la arquitectura se ayuda en muchos casos de la
tecnología, como es el caso de la arquitecta Zaha Hadid que se apoyaba en los
ordenadores para el diseño de sus obras. Asimismo, las matemáticas han
ayudado a la sostenibilidad de los edificios [4] [5].
El principal objetivo del trabajo es el estudio de los elementos matemáticos que
aparecen en el mundo de la arquitectura. Para ello, se centra en algunas de las
obras arquitectónicas más relevantes, y sus autores. Dado que un estudio de
las obras de todos los tiempos podría resultar excesivamente amplio y complejo,
se ha preferido limitar el trabajo a obras anteriores a la Edad Media.
Después de escoger las obras arquitectónicas, se considerarán su historia y los
elementos que aparecen en la misma, así como sus autores. Todo ello, se
recogerá en el diseño y construcción de una página web.
En conclusión, este TFG tiene como finalidad, por una parte, el estudio de la
presencia de elementos matemáticos en algunas obras arquitectónicas, y por
otra, el diseño de una página web con la información obtenida.

ii
Abstract
Along the history, mathematics has played an important role in the development
of architecture, from elements as simple as measures to geometric shapes.
Le Corbusier affirm that "mathematics is at the heart of architecture" [1]. The
first references to the use of mathematics date back to 3000 BC, in Egypt and
Babylon [2]. In the case of architecture, five thousand years ago, “Stonehenge”
(Illustration 1) was built, a set of stones crowned by lintels, distributed in four
concentric circles [3]. The fact that the first manifestations of both disciplines
date from the same period, supposes in a certain way a support to the sentence
of Le Corbusier.

Illustration 1: Stonehenge
Every time, architects propose more complex problems that require the
investigation of mathematicians to search for possible solutions [1].
On the other hand, today architecture is helped in many cases by technology,
as is the case of the architect Zaha Hadid who supported on computers to
design her works. Likewise, mathematics helps the sustainability of buildings
[4] [5].
The main objective of the work is the study of the mathematical elements that
appear in the world of architecture. To do this, it focuses on some of the most
relevant architectural works, and their authors. Since a study of the works of
all times could be excessively broad and complex, it has been preferred to limit
the work to works prior to the Middle Ages.
After choosing the architectural works, their history and the elements that
appear in it, as well as their authors, will be considered. All this will be
collected in the design and construction of a web page.
In conclusion, this TFG has the purpose, on the one hand, to study the
presence of mathematical elements in some architectural works, and on the
other, to design a web page with the information obtained.

iii
Tabla de contenido
1 Introducción ......................................................................................1
1.1 Objetivos ............................................................................................ 2
1.2 Planificación ....................................................................................... 2
1.3 Estructura de la memoria ................................................................... 2
2 Alcance del proyecto ..........................................................................4
3 Tecnologías empleadas ......................................................................5
3.1 Microsoft Word ................................................................................... 5
3.2 Microsoft Power Point ......................................................................... 5
3.3 Google ................................................................................................ 5
3.4 Angular .............................................................................................. 5
3.5 HTML5 ............................................................................................... 5
3.6 TypeScript .......................................................................................... 6
3.7 CSS .................................................................................................... 6
3.8 Visual Studio Code ............................................................................. 6
3.9 GIMP .................................................................................................. 6
4 Desarrollo ..........................................................................................7
4.1 Metodología de búsqueda ................................................................... 7
4.1.1 Obras arquitectónicas .................................................................. 7
4.1.2 Elementos matemáticos ............................................................. 19
4.2 Desarrollo página web ...................................................................... 35
4.2.1 Organización .............................................................................. 35
4.2.2 Componentes ............................................................................. 38
5 Resultados y conclusiones ............................................................... 97
6 Análisis de Impacto ......................................................................... 98
7 Bibliografía ...................................................................................... 99

iv
Índice de ilustraciones
Ilustración 1: Stonehenge ................................................................................ i
Ilustración 2: Diagrama de Gantt .................................................................... 2
Ilustración 3: Panteón de Roma ...................................................................... 8
Ilustración 4: Publio Elio Adriano.................................................................... 8
Ilustración 5: Muro de Adriano ....................................................................... 9
Ilustración 6: Ubicación de Santiponce ........................................................... 9
Ilustración 7: Ciudad de Sforzinda Ilustración 8: Bustode
Filarete ......................................................................................................... 10
Ilustración 9: Ciudad de Palmanova .............................................................. 10
Ilustración 10: Torre de Pisa ......................................................................... 11
Ilustración 11: Catedral de Pisa .................................................................... 12
Ilustración 12: Pintura de Buscheto .............................................................. 12
Ilustración 13: Gran mezquita de Samarra.................................................... 13
Ilustración 14: Pirámides de Guiza................................................................ 13
Ilustración 15: Estatua de Hemiunu ............................................................. 14
Ilustración 16: Acueducto de Segovia ............................................................ 14
Ilustración 17: Templo Kandariya Mahadeva ................................................. 15
Ilustración 18: Partenón de Atenas ............................................................... 16
Ilustración 19: Ruinas del Telesterion de Eleusis .......................................... 16
Ilustración 20: Templo de Apolo de Figalia .................................................... 16
Ilustración 21: Templo de Atenea Niké Ilustración 22: Vista Muro Largo
de Atenas ...................................................................................................... 17
Ilustración 23: Mapa Muros Largos ............................................................... 17
Ilustración 24: Estatua de Atenea en el Partenón Ilustración 25: Estatua de
Zeus en Olimpia ............................................................................................ 18
Ilustración 26: Baptisterio de San Juan ........................................................ 18
Ilustración 27: Muestra simetría bilateral ..................................................... 19
Ilustración 28: Muestra simetría radial ......................................................... 20
Ilustración 29: Muestra simetría de rotación ................................................. 20
Ilustración 30: Vista del frontón del Panteón ................................................. 21
Ilustración 31: Distancia entre dos puntos Ilustración 32: Distancia
entre dos puntos girada ................................................................................ 21
Ilustración 33: Muestra de isometría ............................................................. 22
Ilustración 34: Muestra de simetría radial..................................................... 22
Ilustración 35: Arcos de la torre de Pisa ......................................................... 23
Ilustración 36: Rombos de la torre de Pisa ...................................................... 24
Ilustración 37: Figura de un cilindro oblicuo Ilustración 38: Cilindro en
la torre de Pisa .............................................................................................. 24
Ilustración 39: Escalera de la torre de Pisa ................................................... 25
Ilustración 40: Cara frontal de la catedral de Pisa ......................................... 26
Ilustración 41: Vista de los rombos de la catedral de Pisa ............................. 26
Ilustración 42: Vista del trapecio de la catedral de Pisa ................................. 26
Ilustración 43: Tipos de espirales .................................................................. 27
Ilustración 44: Espiral logarítmica en la naturaleza ...................................... 28
Ilustración 45: Espiral de Arquímedes en la naturaleza ................................ 28
Ilustración 46: Muestra del uso de la espiral en el Minarete .......................... 29
Ilustración 47: Muestra simetría bilateral en la planta de la gran mezquita de
Samarra ........................................................................................................ 29
Ilustración 48: Elementos de una pirámide Ilustración 49: Pirámides según
el número de lados ........................................................................................ 30
Ilustración 50: Posición de las pirámides según la astronomía ...................... 30
Ilustración 51: Dovela ................................................................................... 31

v
Ilustración 52: Sillares del acueducto de Segovia .......................................... 31
Ilustración 53: Ejemplo de fractal ................................................................. 32
Ilustración 54: Fractales en la naturaleza: Girasol, hoja, romanesco y rayo .. 32
Ilustración 55: Escenas de los frontones del Partenón................................... 33
Ilustración 56: Frontón del Partenón en la actualidad ................................... 33
Ilustración 57: Plano del Baptisterio de San Juan ......................................... 34
Ilustración 58: Pirámide octogonal del Baptisterio de San Juan .................... 35
Ilustración 59: Vista de la organización ......................................................... 37
Ilustración 60: Contenedor "allS" .................................................................. 38
Ilustración 61: Css del contenedor "allS" ....................................................... 38
Ilustración 62: Sección de la cabecera ........................................................... 38
Ilustración 63: Figura individual ................................................................... 38
Ilustración 64: Css de una figura .................................................................. 38
Ilustración 65: Dos figuras alineadas horizontalmente .................................. 39
Ilustración 66: Css de dos figuras ................................................................. 39
Ilustración 67: Vista de la tercera sección ..................................................... 40
Ilustración 68: Vista del inicio de la página ................................................... 40
Ilustración 69: Muestra enlaces añadidos para el uso de Bootstrap .............. 41
Ilustración 70: Menú Ilustración 71: Menú con cursor ..... 41
Ilustración 72: Cabecera ............................................................................... 41
Ilustración 73: Pantalla de inicio ................................................................... 42
Ilustración 74: Botón con el cursor ............................................................... 42
Ilustración 75: Función random() .................................................................. 43
Ilustración 76: Línea temporal de Adriano..................................................... 44
Ilustración 77: Mención en el texto ............................................................... 44
Ilustración 78: Pantalla del muro de Adriano ................................................ 45
Ilustración 79: Pantalla del Panteón de Roma: Historia y cúpula .................. 46
Ilustración 80: Elementos matemáticos: Simetrías bilateral y radial.............. 47
Ilustración 81: Elementos matemáticos: Simetría de rotación y triángulo ..... 48
Ilustración 82: Pantalla del pueblo de Santiponce ......................................... 49
Ilustración 83: Pantalla de Filarete................................................................ 50
Ilustración 84: Pantalla de la ciudad de Sforzinda: Historia .......................... 51
Ilustración 85: Elementos matemáticos: Isometría y simetría ........................ 52
Ilustración 86: Pantalla de la torre de Pisa: Historia ...................................... 54
Ilustración 87: Elementos matemáticos: Arcos y rombos ............................... 55
Ilustración 88: Elementos matemáticos: Cilindro y escalera de caracol ......... 56
Ilustración 89: Pantalla de la catedralde Pisa: Historia ................................. 57
Ilustración 90: Elementos matemáticos: Arco y rombo .................................. 58
Ilustración 91: Elemento matemático: Trapecio ............................................. 59
Ilustración 92: Pantalla de la gran mezquita de Samarra: Historia ................ 60
Ilustración 93: Elementos matemáticos: Simetría bilateral y espiral .............. 61
Ilustración 94: Tipos de espirales .................................................................. 62
Ilustración 95: Espirales en la naturaleza ..................................................... 63
Ilustración 96: Pantalla pirámides de Guiza: Historia .................................... 65
Ilustración 97: Elementos matemáticos: Pirámide y astronomía .................... 66
Ilustración 98: Pantalla del acueducto de Segovia: Historia ........................... 67
Ilustración 99: Pantalla del acueducto de Segovia: Construcción y actualidad
..................................................................................................................... 68
Ilustración 100: Elemento matemático: Semicírculo ...................................... 69
Ilustración 101: Pantalla del templo: Historia, estructura y actualidad ......... 70
Ilustración 102: Elemento matemático: Fractal ............................................. 71
Ilustración 103: Pantalla del Partenón: Historia ............................................ 72
Ilustración 104: Pantalla del Partenón: Construcción .................................... 73
Ilustración 105: Elementos matemáticos: Pitágoras y triángulo..................... 74

vi
Ilustración 106: Pantalla baptisterio de San Juan: Historia .......................... 75
Ilustración 107: Elementos matemáticos: Octógono y pirámide octogonal ..... 76
Ilustración 108: Vista de la última sección .................................................... 77
Ilustración 109: Vista de las dos primeras secciones ..................................... 77
Ilustración 110: Método para añadir los objetos a la lista .............................. 78
Ilustración 111: Objeto Poliedro .................................................................... 78
Ilustración 112: Completar la tabla en HTML5 .............................................. 78
Ilustración 113: Vista de la tercera sección ................................................... 79
Ilustración 114: Vista de la primera parte ..................................................... 81
Ilustración 115: Vista de la segunda y tercera parte ...................................... 82
Ilustración 116: Vista de la cuarta parte ....................................................... 83
Ilustración 117: Vista de las dos últimas partes ............................................ 83
Ilustración 118: Script añadido para el uso de la librería MathJax ................ 84
Ilustración 119: Vista de la primera sección .................................................. 85
Ilustración 120: Vista de la segunda sección ................................................. 86
Ilustración 121: Vista de la cuarta sección .................................................... 87
Ilustración 122: Método para añadir los objetos a la lista .............................. 87
Ilustración 123: Objeto Poligono ................................................................... 88
Ilustración 124: Completar la tabla en HTML ................................................ 88
Ilustración 125: Vista de la tercera sección ................................................... 89
Ilustración 126: Vista primera parte ............................................................. 90
Ilustración 127: Vista segunda parte 1 .......................................................... 91
Ilustración 128: Vista segunda parte 2 .......................................................... 92
Ilustración 129: Vista tercera parte ............................................................... 92
Ilustración 130: Vista primera parte ............................................................. 93
Ilustración 131: Vista segunda y tercera parte .............................................. 94
Ilustración 132: Vista primera parte ............................................................. 95
Ilustración 133: Vista segunda y tercera parte .............................................. 96

1 Introducción
La arquitectura permite, mediante distintas técnicas, planear, diseñar y
construir multitud de ideas proyectadas por los humanos. Su principal objetivo
es satisfacer las necesidades, proporcionando valor al espacio. [6] [7]
Su origen se remonta a la prehistoria, pues el ser humano debía levantar su
propio refugio, caracterizándose, en un principio, por ser práctico y fácil de
trasladar, ya que las civilizaciones eran nómadas. Más tarde, cuando
comenzaron los asentamientos, se utilizaron materiales más pesados y
resistentes en su construcción. [6] [7]
Durante las distintas épocas surgieron muchos tipos de arquitecturas, en este
capítulo sólo se nombrarán tres de los más importantes, a los cuales pertenecen
las obras arquitectónicas descritas en este trabajo. Estos tres tipos son:
Arquitectura griega: Se caracteriza por el uso del dintel y elementos
decorativos. Los materiales de construcción más comunes eran la piedra
dedicada al exterior y el mármol para la creación de interiores. Es
descrita por ser una arquitectura monumental en la que sus
edificaciones siguen un canon y son fruto del trabajo en equipo. [6] [8]
Arquitectura romana: Destaca su dinamismo mediante la utilización de
los arcos, las bóvedas, las cúpulas y la superposición del arco y el dintel.
Los materiales más comunes fueron la piedra, el hormigón, el ladrillo o
la madera. Es mostrada como una arquitectura colosal, utilitaria,
práctica y funcional. Emplea el orden toscano, jónico y funcional. Los
romanos crearon nuevos elementos como el retrato en la escultura y el
relieve histórico, continuo y narrativo. [6] [8]
Arquitectura egipcia: Predomina el uso del muro, el pilar y la columna.
El material más común era la piedra. Es representada como una
arquitectura horizontal, arquitrabada y monumental. [6] [8]
En cuanto a la funcionalidad también se distinguen tres tipos de arquitectura:
Arquitectura religiosa: Edificación y diseño de templos de oración, como
mezquitas, sinagogas, iglesias o santuarios.
Arquitectura militar: Construcción de obras y estructuras cuya finalidad
sea la defensa, como murallas, fortalezas o torres.
Arquitectura civil: Se basa en la construcción de edificaciones comunes,
como hospitales, escuelas, casas, tiendas o calles. Es decir, edificios
cuyas funcionalidades son las actividades cotidianas del ser humano.
En conclusión, la arquitectura se puede definir como un reflejo de las
necesidades, los valores y los intereses de las civilizaciones durante la historia.
Las matemáticas son una ciencia deductiva, que estudia las propiedades de los
entes abstractos, así como las relaciones existentes entre ellos, como son los
números, los signos y las figuras. Permiten al ser humano pensar de manera
lógica y desarrollar habilidades para resolver problemas y tomar decisiones. Las
matemáticas son una herramienta para entender el universo. [9] [10]
Su origen se remonta a tiempos de la prehistoria, en los que el ser humano
utilizó los dedos de sus manos para contar, lo que conllevó que los sistemas
numéricos suelan tener base decimal. En la actualidad, las matemáticas son
fundamentales en la cotidianidad. [11]

Existen distintas ramificaciones de las matemáticas, la primera en surgir fue la
geometría, que se encarga del estudio de las propiedades y medidas de las
figuras que se encuentran en el plano y en el espacio. [9]
En el año 820 a.C, el matemático persa Muhammad ibn-Musa introdujo el
álgebra, que se caracteriza por el uso de números, letras y signos para
determinar ejerciciosaritméticos. [9]
En la Antigua Grecia se formalizó la aritmética, puesto que su origen data de la
Edad de Piedra, que se vincula al estudio de los números y de los problemas
matemáticos descritos con ellos.
La última ramificación principal de las matemáticas fue la estadística, que se
encarga del estudio de procesos cuyo resultado se puede predecir y mediante el
análisis de estas observaciones obtener conclusiones que permitan tomar
decisiones de manera racional de acuerdo con ellas. [9] [12]
Finalmente, se puede decir que la arquitectura siempre se verá beneficiada con
el avance del ser humano en las matemáticas.
En este trabajo se pretende relacionar ambas ciencias con la ayuda de algunas
obras arquitectónicas creadas por el ser humano mediante el uso de ambas.
1.1 Objetivos
El objetivo principal será adquirir conocimientos sobre los elementos
matemáticos que se presentan en el mundo de la arquitectura.
El objetivo secundario será lograr el desarrollo de una página web sencilla y
práctica que permita conocer las obras arquitectónicas que contienen elementos
matemáticos.
1.2 Planificación
Respecto a la planificación, se han definido cinco tareas:
1. Búsqueda en bibliografía adecuada de obras arquitectónicas en las que
aparezcan elementos matemáticos.
2. Estudio de dichos elementos matemáticos y de los autores de las obras
arquitectónicas elegidas.
3. Desarrollo de la página web.
4. Preparación de la memoria.
5. Preparación de la presentación.
Con el fin de exponer el tiempo de realización de dichas tareas se ha realizado
un Diagrama de Gantt.

Ilustración 2: Diagrama de Gantt
1.3 Estructura de la memoria
Está estructurada en siete capítulos de los que se va a comentar su contenido.
Junio
Semana 8 Semana 10 Semana 11 Semana 12 Semana 13Semana 9
Mayo
Semana 14Semana 1 Semana 2 Semana 3 Semana 4 Semana 6 Semana 7
Tarea 1
Tarea 2
Tarea 3
Tarea 4
Tarea 5
Semana 5
AbrilMarzo

En el primer capítulo se introduce la motivación, objetivos y planificación del
trabajo.
El siguiente capítulo define el alcance del proyecto, proponiendo unos objetivos
esperados y declarando la influencia que se pretende obtener con su realización.
También fija los límites del proyecto.
El tercer capítulo incluye un análisis de estudios existentes que hablan de la
utilización de las matemáticas en edificaciones.
El siguiente capítulo se centra en exponer las tecnologías que se van a emplear
en el desarrollo del trabajo y el trabajo previo para su utilización. Incluyendo
una breve descripción de cada una de ellas.
El capítulo cinco se divide en dos subcapítulos. Así mismo, el primero,
denominado metodología de búsqueda, se divide en otros dos capítulos:
Obras arquitectónicas: Dividido en cada una de las obras, expone la
dificultad en la búsqueda de información, una breve descripción de la
obra, la información que contiene la página y distribución de
componentes que se ha seguido.
Elementos matemáticos: Este capítulo también se encuentra dividido en
todas las obras. Muestra los elementos presentes en la obra
proporcionando una descripción, que normalmente coincide con la
información que contiene la página web.
El segundo subcapítulo designado desarrollo página web expone
detalladamente la elaboración de la página web.
El capítulo seis confronta el resultado obtenido con los objetivos definidos.
Asimismo, este apartado contiene las conclusiones obtenidas sobre la
realización de este trabajo.
El capítulo siete realiza un análisis del impacto de este trabajo. En el último
capítulo se encuentra la bibliografía contemplada.

2 Alcance del proyecto
La principal finalidad de este TFG es proporcionar conocimientos sobre los
elementos matemáticos presentes en el mundo de la arquitectura. Para ello, se
pretende realizar una página web que contenga información útil y legible. La
página debe tener un diseño atractivo y una correcta organización.
Esta página debe ofrecer al menos diez ejemplos de obras arquitectónicas en las
que aparezcan uno o más elementos matemáticos, permitiendo navegar por
ellas mediante un menú desplegable. Cada obra debe contener su historia,
información relativa a su autor o autores, imágenes y breves definiciones de
datos que aparezcan.

3 Tecnologías empleadas
En este capítulo se van a describir las tecnologías utilizadas para el desarrollo
de este proyecto. Estas tecnologías son:
3.1 Microsoft Word
En cuanto a la elaboración de la memoria se ha utilizado Microsoft Word. Este
editor de texto me ha permitido redactar de forma sencilla y rápida la memoria.
Además, ha sido simple obtenerlo, puesto que la universidad lo proporciona con
la cuenta.
La herramienta más útil para el desarrollo ha sido la utilización estilos, lo que
permitía formatear y editar el texto.
3.2 Microsoft Power Point
Respecto el diseño de la presentación se ha usado Microsoft Power Point. Este
programa de presentaciones permite realizar elegantes y atractivas
presentaciones.
En este caso, también es proporcionado por la universidad con la cuenta.
3.3 Google
En mayor medida, para la búsqueda de información he utilizado artículos de
Google, a excepción de algunos libros o trabajos.
Con el buscador de Google ha sido altamente sencillo encontrar la información
necesaria en cada momento, debido a la gran cantidad que existe.
3.4 Angular
Referente a la página web, se ha utilizado Angular como framework para
desarrollar de forma más sencilla mediante componentes.
Angular es un framework destinado a la creación y al mantenimiento de
aplicaciones web desarrolladas en TypeScript, HTML y CSS.
Al comienzo del proyecto no se tenían demasiados conocimientos sobre el uso
de este framework, pero a causa de unas prácticas realizadas durante este
semestre se obtuvo experiencia sobre su uso y se decidió emplear en la
realización de la página web.
3.5 HTML5
HTML5 es una división del lenguaje báscio HTML. Este lenguaje permite
estructurar la página.
Inicialmente se intentó diseñar la página utilizando, solamente, HTML5. Más
tarde, se descubrió la existencia de la biblioteca denominada Bootstrap, lo que
permitía más fácilmente la realización de simples diseños y la organización de
los componentes.

3.6 TypeScript
TypeScript es un lenguaje de programación de código abierto. Este lenguaje es
un superconjunto de JavaScript, se podría decir, como su nombre indica, que
se trata de JavaScript pero añade tipos estáticos y objetos basados en clases.
En este caso, apenas se tuvo que utilizar este lenguaje. En los componentes que
no se ha empleado, las clases .ts que se crean por el framework Angular no se
han eliminado, se han decidido dejar por si hiciese falta su utilización en un
momento futuro o para añadir alguna funcionalidad final a la página.
3.7 CSS
CSS, Cascading Style Sheets, es un lenguaje de diseño gráfico para definir y
crear la presentación de, en este caso, la aplicación web.
A pesar del uso de Bootstrap, que permite mediante clases diseñar la página, se
ha utilizado CSS para definir el diseño de títulos y párrafos. En este archivo
también se han tenido que añadir el formato de algunas etiquetadas que usa la
biblioteca Bootstrap.
3.8 Visual Studio Code
Para la elaboración de la página web, es decir, para el uso del framework
Angular se ha utilizado Visual Studio Code.
Visual Studio Code es un editor de código que mediante la instalación de
extensiones permite que el uso de Angular, los distintos lenguajes y la visión
del código sea realmente cómodo.
3.9 GIMP
GIMP es un programa dedicado a la edición de imágenes. Se ha empleado para
dibujar los ejes de simetría, identificar elementos de figuras o para dibujar
dichas figuras, entre otros casos.
Este programa se había usado antes en otros proyectos. Por tanto, fue sencillo
encontrar las herramientas necesarias y obtener el resultado requerido.

4 DesarrolloEn este apartado se va a describir el desarrollo del trabajo, en el apartado 4.1
se indicará el proceso seguido para la búsqueda de la información necesaria
para la realización del proyecto. En los apartados 4.1.1 y 4.1.2 se expondrán
las obras arquitectónicas y los elementos matemáticos, respectivamente,
presentes en el trabajo. Finalmente, en el apartado 4.2 se mostrará el
procedimiento seguido para el desarrollo de la página web y el contenido de
cada una de las pantallas.
4.1 Metodología de búsqueda
En un inicio, se identificaron las obras que presentaban elementos matemáticos.
Para ello se visitaron numerosas páginas y se consultaron varios artículos y
trabajos redactados por expertos.
Cuando se eligieron las obras que se iban a exponer en este trabajo, se realizó
un sencillo diseño de la página web, principalmente para determinar la
distribución de sus elementos, tales como el menú, la información de la obra y
una discreta cabecera.
Posteriormente, se procedió a la recolección de información sobre la historia de
cada una ellas, de sus autores y los elementos matemáticos que empleaban. Al
no tener consciencia todavía de la distribución y el diseño de la página web, no
se podía predecir qué información era precisa. Por tanto, se optó por anotar la
información de cada obra y pasarla a la página web antes de comenzar con la
siguiente obra. Mediante este procedimiento previamente al completado de una
obra se podía realizar una búsqueda de información adicional.
Después de finalizar con la información de las obras se determinó mejorar el
diseño de la página web, proporcionándole un fondo e imágenes a las obras. Así
mismo, se mejoró la elaboración del menú.
4.1.1 Obras arquitectónicas
Respecto a las obras arquitectónicas, como se ha comentado en el anterior
apartado, fue la primera búsqueda que se realizó. Inicialmente, se presentaron
las obras que se han terminado proponiendo en el trabajo a excepción de la
Torre de Pisa, en su lugar se optó por la Alhambra de Granada, pero teniendo
en cuenta que en esta obra no aparecían elementos matemáticos en su
arquitectura sino en su decoración, en este caso mosaicos, se llevó a cabo otra
búsqueda que concluyó con su sustitución por la Torre de Pisa.
Necesariamente, se debe recalcar que las obras debían pertenecer al periodo
anterior al final de la Edad Media (1492 o 1453).
A continuación, se nombrarán las obras arquitectónicas y se describirán
brevemente. Adicionalmente se incluirán imágenes de cada una de ellas.
Referente a los elementos matemáticos que se presentan en las obras se
trataran en el siguiente apartado.
4.1.1.1 Panteón de Roma
En cuanto al Panteón de Roma (Ilustración 3), fue relativamente sencillo hallar
la información necesaria.

Ilustración 3: Panteón de Roma
Esta obra se encuentra en Italia y fue construida entre los años 118 y 125
después de Cristo sobre las ruinas de un antiguo Panteón. Su autor no se
conoce con seguridad, habitualmente se le atribuye su construcción a
Apolodoro de Damasco, un importante arquitecto e ingeniero sirio de la Antigua
Roma. Apolodoro construyó, a parte del Panteón, muchas edificaciones
encargadas por el emperador Trajano. [13] [14] [15]
En la página se ha descrito la historia y se ha destacado la cúpula, puesto que
está relacionada considerablemente con el elemento matemático, todo ello está
incluido en un mismo componente denominado panteón-roma.
Adicionalmente, se ha creado un componente para detallar quien mandó su
construcción, Adriano (Ilustración 4), designándose como adriano y accediendo
a él a través de un enlace marcado en el componente principal cuando es
nombrado. En el componente de Adriano, aparecen dos enlaces que permiten
la redirección a otros dos componentes, el primero cuando se menciona el
nombre del actual municipio situado en España en el que nació Adriano,
denominado Santiponce (Ilustración 5), en el que se describe brevemente su
historia. El segundo aparece cuando se refiere al Muro de Adriano (Ilustración
6) como una de sus grandes construcciones, en este componente, que se
designa como muro-de-adriano, se señalan sus características generales y su
estado actual.

Ilustración 4: Publio Elio Adriano
9
Ilustración 5: Muro de Adriano
Ilustración 6: Ubicación de Santiponce
4.1.1.2 Sforzinda
La búsqueda de información sobre Sforzinda (Ilustración 7) fue más ardua,
puesto que se trata de una ciudad ideal que nunca se llegó a construir, por
tanto, la mayoría de los textos que hablaban de ella señalaban prácticamente
la misma documentación. A pesar de esto, existe un libro que habla sobre ella,

escrito por su autor, Filarete (Ilustración 8). Respecto a este libro, no se leyó al
completo, pero se consultaron algunos datos de él.

Ilustración 7: Ciudad de Sforzinda Ilustración 8: Busto de Filarete
En cuanto a la organización, se crearon dos componentes, el principal
denominado sforzinda, que define su historia y nombra una ciudad que se
inspiró su construcción en Sforzinda, esta se designa como Palmanova
(Ilustración 9). Esta ciudad, a pesar de construirse, no se ha utilizado debido a
que su fecha de construcción (1593) es posterior al fin de la Edad Media.

Ilustración 9: Ciudad de Palmanova
El segundo componente se accede mediante el enlace marcado en el nombre del
autor, Filarete. Este componente se llama filarete, y en él se describe de forma
breve su biografía, teniendo así mismo un enlace al componente principal
cuando se hace referencia a su planteamiento de la ciudad de Sforzinda.
4.1.1.3 Torre de Pisa
Relativo a la localización de material sobre la Torre de Pisa (Ilustración 10) fue
sencillo, pues es una de las torres más famosas, por lo que existe una cantidad
considerable de artículos de los que adquirir los conocimientos necesarios.

Ilustración 10: Torre de Pisa
Esta obra se encuentra situada en la plaza del Duomo de Pisa, en la ciudad
homónima.
La Torre de Pisa fue una de las obras más interesantes al haber considerado
tantas formas distintas del uso de las matemáticas al intentar evitar que
siguiese inclinándose. Respecto al autor de la torre, se dice que el arquitecto
renegó de su autoría al considerarla un fracaso. A pesar de ello, el diseño, en
un principio, se le atribuyó a Guglielmo, pero una reciente excavación decretó
que fue Bonanno Pisano, un escultor italiano que mezclaba elementos del arte
bizantino y de la Antigüedad Clásica, quien realizó su diseño. [16]
Esta obra solo tiene un componente principal designado como torre-pisa. Este
componente describe la historia de la torre incluyendo todos o la gran mayoría
de los intentos de evitar la continua inclinación que sufría esta torre.
Inicialmente, a diferencia del resto de las obras, como se señalará en el apartado
de desarrollo de la página web con más detalle, no contenía un apartado de
elementos matemáticos, puesto que solo se describían las teorías del uso de las
matemáticas para frenar su inclinación. Más tarde, tras valorarlo, se decidió
introducir dicho apartado con elementos presentes en su diseño exterior.
4.1.1.4 Catedral de Pisa
La catedral de Pisa (Ilustración 11), entre otros motivos, debe su notoriedad a
su localización. Pues se encuentra junto a la Torre de Pisa, una de las obras
más características de Italia. Así mismo, su fama se relaciona con el gran valor
que tiene para la religión. Por estos aspectos, se pueden hallar numerosos
artículos que permiten indagar sobre la historia de esta obra. A pesar de ello,
desafortunadamente, posee una breve historia.

Ilustración 11: Catedral de Pisa
Como autor se conoce a Buscheto (Ilustración 12), del cual se sabe muy poco.
Hasta el momento se sospecha que esta fue su única obra. Su construcción
comenzó en el año 1064. [17]

Ilustración 12: Pintura de Buscheto
Para el diseño de esta obra se ha empleadoun único componente nombrado
catedral-de-pisa. En este componente se da una breve descripción de la historia
de su construcción.
4.1.1.5 Gran mezquita de Samarra
La gran mezquita de Samarra (Ilustración 13) llegó a ser la más grande del
mundo, por este motivo existe un fácil acceso a numerosos artículos que hablan
sobre ella.

Ilustración 13: Gran mezquita de Samarra
Esta obra se encuentra en Samarra, Irak. Fue encargada en el año 848 por el
califa al-Mutawakkil, finalizándose su construcción en el año 851,
perteneciendo ambos años al periodo posterior de Cristo. En referencia al autor,
no se muestran datos sobre quien la llevo a cabo. [18]
Para describir esta mezquita se ha hecho el uso de un componente denominado
gran-mezquita-de-samarra. En este componente se describe la historia de la
mezquita. En este caso, no se optó por la creación de componentes adicionales
para el autor y la localización de esta puesto que su autor conocido es quien la
encargo, no quien se ocupó de llevarla a cabo, por tanto, no se consideró
interesante su añadido. En cuanto a la localización, sucedió algo similar.
4.1.1.6 Pirámides de Guiza
En relación con las pirámides de Guiza (Ilustración 14) fue realmente sencillo
encontrar información de ellas, esto se debe a su construcción realizada hace
tantos años y a lo enormemente famosas que son.

Ilustración 14: Pirámides de Guiza
Las pirámides de Guiza se localizan en Guiza, Egipto. Se conoce que las obras
de su construcción iniciaron sobre el año 2500 antes de Cristo. Están
compuestas por tres pirámides mayores, Keops, Kefrén y Micerino, y tres
pirámides de un tamaño menor denominadas las pirámides de las reinas. En

cuanto a los autores, solo se conoce, aunque no con seguridad, el de la pirámide
de Keops, que fue Hemiunu (Ilustración 15). [19]

Ilustración 15: Estatua de Hemiunu
Esta obra se compone de un único componente, aunque se valoró la utilización
de un componente principal mediante el que se accediese a los demás
componentes. Estos contendrían la información relativa a cada una de las
pirámides, pero como dicha información después de todo no fue tan extensa se
optó por disponer de un único componente principal.
Este componente principal incluye datos sobre la historia de las pirámides,
nombrando algunas de las teorías de su construcción y su propósito. Repartidas
por secciones se proporciona un breve texto con información de cada una de
ellas, Keops, Kefren, Micerino y las pirámides de las reinas.
4.1.1.7 Acueducto de Segovia
El acueducto de Segovia (Ilustración 16) fue muy particular. A pesar de revisar
infinidad de artículos, no se llegaba a una conclusión certera si este usaba las
matemáticas. Muchos expertos relatan que sí, pero otros muchos afirman que
su construcción se debe al gran nivel de constructores romanos que existían.
Por tanto, hallar la información necesaria sobre la obra fue sencillo, en cambio,
documentarse sobre los elementos matemáticos fue más laborioso.

Ilustración 16: Acueducto de Segovia
Esta obra arquitectónica se encuentra situada en Segovia, España. Su
construcción data del siglo II. Esta fecha se determinó a partir de unas recientes

evidencias, por tanto, no se ha podido determinar quién fue el autor. A pesar de
esto, si se conocen tres posibles emperadores que mandaron su construcción:
Trajano, Adriano y Antonio Pío, en orden de reinados. [20] [21]
Para la exposición de esta obra se ha utilizado solo un componente principal
denominado acueducto-de-segovia. Este componente contiene la historia del
acueducto, planteando como primeramente se desconocía su fecha de
construcción y como fue conocida. Asimismo, se detalla su construcción.
Finalizando con una breve descripción de su estado actual.
4.1.1.8 Templo Kandariya Mahadeva
A pesar de ser el templo más grande y ornamentado del grupo de templos
medievales situados en Khajuraho en Madhya Pradesh, no fue nada simple
investigar sobre esta obra. Apenas existe información, obteniéndose de la
mayoría de los artículos la misma.
El templo de Kandariya Mahadeva (Ilustración 17), comentado anteriormente,
se localiza en Khajuraho en Madhya Pradesh, en el país de India. Su
construcción fue entre los años 1025 y 1050. El autor no es conocido, en cambio,
se conoce quién ordenó su construcción, el rey Vidyadhara. [22] [23]

Ilustración 17: Templo Kandariya Mahadeva
Esta obra se compone de un único componente principal nombrado templo-
kandariya. Este componente describe la historia de su construcción, la
estructura y el estado actual.
4.1.1.9 Partenón
Existe una gran cantidad de documentación sobre el Partenón de Atenas
(Ilustración 18). Pues es el símbolo de la ciudad homónima y es considerado el
templo griego más célebre del mundo.

Ilustración 18: Partenón de Atenas
El Partenón se encuentra en Atenas, Grecia. Su construcción se realizó entre
los años 447 y 432 antes de Cristo, y fue encargado por Pericles. Los arquitectos
que llevaron a cabo la edificación fueron Ictino, Calícrates y Fidias. [24]
Ictino fue un arquitecto griego que participó en tres obras determinantes: el
Partenon, el Telesterion de Eleusis (Ilustración 19) y el templo de Apolo de Figalia
(Ilustración 20). [25]

Ilustración 19: Ruinas del Telesterion de Eleusis

Ilustración 20: Templo de Apolo de Figalia

Del mismo modo, Calícatres se dedicó a la arquitectura construyendo distintos
edificios de la Acrópolis de Atenas. Entre ellos se encuentra el Partenón, el
templo de Atenea Niké (Ilustración 21), la muralla de la Acrópolis y una parte de
los Muros Largos que comunicaban Atenas con El Pireo (Ilustración 23). [26] [27]

Ilustración 21: Templo de Atenea Niké Ilustración 22: Vista Muro Largo de Atenas

Ilustración 23: Mapa Muros Largos
Fidias, en cambio, era un escultor griego. De sus trabajos destacan la estatua
de la diosa Atenea situada en el Partenón (Ilustración 24) y la estatua de Zeus
ubicada en Olimpia (Ilustración 25). Otras obras menos importantes son la
Atenea Promacos y la Atenea Lemnia, ambas instaladas en la Acrópolis de
Atenas. [28]

Ilustración 24: Estatua de Atenea en el Partenón Ilustración 25: Estatua de Zeus en Olimpia
Esta obra se compone de dos componentes, uno central denominado partenon.
Este componente proporciona datos sobre su historia y su construcción. A
partir de este, se conecta con otro componente que muestra algunas de las
obras de los autores, en concreto exhibe las obras descritas anteriormente.
4.1.1.10 Baptisterio de San Juan
La notoriedad del baptisterio de San Juan (Ilustración 26) se debe a su
localización, Florencia, una de las ciudades más importantes de Italia, y por el
gran valor de sus tres puertas de bronce. Como resultado, la búsqueda de
información relevante no fue compleja.

Ilustración 26: Baptisterio de San Juan
La petición de su construcción fue realizada por la reina de los Lombardos,
Teodolinda. En la actualidad, el autor de esta obra no se conoce. [29]
Esta obra está integrada por un único componente principal designado
baptisterio-de-san-juan. Este componente consta de una breve historia de su
construcción. A pesar de tener un solo componente, mediante él se accede a

otro componente, tipos-piramides, situado en la carpeta de las Pirámides de
Guiza.
4.1.2 Elementos matemáticos
Respecto a los elementos matemáticos se intentó que se presentarán distintos
elementos en cada obra, tratando que no se repitiesen, sin embargo, algunos se
presentan en la arquitectura con extremada frecuencia, por este motivo,
algunas veces ha sido realmente complicado conseguir diferentes elementos.
A pesar de ello, se tienen elementos como la isometría, distintos tipos de
simetría, el uso de la espiral o de la pirámide, entre otros. Todos ellos serán
descritos relacionándose con sus respectivasobras arquitectónicas en las que
se presentan.
4.1.2.1 Panteón de Roma
El Panteón de Roma presenta simetría, en concreto, tres tipos de simetría [30]
[31] [32]:
Simetría bilateral (Ilustración 27), que produce la división de un elemento
en lado izquierdo y lado derecho a lo largo del plano sagital. El plano
sagital se define como un plano perpendicular al suelo y en ángulo recto
que divide un cuerpo en dos mitades, que no necesariamente serán
idénticas.
Esta simetría se da al realizar un corte perpendicular a la puerta en la
planta del Panteón de Roma.

Ilustración 27: Muestra simetría bilateral
Simetría radial (Ilustración 28), que produce dos mitades idénticas del
elemento a lo largo de un eje central.
Esta simetría se da al realizar un corte en la estructura de la cúpula en
cualquier dirección, obteniéndose en el total de los casos dos mitades
especulares entre sí.

Ilustración 28: Muestra simetría radial
Simetría de rotación (Ilustración 29), que consiste en la repetición de un
elemento varias veces de forma regular hasta completar los 360 grados.
Esta simetría se da al observar la disposición de los arcos y pilares del
círculo central, que se repiten sistemáticamente durante el giro.

Ilustración 29: Muestra simetría de rotación
Además, se utiliza la figura del triángulo. Se define como un polígono de tres
lados, tres vértices y tres ángulos interiores. [33]
Este triángulo situado entre las columnas y el techo del templo se denomina
frontón (Ilustración 30). En la actualidad, es prácticamente liso, es decir, no
contiene ninguna escena de un mito a excepción de la inscripción: “Marcus
Agrippa, Lucii filius, taburete cónsul” “Fue construido por Marcus Agrippa, hijo
de Lucius, cónsul por tercera vez “. Sin embargo, antes del año 1625, cuando
se retiró la cubierta de bronce y las estatuas que contenía, no era liso.

Ilustración 30: Vista del frontón del Panteón
4.1.2.2 Sforzinda
La ciudad de Sforzinda presenta isometría y simetría, en concreto, simetría
radial.
La isometría señala que en dos espacios o figuras geométricas se conservan las
mismas distancias entre los puntos que la conforman. [34]
En el caso de la ciudad, si se gira, los elementos que la componen se
encontrarán situados en una posición distinta, pero siempre mantendrán sus
dimensiones y distancias (Ilustración 31 e Ilustración 32). De igual forma, si se
realiza una división del círculo exterior se obtienen dos mitades iguales
isométricas entre sí (Ilustración 33).

Ilustración 31: Distancia entre dos puntos Ilustración 32: Distancia entre dos puntos girada

Ilustración 33: Muestra de isometría
El siguiente elemento, simetría radial (Ilustración 34), es uno de los que se ha
comentado anteriormente que algunos se repetían. En este caso, se repite una
parte del cuerpo de la ciudad ocho veces alrededor del centro, lo que se conoce
como octomerismo. Si se corta la ciudad a través del centro se obtienen piezas
idénticas. [30] [31] [32]

Ilustración 34: Muestra de simetría radial
4.1.2.3 Torre de Pisa
Sobre la torre de Pisa se han teorizaron muchas hipótesis para conseguir
detener la continua inclinación que sufría.
En el primer intento, se optó por la construcción de nuevos niveles con un cierto
ángulo, esperando que contrarrestase la inclinación.
En otro intento, se propuso añadir 800 toneladas de plomo de contrapeso. Otro,
el más interesante, propuso el uso de métodos de estabilización que se pusieron
en práctica en las Islas Azores.
Previamente a conseguir frenar la inclinación, se llevaron a cabo dos propuestas
más, primero se retiraron las siete campanas situadas en el campanario,
después un grupo de alpinista intentaron anclar la torre con cables de acero
para contrarrestar la inclinación.

Finalmente, se eliminaron 70 toneladas de tierra de la zona inferior de la base,
lo que ocasiono que se consiguiese estabilizar. [35] [36]
En general, todas estas teorías o intentos han conllevado el uso y estudio de las
matemáticas para su realización.
Por otro lado, la torre presenta otros elementos matemáticos más visuales.
Estos son: arcos, rombos, cilindro y escalera de caracol.
Los arcos (Ilustración 35) de toda la estructura se aprovechan del
semicírculo, es decir, la mitad de un círculo. El círculo se define como
una figura geométrica a partir de una curva que mantiene siempre la
misma distancia a un punto central. Tiene distintas partes, entre ellas se
encuentra la circunferencia que hace referencia a la línea que rodea al
círculo. Por tanto, el círculo es todo lo que contiene la circunferencia.
Además, tiene un centro, un radio que une el centro con cualquier punto
de la circunferencia, un diámetro que pasa por el centro y conecta dos
puntos de la circunferencia y una cuerda, que es semejante al diámetro,
pero no pasa por el centro. [37]

Ilustración 35: Arcos de la torre de Pisa
El rombo pertenece al grupo de los polígonos, concretamente es un
paralelogramo con cuatro lados iguales y cuatro vértices. Cualquier
paralelogramo que tiene los cuatro lados iguales es un rombo. [38]
En este caso, el rombo solo aparece en el nivel inferior de la torre
(Ilustración 36).

Ilustración 36: Rombos de la torre de Pisa
El cilindro es un cuerpo geométrico formado por un rectángulo, que gira
sobre sí mismo con un cierto radio, y dos círculos, que se llamarán bases.
Existen dos tipos: rectangular, cuando el eje es perpendicular a las bases,
y oblicuo, en caso contrario. [39]
En el caso de la torre de Pisa, se trata de un cilindro oblicuo (Ilustración
37) debido a su inclinación. (Ilustración 38)

Ilustración 37: Figura de un cilindro oblicuo Ilustración 38: Cilindro en la torre de Pisa
La escalera de caracol (Ilustración 39), también denominada escalera
helicoidal, se construye alrededor de una barra vertical que sirve de eje a
la hélice que constituye la sucesión de escalones. Para su diseño se debe
determinar la altura de estos últimos y el ángulo de rotación. Destacan

gran cantidad de formas con las que se pueden construir: circulares,
cuadrangulares, entre otras. [40] [41] [42]

Ilustración 39: Escalera de la torre de Pisa
4.1.2.4 Catedral de Pisa
La catedral utiliza el mismo patrón de diseño descrito en la torre de Pisa. Es
decir, recurre al uso del arco y del rombo. Adicionalmente, presenta la
aplicación del trapecio en su construcción.
Los arcos parten de la utilización del semicírculo. El círculo es una figura
geométrica realizado con una curva que se mantiene siempre a la misma
distancia de un punto central. Tiene distintas partes, nombradas
anteriormente, la circunferencia que hace referencia a la línea que rodea
al círculo. Por tanto, el círculo es todo lo que contiene la circunferencia.
Además, tiene un centro, un radio que une el centro con cualquier punto
de la circunferencia, un diámetro que pasa por el centro y conecta dos
puntos de la circunferencia y una cuerda, que es semejante al diámetro,
pero este segmento no pasa por el centro. [37]
Estos arcos se pueden visualizar en todas sus caras, aunque con más
claridad en la cara principal (Ilustración 40) del edificio.

Ilustración 40: Cara frontal de la catedral de Pisa
Los rombos se usan principalmente la decoración de la cara delantera
(Ilustración 41), pero integrándose con la arquitectura. [38]

Ilustración 41: Vista de los rombos de la catedral de Pisa
El trapecio es un polígono que, particularmente, se corresponde con un
cuadrilátero con cuatro lados y cuatro vértices. De estos cuatro lados,
solo dos son paralelos. [43] [44]
La catedral de Pisa presenta un trapecio isósceles (Ilustración 42), pues
los dos lados que no son paralelos tienen la misma medida.

Ilustración 42: Vista del trapecio de lacatedral de Pisa

4.1.2.5 Gran mezquita de Samarra
La gran mezquita de Samarra presenta el uso de la espiral y simetría, más
específicamente, simetría bilateral.
La espiral se define como una curva plana que parte de un punto y cuya
curvatura va disminuyendo progresivamente a medida que aumenta su
distancia al punto de origen. [45] [46]
Existen distintos tipos de espirales (Ilustración 43) bidimensionales:

Ilustración 43: Tipos de espirales
Espiral de Arquímedes: Es la más común de imaginar. La curva se va
alejando del centro dejando, siempre, la misma distancia. Es descrita por
la ecuación: siendo a y b números. El primer valor controla el
desplazamiento en el eje X y el segundo la distancia que se deja entre
cada giro. [45] [46]
Espiral clotoide: El radio de la curva y la distancia al punto central son
inversamente proporcionales. Se puede decir que el radio en el punto es
infinito. Su fórmula es: , siendo el radio de la curva, s el arco
y C la constante de la espiral. [45] [46]
Espiral de Fermat o espiral parabólica: Es un caso singular de la espiral
de Arquímedes. Se puede ver como dos espirales de este tipo, causado
por contener, en su fórmula, una raíz cuadrada. Esto ocasiona que cada
supuesto tenga dos soluciones, una positiva y una negativa. La expresión
matemática que la define es: . [45] [46]
Espiral hiperbólica: Es la inversa a la espiral de Arquímedes. Comienza
con un radio sumamente grande (infinito) y disminuye hasta llegar al
punto central. La ecuación que la representa es: . [45] [46]
Espiral logarítmica: Aparece en la naturaleza frecuentemente. Parte del
centro, aumentando la distancia a la curva progresivamente. Es decir, el
radio aumenta en relación con los valores anteriores. Determinada por la
fórmula: . [45] [46]
La espiral más común que aparece en la naturaleza es la logarítmica. Esta está
presente en algunos moluscos, que un gran número de moluscos crecen con su
forma, en la representación de los huracanes, en las margaritas o la galaxia,

entre otros (Ilustración 44). La espiral de Arquímedes también aparece, aunque
con mucha menos frecuencia, es el caso de las telas de arañas (Ilustración 45).
[45] [47]

Ilustración 44: Espiral logarítmica en la naturaleza

Ilustración 45: Espiral de Arquímedes en la naturaleza
La espiral está relacionada con el símbolo de crecimiento, de movimiento o de
progreso. Por tanto, el uso de la espiral en la construcción del minarete
(Ilustración 46) de la mezquita pretende representar el crecimiento de la fe. [48]
[49]

Ilustración 46: Muestra del uso de la espiral en el Minarete
En cuanto a la simetría bilateral (Ilustración 47), definida anteriormente, si se
traza un corte por el eje norte-sur en el que se encuentra construida se
obtendrán dos mitades iguales entre sí. [30] [31] [32]

Ilustración 47: Muestra simetría bilateral en la planta de la gran mezquita de Samarra
4.1.2.6 Pirámides de Guiza
Las pirámides de Guiza presentan el uso de la pirámide, como su nombre indica,
y también se tuvo en cuenta en su construcción la astronomía.
La pirámide (Ilustración 48 e Ilustración 49) se define como una figura
tridimensional con una base, que es un polígono, y cuyos vértices se unen en
un único punto exterior [50] [51]. El uso de la pirámide se relacionó con la
asociación de la aparición y el resurgimiento de la vida en la que creían los
antiguos egipcios.

Ilustración 48: Elementos de una pirámide Ilustración 49: Pirámides según el número de lados
En cuanto a la astronomía, los lados de las tres principales pirámides de Guiza
se encuentran orientados astronómicamente de norte a sur y de este a oeste en
una pequeña fracción de grado. Muchos expertos intentaron explicar este hecho,
lo que llevó a la deducción que la disposición de estas era una representación
de la constelación de Orión (Ilustración 50) según la teoría de la correlación de
Orión. [52]

Ilustración 50: Posición de las pirámides según la astronomía
4.1.2.7 Acueducto de Segovia
El acueducto de Segovia basa su construcción en los arcos, estos se denominan
dovelas y están relacionadas con el semicírculo.
El círculo es una figura geométrica realizado con una curva que se mantiene
siempre a la misma distancia de un punto central. Tiene distintas partes, entre
ellas se encuentra la circunferencia que hace referencia a la línea que rodea al
círculo. Por tanto, el círculo es todo lo que contiene la circunferencia. Además,

tiene un centro, un radio que une el centro con cualquier punto de la
circunferencia, un diámetro que pasa por el centro y conecta dos puntos de la
circunferencia y una cuerda, que es semejante al diámetro, pero este segmento
no pasa por el centro. [37]
Los romanos construyeron las dovelas (Ilustración 51) del acueducto con sillares.
Estas se usan con mucha frecuencia en la arquitectura. Se caracterizan por
tener sus lados rectos, por lo que describen un polígono con un número
suficiente de lados como para asemejase lo suficiente a un semicírculo.

Ilustración 51: Dovela
Los sillares (Ilustración 52) son piedras labradas en forma de rectángulos que
se han usado en todo tipo de construcción [53]. El acueducto está edificado
completamente con ellos, que se mantienen a causa de un perfecto estudio de
las fuerzas de empuje entre los grandes bloques de piedra.

Ilustración 52: Sillares del acueducto de Segovia
4.1.2.8 Templo Kandariya Mahadeva
El templo tiene una estructura que se asemeja a un fractal, en el que los detalles
del templo se parecen a la construcción completa, transmitiendo el mensaje
sobre el infinito propio de la cosmología hinduista.
El fractal (Ilustración 53) se usa para designar objetos geométricos que tienen
una estructura irregular presentes en muchos comportamientos y formas de la

naturaleza. Sus principales características son la simplicidad de su
construcción y la aparente complejidad del producto final. [54] [55]
Para su construcción se toma un segmento y se divide en tres partes iguales
eliminando el segmento central. Con cada una de las restantes partes se
procede del mismo modo, y así infinitas veces. [56]

Ilustración 53: Ejemplo de fractal
El estudio del fractal ha permitido comprender cuestiones como el crecimiento
de las ramas de los árboles o la trayectoria de los rayos, entre otros (Ilustración
54). [54] [55]
Es muy común que los fractales aparezcan en la naturaleza, algunos casos de
hojas o corales. La más notable es la planta denominada romanesco (Ilustración
54), que tiene una forma muy característica, quizás es en la que más fácilmente
se observe las semejanzas al fractal. [54] [55]

Ilustración 54: Fractales en la naturaleza: Girasol, hoja, romanesco y rayo

4.1.2.9 Partenón
A través del Partenón podemos observar el uso de las proporciones pitagóricas,
que derivan del Teorema de Pitágoras, en la arquitectura. Este teorema permite
calcular la longitud de lados de un triángulo rectángulo. Su fórmula de
aplicación es , siendo b y c los catetos y a la hipotenusa del
triángulo.
El Partenón es considerado "el templo dórico más perfecto jamás construido",
se diseñó, como se ha comentado, usando proporciones pitagóricas. Tiene que
altura:ancho:largo se sitúan en las proporciones 16:36:81, o usando Pitágoras
. [57]
Además, esta obra utiliza el triángulo. Este se define como un polígono de tres
lados, tres vértices y tres ángulos interiores.
En el Partenón el triángulo está presente en la cara frontal y en la trasera,
tratándose de un triángulo isósceles. Se le llama frontón a la estructura situada
por encima de las columnas y debajo del techo del templo. [33]
En un principio, estos frontones eran lisos. Más tarde, se colocaron escenas
completas (Ilustración 55), habitualmente de mitos, en ellos.
En la actualidad, ambos frontones del templo se encuentran en ruinas(Ilustración 56).

Ilustración 55: Escenas de los frontones del Partenón

Ilustración 56: Frontón del Partenón en la actualidad

4.1.2.10 Baptisterio de San Juan
La obra está relacionada con el octógono. Este se utiliza para la estructura de
la construcción en sí y para la arquitectura de la cúpula.
En primer lugar, la forma del Baptisterio es un octógono (Ilustración 57). El
octógono, en este caso regular, es una figura geométrica plana que tiene ocho
lados y ocho vértices. Por causa de su regularidad, todos sus ángulos tienen
135º. [58]
Este octógono tiene ocho lados iguales con uno rectangular añadido en el lado
oeste. Su forma octogonal simboliza los "ocho días". Siendo este el tiempo para
la Resurrección de Cristo.

Ilustración 57: Plano del Baptisterio de San Juan
Para la construcción de la cúpula se ha empelado una pirámide octogonal
(Ilustración 58), que se caracteriza por tener como base un octógono. En este
caso, la base de la pirámide es la forma de octógono que constituye el Baptisterio.
[50] [51]
Se trata de una pirámide octogonal regular, convexa y recta. Las dos primeras
se deben a que la base es un polígono regular y convexo. Un polígono es regular
cuando todos sus lados y ángulos son iguales y convexo, si el conjunto de sus
ángulos interiores son menores a 180º.
Para determinar la tercera característica se han tenido en cuentas las caras
laterales, siendo todas ellas triángulos isósceles. No obstante, que se haya
determinado que era regular ya implicaba que era recta.

Ilustración 58: Pirámide octogonal del Baptisterio de San Juan
4.2 Desarrollo página web
En este apartado se va a mostrar la elaboración y organización para realizar la
página web que muestra los conocimientos adquiridos mediante este trabajo.
Todo el desarrollo de la web se ha desarrollado en el editor de código Visual
Studio Code con el uso del framework Angular. Los lenguajes utilizados han
sido:
HTML5: Para el desarrollo de las vistas.
CSS: Con el fin de dar estilos a estas vistas.
TypeScript: Con el propósito de dar funcionalidad a algunas de las vistas.
La página se encuentra subida a GitHub Pages. Mediante el siguiente enlace se
puede acceder a ella: https://elmags.github.io/MathWeb/
4.2.1 Organización
Para la estructura del desarrollo de la página se han utilizado carpetas
denominadas como los componentes que contenían (Ilustración 59). Si estos
englobaban otros componentes relacionados con ellos, esos se encontrarán
organizados en carpetas con sus respectivos nombres. Todos los componentes
se sitúan dentro de una carpeta general llamada componentes.
El componente inicio se encuentra en la carpeta inicio y no contiene más
componentes.
El menú y la cabecera solo tienen un componente y se encuentran en las
carpetas menu y cabecera, respectivamente.
El conjunto de obras arquitectónicas se encuentra integrado en una carpeta
designada como obras. Dentro de esta carpeta, cada obra cuenta con un
directorio con su nombre. Algunas de estas incorporan subcarpetas que
incluyen a la obra y al autor.
Este es el caso del Panteón de Roma y de la ciudad de Sforzinda. El primero
consta de cuatro componentes, cada uno en su respectiva carpeta, estos son:
adriano, expone la biografía del emperador que mandó la construcción
de esta obra.
muro-de-adriano que muestra una de las obras más famosas que mandó
construir.

panteón-roma, contiene la información relativa, como su nombre indica,
al Panteón de Roma.
santiponce que presenta el municipio en el que nació Adriano.
El segundo, Sforzinda, incluye dos componentes:
filare, biografía del autor del libro donde se describe esta ciudad.
sforzinda, abarca toda la historia y las características de la obra.
Para los elementos matemáticos como los poliedros y los polígonos, al tener
distintos tipos y acceder a ellos mediante varias obras, se ha considerado crear
sus componentes de forma externa a las obras. En este caso el componente
poliedros contiene la descripción de estos cuerpos y otro que se centra en las
pirámides. Además, contiene un modelo llamado Poliedro.
El componente poligonos es similar, tiene un componente principal que los
define de forma general y en una carpeta nombrada como tipos-poligonos
incluye detalladamente información sobre el cuadrilátero, el octógono y el
triángulo. Así mismo, este incorpora una clase denominada Polígono.
El redireccionamiento de la página se realiza mediante el uso de las rutas que
proporciona el framework.
Todos estos componentes se explicarán con más detalle en el siguiente
subcapítulo.

Ilustración 59: Vista de la organización

4.2.2 Componentes
En este apartado se describirá el contenido de cada componente, destacando
algunas cualidades de cada uno de ellos y su desarrollo. Todos usan el mismo
estilo mediante Bootstrap y css. Además, comparten la estructura:
El contenedor con nombre “allS” (Ilustración 60) engloba todos los
componentes y define la fuente de letra en Segoi UI (Ilustración 61).

Ilustración 60: Contenedor "allS"

Ilustración 61: Css del contenedor "allS"
Las etiquetas de Bootstrap “o-module-header”, "o-module-header__title"
y "o-module-header__subtitle" proporcionan la apariencia a los títulos y
subtítulos de todas las páginas (Ilustración 62).

Ilustración 62: Sección de la cabecera
Normalmente las imágenes se encuentran dentro de una etiqueta
<figure> (Ilustración 63), que representa un contenido independiente,
identificada como “s2”, que las ajusta al centro y les proporciona unos
márgenes (Ilustración 64). Mediante un enlace, cuando se pulsa una
imagen se abre en otra ventana. Para insertar un título a cada una se ha
utilizado la etiqueta <figcaption> que ofrece un subtítulo o leyenda a la
etiqueta <figure> en la que está contenida.

Ilustración 63: Figura individual

Ilustración 64: Css de una figura

En casos en los que se encuentran dos imágenes alineadas
horizontalmente, se utiliza un contenedor que engloba a ambas. Este es
el que se identifica como “s4” (Ilustración 65), a diferencia del anterior
tiene el atributo css “display: flex;”, que permite proporcionar una
posición relativa a ambas (Ilustración 66). Dentro de este contenedor, del
mismo modo que con una imagen, se encuentra la etiqueta <figure> pero
con nombre “centrar” que mediante css ajusta las imágenes en el
contenedor, visualizándose ambas centradas. El enlace y la etiqueta
<figcaption> son iguales al uso de solo una imagen.

Ilustración 65: Dos figuras alineadas horizontalmente

Ilustración 66: Css de dos figuras
La tercera sección (Ilustración 67) utiliza un contenedor con nombre “s3”
que proporciona un margen superior. Contiene las etiquetas de Bootstrap
"c-section-salient-list", "o-grid", "o-grid__row" que permiten colocar su
contenido de forma uniforme al espacio disponible. Para los distintos
apartados en los que se separan las páginas, habitualmente historia y
elementos matemáticos, se utiliza la etiqueta <section> para diferenciar
las partes.

Ilustración 67: Vista de la tercera sección
Todas las obras arquitectónicas tienen, al inicio de la página, una imagen de
esta y un mapa de su localización (Ilustración 68). Este mapa se ha obtenido de
Google Maps.

Ilustración 68: Vista del inicio de la página
Para la incorporación y el uso de Bootstrap se tuvieron que añadir al
archivo .html principal dos anotaciones (Ilustración 69)

Ilustración 69: Muestra enlaces añadidos para el uso de Bootstrap
4.2.2.1 Menú y cabecera
La página se ha desarrollado mediante el framework Angular, que permite tener
cargados algunos componentes. En este caso, nunca se recargan los
componentes que contienen el menú (Ilustración 70) y la cabecera (Ilustración
71). Es decir, en todas las pantallas aparecen ambos componentes.

Ilustración70: Menú Ilustración 71: Menú con cursor
El menú se trata de una lista de navegación en un contenedor que tiene color
de fondo #aec89095 y un borde negro. Cuando el ratón se coloca encima de un
elemento de la lista este se resalta (Ilustración 72)

Ilustración 72: Cabecera

En la cabecera a través de la etiqueta <header> encapsula un contenedor que
contiene el mensaje “Las matemáticas en la arquitectura” con el fondo del
mismo color que el menú. Cuando se baja en la página, esta desaparece.
Inicialmente, se pensaba que debía aparecer si se realizaba scroll hacia arriba,
indiferentemente de en qué punto se hiciese de la página. Sin embargo, se
determinó que no era necesario, puesto que el menú se diferenció de la cabecera.
4.2.2.2 Inicio
Al abrir la página se encuentra el componente inicio (Ilustración 73) que contiene
una breve descripción de lo que contiene la página y un botón con el texto
“¡Comenzemos!” que al presionarlo se redirecciona aleatoriamente a una de las
obras.

Ilustración 73: Pantalla de inicio
Cuando el ratón se sitúa en el botón, mediante una animación aparece un borde
negro que lo encuadra (Ilustración 74).

Ilustración 74: Botón con el cursor
Para realizar la aleatoriedad del botón se ha utilizado TypeScript, creándose el
método denominado random() (Ilustración 75). Esta función recoge un número
aleatorio del 1 al 10 y mediante un switch se redirecciona a una obra al azar.

Ilustración 75: Función random()
4.2.2.3 Panteón de Roma
Esta carpeta contiene todos los componentes que tienen relación con el Panteón
de Roma.
4.2.2.3.1 Adriano
Expone la biografía de este emperador que mandó la construcción de esta obra.
Destaca el uso de una lista ordenada para la realización de la línea de tiempo
(Ilustración 76) que incluye. Está realizada, completamente, con css
exceptuando la etiqueta <time> que permite mostrar un periodo de tiempo. Así
mismo, se incorpora una mención del historiador Edward Gibbon (Ilustración
77) que tiene un estilo diferente al resto del texto.

Ilustración 76: Línea temporal de Adriano

Ilustración 77: Mención en el texto
A través de este componente se accede a los componentes que contienen el
pueblo de Santiponce y el muro de Adriano.
4.2.2.3.2 Muro de Adriano
En este componente, a pesar de no pertenecer a las obras principales, se
muestra un mapa de su ubicación. En él se indica la historia y las
características del muro de Adriano. Se optó por su añadido por ser una de las
obras más famosas que ordenó construir el emperador homónimo y por
pertenecer al periodo de las otras obras. A pesar de esto, en esta obra no se
realizó investigación sobre los elementos matemáticos. (Ilustración 78)

Ilustración 78: Pantalla del muro de Adriano
4.2.2.3.3 Panteón de Roma
La página contiene una imagen principal de la obra y el mapa. En la tercera
sección se describe la historia de su construcción y de la cúpula. De la cúpula
se ha incorporado una fotografía (Ilustración 79). Los elementos matemáticos
están divididos en tres partes, que se diferencian con una etiqueta <p>
identificada como “elemento”, proporcionado un estilo de subtítulo a cada
nombre de los elementos. Cuentan con una imagen cada uno que muestra un
eje. Las imágenes se han editado con el programa GIMP (Ilustración 80 e
Ilustración 81).
Por medio de este componente se ingresa a la pantalla que contienen al
emperador Adriano (Ilustración 79) y respecto a los elementos matemáticos se
tiene acceso al triangulo y a los polígonos (Ilustración 81).

Ilustración 79: Pantalla del Panteón de Roma: Historia y cúpula

Ilustración 80: Elementos matemáticos: Simetrías bilateral y radial

Ilustración 81: Elementos matemáticos: Simetría de rotación y triángulo
4.2.2.3.4 Santiponce
Principalmente tiene un mapa que muestra la localización del pueblo. Retrata,
brevemente, la historia del pueblo y su actualidad. Este componente contiene
dos imágenes alineadas horizontalmente. (Ilustración 82)

Ilustración 82: Pantalla del pueblo de Santiponce
4.2.2.4 Sforzinda
Esta carpeta contiene los componentes relacionados con la ciudad de Sforzinda,
es decir, filarete y sforzinda.
4.2.2.4.1 Filarete
Este componente contiene una imagen del busto de Filarete y una breve
biografía de este arquitecto (Ilustración 83). Diseñó la ciudad de Sforzinda y
escribió sus características en un libro.
Mediante un enlace en esta página se puede alcanzar el componente de la
ciudad.

Ilustración 83: Pantalla de Filarete
4.2.2.4.2 Sforzinda
La ciudad de Sforzinda contiene una imagen principal y otras cuatro
relacionadas con los elementos matemáticos. La edición de estas fotografías,
que incluyen ejes, se ha realizado con el programa GIMP. Dos de estas cuatro
imágenes se encuentran alineadas horizontalmente.
Este componente incluye un corto relato sobre la historia del diseño de la ciudad
(Ilustración 84), puesto que no se llegó a construir.
Con el fin de diferenciar los elementos matemáticos se ha utilizado una etiqueta
de párrafo <p> identificada como “elemento” que representa un subtítulo para
cada uno de ellos (Ilustración 85).

Ilustración 84: Pantalla de la ciudad de Sforzinda: Historia

Ilustración 85: Elementos matemáticos: Isometría y simetría

4.2.2.5 Torre de Pisa
La página en su inicio muestra una imagen de la torre y el mapa de su ubicación.
En la tercera sección se expone la historia de su construcción y su estado con
el paso del tiempo, también representado visualmente mediante una fotografía.
Esta imagen se ha editado mediante GIMP para añadir las fechas. Respecto al
estado, se presentan las distintas formas de intentos de mejoras. (Ilustración 86)
En cuanto a los elementos matemáticos, se exponen cuatro elementos: arco,
rombo, cilindro y escalera de caracol. Cada uno de ellos diferenciados mediante
una etiqueta <p> identificada como “elemento” que ofrece un estilo de subtítulo.
Los dos primeros se decidieron unir en un único elemento, puesto que ambos
están presentes en la catedral de Pisa y aparecen juntos en la torre. Por tanto,
para ellos se han utilizado dos imágenes alineadas horizontalmente. El cilindro
también contiene dos imágenes unidas. Sin embargo, la escalera de caracol solo
hace uso de una imagen centrada. (Ilustración 87 e Ilustración 88)
Para realizar la silueta de la figura cilíndrica en la torre se ha utilizado el
programa GIMP.
Desde esta pantalla se puede entrar a los componentes poligonos y cuadrilatero,
que está referenciado con la palabra “paralelogramo”. (Ilustración 87)

Ilustración 86: Pantalla de la torre de Pisa: Historia

Ilustración 87: Elementos matemáticos: Arcos y rombos

Ilustración 88: Elementos matemáticos: Cilindro y escalera de caracol

4.2.2.6 Catedral de Pisa
Esta pantalla comienza con una imagen de la catedral y el mapa de su
localización. Expone una breve historia de su construcción (Ilustración 89) y
separa la sección de elementos matemáticos mediante las etiquetas <p>
denominadas como “elemento” que proporcionan un formato de subtítulo a cada
uno.
En este caso, se ha optado por separar los elementos del arco y el rombo
(Ilustración 91), debido a que los rombos solo se presentan en la cara frontal.
En cambio, los arcos también aparecen en otras caras. En la descripción de los
arcos no se ha incluido ninguna imagen, en su caso, previamente, se ha
incorporado una fotografía de la cara delantera de la catedral.
El rombo, el trapecio y las raíces incluyen una imagen en sus respectivas
descripciones (Ilustración 90 e Ilustración 91).
A través de la catedral de Pisa se tiene acceso a los componentes poligonos y
cuadrilatero, referenciado mediante “paralelogramo” y “cuadrilátero”