Definition of Authoring Tools Examples:


Example 1: Text Editing

Screenshot of Dreamweaver MX code view

Description: Screenshot showing a text editor style editing window with XHTML code displayed. Text within tags (including the "pointy" brackets) has been colored blue by the tool. Other text is black.
(Source: Screenshot from Macromedia DreamWeaver MX)


Example 2: Symbol-Level Editing

Screenshot of Lego Mindsorm RCX code.

Description: Screenshot showing a code editing environment in which each operation is represented graphically as a piece of a toy constructor set (e.g. Lego). The graphical "pieces" of code have different colors and appearances depending on what operation they are. One of the operations is a repeat loop and its attributes (e.g. repeat conditions) are controlled by form elements on the "piece".The graphical "pieces" of code can be dragged around and assembled in different orders.
(Source: Screenshot from Lego MindStorms RCX software)


Example 3:WYSIWYG Editing

Screensot of Dreamweaver MX design view.

Description: Screenshot showing an editor window that looks like a browser window, with rendered text and an image of a satellite. The only thing betraying the editability of the content is an edit cursor below the last line.
(Source: Screenshot from Macromedia DreamWeaver MX, image from NASA.gov)


Example 4: Graphics Editing

Screenshot of Microsoft Visio 2002 design canvas.

Description: Screenshot showing a grid with several overlapping squares. One of the squares has been selected and is displayed in green. A drawing cursor hovers nearby.
(Source: Screenshot from Microsoft Visio 2002 Professional)


Example 5: Content Management

Screenshot of WebCT courseware package.

Description: Screenshot showing a Web page containing a form that a person could use to change the way a course home page is displayed. The options include: "Change page colors", "Modify/add background image", "Modifyicon style", "Replace individual icon", "Hide lefthand navigation bar", "Show lefthand navigation bar", and "Modify/add hit counter". Another section of the page lets the user decide how to display the following: "Assignments", "Calendar", "Discussions", "Mail", and "My Grades".
(Source: Image from WebCT.com)


Example 6: Constrained Editing

Screenshot of a comment submission tool.

Description: Screenshot showing a Web page containing a form that a person could use to add their name, email address, homepage and comments to another Web page.
(Source: Screenshot of "Greymatter" comment submission tool


Example 7: Timeline Editing

Screenshot of Flash MX timeline.

Description: Screenshot showing a grid. The rows are separate tracks, while the columns are frame numbers (everything in a column happens at the same point in time). Other options shown allow the user to "add", "remove", "hide" and "lock" tracks.
(Source: Screenshot from Macromedia Flash MX)


Example 8: Format Conversion

Screenshot of word processor 'Save As' dialog box that supports conversion to HTML.

Description: Screenshot showing the lower portion of a "Save as" dialog box. There is a textbox for the document name and a drop-down menu to choose a saving format. The screenshot captures the user saving a word processing document as an HTML Web page.
(Source: Screenshot from Microsoft Word 2000)