As melhores ferramentas para reportagem multimídia Fri, 31 Oct 2014 18:57:58 +0000 pt-BR hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/pt/2013/08/how-to-map-photos-using-openstreetmap-and-tilemill/ Mikel Maron Wed, 14 Aug 2013 21:29:27 +0000 Maps cartography geotagging map design Open Street Map https://geojournalism.oeco.org.br/?p=268 <p>Esse guia em quatro passos mostra uma vis&#227;o geral do processo todo e a rela&#231;&#227;o entre quatro ferramentas para construir um mapa de fotos. Vamos abordar os pontos principais e destacar como as ferramentas conectam-se aos dados abertos. Introdu&#231;&#227;o Recentemente, organizamos um divertido compartilhamento de habilidades com o Map Kibera, e depois novamente com o [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2013/08/how-to-map-photos-using-openstreetmap-and-tilemill/">Como mapear fotos utilizando o OpenStreetMap e o TileMill</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p>Esse guia em quatro passos mostra uma visão geral do processo todo e a relação entre quatro ferramentas para construir um mapa de fotos. Vamos abordar os pontos principais e destacar como as ferramentas conectam-se aos dados abertos.<span id="more-268"></span></p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introdução</a></h2> <p>Recentemente, organizamos um divertido compartilhamento de habilidades com o <a href="https://mapkibera.org/" rel="nofollow">Map Kibera</a>, e depois novamente com o <a href="https://www.transparentchennai.com/" rel="nofollow">Transparent Chennai</a>. A ideia é utilizar o OpenStreetMap e o TileMill para criar um mapa interativo de fotos. Aqui está o <a href="https://a.tiles.mapbox.com/v3/groundtruth.map-vx5bbbu4/page.html" rel="nofollow">resultado simples</a> do trabalho com o Map Kibera.</p> <p><strong>Quer aprender a criar algo assim?</strong> Esse guia em quatro passos mostra uma visão geral do processo todo e a relação entre quatro ferramentas para construir um mapa de fotos. Vamos abordar os pontos principaise destacar como as ferramentas conectam-se aos dados abertos. Eu incluí os links para outras fontes que trazem mais detalhes sobre a utilização de cada uma delas.</p> <h2 class="summary-item" id="subir-fotos-para-o-flickr"><a href="#subir-fotos-para-o-flickr">Subir fotos para o Flickr</a></h2> <ul> <li>O que você precisa: Uma foto de algum lugar para mapear</li> <li>O que você terá: Um link para a página da foto e uma pré-visualização da foto.</li> <li>Saiba mais: <a href="https://www.flickr.com/help/photos/" rel="nofollow">Flickr Help</a></li> </ul> <p>Se você não tem uma conta no <a href="https://flickr.com/" rel="nofollow">Flickr</a>, crie uma, é uma maneira fácil de compartilhar imagens. Carregue a foto de um lugar. Para o nosso exemplo, subimos esta <a href="https://www.flickr.com/photos/mikel_maron/9420814521/" rel="nofollow">foto do iHub em Nairobi</a>, tirada durante a eleição do projeto Uchaguzi. Criamos um <a href="https://www.flickr.com/groups/2274104@N21/" rel="nofollow">grupo do Map Kibera</a> para colocar nossas fotos coletivas.<em><br/> </em></p> <div class="wp-caption aligncenter" id="attachment_664" style="width: 727px"><a href="https://geojournalism.org/wp-content/uploads/2013/08/9508348007_2c645cceeb_b.jpg"><img alt="Credit: Mikel Maron, Ground Truth Initiative" aria-describedby="caption-attachment-664" class="wp-image-664" decoding="async" fetchpriority="high" height="354" sizes="(max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/9508348007_2c645cceeb_b.jpg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/9508348007_2c645cceeb_b.jpg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/9508348007_2c645cceeb_b-300x148.jpg 300w" width="717"/></a><p class="wp-caption-text" id="caption-attachment-664">Credit: Mikel Maron, Ground Truth Initiative</p></div> <p><span style="font-size: 13px;line-height: 19px">A partir da sua página de fotos, clique no botão </span><strong style="font-size: 13px;line-height: 19px">Share</strong><span style="font-size: 13px;line-height: 19px"> e depois marque o link </span><strong style="font-size: 13px;line-height: 19px">Grab the HTML/BBCode</strong><span style="font-size: 13px;line-height: 19px">. Selecione o tamanho “Small” para a imagem e copie e cole o código HTML no editor de texto/processador de palavras. Precisamos somente do link da imagem, que está marcada com a etiqueta </span><strong style="font-size: 13px;line-height: 19px"><img alt="" decoding="async" src="..."/></strong><span style="font-size: 13px;line-height: 19px"> .</span></p> <p>O resultado que você deve ter é um link para a página de fotos, e a pré-visualização da foto. Algo como abaixo:</p> <pre><code>https://www.flickr.com/photos/mikel_maron/9420814521/ https://farm4.staticflickr.com/3673/9420814521_f71924dd4e.jpg</code></pre> <h2 class="summary-item" id="editar-com-openstreetmap"><a href="#editar-com-openstreetmap">Editar com OpenStreetMap</a></h2> <ul> <li>O que você precisa: Localidade da sua foto.</li> <li>O que você terá: O OpenStreetMap linkado à imagem.</li> <li>Saiba mais: <a href="https://learnosm.org/en/" rel="nofollow">LearnOSM</a></li> </ul> <p>Agora, adiante com o <a href="https://osm.org/" rel="nofollow">OpenStreetMap</a>. Se necessário, inscreva-se e veja os passos básicos no <a href="https://learnosm.org/en/" rel="nofollow">LearnOSM</a>. Também tente o iD Walkthrough: navegue para uma área, clique em <strong>Edit </strong>(mais especificamente, clique na flecha para baixo e selecione “Edit with iD”) e siga o restante do tutorial de edição.</p> <p>Agora abra novamente a aba <strong>View</strong>. Digite o nome da localidade da sua foto e procure. No nosso caso, é “iHub”. Procure no resultado da busca e encontre o item correto, <em>devem haver mais de um com o mesmo nome</em>, depois clique em <strong>View Details</strong> para abrir a <a href="https://www.openstreetmap.org/browse/node/673988331" rel="nofollow">página de navegação para aquele contexto</a>. Esta página mostra a localidade e as etiquetas para aquele item e, no canto inferior direito, clique sobre o link <strong>Edit Node</strong>.</p> <p><em>Geralmente você vai precisar incluir um novo aspecto no OSM, ao invés de adicionar a um existente. Dê uma olhada em outros guias para saber mais.</em></p> <div class="wp-caption aligncenter" id="attachment_651" style="width: 727px"><a href="https://geojournalism.org/wp-content/uploads/2013/08/9511330104_a4bdec07e4_b.jpg"><img alt="Credit: Mike Maron" aria-describedby="caption-attachment-651" class="wp-image-651" decoding="async" height="365" sizes="(max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/9511330104_a4bdec07e4_b.jpg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/9511330104_a4bdec07e4_b.jpg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/9511330104_a4bdec07e4_b-300x152.jpg 300w" width="717"/></a><p class="wp-caption-text" id="caption-attachment-651">Crédito: Mike Maron</p></div> <p>No painel da esquerda, clique em All tags e depois no sinal + para adicionar etiquetas para direcionar à imagem no Flickr. Inclua “image” e em seguida o link para a página de fotos do Flickr. Vai aparecer assim:</p> <pre> image=https://www.flickr.com/photos/mikel_maron/9420814521/</pre> <p>Clique em <strong>Save</strong>, inclua uma mensagem que tenha a ver e clique em <strong>Save</strong> novamente.</p> <p><strong>Ressalvas</strong></p> <p>Importante: quando você estiver tirando as fotos, confirme que está gravando qual foto vai com qual objeto! Pode ficar confuso se houver muitas delas.</p> <h2 class="summary-item" id="extracao-com-overpass-turbo"><a href="#extracao-com-overpass-turbo">Extração com Overpass Turbo</a></h2> <ul> <li>O que você precisa: Uma respiração profunda (inspire agora!)</li> <li>O que você terá: Um arquivo GeoJSON com imagens e localidades.</li> <li>Saiba mais: Página de informações do Overpass Turbo</li> </ul> <p>O portal do OpenStreetMap mostra uma visão geral dos dados que você incluir. O OSM é poderoso porque permite que você visualize os dados e os utilize da maneira que quiser. Este passo é sobre como extrair os dados do OSM e usá-los em outra ferramenta.</p> <div class="wp-caption aligncenter" id="attachment_652" style="width: 727px"><a href="https://geojournalism.org/wp-content/uploads/2013/08/9508838929_56cae156ed_b.jpg"><img alt="Crédito: MIkel Maron" aria-describedby="caption-attachment-652" class="wp-image-652" decoding="async" height="365" sizes="(max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/9508838929_56cae156ed_b.jpg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/9508838929_56cae156ed_b.jpg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/9508838929_56cae156ed_b-300x152.jpg 300w" width="717"/></a><p class="wp-caption-text" id="caption-attachment-652">Credito: MIkel Maron</p></div> <p>Abra o <a href="https://overpass-turbo.eu/?key=image&amp;template=key-type&amp;type=node" target="_blank">Overpass Turbo</a> com a opção de procurar pelos códigos que contenham a chave “image”. <em>Você pode encontrar links para outras etiquetas explorando o <a href="https://taginfo.openstreetmap.org/" target="_blank">TagInfo</a>, uma outra ferramenta ótima que vou abordar numa próxima oportunidade.</em> Essa opção de página que você abriu tem dois painéis: à esquerda o “Query” e à direita o “Map”. Procure e navegue pelo mapa até a região onde seus itens estão localizados. No nosso caso é “Nairobi”.</p> <p>A pergunta para conseguir extrair os dados pode ficar complicada; você verá as informações da tela à esquerda, algo que se parece mais ou menos como:</p> <pre>{{key=image}} {{type=node}}</pre> <p>Agora, clique em <strong>Run</strong>. O programa Overpass vai executar por alguns segundos e depois mostrar os resultados no mapa. Você pode clicar sobre os pontos para obter mais informações de cada item. Agora, clique no menu <strong>Export</strong>, depois no painel <strong>Data</strong> e finalmente em <strong>GeoJSON</strong>.Isso deve ser o gatilho para o download dos resultados e a exposição dos resultados na caixa de diálogo (alguns navegadores não farão download automaticamente, então copie e cole o GeoJSON do diálogo num arquivo e salve). Preste atenção na localização do arquivo GeoJSON, pois vamos precisar dele no próximo passo.</p> <h2 class="summary-item" id="preparar-o-geojson"><a href="#preparar-o-geojson">Preparar o GeoJSON</a></h2> <ul> <li>O que você precisa: Do GeoJSON criado com o Overpass Turbo.</li> <li>que você terá: GeoJSON com links para visualização prévia de imagens</li> </ul> <p>Para fazer o nosso mapa, precisamos de não somente links para o Flickr para as imagens que baixamos, mas também de um link para a visualização prévia da imagem em si. O <a href="https://mikelmaron.github.io/geojson-flickr-groomer/" target="_blank">GeoJSON Flickr Groomer</a>é uma ferramenta simples para criar estes links.</p> <div class="wp-caption aligncenter" id="attachment_653" style="width: 727px"><a href="https://geojournalism.org/wp-content/uploads/2013/08/9628249541_81308bae87_b.jpg"><img alt="Credit: Mikel Maron" aria-describedby="caption-attachment-653" class="wp-image-653" decoding="async" height="538" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/9628249541_81308bae87_b.jpg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/9628249541_81308bae87_b.jpg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/9628249541_81308bae87_b-300x225.jpg 300w" width="717"/></a><p class="wp-caption-text" id="caption-attachment-653">Credito: Mikel Maron</p></div> <p>Abra o arquivo GeoJSON que você baixou do Overpass Turbo no seu editor de texto. Copie todo o conteúdo e cole na primeira caixa de texto. <strong>Clique aqui para executar</strong>, depois em <strong>Download groomed-geojson.json</strong>. Preste atenção na localização do arquivo GeoJSON, pois vamos precisar no passo final.</p> <h2 class="summary-item" id="faca-um-mapa-com-tilemill"><a href="#faca-um-mapa-com-tilemill">Faça um Mapa com TileMill</a></h2> <ul> <li>O que você precisa: GeoJSON modificado pelo GeoJSON Flickr Groomer.</li> <li>O que você terá: Um mapa interativo (finalmente!)</li> <li>Saiba mais: <a href="https://www.mapbox.com/tilemill/docs/crashcourse/introduction/" target="_blank">TileMill Crash Course</a> e <a href="https://www.mapbox.com/help/#help-mapbox" target="_blank">MapBox Help</a></li> </ul> <p>O TileMill é uma ferramenta para desenhar mapas. Ele oferece muitos recursos, então dê uma olhada no Crash Course e outros guias no site do TileMill. <a href="https://www.mapbox.com/tilemill/docs/install" target="_blank">Instale o TileMill</a>,inicie e crie um novo projeto; desmarque a opção de dados padrão (<strong>Default</strong>). Agora, abaixo, à esquerda, clique no botão <strong>Layers</strong> e depois em <strong>Add Layer</strong>. No campo <strong>Datasource</strong>, navegue e encontre o arquivo GeoJSON que baixou do GeoJSON Flickr Groomer. Clique em <strong>Save &amp; Style</strong> e deve aparecer um mapa com os seus pontos no lado esquerdo da tela. Para aproximar somente da área em que estão os seus dados, abra novamente a caixa de camadas e clique sobre a lente de aumento próxima à camada selecionada.</p> <div class="wp-caption aligncenter" id="attachment_654" style="width: 727px"><a href="https://geojournalism.org/wp-content/uploads/2013/08/9511708544_e5c3d10335_b.jpg"><img alt="Crédito: Mikel Maron" aria-describedby="caption-attachment-654" class="wp-image-654" decoding="async" height="394" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/9511708544_e5c3d10335_b.jpg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/9511708544_e5c3d10335_b.jpg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/9511708544_e5c3d10335_b-300x164.jpg 300w" width="717"/></a><p class="wp-caption-text" id="caption-attachment-654">Credit: Mikel Maron</p></div> <p>À direita você verá o CartoCSS, que dá o estilo ao seu mapa. Queremos fazer algumas pequenas mudanças, deixando o fundo transparente (por padrão, é azul-marinho). Aqui está como o CartoCSS aparece:</p> <pre>Map { background-color: transparent; } #images { marker-width:6; marker-fill:#f45; marker-line-color:#813; marker-allow-overlap:true; }</pre> <p>Agora, inclua <strong>Interatividade</strong> com a caixa de diálogo, que pode ser encontrada ao clicar sobre a pequena mão no kit de ferramenta, na parte inferior esquerda. Clique em <strong>Full</strong>. Aqui você pode especificar o que aparece quando você clia sobre um ponto. Todas as etiquetas dessas características do OSM estão disponíveis, você as verá na lista na parte de baixo da caixa, na parte “Mustache”. Nós deixamos o conteúdo como o abaixo, para mostrar o nome da característica mais uma foto relacionada.</p> <pre>{{{name}}} <a href="%7B%7B%7Bimage%7D%7D%7D"><img alt="" decoding="async" src="href%7D%7D%7D"/></a></pre> <p>O mapa está pronto para ser compartilhado! Registre-se para uma <a href="https://tiles.mapbox.com/signup" target="_blank">conta gratuita no MapBox</a>. Depois, de volta ao TileMill, clique na opção <strong>Export-&gt;Upload </strong>acima, à direita, configure as informações para upload (tente diminuir o tamanho do arquivo que vai subir) e <strong>Upload</strong>. Você pode ver o progresso do processo de exportar e subir o arquivo, e então terá um link para o mapa.</p> <p><a href="https://a.tiles.mapbox.com/v3/groundtruth.map-vx5bbbu4/page.html" target="_blank">Aqui está o nosso</a>!</p> <h2 class="summary-item" id="resultados-e-seu-desafio"><a href="#resultados-e-seu-desafio">Resultados e seu desafio</a></h2> <div class="wp-caption aligncenter" id="attachment_655" style="width: 727px"><a href="https://geojournalism.org/wp-content/uploads/2013/08/9511711840_3d97a64423_b.jpg"><img alt="Crédito: Mikel Maron" aria-describedby="caption-attachment-655" class="wp-image-655" decoding="async" height="365" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/9511711840_3d97a64423_b.jpg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/9511711840_3d97a64423_b.jpg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/9511711840_3d97a64423_b-300x152.jpg 300w" width="717"/></a><p class="wp-caption-text" id="caption-attachment-655">Crédito: Mikel Maron</p></div> <p>Então é isso! Para conseguir visualizar o fundo das ruas, você vai precisar mergulhar um pouco mais na configuração de hospedagem do MapBox. <strong>Tente fazê-lo por conta própria com, digamos, 10 imagens. </strong>Se você tiver qualquer pergunta sobre este guia, sugestões para melhorá-lo, ou simplesmente quiser compartilhar seus resultados, entre em contato. Obrigado!</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://geojournalism.org/wp-content/uploads/2013/09/mikel.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <strong>Mikel Maron</strong> é programador e geógrafo e trabalha com usos de dados abertos para fins comunitários e humanitários. É co-fundador do Ground Truth Initiative e do projeto Map Kibera. Faz parte do Conselho da OpenStreepMap Foundation e é presidente do Humanitarian OpenStreetMap Team, tendo ajudado a facilitar a resposta da OSM ao terremoto do Haiti. Já viajou muito organizando projetos na Índia, Palestina, Suazilândia e outros destinos. Previamente, foi co-fundador do Mapufacture e trabalhou em plataformas colaborativas, normas de geoweb e suas várias utilizações para uma ampla gama de organizações, da ONU e agências governamentais a coletivos anarquistas hacker. </div> <!-- .author-info --> </div> <!-- .author-inner --> </div> .author-shortcodes <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <p>The post <a href="https://geojournalism.org/pt/2013/08/how-to-map-photos-using-openstreetmap-and-tilemill/">Como mapear fotos utilizando o OpenStreetMap e o TileMill</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 268