Re: SUMMARY OF: How could total separation of content (xhtml/xml) and presentation (CSS) be achieved with the Bitflux Editor (or Mozile)?

Hi Again (finally...)

On 14.3.2005 21:49 Uhr, Simon Rönnqvist wrote:
> On Mar 4, 2005, at 05:05, Christian Stocker wrote:
>> On Fri, 4 Mar 2005, Simon Rönnqvist wrote:
>>
>>>    Hi!
>>>
>>> * * * BACKGROUND * * *
>>> For my thesis work I'm looking for a CMS along with a WYSIWYG that
>>> would support separation of content from presentation (CSS) to the best
>>> possible degree. BxCMS and Lenya are my candidates for the CMS but at
>>> least the Bitflux Editor seems to be a clear winner when it comes to
>>> the WYSIWYG-editor. (Or would even Mozile be good for the job?)
>>> Therefore I'd like to evaluate the Bitflux Editor's (and possibly
>>> Mozile's) abilities for separation of content and presentation. If
>>> you'd be very interested in this evaluation I could consider writing
>>> the thesis in English, otherwise I might stick to my mother's thounge
>>> Swedish. :-) Do you have any comments or thoughts about these things?
>>>
>>> * * * TO THE POINT * * *
>>> One thing which I at this point think seems to be missing from the
>>> Bitflux Editor (and Mozile) is an ability to edit external
>>> CSS-properties. :-) It'd be great if one for example could give an
>>> image a specific ID and then in the separate CSS float that element
>>> right or left.
> 
> 
>   ...or specify based on context (and including classes/ID:s) which
> elements should be floated.
> I.e. one could in a pop-up menu select float peer elements right. Which
> could produce something like "div#main img { float: right; }".
> 
> It seems like RelaxNGEnhancement (OnNew Callback&Add Menu entry) in BXE
> 2.0 could be of use.
> http://wiki.bitfluxeditor.org/BXE_2.0/RelaxNGEnhancement
> Either one could make a function producing the CSS or one could have a
> popup URL connect to a serverside script producing the CSS.
> 
> It'd be nice if one could have the changes in the CSS updated instantly
> in the editor without saving it onto the server. So I guess that the
> function would be a better solution, but then we'd need to be able to
> have BXE submit CSS and XHTML separately to the CMS.

Agreed. With BXE 2.0 you have a lot more possibilities for implementing
what you want. Like the new callbacks. And since it's XSLT based, seeing
the changes before having saved it to the server is also a given.

> Another solution would be to have BXE use inline CSS and then have a
> serverside CSS-separator, but this wouldn't allow the system to produce
> a CSS-selector like "div#main img". (An advantage of this method though
> would be that I'd work with other editors than BXE too.)

One of the main goals of BXE was not to rely on any server side
components. Of course, it needs a server for some features
(loading/saving, the new server clipboard in 2.0, etc..), but basically
it doesn't need one.

> 
>>> To my present understanding (correct me if I'm wrong)
>>> I'd have to specify a class i.e. called "left" or "right", which
>>> semantically wouldn't make any sense. Then I might just as well specify
>>> a style="float: ..." attribute instead, and then the separation of
>>> content and style would have failed at that point. (One could of course
>>> argue wether there's a need for total separation or not, but let's say
>>> there is. This img floating is just an example.)
> 
> 
>   So in this example I wouldn't like to use inline styles, but that
> wouldn't be any worse than assigning styles called "left" or "right".
> What I'd like to have would be good semantics and total separation of
> content and style.

It would be worse, IMHO ;) if you have styles called left/right you
easily can change them for further refinement. With inline styles,
that's not possible easily.

> The CSS produced could look like:
> #picture1, #picture3 { float: right; }
> #picture2, #picture4 { float: left; }
> #picture4 { border: 1px solid red;
>                     margin-left: 5px; } /* Maybe one could also allow
> the user to assign an own combination of properties to an element or
> predefined set of properties (like when applying CSS-classes). */
> #picture3 { border: '$width'px solid black; }  /* Would it also be
> useful to make some variables in the CSS definable by the user? */
> 
> We should also think of what kind of functionality could be useful. I've
> personally been thinking of many different kinds of functionality but
> what I think seems most sensible would be to let the designer define
> what selectors could be used by using the "Add Menu entry"
> functionality. So each allowed selector concerning an element would have
> it's own menu entry. One would also have to define some kind of variable
> for ID and class, since they should be able to be defined by the user.

Ok, basically i have to say, that BXE's main goal was not being an XHTML
editor only. Therefore all this CSS related stuff is missing (as you
also can't for exaple change the color of text or sth like that) and I
have no plans adding that. It's main goal was (and still is ;) ) XML
editing for seperation of Content and Design. And for me, that means,
that the content editor is not allowed to assign width and height
parameters and making his own CSS elements ;) But I see your point
nevertheless and such functionality could indeed be integrated into BXE.
I just wanted to say, that's not on my top-priority. If someone else
does it, even better ;)

Back to the technical details:

The best way to implement this is as Plugin (there are some plugins in
BXE 2.0), so it can be developed really independently and doesn't make
BXE even bigger (all more specialized features are going into plugins
nowadays)

Then why not just making a CSS editor (with some kind of popup), where I
can choose my properties and assign them to an element. It's certainly
not that easy to write a CSS editor in JS and HTML, but possible. With
this approach the only new menu entry I get would be "Edit CSS", then I
get a popup and can do whatever I want. Which CSS properties are allowed
for the enduser has to be configured of course somewhere. And if you
don't want inline styles (understandable), you'd have to program somehow
a CSS generator, which writes the CSS-file and inserts an ID to the
element. Saving this CSS on the server shouldn't be a big problem
either, you just overwrite the onsave handler and send the CSS along the
XML.

Theoretically it's all possible, but I can't estimate the amount of work
needed for that.

Hope that helps a little. But we can ofcourse discuss that further ;)

chregu



> 
> Anyway for some more ideas on different kinds of management system
> functionality for CSS look here:
> http://digital-web.com/articles/integrating_css_with_cms/
> 
> 
> The rest of this mail is not really so interesting anymore:
> 
>>> Basically what I'd be looking for is an ability to assign ID:s and
>>> classes to elements and then to make certain predefined css-properties
>>> apply to the ID:s or classes of choise. One could build a separate
>>> CSS-editor which could be used with any WYSIWYG xhtml/xml editor that
>>> would allow the user to define class and id attributes for the
>>> elements. But a better idea would be to integrate the CSS-editor with
>>> the WYSIWYG so that all style related data (CSS) would automatically be
>>> separated from the markup (html/xml) without the user even having to
>>> know about it.
>>>
>>> More on this here:
>>> http://digital-web.com/articles/integrating_css_with_cms/comments/
>>> #comment835
>>>
>>> So to begin with I guess being able to assign class and ID attributes
>>> to different elements would get me quite far. To my understanding this
>>> is at least possible in Bitflux Editor 2.0, isn't it? How about Bitflux
>>> Editor 1.0 or even Mozile? (I'd prefer being able to specify attributes
>>> directly to elements such as img-tags, extra span and div-tags would do
>>> the job but in a rather ugly way.)
> 
> 
>   The answer for this is that you can assign ID:s in both BXE 1 and 2
> but not in Mozile.
> Sorry for asking, but I just kind of missed that functionality in the
> beginning... :-)
> 
>>> Do btw. all or any of these editors have a possibility to give the user
>>> a set of choises of classes (or other attributes)?
>>> I.e. <div class="floatLeft">, <div class="floatRight"> and so on... and
>>> not just tags without attributes.
> 
> 
>   The answer is yes for all of them.
> But this functinality isn't of much use
> 
>>>    regards, Simon
>>>

-- 
christian stocker | Bitflux GmbH | schoeneggstrasse 5 | ch-8004 zurich
phone +41 1 240 56 70 | mobile +41 76 561 88 60  | fax +41 1 240 56 71
http://www.bitflux.ch  |  [email protected]  |  gnupg-keyid 0x5CE1DECB
-- 
bx-editor-users mailing list
[email protected]
http://lists.bitflux.ch/cgi-bin/listinfo/bx-editor-users