Methods
H5P: Interactive Protest History
Shelley Rose
In this digital humanities lab we will use H5P to explore the primary and secondary sources we will use in the Digital Humanities Case Study Project. You will build H5P into your case study “part” on the student research Pressbook. For Fall 2024 that is https://pressbooks.ulib.csuohio.edu/ppgsed24/. Use this lab to practice building H5P content in for your case study.
There are many possibilities for using H5P with this Pressbook. Browse the H5P Content Library for ideas. We will review 3 main content types in detail below.
Image with Hotspots
Tutorial: How to Create an H5P Image with Hotspots and More Info by Heather Caprette (CSU Center for eLearning)
This activity is an exercise in historical thinking about a specific material primary source. An image with hotspots allows your audience to engage with the historical context of an image you provide. You are essentially walking them through the contextualization and close reading steps of historical thinking.
Uses of Hotspots
- Curating an image
- Conducting visual analysis of a magazine cover or page
- Curating a map
- Curating a primary source (chart etc) from your protest event
You can see an example of this type of curation at https://pressbooks.ulib.csuohio.edu/historicalstudiesstudentresearch/chapter/roseh5p/
Image Juxtaposition
Image juxtaposition allows a side-by-side comparison of two images with a slider that one can use to toggle between them.
Uses of Juxtaposition
- Before and after photos of protest sites (for example Tahrir Square empty and Tahrir Square filled with protestors) (see these before and after of costumes https://pressbooks.ulib.csuohio.edu/theater-fall-2019/chapter/chapter-1-4-interactive-learning-content-costume-design/)
- Contrast between past event and more recent event (such as Easter Marches of the 1950s and those of the 1980s)
- Show different perspectives of the same object
To see an example visit this page https://pressbooks.ulib.csuohio.edu/historicalthinkingandhistoriography/chapter/module-4/ and scroll down to the Historical Sources/Historiography image.
Agamotto (Image Blender)
Tutorial: How to Create an H5P Agamotto (Image Blender) Content Type with Images and Text by Heather Caprette (CSU Center for eLearning)
The image blender is a useful tool for showing change over time or comparing images. This type of H5P content may be particularly useful if you want to show the build up of people in a certain place or reveal layers of a map in sequence.
Uses of Agamotto
- Reveal layers of map or chart sequentially
- Show change over time
Interactive Video
Interactive video allows for the creator to annotate a video recording to make it an interactive experience for viewers. Examples could be clips of media coverage, speeches, or other footage of your protest event.
Tutorial: How to create a H5P Interactive Video by Heather Caprette (CSU Center for eLearning)
Uses of Interactive Video
- Annotate a recording of a speech
- Analyze or contextualize media coverage of your event
- Provide links to content elsewhere in your case study exhibit as they are mentioned in the recording
Additional H5P Content Types
Timeline (see example from Intro to Theater https://pressbooks.ulib.csuohio.edu/theater-fall-2019/chapter/chapter-1-3-interactive-learning-content-acting/)
Structure Strip or Information Wall
H5P Project Lab
H5P Lab Instructions
- Go to https://pressbooks.ulib.csuohio.edu/ppgsed24/ and log in if needed.
- Choose an H5P content type from the above overview. Think about the media content you will need to create the element.
- In the dashboard, create a “chapter” under the part for your case study. For now, label it as H5P Lab YOURLASTNAME. Uncheck the box “Show in Web.”
- Click on “H5P Content” in the left menu of the Pressbooks Dashboard.
- Click on “Add New”
- Select your desired H5P Content Type from the menu and start filling in the fields.
- When you are finished, click “Create” in the upper right corner of the dashboard.
- Return to your chapter page. Navigate to where you want to insert the H5P content and click “Add H5P.” Select your content from the list. Click “Insert”
- Add any additional text and headers to your chapter to put your H5P element in context.
- Submit the public URL of your H5P chapter to the assignment dropbox.
