FinalVersion/formaurbana.html at master · ExpansionUrbanaMTY/FinalVersion · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expansión Urbana Mty</title>
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" sizes="57x57" href="./img/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./img/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./img/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./img/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./img/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./img/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./img/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./img/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./img/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="./img/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./img/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/favicons/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <!--MapBox-->
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
    <!-- d3 -->
    <script src="//d3js.org/d3.v5.min.js" charset="utf-8"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- chartjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"charset="utf-8"></script>

    <link rel="stylesheet" href="css/uikit.min.css" />
    <script src="js/uikit.min.js"></script>
    <script src="js/uikit-icons.min.js"></script>

    <link rel="stylesheet" href="style.css">
    <!--Carousel-->
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
	<!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-QWNMHKJPW1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-QWNMHKJPW1');
    </script>

</head>
<body>
    <div id="nav" style=" z-index: 1000;">
        <img id="image-nav" src="img/logos/NewLogo.png"  style="height: 80;">
        <h3 id="text-nav">Expansión Urbana de Monterrey</h3>
        <ul>
            <li><a href="index.html" class="activeNav">Inicio</a></li>
            <li><a href="expansion.html">Expansión</a></li>
            <li><a href="">Morfología Urbana</a></li>
            <li><a href="atlas.html">Calles</a></li>
            <li><a href="">Finanzas</a></li>
            <li><a href="costos.html">Costos</a></li>
            <li><a href="equipo.html">Equipo</a></li>
        </ul>
        <a href="javascript:void(0);" class="icon nav-toggle" onclick="mobileNav()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

    <div class="uk-child-width-expand@s uk-grid-small uk-grid-match" uk-grid>
        <div>
            <div style="
                padding-left: 40px;padding-top: 0 !important; color:black; height: 90vh;
                background: linear-gradient(90deg, #E4E3DF, #cfcec9);
            ">
                <article class="uk-article" style="padding-right: 10px;">
                    <div>
                        <p class="uk-text-justify" id="cluster-text" style="font-size: larger;">
                            <h3 style="color: black;">Forma Urbana</h3>
                            <p class="uk-text-justify" id="cluster-text">
                                <p class="uk-text-justify">
                                La morfología de una ciudad se divide en forma y función. La forma consiste en la ubicación de los distintos sub-centros de actividad. La función trata sobre las conexiones entre los distintos subcentros a partir de la actividad entre personas. En este apartado exploramos la evolución de la forma urbana de Monterrey a partir de una estructura monocéntrica en 1960 hacia la estructura compuesta que observamos hoy en día.
                                </p>
                                <p class="uk-text-justify">
                                El mapa que muestra la mancha urbana de 1960 procede del Centro de Colaboración Geoespacial del estado de Nuevo León, construida a partir de fotografías aéreas de la época. En esos años, el centro de la ciudad concentraba la mayor cantidad de empleos y la ciudad tenía una estructura monocéntrica. Antonio Támez Tejeda refiere en el capítulo Génesis y Evolución de la Morfología Urbana de Monterrey (Libro: Territorios y Ciudades en el Noreste de México al inicio del siglo XXI): el esquema monocéntico logró mantenerse hasta fines de la década de 1960 con el centro rector de la vida urbana y desarrollando nuevos edificios, incursionando ahora en las estructuras de gran altura. El Edificio Chapa y el Hospital de Zona del IMSS iniciaron la tendencia a principios de la década. … El centro pasó por su mejor momento en la década de los sesenta al concentrar la dinámica urbana y todo género de servicios para la ciudadanía.
                                </p>
                                <p class="uk-text-justify">
                                El mapa de la estructura urbana actual fue construido por nuestro equipo de investigación a partir de los datos de empleo reportados por INEGI en el Directorio Estadístico Nacional de Unidades Económicas (DENUE) del 2019. El mapa resultante es la combinación de dos aproximaciones. Por un lado, se empleó el algoritmo Density-Based Spatial Clustering of Applications with Noise (DBSCAN) para identificar las zonas con la mayor densidad de empleos. Por otro lado, se generó una retícula de 1x1 kilómetro cuadrado para calcular la densidad de empleos por celdas. La combinación de estas dos metodologías nos permitió trazar los límites de los subcentros de actividad con mayor densidad de empleos. La ciudad cuenta con un corredor al sur, una media luna y varios subcentros en la periferia norte de la ciudad. Es una estructura compleja que plantea una serie de retos en términos de movilidad y accesibilidad de las zonas residenciales a los lugares de empleo.
                                </p>
                            </p>
                        </p>
                    </div>

                </article>
            </div>
        </div>
        <div>
            <div class="uk-card uk-text-center" style="background-color: #E4E3DF; margin-left: -15px; width: 70% !important;padding-top: 20vh;">
                <figure class="cd-image-container" style="background-color: #E4E3DF;">
                    <img src="img/FormaUrbana/2020-01.png" alt="Original Image">
                    <span class="cd-image-label" data-type="original"></span>

                    <div class="cd-resize-img"> <!-- the resizable image on top -->
                        <img src="./img/FormaUrbana/1960-01.png" alt="Modified Image">
                        <span class="cd-image-label" data-type="modified"></span>
                    </div>

                    <span class="cd-handle"></span>
                </figure> <!-- cd-image-container -->
            </div>
        </div>
    </div>


    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery.mobile.custom.min.js"></script> <!-- Resource jQuery -->
    <script src="js/main.js"></script> <!-- Resource jQuery -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script type="text/javascript">
        function mobileNav() {
            var x = document.getElementById("nav");
            if (x.className === "nav") {
                x.className += " responsive";
                x.querySelector('i').className = "fa fa-close";
            } else {
                x.className = "nav";
                x.querySelector('i').className = "fa fa-bars";
            }
        }


    </script>
</body>