{"id":13320,"date":"2025-04-21T07:03:39","date_gmt":"2025-04-21T05:03:39","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?page_id=13320"},"modified":"2025-05-06T11:08:45","modified_gmt":"2025-05-06T09:08:45","slug":"iniciacion-leaflet","status":"publish","type":"page","link":"https:\/\/www.sigterritoires.fr\/index.php\/es\/iniciacion-leaflet\/","title":{"rendered":"Iniciaci\u00f3n Leaflet"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Duraci\u00f3n: aproximadamente 9-12 horas (repartidas en 6 sesiones)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Programa :<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.sigterritoires.fr\/index.php\/es\/tutorial-leaflet-sesion-1\" title=\"Introducci\u00f3n a Leaflet online\">Introducci\u00f3n a Leaflet online<\/a><\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Instalaci\u00f3n, estructura b\u00e1sica de un mapa<\/li>\n\n\n\n<li>&#8211; Adici\u00f3n de fondos de mapa (OSM, mapas base de terceros)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.sigterritoires.fr\/index.php\/es\/tutorial-leaflet-sesion-2\" title=\"Capas e interactividad \">Capas e interactividad <\/a><\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Puntos, polil\u00edneas, pol\u00edgonos<\/li>\n\n\n\n<li>&#8211; Personalizaci\u00f3n, eventos, interacciones<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Capas GeoJSON y datos externos (online 08 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Carga de datos GeoJSON<\/li>\n\n\n\n<li>&#8211; Visualizaci\u00f3n condicional, s\u00edmbolos din\u00e1micos<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Controles y herramientas de interfaz (online 12 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Tooltips, ventanas emergentes, leyendas, grupos de capas<\/li>\n\n\n\n<li>&#8211; Control de capas y filtros sencillos<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Eventos de usuario e interactividad (en l\u00ednea el 19 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Reacci\u00f3n ante clics, hovers, selecci\u00f3n de elementos<\/li>\n\n\n\n<li>&#8211; Creaci\u00f3n de un mapa interactivo sencillo<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Miniproyecto de mapa web personalizado (en l\u00ednea el 22 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Creaci\u00f3n de un miniproyecto<\/li>\n\n\n\n<li>&#8211; Puesta en l\u00ednea (GitHub Pages u otra soluci\u00f3n gratuita)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Resultado esperado<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Al final del curso, ser\u00e1s capaz de crear un mapa de Leaflet con tus propios datos y ponerlo en l\u00ednea para compartirlo con el mundo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Env\u00ede su proyecto individual &#8211; Sesi\u00f3n 6<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En la \u00faltima sesi\u00f3n de este m\u00f3dulo, habr\u00e1 realizado un proyecto individual que incorpore los principales elementos estudiados (capas, estilos, interacciones, controles, etc.).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Te invitamos a compartir tu proyecto con nosotros, para que podamos darte un feedback personalizado y, si lo deseas, incluirlo entre los ejemplos que aparecer\u00e1n en nuestras futuras publicaciones<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfC\u00f3mo hacerlo?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Publique su proyecto (c\u00f3digo y mapa) en GitHub o en un servicio equivalente (el m\u00e9todo se describir\u00e1 en la sesi\u00f3n 6) y, a continuaci\u00f3n, env\u00edenos el enlace a su repositorio mediante el formulario previsto a tal efecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Los proyectos se examinar\u00e1n de acuerdo con los siguientes criterios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buena utilizaci\u00f3n de la API del Leaflet<\/li>\n\n\n\n<li>Legibilidad y organizaci\u00f3n del c\u00f3digo<\/li>\n\n\n\n<li>Calidad visual y funcional del mapa<\/li>\n\n\n\n<li>Pertinencia del tema y de los datos elegidos<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Para los ejercicios del curso, puede descargar un kit de ini<a href=\"https:\/\/www.nasca.ovh\/downloads\/leaflet_starter_kit.zip\" title=\"descargar un kit de inicio\">cio<\/a> en formato zip desde este enlace.<\/p>\n\n\n<div class='w3eden'><!-- WPDM Link Template: Default Template -->\n\n<div class=\"link-template-default card mb-2\">\n    <div class=\"card-body\">\n        <div class=\"media\">\n            <div class=\"mr-3 img-48\"><img decoding=\"async\" class=\"wpdm_icon\" alt=\"Ic\u00f4ne\" src=\"https:\/\/www.sigterritoires.fr\/wp-content\/plugins\/download-manager\/assets\/file-type-icons\/zip.svg\" \/><\/div>\n            <div class=\"media-body\">\n                <h3 class=\"package-title\"><a href='https:\/\/www.sigterritoires.fr\/index.php\/download\/starter-kit\/'>starter kit<\/a><\/h3>\n                <div class=\"text-muted text-small\"><i class=\"fas fa-copy\"><\/i> 1 fichier\u00b7s <i class=\"fas fa-hdd ml-3\"><\/i> 0.00 KB<\/div>\n            <\/div>\n            <div class=\"ml-3\">\n                <a class='wpdm-download-link download-on-click btn btn-primary ' rel='nofollow' href='#' data-downloadurl=\"https:\/\/www.sigterritoires.fr\/index.php\/download\/starter-kit\/?wpdmdl=13356&refresh=6a14467cb10b11779713660\">T\u00e9l\u00e9charger<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><br>Descomprima el contenido en un directorio de su elecci\u00f3n donde pueda almacenar todos los archivos de este curso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo de ense\u00f1anza del curso Leaflet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este curso de introducci\u00f3n a Leaflet.js, la librer\u00eda JavaScript para mapeo interactivo, est\u00e1 dise\u00f1ado para ayudarle a aprender de forma progresiva, utilizando un enfoque activo, visual y guiado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada sesi\u00f3n sigue una estructura did\u00e1ctica sencilla y eficaz:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1. Presentaci\u00f3n de diapositivas<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cada sesi\u00f3n comienza con una presentaci\u00f3n de diapositivas en la que se resumen los conceptos esenciales que hay que recordar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>conceptos ilustrados con ejemplos reales,<\/li>\n\n\n\n<li>extractos de c\u00f3digo comentados,<\/li>\n\n\n\n<li>diagramas o capturas de pantalla,<\/li>\n\n\n\n<li>iconos y pistas visuales para ayudarle a recordar.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo: comprender r\u00e1pidamente las funciones y posibilidades de Leaflet.let.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2. Texto explicativo detallado<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cada diapositiva va acompa\u00f1ada de un texto explicativo did\u00e1ctico que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>desarrolla el contenido de la diapositiva,<\/li>\n\n\n\n<li>explica el \u00abpor qu\u00e9\u00bb y el \u00abc\u00f3mo\u00bb de cada funci\u00f3n,<\/li>\n\n\n\n<li>sugiere variantes de c\u00f3digo o consejos adicionales,<\/li>\n\n\n\n<li>introduce buenas pr\u00e1cticas y errores comunes que conviene evitar.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este texto est\u00e1 concebido como una ayuda a la lectura aut\u00f3noma, que puede consultarse antes o despu\u00e9s de la sesi\u00f3n.\u00e8s la s\u00e9ance.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. Ejercicio pr\u00e1ctico al final de la sesi\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Al final de cada sesi\u00f3n, encontrar\u00e1 un ejercicio pr\u00e1ctico para completar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>aplicaci\u00f3n directa de los conceptos tratados,<\/li>\n\n\n\n<li>escenario realista: mapa de una ubicaci\u00f3n, adici\u00f3n de marcadores, estilo din\u00e1mico, etc.<\/li>\n\n\n\n<li>instrucciones claras, con pasos guiados si es necesario.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Los ejercicios son una etapa esencial para afianzar su aprendizaje y poner a prueba su comprensi\u00f3n.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4. Clave de respuestas disponible\u2026 \u00a1pero despu\u00e9s del esfuerzo!<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un enlace al final del art\u00edculo le lleva a la clave de respuestas del ejercicio, con:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>una soluci\u00f3n comentada,<\/li>\n\n\n\n<li>c\u00f3digo funcional para copiar y pegar o adaptar,<\/li>\n\n\n\n<li>a veces variantes o \u00e1reas de mejora.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Le recomendamos encarecidamente que realice el ejercicio usted mismo antes de consultar la soluci\u00f3n.<br>Es la mejor manera de mejorar tu autonom\u00eda, reforzar tu memoria y asimilar los conceptos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">En resumen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cada sesi\u00f3n del curso se basa en:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>una presentaci\u00f3n visual de diapositivas para ayudarle a comprender r\u00e1pidamente,<\/li>\n\n\n\n<li>un texto explicativo claro para ayudarle a profundizar,<\/li>\n\n\n\n<li>un ejercicio pr\u00e1ctico para ayudarle a experimentar,<\/li>\n\n\n\n<li>una hoja de respuestas guiadas para ayudarle a corregirse y a ir m\u00e1s lejos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este m\u00e9todo le permite aprender Leaflet paso a paso, a su ritmo, tanto si es principiante como si ya tiene conocimientos b\u00e1sicos de HTML\/JavaScript.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00bfListo para empezar?<br>Ir a la primera sesi\u00f3n: <a href=\"https:\/\/www.sigterritoires.fr\/index.php\/es\/tutorial-leaflet-sesion-1\" title=\"\u00a1Mostrar un mapa con Leaflet!\">\u00a1Mostrar un mapa con Leaflet!<\/a><\/strong><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Duraci\u00f3n: aproximadamente 9-12 horas (repartidas en 6 sesiones) Programa : Resultado esperado Al final del curso, ser\u00e1s capaz de crear un mapa de Leaflet con tus propios datos y ponerlo en l\u00ednea para compartirlo con el&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-13320","page","type-page","status-publish","hentry"],"aioseo_notices":[],"campaignId":"","jetpack_shortlink":"https:\/\/wp.me\/P6XU0A-3sQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/pages\/13320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=13320"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/pages\/13320\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}