Best tools for multimedia reporting Thu, 08 Sep 2016 13:57:29 +0000 en-US hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/2016/08/create-media-rich-reports-with-page-builder/ Willie Shubert Thu, 11 Aug 2016 01:26:05 +0000 Design Drag and Drop JEO Newsroom Page Builder SiteOrigin wordpress https://geojournalism.org/?p=1595 <p>In-depth multimedia story telling has unique requirements; a narrative is structured around key facts supported by a mix of media elements intended to draw readers into the world the journalist is presenting. Combining the pieces into a cohesive story is one of the most exciting aspects of modern journalism and easing the process of creating [&#8230;]</p> <p>The post <a href="https://geojournalism.org/2016/08/create-media-rich-reports-with-page-builder/">Create Media-rich Reports with Page Builder</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> <p>In-depth multimedia story telling has unique requirements; a narrative is structured around key facts supported by a mix of media elements intended to draw readers into the world the journalist is presenting. Combining the pieces into a cohesive story is one of the most exciting aspects of modern journalism and easing the process of creating media-rich news articles is a our goal with JEO Newsroom.</p> <p><a href="https://youtu.be/6if_demQp0Y">https://youtu.be/6if_demQp0Y</a></p> <h2 class="summary-item" id="whats-is-page-builder"><a href="#whats-is-page-builder">What’s is Page Builder </a></h2> <p>Drag and drop editors are a great tool for quickly designing custom layouts without the need to write code. To help journalists to make editorially-driven layouts, JEO Newsroom uses Page Builder by Site Origin. It’s a free and open source plug-in which makes it easy to create responsive grid-based page content in WordPress</p> <p>Site Origin has created a useful set of introductory documentation with videos and detailed overview of all of Page Builder’s features. We’re going to cover the basics and go into how we are using Page Builder with the <a href="https://geojournalism.org/tracks/jeo-wordpress-theme/" title="JEO WordPress Theme">JEO WordPress Theme</a>. If you’re just getting started please have at this first to familiarize yourself with the terminology and features.</p> <a class="small-button smallsilver" href="https://siteorigin.com/page-builder/documentation" target="_blank">Open the SiteOrigin Documentation</a> <h2 class="summary-item" id="build-a-layout-with-rows-and-columns"><a href="#build-a-layout-with-rows-and-columns">Build a Layout with Rows and Columns</a></h2> <p><a href="https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9.jpg"><img alt="metal-grid-13951738595M9" class="alignnone size-large wp-image-1602" decoding="async" fetchpriority="high" height="768" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9-1024x768.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9-1024x768.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9-300x225.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9.jpg 1920w" width="1024"/></a></p> <p>The basic structure of page building is the grid.  Configurations of rows and columns create a grid system, which ensures page builder layouts are consistent, modular, and mobile friendly. Once you create the first row, you have the option to add columns within that row to design how many page elements you want to include. You can also control the overall appearance of the row using the row settings. There are three options; Standard, Full Width and Full Width Stretched. Here are some examples for each row style looks:</p> <h2 class="summary-item" id="adding-widgets"><a href="#adding-widgets">Adding Widgets</a></h2> <p>As are a core part of WordPress, widgets are typically used to create sidebars and page footers. In page builder, widgets have a higher power. They are the building blocks of your story or page. Widgets provide the ability to add multimedia and interactivity to your page.</p> <p>In JEO Newsroom, we’ve included are number of fundamental widgets to get you started but you can add others by installing and activating plug-ins. On our Open Earth multi-site, we have a pre-approved set of plug-ins available so I’m limiting this tutorial to what’s available there:</p> <h3 class="summary-item" id="newsroom-widgets"><a href="#newsroom-widgets">Newsroom Widgets</a></h3> <p>These widgets are prominently featured in the design of home and landing pages. Editors often need the flexibility to chose what types of stories they want to feature and each of these widgets contains a “Query Builder” used to select content based on its tagging. For example, if you want to create a topic page about hydropower, you can build a query for stories using the water and energy category or a specific hydropower tag. You can set the selection criteria once and your content will automatically updated as new stories come in.</p> <p>Each widget is has a unique design style and can be mixed and matched with other widgets to build engaging pages.</p> <ul> <li><strong>Highlight Carousel- </strong>Displays featured posts with featured image as a interactive carousel</li> <li><strong>List Posts</strong> – Displays a series of images in a regular list format.</li> <li><strong>List Images – </strong>Displays a series of image landscape format.</li> <li><strong>Square Posts</strong> -Displays a selection of posts in a small square image format.</li> </ul> <div class="et-image-slider et_sliderfx_slide et_sliderauto_true et_sliderauto_speed_5000 et_slidertype_images"> <div class="et-image-slides"> <div class="et-tabs-content-wrapper"> <div class="et_slidecontent et-image-slide"><a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel.png"><img alt="Newsroom Carosel" class="alignnone size-large wp-image-1606" decoding="async" height="382" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel-1024x382.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel-1024x382.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel-300x112.png 300w" width="1024"/></a><span class="et-image-overlay"> </span></div> <div class="et_slidecontent et-image-slide"><a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts.png"><img alt="Newsroom List Posts" class="alignnone size-large wp-image-1605" decoding="async" height="364" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts-1024x364.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts-1024x364.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts-300x107.png 300w" width="1024"/></a><span class="et-image-overlay"> </span></div> <div class="et_slidecontent et-image-slide"><a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images.png"><img alt="Newsroom List Images" class="alignnone size-large wp-image-1608" decoding="async" height="276" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images-1024x276.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images-1024x276.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images-300x81.png 300w" width="1024"/></a><span class="et-image-overlay"> </span></div> <div class="et_slidecontent et-image-slide"><a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts.png"><img alt="Newsroom Square Posts" class="alignnone size-large wp-image-1607" decoding="async" height="214" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts-1024x214.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts-1024x214.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts-300x63.png 300w" width="1024"/></a><span class="et-image-overlay"> </span></div> </div> </div> </div> .et-image-slider <h3 class="summary-item" id="jeo-widgets"><a href="#jeo-widgets">JEO Widgets</a></h3> <p>JEO is the WordPress theme for integrating mapping into our content. It handles the layers, maps, and integration with map tile providers. JEO is the parent of Newsroom so this site can use all the features of JEO and extend them to match the needs of journalists. Right now, we only have one JEO widget used for adding custom maps to your pages.</p> <p><a href="https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget.png"><img alt="JEO Map Widget" class="alignnone size-large wp-image-1612" decoding="async" height="667" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget-1024x667.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget-1024x667.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget-300x195.png 300w, https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget.png 1544w" width="1024"/></a></p> <ul> <li><strong>JEO Map Widget</strong> – Display a map from JEO Map content type. (Also chose to display with or without geo-located posts)</li> </ul> <h3 class="summary-item" id="site-origin-widgets"><a href="#site-origin-widgets">Site Origin Widgets</a></h3> <p><strong><a href="https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets.png"><img alt="Site Origin Widgets" class="alignnone size-large wp-image-1603" decoding="async" height="438" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets-1024x438.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets-1024x438.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets-300x128.png 300w, https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets.png 1750w" width="1024"/></a><br/> </strong>These are the widgets from the creators of page builder and are really versatile. I often use SiteOrigin widgets for in-depth reports with multimedia elements that would benefit from a more flexible layout. Here are</p> <ul> <li><strong>SiteOrigin Editor</strong> – The familiar WP rich-text editor</li> <li><strong>SiteOrigin Headline</strong> – Add custom typography for pull quotes and intro text.</li> <li><strong>Site Origin Image</strong> – A simple image widget with massive power.</li> <li><strong>Site Origin Hero Image</strong> – The widget used for adding text over image or video.</li> <li><strong>Site Origin Video Player</strong> – Add videos from the site or a external source.</li> <li><strong>Site Origin Slider</strong> – A responsive slider widget that supports images and video.</li> <li><strong>Site Origin Button</strong> – A customizable button widget.</li> <li><strong>Site Origin Google Maps</strong> – A Google Maps widget.</li> </ul> <h3 class="summary-item" id="jetpack-widgets"><a href="#jetpack-widgets">JETPACK Widgets</a></h3> <p>This set of widgets is included to bring in social media to the pages. I’ve highlighted a few I use often below.</p> <p><a href="https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets.png"><img alt="Jetpack Widgets" class="alignnone size-large wp-image-1604" decoding="async" height="501" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets-1024x501.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets-1024x501.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets-300x147.png 300w, https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets.png 1730w" width="1024"/></a></p> <ul> <li><strong>Twitter Timeline</strong> -Display an official Twitter Embedded Timeline widget.</li> <li><strong>Social Media Icons</strong> – A simple widget that displays social media icons.</li> <li><strong>Facebook Like Box</strong>– Display a Facebook Like Box to connect visitors to your Facebook Page</li> </ul> <h2 class="summary-item" id="live-preview-your-design"><a href="#live-preview-your-design">Live Preview your Design</a></h2> <p><a href="https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview.png"><img alt="Page Builder Live Preview" class="alignnone size-large wp-image-1610" decoding="async" height="403" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview-1024x403.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview-1024x403.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview-300x118.png 300w" width="1024"/></a></p> <p>One of the most convenient features is the live preview option accessible through the button on the top bar of the text editor. Using preview your work see how your page will look on desktop, tablet, and mobile without having to repeatedly preview your work in a separate tab. For complex reports with lots of multimedia, this feature is a major time saver.</p> <h2 class="summary-item" id="publish"><a href="#publish">Publish!</a></h2> <p>Once you are happy with the content of your page, relish the moment and click the publish button.</p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <p>The post <a href="https://geojournalism.org/2016/08/create-media-rich-reports-with-page-builder/">Create Media-rich Reports with Page Builder</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> 1595 https://geojournalism.org/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/2014/06/portugues-jeo-primeiros-passos/">JEO: first steps</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</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;">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></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></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;">The  </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;">  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 style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></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;">You need to have WordPress installed on your server. Next we will show you two ways to install Jeo. </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;"> Jeo on GitHub by clicking on “Download ZIP” on the right sidebar. If you know how to use git, see instructions </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><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></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></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></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" height="522" loading="lazy" sizes="auto, (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></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" loading="lazy" sizes="auto, (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></p></div> <div class="et_slidecontent"> <span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">The section “Map Settings” is divided into 2 parts.</span></span><p></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">In the first area you can define the server which will provide the </span></span><em><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">base layer</span></span></em><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"> in a drop-down list. Once you choose a server, the URL address under the list will be altered to </span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">the server’s </span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">default. </span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Inside the box that is created you’ll see 3 options:es:</span></span></p> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Layer options. The layers can be:</span></span> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Fixa – </span></span><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">use this if you don’t want to allow the viewer to turn off the layer.</span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Switchable – when you want that the viewer to be able to switch the layer on and off.</span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Swapable – when you would like to permit a choice between a set of layers.</span></span></li> </ul> </li> </ul> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></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" loading="lazy" sizes="auto, (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></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;">The center and initial zoom.</span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">The minimum and máximum zoom.</span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">The limits for navegation of the map.</span></span></li> </ul> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">On the lower part, it is possible to: </span></span></p> <ul> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Turn off the possibility of using the mouse or touchpad to change the zoom</span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Turn on a filter, permitting that the visitors choose the start and end date of the posts which they wish to see </span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">Turn on a search field on the map</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></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></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;">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></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></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;"><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></p> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"> </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></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;">Observe that there is a search box. In example below, you can see a search for “Bangalore”.</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></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></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></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;">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></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;">Go to “Appearance &gt; Jeo Settings”</span></span></li> <li><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;">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></li> </ol> <p><span style="color: #333333;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;"> </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></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/2014/06/portugues-jeo-primeiros-passos/">JEO: first steps</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> 931