Open Computing Style Guide

From WikiEducator
Jump to: navigation, search

This style guide, adapted from the OER Handbook style guide and the CCNC Module 3 style guide, provides design guidelines for use in creating learning materials for the Open Computing project.

Hierarchy, Structure and Headings

Information icon.svg Style guide
an example of a content info box
See: History

Note: This main page header is effectively a Level 1 heading and will be printed as a Level 1 heading in the print version.
  • Always include some text between headings.
Don't have two headings follow each other without intervening text -- this is unprofessional. So for example at the top of each page we should have a paragraph before starting with the first heading.
  • Include Template:ContentInfobox on the main page, providing relevant metadata in the available fields. See example above, from the code {{ContentInfobox|align=right|description=an example of a content info box|subject=Technology}}.

Terminology and Titles

  • Use the following terms as defined, except in situations where the specific audience or learning material requires a different usage.
Command: an instruction or directive to be executed by the computer software program.
Application: a type of computer program that allows you to perform a particular task. Application is preferred over the terms software or program because application is term used in Ubuntu (the preferred operating system).
Add additional terms and definitions here.
  • When the content includes commands to the computer software program, bold each specific command and include the greater than symbol, > , between levels of nested commands, e.g., Select Insert > Picture > From file...)
  • When providing instructions for text to be entered from the keyboard, put the text in quotes, e.g., ...enter "=4+9" in cell A7.
  • When including the names of menus, tools, fields, in dialog boxes, etc., italicize the name of the item, making sure to type the name exactly as displayed in the application.
  • In the first use of a new term, considered important knowledge for understanding upcoming content, format the term in bold.

Visual Design

Some thoughts to maintain a constant grid for visual design:

  • For images, use the thumbnail type, at 400px wide; right or left justification at the discretion of the visual designer for balance.
  • For large portrait images, use a minimum size of 700px, centred without wrapping the text.
  • For best viewing, create screenshots to be close to 400px wide.
  • When displaying function button image in-line with text, create screenshot of button to be the size of the highlighted button.
  • Use only images that adhere to Wikieducator copyright requirements. [need a page reference for this]
  • Use only images with complete Template:Metadata information.
  • Adjust text as needed to improve flow and visual balance of the images and text.
  • Use Template:FA (Flickr Attribution) whenever included images are free content images from Flickr.


Other Wiki Markup

  • Use the <ref>...</ref> tags for all external links (e.g., ...)
  • Use the <br style="clear:both;" /> code to keep page formatting crisp and to keep photos from overlapping with content

Other Formatting

  • Frequently check that page is well formatted as pdf.
  • Include internal links for words and phrases that are described in earlier modules/topics/sections.
  • Include an image of a toolbar button when text indicates to select a toolbar bar button(see Editing tracks) in Using Audacity for an example).
  • Include all relevant category links on the main page, for example, [[Category:Computer Education]]

Move Pages

  • Use "Move" function whenever moving pages to maintain the Talk pages.

Copied from CCNC Module 3 Style Guide -- Not sure what these mean

  • Try to keep sections all at the same level so the page TOC is narrow.
  • Create a template for the module TOC and have only a <br /> tag in it
  • Create a template for the module TOC_print and have the module TOC in it for printing to the page
    • this template should appear next to the photo to describe the contents of the module
  • Create a print template with the same name as the navigation menu