README.md

# FRONT-END

Es la parte visible, la que muestra el diseño, los contenidos y la que permite a los visitantes navegar por las diferentes páginas mientras lo deseen.


### Plataforma del Sitio Oficial de los Objetivos de Desarrollo Sostenible de México.

La adopción de la Agenda 2030 para el Desarrollo Sostenible en México ha implicado la puesta en marcha de una plataforma para el seguimiento y monitoreo de los indicadores de los Objetivos de Desarrollo Sostenible, la cual esta diseñada en una arquitectura bajo el modelo MVC (Modelo Vista Controlador), que permite reutilizar el código y reduce el uso del código del servidor. Dentro de la capa del “modelo” se utiliza un servidor RESTful (API) para obtener los datos. En la capa “vista” se utiliza el HTML5, CSS 3 y Bootstrap. Finalmente la capa “controlador” usa Angular JS. 
 

### Requisitos

* [Visual Studio Code](https://code.visualstudio.com/download) - Página oficial de descarga de de Visual Studio Code.

* Tener un servidor de aplicaciones y una conexión a internet. En cuanto al servidor se pueden realizar múltiples configuraciones en servidores como Apache, IIS o puedes utilizar la extención "Live Server" de Visual Studio Code.


### Instalación

Procedimiento:

#### 1.- Genera una carpeta llamada “ods” en el servidor de aplicaciones disponible. 

*  Ej. Si tu servidor de aplicaciones es Apache bajo el sistema operativo Linux, entonces genera la carpeta “ods” debajo de la ruta “\var\www\html” ó Windows debajo de la ruta "\xampp\htdocs".

#### 2.- Ve al proyecto Front-end y descarga el código del proyecto [Front-end](https://git.inegi.org.mx/ods-cepal/front-end) en formato .zip.

![Download](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/download2.PNG )

#### 3.- En la carpeta creada en el paso 1 copia y pega el código fuente que descargaste en el paso anterior.

#### 4.- Instalación de Servidor IIS

En el Panel de control abre "Programas y características".

• En el panel de la izquierda escoge: "Activar o desactivar las características de Windows".

• En la lista de funciones de Windows marca la casilla: "Internet Information Services" y haz clic en Aceptar.

• En la lista de funciones de Windows, da un clic en el signo más (+) situado junto a Internet Information Services, da un clic en el signo más (+) situado junto a Servicios World Wide Web, da un clic en el signo más (+) situado junto a Características de desarrollo de aplicaciones.

• Selecciona las funciones que necesites y presiona Aceptar.

#### 5.- Configuración de Servidor IIS y Publicación API

5.1- En el Panel de control/ Desinstalar programas iremos al apartado de Activar o desactivar las características de windows.

![Programas](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/programas.png)


5.2- Da clic en el apartado de Internet Information Services y seleccionaremos todas las casillas y aplicamos los cambios.

![Caracteristicas](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/caracteristicas.png)

5.3- Una vez aplicado los cambios podremos encontrar el administrador del IIS como si hubiéramos instalado un nuevo programa.

![IIS](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/iis.png)

5.4- Ahora una vez configurado el panel del IIS, iremos a la siguiente carpeta C:\inetpub\wwwroot. Una vez situados ahí crearemos una nueva carpeta y elegiremos un nombre.

![Carpeta](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/crearCarpeta.png)

5.5- Una vez en el panel, en la parte de Sitios agregaremos uno nuevo.

![Agregar Sitio](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/agregarSitio.png)

5.6. Nos mostrará el siguiente formulario en blanco, en nombre del sitio escribiremos como se llamará el nombre que mostrará en la lista, en la parte de ruta física buscaremos la carpeta que creamos anteriormente y por último en la parte de dirección IP “Todas las no asignadas”. Este último paso es para poder hacer que nuestro servicio funcione con con la dirección IP en caso de que ejecutemos el servicio en un lugar diferente (Casa, trabajo, escuela etc.).

![Agregar Sitio](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/agregarSitioW.png) 

5.7. Nos mostrará el siguiente mensaje y daremos clic en “si”.

![Mensaje](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/msj.png) 

5.8. Damos clic derecho y encendemos el servicio aunque no funcionará ya que funciona con los archivos de configuración de la carpeta, generados con el proyecto de .Net.

![Iniciar](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/iniciar.png) 

#### 6.- Abrir el proyecto o solución en Visual Studio Code 2019 con permisos de administrador.

![Abrir VS](https://git.inegi.org.mx/ods-cepal/api-vs-community/raw/master/recursos/img/abrirVS.png) 


### 7.- Apuntar Front-end a API 

7.1.- Abre el código descargado en el paso anterior en Visual Studio Code.

7.2.- Ubica el archivo appSite.js ubicado dentro de la carpeta app/js/ dentro del proyecto como se muestra en la imagen a continuación y modifica la URL colocando la ruta en donde se encuentra instalada el API en tu servidor.

![AppSite](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/appSite.PNG)



### 8.- Pruebas de funcionalidad
Asegúrate que el servidor de aplicaciones se está ejecutando y desde ahí, mediante el uso de un navegador (Chrome, Explorer, etc.) accede a la liga  "http://localhost/ods/index.html".
A continuación, dar clic en la liga de “indicadores”, y posteriormente sobre el indicador 3.1.1 del objetivo 3. 
Este indicador mostrará sus tres elementos: Indicador, Metadato y Datos para el cálculo, asimismo, en el elemento Indicador se visualizarán los datos en Mapa, Gráfica y Datos,como se ve en la siguiente imagen:


### 9.- Estructura de Carpetas FRONT-END

![Carpetas](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/front-end2.PNG )

#### 10.- Descripción de archivos y carpetas:

* email.html.- Página que genera un formulario para el envío de correo electrónico para los ODS.

Esta página esta divida en 3 partes:


1.  Nav divida en 2 partes: 


    *  Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas.


    *  Menú principal: (ver archivo: app/includes/Header_menu.html).

2. Contenido: formulario email.

3. Pie del sitio: (ver archivo: app/includes/Footer.html).


* index.html.- Página principal del sitio de los ODS (home).

Esta página se divide en:


*   Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas.
     
*   Carousel: Fotografías alusivas al sitio, incluye ligas a sitios internos y externos a esta página.
       
*   Nav (Menu principal): contiene le menú principal del sitio (ver archivo: app/includes/Header_menu.html).
     
*   Contenido del home: Objetivos, Indicadores por cobertura geográfica e información relacionada (ver archivo: app/partials/home_content.html).
     
*   Pie: (ver archivo: app/includes/Footer.html).
     
*   Nota importante: El sistema contempla 3 páginas principales (index.html, ODSind.html, ODSopc.html), por medio de index.html se llega a las demás utilizando ligas y pase de parámetros.
     
*   Archivo de control: app/js/app_Index.js.


* ODSind.html:

Página del indicador: Presenta la serie del indicador seleccionado, mapa, gráfica, metadato, datos para el cálculo 

    Esta página esta divida en 4 partes:
    
     - Nav divida en 3 partes:
         -Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas
         -Menú principal: (ver archivo: app/includes/Header_menu.html);
         -Lista de objetivos y lista de indicadores del objetivo seleccionado
     - Encabezado del indicador, divido en 3 partes:
         - Nombre del indicador: (include/Ind_Header_Descrip.html)
         - Secciones del indicador: botones Indicador, Metadato y Datos para cálculo; cada uno es una liga que cambia de página a la sección citada
           (includes/Ind_Header_Sections.html)
         - Opciones del indicador: Se abren solo si el indicador tiene desagreación geográfica, se divide en Estados Unidos Mexicanos, Entidad fedetativa y 
           Todos los (municipios/ciudades) (includes/Ind_Header_Options.html)
     - Contenido: se enlaza con 3 páginas (una a la vez):
         - Indicador: Página que contiene la serie del indicador, mapa, gráfica (partials/Ind_Indicator.html)-página por omisión
         - Metadato: Página que presenta los metadatos del indicador seleccionado (partials/Ind_Metadata.html)
         - Datos para el cálculo: Presenta las series insumo que generán el indicador (partials/Ind_BasicData.html)
     - Pie del sitio: (ver archivo: app/includes/Footer.html).

* ODSopc.html

Página que abre las opciones (herramientas) que ofrece sitio de los ODS

    Esta página esta divida en 3 partes:
     - Nav divida en 2 partes:
         -Banda "Sitio de revisión y validación": Solo cuando se apunta al esquema Pre-productivo o de pruebas
         -Menú principal: (ver archivo: app/includes/Header_menu.html);
     - Contenido: esta página se enlaza con
         - About: Página que contiene información acerca de los ODS, (partials/About.html)
         - Lista de Indicadores: Presenta la temática completa del sitio ODS (partials/Indicators.html)
         - Buscador: Localiza los indicadores por diferentes tipos de búsqueda (partials/Search.html)
         - Calendario: Presenta la próxima fecha de actualización de c/u de los indicadores, (partials/Calendar.html)
         - Descarga masiva: Página en donde se descarga la información de N indicadores a la vez (partials/MassiveDownload.html)
         - Cobertura geográfica: Presenta los indicadores por cobertura geográfica (partials/GeoCoverage.html)
     - Pie del sitio: (ver archivo: app/includes/Footer.html)
     Nota importante: El sitio se enlaza a las páginas por medio de ligas, pase de parámetros
     Archivo de control: app/js/app_opc.js
     Acceso: ODSopc.html?opc=(cal,li,em,about,&ti=IND&lang=es#/cal

* README.md: archivo que contiene información acerca de otros archivos en un directorio y docuementación del proyecto.

* Carpeta app: aquí se encuentra la carpeta app donde se ubica toda la implementación de los componentes principales, junto a su template html y archivos de estilos css.

* Carpeta data:

* Carpeta docs: aquí se encuentran los documentos del proyecto.

* Carpeta img: aquí se encuentran las imagenes del proyecto.

* Carpeta json: aquí se encuentran los archivos en formato json.

* Carpeta libs: aquí se encuentran las librerías del proyecto.

* Carpeta mapasd3: código de mapas y componentes mapas.

* Carpeta recursos: carpeta con imagenes del proyecto.

* Carpeta settings: settings.json archivo que contiene la configuración global para la personalización del sitio.

### 11. Configuración del mapa de estratificación

Descripción:

El mapa de estratificación es un componente embebido en el proyecto cuya función principal es la de mostrar datos de estratificación correspondientes a un indicador de cierta área geográfica.

**Características:**

•	Componente independiente reutilizable.

•	Mapa base: capa del mundo en formato geoJSON (incluido en el componente).

•	Mapa de países: capa de cada país en formato geoJSON (cargado por el desarrollador).

•	Control de navegación por zoom por mouse y controles en el mapa.

**Tecnología:**

•	Webpack (minificado y empaquetado del componente).

•	Bootstrap 4.3.1

•	Axios (Solicitudes al API).

•	D3 js (librería para la visualización de datos).

•	React js (Librería para el desarrollo de la interfaz y funcionalidad).

Configuración y carga de capa país con sus entidades:

Para la correcta visualización de datos en el mapa se deben realizar los siguientes ajustes.
1.	Abrir el archivo de configuración MapaD3.config.js que se encuentra en /front-end/mapasd3/.
2.	Configurar la URl base del API reemplazando el valor del parámetro: basePath 
3.	Modificar el parámetro fileGeojson el cual se reemplaza por el nombre del archivo que contiene el geojson del país a visualizar, el nombre del archivo deberá ser como lo especifica la norma ISO_3166-1 del estándar internacional de normalización utilizando el Código alfa-3, para más información visita: https://es.wikipedia.org/wiki/ISO_3166-1.
4.	El parámetro dirGeojson se puede modificar si prefieres optar por otro lugar donde se guarden los archivos en formato geoJSON.

![Mapa1](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/mapa1.png)

5.	La estructura del archivo geoJSON para el país deberá tener la siguiente estructura:

Ejemplo: MEX.json

![Mapa2](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/mapa2.png)

NOTA: es importante que el campo CVE_ENT coincida con el del dato que regrese el API y poder colocar el datos en la entidad correspondiente.

![Mapa3](https://git.inegi.org.mx/ods-cepal/front-end/raw/master/recursos/img/mapa3.png)

### Construido con:

*	HTML 5
*	CSS 3
*	Bootstrap
*	D3
*	Angular JS

### Versiones

La versión disponible del Sistema de Información de los Objetivos de Desarrollo Sostenible de México es la 2.4.0.

### Autor

Instituto Nacional de Estadística y Geografía (INEGI), México [www.inegi.org.mx](http://www.inegi.org.mx).

### Licencia

Este proyecto está bajo la licencia de código abierto del Instituto Nacional de Estadística y Geografía, para más detalles ver [licencia](http://www.agenda2030.mx/docs/doctos/system/Licencia_codigo_abierto_ES.pdf)