Ecosystem Styles List of Styles PRE formatted text (such as code for HTML or JavaScript)

Transcription

1 Ecosystem Styles This document is meant to help you decide whether or not the current semantic styles we have defined will be sufficient for your courses, and outlines some best practices for editing in the new system. List of Styles Here is the current list of semantic styles for our courses. They are added as templates to each course upon creation and used to style within the content. Samples of how each is currently styled follows. Preformatted text Bibliography Highlighted Text Return to Top of Page Required Reading Optional Reading Attention/Note Activities/Assessments Try This, Self-Test, Self-Check Box with Left Image PSU Ad Generic Box Checklist Table Table with Header Top Row Only Table with Header Top Row and Left Column Table with Header Left Column Only Schedule Table Image Center Image Left Image Right Video List Types Lowercase Alphabetical Uppercase Alphabetical Lowercase Roman Numeral Uppercase Roman Numeral PRE formatted text (such as code for HTML or JavaScript) In places where the PRE text involves several lines, and/or uses spaces to indent, use the <PRE> tag.

2 In places where words in paragraph content need to be styled, use <span class="pre"> (NB: The class "pre" can be added as a class to any tag.) If you want to use syntax highlighter for more advanced coding options, see Stevie or your designer. Bibliography This class creates a hanging indent for references. <div class="box-bibliography"> <p>reference 1</p> <p>reference 2</p>... Highlight This class highlights and bolds text that you want to emphasize. The image below shows a concept gallery with the heading highlighted. Note: That is not a typical usage of a highlight. <span class="highlight">...</span>

3 Return to Top Link This is used for anchors to return to the top of the page, especially in the syllabus but possibly in other places where a page is really long. <p class="link-top"><a id="top" name="top" href="#top">return to top of page.</a></p> Boxes Required Reading Used for reading in courses that is required. <div class="box-reading-required"> <h4>title (Such as Required Reading</h4> <p>enter Text Here</p>

4 Optional Reading (also used for supplemental reading and concept galleries) Used for readings in the course that are optional. <div class="box-reading-optional"> <h4>title</h4> <p>enter Text Here</p> Attention/Note (Also used for Tell Us About Its, Reading Reviews, and Reminders) Used for items the instructor wishes to call out. <div class="box-note"> <h4>note:</h4> <p>enter Text Here</p>

5 Activities/Assessments (used for deliverables) This is used for deliverables that are required in courses. Please note that on pages where the entire page is an assignment, we don t box the entire page, but just one area (such as the submission instructions). <div class="box-activity-required"> <h4>title (Such as Deliverable)</h4> <p>enter Text Here</p> Try This, Self Tests, Self Checks This is used for items that are optional, but are still classed as activities students might try.

6 <div class="box-activity-optional"> <h4>try This!</h4> <p>enter Text Here</p> Box with a Left Justified Image Inside (Rarely used) Used if you need a callout box that has an image inside it. <div class="box-image-left"> <p>enter Text Here</p> PSU Advert (used in OER GIS courses to advertise) This should be customized for your program if needed. <div class="box-psu-ad"> <p>students who register for this Penn State course gain access to assignments and instructor feedback, and earn academic credit. Information about Penn State's Online Geospatial Education programs is available at the <a class="ext" href=" target="_blank">geospatial Education Program Office</a>.</p> Generic Box for Exceptions Used for anything we forgot (but we hope you ll help us to define these semantically). <div class="box-other"> <p>enter Text Here</p>

7 Tables Tables should not have any cellpadding, cellspacing, width, height, color, or border elements. These should all be taken care of via the style sheet. Checklist Table (Road Map and Assignment Tables) This is used for Lesson Roadmaps and Assignments (usually the first or second page of a lesson). <table class="table-checklist" summary="table summary"> <caption>enter Table caption</caption> <thead> <th scope="col">heading 1</th> <th scope="col">heading 2</th> <th scope="col">heading 3</th> </thead> <tbody> <td>new row 1</td> <td>new row 2</td> <td>new row 3</td> </tbody> <table>

8 Data Table Header Top Row Only This is used for tables where only the top row is a heading. <table class="table-data" summary="table summary"> <caption>enter Table caption</caption> <thead> <th scope="col">heading 1</th> <th scope="col">heading 2</th> <th scope="col">heading 3</th> </thead> <tbody> <td>new row 1</td> <td>new row 2</td> <td>new row 3</td> </tbody> </table> Data Table Header Top Row and Side Column This is used for tables where the header is the first row and left column.

9 <table class="table-data" summary="table summary"> <caption>enter Table caption</caption> <thead> <th scope="col"> </th> <th scope="col"> </th> <th scope="col"> </th> </thead> <tbody> <th scope="row"> </th> <th scope="row"> </th> </tbody> </table> Data Table Header Side Only This is used for tables where the header is the left column only. <table class="table-data" summary="table summary"> <caption>enter Table caption</caption> <tbody> <th scope="row"> </th> <th scope="row"> </th> <th scope="row"> </th> </tbody> </table>

10 Schedule Table (Syllabus ONLY) This style is used for the tables in the syllabus that cover the syllabus schedule. <table class="table-schedule" summary="the topics, readings, and assignments for the lesson."> <caption>enter Weekly Lesson number and name</caption> <tbody> <th scope="row">date:</th> <th scope="row">topics:</th> <th scope="row">readings:</th> <th scope="row">assignments:</th> </tbody> </table>

11 Images Image Center This is used for images to be centered. All images that need a caption and/or credit line should use this style. You can also use the classes "image-center," "image-caption," and "image-credit" here. They all look the same. <div class="img-center"><img alt="enter image and alt text here. No sizes!" src="foo.jpg"> <div class="img-caption">enter caption here <div class="img-credit">enter image credit here Image Left Left-justified images cannot have caption or credit line. There s no way to make them responsive if we justify them left or right. Any images with a caption or credit line need to be centered. You can also use the class "image-left" here. <div class="img-left"> <img alt="enter image and alt text here. No sizes!" src="foo.jpg">

12 Image Right Right-justified images cannot have caption or credit line. There s no way to make them responsive if we justify them left or right. Any images with a caption or credit line need to be centered. You can also use the class "image-right" here. <div class="img-right"> <img alt="enter image and alt text here. No sizes!" src="foo.jpg">

13 Video Video is a special case where you do not need to worry about removing width or height attributes. Iframe Only This is used for videos from places such as YouTube. <div class="video-wrapper"> <iframe src=" frameborder="0" height="225" width="400"></iframe> Iframe/Embed Another option for videos. It will look the same as the one above. <div class="video-wrapper"> <iframe allowfullscreen="" src=" frameborder="0" height="433" width="720"></iframe> <embed src=" style="display:none" type="application/x-shockwaveflash"> When a Caption is Needed under a video If you need a caption under a video, this is the code that we ll use. <div class="image-center"> <div class="video-wrapper"> video code <div class="image-caption">caption <div class="image-credit">credit

14 List Types If you need to create ordered lists using letters or Roman Numerals, use these styles: Alpha Lower case, <ol class= list-alpha-lower > Alpha Upper case, <ol class= list-alpha-upper > Roman Numerals Lower case, <ol class= list-roman-lower"> Roman Numerals Upper case, <ol class= list-roman-upper"> Best Practices Avoid inline styles. This includes <span style= foo >, <font> tags, and code such as <tt>, <code>, etc. Avoid adding space between elements or at the end of a content section. (No extraneous <p> or <p> </p>. (Spacing should be defined by styling elements in the stylesheet, not by adding additional content to the page.) Avoid using unless it's called for. Two spaces aren't needed at the end of sentences, and it's rare that a space character won't work. Use <p> in place of <div> where a <div> is being used simply to create a new style. Where possible, try not to put spaces inside tags. For example, use <strong>title Here</strong> not <strong>title Here </strong> with a space after "Here". This is important if we decide to apply background coloring to certain items. Tables should have captions and summaries. The majority of tables should use th for the header row and header column and td for the content rows. thead and tbody currently aren't styles but are semantically preferable. (We may style these at some point, so putting them in the table is helpful.) Avoid using <p> tags to style in tables. If you need more than one line of text, separate with two breaks <br /><br />. Note: On some pages, this cannot be avoided, but we try in most cases. H3 is reserved for the largest, first heading in the content area. H4 and H5 for sub-heads. H1 is reserved for the title or header that Drupal places above the content section. H2 is reserved for navigation. Don't add <b> or <strong> to headings - this styling will be done via the CSS. Links shouldn't use target= or javascript to open new windows. In the case of linking to special media target= _blank can be used. In cases where the page is an assignment and a link is to another part of the course, target="_blank" is appropriate. Linked text should, where possible, include a meaningful link text instead of a URL. Link titles, if used, should be beneficial. We should not have URLs that are entered as reference text. Images will be styled via the CSS style sheet. A variety of style declarations will be available. The maximum size of an image in the content cell will be 700px. If there's a need for a larger image we'll have to handle these separately. Images should degrade in size as well as possible for smaller screen sizes. Images should never include width= or height= in the code. This prevents them from being responsive.

15 As a rule of thumb, images should be cropped to the content areas only - try to eliminate any whitespace around the image. Images should have meaningful alt tags. If the image is purely decorative an alt=" " will suffice. Large images should be set in the image-center div. For images that aren't going to be set apart with a caption or credit below them, they should have a class.imgleft and or.imgright and or.imgcenter. See code in Image section below.