{"id":13324,"date":"2025-04-21T07:05:34","date_gmt":"2025-04-21T05:05:34","guid":{"rendered":"https:\/\/www.sigterritoires.fr\/?page_id=13324"},"modified":"2025-04-22T08:28:18","modified_gmt":"2025-04-22T06:28:18","slug":"iniciacao-leaflet","status":"publish","type":"page","link":"https:\/\/www.sigterritoires.fr\/index.php\/pt\/iniciacao-leaflet\/","title":{"rendered":"Inicia\u00e7\u00e3o Leaflet"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Dura\u00e7\u00e3o: aproximadamente 9-12 horas (distribu\u00eddas em 6 sess\u00f5es)<\/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\/pt\/tutorial-leaflet-sessao-1\" title=\"Introdu\u00e7\u00e3o ao Leaflet on-line\">Introdu\u00e7\u00e3o ao Leaflet on-line<\/a><\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Instala\u00e7\u00e3o, estrutura b\u00e1sica de um mapa<\/li>\n\n\n\n<li>&#8211; Adicionando fundos de mapas (OSM, mapas base de terceiros)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Camadas e interatividade (on-line 09 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Pontos, polilinhas, pol\u00edgonos<\/li>\n\n\n\n<li>&#8211; Personaliza\u00e7\u00e3o, eventos, intera\u00e7\u00f5es<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Camadas GeoJSON e dados externos (on-line 14 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Carregando dados GeoJSON<\/li>\n\n\n\n<li>&#8211; Exibi\u00e7\u00e3o condicional, s\u00edmbolos din\u00e2micos<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Controles e ferramentas de interface (on-line 20 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Dicas de ferramentas, popups, legendas, grupos de camadas<\/li>\n\n\n\n<li>&#8211; Controle de camadas e filtros simples<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Eventos e interatividade do usu\u00e1rio (on-line 23 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Reagindo a cliques, hovers, sele\u00e7\u00e3o de itens<\/li>\n\n\n\n<li>&#8211; Criando um mapa interativo simples<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Miniprojeto para um mapa da Web personalizado (on-line 26 \/05\/2025)<\/strong>\n<ul class=\"wp-block-list\">\n<li>&#8211; Criando um miniprojeto<\/li>\n\n\n\n<li>&#8211; Colocando-o on-line (GitHub Pages ou outra solu\u00e7\u00e3o 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>Ao final do curso, voc\u00ea ser\u00e1 capaz de criar um mapa de folheto funcional com seus pr\u00f3prios dados e coloc\u00e1-lo on-line para compartilhar com o mundo!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Envie seu projeto individual &#8211; Sess\u00e3o 6<\/h3>\n\n\n\n<p>Na \u00faltima sess\u00e3o deste m\u00f3dulo, voc\u00ea ter\u00e1 produzido um projeto individual incorporando os principais elementos estudados (camadas, estilos, intera\u00e7\u00f5es, controles etc.).<\/p>\n\n\n\n<p>Convidamos voc\u00ea a compartilhar seu projeto conosco, para que possamos fornecer feedback personalizado e, se desejar, inclu\u00ed-lo entre os exemplos apresentados em nossas futuras publica\u00e7\u00f5es<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Como fa\u00e7o isso?<\/h3>\n\n\n\n<p>Publique seu projeto (c\u00f3digo e mapa) no GitHub ou em um servi\u00e7o equivalente (o m\u00e9todo ser\u00e1 descrito na sess\u00e3o 6) e, em seguida, envie-nos o link para seu reposit\u00f3rio usando o formul\u00e1rio fornecido.<\/p>\n\n\n\n<p>Os projetos ser\u00e3o examinados de acordo com os seguintes crit\u00e9rios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bom uso da API do Leaflet<\/li>\n\n\n\n<li>Legibilidade e organiza\u00e7\u00e3o do c\u00f3digo<\/li>\n\n\n\n<li>Qualidade visual e funcional do mapa<\/li>\n\n\n\n<li>Relev\u00e2ncia do assunto e dos dados escolhidos<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Para acompanhar os exerc\u00edcios do curso, voc\u00ea pode fazer download de um kit inicial em formato zip neste link.<\/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=69f3cce4a45c91777585380\">T\u00e9l\u00e9charger<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<\/div>\n\n\n\n<p><br>Descompacte o conte\u00fado em um diret\u00f3rio de sua escolha, onde poder\u00e1 armazenar todos os arquivos do curso.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todo de ensino para o curso Leaflet<\/h2>\n\n\n\n<p>Este curso introdut\u00f3rio ao Leaflet.js, a biblioteca JavaScript para mapeamento interativo, foi criado para ajud\u00e1-lo a aprender progressivamente, usando uma abordagem ativa, visual e guiada.<\/p>\n\n\n\n<p>Cada sess\u00e3o segue uma estrutura de ensino simples e 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. Apresenta\u00e7\u00e3o de slides<\/h3>\n\n\n\n<p>Cada sess\u00e3o come\u00e7a com uma apresenta\u00e7\u00e3o de slides resumida que define os conceitos essenciais a serem lembrados:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>conceitos ilustrados com exemplos da vida real,<\/li>\n\n\n\n<li>trechos de c\u00f3digo com coment\u00e1rios,<\/li>\n\n\n\n<li>diagramas ou capturas de tela,<\/li>\n\n\n\n<li>\u00edcones e dicas visuais para ajud\u00e1-lo a se lembrar.<\/li>\n<\/ul>\n\n\n\n<p>O objetivo: compreender rapidamente as fun\u00e7\u00f5es e as possibilidades do Leaflet.aflet.<\/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 detalhado<\/h3>\n\n\n\n<p>Cada slide \u00e9 acompanhado por um texto explicativo educacional que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>desenvolve o conte\u00fado da apresenta\u00e7\u00e3o de slides,<\/li>\n\n\n\n<li>explica o \u201cporqu\u00ea\u201d e o \u201ccomo\u201d por tr\u00e1s de cada fun\u00e7\u00e3o,<\/li>\n\n\n\n<li>sugere variantes de c\u00f3digo ou dicas adicionais,<\/li>\n\n\n\n<li>apresenta boas pr\u00e1ticas e erros comuns a serem evitados.<\/li>\n<\/ul>\n\n\n\n<p>Esse texto foi concebido como um aux\u00edlio de leitura aut\u00f4nomo, a ser consultado antes ou depois da sess\u00e3o.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. Exerc\u00edcio pr\u00e1tico ao final da sess\u00e3o<\/h3>\n\n\n\n<p>Ao final de cada sess\u00e3o, voc\u00ea encontrar\u00e1 um exerc\u00edcio pr\u00e1tico para concluir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>aplica\u00e7\u00e3o direta dos conceitos abordados,<\/li>\n\n\n\n<li>cen\u00e1rio realista: mapa de um local, adi\u00e7\u00e3o de marcadores, estilo din\u00e2mico etc.<\/li>\n\n\n\n<li>instru\u00e7\u00f5es claras, com etapas guiadas, se necess\u00e1rio.<\/li>\n<\/ul>\n\n\n\n<p>O exerc\u00edcio \u00e9 uma etapa essencial para consolidar seu aprendizado e testar sua compreens\u00e3o.\u00e9hension.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4. A chave de respostas est\u00e1 dispon\u00edvel\u2026 mas depois do esfor\u00e7o!<\/h3>\n\n\n\n<p>Um link no final do artigo leva voc\u00ea \u00e0 chave de respostas para o exerc\u00edcio, com:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>uma solu\u00e7\u00e3o comentada,<\/li>\n\n\n\n<li>c\u00f3digo funcional para copiar e colar ou adaptar,<\/li>\n\n\n\n<li>\u00e0s vezes variantes ou \u00e1reas para aprimoramento.<\/li>\n<\/ul>\n\n\n\n<p>Recomendamos enfaticamente que voc\u00ea fa\u00e7a o exerc\u00edcio por conta pr\u00f3pria antes de consultar a solu\u00e7\u00e3o.<br>Essa \u00e9 a melhor maneira de melhorar sua autonomia, fortalecer sua mem\u00f3ria e se familiarizar com os conceitos.ure fa\u00e7on de progresser en autonomie, de renforcer votre m\u00e9moire, et de vous approprier les concepts.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Resumindo<\/h3>\n\n\n\n<p>Cada sess\u00e3o do curso \u00e9 baseada em:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>uma apresenta\u00e7\u00e3o visual de slides para ajud\u00e1-lo a entender rapidamente,<\/li>\n\n\n\n<li>um texto explicativo claro para ajud\u00e1-lo a entrar em mais detalhes,<\/li>\n\n\n\n<li>um exerc\u00edcio pr\u00e1tico para ajud\u00e1-lo a experimentar,<\/li>\n\n\n\n<li>uma folha de respostas guiada para ajud\u00e1-lo a se corrigir e ir al\u00e9m.<\/li>\n<\/ul>\n\n\n\n<p>Esse m\u00e9todo permite que voc\u00ea aprenda o Leaflet passo a passo, no seu pr\u00f3prio ritmo, quer voc\u00ea seja um iniciante ou j\u00e1 tenha algum conhecimento b\u00e1sico de HTML\/JavaScript.<strong>pas, \u00e0 votre rythme<\/strong>, que vous soyez d\u00e9butant ou que vous ayez d\u00e9j\u00e0 quelques bases en 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>Pronto para come\u00e7ar?<\/strong><br>V\u00e1 para a primeira sess\u00e3o: <a href=\"https:\/\/www.sigterritoires.fr\/index.php\/pt\/tutorial-leaflet-sessao-1\" title=\"Exibindo um mapa com o Leaflet!\">Exibindo um mapa com o Leaflet!<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Dura\u00e7\u00e3o: aproximadamente 9-12 horas (distribu\u00eddas em 6 sess\u00f5es) Programa : Resultado esperado Ao final do curso, voc\u00ea ser\u00e1 capaz de criar um mapa de folheto funcional com seus pr\u00f3prios dados e coloc\u00e1-lo on-line para compartilhar com&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,"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-13324","page","type-page","status-publish","hentry"],"aioseo_notices":[],"campaignId":"","jetpack_shortlink":"https:\/\/wp.me\/P6XU0A-3sU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/pages\/13324","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=13324"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/pages\/13324\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=13324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}