CaritasSantaCruz/Mapeate
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#wip: Documentación y purebas de viabilidad.

Browse Source
This commit is contained in:
KyMAN 2024-03-05 15:09:37 +01:00
parent 7a5b98903c
commit 53fc8e3442
4 changed files with 257 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
[Ss]ecrets [Ss]ecrets
Data Data
CaritasSantaCruz.Mapeate.apache2.conf CaritasSantaCruz.Mapeate.apache2.conf
Public/data

158
Public/tests/mapa.test.html Normal file
View File

@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mapa - Pruebas</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<style data-type="text/css" data-language="CSS3" rel="stylesheet" charset="utf-8">
html,body{
margin : 0px;
height : 100%;
overflow : auto;
}
svg>*:not(#ocean){
/* display : block;
top : 0px;
left : 0px; */
fill : #FBB;
}
svg>*:not(#ocean):hover{
fill : #F88;
}
</style>
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
MapaPruebas = function(){
const self = this;
const construct = () => {
load_map();
};
const load_map = () => {
let ended = false;
const ajax = new XMLHttpRequest();
end = () => {
!ended &&
(ended = true) &&
build_map(ajax.responseText);
};
ajax.open("get", "/data/World Map.svg", true);
ajax.timeout = 2000;
ajax.onreadystatechange = () => {
if(ended)
return;
if(ajax.readyState == 4)
end();
};
ajax.send(null);
};
const build_map = svg => {
let preload = setInterval(() => {
const body = document.querySelector("body");
if(!body)
return;
clearInterval(preload);
body.innerHTML = svg.replace(/<style((?!<\/style>)(.|[\r\n]))+<\/style>|<!\-{2}((?!\-{2}>)(.|[\r\n]))+(-{2}>)?|\/\*((?!\*\!)(.|[\r\n]))+(\*\/)?/, "");
preload = setInterval(() => {
if(document.querySelector("svg>#tk")){
clearInterval(preload);
body.setAttribute("onmousemove", "mapa_pruebas.test_country_move(this, event);");
document.querySelectorAll("svg>*").forEach(country => {
if(country.hasAttribute("id") && country.getAttribute("id") == "ocean")
return;
country.setAttribute("onclick", "mapa_pruebas.test_country_click(this, event);");
country.setAttribute("onmousedown", "mapa_pruebas.test_country_select(this, event);");
country.setAttribute("onmouseup", "mapa_pruebas.test_country_unselect(this, event);");
})
}
}, 1000 / 24);
}, 1000 / 24);
};
this.test_country_click = (item, event) => {
const time = Date.now();
if(time - (item.hasAttribute("data-last-click") ? Number(item.getAttribute("data-last-click")) : 0) < 500)
alert(item.querySelector("title").innerHTML + ", " + item.getAttribute("id"));
item.setAttribute("data-last-click", time);
};
const unselect_all = () => document.querySelectorAll("svg [data-pressed=true]").forEach(item => item.setAttribute("data-pressed", false));
const get_country_item = item => {
while(item && item.parentNode.tagName.toLowerCase() != "svg" && (item.parentNode));
return item;
};
this.test_country_select = (item, event, pressed) => {
const aexis = [0, 0];
unselect_all();
if(item.style.transform){
const matches = item.style.transform.match(/\-?([0-9]+)px,\s*\-?([0-9]+)/);
[0, 1].forEach(i => aexis[i] = Number(matches[i + 1]));
};
item.setAttribute("data-pressed", true);
item.setAttribute("data-origin", JSON.stringify([event.pageX + aexis[0], event.pageY + aexis[1]]));
};
this.test_country_unselect = (item, event, pressed) => item.setAttribute("data-pressed", false);
this.test_country_move = (body, event) => {
if(event.pageY < 5 || event.pageX < 5 || event.pageY > body.offsetHeight - 10 || event.pageX > body.offsetWidth - 10){
unselect_all();
return;
};
const item = body.querySelector("svg [data-pressed=true]");
if(item){
const [x, y] = JSON.parse(item.getAttribute("data-origin"));
item.style.transform = "translate(" + (event.pageX - x) + "px," + (event.pageY - y) + "px)";
};
};
construct();
};
mapa_pruebas = new MapaPruebas();
</script>
</head>
<body></body>
</html>

97
README.md
View File

@ -77,9 +77,104 @@ 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 ## Referencias
- Web [VirusTotal](https://www.virustotal.com/) para validación vía Antivirus de Malwares en ficheros - https://www.virustotal.com/ - Web [VirusTotal](https://www.virustotal.com/) para validación vía Antivirus de Malwares en ficheros - https://www.virustotal.com/
- Reproductores Flash: - 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. - [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/ - 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.*

1
version Normal file
View File

@ -0,0 +1 @@
0.0.2