User:WikiMaster/WYSIWYG: Difference between revisions
WikiMaster (talk | contribs) m (Make InlineEditor its own h2 section.) |
WikiMaster (talk | contribs) m (→VisualEditor: Help us test and investigate VisualEditor) |
||
(22 intermediate revisions by 5 users not shown) | |||
Line 1: | Line 1: | ||
{{RightTOC}} | {{RightTOC}} | ||
== | == Wikimedia Foundation Planning == | ||
* [[mediawikiwiki: | * [[mediawikiwiki:MediaWiki 2.0|MediaWiki 2.0]] | ||
: | * [[mediawikiwiki:Roadmap|Roadmap]] | ||
=== VisualEditor === | |||
* [[mediawikiwiki:VisualEditor|VisualEditor]] ([[mediawikiwiki:MediaWiki|MediaWiki]]) | |||
: The Visual editor project aims to create a reliable rich-text editor for MediaWiki. It is being developed as a [[mediawikiwiki:Extension:VisualEditor|MediaWiki extension]] and currently being tested in the [[mediawikiwiki:Special:VisualEditorSandbox|visual editor sandbox]]. | |||
* [[mediawikiwiki:VisualEditor:Sandbox|VisualEditor:Sandbox]] ([[mediawikiwiki:MediaWiki|MediaWiki]]) | |||
: Example documents: Wikipedia article | Formatting | New document | |||
* [[wikipedia:Wikipedia:VisualEditor|Wikipedia:VisualEditor]] ([[wikipedia:Wikipedia|Wikipedia]]) | |||
: Effective 12 December 2012, the VisualEditor is now available to all logged-in accounts on the English Wikipedia as a new preference, switched off by default. If you go to your "Preferences" screen and click into the “Editing" section, it will have an option labelled "Enable VisualEditor"). | |||
; [[mediawikiwiki:VisualEditor|VisualEditor]] News & Updates | |||
* [http://thenextweb.com/2013/01/28/wikimedias-visual-editor-is-now-a-top-priority-wikipedia-needs-your-help-breaking-and-fixing-it/ Wikimedia needs your help testing Wikipedia’s new visual editor, calls project a ‘top priority’] ([http://thenextweb.com/ The Next Web] | 28 January 2013) | |||
* [https://blog.wikimedia.org/2013/01/28/help-us-test-and-investigate-visualeditor/ Help us test and investigate VisualEditor] ([https://blog.wikimedia.org/ WikiMedia Foundation Tech Blog] | January 28th, 2013) | |||
* [https://blog.wikimedia.org/2012/12/12/try-out-the-alpha-version-of-the-visualeditor/ Try out the alpha version of the VisualEditor] ([https://blog.wikimedia.org/ WikiMedia Foundation Tech Blog] | December 12th, 2012) | |||
* | * [http://thenextweb.com/insider/2012/12/07/wikimedia-explains-why-its-taking-so-long-to-launch-a-visual-editor-and-ditch-wikitext/ Wikimedia explains why, after all these years, Wikipedia still doesn’t have a visual editor] ([http://thenextweb.com/ The Next Web] | 7 December 2012) | ||
* [ | * [http://blog.wikimedia.org/2012/12/07/inventing-as-we-go-building-a-visual-editor-for-mediawiki/ Inventing as we go: building a visual editor for MediaWiki] ([https://blog.wikimedia.org/ WikiMedia Foundation Tech Blog] | December 7th, 2012) | ||
: | |||
* [https://blog.wikimedia.org/2011/12/13/help-test-the-first-visual-editor-developer-prototype/ Help test the first visual editor developer prototype] ([https://blog.wikimedia.org/ WikiMedia Foundation Tech Blog] | December 13th, 2011) | |||
* [ | |||
== Wiki Text / Wiki Markup == | === Wiki Text / Wiki Markup === | ||
* [[mediawikiwiki:Wikitext.next|Wikitext.next]] | * [[mediawikiwiki:Wikitext.next|Wikitext.next]] | ||
MediaWiki's markup syntax has grown organically since 2002, itself based on earlier wiki syntaxes going back to 1995. None of it's very consistent, and there are a lot of edge cases which tend to surprise folks. | MediaWiki's markup syntax has grown organically since 2002, itself based on earlier wiki syntaxes going back to 1995. None of it's very consistent, and there are a lot of edge cases which tend to surprise folks. | ||
Line 23: | Line 35: | ||
# Combination of edge cases makes round-tripping to HTML and back very hard, which has made it difficult to get rich text editing fully integrated | # Combination of edge cases makes round-tripping to HTML and back very hard, which has made it difficult to get rich text editing fully integrated | ||
== InlineEditor == | * [[mediawikiwiki:WMF Projects|WMF Projects]] | ||
: List of currently active projects being managed by the [[wikimedia:Wikimedia Foundation|Wikimedia Foundation]]. | |||
* [[mediawikiwiki:Future|Future]] | |||
: Wikimedia Engineering's key future-facing priority for 2011–2012 is creating a rich text editing environment, backed by a revamped, normalized, more consistent wikitext parser. The Wikimedia Foundation's [http://wikimediafoundation.org/wiki/2011-2012_Annual_Plan_Questions_and_Answers 2011-2012 annual plan] aims to "Develop Visual Editor. First opt-in user-facing production usage by December 2011, and first small wiki default deployment by June 2012." | |||
* [[mediawikiwiki:Future/Parser plan|Future/Parser plan]] | |||
: Draft started here: http://etherpad.wikimedia.org/mwhack11Sat-ParserDraft | |||
: [[mediawikiwiki:Extension:ParserPlayground|Extension:ParserPlayground]] | |||
* [[wikimedia:2011-2012 Annual Plan Questions and Answers#What are the main increases in spending for 2011-12?]] | |||
: “Included in the spending increases for 2011-12 are: 1) Additional spending on technology that will include funding for the development of the Visual Editor, new editor engagement features, internationalization improvements…” | |||
== Wiki Editing 2.0: Visual Editors, Wikis & You == | |||
* PDF: [[upwikimedia:/commons/d/d5/Parser_and_Editor_-_Haifa_2011.pdf|Editing 2.0: MediaWiki's upcoming visual editor and the future of templates]] - (Brion Vibber's [[wikimania2011:Submissions/Editing 2.0: MediaWiki's upcoming visual editor and the future of templates|wikimania2011 presentation]].) | |||
: '''So pretty!''' Wikipedia articles can include rich formatting, beyond simple links and images to complex templates to generate tables, pronunciation guides, and all sorts of details. | |||
: '''So icky!''' But when you push that “edit” button, you often come face to face with a giant blob of markup that’s very hard to read. Here we can’t even see the first paragraph of the article until we scroll past several pages of infobox setup. | |||
'''[[User:WikiMaster|Dave]]'s Note:''' Moved references to [[mediawikiwiki:Extension:InlineEditor|Extension:InlineEditor]] and [[mediawikiwiki:WYSIFTW|What You See Is For The Win (WYSIFTW) / What You See Is What The Fuck (WYSIWTF)]] up here to the top of this list because these look like two of the most immediately available options that we might be able to successfully adapt to PortlandWiki until realistic / workable alternatives come along. | |||
=== MediaWiki Extension:InlineEditor === | |||
'''[[User:WikiMaster|Dave]]'s Note:''' This might be the easier-to-use editor we go with, even though it's still in development stage, because: | '''[[User:WikiMaster|Dave]]'s Note:''' This might be the easier-to-use editor we go with, even though it's still in development stage, because: | ||
# It's [[telecafe:Sandbox|testing well]] (so far). | # It's [[telecafe:Sandbox|testing well]] (so far). | ||
Line 30: | Line 62: | ||
* [[mediawikiwiki:Extension:InlineEditor|Extension:InlineEditor]] | * [[mediawikiwiki:Extension:InlineEditor|Extension:InlineEditor]] | ||
: InlineEditor is an editing interface that allows users to edit and preview elements in the page by clicking them. | : [[mediawikiwiki:User:JanPaul123|Jan Paul Posma]]’s ([http://janpaulposma.nl/cv/posma-cv.pdf CV]) [[mediawikiwiki:Extension:InlineEditor|InlineEditor]] extension is an editing interface that allows users to quickly edit and preview elements in the page by clicking them. It is an excellent example of work on making it easier to edit smaller pieces of a page, making the amount of other markup around you less intimidating. Though each piece is still edited as raw markup, you’re only exposed to the parts you’re working with, and you can switch them back to visual mode very quickly. | ||
: [[mediawikiwiki:Extension:InlineEditor|Extension:InlineEditor]] [http://janpaulposma.nl/sle/wiki/index.php/Hoofdpagina Demo] | :: Also see: [[mediawikiwiki:Extension talk:InlineEditor#Is there any reason why we shouldn't install this extension?|Extension talk:InlineEditor#Is there any reason why we shouldn't install this extension?]] | ||
<ol style="list-style-type: lower-roman;"> | |||
<li> [[mediawikiwiki:Extension:InlineEditor|Extension:InlineEditor]] [http://janpaulposma.nl/sle/wiki/index.php/Hoofdpagina Demo]</li> | |||
<li> [[mediawikiwiki:Extension:InlineEditor/Proposal|Extension:InlineEditor/Proposal]]</li> | |||
<li> [[mediawikiwiki:Extension:InlineEditor/Prototypes|Extension:InlineEditor/Prototypes]]</li> | |||
</ol> | |||
: The different prototypes for the [[mediawikiwiki:User:JanPaul123/Sentence-level editing|Sentence-level editing]] project are to illustrate the concept, and can be used as a starting point for an actual implementation. All the prototypes are briefly described on this page. | |||
* PDF: [https://code.grnet.gr/attachments/63/SentenceLevelEditing_Usability_RuG.pdf SentenceLevelEditing_Usability_RuG.pdf - Usability script Sentence-Level Editing] | * PDF: [https://code.grnet.gr/attachments/63/SentenceLevelEditing_Usability_RuG.pdf SentenceLevelEditing_Usability_RuG.pdf - Usability script Sentence-Level Editing] | ||
Line 42: | Line 77: | ||
; [[commons:Category:Sentence-level editing|Category:Sentence-level editing]] ([[commons:Commons:Welcome|Wikimedia Commons]]) | ; [[commons:Category:Sentence-level editing|Category:Sentence-level editing]] ([[commons:Commons:Welcome|Wikimedia Commons]]) | ||
=== [[mediawikiwiki:Extension:InlineEditor|InlineEditor]] [[telecafe:Sandbox|Demo]] On [[telecafe:|Telecafe]] === | * [http://code.grnet.gr/projects/49/wiki/Wiki InlineEditor: Documentation ; SVN ; Code documentation ; Demo] | ||
* [http://markmail.org/search/?q=inlineeditor&q=list%3Aorg.wikimedia.lists.wikitech-l InlineEditor mailing list discussion] | |||
* Browse source code: [http://svn.wikimedia.org/viewvc/mediawiki/trunk/extensions/InlineEditor/ Index of /trunk/extensions/InlineEditor] | |||
==== [[mediawikiwiki:Extension:InlineEditor|InlineEditor]] [[telecafe:Sandbox|Demo]] On [[telecafe:|Telecafe]] ==== | |||
* [[telecafe:|Telecafe]] [[mediawikiwiki:Extension:InlineEditor|InlineEditor]] '''[[telecafe:Sandbox|Demo]]''' | * [[telecafe:|Telecafe]] [[mediawikiwiki:Extension:InlineEditor|InlineEditor]] '''[[telecafe:Sandbox|Demo]]''' | ||
; Requires Login | ; Requires Login | ||
: (Unfortunately, due to sporadic monitoring, [[telecafe:|Telecafe]] only allows folks with "[[mediawikiwiki:Manual:$wgEmailConfirmToEdit|email confirmed]]" accounts edit the '''[[mediawikiwiki:Extension:InlineEditor|InlineEditor]] [[telecafe:Sandbox|Demo]]''' on [[telecafe:|Telecafe]]'s wiki.) | : (Unfortunately, due to sporadic monitoring, [[telecafe:|Telecafe]] only allows folks with "[[mediawikiwiki:Manual:$wgEmailConfirmToEdit|email confirmed]]" accounts edit the '''[[mediawikiwiki:Extension:InlineEditor|InlineEditor]] [[telecafe:Sandbox|Demo]]''' on [[telecafe:|Telecafe]]'s wiki.) | ||
=== WYSIWTF (aka WYSIFTW) === | |||
'''[[User:WikiMaster|Dave]]'s Note:''' It looks like [[User:Kotra|Kotra]] (perhaps tentatively) favors [[wikipedia:User:Magnus Manske|Magnus Manske]]'s [[mediawikiwiki:WYSIFTW|WYSIFTW]] approach over [[mediawikiwiki:User:JanPaul123|Jan Paul Posma]]'s [[mediawikiwiki:Extension:InlineEditor|InlineEditor]] extension. Reason? Simpler interface. | |||
* [[mediawikiwiki:WYSIFTW|WYSIFTW]] | |||
: '''WYSIFTW''' (formerly '''WYSIWTF''') is a JavaScript-based tool originally written by [[wikipedia:User:Magnus Manske|Magnus Manske]]. Its primary purpose is to make it easier to edit Wikipedia articles, especially for people unfamiliar with the intricacies of MediaWiki syntax. | |||
: [http://toolserver.org/~magnus/wysiwtf/wysiwtf.js WYSIWTF (aka WYSIFTW)] - The js code. | |||
; [http://code.grnet.gr/projects/49/wiki/Wiki WYSIFTW: Documentation ; SVN ; Code documentation ; Demo] | |||
* [http://markmail.org/search/?q=WYSIFTW&q=list%3Aorg.wikimedia.lists.wikitech-l WYSIFTW status] | |||
* [http://markmail.org/search/?q=WYSIWTF&q=list%3Aorg.wikimedia.lists.wikitech-l WYSIWTF working demo] | |||
== Additional WYSIWYG Research == | |||
* [[mediawikiwiki:WYSIWYG editor|WYSIWYG editor]] | |||
: For the more technically inclined, [[metawikipedia:Wiki markup|wiki markup]] is a simple way of formatting a wiki page. However, many would-be users of MediaWiki are put off by what looks to them—rightly—to be code of any sort. These users are adjusted to publishing and editing in a more visually straightforward '''WYSIWYG''' (''What You See Is What You Get'') environment. | |||
* “[http://www.wired.com/epicenter/2008/12/wikipedias-wysi/ Wikipedia’s WYSIWYG Dilemma]” ''(Wired)'' | |||
: From Article: (Wikipedia's) editing platform is intentionally designed to be complex so as to lower participation and thus make it easier to manage, and that if they open up the floodgates, "the site will probably come to a grinding halt." | |||
* [[wikipedia:WYSIWYM|WYSIWYM]] | |||
: '''WYSIWYM''' is an acronym for '''''W'''hat '''Y'''ou '''S'''ee '''I'''s '''W'''hat '''Y'''ou '''M'''ean'', and refers to a [[wikipedia:paradigm|paradigm]] for document editing. It is an alternative to the better-known [[wikipedia:WYSIWYG|WYSIWYG]] (what you see is what you get) paradigm, which displays the document on screen as it will be printed. | |||
; Wikipedia WYSIWYG | |||
* [http://code.grnet.gr/projects/wikipedia-wysiwyg Wikipedia WYSIWYG] | |||
** [http://code.grnet.gr/projects/wikipedia-wysiwyg/wiki Wikipedia WYSIWYG - wiki] | |||
: Wikipedia WYSIWYG is a collaboration between GRNET and MediaWiki developers. The goal is to provide a better editing interface for Wikipedia. This will be done by evaluating existing approaches and improving them. Read more about the usability testing.<ref>[https://code.grnet.gr/projects/wikipedia-wysiwyg/wiki/Usability_testing Wikipedia WYSIWYG: Usability testing]</ref> The first step is to do usability testing with some of the existing approaches: '''InlineEditor''', '''WYSIFTW''', '''RTE''' and others (see below for details). | |||
== WYSIWYG Extensions == | == WYSIWYG Extensions == | ||
Line 64: | Line 130: | ||
== Other Editing Tools == | == Other Editing Tools == | ||
=== wikEd === | === wikEd === |
Latest revision as of 20:54, 28 January 2013
Wikimedia Foundation Planning
VisualEditor
- The Visual editor project aims to create a reliable rich-text editor for MediaWiki. It is being developed as a MediaWiki extension and currently being tested in the visual editor sandbox.
- Example documents: Wikipedia article | Formatting | New document
- Effective 12 December 2012, the VisualEditor is now available to all logged-in accounts on the English Wikipedia as a new preference, switched off by default. If you go to your "Preferences" screen and click into the “Editing" section, it will have an option labelled "Enable VisualEditor").
- VisualEditor News & Updates
- Wikimedia needs your help testing Wikipedia’s new visual editor, calls project a ‘top priority’ (The Next Web | 28 January 2013)
- Help us test and investigate VisualEditor (WikiMedia Foundation Tech Blog | January 28th, 2013)
- Try out the alpha version of the VisualEditor (WikiMedia Foundation Tech Blog | December 12th, 2012)
- Wikimedia explains why, after all these years, Wikipedia still doesn’t have a visual editor (The Next Web | 7 December 2012)
- Inventing as we go: building a visual editor for MediaWiki (WikiMedia Foundation Tech Blog | December 7th, 2012)
- Help test the first visual editor developer prototype (WikiMedia Foundation Tech Blog | December 13th, 2011)
Wiki Text / Wiki Markup
MediaWiki's markup syntax has grown organically since 2002, itself based on earlier wiki syntaxes going back to 1995. None of it's very consistent, and there are a lot of edge cases which tend to surprise folks.
- Raw markup can look really ugly and intimidating to editors
- Tables, templates, tags, etc have many unexpected boundary conditions, which makes some uses of these constructs hard to deal with even for experts
- Lack of structure or standardization means that changes to the parser code can unexpectedly change those cases
- Combination of edge cases makes round-tripping to HTML and back very hard, which has made it difficult to get rich text editing fully integrated
- List of currently active projects being managed by the Wikimedia Foundation.
- Wikimedia Engineering's key future-facing priority for 2011–2012 is creating a rich text editing environment, backed by a revamped, normalized, more consistent wikitext parser. The Wikimedia Foundation's 2011-2012 annual plan aims to "Develop Visual Editor. First opt-in user-facing production usage by December 2011, and first small wiki default deployment by June 2012."
- Draft started here: http://etherpad.wikimedia.org/mwhack11Sat-ParserDraft
- Extension:ParserPlayground
- “Included in the spending increases for 2011-12 are: 1) Additional spending on technology that will include funding for the development of the Visual Editor, new editor engagement features, internationalization improvements…”
Wiki Editing 2.0: Visual Editors, Wikis & You
- PDF: Editing 2.0: MediaWiki's upcoming visual editor and the future of templates - (Brion Vibber's wikimania2011 presentation.)
- So pretty! Wikipedia articles can include rich formatting, beyond simple links and images to complex templates to generate tables, pronunciation guides, and all sorts of details.
- So icky! But when you push that “edit” button, you often come face to face with a giant blob of markup that’s very hard to read. Here we can’t even see the first paragraph of the article until we scroll past several pages of infobox setup.
Dave's Note: Moved references to Extension:InlineEditor and What You See Is For The Win (WYSIFTW) / What You See Is What The Fuck (WYSIWTF) up here to the top of this list because these look like two of the most immediately available options that we might be able to successfully adapt to PortlandWiki until realistic / workable alternatives come along.
MediaWiki Extension:InlineEditor
Dave's Note: This might be the easier-to-use editor we go with, even though it's still in development stage, because:
- It's testing well (so far).
- The code looks clean and well-written.
- The project is extensively researched.
- Jan Paul Posma’s (CV) InlineEditor extension is an editing interface that allows users to quickly edit and preview elements in the page by clicking them. It is an excellent example of work on making it easier to edit smaller pieces of a page, making the amount of other markup around you less intimidating. Though each piece is still edited as raw markup, you’re only exposed to the parts you’re working with, and you can switch them back to visual mode very quickly.
- The different prototypes for the Sentence-level editing project are to illustrate the concept, and can be used as a starting point for an actual implementation. All the prototypes are briefly described on this page.
- PDF: SentenceLevelEditing_Usability_RuG.pdf - Usability script Sentence-Level Editing
- PDF: In-line Editing: a New Approach to Editing Wikis (Thesis)
- PDF: IN-LINE EDITING: A NEW APPROACH TO EDITING WIKIS (Presentation)
- InlineEditor: Documentation ; SVN ; Code documentation ; Demo
- InlineEditor mailing list discussion
- Browse source code: Index of /trunk/extensions/InlineEditor
InlineEditor Demo On Telecafe
- Requires Login
- (Unfortunately, due to sporadic monitoring, Telecafe only allows folks with "email confirmed" accounts edit the InlineEditor Demo on Telecafe's wiki.)
WYSIWTF (aka WYSIFTW)
Dave's Note: It looks like Kotra (perhaps tentatively) favors Magnus Manske's WYSIFTW approach over Jan Paul Posma's InlineEditor extension. Reason? Simpler interface.
- WYSIFTW (formerly WYSIWTF) is a JavaScript-based tool originally written by Magnus Manske. Its primary purpose is to make it easier to edit Wikipedia articles, especially for people unfamiliar with the intricacies of MediaWiki syntax.
- WYSIWTF (aka WYSIFTW) - The js code.
Additional WYSIWYG Research
- For the more technically inclined, wiki markup is a simple way of formatting a wiki page. However, many would-be users of MediaWiki are put off by what looks to them—rightly—to be code of any sort. These users are adjusted to publishing and editing in a more visually straightforward WYSIWYG (What You See Is What You Get) environment.
- “Wikipedia’s WYSIWYG Dilemma” (Wired)
- From Article: (Wikipedia's) editing platform is intentionally designed to be complex so as to lower participation and thus make it easier to manage, and that if they open up the floodgates, "the site will probably come to a grinding halt."
- WYSIWYM is an acronym for What You See Is What You Mean, and refers to a paradigm for document editing. It is an alternative to the better-known WYSIWYG (what you see is what you get) paradigm, which displays the document on screen as it will be printed.
- Wikipedia WYSIWYG
- Wikipedia WYSIWYG is a collaboration between GRNET and MediaWiki developers. The goal is to provide a better editing interface for Wikipedia. This will be done by evaluating existing approaches and improving them. Read more about the usability testing.[1] The first step is to do usability testing with some of the existing approaches: InlineEditor, WYSIFTW, RTE and others (see below for details).
WYSIWYG Extensions
FCKeditor (Official)
WYSIWYG
- The WYSIWYG extension enables a more intuitive editing of pages on a MediaWiki-based site. When this extension is installed, the tab 'Edit' in the command bar on top of every page leads directly in the wysiwyg editing mode. The WYSIWYG extension uses a special version of the CKeditor that outputs wiki text rather than the usual HTML that caused problems for MediaWiki integrations in the past.
RTE (Rich Text Editor (Wikia)
- Wikia's Community Test Wiki (RTE Demo)
- Help:Rich text editor
- This extension is enabled by default on Wikia.
- svn.wikia-code.com/wikia/trunk/extensions/wikia/RTE
Other Editing Tools
wikEd
- wikEd is a full-featured Wikipedia-integrated advanced text editor for regular to advanced wiki users. wikEd features syntax highlighting with code check and reference and template folding, on-page Show preview and Show changes, and advanced search and replace functions. Please check the wikEd help page for details. wikEd works under all web browsers except Internet Explorer and Opera.
- This Essay in a Nutshell: Pure WYSIWYG is evil. Really. But we can learn a thing or two from it.
Semantic Forms
- Semantic Forms allows you to have forms for adding, editing and querying data on your wiki, without any programming. Forms can be created and edited not just by administrators, but by users themselves.
PortlandWiki WYSIWYG Discussions
- PortlandWiki Search Results: WYSIWYG