Wireframing the Midgard2 CMS UI
posted to #midgard 15.01.2010 (en)
When you go to editing mode we create you a new workspace under the current one. All edits you do in the session are made in this private workspace and you can merge them to parent workspace either fully or selectively.
Because all edits happen in a private space all editing tools will autosave things to ensure no content is lost in case of browser crashes or network outages. This should probably use HTML5 local storage as a fallback.
When merging changes we ask user to provide some change comment (compare this to commit messages) that will be used in the activity stream.
In editing mode we need to be aware of current client. With WIMP devices we can display the actions available to a content item on hover. With touchscreen devices the icons must be bigger and always present as there is no hover.
We need to amend current Midgard MVC actions spec to support also the concept of "actions to lists" so a list of objects (say, navigation) can be rearranged and added to using the actions.
Editing tools should be designed to be as compact as possible so you can see all manageable data on screen. When you focus/activate some control (say, article content), the editing interface for that field maximizes to provide a large working area (a WYSIWYG editor should take at least 80% of screen).
Some principles for the new UI:
@Jemiweb I'd like to sit down over a beer or two and draw some wireframes. Maybe @adrenalin would also be interested to join?
For rich content editing we need a tool that completely integrates with the rest of the system, both functionally and visually, and doesn't just look like Word 97 slapped into a web form. This probably means building a custom editor, maybe using WYMeditor as the basis.
The editor should not only provide normal document formatting, but also should provide tools for including semantic information inside a page. For example, Insert person in addition to Insert image.
These insertion tools should use a rich dialog that provides both searching, browsing and adding new items of that particular type. In some cases like images you should be able to decide what variant of image you're including (thumbnail, greyscale version, original). The same dialog can then also be used in situations where we now use the chooser
Workspaces are used for three different scenarios:
Configurable trigger system, a bit like generic version of OpenPSA smart campaigns editor can be used for things like:
Zendesk has a pretty good example of such system where you can for instance automatically publish Qaikus when particular types of tickets are entered into the system.
Semantics should be utilized by the system. This means publishing pages with content being machine-readable through RDFa (or Microdata, should tha prove to be popular). The semantics used should come from MdgSchema ontologies.
We also need to understand externally linked content. If you link to an event somewhere the system should be able to notify you if that event is rescheduled or cancelled.
In addition to semantics rising from MgdSchema ontologies and their relations we could use semantic lifting to understand meaning of rich text content. HTML entered via editors should in general be treated as structured data to be managed, not just blobs of "content"
A planning session would be nice. The coming weeks are quite tough, but this is a welcome brake to many projects :) This weekend I'm in Hki, next weekend in Hanko and after that in the Dominican Republic :)
I guess tomorrow is too soon @bergie @adrenalin ?
This could be useful: http://mozillalabs.com/blog/2010/01/t...
Sure it's just for Firefox/mozilla, but it could be really sweet and powerful? I'm aware that we have to make everything cross browser and accessible, but still this could add the user experience to another level.
@Jemiweb I've thought about it a bit, but seems XUL wouldn't give us many advantages over a more cross-browser HTML5 approach. A Firefox add-on might however be useful for recognizing Midgard sites and performing things like autologin and faster access to some functionalities.
@bergie jetpack is not XUL it is a Mozilla Labs project that enables anyone who knows HTML, CSS, and JavaScript to create powerful Firefox add-ons.
So basically with slight adjustments, we might get 2 flies with 1 hit? Probably not, but let's be optimistic :)
We'll have the first UI sketching session with @adrenalin on Jan 28th. Anybody else interested in participating? I believe this will be a chance to build a completely new kind of CMS.
@bergie About naming: I think Midgard CMS fits in quite nicely with Midgard MVC and Midgard Core (and others). All of them belong to same software family but operate on very different architectural level. Furthermore, due to the fact that CMS is written on Midgard MVC, the full name of it should probably be something like 'Midgard CMS for Midgard MVC' with component name 'midgardmvc_cms' but of course in practice 'Midgard CMS' would be the name to be used in every-day conversations :-)
Some notes about the different views we'll need:
First login:
Profile page:
Regular Midgard page (including the front page):
Note: we should have a sensible default template shipped with Midgard. Something that looks nice, can be customized via CSS and has all the basics like navigation
Activities page:
Manage views page:
Manage view:
Developer guide page:
Copyright Rohea Oy 2010 | Mobile version | Feedback | API | Terms of Service | Applications and tools