CaritasSantaCruz
/
Mapeate
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Juego de mapas HTML basado en SVG integrado en el propio HTML.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
12 Commits
1 Branch
0 Tags
1.3 MiB
 
 
 
 
 
Tag: Branch: Tree: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
KyMAN c0a482756a
#wip: Arreglados errores gráficos y recursivos de selección. 		2 days ago
Artbook #wip(ecma): Dividida la gestión de los Scripts clientes y avanzado en el diseño base. 4 weeks ago
Public #wip: Arreglados errores gráficos y recursivos de selección. 2 days ago
Tools #wip(ecma): Dividida la gestión de los Scripts clientes y avanzado en el diseño base. 4 weeks ago
doc feat: Base funcional sobre ECMA y JSON. 2 days ago
.gitignore #wip: Montada la base ECMA, creando la base del GUI. 2 months ago
LICENSE Initial commit 2 months ago
README.md #wip(ecma): Iniciado el proyecto ECMA. 2 months ago
version #wip: Arreglados errores gráficos y recursivos de selección. 2 days ago

README.md

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.

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.

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.

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, 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.

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:

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:

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