LDT300X – Instructional Design: Digital Media, New Tools and Technology

This course focused on learning different forms of technology and how to use them effectively in an educational setting. We explored a variety of tools from photo editing software to e-learning author tools. The course started with us creating a digital media checklist that we could use to evaluate the usefulness of various forms of media from an educational perspective. We then completed different projects to showcase our skills with different software. The projects that I worked on in this course can be seen below:

Digital Media Checklist

Game Club Flyer

Signature Assignment

For our signature assignment, we had to create and compile a set of digital media that helps overcome a learning gap. The learning gap I chose to focus on is how to develop a website. Thus, all the media I created or found could be used as part of an introductory web development course. We also had to apply our Digital Media Checklist to each media item. Please note that all of the media in my Signature Assignment is licensed under the Creative Commons Attribution 4.0 International License.

The first piece of media I created is an infographic that shows a timeline of when the most common web languages were developed. I created this infographic using Visme. I think this infographic could be used as a poster that is hung in a classroom. It is probably not something students would actually be tested on, but it does provide a nice overview of the languages. You can find my filled out Digital Media Checklist for my infographic here.

Speak Visually. Create an infographic with Visme

Next, I created a series of videos to teach people about WordPress. The first video explains the difference between posts and pages and the second video goes over how to install WordPress. I think these videos could work well in an online course in order to teach content in lieu of a standard lecture. However, they could be used in a traditional course as well. The teacher could show them to students as part of a lesson or post them on their website for students to reference if they need a refresher. I created the first video in Microsoft PowerPoint using the built-in feature for recording narrations and edited it using Adobe Premiere. For the second video, I did the screen capture using iSpring Free Cam, the narration using Windows Voice Recorder, and the editing with Adobe Premiere and Adobe After Effects. I wrote closed captions for both videos in order to make them more accessible. You can find my filled out Digital Media Checklist for these videos here.

My signature assignment includes enhanced digital images as well. For my first digital image, I wanted to do something that explained the items in the WordPress sidebar. I wanted to make this interactive in some way and in exploring how to do that I came across Genially. Genially lets you create many types of content including presentations, infographics, and interactive images. It is extremely easy to use and let me do exactly what I wanted. I took a screenshot from my personal website and used Genially to make the sidebar in the image interactive. If you hover over one of the items in the sidebar (or tap on it on mobile), a tooltip will display with information about it. This could pair well with my interactive lesson below to teach students the WordPress user interface. You can find my filled out Digital Media Checklist for this image here.

My second image was also made using Genially. I took a screenshot of the basic structure of an HTML document and made it so that clicking on each line will take you to the W3Schools reference for the tag used in that line. I think this would mainly be an informational resource for students just getting started with HTML. They probably would not need it for long, but at the beginning it could be a useful reference just to help them easily find info about basic HTML tags. You can find my filled out Digital Media Checklist for this image here.

I also created an interactive lesson using an e-learning author tool called Articulate Rise. The lesson goes over the user interface for the new Gutenberg editor that was introduced with WordPress 5.0. I took advantage of the labeled graphic feature to make the lesson more interactive and immersive. I think this lesson could stand on its own and help students who are just getting familiar with WordPress learn about the user interface. It could also be part of a larger set of lessons geared towards teaching students how to create their first website with WordPress. You can see the lesson I created here. You can find my filled out Digital Media Checklist for the lesson here.

Finally, I had to find two Open Educational Resources (OER) that are related to my learning gap. The first place I looked is Ted-Ed since I absolutely love their videos. I think they are engaging and I really like their use of animation. Sure enough, they had a video related to web development entitled What is the World Wide Web. I think this video could be a great way to start a course on web development since it provides a nice overview of what he World Wide Web is and how it works. You can find my filled out Digital Media Checklist for this video here.

I also found a textbook from Open SUNY Textbooks. It is called The Missing Link: An Introduction to Web Development and Programming. This textbook could be used to supplement lessons and assignments in order to give students a more theoretical perspective. Textbooks are a standard element of most courses and since I did not have anything that resembled a textbook as part of my other resources, I felt like it was good to include one. You can find my filled out Digital Media Checklist for this textbook here.