search

berteh / mindslide

View Freeplane mindmap as an HTML presentation (aka freemind to powerpoint slideshow)
http://berteh.github.io/mindslide/
60 stars 19 forks source link

modularity and design flexibility #23

Open nnako opened 8 years ago

nnako commented 8 years ago

Hi,

I love the idea of auto-generation of presentations!!! :-)

This is no issue but a question.

I was wondering if mindslide provides some kind of interface for adding functionality in a modular way. As I am no HTML, CSS, JS or XSLT guru, I spent the whole day trying to understand how the XSLT operates on the XML (MM) to generate CSS-styled HTML the way mindslide does it. And I kind of got a big step forward. Now, I'd like to add some features and might need some help, some pointers:

font size in the reveal.js framework there are loads of CSS files and definitions. As I see it, these are partly overwritten by mindslide's own settings (appearing in the HTML head). I must confess that I got lost trying to figure out a clear way to set a default font size / style and margins. As I don't know the structure and scopes of all the settings. Is there some documentation available about the best way to set these settings for a customized own presentation?

text alignment currently, headings, first items and items are displayed horizontally and vertically centered (in a block style). So while clicking through the slides, the contents "jump" depending on the amount of textual content within the respective mindmap nodes. Where do I have to start looking in order to e.g. fix the text alignment on to the left upper corner of the screen (there every heading text and subsequent content would start, possibly leaving the right bottom parts more or less empty).

picture handling currently, all pictures are placed at the bottom of a respective section slide. Which surely makes sense for many cases. But I'd like to change pictures with every slide, e.g. putting its text portion on the left side and a fitting picture on the right side of the slide. This would make explanation oriented slides much easier to apply. For this new slide style, I thought of adding a new attribute to the mode:"slide" template, after the title slide and the TOC slide are processed, for nodes on the 2nd level posessing the new attribute. And there change the processing of the topic's grand child nodes so that each topic's child has a child which is a distinct picture. Would this be a good place to start?

frames following the idea of a flexible slide design, I am looking for a way to specify "frames" in which the different parts of the mindmap could automatically be transferred (each with their specific design settings). Practically, I am thinking of a slide layout which has three frames. one big frame on the right side (e.g. holding a picture) and two small frames on top and bottom of the left slide side holding a summary text and some bullet points. Where could I start in order to find a way to realize frames like this?

Hope to hear from you soon.

Thanks.

berteh commented 8 years ago

Hello @nnako,

Thanks for your detailed review and suggestions. It will take me some days to think and comeback on all of these, but some quick thoughts in the meanwhile:

for the layout and design make sure to read the doc of reveal.js, in particular the section on theming. It includes as well many features I haven't integrated in mindslide yet (like stretching elements, animations, slide attributes and many more) https://github.com/hakimel/reveal.js#theming

some existing plugins may be of interest to you: https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware

font size in currently indeed "quickly" hacked in the generated html (120% for first line, 90% for the rest), but I'd prefer a cleaner approach with only external css (as you could easilier tailor a custom css that you like for all your needs and purposes). I just have a problem for external css as it makes packaging/moving the generated slides more difficult. Any idea to have both flexibility and mobility?

text: I use firefox/chrome to (right-click and) "inspect" the source of the elements I want to hack/move... and this quickly leads me to the accurate css class(es) in reveal that define the layout elements I want to change. Some of the elements though are dynamically changed by reveal's javascript.

for frames & pictures maybe we could indeed define 3-4 useful & typical 6 nice "layouts" with a good screenshot, and then implement 1 as default and the others as options per slide and/or per mindmap. I'd suggest to first think the layout of the end-result thoroughly, and then focus on how to code it best. Could you make a quick mockup of the layout(s) you'd need? (this is just to avoid having many new modes popping up for each new layout... but make it more consistent and readable instead, as XSL is quite hard to read upfront).

I'll be back for more answers/discussions in the next days. Great to have you on board!

nnako commented 8 years ago

Hi @berteh,

thanks for your quick reply.

I was thinking about providing an automatic "feature-based usage documentation", first. As I use mindmaps for knowledge management in any field, I also host user documentations for various software projects within my mindmaps. The step from the highly structured information representation within a mindmap into a readable (and enjoyable) usage presentation has always been time-consuming and difficult to maintain. So with reveal.js / mindslide I want to auto-generate these user documentations. I'd like to keep the documentation as modular as possible, concerning feature changes and new features. Please see the picture for a sketch of the imagined end-result.

slide-structure

I think, pictures say much more and clarify much better than lengthy text blocks alone. So, these feature documentations would be focused on pictures. In the near future, I would try to even auto-generate some of these structure pictures or at least produce them in a very quick and effective way (e.g. screen shots while at work with the software to be documented).

Variable (customizable) parts should be handled like this:

The first "summary" slide for the introduced concept already works on my computer (the HTML was hard for me in order to get two simple text blocks on the left and one floating graphic object on the right, though). The "deatiled steps" slides will come soon, I hope. Currently, I fight with XSLT to give me some necessary values and to construct needed mechanisms.

The mindmap structure could be (and currently is) as easy as this:

mindmap-structure

The big question would be to keep a good design within mindslide in order to ensure...

When this kind of guidelines existed, every new slide concept would result in just a block of configuration, some blocks of XSLT,... and could thus be easily versionized and managed. Like within a "development framework" where users can easily add and test their new designs without endangering the main mindslide tool.

What do you think? Don't hurry ;-)