Difference between revisions of "Brightspace HTML Templates Resource"

From CAT+FD Wiki
Jump to: navigation, search
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="text-align: center">[[File:Brightspace-HTML-Templates-Resource.png|480px]]</div>
+
<div style="text-align: center">[[File:Brightspace-HTML-Templates-Resource-2.png|640px]]</div>
  
  
==Brightspace HTML Templates Resource==
+
==Brightspace HTML Templates==
 
<br />
 
<br />
Users can access Brightspace using many different devices (e.g., desktop computer, laptop, tablet, mobile phone). HTML Templates will assist instructors in developing content topic pages that will adapt page contents to fit any device thus making the pages more responsive, accessible, and interactive.
+
Users can access Brightspace using many different devices (e.g., desktop computer, laptop, tablet, mobile phone). Brightspace's responsive design automatically adapts to different screen sizes to provide a great user experience on computers, tablets, and smartphones.  
  
Brightspace HTML Templates provides instructors with an easy way to create great looking, responsive, accessible, and interactive content topic pages. HTML Templates page layouts are instructor-friendly and are designed to be edited using the HTML Editor in Brightspace.
+
HTML Templates will assist instructors in developing content topic pages that will adapt page contents to fit any device thus making the pages more responsive, accessible, and interactive.  
  
 +
HTML Templates provide instructors with an easy way to create great looking, responsive, accessible, and interactive content topic pages. HTML Templates page layouts are instructor-friendly and are designed to be edited using the HTML Editor in Brightspace.
 +
 +
===Sample Pages Created with HTML Templates===
  
 
Instructors can take their content topic pages '''from this''':
 
Instructors can take their content topic pages '''from this''':
  
<div style="text-align: left">[[File:Course-Overview-Before.jpg|400px]]<br /><small>This Course Overview page was created using a default HTML Template.</small></div>
+
:<div style="text-align: left">[[File:Course-Overview-Before.jpg|400px]]<br /><small>This Course Overview page was created using a default HTML Template.</small></div>
  
  
 
'''To this:'''
 
'''To this:'''
  
<div style="text-align: left">[[File:Course-Overview-After.jpg|400px]]<br /><small>This Course Overview page was created using the Earth HTML Template by Brian Ledwell</small></div>
+
:<div style="text-align: left">[[File:Course-Overview-After.jpg|400px]]<br /><small>This Course Overview page was created using the [https://brianledwell.com/web/education-resources/d2l-brightspace-templates Earth HTML Template] by Brian Ledwell</small></div>
  
  
Here is a curated list of resources to help you use HTML Templates to create responsive, interactive, and accessible pages in Brightspace.
+
'''Do you want to see more examples of content topic pages built with HTML Templates?''' Here are a few examples:
  
===Level Up with User-Friendly Brightspace HTML Templates Workshop===
+
* [http://cat.xula.edu/food/wp-content/uploads/2020/09/Meet-Your-Instructor-After.jpg Introduction to Physical Geography course - Meet Your Professor]
* Workshop Presentation Slides
+
* [https://catwiki.xula.edu/File:Intro-Physical-Geography-Tech-Help-1674.png Introduction to Physical Geography course - Technology Requirements and Help Resources]
* Workshop Recording (10/15/2020) – XX minutes
+
* [https://catwiki.xula.edu/File:Modern-English-Grammars-Tips-for-Success-1565.jpg Modern English Grammars course - Tips for Success]
 +
* [https://catwiki.xula.edu/File:Intro-Psyc-Weekly-Quiz1-1603.jpg Introduction to Psychology course - Weekly Quiz 1]
  
  
===Why use HTML Templates?===
+
===Curated List of Resources===
 +
We've created this curated list of resources to help you use HTML Templates to create responsive, interactive, accessible, and visually appealing HTML content pages in Brightspace.
 +
 
 +
====Level Up with User-Friendly Brightspace HTML Templates Workshop (10/15/2020)====
 +
* [https://youtu.be/__lhzrd3Sfc HTML Templates: A Primer video (11:28)] participants were asked to watch this video before the workshop
 +
* [https://catwiki.xula.edu/images/7/79/Level-Up-with-User-Friendly-Brightspace-HTML-Templates.pdf Workshop Presentation Slides (pdf)]
 +
* [https://youtu.be/V6wUyliU2e4 Workshop Recording (45:36)]
 +
 
 +
 
 +
====Why use HTML Templates?====
 
* [https://community.brightspace.com/s/article/Level-Up-Design-Engaging-Content-Pages-without-Needing-to-Code-or-Hire-a-Graphic-Designer Design Engaging Content Pages without Needing to Code or Hire a Graphic Designer]
 
* [https://community.brightspace.com/s/article/Level-Up-Design-Engaging-Content-Pages-without-Needing-to-Code-or-Hire-a-Graphic-Designer Design Engaging Content Pages without Needing to Code or Hire a Graphic Designer]
  
  
===HTML Templates===
+
====Free HTML Templates====
* [https://community.brightspace.com/s/article/HTML-Template-Version-3-0 Brightspace HTML Template (Version 3.0)]
+
* [https://community.brightspace.com/s/article/HTML-Template-Version-3-0 Daylight HTML Templates (Version 3.0)]
 
* [https://brianledwell.com/web/education-resources/d2l-brightspace-templates Fire, Water, Earth, and Yellow HTML Templates] by Brian Ledwell
 
* [https://brianledwell.com/web/education-resources/d2l-brightspace-templates Fire, Water, Earth, and Yellow HTML Templates] by Brian Ledwell
 +
* [https://community.brightspace.com/s/article/Customer-Spotlight-Minnesota-State-College-HTML-Templates Minnesota State College HTML Templates]
  
  
===Creating and Editing HTML Templates===
+
====Creating and Editing HTML Templates====
 
* [https://cat.xula.edu/food/brightspace-tip-43-html-editor/ Brightspace HTML Editor]
 
* [https://cat.xula.edu/food/brightspace-tip-43-html-editor/ Brightspace HTML Editor]
* [https://documentation.brightspace.com/EN/le/content/instructor/apply_html_template_to_new_document.htm Apply an HTML template to a new document in Content]
+
* [https://documentation.brightspace.com/EN/le/content/instructor/apply_html_template_to_new_document.htm Apply an HTML Template to a New Document in Content]
 
* [https://youtu.be/FQktB8LOYJc Teaching Tips - Edit HTML Templates – Instructor] (video)
 
* [https://youtu.be/FQktB8LOYJc Teaching Tips - Edit HTML Templates – Instructor] (video)
 +
* [https://www.w3schools.com/TAGS/default.ASP HTML Element Reference (w3schools.com)]
  
  
===Photo and Image Resources===
+
====Free Photo and Image Resources====
 
* [https://cat.xula.edu/food/find-free-images-to-use-in-your-courses/ Find Free Images to Use in Your Courses]
 
* [https://cat.xula.edu/food/find-free-images-to-use-in-your-courses/ Find Free Images to Use in Your Courses]
 +
* [https://elearningindustry.com/list-of-free-photo-and-image-editing-tools Free Photo and Image Editing Tools]
 
* [https://catwiki.xula.edu/Creative_Commons_Resources Creative Commons (CC) Wiki Resource]
 
* [https://catwiki.xula.edu/Creative_Commons_Resources Creative Commons (CC) Wiki Resource]
* [https://elearningindustry.com/list-of-free-photo-and-image-editing-tools Free Photo and Image Editing Tools]
+
* [https://xula.libguides.com/CopyrightandFairUse Copyright and Fair Use]
 +
 
 +
 
 +
====Accessibility Resources====
 +
* [https://blog.commlabindia.com/elearning-design/tools-for-choosing-color-schemes-for-elearning-courses 5 Useful Tools to Choose Color Schemes]
 +
* [https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg Color Picker (Chrome Extension)]
 +
* [https://cat.xula.edu/food/brightspace-tip-156-accessibility-checker/ Brightspace Tip #156: Accessibility Checker]
 +
 
  
  
  
'''NOTE:''' This resource is intended to help Xavier faculty build on the skills learned in the "[[Accessibility and Usability]]" module of the #LearnEverywhereXULA (#LEX) course and take their course design to the next level. You can find the open version of the #[[LearnEverywhereXULA]] course on this wiki. However, Xavier faculty who are NOT enrolled in the Brightspace #LearnEverywhereXULA course and would like to be enrolled should fill out this [https://forms.gle/TtarvhcqkeSPkiCR8 enrollment request form]. Enrollment in the #LEX course is an opportunity to experience Brightspace from a learner's perspective.
+
'''NOTE:''' This resource is intended to help Xavier faculty build on the skills learned in the "[[Accessibility and Usability]]" module of the #LearnEverywhereXULA (#LEX) course and take their course design to the next level. You can find the open version of the Brightspace #[[LearnEverywhereXULA]] course on this wiki. However, Xavier faculty who are NOT enrolled in the Brightspace #LEX course AND would like to be enrolled should fill out this [https://forms.gle/TtarvhcqkeSPkiCR8 enrollment request form]. Enrollment in the #LEX course gives faculty an opportunity to experience Brightspace from a learner's perspective. Additional activities and reflections are available in the Brightspace #LEX course that are not available in the open resource.
 
<br /><br />
 
<br /><br />

Revision as of 21:11, 23 December 2020

Brightspace-HTML-Templates-Resource-2.png


Brightspace HTML Templates


Users can access Brightspace using many different devices (e.g., desktop computer, laptop, tablet, mobile phone). Brightspace's responsive design automatically adapts to different screen sizes to provide a great user experience on computers, tablets, and smartphones.

HTML Templates will assist instructors in developing content topic pages that will adapt page contents to fit any device thus making the pages more responsive, accessible, and interactive.

HTML Templates provide instructors with an easy way to create great looking, responsive, accessible, and interactive content topic pages. HTML Templates page layouts are instructor-friendly and are designed to be edited using the HTML Editor in Brightspace.

Sample Pages Created with HTML Templates

Instructors can take their content topic pages from this:

Course-Overview-Before.jpg
This Course Overview page was created using a default HTML Template.


To this:

Course-Overview-After.jpg
This Course Overview page was created using the Earth HTML Template by Brian Ledwell


Do you want to see more examples of content topic pages built with HTML Templates? Here are a few examples:


Curated List of Resources

We've created this curated list of resources to help you use HTML Templates to create responsive, interactive, accessible, and visually appealing HTML content pages in Brightspace.

Level Up with User-Friendly Brightspace HTML Templates Workshop (10/15/2020)


Why use HTML Templates?


Free HTML Templates


Creating and Editing HTML Templates


Free Photo and Image Resources


Accessibility Resources



NOTE: This resource is intended to help Xavier faculty build on the skills learned in the "Accessibility and Usability" module of the #LearnEverywhereXULA (#LEX) course and take their course design to the next level. You can find the open version of the Brightspace #LearnEverywhereXULA course on this wiki. However, Xavier faculty who are NOT enrolled in the Brightspace #LEX course AND would like to be enrolled should fill out this enrollment request form. Enrollment in the #LEX course gives faculty an opportunity to experience Brightspace from a learner's perspective. Additional activities and reflections are available in the Brightspace #LEX course that are not available in the open resource.