Multimedia in the Classroom
On Demand Workshop

In this workshop you will learn how to:

1. Set up a webhosting site with a domain name
2. Create screenshots
3. Export documents as PDFs
4. Create screencasts
5. Create a YouTube account
6. Create a simple HTML webpage - to hold all the multimedia that you will create for quick and easy deliver.

Choosing & Setting Up a Domain Name & Space

At the end of this workshop you will have a webpage containing all of your content that you create. This webpage can be displayed from an instructor’s station from a Flash Drive that you bring with you to class, but if you want your students to be able to access the page on their own computers you will have to publish the webpage on a webhosting site like GoDaddy.  This entails purchasing webhosting and a domain name.  You will want to brainstorm a bit to come up with about 5 names that you would like, as some of them may already be taken.  If you can get YourName.com(johnsmith.com) that would be a no brainer and a lucky break for you that no one else got it already.  You can casually check to see if the name is already taken by typing it in a browser’s url address bar, but this is only to see if there is an active site associated with that name.  Even if a site does not come up, it still may be taken. A safe way to see whether or not it is taken is to go to the official government 'who is' site and see there: http://www.internic.net/whois.html. Only do this when you are near being ready to purchase.

When you are ready to purchase, you will want a Linux Server (not a Microsoft Server), with cPanel. GoDaddy has various sales that you can take advantage of, like webhosting with free domain name for $1 a month for a set number of months, then goes up to $7 a month.  It takes about a day or two to set up the account.  Don’t let them cross sell you anything more, as this will be all you need for a while.

Screenshots

Screenshots are pictures taken of your computer screen that you can crop and resize and use in presentations and place in documents and webpages.  They are very useful in preparing how-to manuals and giving visual reference to items that you are discussing in the text.

On a PC a Screenshot is captured by pressing the Prt Sc (Print Screen) button on the upper right side of a typical keyboard.  To capture just the active window, and not the whole screen, press Alt + Prt Sc. The Screenshot gets saved into the clipboard memory at which point you can then paste it directly into a document like Microsoft Word, or into an image editor like Adobe Photoshop.

On a Mac a Screenshot is captured by pressing Command + Shift + 3.  To capture a specific window on a Mac, press Command + Shift + 4 and then click on the window that you want to capture.  Unlike a windows machine, the Mac Screenshot gets saved as a .png file on the desktop.  There are other options for Screenshots on a Mac that can be referenced here: https://support.apple.com/en-us/HT201361

Creating a PDF

You can upload and distribute documents you create in Word, PowerPoint or a publication program such as InDeisgn. However, uploading a document in its native file format requires that those who access these files have those same programs loaded on their computers so that they can open and view them.  Another downside of distributing documents in their own file formats is that people will be able to change or modify the documents, which is something you may not want them to do.  You would not want to distribute a Word version of a syllabus that can be modified by the students.

This is where the Portable Document Format (PDF) comes into play.  Everyone has access to Acrobat Reader which is a free program that opens and displays PDF documents.  So in the case of the Word syllabus, you would save a copy as a PDF by going: File > Save As > and choosing .PDF as the file format.  You can then distribute this 'baked' version of your document that anyone can view but not edit.  If you have Acrobat Pro, you can also implement many more options including access passwords and comments, and much more, but for the most part a simple pdf save as, or export, will do.

Video on how to save a PowerPoint as PDF:
https://youtu.be/1qRoSKmqYT4

Creating a Screencast

Screencasting is the process of recording your computer screen and should include recording your voice.  This process is generally used to produce tutorials to demonstrate how to use a given software, but screencasting can be a recording of anything that you want from surfing the web, to playing a video game.  There are two main parts to doing a screencast:

1. The actual recording - Requires a Screen Recorder.
2. The editing of the video - Requires a Video Editor.

https://www.techsmith.com/camtasia.html - A highly recommended Screen Recorder is Camtasia, by TechSmith.  It is both a Screen Recorder and a Digital Video Editor, so you have all you need in one solution.  They also provide a lot of great how-to-videos for their software https://www.techsmith.com/tutorial-camtasia-8.html.  It costs about $300/PC and $100/Mac but has educational pricing of $180/PC and $75/Mac.  They also have a free trial option as well.

https://obsproject.com/ - A free Screen Recorder option is Open Broadcaster Software. Open Broadcaster Software (OBS) is free, open source, software that has very good reviews for video capture, I have not personally used it, but thought that I would include it for those who cannot afford the Camtasia software.  OBS does not currently come with video editing capabilities, just screen recording, so you would still need to get a video editor.

Note: OBS used to be hosted on Sourceforge which used to be a reputable site for open source software projects, but Sourceforge started bundling malware with the downloads, so the creator of OBS has moved the project to github. http://www.reddit.com/r/Bitcoin/comments/1y24x2/malware_do_not_download_cryptocointrader_from/

Adobe’s Premier Pro is a very powerful and professional video editor (but not a screen recorder).  Premier is part of the Creative Cloud monthly subscription.  There are educational discounts, but you must commit to a year of subscription service fees.

Here are some more video editors reviewed by Andy at Channel Empire on YouTube: https://youtu.be/nKRRdOR5vDQ

You will need a good microphone to use with your Screencasting. There are a lot of them out there.  You will probably want to look for a good USB microphone.  Here are some microphone reviews to help you in your considerations:

1. https://youtu.be/tPVZPEcGFPE
2. http://blogs.techsmith.com/tips-how-tos/microphone-round-up/
3. https://www.techsmith.com/tutorial-techsmith-relay-4-tested-cameras.html
4. http://www.melaclaro.com/2013/04/18/the-never-ending-quest-for-quality-audio-what-microphones-do-you-recommend/
5. http://www.plantronics.com/us/product/blacktop-500

Setting Up a YouTube Account

YouTube is a free video sharing website owned by Google. Having a channel on YouTube allows you to upload and arrange videos for anyone to access, on demand, via the web. It also acts as a storage location for videos that you want to embed on your website, or simply link to from your website.  In this way you do not have to worry about storage or bandwidth issues.  You can even link to, or embed videos from, other peoples’ YouTube accounts.

The best way to create a YouTube account is to first create a unique Gmail email account with a name that will be used for this particular YouTube account https://mail.google.com/. For instance, if your name is John and you do tutorials, you could do [email protected], or some other name like [email protected] that represents your video channel (and that has not already been taken by someone else).

Once you have your Gmail account created, you can then create your YouTube account using that email account.  Most of your information should transfer over from your Gmail account streamlining the process.

Video on creating a new channel:
 https://support.google.com/youtube/answer/1646861?hl=en

Once your YouTube account is created, you can upload your screencast videos by clicking on the upload button on the upper right side of the YouTube website (when logged in).  While it is uploading you can begin to populate the data fields for the video:

• Give it a Name
• Provide a Description
• Supply Tags (words that people would use to search for this type of video)
• Set its Category, such as Educational, etc...
• List it as Public for all the world to see
• Choose a place holder image that people see before they click on the video.

More Resources on uploading videos to YouTube:
https://youtu.be/Hlxqk0iHp5w

Creating a Webpage

Webpages are written in a markup language called, Hyper Text Markup Language (HTML).  Browsers, like Firefox and Chrome, read this markup language and interpret it to make the pages that we view.  There is a lot that you can do with just a little bit of knowledge of the basics of HTML.  You can easily create a page with titles, text, links, images, lists, embedded YouTube videos, and much more.

Understanding the Basics of HTML

HTML is made up of what are called tags or elements.  There are two basic kinds:

• those with an opening and closing:
  <p>anything in between the opening and closing paragraph tags is consider a paragraph element</p>
• and those that are self-contained like this image tag.
  <img src="images/imageName.jpg" />

A real text editor must be used when writing html pages. Word processors like Microsoft Word will not work as they include hidden codes in the document that will corrupt it as an html page.  There must be pure text when writing html pages.  There are many options for text editors.  The following are some of the better ones:

• Notepad++ https://notepad-plus-plus.org/
• Brackets http://brackets.io/
• Dreamweaver’s code view
• Notepad - comes with windows operating systems

The best place to learn how to do html is from the organization that defines the HMTL standards that we all use, The World Wide Web Consortium (W3C) http://www.w3.org/. This organization has excellent online tutorials for learning many of the web languages including html that can be accessed here: http://www.w3schools.com/html/default.asp.

Here is a basic html page that you can use as a template for a starting point.

This must be edited inside of a text editor and saved as an html file named index.html. It can then be viewed in a browser like Firefox or Chrome to see how it displays.

Embedding YouTube Videos

YouTube has made it very easy to embed a video into your html webpage.  The steps include: https://support.google.com/youtube/answer/171780

1. Navigating to the video on YouTube that you want to embed (such as your screencast),
2. Locating and pressing the "Share" button,
3. Choosing the "Embed" option,
4. Then you can choose the "SHOW MORE" option where you can set certain parameters like:
   1. Video size
   2. Whether or not the video shows other videos when it completes
   3. Player controls
   4. Player title and actions
   5. Privacy-enhanced mode
5. As you make these choices, the code that you will copy is being modified just under the Embed button. When you have finished with your settings, you then copy all the code in the box, under the Embed button, and then paste it into your index.html file in your text editor.  Below is an example of the code that I gave you earlier with the YouTube embed code copied from this illustrator tutorial video (it is ­­­­colored green).  It is actually an iframe, an entirely separate window with its own webpage that is embedded in your page.

Creating Links and Thumbnails for Document Downloads

To link to a document, such as a PDF file, from your webpage, you would first place the PDF file in the same folder as your webpage and then make a link to it in your html file, like so:

<a href="name_of_your_file.pdf" target="_blank">Click here to download the handout</a>

The additional attribute of target="_blank" makes the link open in a new window so that the browser does not leave your webpage.

However, a more interesting way of making a link for the download document, would be to have a graphic thumbnail as the hot button instead of the "Click here..." text.  You would first need to create the thumbnail image by opening the document and then taking a screenshot of the page, and then cropping it and sizing it down to thumbnail size using an image editor like Adobe Photoshop, and saving it as a jpg file. It is best practice to save all your images into a sub folder called images. So a link to the document, with a thumbnail as the link instead of text as the link, would look like this:

<a href="name_of_your_file.pdf" target="_blank"><img src="images/docThumb.jpg"></a>

Uploading Your Site to Your Webhost

In the figure to the right, you can see the example webpage in a browser window with all the elements that we have added
to it. Granted, this is a very basic page, but it shows how you can bring in elements to enrich the instructional experience.  You have text information, links to external resource pages, images, videos, and documents with aesthetically pleasing thumbnails as the link icons.  If you take advantage of the tutorials that are provide at w3schools http://www.w3schools.com/html/, you will be able to further learn how to style and arrange the page to be however you want it to be.  You will also learn how to make multiple pages that link back and forth between each other using navigation bars.

Now that your page is created, it is time to upload all these files to your webhosting site. To start off, you can use the cPanel tools on the webhost provider’s website to do this, but in the future you may want to download and install FileZilla, a File Transfer Protocol (FTP) program used to transfer files to and from a remote server https://filezilla-project.org/download.php?show_all=1.  For now, you need to sign into your webhost account and locate the file transferring tools so that you can upload your files.  You also need to make sure that you maintain the file structure.  Your index.html file and all your documents (PDFs etc...) need to be in the main folder, and all your images need to be in a subfolder called images.  Once uploaded, you should be able to access your website using your domain name.

End of Workshop Quiz