This spec is an update to the existing (v2) tagging interface: 

    http://developer.mindtouch.com/Deki/Specs_(Implemented)/Tags_-_UI_v2

    Requirements

    This spec is a scoped update to the existing tag interface, with improvements where possible.

    General Requirements: 

    • Maintain backwards-compatibility with existing tag interfaces (supporting spaces, date:, define:, etc.)
    • Maintain a non-js version of the tag input page
      • Why is non-js tag editing supported today? The app itself says ["This application requires javascript to be enabled"] and CKEditor requires it also.
    • Make improvements to tag interface (detailed in UI requirements). In general, keep tag UX simple and skinnable.
    • Make improvements to tag class interface (detailed in PHP requirements)

    Status

    Implemented in 10.0 as the "page_tags" plugin.

    Work items:

    • Complete

    Outstanding bugs:

    Functional Specification

    Use Cases

    • User should be able to see a list of current tags
    • User should be able to add one more more tags using a single-line interface
    • User should be able to delete a tag
    • User should get help on what tag types are available and what they mean (define, name, date, etc.)

    Non-goals

    • Renaming tags
    • New tag browsing/viewing interfaces
    • New tag types

    Technical Specification

    These requirements are the specific improvements to be made.

    UI requirements

    Viewing Tags

    tag-view.png

    Editing Tags (javascript enabled)

    Picture 3.png

    • Ajax deletes
    • Autocomplete
    • Multiple entries can be queued with enter. tag1 <enter> tag2 <enter> tag3 <enter> will send them all.
    • New tags are highlighted (.highlight css class)

    Screen shot 2010-04-06 at 5.56.03 PM.png

    Autocomplete

    Picture 5.png

    Autocomplete features:

    • Search within tag [so "test" brings up tags with test anywhere inside]
    • Show count for tags > 1 result

    Editing Tags (javascript disabled)

    Picture 1.png

     

    • Checkboxes to select tags to remove
    • Single-line entry form

    Clean HTML Markup for easy skinning

    Tag display:

    <div id="deki-page-tags">
        <ul class="tags">
            <li>
                <a href="{TAG.URL}" tagid="TAG.ID" class="{TAG.TYPE (define, date)}" title="{TAG.Title}">{TAG.Title}</a>
                <span class="tagtype">{TAG:TYPE}<span>
            </li>
        </ul>
        <div class="title"><a href="{Special:Tags&pageId=N}" id="deki-page-tags-toggleview">Edit tags</a></div>
    </div>
    

    Notes

    • Able to skin tags by type (date, define, etc.)
    • Default URL goes to Special:Tags for non-js edit UI
    • tagid used to identify which tags to remove (vs doing another tag name lookup on backend)

     

    Tag editing: Similar to above, with a <form>, <input> (for tag entry) and identical tag display following. No HTML tables used to display tags.

    Multi-Input of Tags

    Support entering multiple tags (comma-separated) in a single input box. Pressing Enter will add them all.

    More Intuitive Icons

    Use simple "x" icon to delete a tag, vs. "tag delete" icon (which is difficult to recognize for what it is)

    API requirements

    The tagging API has been implemented in previous versions. No API changes are in scope for this spec.

    The PHP tag class will be simplified to store tags as a simple data object (name, type, id, etc.) with static class methods to update/save tags.

    Questions/Issues

    • "Tag" header already output when tags are rendered -- would be nice to have "edit" link be near the tag title itself.
    • Update themes to make them compatible?
    •  Remove warnings when submitting tag which is already there

    Future Ideas

    • Can enforce "blessed" tags by having the autocomplete require a match / only accept existing tags
    • Give admins a special page / setting on Special:Tags to define the valid set of tags.

    Additional Information

    Background notes on the current interface:

    • "Edit tags" link can blur with the actual list of tags [making it difficult to find]. The "edit tags" link should be easily distinguished [this is skin dependent].
    • Interface needs to be more skinnable 
    • css/javascript for autocomplete, etc. needs to be tag-specific [can't just use "autoCompContainer"]

    Existing Implementation:

    • Components
      • (with javascript): "edit tags" -- dynamically loads tag form (/deki/gui/tags.php?action=edit&pageId=n) into page. Saving the form loads the tag view list (/deki/gui/tags.php?action=view&pageId=n).
      • (without js): "edit tags" -- loads special page for tags: /index.php?title=Special:Tags&pageId=n
      • deki_tag.php -- tag class implementation (saving/removing through API, sorting, etc.)
      • TagsOld.php -- defines wfShowTags, which renders the tag view html [used in article.php to render an article]. Makes comma-separated list of tags.
      • skins/common/tags.{js,css} => common tag code for the special page / non-special page behavior
        • Question: common code/pattern to dynamically render results? Common library for this to use?
        • This is auto-included by js.php [determining which javascript to send down].
    • Question: If we implement tagsv3 as a plugin, only available when js disabled? [As a special page plugin or another type?]
      • The current tags.js is trigged as part of the common skin
      • redefine wfShowTags? [in TagsOld] - is this possible/desirable for a plugin
    Tag page

    Files 5

    FileVersionSizeModified 
    Viewing 8 of 8 comments: view all
    I can find reasons for using both ways you are allowed to add tags, which is great: my one complaint is that having the 'return to tags view' button at the bottom of the list means you have to scroll down the page to find it, which is a bit tedious, and gets worse as you add tags over time. I'd prefer that it stayed at the top of the list, since that's where you are doing the work of adding tags. So it should be to the right and level with the Add Tag button.
    Also, are you going to do anything about the 'supertag' idea I started a discussion on in the forum? (I see you are: http://bugs.developer.mindtouch.com/view.php?id=7760)
    The idea being that if you add the supertag to a page, then that page is always returned as the first entry of any relevant search. That would go a long way to helping people get the most relevant data first. What would be totally brilliant would be to add supertag1, supertag2 etc, so that you could specify a number of pages that would appear at the top of the search results. Some of our users would love you forever if you did that. :)
    Cheers.
    Posted 06:16, 23 Mar 2010
    @mickdavidson supertag would be tied to promotion edited 09:40, 1 Sep 2010
    Posted 16:23, 23 Mar 2010
    @mickdavidson: Thanks for the feedback, in the latest implementation the return to tag view is now a close button in the top right (so it won't be pushed down if you have a lot of tags). I'll update the screenshots. edited 10:25, 30 Mar 2010
    Posted 10:25, 30 Mar 2010
    Might this be an opportunity to also add support for hashtags (ie, #Olympic or #update), or would that belong on a different spec?
    Posted 13:10, 6 Apr 2010
    @iktest - contribute the ideas - we'll be continually improving the feature over multiple releases.
    Posted 13:44, 6 Apr 2010
    @lktest what would hashtags provide that tags do not already?
    Posted 14:18, 6 Apr 2010
    @Guerric Never mind! What I was referring to is no longer an issue. Earlier versions of Mindtouch didn't appear to fully support using the hash symbols in tags. The problem was that the URI used to get translated as http://wiki/Special:Tags?tag=#test, and no pages marked with the hash tag would be found. I see now that the URI comes out as http://wiki/Special:Tags?tag=%23test, and all pages marked with the hash tag are found. The issue must have been fixed in a recent update. Perfect!
    Posted 05:39, 8 Apr 2010
    @RoyK - what do you mean by 'tied to a promotion'? Cheers.
    Posted 01:15, 2 Sep 2010
    Viewing 8 of 8 comments: view all
    You must login to post a comment.

    Copyright © 2011 MindTouch, Inc. Powered by