Contenu <\/p>\nToggle<\/span>

Dura\u00e7\u00e3o: aproximadamente 9-12 horas (distribu\u00eddas em 6 sess\u00f5es)<\/a>
- Programa :<\/a><\/li>
- Resultado esperado<\/a><\/li>
- Envie seu projeto individual – Sess\u00e3o 6<\/a><\/li>
- Como fa\u00e7o isso?<\/a><\/li><\/ul><\/li>
- M\u00e9todo de ensino para o curso Leaflet<\/a>
  - 1. Apresenta\u00e7\u00e3o de slides<\/a><\/li>
  - 2. Texto explicativo detalhado<\/a><\/li>
  - 3. Exerc\u00edcio pr\u00e1tico ao final da sess\u00e3o<\/a><\/li>
  - 4. A chave de respostas est\u00e1 dispon\u00edvel\u2026 mas depois do esfor\u00e7o!<\/a><\/li>
  - Resumindo<\/a><\/li><\/ul><\/li>
  - Pronto para come\u00e7ar? V\u00e1 para a primeira sess\u00e3o: Exibindo um mapa com o Leaflet!<\/a><\/li><\/ul><\/nav><\/div>\n
    <\/span>Dura\u00e7\u00e3o: aproximadamente 9-12 horas (distribu\u00eddas em 6 sess\u00f5es)<\/span><\/h2>\n\n\n\n
    <\/span>Programa :<\/span><\/h3>\n\n\n\n
    \n
    Introdu\u00e7\u00e3o ao Leaflet on-line<\/a><\/strong>\n
    \n
    – Instala\u00e7\u00e3o, estrutura b\u00e1sica de um mapa<\/li>\n\n\n\n
    – Adicionando fundos de mapas (OSM, mapas base de terceiros)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Camadas e interatividade<\/a> <\/strong>\n
    \n
    – Pontos, polilinhas, pol\u00edgonos<\/li>\n\n\n\n
    – Personaliza\u00e7\u00e3o, eventos, intera\u00e7\u00f5es<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Camadas GeoJSON e dados externos <\/a><\/strong>\n
    \n
    – Carregando dados GeoJSON<\/li>\n\n\n\n
    – Exibi\u00e7\u00e3o condicional, s\u00edmbolos din\u00e2micos<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Controles e ferramentas de interface (on-line 20 \/05\/2025)<\/strong>\n
    \n
    – Dicas de ferramentas, popups, legendas, grupos de camadas<\/li>\n\n\n\n
    – Controle de camadas e filtros simples<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Eventos e interatividade do usu\u00e1rio (on-line 23 \/05\/2025)<\/strong>\n
    \n
    – Reagindo a cliques, hovers, sele\u00e7\u00e3o de itens<\/li>\n\n\n\n
    – Criando um mapa interativo simples<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    Miniprojeto para um mapa da Web personalizado (on-line 26 \/05\/2025)<\/strong>\n\n
    – Criando um miniprojeto<\/li>\n\n\n\n
    – Colocando-o on-line (GitHub Pages ou outra solu\u00e7\u00e3o gratuita)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n\n\n\n
    <\/span>Resultado esperado<\/span><\/h3>\n\n\n\n
    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
    <\/span>Envie seu projeto individual – Sess\u00e3o 6<\/span><\/h3>\n\n\n\n
    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
    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
    <\/span>Como fa\u00e7o isso?<\/span><\/h3>\n\n\n\n
    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
    Os projetos ser\u00e3o examinados de acordo com os seguintes crit\u00e9rios:<\/p>\n\n\n\n
    \n
    Bom uso da API do Leaflet<\/li>\n\n\n\n
    Legibilidade e organiza\u00e7\u00e3o do c\u00f3digo<\/li>\n\n\n\n
    Qualidade visual e funcional do mapa<\/li>\n\n\n\n
    Relev\u00e2ncia do assunto e dos dados escolhidos<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    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
    [wpdm_package id=’13356′]<\/p>\n\n\n\n
    
    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
    <\/span>M\u00e9todo de ensino para o curso Leaflet<\/span><\/h2>\n\n\n\n
    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
    Cada sess\u00e3o segue uma estrutura de ensino simples e eficaz:<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>1. Apresenta\u00e7\u00e3o de slides<\/span><\/h3>\n\n\n\n
    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
    \n
    conceitos ilustrados com exemplos da vida real,<\/li>\n\n\n\n
    trechos de c\u00f3digo com coment\u00e1rios,<\/li>\n\n\n\n
    diagramas ou capturas de tela,<\/li>\n\n\n\n
    \u00edcones e dicas visuais para ajud\u00e1-lo a se lembrar.<\/li>\n<\/ul>\n\n\n\n
    O objetivo: compreender rapidamente as fun\u00e7\u00f5es e as possibilidades do Leaflet.aflet.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>2. Texto explicativo detalhado<\/span><\/h3>\n\n\n\n
    Cada slide \u00e9 acompanhado por um texto explicativo educacional que:<\/p>\n\n\n\n
    \n
    desenvolve o conte\u00fado da apresenta\u00e7\u00e3o de slides,<\/li>\n\n\n\n
    explica o \u201cporqu\u00ea\u201d e o \u201ccomo\u201d por tr\u00e1s de cada fun\u00e7\u00e3o,<\/li>\n\n\n\n
    sugere variantes de c\u00f3digo ou dicas adicionais,<\/li>\n\n\n\n
    apresenta boas pr\u00e1ticas e erros comuns a serem evitados.<\/li>\n<\/ul>\n\n\n\n
    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
    \n\n\n\n
    <\/span>3. Exerc\u00edcio pr\u00e1tico ao final da sess\u00e3o<\/span><\/h3>\n\n\n\n
    Ao final de cada sess\u00e3o, voc\u00ea encontrar\u00e1 um exerc\u00edcio pr\u00e1tico para concluir:<\/p>\n\n\n\n
    \n
    aplica\u00e7\u00e3o direta dos conceitos abordados,<\/li>\n\n\n\n
    cen\u00e1rio realista: mapa de um local, adi\u00e7\u00e3o de marcadores, estilo din\u00e2mico etc.<\/li>\n\n\n\n
    instru\u00e7\u00f5es claras, com etapas guiadas, se necess\u00e1rio.<\/li>\n<\/ul>\n\n\n\n
    O exerc\u00edcio \u00e9 uma etapa essencial para consolidar seu aprendizado e testar sua compreens\u00e3o.\u00e9hension.<\/p>\n\n\n\n
    \n\n\n\n
    <\/span>4. A chave de respostas est\u00e1 dispon\u00edvel\u2026 mas depois do esfor\u00e7o!<\/span><\/h3>\n\n\n\n
    Um link no final do artigo leva voc\u00ea \u00e0 chave de respostas para o exerc\u00edcio, com:<\/p>\n\n\n\n
    \n
    uma solu\u00e7\u00e3o comentada,<\/li>\n\n\n\n
    c\u00f3digo funcional para copiar e colar ou adaptar,<\/li>\n\n\n\n
    \u00e0s vezes variantes ou \u00e1reas para aprimoramento.<\/li>\n<\/ul>\n\n\n\n
    Recomendamos enfaticamente que voc\u00ea fa\u00e7a o exerc\u00edcio por conta pr\u00f3pria antes de consultar a solu\u00e7\u00e3o.
    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
    \n\n\n\n
    <\/span>Resumindo<\/span><\/h3>\n\n\n\n
    Cada sess\u00e3o do curso \u00e9 baseada em:<\/p>\n\n\n\n
    \n
    uma apresenta\u00e7\u00e3o visual de slides para ajud\u00e1-lo a entender rapidamente,<\/li>\n\n\n\n
    um texto explicativo claro para ajud\u00e1-lo a entrar em mais detalhes,<\/li>\n\n\n\n
    um exerc\u00edcio pr\u00e1tico para ajud\u00e1-lo a experimentar,<\/li>\n\n\n\n
    uma folha de respostas guiada para ajud\u00e1-lo a se corrigir e ir al\u00e9m.<\/li>\n<\/ul>\n\n\n\n
    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.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
    \n\n\n\n
    <\/span>Pronto para come\u00e7ar?<\/strong>
    V\u00e1 para a primeira sess\u00e3o: Exibindo um mapa com o Leaflet!<\/a><\/span><\/h2>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":1,"featured_media":13140,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3021],"tags":[2955,2937,2935,2809,2239],"class_list":["post-13136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webmapping-pt","tag-introducao","tag-leaflet-pt","tag-programa","tag-tutorial-pt","tag-webmapping-pt"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t

<\/span>Programa :<\/span><\/h3>\n\n\n\n\nIntrodu\u00e7\u00e3o ao Leaflet on-line<\/a><\/strong>\n\n– Instala\u00e7\u00e3o, estrutura b\u00e1sica de um mapa<\/li>\n\n\n\n– Adicionando fundos de mapas (OSM, mapas base de terceiros)<\/li>\n<\/ul>\n<\/li>\n\n\n\n