# Mapeate

**Mapeate** es un juego Web de geografía totalmente gratuíto basado en HTML5, SASS/CSS3, SVG y JavaScript desarrollado para Cáritas Santa Cruz, Ferrol, en España. La idea es aprender tanto geografía como la base de informática, tanto de programación como de sistemas para llevar a cabo dicho proyecto.

## Idea

Este proyecto pretende ser un proyecto de un juego de geografía para aprender países, capitales, provincias, condados, etc. Vía Web en HTML5, ECMAScript 2015 y SASS/CSS. Este proyecto se basa en otro proyecto ya existente en SWF (Proyecto Flash) de MEC (antiguo Ministerio de Educación y Cultura) el cual ya no es accesible. El problema es que actualmente, las aplicaciones Flash en SWF están obsoletas por lo que ya no se puede hacer uso de éstas de una forma adecuada, incluso con el uso de Ruffle u otros emuladores o alternativas al Flash Player, eso sin mencionar con las fallas de seguridad ante este tipo de ficheros.

> KyMAN: Al principio pensé que era de la Universidad de Navarra pero me equivoqué, lo hizo una persona llamada Enrique Alonso en memoria de su hija Margarita Alonso Porta, quien ayudó en el diseño y falleció en 2012. Más información en los enlaces cacheados del Wayback Machine de archive.org. La visualización del contenido puede ser ofrecida parcialmente mediante Ruffle.

- http://serbal.pntic.mec.es/ealg0027/mapasflash.htm
    - https://web.archive.org/web/20161119001253/http://serbal.pntic.mec.es/ealg0027/mapasflash.htm

## Primeros pasos

Para empezar el proyecto hemos de saber qué tecnologías vamos a tocar y qué recursos necesitamos conseguir. En este caso se opta por un servidor Debian Core con Apache2 y PHP, y en caso de avanzar bastante, incluso en una base de datos MariaDB. Todo esto va a estar en contenedores Docker donde separaremos el Servidor Web del Servidor Proxy, y en caso de llegar a ello, del servidor de base de datos.

```mermaid
flowchart LR

C([Clientes])
subgraph "Entorno local" 
    P["Servidor Proxy"]
    W["Servidor Web"]
    DB["Servidor de base de datos"]
    N{{Nginx}}
    A{{Apache2}}
    PHP{{PHP}}
    M{{MariaDB}}
end

P -...- N
W -...- A
W -...- PHP
DB -...- M

C --> P
P --> W
W --> DB

C -..-> N
N ----> A
A ----> PHP
PHP ----> M
```

- **Servidor Proxy**: Es un tipo de servidor o de servicio de red que permite redirigir las peticiones que le llegan, incluso con la posibilidad de gestionar balance de carga o gestionar peticiones específicas. En este caso se usará **Nginx**, un servicio de Servidor Proxy ruso muy versátil completamente Free Open Source.
- **Servidor Web**: Un Servidor Web o servicio Web es aquel que provee de servicio para una Página o Aplicación Web. En este caso usaremos **Apache2**, un servidor más limitado que *Nginx* pero muy ágil para trabajar contra lenguajes o entornos de petición como **PHP**, lenguaje de alto nivel muy versátil que permite actualización de sus Scripts en caliente y con una gran comunidad y documentación. *PHP* también permite tanto una programación estructurada como una programación orientada a objetos y se orienta a ser incrustado en un entorno **HTML**, lenguaje de marcas que permite generar estructuralmente una página Web. Todas estas tecnologías son Free Open Source.
- **Servidor de base de datos**: Es un servidor o servicio donde se almacenan y se gestionan los datos. En este caso usaríamos **MariaDB**, que es un **Fork** de **MySQL**, es decir, una rama independiente de desarrollo de *MySQL*, que viene siendo un motor de gestión de datos, actualmente pertenenciente a Oracle, para determinar un formato de Software completamente Free OpenSource.

> Existe la posibilidad de que se cambie el Proxy Nginx por FreeNginx por abrir más la filosofía de Free Open Source.

Todos estos servicios se independizarán en 3 contenedores independientes **Docker**. Un **contenedor** viene siendo un pequeño espacio de memoria que hace uso del núcleo Sistema Operativo anfitrión pero independiza las instalaciones en un espacio separado, por lo que a diferencia de las Máquinas Virtuales, éstos rinden mucho más y permiten un trabajo más directo con el anfitrión.

```mermaid
flowchart TD
subgraph Docker
    ND[Nginx]
    AD[Apache2]
    subgraph Web
        PD[PHP]
        MD[MariaDB]
    end
    PC["Servidor Proxy"]
    DC["Servidor de datos"]
    PI[".21"]
    WI[".22"]
    DI[".23"]
end

ND -.- PC
AD -.- Web
PD -.- Web
MD -.- DC
PC --> Web
Web --> DC
PC -.- PI
Web -.- WI
DC -.- DI

```

## Comprobación de viabilidad

El mayor problema al que nos enfrentamos con este proyecto es a conseguir los mapas requeridos en SVG con los territorios independientes e identificados dentro del propio XML del SVG; y tras ello, la carga e interpretación dinámica en HTML de los mismos, así como su gestión de eventos de forma dinámica y la manipulación del diseño.

Empezando por las fuentes, necesitamos mapas SVG con licencia libre, gratuita y abierta pues alteraremos la fuente origen y como proyecto totalmente sin ánimo de lucro, no podemos depender de pagos a terceros. En este caso se hará uso de [MediaWiki Commons](https://commons.wikimedia.org/wiki/Main_Page), un sitio Web con contenidos libres de Internet que complementa en gran medida a la propia Wikipedia, nacida del propio nombre de la plataforma Free OpenSource [MediaWiki](https://www.mediawiki.org/).

> Pese a que muchos de los contenidos están bajo MIT, Full CopyLeft o directamente sin licencia, nosotros nombraremos y atribuiremos la autoría de la fuente original por respeto a quienes comparten contenidos en ayuda común y su trabajo.

El mapa inicial de pruebas será el siguiente:

- https://es.m.wikipedia.org/wiki/Archivo:BlankMap-World.svg

[![](https://upload.wikimedia.org/wikipedia/commons/4/4d/BlankMap-World.svg)](https://upload.wikimedia.org/wikipedia/commons/4/4d/BlankMap-World.svg)

Ahora, hemos de crear un directorio de pruebas en el Public del proyecto con un simple HTML que cargue de forma dinámica en un marco dicho mapa y mediante JavaScript y CSS, alterarlo verificando la funcionalidad del proyecto.

### Resultados

La carga dinámica del mapa así como la capacidad de modificar a nivel de estilos y funcional cada uno de los elementos es totalmente viable, sin embargo, a modo puzzle, lo que viene siendo e Drag&Drop es un problema por el tipo de posicionamiento de los elementos del SVG. La prueba realizada la encontramos en la siguiente direccion local:

- [/tests/mapa.test.html](/tests/mapa.test.html)

> La prueba tienen todo integrado internamente, incluyendo el CSS y JS y depende de que esté descargado el mapa de la WikiMedia Commons en /Public/data con el nombre de "World Map.svg".

Para poder trabajar correctamente los mapas hemos de saber las siguientes tecnologías basadas en el ámbito de desarrollo Web:

- **HTML**
- **CSS**: No sólo el estándar, sino el específico para los elementos del SVG.
- **JavaScript**
    - **DOM**: Framework para trabajar XML, en este caso para trabajar y orientarnos en la estructura del HTML, que incluye también el SVG.
    - **XMLHttpRequest**: Objeto para gestionar comunicaciones asíncronas.
    - **Expresiones Regulares**: Librería interna de trabajo para patrones de texto. *Se usará para adaptar el XML del SVG al entorno Web de trabajo.*

## Referencias

- Web [VirusTotal](https://www.virustotal.com/) para validación vía Antivirus de Malwares en ficheros - https://www.virustotal.com/
- Reproductores Flash:
    - [Adobe Flash Player](https://www.adobe.com/es/products/flashplayer/end-of-life.html) - https://www.adobe.com/es/products/flashplayer/end-of-life.html.
    - Emulador Flash [Ruffle](https://ruffle.rs/) - https://ruffle.rs/
- Docker
    - [Web oficial](https://www.docker.com/) - https://www.docker.com/
    - [Wikipedia](https://es.wikipedia.org/wiki/Docker_(software)) - https://es.wikipedia.org/wiki/Docker_(software)
- Debian
    - [Web oficial](https://www.debian.org/) - https://www.debian.org/
        - [Repositorio Git oficial](https://sources.debian.org/) - https://sources.debian.org/
    - [Wikipedia](https://es.wikipedia.org/wiki/Debian_GNU/Linux) - https://es.wikipedia.org/wiki/Debian_GNU/Linux
- Apache2
    - [Web oficial](https://httpd.apache.org/) - https://httpd.apache.org/
    - [Wikipedia](https://es.wikipedia.org/wiki/Servidor_HTTP_Apache) - https://es.wikipedia.org/wiki/Servidor_HTTP_Apache
    - [Repositorio Git oficial](https://github.com/apache/httpd) - https://github.com/apache/httpd
- PHP
    - [Web oficial](https://es.wikipedia.org/wiki/PHP) - https://es.wikipedia.org/wiki/PHP
    - [Wikipedia](https://www.php.net/) - https://www.php.net/
    - [Repositio Git oficial](https://github.com/php/php-src) - https://github.com/php/php-src
- JavaScript
    - JavaScript en la [W3Schools](https://www.w3schools.com/js/) - https://www.w3schools.com/js/
    - JavaScript en [Mozilla](https://developer.mozilla.org/es/docs/Web/JavaScript) - https://developer.mozilla.org/es/docs/Web/JavaScript
    - Web de aprendizaje [LenguajeJS](https://lenguajejs.com/) - https://lenguajejs.com/
    - JavaScript original
        - [Wikipedia](https://es.wikipedia.org/wiki/JavaScript) - https://es.wikipedia.org/wiki/JavaScript
    - ECMAScript
        - [Web de estasndarización](https://ecma-international.org/) - https://ecma-international.org/
        - [Wikipedia](https://es.wikipedia.org/wiki/ECMAScript) - https://es.wikipedia.org/wiki/ECMAScript
- HTML
    - ["Wikipedia](https://es.wikipedia.org/wiki/HTML) - https://es.wikipedia.org/wiki/HTML
    - [Wikimedia Commons](https://commons.wikimedia.org/wiki/Category:HTML) - https://commons.wikimedia.org/wiki/Category:HTML
    - [Web oficial](https://www.w3.org/html/) - https://www.w3.org/html/
    - HTML en la [W3Schools](https://www.w3schools.com/html/) - https://www.w3schools.com/html/
    - HTML en [Mozilla](https://developer.mozilla.org/es/docs/Web/HTML) - https://developer.mozilla.org/es/docs/Web/HTML
- CSS
    - [Wikipedia](https://es.wikipedia.org/wiki/CSS) - https://es.wikipedia.org/wiki/CSS
    - CSS en la [W3Schools](https://www.w3schools.com/css/) - https://www.w3schools.com/css/
    - CSS en [Mozilla](https://developer.mozilla.org/es/docs/Web/CSS) - https://developer.mozilla.org/es/docs/Web/CSS
    - CSS en la [W3](https://www.w3.org/Style/Examples/011/firstcss.es.html) - https://www.w3.org/Style/Examples/011/firstcss.es.html
    - SASS
        - [Web oficial](https://sass-lang.com/) - https://sass-lang.com/
        - [Wikipedia](https://es.wikipedia.org/wiki/Sass) - https://es.wikipedia.org/wiki/Sass
        - [Repositorio Git oficial](https://github.com/sass/sass) - https://github.com/sass/sass
        - [Repositorio Node oficial](https://www.npmjs.com/package/sass) - https://www.npmjs.com/package/sass
- SVG
    - [Wikpedia](https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables) - https://es.wikipedia.org/wiki/Gr%C3%A1ficos_vectoriales_escalables
    - SVG en la [W3](https://www.w3.org/Graphics/SVG/) - https://www.w3.org/Graphics/SVG/
    - SVG en [Mozilla](https://developer.mozilla.org/es/docs/Web/SVG) - https://developer.mozilla.org/es/docs/Web/SVG
- Nginx
    - ["web oficial](https://www.nginx.com/) - https://www.nginx.com/
        - [Repositorio](https://hg.nginx.org/nginx) - https://hg.nginx.org/nginx
    - [Wikipedia](https://es.wikipedia.org/wiki/Nginx) - https://es.wikipedia.org/wiki/Nginx
    - Free Nginx
        - [Web oficial](https://freenginx.org/) - https://freenginx.org/
- MySQL
    - [Web oficial](https://www.mysql.com/) - https://www.mysql.com/
    - [Wikipedia](https://es.wikipedia.org/wiki/MySQL) - https://es.wikipedia.org/wiki/MySQL
    - [Repositio Git oficial](https://github.com/mysql/mysql-server) - https://github.com/mysql/mysql-server
    - [Driver PDO para PHP](https://www.php.net/manual/es/ref.pdo-mysql.php) - https://www.php.net/manual/es/ref.pdo-mysql.php
    - MariaDB
        - [Web oficial](https://mariadb.org/) - https://mariadb.org/
        - [Wikipedia](https://es.wikipedia.org/wiki/MariaDB) - https://es.wikipedia.org/wiki/MariaDB
        - [Repositorio Git oficial](https://github.com/MariaDB/server) - https://github.com/MariaDB/server
- Mapas
    - [Países del mundo en SVG en Wikimedia Commons](https://es.m.wikipedia.org/wiki/Archivo:BlankMap-World.svg) - https://es.m.wikipedia.org/wiki/Archivo:BlankMap-World.svg
        - *Hay más mapas en el mismo enlace facilitado de la Web.*