PowerPoint is the standard when it comes to presentations. But if you have to switch back and forth between PowerPoint and live demos, media, or websites, it can be inconvenient and clumsy, not to mention visually jarring and disruptive to your audience.*Switching out from PowerPoint typically means exiting PowerPoint, or using Alt+tab or Command+tab to switch back and forth between slides and other content you want to show.
While any Story Map can be used to deliver a presentation, some are better suited to the task than others. My preference is the*Story Map Series, specifically the bulleted or tabbed layout, since those provide sequential access moving from left to right. Map Series bulleted and tabbed layouts also do not require using a side panel for additional text or media – something not needed for most presentations.
Here’s some tips on using a Story Map Series instead of PowerPoint for your presentations. In this example the bulleted layout is used, but the tabbed layout works in a similar way.
Adding PowerPoint Slides
PowerPoint slides can be added to your Story Map by exporting or capturing them as images, hosting them on your website or in your ArcGIS account, and adding them via URL to your story map. You can also use Flickr, Google Photos, Facebook, or other alternatives like Box and Google Docs. Ensure your images are sized appropriately for web use.
In this example a PowerPoint slide has been captured, optimized for the web, and stored at this location:
http://downloads.esri.com/agol/blog/ppt-slide1.jpg
To add the slide:
Step 1.*Add the slide as an Image with URL as the source.
In the Story Map builder, add a bullet. Click Image, then URL as the source of the image.
Step 2.*Add the slide URL and position the the slide using Fit.
Fit (rather than the default option of Fill) provides the best results for slides with text; the entire slide will be displayed ensuring no text will be cropped. Fit also ensures slides will display well on any projection resolution or aspect ratio.
The text panel can be left blank. You won’t need it since your slides will include all the necessary text.
If you know the display size
In rare cases you may*know the exact display resolution for your presentation. If you do, another option is to determine the size needed to fill the main stage, add a few pixels on all sides to ensure the slide completely fills the space, then use a position of Center. This technique only works when you purpose-build a presentation for a specific event and know the exact display size, since when you use Center your slides can be cropped at different resolutions.
Main stage background
The main stage of a Story Map Series has a background color. When using Fit the main stage background may be visible around the slide edges.*Below, the slide has been added as an image via URL, and positioned using Fit. The main stage background is visible on the left and right sides of the slide.
Choosing a complimentary color scheme
You can choose a theme that will complement your slide backgound. Click Settings
Then click Theme, and choose a color scheme that works best with your slides. Click Apply when finished, and Save your story map.
Eliminating the background
To eliminate the background, you can use a single color slide background and display the slide in a web page that sets the background color of the page to match the slide background.
Below, the slide has been added using a web page that sets the background color of the page to match the slide background color. Compare this image to the one at the top of this section showing the slide with the background visible.
Open this web page, and save it locally. copy and paste it into a new HTML document and make the necessary edits for the background color and slide URL as noted. Host the HTML document, and add it to your story map as a web page, using the default Fill option. The HTML will display the slide responsively, so that it fits any size or aspect ratio.
html, body {padding: 0; margin: 0; }/*Specify background color of your slide*/body {background-color: #3c5a76;}/*Centering horizontally and vertically:https://css-tricks.com/centering-css-complete-guide/*/#slide-pic {position: absolute; display: block; top: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);left: 50%; max-width: 100%; max-height: 100%;}
Adding maps, apps, and more
In addition to your slides, you will want to add web maps, apps, and more. Add them using their URL, and use the default Fill position. Since the map viewer and most apps and app templates are responsive, they’ll fill the entire main stage area.
When embedding apps or other story maps, some offer options to minimize the user interface, which is recommended for best results. See Embedding a Story Map within a Story Map.
Once again, the text panel is not necessary and may be left blank.
Maximizing your presentation
When displaying your story map presentation in a browser, maximize the display area by appending &embed to the end of your story map URL. This eliminates the title (and subtitle if you have one), and only displays the bullets or tabs.
Without &embed
With &embed
You can also hide all browser bookmarks to gain additional space, and can display the presentation in full screen mode (F11 in Chrome) to omit browser tabs and use all available space.
Shown below is the story map displayed in fullscreen mode using &embed, and with the slide displayed using the web page method to eliminate the background, as described above.
Tips and considerations
Story Maps are a powerful way to tell a story using maps and media, and Story Maps can be a powerful way to deliver presentations. Some thought and planning will provide the best results. Here’s a few things to consider.
أكثر...
While any Story Map can be used to deliver a presentation, some are better suited to the task than others. My preference is the*Story Map Series, specifically the bulleted or tabbed layout, since those provide sequential access moving from left to right. Map Series bulleted and tabbed layouts also do not require using a side panel for additional text or media – something not needed for most presentations.
Here’s some tips on using a Story Map Series instead of PowerPoint for your presentations. In this example the bulleted layout is used, but the tabbed layout works in a similar way.
Adding PowerPoint Slides
PowerPoint slides can be added to your Story Map by exporting or capturing them as images, hosting them on your website or in your ArcGIS account, and adding them via URL to your story map. You can also use Flickr, Google Photos, Facebook, or other alternatives like Box and Google Docs. Ensure your images are sized appropriately for web use.
In this example a PowerPoint slide has been captured, optimized for the web, and stored at this location:
http://downloads.esri.com/agol/blog/ppt-slide1.jpg
To add the slide:
Step 1.*Add the slide as an Image with URL as the source.
In the Story Map builder, add a bullet. Click Image, then URL as the source of the image.
Step 2.*Add the slide URL and position the the slide using Fit.
Fit (rather than the default option of Fill) provides the best results for slides with text; the entire slide will be displayed ensuring no text will be cropped. Fit also ensures slides will display well on any projection resolution or aspect ratio.
The text panel can be left blank. You won’t need it since your slides will include all the necessary text.
If you know the display size
In rare cases you may*know the exact display resolution for your presentation. If you do, another option is to determine the size needed to fill the main stage, add a few pixels on all sides to ensure the slide completely fills the space, then use a position of Center. This technique only works when you purpose-build a presentation for a specific event and know the exact display size, since when you use Center your slides can be cropped at different resolutions.
Main stage background
The main stage of a Story Map Series has a background color. When using Fit the main stage background may be visible around the slide edges.*Below, the slide has been added as an image via URL, and positioned using Fit. The main stage background is visible on the left and right sides of the slide.
Choosing a complimentary color scheme
You can choose a theme that will complement your slide backgound. Click Settings
Then click Theme, and choose a color scheme that works best with your slides. Click Apply when finished, and Save your story map.
Eliminating the background
To eliminate the background, you can use a single color slide background and display the slide in a web page that sets the background color of the page to match the slide background.
Below, the slide has been added using a web page that sets the background color of the page to match the slide background color. Compare this image to the one at the top of this section showing the slide with the background visible.
Open this web page, and save it locally. copy and paste it into a new HTML document and make the necessary edits for the background color and slide URL as noted. Host the HTML document, and add it to your story map as a web page, using the default Fill option. The HTML will display the slide responsively, so that it fits any size or aspect ratio.
html, body {padding: 0; margin: 0; }/*Specify background color of your slide*/body {background-color: #3c5a76;}/*Centering horizontally and vertically:https://css-tricks.com/centering-css-complete-guide/*/#slide-pic {position: absolute; display: block; top: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);left: 50%; max-width: 100%; max-height: 100%;}
In addition to your slides, you will want to add web maps, apps, and more. Add them using their URL, and use the default Fill position. Since the map viewer and most apps and app templates are responsive, they’ll fill the entire main stage area.
When embedding apps or other story maps, some offer options to minimize the user interface, which is recommended for best results. See Embedding a Story Map within a Story Map.
Once again, the text panel is not necessary and may be left blank.
Maximizing your presentation
When displaying your story map presentation in a browser, maximize the display area by appending &embed to the end of your story map URL. This eliminates the title (and subtitle if you have one), and only displays the bullets or tabs.
Without &embed
With &embed
You can also hide all browser bookmarks to gain additional space, and can display the presentation in full screen mode (F11 in Chrome) to omit browser tabs and use all available space.
Shown below is the story map displayed in fullscreen mode using &embed, and with the slide displayed using the web page method to eliminate the background, as described above.
Tips and considerations
Story Maps are a powerful way to tell a story using maps and media, and Story Maps can be a powerful way to deliver presentations. Some thought and planning will provide the best results. Here’s a few things to consider.
- It’s easy to author a terrible PowerPoint presentation, and we’ve all suffered through our share of them. Crafting a great Story Map is somewhat of an art, and a great Story Map presentation is no different.
- Omit, or limit, the text in the Story Map so that the audience listens to you, instead of reading words.
- Story Map presentations work best when they are short. Story Map Series supports a maximum of 30 tabs or bullets.
- Story Maps do not offer the slide transitions and animations that are available in PowerPoint. If you feel these are necessary, stick with PowerPoint.
- Choose the best Story Map for your purpose. Story*Map Series, with its optional text panel, is ideal if you want your audience to focus on your slides and live apps.
- When adding content via a URL that takes a while to initialize (like a detailed web scene), ensure that*Unload when reader navigates away*is unchecked. Before your presentation you can “warm up” all your maps and apps, and unchecking this option ensures they do not need to be reloaded when you reach that part of your presentation.
أكثر...