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.

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 Slides.com web-service. This web-service generates the underlying HTML for the open source Reveal.js framework for web-based slideshow presentations.

Note: If you choose to complete the formal assignment for this micro-course, you may choose which slideshow software to use; it is not a requirement to use Slides.com. We suggest that you complete the research on various software options in the Recording your presentation mini challenge before finalising your choice of presentation software for the assignment.

Mini challenge summary

Summary:	Prepare a short web-based slideshow based on the Reveal.js framework.
	1 – 1.5 hours

Start here

Stimulus resources

• Reveal.js slideshow demonstration (summarises capabilities of the Reveal.js html slide framework).
• Slides.com features

Examples

• Animating the virtual DOM
• SVG Animations

Tips for designing good slideshow presentations

• 10 tips on how to make slides that communicate your idea, from TED’s in-house expert
• 5 Slide deck design tips

Purpose

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.

Tasks

1. Signup for a free account on Slides.com to trial the web service. (Note: Using the free account option, your presentations will be public and storage is limited to 250MB. Paid subscriptions provide additional features, but are not needed for this mini-challenge.).
2. 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.
3. Your presentation should incorporate the following:
   • One slide using a background image
   • One slide including an image on the page
   • One slide that uses “fragments” to build up the text
   • One or more nested slides (that is, incorporating the down / up navigation option)
4. Experiment with applying different:
   • Font styles
   • Slide transitions
   • Colour templates
5. Optional:
   • Inserting your animated GIF
   • Embedding a video
   • Embedding an iframe (that is, embedding a live third party website into your online presentation)

How did you go? Share your thoughts by posting a comment on WENotes below.

Note: Your comment will be displayed in the course feed.

Outputs

Learning output actions

1. Export your presentation as HTML, download and save a local copy.
   • Open this HTML file locally in your browser (If you’re not sure how to do this, search for “How to open HTML file <insert browser name>”.)
2. Optional – share the outputs of your creativity with your LiDA peers:
   • 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
   • If your prefer, publish a short blog post with a link to your presentation (label or tag using the course code: LiDA104).