{"id":329,"date":"2019-11-16T13:29:33","date_gmt":"2019-11-16T13:29:33","guid":{"rendered":"https:\/\/zuugs.ch\/showcase\/clientfiles\/?post_type=back-matter&#038;p=329"},"modified":"2021-10-17T11:44:13","modified_gmt":"2021-10-17T11:44:13","slug":"h5p-intro","status":"web-only","type":"back-matter","link":"https:\/\/zuugs.ch\/showcase\/clientfiles\/back-matter\/h5p-intro\/","title":{"raw":"H5P Intro - to get you started","rendered":"H5P Intro &#8211; to get you started"},"content":{"raw":"<h1>What is H5P<\/h1>\r\n<a href=\"https:\/\/en.wikipedia.org\/wiki\/H5P\" target=\"_blank\" rel=\"noopener noreferrer\">H5P<\/a> stands for 'HTML5 Project', which started at MIT (<a href=\"https:\/\/h5p.org\" target=\"_blank\" rel=\"noopener noreferrer\">H5P Website<\/a>).\r\n\r\nH5P modules are <strong>interactive modules<\/strong> for the web. It's Open Source.\r\n\r\n&nbsp;\r\n<h1>Examples<\/h1>\r\n<ul>\r\n \t<li>Showcase of a Swiss German lesson about <a href=\"https:\/\/zuugs.ch\/showcase\/pfarrersieber\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pfarrer Sieber<\/a>.<\/li>\r\n \t<li><a href=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/chapter\/interactivity-modules\/\" target=\"_blank\" rel=\"noopener noreferrer\">Interactivity Modules<\/a>\u00a0in this Zuugs (WordPress integration).<\/li>\r\n \t<li>Examples at <a href=\"https:\/\/wp-prd.let.ethz.ch\/catalog\/16\/\" target=\"_blank\" rel=\"noopener noreferrer\">ETH<\/a>\u00a0(my former employer).<\/li>\r\n \t<li><a href=\"https:\/\/h5p.org\/content-types-and-applications\" target=\"_blank\" rel=\"noopener noreferrer\">H5P.org examples<\/a><\/li>\r\n<\/ul>\r\n<h1>Recorded Demo<\/h1>\r\nRecording of 'Making a video interactive' from the H5P website.\r\n\r\nhttps:\/\/h5p.org\/sites\/default\/files\/front-page-demo.mp4\r\n<h1>Live Demo<\/h1>\r\nI will make two interactive modules, one 'Fill in the Blanks' and one 'Interactive Video'.\r\n\r\nHere is the video, I will use for the interactive video: <a href=\"https:\/\/www.youtube.com\/watch?v=j3brK0S1bzE&amp;rel=0\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.youtube.com\/watch?v=j3brK0S1bzE<\/a>\u00a0.\r\n<h2>Fill in the Blanks<\/h2>\r\n<div class=\"textbox\">[h5p id=\"22\"]<\/div>\r\n<h2>Interactive Video<\/h2>\r\n[h5p id=\"23\"]\r\n<h1>Where and How to Use<\/h1>\r\n<a href=\"https:\/\/h5p.org\/integrations\"><img class=\"alignnone wp-image-332\" src=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt.png\" alt=\"\" width=\"513\" height=\"254\" \/><\/a>\r\n\r\nMore\u00a0<a href=\"https:\/\/h5p.org\/integrations\" target=\"_blank\" rel=\"noopener noreferrer\">integrations<\/a>\u00a0and how to!\r\n\r\nThe business <strong>model<\/strong> is similar to WordPress. There is <a href=\"https:\/\/h5p.org\" target=\"_blank\" rel=\"noopener noreferrer\">h5p.org<\/a> and <a href=\"https:\/\/h5p.com\" target=\"_blank\" rel=\"noopener noreferrer\">h5p.com<\/a>.\r\n<h1>About Myself<\/h1>\r\n<a href=\"https:\/\/www.linkedin.com\/in\/sarahfrederickx\/\" target=\"_blank\" rel=\"noopener noreferrer\">LinkedIn Sarah Frederickx<\/a>\r\n\r\n&nbsp;\r\n\r\n<img class=\"aligncenter wp-image-335\" src=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/h5p-intro-url.png\" alt=\"\" width=\"653\" height=\"653\" \/>","rendered":"<h1>What is H5P<\/h1>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/H5P\" target=\"_blank\" rel=\"noopener noreferrer\">H5P<\/a> stands for &#8216;HTML5 Project&#8217;, which started at MIT (<a href=\"https:\/\/h5p.org\" target=\"_blank\" rel=\"noopener noreferrer\">H5P Website<\/a>).<\/p>\n<p>H5P modules are <strong>interactive modules<\/strong> for the web. It&#8217;s Open Source.<\/p>\n<p>&nbsp;<\/p>\n<h1>Examples<\/h1>\n<ul>\n<li>Showcase of a Swiss German lesson about <a href=\"https:\/\/zuugs.ch\/showcase\/pfarrersieber\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pfarrer Sieber<\/a>.<\/li>\n<li><a href=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/chapter\/interactivity-modules\/\" target=\"_blank\" rel=\"noopener noreferrer\">Interactivity Modules<\/a>\u00a0in this Zuugs (WordPress integration).<\/li>\n<li>Examples at <a href=\"https:\/\/wp-prd.let.ethz.ch\/catalog\/16\/\" target=\"_blank\" rel=\"noopener noreferrer\">ETH<\/a>\u00a0(my former employer).<\/li>\n<li><a href=\"https:\/\/h5p.org\/content-types-and-applications\" target=\"_blank\" rel=\"noopener noreferrer\">H5P.org examples<\/a><\/li>\n<\/ul>\n<h1>Recorded Demo<\/h1>\n<p>Recording of &#8216;Making a video interactive&#8217; from the H5P website.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]--><br \/>\n<video class=\"wp-video-shortcode\" id=\"video-329-1\" width=\"640\" height=\"360\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/h5p.org\/sites\/default\/files\/front-page-demo.mp4?_=1\" \/><a href=\"https:\/\/h5p.org\/sites\/default\/files\/front-page-demo.mp4\">https:\/\/h5p.org\/sites\/default\/files\/front-page-demo.mp4<\/a><\/video><\/div>\n<h1>Live Demo<\/h1>\n<p>I will make two interactive modules, one &#8216;Fill in the Blanks&#8217; and one &#8216;Interactive Video&#8217;.<\/p>\n<p>Here is the video, I will use for the interactive video: <a href=\"https:\/\/www.youtube.com\/watch?v=j3brK0S1bzE&amp;rel=0\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.youtube.com\/watch?v=j3brK0S1bzE<\/a>\u00a0.<\/p>\n<h2>Fill in the Blanks<\/h2>\n<div class=\"textbox\">\n<div id=\"h5p-22\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-22\" class=\"h5p-iframe\" data-content-id=\"22\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Test Blanks\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<h2>Interactive Video<\/h2>\n<div id=\"h5p-23\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-23\" class=\"h5p-iframe\" data-content-id=\"23\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Test Vid\"><\/iframe><\/div>\n<\/div>\n<h1>Where and How to Use<\/h1>\n<p><a href=\"https:\/\/h5p.org\/integrations\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-332\" src=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt.png\" alt=\"\" width=\"513\" height=\"254\" srcset=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt.png 1010w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt-300x149.png 300w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt-768x380.png 768w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt-65x32.png 65w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt-225x111.png 225w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/H5P-integrations-excerpt-350x173.png 350w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/a><\/p>\n<p>More\u00a0<a href=\"https:\/\/h5p.org\/integrations\" target=\"_blank\" rel=\"noopener noreferrer\">integrations<\/a>\u00a0and how to!<\/p>\n<p>The business <strong>model<\/strong> is similar to WordPress. There is <a href=\"https:\/\/h5p.org\" target=\"_blank\" rel=\"noopener noreferrer\">h5p.org<\/a> and <a href=\"https:\/\/h5p.com\" target=\"_blank\" rel=\"noopener noreferrer\">h5p.com<\/a>.<\/p>\n<h1>About Myself<\/h1>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/sarahfrederickx\/\" target=\"_blank\" rel=\"noopener noreferrer\">LinkedIn Sarah Frederickx<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-335\" src=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/h5p-intro-url.png\" alt=\"\" width=\"653\" height=\"653\" srcset=\"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/h5p-intro-url.png 300w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/h5p-intro-url-150x150.png 150w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/h5p-intro-url-65x65.png 65w, https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-content\/uploads\/sites\/4\/2019\/11\/h5p-intro-url-225x225.png 225w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/p>\n","protected":false},"author":5,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"back-matter-type":[],"contributor":[49],"license":[],"class_list":["post-329","back-matter","type-back-matter","status-web-only","hentry","contributor-by-thirteenhundredgrams-gmbh"],"_links":{"self":[{"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/pressbooks\/v2\/back-matter\/329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/pressbooks\/v2\/back-matter"}],"about":[{"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/wp\/v2\/types\/back-matter"}],"author":[{"embeddable":true,"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":35,"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/pressbooks\/v2\/back-matter\/329\/revisions"}],"predecessor-version":[{"id":370,"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/pressbooks\/v2\/back-matter\/329\/revisions\/370"}],"metadata":[{"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/pressbooks\/v2\/back-matter\/329\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/wp\/v2\/media?parent=329"}],"wp:term":[{"taxonomy":"back-matter-type","embeddable":true,"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/pressbooks\/v2\/back-matter-type?post=329"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/wp\/v2\/contributor?post=329"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/zuugs.ch\/showcase\/clientfiles\/wp-json\/wp\/v2\/license?post=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}