{"id":56,"date":"2023-09-27T17:37:12","date_gmt":"2023-09-27T17:37:12","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/?post_type=chapter&#038;p=56"},"modified":"2024-10-15T13:43:20","modified_gmt":"2024-10-15T13:43:20","slug":"h5p-protest-history","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/chapter\/h5p-protest-history\/","title":{"rendered":"H5P: Interactive Protest History"},"content":{"raw":"In this digital humanities lab we will use H5P to explore the primary and secondary sources we will use in the <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/chapter\/ppgproject\/\">Digital Humanities Case Study Project<\/a>. You will build H5P into your case study \"part\" on the student research Pressbook. For Fall 2024 that is <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/\" target=\"_blank\" rel=\"noopener\">https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/<\/a>.\u00a0 Use this lab to practice building H5P content in for your case study.\r\n\r\nThere are many possibilities for using H5P with this Pressbook. Browse the <a href=\"https:\/\/h5p.org\/content-types-and-applications\">H5P Content Library<\/a> for ideas. We will review 3 main content types in detail below.\r\n<h2><a href=\"https:\/\/h5p.org\/image-hotspots\">Image with Hotspots<\/a><\/h2>\r\nTutorial: <a href=\"https:\/\/csuohio.hosted.panopto.com\/Panopto\/Pages\/Viewer.aspx?id=3af09ce1-7815-4787-81e9-af0b010c57a2\" target=\"_blank\" rel=\"noopener\">How to Create an H5P Image with Hotspots and More Info<\/a><span> by Heather Caprette (CSU Center for eLearning)<\/span>\r\n\r\nThis 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 <b>contextualization<\/b>\u00a0and <strong>close reading<\/strong> steps of historical thinking.\r\n<h3>Uses of Hotspots<\/h3>\r\n<ul>\r\n \t<li>Curating an image<\/li>\r\n \t<li>Conducting visual analysis of a magazine cover or page<\/li>\r\n \t<li>Curating a map<\/li>\r\n \t<li>Curating a primary source (chart etc) from your protest event<\/li>\r\n<\/ul>\r\nYou can see an example of this type of curation at <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/historicalstudiesstudentresearch\/chapter\/roseh5p\/\">https:\/\/pressbooks.ulib.csuohio.edu\/historicalstudiesstudentresearch\/chapter\/roseh5p\/<\/a>\r\n<h2><a href=\"https:\/\/h5p.org\/image-juxtaposition\">Image Juxtaposition<\/a><\/h2>\r\nImage juxtaposition allows a side-by-side comparison of two images with a slider that one can use to toggle between them.\r\n<h3>Uses of Juxtaposition<\/h3>\r\n<ul>\r\n \t<li>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 <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-4-interactive-learning-content-costume-design\/\">https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-4-interactive-learning-content-costume-design<\/a>\/)<\/li>\r\n \t<li>Contrast between past event and more recent event (such as Easter Marches of the 1950s and those of the 1980s)<\/li>\r\n \t<li>Show different perspectives of the same object<\/li>\r\n<\/ul>\r\nTo see an example visit this page <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/historicalthinkingandhistoriography\/chapter\/module-4\/\">https:\/\/pressbooks.ulib.csuohio.edu\/historicalthinkingandhistoriography\/chapter\/module-4\/<\/a> and scroll down to the Historical Sources\/Historiography image.\r\n<h2><a href=\"https:\/\/h5p.org\/content-types\/agamotto\">Agamotto (Image Blender)<\/a><\/h2>\r\nTutorial: <a href=\"https:\/\/csuohio.hosted.panopto.com\/Panopto\/Pages\/Viewer.aspx?id=93d6aada-df8b-4207-b587-af0a011ce6d6\" target=\"_blank\" rel=\"noopener\">How to Create an H5P Agamotto (Image Blender) Content Type with Images and Text<\/a><span> by Heather Caprette (CSU Center for eLearning)<\/span>\r\n\r\nThe 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.\r\n<h3>Uses of Agamotto<\/h3>\r\n<ul>\r\n \t<li>Reveal layers of map or chart sequentially<\/li>\r\n \t<li>Show change over time<\/li>\r\n<\/ul>\r\n<h2><a href=\"https:\/\/h5p.org\/interactive-video\">Interactive Video<\/a><\/h2>\r\nInteractive 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.\r\n\r\nTutorial:\u00a0<a href=\"https:\/\/nam02.safelinks.protection.outlook.com\/?url=https%3A%2F%2Fyoutu.be%2FcXIPT3QdDTI&amp;data=05%7C01%7Cshelley.rose%40csuohio.edu%7Cd21bec6a021b4817005708da75664934%7Cd7f3e79a943d4aceaeab209030807508%7C0%7C0%7C637951379422697074%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=erXEJA5hVxEDaADo9VF%2FviC0hgIx092BCKj%2BTEk7MYw%3D&amp;reserved=0\" target=\"_blank\" rel=\"noopener\">How to create a H5P Interactive Video<\/a> by Heather Caprette (CSU Center for eLearning)\r\n<h3>Uses of Interactive Video<\/h3>\r\n<ul>\r\n \t<li>Annotate a recording of a speech<\/li>\r\n \t<li>Analyze or contextualize media coverage of your event<\/li>\r\n \t<li>Provide links to content elsewhere in your case study exhibit as they are mentioned in the recording<\/li>\r\n<\/ul>\r\n<h2>Additional H5P Content Types<\/h2>\r\n<a href=\"https:\/\/h5p.org\/dialog-cards\">Dialog Cards<\/a>\r\n\r\n<a href=\"https:\/\/h5p.org\/timeline\">Timeline<\/a> (see example from Intro to Theater <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-3-interactive-learning-content-acting\">https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-3-interactive-learning-content-acting<\/a>\/)\r\n\r\n<a href=\"https:\/\/h5p.org\/virtual-tour-360\">Virtual Tour<\/a>\r\n\r\n<a href=\"https:\/\/h5p.org\/content-types\/structure-strip\">Structure Strip<\/a> or <a href=\"https:\/\/h5p.org\/content-types\/information-wall\">Information Wall<\/a>\r\n<h2>H5P Project Lab<\/h2>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h2 class=\"textbox__title\"><span style=\"color: #ffffff\">H5P Lab Instructions<\/span><\/h2>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ol>\r\n \t<li class=\"no-indent\">Go to <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/\" target=\"_blank\" rel=\"noopener\">https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/<\/a> and log in if needed.<\/li>\r\n \t<li>Choose an H5P content type from the above overview. Think about the media content you will need to create the element.<\/li>\r\n \t<li class=\"no-indent\">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.\"<\/li>\r\n \t<li class=\"no-indent\">Click on \"H5P Content\" in the left menu of the Pressbooks Dashboard.<\/li>\r\n \t<li>Click on \"Add New\"<\/li>\r\n \t<li>Select your desired H5P Content Type from the menu and start filling in the fields.<\/li>\r\n \t<li>When you are finished, click \"Create\" in the upper right corner of the dashboard.<\/li>\r\n \t<li>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\"<\/li>\r\n \t<li>Add any additional text and headers to your chapter to put your H5P element in context.<\/li>\r\n \t<li>Submit the public URL of your H5P chapter to the assignment dropbox.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>","rendered":"<p>In this digital humanities lab we will use H5P to explore the primary and secondary sources we will use in the <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/chapter\/ppgproject\/\">Digital Humanities Case Study Project<\/a>. You will build H5P into your case study &#8220;part&#8221; on the student research Pressbook. For Fall 2024 that is <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/\" target=\"_blank\" rel=\"noopener\">https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/<\/a>.\u00a0 Use this lab to practice building H5P content in for your case study.<\/p>\n<p>There are many possibilities for using H5P with this Pressbook. Browse the <a href=\"https:\/\/h5p.org\/content-types-and-applications\">H5P Content Library<\/a> for ideas. We will review 3 main content types in detail below.<\/p>\n<h2><a href=\"https:\/\/h5p.org\/image-hotspots\">Image with Hotspots<\/a><\/h2>\n<p>Tutorial: <a href=\"https:\/\/csuohio.hosted.panopto.com\/Panopto\/Pages\/Viewer.aspx?id=3af09ce1-7815-4787-81e9-af0b010c57a2\" target=\"_blank\" rel=\"noopener\">How to Create an H5P Image with Hotspots and More Info<\/a> by Heather Caprette (CSU Center for eLearning)<\/p>\n<p>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 <b>contextualization<\/b>\u00a0and <strong>close reading<\/strong> steps of historical thinking.<\/p>\n<h3>Uses of Hotspots<\/h3>\n<ul>\n<li>Curating an image<\/li>\n<li>Conducting visual analysis of a magazine cover or page<\/li>\n<li>Curating a map<\/li>\n<li>Curating a primary source (chart etc) from your protest event<\/li>\n<\/ul>\n<p>You can see an example of this type of curation at <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/historicalstudiesstudentresearch\/chapter\/roseh5p\/\">https:\/\/pressbooks.ulib.csuohio.edu\/historicalstudiesstudentresearch\/chapter\/roseh5p\/<\/a><\/p>\n<h2><a href=\"https:\/\/h5p.org\/image-juxtaposition\">Image Juxtaposition<\/a><\/h2>\n<p>Image juxtaposition allows a side-by-side comparison of two images with a slider that one can use to toggle between them.<\/p>\n<h3>Uses of Juxtaposition<\/h3>\n<ul>\n<li>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 <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-4-interactive-learning-content-costume-design\/\">https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-4-interactive-learning-content-costume-design<\/a>\/)<\/li>\n<li>Contrast between past event and more recent event (such as Easter Marches of the 1950s and those of the 1980s)<\/li>\n<li>Show different perspectives of the same object<\/li>\n<\/ul>\n<p>To see an example visit this page <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/historicalthinkingandhistoriography\/chapter\/module-4\/\">https:\/\/pressbooks.ulib.csuohio.edu\/historicalthinkingandhistoriography\/chapter\/module-4\/<\/a> and scroll down to the Historical Sources\/Historiography image.<\/p>\n<h2><a href=\"https:\/\/h5p.org\/content-types\/agamotto\">Agamotto (Image Blender)<\/a><\/h2>\n<p>Tutorial: <a href=\"https:\/\/csuohio.hosted.panopto.com\/Panopto\/Pages\/Viewer.aspx?id=93d6aada-df8b-4207-b587-af0a011ce6d6\" target=\"_blank\" rel=\"noopener\">How to Create an H5P Agamotto (Image Blender) Content Type with Images and Text<\/a> by Heather Caprette (CSU Center for eLearning)<\/p>\n<p>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.<\/p>\n<h3>Uses of Agamotto<\/h3>\n<ul>\n<li>Reveal layers of map or chart sequentially<\/li>\n<li>Show change over time<\/li>\n<\/ul>\n<h2><a href=\"https:\/\/h5p.org\/interactive-video\">Interactive Video<\/a><\/h2>\n<p>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.<\/p>\n<p>Tutorial:\u00a0<a href=\"https:\/\/nam02.safelinks.protection.outlook.com\/?url=https%3A%2F%2Fyoutu.be%2FcXIPT3QdDTI&amp;data=05%7C01%7Cshelley.rose%40csuohio.edu%7Cd21bec6a021b4817005708da75664934%7Cd7f3e79a943d4aceaeab209030807508%7C0%7C0%7C637951379422697074%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=erXEJA5hVxEDaADo9VF%2FviC0hgIx092BCKj%2BTEk7MYw%3D&amp;reserved=0\" target=\"_blank\" rel=\"noopener\">How to create a H5P Interactive Video<\/a> by Heather Caprette (CSU Center for eLearning)<\/p>\n<h3>Uses of Interactive Video<\/h3>\n<ul>\n<li>Annotate a recording of a speech<\/li>\n<li>Analyze or contextualize media coverage of your event<\/li>\n<li>Provide links to content elsewhere in your case study exhibit as they are mentioned in the recording<\/li>\n<\/ul>\n<h2>Additional H5P Content Types<\/h2>\n<p><a href=\"https:\/\/h5p.org\/dialog-cards\">Dialog Cards<\/a><\/p>\n<p><a href=\"https:\/\/h5p.org\/timeline\">Timeline<\/a> (see example from Intro to Theater <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-3-interactive-learning-content-acting\">https:\/\/pressbooks.ulib.csuohio.edu\/theater-fall-2019\/chapter\/chapter-1-3-interactive-learning-content-acting<\/a>\/)<\/p>\n<p><a href=\"https:\/\/h5p.org\/virtual-tour-360\">Virtual Tour<\/a><\/p>\n<p><a href=\"https:\/\/h5p.org\/content-types\/structure-strip\">Structure Strip<\/a> or <a href=\"https:\/\/h5p.org\/content-types\/information-wall\">Information Wall<\/a><\/p>\n<h2>H5P Project Lab<\/h2>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h2 class=\"textbox__title\"><span style=\"color: #ffffff\">H5P Lab Instructions<\/span><\/h2>\n<\/header>\n<div class=\"textbox__content\">\n<ol>\n<li class=\"no-indent\">Go to <a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/\" target=\"_blank\" rel=\"noopener\">https:\/\/pressbooks.ulib.csuohio.edu\/ppgsed24\/<\/a> and log in if needed.<\/li>\n<li>Choose an H5P content type from the above overview. Think about the media content you will need to create the element.<\/li>\n<li class=\"no-indent\">In the dashboard, create a &#8220;chapter&#8221; under the part for your case study. For now, label it as H5P Lab YOURLASTNAME. Uncheck the box &#8220;Show in Web.&#8221;<\/li>\n<li class=\"no-indent\">Click on &#8220;H5P Content&#8221; in the left menu of the Pressbooks Dashboard.<\/li>\n<li>Click on &#8220;Add New&#8221;<\/li>\n<li>Select your desired H5P Content Type from the menu and start filling in the fields.<\/li>\n<li>When you are finished, click &#8220;Create&#8221; in the upper right corner of the dashboard.<\/li>\n<li>Return to your chapter page. Navigate to where you want to insert the H5P content and click &#8220;Add H5P.&#8221; Select your content from the list. Click &#8220;Insert&#8221;<\/li>\n<li>Add any additional text and headers to your chapter to put your H5P element in context.<\/li>\n<li>Submit the public URL of your H5P chapter to the assignment dropbox.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n","protected":false},"author":107,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["shelley-rose"],"pb_section_license":""},"chapter-type":[],"contributor":[63],"license":[],"class_list":["post-56","chapter","type-chapter","status-publish","hentry","contributor-shelley-rose"],"part":21,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/chapters\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/wp\/v2\/users\/107"}],"version-history":[{"count":19,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/chapters\/56\/revisions"}],"predecessor-version":[{"id":149,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/chapters\/56\/revisions\/149"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/parts\/21"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/chapters\/56\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/pressbooks\/v2\/chapter-type?post=56"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/wp\/v2\/contributor?post=56"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/ppg\/wp-json\/wp\/v2\/license?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}