Authoring Tool

An Authoring Tool is an interface or other form of utility for creating scenarios or other logical groupings of activities within a system.

Specifications

• W3C -- Authoring Tool Accessibility Guidelines 1.0: http://www.w3.org/TR/ATAG10/

Types

WYSIWYG

What You See Is What You Get (commonly abbreviated WYSIWYG) is a paradigm for content creation whereby one marks up a given content item (for example a blog post) with a specific markup language or format (for example using Tex, LaTex, HTML, CSS, xHTML and/or RDFa) for the purpose of specifying exactly how the content should appear to its intended audience(s). The most common method of representing a WYSIWYG interface is a text-editor, a visual tool for editing content to adhere to a specific standard or format.

• wikipedia: WYSIWYG
• TinyMCE -- Visual WYSIWYG editor: http://tinymce.moxiecode.com/
• Full Example: http://tinymce.moxiecode.com/examples/full.php#
• jQuery example: http://tinymce.moxiecode.com/examples/example_22.php
• MultiXinha - Collaborative WYSIWYG editor widget (Apache licensed): http://marxjohnson.github.com/MultiXinha/
• Loki - xHTML: https://apps.carleton.edu/opensource/loki/download/

WYSIWYM

What You See Is What You Mean (commonly abbreviated WYSIWYM) is a term which describes any text-editor or other input system which allows users to specify not just syntax (i.e. presentation and structure of a document) but also semantics (i.e. classification and meaning of a document).

• wikipedia: WYSIWYM
• WYSIWYM Javascript Structure Builder (concept): http://wysiwym.org
• JavaScript WYSIWYM: http://www.itri.bton.ac.uk/projects/WYSIWYM/javademo.html

• WMD - The WYSIWYM Markdown Editor: http://wmd-editor.com/
• Evaluation of WYSIWYG-editors: http://www.standards-schmandards.com/2006/wysiwyg-editor-test/
• Forget WYSIWYG editors - use WYSIWYM instead: http://www.456bereastreet.com/archive/200612/forget_wysiwyg_editors_use_wysiwym_instead/
• LyX – The Document Processor: http://www.lyx.org/
• WYMeditor: web-based XHTML editor: http://www.wymeditor.org/
• WYMeditor examples: http://files.wymeditor.org/wymeditor/trunk/src/examples/
• Custom xHTML WYMeditor: http://files.wymeditor.org/wymeditor/trunk/src/examples/11-custom-parser.html
• RDFa WYMeditor: http://files.wymeditor.org/wymeditor/trunk/src/examples/15-rdfa-editor.html

Tools

• DIA (desktop): http://dia-installer.de/shapes/scenegraph/index_en.html
• OmniGraffle (Mac only): http://www.omnigroup.com/products/omnigraffle/
• VUE - Visual Understanding Environment (desktop and web, using Java Applet): http://vue.tufts.edu/
• Visio: http://office.microsoft.com/en-us/visio/

Resources

JAVA

• JGraphX: http://www.jgraph.com/jgraphx.html

JS

• mxGraph (commercial): https://github.com/jgraph/mxgraph | DEMO
• Project Draw: http://labs.autodesk.com/technologies/draw/ | DEMO
• Arrows & Boxes: http://www.headjump.de/article/arrows-and-boxes-editor

AJAX

• Draw2D: http://www.draw2d.org/ | DEMO
• WireIt: http://neyric.github.com/wireit/docs/ | DEMO

SVG

• JointJS: https://www.jointjs.com/

FLEX

• Gliffy: http://www.gliffy.com/
• Wonderfl: http://wonderfl.net/about
• DeGrafa: http://www.degrafa.org/

Tutorials

• Training the CMS -- Building a Better Authoring Experience: https://content.design/2015/09/training-the-cms-building-a-better-authoring-experience
• Patch cord design -- how to give your GUI an analog look: https://medium.freecodecamp.org/patch-cord-design-how-to-give-your-gui-an-analog-look-d26a68f8e97b (guide to building a basic flowchart/connector tool in JS/CSS3/SVG)

External Links

• wikipedia: Collaborative real-time editor
• Gliffy -- Web based version of MS-Visio done with Flex: http://polygeek.com/97_flex_gliffy-web-based-version-of-ms-visio-done-with-flex
• Create Flash without Flash Authoring Tool: http://www.flex888.com/1435/create-flash-without-flash-authoring-tool.html
• Importing VUE files into your own Visual Editor: https://vue-forums.uit.tufts.edu/posts/list/589.page#2365
• Swedish Defence Research on the NetBeans Platform (Part 1): http://netbeans.dzone.com/nb-swedish-defence-research-1
• Getting Started Creating Workflow Editors on the NetBeans Platform: http://blogs.sun.com/geertjan/entry/getting_started_creating_workflow_editors
• Adobe Experience Manager .vs. WordPress -- The Authoring Experience Compared: https://www.smashingmagazine.com/2019/01/adobe-experience-manager-comparison-wordpress/
• Implications Of Thinking In Blocks Instead Of Blobs: https://www.smashingmagazine.com/2018/11/implications-blocks-blobs/

See Also

E-Learning | Rule Engine | Text | CMS | AEM | JAVA | AJAX | FLEX | HTML5 | AEM | Wordpress | Drupal