Preparing web content
Preparing Web Content
1. Managing files in D2L
2. Text Formatting with the HTML Editor
3. Preparing Powerpoint
4. Preparing text with embedded graphics
5. Preparing Graphics
6. Inserting Media via HTML Editor
7. Video Formats
8. Screen capture
9. Screen motion capture
11. Creating Accessible Content for the Web (Slideshow)
- You can add text, pictures, sound clips and more to pages in a section in D2L: If you've seen it on the web, you can add it to a page in a D2L course section.
- You can add files directly to the page you are editing with the "Add File" link at the top of the page, or you can upload your files to the File Manager first, then place them where you need them in your course section.
- You can also add content using the Course Builder tool, which is the preferred way to add content to your course.
- To review Course Builder, see: Understanding Course Builder (link to article, Univ of Colorado at Boulder).
Preparing content for the web
It is essential to prepare content for the web in the appropriate format so students see the material quickly and without having to download anything or open an application. This means, for example, that you should convert .doc, .docx or .ppt files to a format designed for the web.
In the next sections there are suggestions for preparing text, slide shows, graphics, and video., in the best formats for use for D2L. There is also a section on working with screen captures.
- All text should appear to your students directly within D2L as users move through course content.
- Convert text formatted in a wordprocessing application to HTML: see below for how to do this.
- Keep in mind accessibility guidelines.
- Use Word doc/docx only when you need to maintain strict formatting (i.e. a complex syllabus).
How to convert a Word doc to a web page
The easiest way to convert a Word document to an HTML document (i.e. a web page) is to copy the document in Word and paste in into the HTML Editor in D2L using the "Paste Word Text" command.
If you have already composed your content as text (without HTML codes) in another application (such as a word processor) you can copy and paste unformatted content into the HTML Editor.
- Alternatively, use the Paste as Plain Text icon to paste formatted content as plain text.
- To copy and paste content directly from Microsoft Word, use the Paste from Word icon.
Important It is strongly recommended that you remove any formatting before copying and pasting text into the HTML Editor, especially numbered or bullet lists, tabs, headers and footers, page numbers, and text with similar formatting. Copying formatted text from word processing applications and pasting it into the HTML Editor might add disruptive code to the application.
For step-by-step instructions, download How to Convert a Word doc to a Web page (pdf).
1. Using D2L HTML Editor
The HTML Editor Tool For Instructors (link, University of Arizona site).
This is an overview. Use the HTML Editor to easily and quickly create and format content without prior knowledge of HTML. Simply enter your content and use the available controls in either the Basic tab or Advancedtab tool bar to apply formatting to your text, insert images and tables, and create links.
Step-By-Step Guide to Using the HTML Editor in D2L (pdf, courtesy, SPSU) This PDF document explains in depth how to use the HTML Editor to inset and modify text, tables , multimedia, etc. It included numerous screenshots and a tour of the HTML Editor design space (i.e. what the icons do).
Tip Use the Toggle fullscreen mode icon in the bottom left corner of the HTML Editor to maximize or minimize the default view. You can also click and drag the bottom right corner of the HTML Editor to resize the HTML Editor.
2. Use a "WYSIWYG" html editor
If you have a lot of text and pages to prepare, you may want to use a "WYSIWYG" (what you see is what you get) web page editor like Dreamweaver or Seamonkey Composer to prepare pages for Vista.The advantage of using this kind of HTML editor is that you do not need to be online to use the ediitor (to use D2L's built in HTML editior, you have to be logged in to D2L).
- Dreamweaver is comprehensive but it takes a while to learn. There is a 30-day trial version, but you must buy it after 30-days.
- Seamonkey is free and easy to use. You can download the Seamonkey "suite." which consists of a web browser, and an HTML editor called Composer. You can compose web pages in a "what-you-see-is-what-you-get" environment You save the page you have created in Composer, then upload it to Vista as usual via Vista's File Manger.
- Using Seamonkey Composer.
- Seamonkey Composer Tutorial.
- Powerpoint presentations can be uploaded to D2L, but this requires the user to download them and open PowerPoint to view them, or to download and use a PowerPoint viewer to view them directly in the browser.
- Powerpoint slides can be large and slow to display.
- If you convert ppt files to Flash files they will be smaller, and thus display more quickly, without the user needing to open Powerpoint to see them.
- Narrated PowerPoint slideshows need captions to be accessible.
- See Powerpoint accessibility instructions.
Creating Accessible PowerPoint Presentations.
Creating Accessible PowerPoint Presetations with Microsoft PowerPoing 2007/2010.
Here are 3 ways to convert ppt files so that they play directly in the user's web browser, without requiring Powerpoint.
1. Use Impatica or iSpring.
Use a product such as Impatica or iSpring to convert .ppt to Flash movies. iSpring is free. It adds a button to PowerPoint, converting a ppt file to a Flash file. The slideshow plays right in Vista's browser window, and your users don't need PowerPoint and don't download files to see them.
- Download iSpring
- See this iSpring Tutorial: "How to convert Powerpoint to Flash with iSpring" at GeorgiaSouthern.
2. Use Keynote on a Mac.
Keynote is Aplples slide presentation application. You can use it as you would use PowerPoint. You can save Keynote slide presentations as flash files, which play in the user's browser window. Users do not need to have the application to view the slides.
If you have Powerpoint presentaions, you can open them and convert them to Flash files with Keynote.You can open the ppt file in Keynote and save it a a swf file (i.e. Flash).
Download a 30-day trial version from Apple.
3. Save for the web in Powerpoint 2010
Microsoft PowerPoint 2010 enables you to save your presentation to Web sites such as Windows Live for others to access.
- Open the presentation that you want to publish (publish: To save a copy of a file in Hypertext Markup Language (HTML) format to a Web server.) to the Web.
- Click the File tab, and then click Save & Send.
- Under Save & Send, click Save to Web.
If you want people to have access to a presentation that you published to the Web, you must specify a Web server (Web server: A computer that hosts Web pages and responds to requests from browsers. Also known as an HTTP server, a Web server stores files whose URLs begin with http://.) or other available computer when you choose a location for the file. Some Web sites, such as Windows Live, may require you to sign in to connect to the server on which your presentation is to be saved.
- Click Save As.
- In the File name box, type a file name, or do nothing to accept the suggested file name.
1. Save the document as a web page.
The best choice when you have a Word doc that includes embedded graphics (a graph, or any image) is to convert the Word doc to a web page, then upload and insert the graphic into the Web page.
Preparing text that you formatted as a Word doc with embedded graphics can be confusing. because you have to upload the text first, convert it to HTML, and then save the embedded image to your computer then upload the image and paste it into the HTML page.
For step-by-step instructions, download How to Convert a Word doc to a Web page (pdf).
The instructions below assume that you want to use a Word doc with an embedded graphic and convert it to a web page in D2L.
- First, get the D2L course ready for the new HTML page.
1. Open a browser windo (tab) and log in to D2L.
2. Go to the course and module in which you want the converted web page to appear.
3. Click "Manage Content".
4. To create the new page, click "New Topic" and "Create New File."
5. The HTML Editor appears.
6. Leave this browser window open.
- Next, prepare the Wokdoc.
7. Open the document you want to convert in Word.
8. Right-click the embedded image and save it to your computer (making anote of where you save it).
9. Select (ctrl/C or command/C) the text you want to convert to HTML (a Web page).
10. Put your cursor in the HTML window in the D2L course module you left open in step 6.
11. Click the Paste from Word icon.
12. A special window opens.
13. In the special window, click control/V or command V on a Mac to paste the text.
14. Click "Save".
- Finally, insert the graphic.
15. Still in the HTML Editor in D2L (from step 14) place the cursor where you want to paste the image.
16. From the HTML Editor toolbar, click the "Instert an Image" icon.
17. Click the Browse button and navigate to where you saved the image on your computer.
18. Click "Save."
19. Use the formatting tools to place the graphic where you want it to go on the web page.
- Use alt tags for images. See explanation of alt tags.
2. Save the document as a PDF (portable document format).
If you want to post a document that includes text as well as numerous graphics, and it is important to maintain the document layout, convert text-that-includes-graphics to pdf files.
While this is easy to accomplish, be aware of the downside:
- Be careful to make the PDF document accessible (see accessibility for pdf how-to).
- Users must download the pdf to see it, or have a suitable pdf viewer on the computer they are using to see the PDF.
- To edit a pdf document, you mst have the full version of Acrobal (not Acrobat Reader) or you must keep the original file as a Word doc, make changes there, and resave the .doc as a PDF.
3. Save a Word .doc as PDF in Office 2010
Use the MS Word's "Save as" command; To convert a Word doc or docx to pdf in Word 2007 or 2010, click "Save As" and choose "pdf" in the 'Save as Type" dropdown menu of the Save as popup box.
You can also install an add-in to versions of Word other than Word 2007 or 2010. This allows you to save a Word doc directly from within Word as a pdf. (You don't need to do this if you are using Word 2007 or 2001, see above).
To download and install the Save as pdf add-in for pre-2007 versions, follow these instructions.
4. Use Adobe Acrobat
Save photos or continuous-tone pictures as .jpeg or .png files. Download Irfanview, a free image converter. Save line art (diagrams, drawings, etc) as .gif or .png files. Irfanview does this too.
How to Insert Media Using the D2L HTML Editor (link to University of Colarado at Boulder site)
You can insert media files into the D2L HTML Editor using the Insert Stuff button. The Insert Stuff text area can be accessed through the following areas: message area in Dropbox and Discussion and content area in Content and Journal.
The link to the "How to Insert Media..."site gives instructions about how to:
- Upload media files from your computer
- Create and inssert a webcam recording
- Insert a Youtube recording
- Enter a URL to where the media file resides
- Insert a media file using the "Embed" code
- You will need to prepare your video in a format that will play in a web browser. In D2L, your files should be one of the following types: MPEG, .mov, or .avi files. Services are available in IT for filming and producing digital video, and for converting it to an appropriate format.
- Basically, you upload video files as you would upload any file, using D2L's File manager or the Insert Stuff command explained above in the D2L HTML Editor.
- You then place the video file on the page in your course section in which you want your video to play. As usual, a link to the file (the movie) appears on the page.
- To view the video, users simply click the link. Watch the "Uploading Video" movie above to see how it is done. Note how the movie opens in a separate browser window, enabling the user to see the video controls
For help with video production and editing, contact IT staff or S Grist.. If you want to learn by yourself, there are free DV creation applications on Windows and mac computers:
On a Mac, see iMovie.
On a Windows computer, see Moviemaker.
- You can capture a window, a menu or part of what is displaying on the screen with screenshot utilities built in to Windows 7.
- You can also take screenshots with earlier Windows versions. See How to take a Screenshot on a Windows PC
- Macs have a capable and built-in screenshot utility called Grab.
- You can also use the "Take a screenshot" command in "Preview" on the Mac.
- Use Preview on the Mac (it is part of the software that comes witn all Macs) to edit and add text to screenshots.
Download and use Jing to capture screen and screen motion which can be saved as movie files (5 mins limit).
Tutorial. showing how to use Jing.
Using Jing to Create Screen Shots and Short Videos
Recording Audio in D2L (link to step-by-step article at Univ. of Colorado at Boulder)
Desire2Learn allows for users to record audio in a variety of locations. Course Instructors, for example, can record audio to be used for an assignment, quiz, news item, discussion among others. Students will be more limited in where they can record audio, generally within a discussion topic or when submitting an assignment.