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.
Contents
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 [2]
- 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[3]
SVG
- JointJS: https://www.jointjs.com/[4][5][6]
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/
References
- ↑ WYSIWYM explained: http://www.itri.bton.ac.uk/projects/WYSIWYM/wysiwym.html
- ↑ Project Draw does Visio-like Diagrams online: http://webworkerdaily.com/2009/07/17/project-draw-does-visio-like-diagrams-online/
- ↑ WebHookIt first release – developer preview: http://neyric.com/2011/01/29/webhookit-first-release/
- ↑ Creating an interactive SVG metro map with JointJS: https://www.netvlies.nl/tips-updates/overig/cases/creating-an-interactive-svg-metro-map-with-jointjs/
- ↑ Subway Map Visualization jQuery Plugin: http://kalyani.com/blog/2010/10/08/subway-map-visualization-jquery-plugin/
- ↑ Ten Examples of the Subway Map Metaphor: http://blog.visualmotive.com/2009/ten-examples-of-the-subway-map-metaphor/
See Also
E-Learning | Rule Engine | Text | CMS | AEM | JAVA | AJAX | FLEX | HTML5 | AEM | Wordpress | Drupal