As melhores ferramentas para reportagem multimídia Mon, 23 Feb 2015 15:21:51 +0000 pt-BR hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/pt/2014/06/portugues-jeo-primeiros-passos/ pixel Tue, 03 Jun 2014 23:29:08 +0000 Apps Maps jeo wordpress https://geojournalism.oeco.org.br/?p=931 <p>Introduction Jeo is a WordPress theme that acts as an online platform for geojournalism and allows publication of news articles as layers of information on digital maps. With Jeo, creating interaction between the layers of data and contextual information is much more intuitive. The theme is developed to be a base of &#160;child themes&#160;and is [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2014/06/portugues-jeo-primeiros-passos/">JEO: primeiros passos</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p></p><h1 class="summary-item" id="introduction"><a href="#introduction">Introduction</a></h1> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Jeo is a WordPress theme that acts as an online platform for geojournalism and allows publication of news articles as layers of information on digital maps. With Jeo, creating interaction between the layers of data and contextual information is much more intuitive. The theme is developed to be a base of  <i>child themes</i> and is ready for multilingual content and facilitates publication tasks. </span></span></span></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>In this tutorial we will cover the installation of the theme, the publication of a map, the publication of a post, and configurations for Jeo. </span></span></span></p> <h1 class="summary-item" id="history"><a href="#history">History</a></h1> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The  </span></span></span><a href="https://infoamazonia.org/" target="_blank">InfoAmazonia</a><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>  project was created in 2012, with the objective of aggregating data and news about the Amazon rainforest. Initially, updating the site was complex. With the goal of planning the development of the site, </span></span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>we carried out a study which at the end of the year concluded that the best alternative in the long term to substitute the software was to develop a theme for WordPress. After the theme was developed and the new site was launched, we decided to generalize the theme to facilitate the use of other people to create their own sites with maps. </span></span></span></p> <h1 class="summary-item" id="instalation"><a href="#instalation">Instalation </a></h1> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>You need to have WordPress installed on your server. Next we will show you two ways to install Jeo. </span></span></span></p><div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control"> <li><a href="#"> Step 1 </a></li> <li><a href="#"> Step 2 </a></li> <li><a href="#"> Step 3 </a></li> </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent"> <a href="https://github.com/oeco/jeo">Download</a><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> Jeo on GitHub by clicking on “Download ZIP” on the right sidebar. If you know how to use git, see instructions </span></span></span><a href="https://oeco.github.io/jeo/">here</a><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>. </span></span></span><p></p> <p><img alt="jeo-inst-1github" decoding="async" src="https://geojournalism.org/wp-content/uploads/2014/02/jeo-inst-1github-1024x575.png"/></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> In Appearence &gt; Themes, go to the tap “Install Themes” and choose “Upload”.<p></p> <p><img alt="jeo-inst-2upload" decoding="async" src="https://geojournalism.org/wp-content/uploads/2014/02/jeo-inst-2upload-1024x575.png"/></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Upload the file you just downloaded and activate the theme.<p></p> <p><img alt="jeo-inst-3ativate" decoding="async" src="https://geojournalism.org/wp-content/uploads/2014/02/jeo-inst-3ativate-1024x575.png"/></p> </div> </div> </div> </div> .et-tabs-container <p></p> <h1 class="summary-item" id="publishing-a-map"><a href="#publishing-a-map">Publishing a Map</a></h1> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p><div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control"> <li><a href="#"> Step 1 </a></li> <li><a href="#"> Step 2 </a></li> <li><a href="#"> Step 3 </a></li>  <li><a href="#"> Step 4 </a></li>  <li><a href="#"> Step 5 </a></li>  </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent"> Vá em “Maps &gt; Add new map”.<p></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot1.png"><img alt="screenshot1" class="alignnone size-large wp-image-1056" decoding="async" fetchpriority="high" height="522" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot1-1024x522.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot1-1024x522.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot1-300x153.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot1.png 1286w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Define a name and description for your map.<p></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot21.png"><img alt="screenshot2" class="alignnone size-large wp-image-1054" decoding="async" height="524" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot21-1024x524.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot21-1024x524.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot21-300x153.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot21.png 1288w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> <span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The section “Map Settings” is divided into 2 parts.</span></span></span><p></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>In the first area you can define the server which will provide the </span></span></span><em><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>base layer</span></span></span></em><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> in a drop-down list. Once you choose a server, the URL address under the list will be altered to </span></span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>the server’s </span></span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>default. </span></span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The base layer is the layer which remains under all of the others, and can be chosen from OpenStreetMap, Mapquest OpenStreetMap, Mapquest Satellite, Stamen Toner, Stamen Watercolour, Stamen Terrain, Other (used for when you have your own tilelayer URL), or None (in case you don’t want to use a base layer, or want to use one from MapBox or CartoDB).</span></span></span></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>To add layers, you can use the “Add MapBox layer” and “Add CartoDB layer” buttons if you want to use layers from these servers. Otherwise, use “Add tile layer”. </span></span></span></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Inside the box that is created you’ll see 3 options:es:</span></span></span></p> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Title, which is the name of your layer. It will always be used when you need to refer to this layer (in a menu, for example).</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>ID or URL. This is where you should put the URL of the layer, or, in the case of a MapBox layer, your ID.</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Layer options. The layers can be:</span></span></span> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Fixa – </span></span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>use this if you don’t want to allow the viewer to turn off the layer.</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Switchable – when you want that the viewer to be able to switch the layer on and off.</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Swapable – when you would like to permit a choice between a set of layers.</span></span></span></li> </ul> </li> </ul> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The order of superposition of the layers is from bottom to top, in other words, the higher the layer on the administration screen, the higher its priority over the the others. It will be displayed on top of the layers below it on the list.</span></span></span></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot3.png"><img alt="screenshot3" class="alignnone size-large wp-image-1055" decoding="async" height="520" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot3-1024x520.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot3-1024x520.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot3-300x152.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot3.png 1292w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Remaining in the “Map Configurations”, in the lower area of the map, you can define:<p></p> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The center and initial zoom.</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The minimum and máximum zoom.</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The limits for navegation of the map.</span></span></span></li> </ul> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>If you want, you can nevegate the map and, when you are in the position that you desire, click the buttons “Define current as center and zoom” and “Define current as navegation limits”.</span></span></span></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>On the lower part, it is possible to: </span></span></span></p> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Turn off the possibility of using the mouse or touchpad to change the zoom</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Turn on a filter, permitting that the visitors choose the start and end date of the posts which they wish to see </span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Turn on a search field on the map</span></span></span></li> </ul> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot4.png"><img alt="screenshot4" class="alignnone size-large wp-image-1057" decoding="async" height="521" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot4-1024x521.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot4-1024x521.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot4-300x152.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot4.png 1291w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Now publish!<p></p> <p><img alt="jeo-mapa-4publicado" decoding="async" src="https://geojournalism.org/wp-content/uploads/2014/02/jeo-mapa-4publicado-1024x575.png"/></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> </div> </div> </div> .et-tabs-container <p></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Since its the first map you have criated, it automatically goes to the home page of the site. For this all the future maps you publish, a page is automatically created for the individual map.</span></span></span></p> <h1 class="summary-item" id="publishing-a-post"><a href="#publishing-a-post">Publishing a post</a></h1> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p><div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control"> <li><a href="#"> Step 1 </a></li> <li><a href="#"> Step 2 </a></li> <li><a href="#"> Step 3 </a></li> <li><a href="#"> Step 4 </a></li> <li><a href="#"> Step 5 </a></li> </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent"> Go to “Post” &gt; “Add new”.<p></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot5.png"><img alt="screenshot5" class="alignnone size-large wp-image-1058" decoding="async" height="527" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot5-1024x527.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot5-1024x527.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot5-300x154.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot5.png 1288w" width="1024"/></a></span></span></span></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Write your title and add content.<p></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot6.png"><img alt="screenshot6" class="alignnone size-large wp-image-1059" decoding="async" height="525" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot6-1024x525.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot6-1024x525.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot6-300x153.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot6.png 1289w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Define the coordinates.<p></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Observe that there is a search box. In example below, you can see a search for “Bangalore”.</span></span></span></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot7.png"><img alt="screenshot7" class="alignnone size-large wp-image-1060" decoding="async" height="527" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot7-1024x527.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot7-1024x527.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot7-300x154.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot7.png 1286w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Determine the maps on which the post will appear.<p></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot8.png"><img alt="screenshot8" class="alignnone size-large wp-image-1061" decoding="async" height="528" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot8-1024x528.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot8-1024x528.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot8-300x154.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot8.png 1274w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> Now Publish your post!<p></p> <p><img alt="jeo-post-5publicado" decoding="async" src="https://geojournalism.org/wp-content/uploads/2014/02/jeo-post-5publicado-1024x575.png"/></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> </div> </div> </div> .et-tabs-container <p></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Verify is you can see the post on the map. It may be necessary to click on “Clear GeojSON Cahce” on the toolbar. </span></span></span></p> <h1 class="summary-item" id="setting-up-the-site"><a href="#setting-up-the-site">Setting up the site</a></h1> <ol> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>Go to “Appearance &gt; Jeo Settings”</span></span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span>The Settings should be self-explanatory. If you don’t understand one of the settings,  <a href="https://github.com/oeco/jeo/issues">write to us</a> (click on “New Issue”)!</span></span></span></li> </ol> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p><div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control"> <li><a href="#"> Step 1 </a></li> <li><a href="#"> Step 2 </a></li> </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent"> Go to “Appearence &gt; Jeo Settings”.<p></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot9.png"><img alt="screenshot9" class="alignnone size-large wp-image-1062" decoding="async" height="526" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot9-1024x526.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot9-1024x526.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot9-300x154.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot9.png 1279w" width="1024"/></a></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"><span> </span></span></span></p></div> <div class="et_slidecontent"> The Settings should be self-explanatory. If you don’t understand one of the settings,  <a href="https://github.com/oeco/jeo/issues">write to us</a> (click on “New Issue”)!<p></p> <p><a href="https://geojournalism.org/wp-content/uploads/2014/02/screenshot10.png"><img alt="screenshot10" class="alignnone size-large wp-image-1063" decoding="async" height="512" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2014/02/screenshot10-1024x512.png" srcset="https://geojournalism.org/wp-content/uploads/2014/02/screenshot10-1024x512.png 1024w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot10-300x150.png 300w, https://geojournalism.org/wp-content/uploads/2014/02/screenshot10.png 1292w" width="1024"/></a></p> </div> </div> </div> </div> .et-tabs-container <p></p> <h1 class="summary-item" id="next-steps"><a href="#next-steps">Next Steps</a></h1> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Congratulations, you have your first site with Jeo! Now it is time to <a href="https://github.com/oeco/jeo">go to GitHub</a> and copy the code to create your own child theme.</span></span></p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://geojournalism.org/wp-content/uploads/2014/06/pixelpic.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> pixel started his VJ career in 2002. He’s director of memeLab and founding member of Garoa Hacker Clube. In addition to audiovisual performances, develops multimedia works that question the relationship between people and digital technologies, by the use of open technologies and / or pervasive where the people assumes the role of author. He made performances in over 15 states and 4 other countries. Among his recent projects are the research Criaturas Afetivas that uses mathematical models for understanding love, and Jandig where artists, developers, curators and audience mix their roles in creating TAZes in augmented reality. </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/2014/06/portugues-jeo-primeiros-passos/">JEO: primeiros passos</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 931 https://geojournalism.org/pt/2014/02/easy-steps-for-making-charts-and-infographics-using-the-free-datawrapper-app/ Oluseun Onigbinde Thu, 13 Feb 2014 18:29:25 +0000 Apps Dados Visualization https://geojournalism.oeco.org.br/?p=968 <p>Organiza&#231;&#245;es de m&#237;dia proeminentes est&#227;o usando o Datawrapper, uma ferramenta simples e gratuita, para melhorar a sua narrativa desta forma. O Datawrapper &#233; um aplicativo gr&#225;fico interativo que pode ser incorporado em mat&#233;rias como esta, que mostra a proposta de or&#231;amento do governo nigeriano em 10 gr&#225;ficos. Para sustentar a aten&#231;&#227;o do usu&#225;rio e direcionar [&#8230;]</p> <p>The post <a href="https://geojournalism.org/pt/2014/02/easy-steps-for-making-charts-and-infographics-using-the-free-datawrapper-app/">Passos fáceis para fazer gráficos e infográficos usando DataWrapper</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> <p>Organizações de mídia proeminentes estão usando o <a href="https://datawrapper.de" target="_blank">Datawrapper</a>, uma ferramenta simples e gratuita, para melhorar a sua narrativa desta forma. O Datawrapper é um aplicativo gráfico interativo que pode ser incorporado em matérias como <a href="https://www.yourbudgit.com/blog/view/8" target="_blank">esta</a>, que mostra a proposta de orçamento do governo nigeriano em 10 gráficos.</p> <p><span id="more-968"></span></p> <p>Para sustentar a atenção do usuário e direcionar o engajamento público, jornalistas e veículos de comunicação devem aprender a utilizar a visualizações de dados.</p> <p>Visualizações de dados permitem explicar um conjunto de dados de forma simples com um infográfico, um aplicativo interativo ou um quadro. Com inúmeras matérias competindo pela atenção dos usuários na Internet, as visualizações de dados são uma forma criativa de atrair os usuários para seu conteúdo e acrescentar contexto ou uma perspectiva diferente para a sua história.<a href="https://geojournalism.org/wp-content/uploads/2014/02/dsc_4391.jpg"><img alt="dsc_4391" class="size-full wp-image-994 alignright" decoding="async" height="200" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2014/02/dsc_4391.jpg" width="300"/></a></p> <p>Como <a href="https://www.icfj.org/about/profiles/oluseun-onigbinde" target="_blank">bolsista do programa Knight International Journalism Fellowship do Centro Internacional para Jornalistas</a> na Nigéria, eu trabalho com o uso de métodos digitais para apoiar os jornalistas na melhoria de sua narrativa jornalística e na promoção de um engajamento mais amplo. Nossa equipe de bolsistas e o nosso <a href="https://groups.google.com/forum/?hl=en#%21forum/hackshackers-lagos" target="_blank">grupo HacksHackers local</a> em Lagos organizou recentemente uma aula de jornalismo de dados focada em como usar o aplicativo <a href="https://datawrapper.de/" target="_blank">Datawrapper</a> para fortalecer a narrativa de uma reportagem.</p> <p>Nossos participantes nunca tinham usado DataWrapper, mas é tão simples de usar que voltaram para suas redações e já criaram estas visualizações:</p> <p>—<a href="https://sustainableconvos.com/infographics-population-and-economic-growth/" target="_blank">Infografia sobre população e crescimento econômico</a></p> <p>—<a href="https://www.yarnmesomething.com/2014/01/marketing-gadgets-to-women.html" target="_blank">Aparelhos de marketing para mulheres</a></p> <p>—<a href="https://www.tech360ng.com/activities-social-media-driving-force-data-demand/" target="_blank">A mídia social é uma força propulsora para a demanda de dados</a></p> <h2 class="summary-item" id="comeca-a-usar-o-datawrapper"><a href="#comeca-a-usar-o-datawrapper">Começa a usar o DataWrapper</a></h2> <p> </p><div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"> <ul class="et-tabs-control"> <li><a href="#"> Passo 1 </a></li> <li><a href="#"> Passo 2 </a></li> <li><a href="#"> Passo 3 </a></li> <li><a href="#"> Passo 4 </a></li> <li><a href="#"> Passo 5 </a></li> <li><a href="#"> Passo 6 </a></li> </ul> <!-- .et-tabs-control --> <div class="et-tabs-content"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent"> <p>1. Encontre um conjunto de dados</p> <p>Você vai precisar de um conjunto de dados em formato de planilha. Neste exemplo, estou usando um conjunto de dados obtido a partir do <a href="https://budgetoffice.gov.ng" target="_blank">Escritório de Orçamento da Federação</a> da Nigéria. Se você não tem sua própria planilha útil, use o mesmo que eu fiz para que possa experimentar o Datawrapper e compreender o poder da ferramenta. A planilha de orçamento está disponível gratuitamente aqui no <a href="https://docs.google.com/spreadsheet/ccc?key=0Aj_5npSmNt1IdHRlOHIxWElRRjlySU1jYkc5QnAydEE&amp;usp=sharing" target="_blank">Google Doc</a>.</p> </div> <div class="et_slidecontent"> <p>2. Acesse o site do Datawrapper através de um endereço de e-mail ou senha de Twitter</p> <div> <p><img alt="image: " class="aligncenter" decoding="async" height="241" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data1.png?itok=H_Y9s89A" title="image: " width="420"/></p> </div> <div class="et_slidecontent"> <p>3. Em seguida, copie e cole os dados de uma planilha do Microsoft Excel ou faça o upload de um documento de planilha CSV.</p> </div> <div><img alt="image: " class="aligncenter" decoding="async" height="192" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data3.png?itok=yYlCbqXb" title="image: " width="420"/></div> <div> </div> <div class="et_slidecontent"> </div> <div></div> <div>4. O aplicativo DataWrapper traduz os dados em uma tabela e exibe isso para você. Você pode adicionar fontes de dados e também links se tiver. Se a tabela parece boa, clique no botão ” Visualize.”</div> <div><img alt="image: " class="aligncenter" decoding="async" height="184" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data4.png?itok=o0WElFyq" title="image: " width="420"/></div> <div> </div> <div class="et_slidecontent"> </div> <div></div> <div>5. Em seguida, você verá a aba “Visualize”, que mostra uma variedade de tipos de gráficos que pode usar.</div> <div><img alt="image: " class="aligncenter" decoding="async" height="254" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data5.png?itok=T7P6ig4X" title="image: " width="420"/></div> <p>Precisa de ajuda para descobrir qual o tipo de gráfico usar? Confira este <a href="https://extremepresentation.typepad.com/blog/files/choosing_a_good_chart.pdf" target="_blank">guia</a> (em inglês).</p> <p>As mini-abas podem ajudar a refinar o gráfico. Permitem adicionar títulos e descrições, e também alterar os layouts.</p> </div> <div class="et_slidecontent"> <p></p> <p>6. Finalmente, você pode copiar e colar o código embutido e publicar o gráfico. (Se precisar corrigir a tabela mais tarde, vai precisar republicar o gráfico para obter um novo código).</p> <div><img alt="image: " class="aligncenter" decoding="async" height="231" loading="lazy" src="https://ijnet.org/sites/default/files/styles/news_large/public/data6.png?itok=Da6WjJ7a" title="image: " width="420"/></div> <div> </div> </div> </div> </div> <!-- .et-tabs-container --></div> <p>Espero que você experimente o DataWrapper e publique suas visualizações em seu site de notícias ou seu próprio blog.</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://pbs.twimg.com/profile_images/420474130799284224/k_pzRQfA.jpeg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> <em><a href="https://twitter.com/seunonigbinde" target="_blank">Oluseun Onigbinde</a> é um inovador digital e defensor de dados abertos. Como parte de sua <a href="https://www.icfj.org/our-work/nigeria-increasing-citizen-engagement-health-news" target="_blank">bolsa do Knight International Journalism Fellowship do Centro Internacional para Jornalistas</a> na Nigéria, ele promove o uso de ferramentas digitais criativas em organizações de mídia para aumentar a participação do público sobre questões fundamentais para o desenvolvimento, como saúde e educação.</em> </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/2014/02/easy-steps-for-making-charts-and-infographics-using-the-free-datawrapper-app/">Passos fáceis para fazer gráficos e infográficos usando DataWrapper</a> appeared first on <a href="https://geojournalism.org/pt">geojournalism.org</a>.</p> 968