{"id":1431,"date":"2025-01-30T14:58:04","date_gmt":"2025-01-30T19:58:04","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/digital-project-template-copy\/"},"modified":"2026-03-04T11:50:42","modified_gmt":"2026-03-04T16:50:42","slug":"idp232-digital-project","status":"publish","type":"page","link":"https:\/\/sites.smith.edu\/project-resources\/idp232-digital-project\/","title":{"rendered":"IDP232 &#8211; Digital Projects and Interactive Content Resources"},"content":{"rendered":"\n<style>\nh3 {\nbackground-color: #C7EAFB;\nfont-size: 25px;\n}\n\nh4 {\nbackground-color: #C5E874;\nfont-size: 20px;\n}\n<\/style>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-b5994976 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/smith.libcal.com\/appointments\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Help<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/airtable.com\/appTaYB0N2huF9zmw\/pagHgBkDh6j2AK4fH\/form\" target=\"_blank\" rel=\"noreferrer noopener\">Request a WordPress site<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--3\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/create-a-wordpress-post-and-add-content\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a WordPress Post<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--4\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/capstone\/\" target=\"_blank\" rel=\"noreferrer noopener\">Resources for Designing a Digital Project<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"toc\">Types of Interactive Content<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Media Production<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2606 <a href=\"#digitalnarratives\">Digital Narratives<\/a><\/li>\n\n\n\n<li>\u2606 <a href=\"#podcast\">Podcasting and Video Production<\/a><\/li>\n\n\n\n<li>\u2606 <a href=\"#zine\" data-type=\"internal\" data-id=\"#zine\">Zines<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">H5P Interactive Content<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2606 <a href=\"#h5p\">H5P Interactive Content<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#hotspot\">Image Hotspots<\/a><\/li>\n\n\n\n<li><a href=\"#virtualtour\">Virtual Tour<\/a><\/li>\n\n\n\n<li><a href=\"#infowall\">Information Wall<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Mapping Tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2606 <a href=\"#storymapjs\">StoryMapJS<\/a><\/li>\n\n\n\n<li>\u2606 <a href=\"#arcgis-storymaps\">ArcGIS StoryMaps<\/a> <\/li>\n<\/ul>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Timelines<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2606<a href=\"#js\">TimelineJS<\/a> (horizontal timeline)<\/li>\n\n\n\n<li>\u2606<a href=\"#cool\">Cool Timeline <\/a>(vertical timeline)<\/li>\n<\/ul>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Support for Creating your Content<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Equipment Loan and Media Resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sites.smith.edu\/project-resources\/media-production-equipment-loan\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Borrow Cameras and Recording Equipment<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/bit.ly\/freemediasources\">Free Media Sources<\/a> &#8211; Collected sources for free to use media<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"> Adding your digital project <\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#addcontent\">Adding your Content to the Class Website<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sites.smith.edu\/project-resources\/create-a-wordpress-post-and-add-content\/\">How to Create a WordPress Post and add content<\/a><\/li>\n\n\n\n<li><a href=\"#embed-projects\" data-type=\"internal\" data-id=\"#embed-projects\">Embedding Projects<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<p class=\"has-text-align-center has-medium-font-size\"><mark style=\"background-color:#fbf2a6\" class=\"has-inline-color has-black-color\">Note: All links to directions or examples open in a new tab<\/mark><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Media Production<\/h2>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"podcast\">\u2606 Podcasting and Video Production<\/h3>\n\n\n\n<p>Creating a podcast or a video are great ways to tell a story using audio or video.  <\/p>\n\n\n\n<p>Once you&#8217;ve created a podcast or a video, you can <a href=\"https:\/\/sites.smith.edu\/project-resources\/embed-a-video-or-podcast-from-panopto-and-add-a-transcript\/\" data-type=\"post\" data-id=\"841\">add it to your course site<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--5\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/docs.google.com\/document\/d\/16IT0oh5FhRCmvjSoGfBt5HNM8ohYnYMcR3xPISZvMp0\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Create a Podcast<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--6\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/video-production\/\">Create a Video<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"digitalnarratives\">\u2606 Create a Digital Narrative<\/h3>\n\n\n\n<p>Digital Narratives are short-form videos.  In a digital narrative,  the main content is typically driven by audio narration accompanied by music, image, and video. These visuals can be sourced from stock footage\/images or original footage\/images.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example Digital Narratives<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sites.google.com\/smith.edu\/amplifycompetition2022\/multimedia\/eve-mehalick-wilcox\" target=\"_blank\" rel=\"noreferrer noopener\">Eve Mehalick Wilcox \u201922 &#8211; Environmental Justice in New York&#8217;s Capital Region<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sites.google.com\/smith.edu\/amplifycompetition2022\/multimedia\/meredith-jones\" target=\"_blank\" rel=\"noreferrer noopener\">Meredith Jones \u201924 &#8211; Centering Emotional Knowledge and Relationships in Fight for Climate Justice<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--7\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/digital-narrative\/create-a-digital-narrative-with-adobe-express\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a Digital Narrative<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"zine\">\u2606 Zines<\/h3>\n\n\n\n<p>Zines can be created with physical or digital materials, typically a digest (5.5&#8243; x 8.5&#8243;) or half-letter size. To create a digital zine, you can use any graphic design or content creation software (i.e. Adobe Express, Canva, Google Slides, etc.) as long as you export your final product as a PDF. That PDF can then be embedded on the class WordPress site for visitors to page through.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example Zines<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sites.smith.edu\/swg150-04-sp24\/queer-asfruit-a-feminist-analysis-of-thirst-by-franny-choi\/\" data-type=\"link\" data-id=\"https:\/\/sites.smith.edu\/swg150-04-sp24\/queer-asfruit-a-feminist-analysis-of-thirst-by-franny-choi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Thea DeSchepper &#8211; Queer ASFruit: A Feminist Analysis of \u201cthirst\u201d by Franny Choi<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sites.smith.edu\/swg150-04-sp24\/turn-glass-into-dust-zine-by-jordan-hoffman\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jordan Hoffman &#8217;27 &#8211; Turn Glass into Dust<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--8\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/adding-a-zine-with-pdf-viewer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Add Zine to WordPress<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-32d57d21 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-right is-layout-flex wp-container-core-group-is-layout-fc306653 wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<p class=\"has-text-align-right has-medium-font-size\"> <a href=\"#top\"><mark style=\"background-color:#e8e374\" class=\"has-inline-color\">Go Back Up<\/mark><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Types of Interactive Content<\/h2>\n\n\n\n<p>There are lots of ways to add digital content to a WordPress page. <\/p>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u2606 H5P Interactive Content<\/h2>\n\n\n\n<p>H5P is a tool used to make interactive content, so that when someone visits a website they can interact with text, images, and sounds in different ways. H5P <em>content types<\/em> include images with clickable hotspots, virtual 360 tours, information panels, and even slideshows. For even more options, look through <a href=\"https:\/\/h5p.org\/content-types-and-applications\">H5P content types and applications<\/a>. <\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"hotspot\">Image Hotspots<\/h4>\n\n\n\n<p>The Image Hotspot H5P type allows you to annotate an image with text, images, and videos.<\/p>\n\n\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-1\" class=\"h5p-iframe\" data-content-id=\"1\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Keyel - Biscuits and Gravy\"><\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--9\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/create-interactive-images-using-h5p-image-hotspots\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create an Image Hotspot<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"virtualtour\">Virtual Tour<\/h4>\n\n\n\n<p>The Virtual Tour tour H5P type allows you to make an interactive virtual tour using images from a 360 camera or still images. <\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--10\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/virtual-tour-360\/\" target=\"_blank\" rel=\"noreferrer noopener\">See an Example Virtual Tour<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--11\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/docs.google.com\/document\/d\/1rEFB-wfYN5UPwOhp544NKzqucaxfxlYqXMhTL8sz0Qc\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Create a Virtual Tour<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"infowall\">Information Wall<\/h4>\n\n\n\n<p>The Information Wall type allows you to create a concise wall of content panels that a visitor can search for information.<\/p>\n\n\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-5\" class=\"h5p-iframe\" data-content-id=\"5\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Information Wall - Example from H5P.org\"><\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--12\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/information-wall\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create an Information Wall<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-32d57d21 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-right is-layout-flex wp-container-core-group-is-layout-fc306653 wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<p class=\"has-text-align-right has-medium-font-size\"> <a href=\"#top\"><mark style=\"background-color:#e8e374\" class=\"has-inline-color\">Go Back Up<\/mark><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Mapping Tools<\/h2>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"storymapjs\">\u2606 Create a map with StoryMapJS <\/h3>\n\n\n\n<p>StoryMapJS is a free mapping tool that guides a visitor through a sequence of locations. You can add with images and text to your map to describe important features, note access challenges, or illustrate the location.<\/p>\n\n\n\n<div class=\"h5p-content\" data-content-id=\"9\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--13\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/creating-a-map-with-storymapjs\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a StoryMap<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"arcgis-storymaps\">\u2606 Create a map with <strong>ArcGIS StoryMaps<\/strong><\/h3>\n\n\n\n<p>ArcGIS StoryMaps is a mapping and visual storytelling tool. StoryMaps can include a variety of maps, including interactive maps with popups and images, guided and unguided (explorer) tours, map sliders that allow you to compare multiple views of the same place, and maps with supplemental data. You can also add additional text, images, videos, and other embedded content, and change the appearance of your map or overall design.<\/p>\n\n\n\n<p>To create an ArcGIS StoryMap, log in to&nbsp;<a href=\"https:\/\/www.arcgis.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.arcgis.com<\/a>&nbsp;with the Your ArcGIS organization&#8217;s URL option. Type &#8220;smithcollege&#8221; as your organization, click the blue button that appears on the next screen, and follow the Duo login prompts. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"1024\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24-844x1024.png\" alt=\"The arcgis storymaps login screen\" class=\"wp-image-1286\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24-844x1024.png 844w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24-247x300.png 247w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24-768x932.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24-940x1140.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24-400x485.png 400w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-24.png 1004w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"814\" height=\"1024\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40-814x1024.png\" alt=\"The Smith College spatial analysis lab login button\" class=\"wp-image-1287\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40-814x1024.png 814w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40-238x300.png 238w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40-768x967.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40-940x1183.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40-400x503.png 400w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-14-40.png 982w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Then click the StoryMaps launch button or open&nbsp;<a href=\"https:\/\/storymaps.arcgis.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/storymaps.arcgis.com\/<\/a> and start a new story.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"509\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-1024x509.png\" alt=\"The ARCGIS homepage displaying the app launcher and the ARCGIS StoryMaps icon circled in red\" class=\"wp-image-1289\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-1024x509.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-300x149.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-768x382.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-1536x763.png 1536w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-2048x1018.png 2048w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-940x467.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/11\/2024-11-26_11-21-53-1-400x199.png 400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Additional self-guided instruction is&nbsp;<a href=\"https:\/\/storymaps.arcgis.com\/stories\/cea22a609a1d4cccb8d54c650b595bc4\" target=\"_blank\" rel=\"noreferrer noopener\">available here<\/a>, or contact&nbsp;<a href=\"mailto:sal@smith.edu\" target=\"_blank\" rel=\"noreferrer noopener\">sal@smith.edu<\/a>&nbsp;for support or a walkthrough.<\/p>\n\n\n\n<p>Wondering how to choose between <a href=\"#storymapjs\">StorymapsJS<\/a> and ArcGIS StoryMaps? The answer is partly stylistic: each offers different types of maps, layout, and design options.&nbsp; StorymapsJS is more accessible in terms of being free, ArcGIS StoryMaps is more accessible in terms of offering a high-contrast basemap and other visual and cognitive accessibility options.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Example StoryMaps<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/storymaps.arcgis.com\/stories\/407b6288771447afb2961988ef321fd4\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><a href=\"https:\/\/storymaps.arcgis.com\/stories\/bb1b8608eb514447be7ab1945ce9cb31\" target=\"_blank\" rel=\"noreferrer noopener\">Alison Pasbjerg, Abigail Dustin, Kari Berntson, and Margaret Bassney &#8211;&nbsp;Transforming Food Systems One Glean at a Time<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/storymaps.arcgis.com\/stories\/a8ec34d1360d40ee8882a2606558f3db\" target=\"_blank\" rel=\"noreferrer noopener\">SCMA &#8211; Ancient World Gallery Interactive Map<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--14\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.science.smith.edu\/sal\/contact\/\">Get Help from SAL<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-32d57d21 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-right is-layout-flex wp-container-core-group-is-layout-fc306653 wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<p class=\"has-text-align-right has-medium-font-size\"> <a href=\"#top\"><mark style=\"background-color:#e8e374\" class=\"has-inline-color\">Go Back Up<\/mark><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"timelines\">Timelines<\/h2>\n\n\n\n<p>Using a timeline tool is a way to create a sequence of different events. There are two different timeline tools<\/p>\n\n\n\n<p id=\"js\"><a href=\"https:\/\/timeline.knightlab.com\/\">TimelineJS<\/a> is a great way to create <strong>horizontal<\/strong> timelines. TimelineJS is an opensource tool created by <a href=\"https:\/\/knightlab.northwestern.edu\/\">Knightlab<\/a> that uses a Google Sheet as the bases for interactive timelines that support text and images, audio, and video.<\/p>\n\n\n\n<p id=\"cool\">Cool Timeline is a way to create <strong>vertical<\/strong> timelines using the Cool Timeline block in WordPress. Cool Timeline supports images and text.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--15\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/creating-a-timeline-with-timelinejs\/\">Create a Horizontal Timeline<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--16\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/sites.smith.edu\/project-resources\/creating-a-timeline-with-cool-timeline\/\">Create a Vertical Timeline<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-32d57d21 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-right is-layout-flex wp-container-core-group-is-layout-fc306653 wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<p class=\"has-text-align-right has-medium-font-size\"> <a href=\"#top\"><mark style=\"background-color:#e8e374\" class=\"has-inline-color\">Go Back Up<\/mark><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"addcontent\">Adding your Content to the Class Website<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a WordPress post on the Class Website<\/h3>\n\n\n\n<p>To add your content to a WordPress site like a portfolio, you&#8217;ll need to create a new post, add some explanatory text, and add your digital project.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/sites.smith.edu\/project-resources\/create-a-wordpress-post-and-add-content\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a WordPress Post and add content<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"embed-projects\">Embedding Projects<\/h3>\n\n\n\n<p>Depending on your digital project, you may need to link or embed it in your page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>StoryMapsJS<\/strong>\n<ul class=\"wp-block-list\">\n<li>Follow the directions to copy the share link and paste it in your WordPress Post<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Adding Content created online<\/strong>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sites.smith.edu\/project-resources\/iframe-embedder\/\" data-type=\"post\" data-id=\"309\" target=\"_blank\" rel=\"noreferrer noopener\">Embedding Content with the H5P iFrame embedder<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Adding Digital Narratives or other Audio\/Video<\/strong>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sites.smith.edu\/project-resources\/embed-a-video-or-podcast-from-panopto-and-add-a-transcript\/\" data-type=\"post\" data-id=\"841\" target=\"_blank\" rel=\"noreferrer noopener\">Embedding Content from Panopto<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-global-padding is-content-justification-right is-layout-constrained wp-container-core-group-is-layout-32d57d21 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-right is-layout-flex wp-container-core-group-is-layout-fc306653 wp-block-group-is-layout-flex\">\n<div style=\"height:100px;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer wp-container-content-6388d5dc\"><\/div>\n\n\n\n<p class=\"has-text-align-right has-medium-font-size\"> <a href=\"#top\"><mark style=\"background-color:#e8e374\" class=\"has-inline-color\">Go Back Up<\/mark><\/a><\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Types of Interactive Content Media Production H5P Interactive Content Mapping Tools Timelines Support for Creating your Content Equipment Loan and Media Resources Adding your digital project Note: All links to directions or examples open in a new tab Media Production \u2606 Podcasting and Video Production Creating a podcast or a video are great ways to [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1431","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/pages\/1431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/users\/5691"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/comments?post=1431"}],"version-history":[{"count":16,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/pages\/1431\/revisions"}],"predecessor-version":[{"id":2692,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/pages\/1431\/revisions\/2692"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=1431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}