Experience Builder Conservation Site Project Tutorial V1
Total Page:16
File Type:pdf, Size:1020Kb
EXPERIENCE BUILDER CONSERVATION SITE PROJECT TUTORIAL V1 Experience Builder calls a website “Experience” and builds them using “Pages” as a primary structural element, plus “Windows” which function as popups. Pages are made up of “Blocks”; full-width segments that contain & organize all other widgets. The Schema below describes how a site hierarchy of 4 levels was developed starting from a main landing page that leads to 4 sub- pages, here called “Theme Pages” each of which can contain multiple “Topic” pages, each of which can contain “Subtopic” pages. EXPERIENCE BUILDER OUTLINE / SHORT SCHEMA COLOR CODES: MAIN LANDING THEME PAGES TOPIC PAGES SUBTOPIC PAGES HOWTO popup windows TBD=to be done MAIN CONSERVATION LANDING PAGE: SCIENCE: Theme home page (aka subpage) sci CONSERVATION Topic page scicon Planning subtopic page scicon Threats scicon Management scicon Modelling scicon Citizen Science sci SPECIES scispe Movement & Corridors scispe Distribution scispe Human Conflict scispe Genetics scispe Taxonomy sci LAND&SEA scilan ProtectedAreas scilan Ecosystems scilan Marine scilan Aquatic scilan Fire sci TECHNOLOGY scitec Drones scitec Open scitec Remote scitec Statistics scitec Field & Mobile STORY: Home page sto Advocacy topic page (no subtopics yet) sto Filmmakers sto Interviews sto Storymaps COMMUNITY : Home com Home: Topic Page com Training com Inclusive History com Reference Project comref 2021 comref 2020 comref 2019 comref 2018 tbd 2017 and earlier tbd Scgis International Chapter Pages JUSTICE jus Home topic page jus Racial Equity jus LGBTQ+ Rights juslgb Places subtopic page juslgb Equity Map juslgb LGBTQ+ Homelessness juslgb P4P LGBTQ+ Voting juslgb LGBTQ+ Community juslgb LGBTQ+ Friendly Zips jus Native Peoples tbd TRAD ECOL KNOWLEDGE subtopic page tbd TRIBAL SOVERIGNTY tbd TRIBAL STORMAPS tbd Womens Rights jus Voting jus Accessibility NEWLY-ADDED SITE “DOCUMENTATION” PAGE, INTRO TEXT ArcGIS Experience Builder (ExB) is a new kind of website development platform which is easy to learn and use, and free for ArcGIS Online users. There is a developer edition which permits creating new tools and custom widgets. The standard edition, however, can be used out of the box with no programming or coding experience needed. The authoring interface is drag & drop simple, and unlike any other website creation platform, it permits drag & drop addition of ArcGIS Online webmaps and data sources to permit fully-functional embedded maps in your website. The documents provided on this page help show how the specific purpose of this project, to create a conservation GIS user community site, was met using the out-of-the box widgets and tools of Experience Builder. Some of the documents deal with how I organized and planned the many different types of conservation GIS tasks, projects and users there are. They then show how I applied the different page, window and navigation features of ExB to best capture and present that site plan. I include page & content catalogs to help illustrate a process for discovering and creating new text, visual & map content and then selecting the best tools and options for exhibiting that content on the site. Finally, each page is meant to have a dedicated “how-to” button that pops up a window describing how the specific features of that individual page were created and configured. Issues, workarounds and tips are included where relevant so you don’t have to waste so much time chasing down balky content and tool malfunctions. This page also assembles all of those page-specific “how-to” buttons in a single place. SITE CATALOG INTRODUCTION: In addition to the ExB concepts of “Experience” created from “Pages” built up of “Blocks, this content catalog adds the intermediary idea of a PANEL, which is a full-width segment of page content about the same concept, event or project, and can include multiple blocks. This catalog also adds the concept of NAVBAR, which is a special-purpose panel organized for navigating among Experience Pages but can include external sites. PANELs and NAVBARs on any page are numbered consecutively from the top. This catalog also describes how a site hierarchy of 4 levels was developed starting from a main landing page that leads to 4 sub-pages, here called “Theme Pages” each of which can contain multiple “Topic” pages, each of which can contain “Subtopic” pages. The navbars support this hierarchy using a site map approach. New Navbars appear at each new level in additive fashion, allowing the user to jump directly to any other page at any other level above them. This catalog also refers to animated displays of related content using the general term “Carousel” composed of Slides, Films, Photos or Maps. In practice Carousels are created using the ExB “Section” widget composed of “Views” but I found those terms less effective in trying to document what a Carousel did and how it was organized. The primary information here is meant to reflect the current state of the site, as built. New content identified for inclusion will appear under the ADDITIONAL SOURCES section, and prior versions of edited content will appear for a short time under the ARCHIVE section Following the color-coded text catalog, there is a visual catalog where page snapshots are arranged spatially to represent a different view of the site’s visual organization and experience paths. PAGES / CONTENT CATALOG EXPERIENCE BUILDER OUTLINE, CONTENT, HOWTO, CODE, Issues & fix- its, TO-DO’S, ARCHIVE and ADDITIONAL SOURCES LIGHTHOUSE BANDWIDTH DATA: NETWORK METRICS are the network traffic tests used to configure the lo-bandwidth page versions. MAIN PAGE https://experience.arcgis.com/experience/e614640e3967462f88016aaeb09691cf/page/page_10 NAVBAR TOP: is the standard navbar for every page, but without a widget for this or any way to declare a global block, any changes for it must be copied manually onto every site page one at a time. Top navbar is a block set to 58px hi and 100% wide, with 10 gap and 0 padding. Inside is a fixed panel set to 51px hi. Aspect ratio OFF and align to TOP. Inside the FP are 2 fixed buttons at left set to 50px high, first one for ESRI home that uses a logo image set to “fit” and a fixed width of 91px, and fixed position of 0,0 to top and left. Next button is for the site home=main page, and its set to a fixed height of 51px, width of 18.4%, position 0px top and 7% from leftside, font is 18px bold. Next 4 buttons are a “View Navigation” widget for the carousel so they can auto-update as the carousel plays, or allow direct labeled navigation in the carousel. View is set to AUTO, spacing at 0, width at 74.46% height at 100%, position at 0% top and 0% rightside. Feature REQUEST: Ask to add global widgets for things like a navbar, so I only need to maintain one source version rather than having to manually edit 40 pages anytime I need to make a single change to the navbar. PANEL 1 MAINPAGE CAROUSEL: HIBAND: AUTOPLAY ON set to 10 SECS, often inconsistent, may freeze at first slide. IF CHROME RELOADED then works ok, 10secs per slide and stops at last JUSTICE slide and stays there, even when reloaded. When go to SCIENCE it reloads the lions every 8 seconds even though autoplay is OFF, reload browser and it goes to normal. Cause still unknown. MAINPAGE Carousel Slides and Captions SLIDE1 SCIENCE Biodiversity: GIS is ecological: it encompasses & integrates diverse sciences, methods & practices TITLE Natureserve: Map of Biodiversity Importance HOW-TO defaults to “Main Page Window” ABOUT https://www.natureserve.org/conservation-tools/projects/map-biodiversity-importance Alternate Page LINK https://habitatsuitabilitymodeling-natureserve.hub.arcgis.com/app/c2858319d41e410aa4b36ff9fad6ced0 SLIDE VIDEO EMBED: <iframe src="https://storymaps.arcgis.com/stories/c2858319d41e410aa4b36ff9fad6ced0" style="background-color: #3c3838" width="100%" height="560px" frameborder="0" marginheight="0" allowfullscreen allow="geolocation"></iframe> ENTER SCIENCE button: opens in an “app window” to SCIENCE theme page LIGHTHOUSE BANDWIDTH DATA: NETWORK METRICS: ^r reload = 65mb transferred, 103mb resources. Transferred is the compressed size of all resources. You can think of it as the amount of upload and download data that a mobile user will use in order to load this page. Resources is the uncompressed size of all resources LOBAND VERSION mp4 file: Conservation Slide Natureserve:https://conservationgis.org/_PUBLIC/Biodiversity1080PredoCLIP.mp4 SLIDE2 STORIES: GIS is outspoken: it simplifies complexity & amplifies stories of landscape, knowledge & love HOW-TO defaults to “Main Page Window” ABOUT: https://www.grandcanyontrust.org/blog/second-century-grand-canyon-national-park LINK: https://storymaps.arcgis.com/stories/b22a6a09bb2344ff845d9efd3e4152f7 VIDEO EMBED URL ONLY: https://storymaps.arcgis.com/stories/b22a6a09bb2344ff845d9efd3e4152f7 ENTER STORIES button: opens in an “app window” to STORIES theme page LIGHTHOUSE BANDWIDTH DATA NETWORK: 4MB Transfer 15mb Resources SLIDE3 COMMUNITY GIS is social: it unites a global user community of activists, volunteers and professionals HOW-TO defaults to “Main Page Window” ABOUT https://www.scgis.org/ ENTER COMMUNITY button: opens “app window” to COMMUNITY theme page LIGHTHOUSE BANDWIDTH DATA NETWORK: 300Kb SLIDE4 JUSTICE GIS is action: it elevates voices for equity to facilitate awareness and drive change HOW-TO defaults to “Main Page Window” ABOUT: https://people4thepeople.org LINK https://people4thepeople.org VIDEO EMBED URL ONLY: https://people4thepeople.org ENTER JUSTICE button: opens “app window” to