 Me podí encontrar en el profil de Warpre, como Glicimeri. Eso da un poco de pistas de mi pasado. Y sobre todo, bueno, ahí tenéis todos mis datos. Sobre todo invito a que vayáis entrando ya en Mastodon y os vayáis de Twitter, que eso está ya muy feo. Y si queréis ver Crecer la Hierba, podéis entrar en jesuyesares.com. Y si queréis aprender de mapas y Warpre, en wpcarto.com. Y vamos a hablar de mapas. Bueno, por cierto, si la presentación la tenéis en este en este enlace, os la voy a dejar para que podáis echarle un vistazo y ponerla parida. Voy a plantear el problema. Todos añadimos, aunque sea, un mapa en nuestras webs, aunque sea ese mapa de dónde estoy o dónde está mi negocio. Ese mapa, solemos añadirlo creyendo que es lo más fácil del mundo, pero insertar mapas en una web es complicado. ¿Por qué? Pues porque el mapa que insertemos puede hacer que nuestra web vaya lenta. No sé si os habéis percatado, pero deberíais echarle un vistazo y revisar cómo va la página de contacto de la web de vuestro cliente, etcétera. ¿Por qué puede ir lenta? Porque puede los mapas en general, los mapas que solemos meter del proveedor que solemos usar, hacen peticiones externas y nos añaden muchos archivos Javascript, SS, Fuente y otras cosas que no queremos saber. Hacen conexiones con API. De hecho, desde hace un tiempo algunos no obligan a meter la tarjeta, aunque nos dan mucho margen para trabajar con ellos, pero no sabemos cuando ese margen se va a terminar y hay otros problemas. Esto que hemos hablado puede afectar al SEO. Ya sabéis, bajo rendimiento de la web, casi seguro, mal posicionamiento. Pero también puede suponer un problema para la privacidad. Por eso, rastreos que se hacen sin nuestro permiso, etcétera. Y, claro, cortar permiso por privacidad y que no funcione el mapa queda como regulínche. ¿Qué alternativas tenemos? Bueno, podemos no poner el mapa y nos quedamos tampanchos. Ahí no hay problema. Pero, bueno, vamos a tratar de dar otras opciones. Podemos insertar un mapa de Google en Uniframe. Además, hay un truquillo que añade una consulta en el código de ese Iframe y no tienes que meter API. Vale. Bueno, lo veremos. Podemos hacer la captura de la imagen del mapa, pero lo attacho por la Q3 de la solución. O podemos usar plugin. ¿Qué plugin podemos usar? Yo voy a elegir así al azar unos plugins con los que voy a experimentar un poquito. Podemos añadir MapBlock for Google Maps, que es básicamente un plugin que añade un bloque con el que podemos añadir Google Maps. Ya está preparado para meter la API, etcétera. Podemos usar WP OpenStreamMap, que utiliza una base cartográfica distinta a Google. Podemos utilizar LeafletMap, que es otra tecnología que también veremos. O MapsterWP Maps. Este es el Yoast de los mapas. O sea, este es un pedazo de plugin. Pero trabaja con Mapbox, que es otro tipo de tecnología. ¿Por qué puede ponerse lenta a la web? Bueno, lo que estáis viendo, fatal, es lo que se llama una gráfica de cascada. Esto hay mucho, por ejemplo, web page test, que es una página web donde podemos hacer el test de velocidad de nuestra web. Lo que hace es mostrarnos, a lo largo del tiempo, todas las peticiones que se van realizando desde que metemos el dominio en la barra de direcciones y le damos a Enter y empiezan a ir produciéndose las distintas cargas. Y el tiempo que pasa. Si os fijáis, en esta, ahora no se ve muy bien, pero hacia la petición número 11. Desde la petición número 11 pone ya Google, ¿vale? O lo juro. En la petición 227, la última, es también Google. Entonces, estamos hablando de más de 200 peticiones. Y 23 segundos de carga total de la web. A ver, vosotros podéis ya interactuar con la web un poco antes, pero son 23 segundos de carga. Yo ya me he ido. Yo ya directamente me he ido y no. Con lo cual decidí hacer un experimento. Cogí 6 webs, una de ellas la utilizo un poco de control, que simplemente lo que hice fue no ponerle mapas. Todas las web son idénticas. Tienen 10 entradas, las mismas, para que no haya ningún tipo de variación. Y a todas, excepto a las de control, a las web vacías, le pongo 10 mapas. Y vosotros me diréis, bueno, es que nadie en Susano Juicio en la portada de la web va a poner 10 mapas. Bueno, y si yo quiero poner lo que pasa. Vamos a ver lo que tarda la web. En la portada se van a mostrar esas 10 entradas con los 10 mapas. Además, para hacerlo un poco más interesante, 10 mapas, mostrando 10 localizaciones distintas. No vaya a repetirse la cosa, que ya se cachea y pierde la gracia. Y a cada una de las webs, le hago 5 test de velocidad con web page test para sacar un promedio, ¿vale? Y nos ponemos a extraer parámetro. ¿Cuál he elegido yo? Bueno, el First Contentful Paint, lo hacen cada vez más difícil, que básicamente es cuando vosotros llamáis a una web, hay un momento que está la pantalla en blanco. Bueno, pues el momento, el segundo en el que se pinta el primer pixel, ese es el famoso FCP. El document complete time, que es básicamente el tiempo en el que se carga todo aquello que es necesario para que vosotros ya podáis interactuar mientras se siguen cargando otras cosas. Pero vosotros ya podéis interactuar. El time, que es directamente el tiempo total, esos 23 segundos. El tiempo total de carga de la web ya no hay nada más que cargas cuando se para la bolita del navegador arriba. Ese es el time. Las peticiones, las requests, que son esa lista de peticiones que veíamos en la gráfica de cascada y el total bytes, es decir, el peso de la web. Todos los bytes que se descarga a la web. Y vamos a hacer esta distancia, no os vayáis. Esto es simplemente para que veáis un poco, que básicamente cogí todas las medidas. Y en vez de coger la media, cogí la mediana porque es mucho más representativa que la media, ¿vale? Simplemente es decir eso. Y también para que veáis que me pedí un currero. Bueno, hay dos parámetros que si os fijáis en la gráfica, pues tampoco es que nos digan mucho. El FCP, o sea, el primer pixel que se pinta, todos más o menos, con diferencias de décimas de segundos, se pintan más o menos en el mismo instante. Estamos hablando de un segundo, ¿vale? El document complete time, que como hemos dicho, es cuando ya podemos interactuar, casi hay que hacer, como se hace en las carreras, ¿no? El finis este, que ahora no me viene a la mente. Es la fotofinis, efectivamente, gracias. Esto no nos dice absolutamente nada. Pero vamos a ver qué ocurre con los demás. Las torres gemelas son Google, ¿vale? El resto son otra cosa. Vamos a ver qué ocurre. El tiempo de carga total de la web, como podéis ver, si os fijáis, la primera columna es la web en blanco, que en toda es un tiempo mínimo. Las dos siguientes son el mapa de Google añadido con un e-frame, por cierto, spoiler. Lo de añadir cosas con e-frame es una cosa que está muy pasada de moda. Es una tecnología que hace muchísimos años, ya hoy las cosas se hacen de otra manera, pero existe. No lo hagamos. Fijaos que especialmente en el total byte nos descarga un mogollón de peso en archivos. La tercera columna es también un mapa de Google, pero añadido con un plugin, que lo vimos antes en la lista de plugins que os enseñé. Bueno, pues estos dos casos, como podéis ver, destacan del resto. ¿Qué son las otras columnas? Bueno, por las otras columnas son el mapa de... La cuarta es OpenStreamMap. La quinta es Leaflet. Y la sexta es Mapbox. Mapbox lo vamos a tratar un poco aparte, porque Leaflet y OpenStreamMap son equiparables a Google. Mapbox es otra historia. Es un Google muy vitaminado, pero que utiliza una librería distinta de Javascript, y además utiliza un motor de renderización 3D hecho con Javascript, que es una brutalidad. Entonces hace cosas chulísimas. Entonces, bueno, puede ser interesante usarla, pero que sepamos que el tiempo total de carga de la web lo lastra también un poquito. Pero si os fijáis, en el peso y en el número de peticiones, las tres ganadores son Leaflet, OpenStreamMap y Mapbox. En las peticiones, bueno, Google ya está y viendo. Soluciones cogidas, pues de todas ellas, Leaflet. Leaflet, porque OpenStreamMap es solo una base cartográfica, pero Leaflet nos permite hacer muchísimas más cosas. Perdón, Leaflet es una librería Javascript orientada a hacer mapas. A los desarrolladores que estáis por aquí, os invito a utilizarla. Es OpenSource, y además os invito a crear plug-in para WordPress con Leaflet, porque hay muy poco. Lo hay, pero hacen falta más. Esta librería la creó Volodymy Raghafonkin, que es un chico ucraniano que trabaja en Mapbox. Esto ya nos dice algo. El chaval se gana la vida bastante bien, porque está en una muy buena empresa, de la cual tiene un conocimiento que vuelca en una librería OpenSource, con lo cual es bastante interesante. Y además esta librería tiene un montón de plug-in. En vez de plug-in, los vamos a llamar complementos, para no confundir con los plug-in de WordPress. Cuando hablo aquí de plug-in, son trozos de código para Leaflet. Que convierten a Leaflet en una herramienta muy potente. De hecho, casi la convierte en un giz. Un giz, para los que no lo sepáis, es un sistema de información geográfica. Es decir, un sistema con el que podemos hacer procesamiento de datos, visualizándolos con mapa, etcétera. Os voy a enseñar un ejemplo hecho con Leaflet. Esta web la hizo... Bueno, está promovida por Volodimir, nuestro amigo Volodimir, que básicamente, como él es ucraniano, a los pocos días de empezar la guerra, ya estaban hechas este tipo de web, en las que tú podías consultar dónde se había producido un bombardeo y podías leer... Lo vuelvo... Bueno, ya no. Y podías leer, perdón, qué consecuencia había tenido ese bombardeo. Es una web interactiva muy interesante donde vas consultando fácilmente. Así, sí. Bueno, da igual. Bien, ¿qué plugin podemos usar en WordPress? Porque, claro, nos voy a decir, venga, poneros ya con la librería de Leaflet a programar ahí a lo loco. Hay plugin para utilizar Leaflet. Si vais a hacer mapitas muy sencillas, es decir, el típico mapa de dónde está mi negocio, el típico mapa de contacto, etcétera, MapBlock, Leaflet, de Jesúla Zagoitia, que es un compañero de la comunidad de WordPress España, hizo este plugin, que ahora veremos y está bastante bien. Para mapas algo más complejos, Leaflet Map viene a ser como el plugin oficial de Leaflet. Se pueden hacer cosas chulas con él. Si se nos va la olla muy fuerte, junto a Leaflet Map, instalamos Extension for Leaflet Map, y eso ya es drogadura. El de Jesúla Zagoitia, MapBlock, Leaflet, pues ya veis lo sencillito que es. Es un bloque que simplemente añadir, tenéis dos bloques. Uno para añadir un solo marcador y otro para añadir varios marcadores. Tiene algunas configuraciones, como añadirle una etiqueta al marcador con lo que queráis ponerle al marcador cuando alguien lo pinche, y poco más, es muy sencillo. Creo que también podéis cambiar la base cartográfica un poco. El de Leaflet Map ya es un poco más complejo, pero sigue siendo muy sencillo. Tiene como una sección donde tenéis esta ayuda y básicamente seleccionáis el mapa en la zona que queréis mostrar, colocáis el marcador y os da dos short codes que los tenéis ahí. Os cogeis un bloque de short codes en vuestra página de Wordpress y los ponéis consecutivamente. O sea, se hace por capas. El primero la base cartográfica, el segundo el marcador, pero hay más cosas. Que queréis poner muchos marcadores, pues vais poniendo el short code que corresponda, los vais poniendo uno debajo de otro. Que queréis añadir un icono SVG con un dibujito chulo de vuestro marcador, pues cogeis ese short code y lo pegáis debajo. Que queréis cambiar, no se ve, pero queréis cambiar la base cartográfica y queréis que se vea, por ejemplo, la base que parezca una acuarela. Pues la buscáis, ahí os la da, ponéis el short code correspondiente y también lo tenéis. Y de esa forma podéis construir un mapa bastante interesante. Y por último, extension for leaflet mat. Siento que no se vea demasiado bien si lo veis en vuestro ordenador, si lo vais a reconocer. Aquí veréis de todo. O sea, por ejemplo, ¿cuál es lo que ha funcionado la bicicleta? Tiene un plugin para hacer el perfil, cogeis el archivo GPX de vuestro GPS o del móvil, lo exportáis y os genera un perfil de altura del recorrido que habéis hecho. Imaginaos para una web de excursiones o de rutas de bicicleta o lo que sea, lo que puede estar. Tiene para agrupar marcadores. De esto que se ven de pronto cuando vais alejando con el zoom, pues que se ven un solo marcado y ponen cinco, porque hay cinco marcadores, ese tipo de cosas. Por cierto, nos animo a traducirlo. Yo me pegué una currada y lo traduje casi entero, pero están entrando más cadenas. Os invito a traducirlo, que está al 98% por ahí, en español ya. ¿Qué conclusiones sacamos de esto? Bueno, el software libre nos da opciones muy potentes que además no comprometen el rendimiento de nuestra web, no como con Google. Google Maps ofrece más bien poco y a un coste de rendimiento y privacidad alto. A ver, la API de Google Maps da mucho. Se hacen muchas cosas, pero habéis visto el coste en diferentes aspectos. Leaflet, en mi opinión, es la opción más recomendable para un uso básico medio avanzado. Y ahora, si ya necesitamos hacer cosas superbrutas, menciono esto porque Mapbox es medio opensor, por así decirlo. Hay que hacerlo con muchos matices, pero tiene una librería que es opensor. Al final, tira de API, pero para cosas así, es muy interesante, porque tiene un motor 3D muy bueno y permite hacer ciertos efectos, etcétera. Os voy a poner un ejemplo simplemente para que os imaginéis de lo que estoy hablando. Bueno, lo veáis directamente. Este es un mapa contando la historia en mapa y es la historia de Japón. Entonces, os vais haciendo scroll que está llevando a los diferentes puntos del globo con sus fotitos, con sus puntos, con el relieve directamente. Le podéis añadir alguna capa, etcétera. Renderiza un poco lento porque era mi conexión la que no lo permitía. Con lo cual, es una opción también a tener en cuenta. Muchas gracias. Ahí tenéis las charlas y os invito a usar este tipo de software. Y si tenéis alguna pregunta, Ana. No se has preguntado tú? Perdón, no te había visto. Estaba mirando para allá. Me ha llamado la atención que hayas descartado el poner una imagen. Cuando yo esa es la opción que recomiendo a los clientes, uso básico, no hablo de rutas. Por supuesto, no se trata de una imagen de Google Maps. Nosotros lo que hacemos es que nuestro diseñador la diseña de forma acorde al estilo de la página de forma que se puede pulsar y ya el usuario abre el mapa de su elección, bien sea Apple Maps, Google Maps, el que sea. ¿Qué motivo habría adicionalmente para no usar las imágenes y usar leaflet? A mí personalmente no me gusta por tema de accesibilidad. Probablemente hay soluciones que se pueden dar. A mí una solución que no me gusta. Yo sé que hay mucha gente aficionada a hacerlo y es verdad que te quita unos calentamientos de cabeza con los clientes bastante serios. Pero habiendo estas soluciones a mí me parece mejor utilizar una solución de este estilo que añadir una imagen, una captura de imagen. Personalmente ya es cuestión de preferencia, no lo sé. Te he respondido a tu pregunta o si quieres me puedes rebatir. Siendo cuestión de preferencias a final, entiendo que habrá que analizar cada situación. Sobre todo el tema de la accesibilidad. Pero bueno por el tema de la accesibilidad ahora nos tendríamos que poner a ver cuál de estas opciones es más accesible. Que eso también hay que verlo por supuesto. Ahí no me he parado. Y hemos medido que la mayoría de los usuarios no utilizan los mapas nunca jamás. En webs de uso básico, la típica web informativa de donde estamos nadie lo utiliza. Para mí el sobrecargar incluso con leaflet que lo he utilizado todos esos salvos los más avanzados los hemos utilizado y al final hemos visto que tampoco se utilizan demasiado salvo evidentemente para los avanzados. Eso también hay que tenerlo en cuenta. Gracias. Jesús, muchísimas gracias por la charla. Me ha parecido muy valiosa y muy útil. Yo tengo tres proyectos diferentes con mapas y se usan mucho los mapas. Por ejemplo, en dos casos asociaciones que tienen sedes por toda España una por toda España y la otra por todo el mundo y utilizamos Google Maps por desconocimiento. Me gustaría saber y la otra son denominaciones de origen de vino y con las distintas bodegas indicadas y sí que tienen muchas visitas y mucho uso del mapa. Mi pregunta es ¿Se pueden hacer con estas aplicaciones? Ya sé que con programación a medida se puede hacer todo pero como has dicho que esta aplicación con estas aplicaciones se pueden hacer con un nivel medio avanzado es fácil desarrollar áreas geográficas visualizar áreas además de puntos concretos. Sí. Leafland Map te permite hacerlo. No sé si ahora no recuerdo si la versión básica era la que ya lo traía porque es una de las opciones que te puede traer o si a lo mejor tienes que usar la extensión pero en cualquier caso con esos dos plugins seguro lo puedes hacer. Otra cosa distinta es que a lo mejor tienes que meterte un poquito a tunear si el diseño que te ofreces no te gusta mucho pero al final se trata de ver cómo se hace con CSS y tunearlo un poco. En algunos casos, si vas a meter algo especial utiliza el marcador de SVG estoy pensando por ejemplo en el de La Podega y ahí no tienes problemas. Ahí te creas el diseño en SVG y ya tienes el marcador creado y muy fácil además pero sobre todo quizás el donde más tira hacia atrás es en la parte de las bases cartográficas pero además ahí no me he metido Hay herramientas que te permiten crear bases cartográficas como entre comillas el figma de las bases cartográficas que te permiten eso ya es otro mundo pero te permiten hacer cosas brutales supongo que habrás visto ejemplos como por ejemplo el típico mapa de Nueva York que sale todo en blanco y las calles negras pero como si estuviera hecho con tira a línea pues eso está hecho de de esa forma y es súper fácil de utilizar y está bastante bien hablabas de el iframe que era antiguo como lo harías y luego respecto a Google Maps aunque ya no lo has desfenestrado por los tiempos bueno tampoco tanto si no por los tiempos de ejecución me refiero por los tiempos de ejecución si que es verdad que claro tiene algo que ver el que cuando te incrustas un mapa de Google Maps en el cual lógicamente lo has asociado a un establecimiento lo que sea eso puede favorecer a ese establecimiento a nivel de posicionamiento de Google Maps o hay algo de eso por ahí o no tiene nada que ver no sé si he terminado de entender tu pregunta si yo en lugar de utilizar cualquiera de estas opciones que nos da seguimos utilizando Google Maps eso va a favorecer en cierto modo a que ese establecimiento se posicione mejor vale ahora sí te entiendo y luego como lo insertaría si no es un iframe a ver el tema del posicionamiento es que yo pongo en la balanza eso lo estaba investigando porque si el mapa de Google Maps o sea Google nos va a premiar no lo tengo tan claro no he encontrado ningún SEO que lo corroboré ninguno y sin embargo el tiempo de carga desde luego que sí entonces ante algo que es una sospecha que ya sabemos que ni los propios ingenieros de Google saben exactamente como posicionar el algoritmo a saber que uno de los factores que sí que afectan esté fallando este factor a añadir el otro ese es mi criterio más o menos ah perdón, lo del iframe lo del iframe si te quieres llevar una respuesta tipo Wikipedia le preguntas a Casares pero básicamente yo creo que el iframe al no hacer la conexión con la API hay algo que se pierde entre medias y de hecho se ve que hay un como una sobrecarga extraña que no tiene sentido entonces yo ahí veo que no conviene usarlo porque para eso le pones la API total hay margen con Google pues bueno si vas a usar Google pues ya está hay que tener mucho tráfico para que Google te cobre alguien más bueno, muchas gracias por la charla nosotros en un proyecto que tuvimos que meter unos 20 20 mapas por cada paginación porque era un listado de nutricionistas a nivel nacional gracias, era posible hacerlo si, pero no estaban en la home evidentemente pero había que meterlos 20 frames pues era una locura y estamos por las imágenes pero no creando nosotros las imágenes Giro Her.com que son mapas tienen un API o tenían un API en ese tiempo no sé, le ponías la posición y te hacía la captura, lo que te mostraba era la imagen ah vale, osea que había como una capa intermedia que aunque servía el mapa lo que te daba a ti era la imagen era la imagen, no era interactivo sino que a través de la API tu ponías todas las coordenadas y lo que te pintaba era esa imagen y cuando hacías click, si, vas a los mapas de giro nosotros lo modificamos para que no fueran a los mapas de giro sino que nos mostraste sino que cuando hicieras click fuese a la ficha de Google My Business de cada nutricionista por ahí nos quitábamos la velocidad y intentábamos incrementar un poquito el SEO local por ese otro lado pero ya te digo, la API esa yo he vuelto a ver esa web que la hicimos como hace 4 o 5 años y los mapas te pindan ya osea que esa API puede ser que esté ya osuleta ese es el problema, las APIs te las cambian por ejemplo pasa con el mismo Google Maps a mi me ha pasado que de pronto te encuentras que te sale el típico mensajito de sólo para desarrolladores no se que y es que ha cambiado la API de Google Maps ya está, entonces con estas opciones ya sabemos que el cliente de haber conocido esas opciones hubiésemos tirado por ahí del tirón ya sabes que al cliente tú le cuenta hoy que te pueden cobrar y en ese momento él está escuchando la carta de ajuste lo que escuchas es la campanita de que le van a cobrar claro, claro, entonces no y se olvida y cuando le cobran es cuando dice pero a mí porque me cobran se ha olvidado por completo o lo tiene muy claro, por ejemplo el ejemplo que he puesto de Mapbox ahí estás partiendo para proyectos tochos y es un proyecto en el que ya le plantas sobre la mesa y lo que ha puesto con Mapbox es esto en cuanto te pase de tantas peticiones a la API te empiezan a cobrar tanto y se lo dejas bien claro pero claro es que lo que le ofrece Mapbox para cosas tan concretas es perfecto pero ya un cliente normal mejor ofrecerle este tipo de cosas la opción que daba y vosotros era muy buena pero claro tenía dependencia porque no conocíamos esas y no hubiésemos tirado por ahí no creo que ya 20 mapas de con esa con esa carga no creo que se notaban con iframe de google que era una locura era meter 20 web dentro de una web sí, sí, sí, era una locura pues nada, gracias por ya están, muy bien por muchas gracias a todos