{"id":1140,"date":"2018-03-05T23:52:30","date_gmt":"2018-03-05T23:52:30","guid":{"rendered":"https:\/\/course.oeru.org\/lida100\/?page_id=1140"},"modified":"2018-03-05T23:52:30","modified_gmt":"2018-03-05T23:52:30","slug":"html-slideshow","status":"publish","type":"page","link":"https:\/\/course.oeru.org\/lida100\/unit-4\/create-media\/html-slideshow\/","title":{"rendered":"HTML Slideshow"},"content":{"rendered":"<div id=\"content\" class=\"mw-body container\" role=\"main\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div id=\"bodyContent\">\n<div id=\"mw-content-text\" lang=\"en\" dir=\"ltr\" class=\"mw-content-ltr\">\n<div class=\"floatright\"><a href=\"http:\/\/WikiEducator.org\/File:HTML-code_screen.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"HTML-code screen.jpg\" src=\"\/\/WikiEducator.org\/images\/thumb\/2\/2c\/HTML-code_screen.jpg\/320px-HTML-code_screen.jpg\" width=\"320\" height=\"180\" class=\"img-responsive\"><\/a><\/div>\n<p>In this section we explore web-based slideshows which are coded in HTML. This enables the slideshow to be viewed and presented using a web browser, with the advantage of supporting responsive design for mobile devices and applying styles using CSS (Cascading Style Sheets). Together with JavaScript (JS) it is possible generate dynamic and professional presentations authored natively for the web.<\/p>\n<p>In this course, you are not required to learn how to code slide shows in HTML, but you will develop associated skills in web-based slideshows using the <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/slides.com\/\">Slides.com<\/a> web-service. This web-service generates the underlying HTML for the open source <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/github.com\/hakimel\/reveal.js\/\">Reveal.js<\/a> framework for web-based slideshow presentations.<br style=\"clear:both;\">\n<\/p>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"summary\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_summary.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Mini challenge summary<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"100px\"><b>Summary<\/b>:<\/td>\n<td>Prepare a short web-based slideshow based on the Reveal.js framework.<\/td>\n<\/tr>\n<tr>\n<td>\n<div class=\"floatleft\"><a href=\"http:\/\/WikiEducator.org\/File:Time7.svg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Time7.svg\" src=\"\/\/WikiEducator.org\/images\/thumb\/8\/88\/Time7.svg\/30px-Time7.svg.png\" width=\"30\" height=\"30\" class=\"img-responsive\"><\/a><\/div>\n<\/td>\n<td>1 &#8211; 1.5 hours<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Start_here\">Start here<\/span><\/h2>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"web resources\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_inter.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Stimulus resources<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<ul>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/lab.hakim.se\/reveal-js\/#\/\">Reveal.js slideshow demonstration<\/a> (summarises capabilities of the Reveal.js html slide framework).\n<\/li>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/slides.com\/features\">Slides.com features<\/a>\n<\/li>\n<\/ul>\n<p><b>Examples<\/b>\n<\/p>\n<ul>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/slides.com\/sdrasner\/react-europe-17#\/\">Animating the virtual DOM<\/a>\n<\/li>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/slides.com\/joanleon\/svg-animations#\/\">SVG Animations<\/a>\n<\/li>\n<\/ul>\n<p><b>Tips for designing good slideshow presentations<\/b>\n<\/p>\n<ul>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/blog.ted.com\/10-tips-for-better-slide-decks\/\">10 tips on how to make slides that communicate your idea, from TED\u2019s in-house expert<\/a>\n<\/li>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/www.visuali.se\/10-tips-for-beautiful-slideshows\/\">10 tips for beautiful slideshows<\/a>\n<\/li>\n<\/ul>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"objectives\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_objectives.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Purpose<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p>The purpose of this mini challenge is to develop an early draft of one or two concept ideas for your multimodal presentation assignment while improving your skills in creating media using web technologies rather than traditional presentation software.\n<\/p>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Tasks\">Tasks<\/span><\/h2>\n<ol>\n<li> <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/slides.com\/users\/sign_up?plan=free\">Signup<\/a> for a free account on <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/slides.com\/\">Slides.com<\/a> to trial the web service. (Note: Using the free account option, your presentations will be public and storage is limited to 250MB. <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/slides.com\/pricing\">Paid subscriptions<\/a> provide additional features, but are not needed for this mini-challenge.).\n<\/li>\n<li> Create a short presentation of approximately 5 slides. You can use this mini-challenge as a draft for planning the structure for the multimodal presentation assignment for this microcourse.\n<\/li>\n<li> Your presentation should incorporate the following:\n<ul>\n<li> One slide using a background image\n<\/li>\n<li> One slide including an image on the page\n<\/li>\n<li> One slide that uses &#8220;fragments&#8221; to build up the text\n<\/li>\n<li> One or more nested slides (that is, incorporating the down \/ up navigation option)\n<\/li>\n<\/ul>\n<\/li>\n<li> Experiment with applying different:\n<ul>\n<li> Font styles\n<\/li>\n<li> Slide transitions\n<\/li>\n<li> Colour templates\n<\/li>\n<\/ul>\n<\/li>\n<li> Optional:\n<ul>\n<li> Inserting your animated GIF\n<\/li>\n<li> Embedding a video\n<\/li>\n<li> Embedding an iframe (that is, embedding a live third party website into your online presentation)\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>How did you go? Share your thoughts by posting a comment on WENotes below.<\/p>\n<div><p>You must be logged in to post to WEnotes.<\/p><\/div>\n<p><i>Note: Your comment will be displayed in the <a href=\"\/lida100\/course-feeds\/lida104-feed\" title=\"Learning in a digital age\/LiDA104\/Feed\">course feed<\/a>.<\/i>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Outputs\">Outputs<\/span><\/h2>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"activity\" src=\"https:\/\/course.oeru.org\/lida100\/wp-content\/themes\/oeru_course\/idevices\/Icon_activity.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Learning output actions<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<ol>\n<li> Export your presentation as HTML, download and save a local copy.\n<ul>\n<li> Open this HTML file locally in your browser (If you&#8217;re not sure how to do this, search for &#8220;How to open HTML file &lt;insert browser name&gt;&#8221;.)\n<\/li>\n<\/ul>\n<\/li>\n<li> Optional &#8211; share the outputs of your creativity with your LiDA peers:\n<ul>\n<li> Share the public link to the online version of your file on slides.com by posting on mastodon.oeru.org (include the hashtag #lida104), or\n<\/li>\n<li> If your prefer, publish a short blog post with a link to your presentation (label or tag using the course code: lida104).\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p><!-- \nNewPP limit report\nCPU time usage: 0.076 seconds\nReal time usage: 0.084 seconds\nPreprocessor visited node count: 482\/1000000\nPreprocessor generated node count: 1313\/1000000\nPost\u2010expand include size: 10789\/2097152 bytes\nTemplate argument size: 3875\/2097152 bytes\nHighest expansion depth: 8\/40\nExpensive parser function count: 0\/100\n--><\/p>\n<p><!-- Saved in parser cache with key wikiedu-mw_:pcache:idhash:182364-0!*!0!!*!2!* and timestamp 20180305131626 and revision id 1034213\n -->\n<\/div>\n<div class=\"visualClear\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<ul class=\"pager\">\n<li class=\"previous\">\n            <a href=\"\/lida100\/unit-4\/create-media\/animated-gif\">\u2190 Previous<\/a>\n          <\/li>\n<li class=\"next\">\n            <a href=\"\/lida100\/unit-4\/create-media\/record-and-mix-audio\">Next \u2192<\/a>\n          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/div>\n<footer>\n<br \/>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>In this section we explore web-based slideshows which are coded in HTML. This enables the slideshow to be viewed and presented using a web browser, with the advantage of supporting responsive design for mobile devices and applying styles using CSS (Cascading Style Sheets). Together with JavaScript (JS) it is possible generate dynamic and professional presentations [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1130,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1140","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/comments?post=1140"}],"version-history":[{"count":1,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1140\/revisions"}],"predecessor-version":[{"id":1141,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1140\/revisions\/1141"}],"up":[{"embeddable":true,"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/pages\/1130"}],"wp:attachment":[{"href":"https:\/\/course.oeru.org\/lida100\/wp-json\/wp\/v2\/media?parent=1140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}