Weeks 11–12: Developing Instructional Activities (Fall 2021 Webster)


The previous weeks of this course have been all about planning for the effective integration of digital technologies into education. Along the way, you have determined a topic for a technology integration activity, identified and evaluated potential digital tools that you could integrate into that learning activity, and considered critical issues to address when developing that activity. In Week 10, you started bringing all of those elements together to develop a plan for your Technology Integration Activity.

Over the next two weeks, you will carry out your carefully made plans. You will turn your blueprint, storyboard, or wireframe into a fully functional web-based technology integration activity. You will have a chance to learn some of the basics of HTML coding, and how to use those skills to customize your web-based learning activity. You will also revisit the concept of digital accessibility and explore strategies to maximize the accessibility of your project. You will have a chance explore more tips for working with video resources, including how to use YouTube as a mechanism for sharing your videos, and embedding them into web-based learning activities. If you are feeling adventurous, some tips are provided on how to use the Canvas open learning management system as a place to develop and host your Technology Integration Activity.

It is recommended that you reconnect frequently with your study partner (the classmate you connected with in the Week 6 Technology Exploration activities) to help each other with your development work.

By the end of Week 12, you will submit your completed Technology Integration Activity projects (Final Project: Technology Integration Activity Development), by sharing your activity through your personal portfolio.


Weeks 11–12 are divided into three topics:

  • Topic 1: Technology Exploration
    • HTML Basics for Educators
    • Accessibility Tips
    • Working with Videos
    • Optional: Using an Open LMS
  • Topic 2: Community Engagement
  • Topic 3: Final Project Submission

Learning Outcomes

When you have completed these weeks’ activities, you should be able to:

  • Describe the main components of a basic HTML web page.
  • Apply basic HTML coding to develop a web page, or to customize a web page created using an online web hosting service.
  • Maximize digital accessibility for a web-based learning activity.
  • Host, share, and embed instructional video resources into a web-based learning activity.


The Basic Gist. (2013, June 6). YouTube settings: unlisted v private v public [Video file]. Retrieved from https://youtu.be/fViYcDDZyhk

CanvasLMS. (2014, June 24). Instructure Canvas tutorials [YouTube playlist]. Retrieved from https://www.youtube.com/playlist?list=PL0C53CD7938F56215

eFront. (2016, February 10). Using videos in your eLearning courses [Video file]. Retrieved from https://youtu.be/AopF8T43Fno

Eves, D. (2014, January 2). How to properly upload videos to YouTube [Video file]. Retrieved from https://youtu.be/Hlxqk0iHp5w

Fullstack Academy. (2017, May 3). Web accessibility guidelines – How to make your code web accessible [Video file]. Retrieved from https://youtu.be/H37zF98Er1M

Gray, J. (2018, March 15). Creating accessible educational resources [Presentation file]. Retrieved from https://docs.google.com/presentation/d/1HXYpG794uSzngqHe4oTrIk2CsbOJ6kHrckwMaC4WE50/edit#slide=id.p

Kovtun, V. (2017, October 30). An introduction to web accessibility [Video file]. Retrieved from https://youtu.be/9I-DCEa1WhM (CC BY 3.0 )

Morehouse, S. (2012, August 13). Creative Commons license chooser demo [Video file]. Retrieved from https://youtu.be/iHDYenuFFtA ( CC BY 3.0 )

Palacios, K. (2015, October 8). Canvas – How to create your free Canvas account [Video file]. Retrieved from https://youtu.be/4Oc60rrsm-M

Palacios, K. (2016, February 23). Canvas – How to start a new course & add accounts as teachers [Video file]. Retrieved from https://youtu.be/7WFNaRJlg14

Pappas, C. (2014, April 10). The ultimate eLearning course design checklist [Web log post]. Retrieved from https://elearningindustry.com/the-ultimate-elearning-course-design-checklist

Power, R. (2018, June 12). Accessibility in online teaching and learning [Web log post]. Retrieved from http://www.powerlearningsolutions.com/blog/accessibility-in-online-teaching-and-learning

Refsnes Data. (2019). HTML5 tutorial . W3 Schools . Retrieved from https://www.w3schools.com/html/default.asp

Wright, J. (2010, November 10). Learn HTML in 12 minutes [Video file]. Retrieved from https://youtu.be/bWPMSSsVdPk

Topic 1: Technology Exploration

HTML Basics for Educators

You have already created a personal portfolio. Perhaps you have already created a personal website. You have likely already chosen a web hosting platform (such as Weebly,Wix, or WordPress) to develop and host your web-based Technology Integration Activity. Perhaps you even already use a personal or class website. Many of these platforms come with a number of pre-built design tools, as well as limitations. Many of them provide easy-to-use drag-and-drop development tools, making it easy to insert and format key elements on your web pages.

Sometimes our web-based learning activities require us to do some custom formatting, or to embed interactive elements that go a bit beyond the basic tools provided by hosting platforms. Perhaps you are adventurous and want to attempt to build your own website from scratch! To do these things, it is helpful to know some basics about HTML (Hypertext Markup Language).

Why Should an Educator Know HTML?

Some people approach this question from the angle that you can be a better motorist if you understand the essential principles behind the internal combustion engine, your brakes, and other systems in your car. This analogy fails because we don’t have the opportunity to create or substantially modify our cars the way we can with our web-based resources. Educators (and learners once they realize it) are able create new or modify existing media to suit specific needs with (relatively) little cost in either time or money.

Today, most educators don’t need to create web pages and sites to sit alone on a web server; they have one system or several to host the content, activities, and assignments they want online—either provided by their host institution or available (often for free) on the web. HTML (and associated tools) can become important when we want to do something that has not been considered by the designers of whatever tool we happen to be using. In WordPress, you will notice that your editing window includes an “HTML” tab for those that want to create their page manually. Similar options exist in learning management systems like Moodle, Blackboard, Desire2Learn, and Canvas, as well as other blogging or content management systems like Drupal or Joomla. If you can’t “program” your tool (i.e. modify the way you use it with HTML) then you are being “programmed” by it. This is of particular concern in education—imagine if you used Facebook as your primary online tool with your students (not a good idea in most instances)—your online teaching would be held hostage to the frequent updates in look and feel and functionality.

What Should an Educator Know About HTML?

An important component of professional competence in modern web design is knowing how to do the things you do often, and knowing how to find out how to do the things you need to do infrequently. Watch Jake Wright’s (2010) Learn HTML in 12 Minutes to learn the fundamentals of how web pages are structured and developed using HTML code.

Source: YouTube, Jake Wright

You do not need to become a HTML coding expert for the purposes of EDDL 5101. But it is helpful to understand the basic structure of how a web page is coded, and to know how to recognize, work with, and modify some fundamental formatting elements, such as:

  • Text tags (format how text looks on a web page)
  • Image tags (format images on a web page)
  • List tags (used to create numbered or bulleted lists on a web page)
  • Link tags (used to insert hyperlinks to other pages on your website, downloadable files, or links to other websites or online resources)
  • Tables (it is useful to know how to insert and format tables on a HTML page—though many web developers now avoid using them in order to maximize digital accessibility, Universal Design for Learning, and the responsiveness of a web page to different screen sizes)

Optional Reading: More About Web Design for E-Learning

If you have time, check out Christopher Pappas’ (2014) “ The Ultimate eLearning Course Design Checklist .” This post on the eLearning Industry site contains a wealth of tips and tricks for getting the most out of the look and feel of your online learning resource site, including links to even more resources on page layout basics, site navigation considerations, and much more.

Activity 1: Take an HTML Tutorial

Want to learn how to build your own web pages or website from scratch? W3 Schools offers an extensive resource site that will walk you through all of the fundamental aspects of HTML coding. Planning to use a web development and web hosting service, such as Weebly, Wix, or WordPress? Or even use a learning management system? The W3 Schools tutorials are still a handy reference guide worth bookmarking to help you customize your Technology Integration Activity site.

Editing HTML in a Web Hosting Service

Many of the development and hosting platforms you are likely to use—including most learning management systems—default to drag-and-drop tools and rich text content editors (similar to working with a word processor application, only in an online content editing block). But most of these tools also allow you to switch from rich text editing to an HTML editor view.

Activity 2: Peer Support

As you develop your web-based Technology Integration Activity resources, collaborate with your study partner (the classmate you connected with in the Week 6 Technology Exploration activities) to help each other with the development work. Provide each other with tips and tricks for tackling the translation of your design plans into actual web-based resources. Help each other to “debug” your sites, and your HTML code.

Accessibility Tips

In Week 8, we discussed digital accessibility regulations, Universal Design for Learning, and the importance of making our digital learning spaces universally to students (or other users). For refresher on these requirements, and tools you can use to help improve the accessibility of your Technology Integration Activity web pages, refer back to Week 8. Power’s (2018) “ Accessibility in Online Teaching and Learning ” provides a good summary of the same topics.

Some key basic tips for increasing accessibility for your web-based learning activity include:

  • Use the text formatting features built in to your web development and hosting service.
  • Maintain a strong colour contrast ratio between your text and page background.
  • Do not use different font sizes, colours, bold, or underlining to signify headings. Use actual heading level tags, which can be accessed through the formatting toolbar. This will allow students to use screen reader or digital switch applications to more effectively navigate your web pages.
  • Include ALT tags for your images. Or, if the images are decorative (do not serve an instructional purpose), use the “This image is decorative” feature offered by many web hosting services. That will tell screen reader applications to ignore your image.
  • Use a linear layout for the content on your page. This will improve readability and increase responsiveness for different screen sizes.
  • Don’t include too much text on a single page. Avoid making students have to scroll to reach the bottom of a single page of content. This will improve readability, especially on smaller screen sizes.
  • Do not include text within images. It is not machine readable, so it does not conform with digital accessibility standards.
  • Do not set images to open in a picture box or “shadow box.” For anyone using a screen reader or digital switch, this takes the “focus” off of the main web page, making it difficult for them to navigate back to your learning activity.
  • Set internal hyperlinks (links within your own site) to open in the same tab.
    Set external hyperlinks (links to other websites) to open in a new tab, so that students can easily navigate back to your learning activity.

Optional Resources: Extend Your Understanding

BCcampus’ Josie Gray (2018) shares some excellent advice on Creating Accessible Educational Resources in her Google Slides presentation.

Vladimir Kovtun (2017) provides a good Introduction to Web Accessibility ( CC BY 3.0 ) for web developers.

Kovtun, V. (2017, October 30). An introduction to web accessibility [YouTube video]. Retrieved from https://youtu.be/9I-DCEa1WhM

Fullstack Academy’s (2017) Web Accessibility Guidelines – How to Make Your Code Web Accessible provides an even more detailed look at why web accessibility matters for developers, and how to improve digital accessibility with HTML coding.

Source: YouTube, Fullstack Academy

Activity 3: Testing Accessibility

As you develop your web-based Technology Integration Activity resources, collaborate with your study partner (the classmate you connected with in the Week 6 Technology Exploration activities) to help each other improve the overall accessibility of your resources. Feel free to include other classmates in your discussions.

You should share access with your partner(s) and provide each other with suggestions on how to handle any potential accessibility issues that you might find. Refer back to Week 8 for a list of resources that you could use to help you with this task.

Working with Videos

In Week 5, we looked at the use of video as a tool to broadcast instructional content to students. It may be worth your time to review eFront’s (2016) Using Videos in Your eLearning Courses for a list of tips on using video resources in blended or online learning contexts.

Source: Youtube, eFront

Tricks of the Trade: Using YouTube to Share Videos

YouTube is a powerful educational technology tool, because it is an easy way to share video content with your students (why bother worrying about how to process and stream video content, when YouTube already has powerful servers that will do it for you!). And that doesn’t mean that you have to direct them to YouTube to view it. You can embed your YouTube videos directly into a website, or a learning management system (LMS) content page.

To that end, here are a few resources that might be helpful. This first video shows the basics of how to upload and share videos in YouTube. As noted in the video, you do need to log in. All you need for that is a Gmail/Google account!

Watch Derral Eves’ (2014) How to Properly Upload Videos to YouTube.

Eves, D. (2014, January 2). How to properly upload videos to YouTube [Video file]. Retrieved from https://youtu.be/Hlxqk0iHp5w

YouTube Privacy Settings

This next video goes over some of the basics of choosing a privacy setting for your video. It’s important to choose the right setting. If you want your video to be available publicly, then choose “Public.” If you want to share your video with your students, and embed it into a webpage or LMS page, choose “Unlisted.” “Unlisted” means the video can’t be found using a search engine, but anyone with the link can still view it without a password. If you don’t want anyone to view it without you directly allowing “just that person” to see it, choose “Private.” Even with a direct URL, no one will be able to watch the video unless you authorize their email address.

Watch The Basic Gist’s (2013) YouTube Settings: Unlisted v Private v Public .

The Basic Gist. (2013, June 6). YouTube Settings: Unlisted v private v public [Video file]. Retrieved from https://youtu.be/fViYcDDZyhk

YouTube and Copyright

One of the great things about embedding a YouTube video into a web page or course page in an LMS is that you won’t be violating the video owner’s copyright (assuming the person who posted the video isn’t violating a copyright within the video itself). That’s because you’re not actually making a copy of the video. You’re essentially just sharing a link to it, and if the owner decides they don’t want anyone to use it anymore, they can remove the video, or change the privacy setting. When they do that, your embedded player simply won’t show it any more. A note of caution, though—you should strive to avoid embedding a video that is obviously already violating copyright regulations. It is not modelling responsible behaviour as an educator, and it is likely that the embedded video will quickly disappear once the copyright violation has been detected!

YouTube has a few different “licencing” options when you post your own videos. The default is “Standard YouTube Licence,” which is essentially a copyright licence. I prefer to change that setting to a Creative Commons (CC) attribution. Using a CC attribution means that you are letting others reuse your video as an open access resource, so long as they properly attribute you. It also means that you are allowing others to make a copy, edit, remix, or combine parts of your video with other Creative Commons videos from YouTube.

Watch Morehouse’s (2012) Creative Commons License Chooser Demo ( CC BY 3.0 ).

Morehouse, S. (2012, August 13). Creative Commons license chooser demo [Video file]. Retrieved from https://youtu.be/iHDYenuFFtA

Optional: Using an Open LMS

Want to try your hand at creating your Technology Integration Activity inside of a learning management system? Canvas offers both free course creation and hosting for individual teachers using its cloud-based LMS. The following resources will help you to get up and running with using Canvas to create your learning activity—but remember, you will need to carefully choose your course settings, “publish” your “course” when it’s ready, and provide your instructor and classmates with the link to “self-enroll” in your “course” site!

Note there are other open LMSs available, including Moodle, Schoology, Edmodo, and more. You are encouraged to research these and figure out which one best suits your context.

Getting Started with Canvas as a Teacher

Watch Palacios’ (2015) Canvas – How to Create Your Free Canvas Account.

Source: YouTube,Katie Palacios

Watch Palacios’ (2016) Canvas – How to Start a New Course & Add Accounts as Teachers.

Source: YouTube,Katie Palacios

Need help figuring out how to do something in Canvas? Refer to the many online tutorials available through CanvasLMS’s (2014) Instructure Canvas Tutorials YouTube playlist.

Topic 2: Community Engagement

Activity 4: Discussion Questions

Your instructor will post questions in the course discussion forum related to these weeks’ topics. Respond to these questions, and check out (and reply to) some of the responses posted by your classmates. Feel free to use the course forum to post any thoughts or questions you may have related to these weeks’ readings and activities.

Activity 5: Peer Support

As you develop your web-based Technology Integration Activity resources, collaborate with your study partner (the classmate you connected with in the Week 6 Technology Exploration activities). Use a personal video conferencing application of your choice (i.e. Skype, Google Hangouts, FaceTime, etc.) to connect, share, and discuss your Technology Integration Activity Development assignments. Help each other to tweak your plans and troubleshoot your work as you complete the development of your Technology Integration Activity projects.

Activity 6: Sharing Tips, Tricks, and Resources

You are likely to discover new tips, tricks, and resources that are helpful in the development of your Technology Integration Activity project. Perhaps you have questions about how to accomplish something in your design plans. Use the course discussion forum to share these resources, and to pose your questions. Draw upon the PLN that you have developed within this course to help each other get to the finish line with your projects!

Activity 7: Sharing Your Technology Integration Activity

Create a post to share your completed Technology Integration Activity. Your portfolio post only needs to be a paragraph or two. Be sure to describe what you are sharing, and any information your classmates may need to access and try out your activity. Be sure to check out and comment on the Technology Integration Activities posted by some of your classmates. Feel free to include some feedback on what you liked about their activities, what worked, and any suggestions you may have for making their activities even better!

Topic 3: Final Project Submission

By the end of Week 12, you will submit your completed Final Project: Technology Integration Activity Development assignment. This will be counted as submitted once your finalized web-based learning activity has been posted and shared using your personal course portfolio. Remember, your instructor and classmates must be able to find and access your web-based Technology Integration Activity in order for it to be considered completed and submitted.

Refer to the Final Project: Technology Integration Activity Development assignment guide for further details about specific assignment completion requirements.

Due Date: End of Week 12.

Weeks 11/12 Summary

In these weeks, you put your carefully crafted plans into action, and developed a fully functional web-based learning activity. You had a chance to explore some of the basics of HTML coding, and the use of HTML to create and customize web-based learning activities. You employed strategies to maximize digital accessibility for students who engage with your web-based learning activity. And you explored how to use video streaming services such as YouTube to host, share, and embed your own instructional video resources in your web-based learning activities. You concluded these weeks by sharing your completed Technology Integration Activity (Final Project) via your personal portfolio. In Week 13, you will explore the learning activities created by some of your classmates. We will also have a chance to explore some emerging and future trends in the use of digital technologies in education.


Instructure. (n.d.) Canvas . Retrieved from https://canvas.instructure.com/

Copy link
Powered by Social Snap