CSS Themes (Outline and Notes mode?)

[paulrouget]

CSS Themes (Outline and Notes mode?)

[paulrouget]

Yeah, we need to do that. Chris Heilmann has been hacking dzslides to make that work: http://icant.co.uk/talks/jsconfeu2011/

We should take a look at that.

[hsablonniere]

I really like what Chris Heilmann has done.

For my Web Developement courses, I have two documents with the same markup but one with DZSlides and the other one with a more classical website display. Yeah I know :-(

What would be great is a button and/or keyboard shortcuts to go from one mode to the other and vice versa. We should also have a URL parameter to force one display mode. Shells would use this.

Table of content is also a need.

[paulrouget]

How much code would we need to have a non-presentation mode? If this is too much, I'd prefer to keep this in a shell.

[hsablonniere]

I think we're looking at :

• a new function that will "undo" what init does and change stylesheet
• button and/or keyboard shortcuts for toggle mode
• handle URL param for mode
• maybe a different default content
• function to initialize table of content

I'm not sure size is a real problem. Code could be minfied.

Regarding shell or not shell I'm still hesitating. For my personnal scenario, I would prefer this feature to be in template.html. Not sure it would be the same for everyone.

[firewalkwizme]

I made a study last june about the accessibility of the existing Web Slides Systems (S5, SLidy, DOMSlides).
I used DZSLides for my presentation because this system has a pretty good level of accessibility and represents a good solution for the future to me.
Here are the slides (in french) : http://firewalkwizme.free.fr/a11y_xp/prez-yann-def2.html

I think what is missing is :

• the toggle mode
• an overview of the slides (table of content)
• a footer that remains all along the presentation

One more thing : to find an authoring tool for the DZSlides
An authoring tool that can be easily handled by a person who doesn't know HTML ; always in an aim of providing an accessible web presentation easily because for the moment neither SlideShare is accessible nor the pdf/ppt files generally uploaded on the internet.
I began testing some things with BlueGriffon.
To be continued...

[hsablonniere]

Really nice presentation ! Lucky to be french after all.

What do you mean by a toggle mode ?

TOC would be really nice.

I'm not so sure about footer. People can add one and change the css.

About authoring, I proposed markdown in #46. Do you think it would be enough ? I think it would be a great way to simplify HTML input when writing slides. If we go that way, we'll need some kind of repo to provide a collection of templates to ease non tech writers.

[firewalkwizme]

Thank you !

I mean, by toggle mode, a function that turns off styles and script in order to have a linear/outlined document.
It is useful if you want to print it (or transform in pdf) and you can display some comments that are not shown in the presentation.
If you turn off the CSS in my presentation, you will see what i mean.

Concerning the footer, it can be practical to see the progression of the presentation (see what Chris Heilmann does with the tiny FF logo)

Concerning an authoring tool, markdown may be a begining but limited.

I think a wysiwyg would be easier and more sexy for people (no geek) to use DZSlides instead of Powerpoint.

[hsablonniere]

I also need a toggle mode, for now, I'm providing my students 2 identical HTML files with 2 different CSS for my presentations. And the printable one contains more details as you said it. It's a brilliant way to "reinvent" presentation and solve the corporate problem : "every document is a PPT". But my temporary solution is crap. I didn't really have time to solve this problem properly. I really wish this feature.

About progression I won't really use it but I agree it's a need. We'll have to think about how to do it.

Do you have knowledge and skills to build a WYSIWYG authoring tool. If you do, go on experimenting your ideas ;-) I'm looking forward to it.

[firewalkwizme]

Whoo no, I have no skills to build such a tool.

Some people have already done a great job to build a web pages editor like Daniel Glazman and his BlueGriffon.

My idea is to use BlueGriffon and provide some snippets that people can drag and drop into a blank page in order to author their presentation.

See this principle on this picture : http://firewalkwizme.free.fr/a11y_xp/img/BG-snippets.png

See what i mean ?

[paulrouget]

Salut les francais.

So this pull request (#48) adds support for view mode. I think it's what @firewalkwizme wants.

[reagle]

On Wednesday, November 30, 2011, Paul Rouget wrote:

So this pull request (pull 48) adds support for view mode. I think it's what @firewalkwizme wants.

This appears to be a thumbnail sort of view. What has been implemented would be called "handout" view in Impress, or "slide sorter" view in PP. This is great, though I wonder if ESC is the best shortcut as it might conflict with other things happening in the browser?

In any case, this is a bit different from my request for an "outline" (w/ notes) view; you can see an example at http://www.w3.org/Talks/Tools/Slidy2/ and click "A" to see an example of what I'm saying.

[paulrouget]

In any case, this is a bit different from my request for an "outline" (w/ notes) view; you can see an example at http://www.w3.org/Talks/Tools/Slidy2/ and click "A" to see an example of what I'm saying.

Isn't that just a matter of size?

[reagle]

On Wednesday, November 30, 2011, Paul Rouget wrote:

In any case, this is a bit different from my request for an "outline" (w/ notes) view; you can see an example at http://www.w3.org/Talks/Tools/Slidy2/ and click "A" to see an example of what I'm saying.

Isn't that just a matter of size?

I suppose you could look at it that way if each slides size was such that its width was 100%. But I am not seeing

content either...?

[hsablonniere]

I join @reagle and disagree with @paulrouget. It's think they are two different features :

• The view mode in PR #48 is here to have a quick overview of the presentation and access easily a specific slide.
• The toggle mode would just replace the "screen" stylesheet by a "paper" one. All <details> would be displayed and opened.

I'm working on the toggle mode and the progress bar. About the sticky footer, I confirm that simple CSS do the trick.

@firewalkwizme You talked about a TOC, is the view mode enough ? In my opinion it is, let me know yours.

@everyone, let me know your thoughts on all that...

[reagle]

I note that issue is closed, but I don't know what the RFE label means and while I do see the diffs for overview mode, I can't find anything for this notes mode...?

[reagle]

Just wanted to ping this issue. I'm starting to prepare for the Fall semester and I'm wondering if I'll be able to get away with a single presentation with a slide and handout/notes view, or whether I'll have to create two sets of documents as @firewalkwizme describes.

[hsablonniere]

The idea was to finish the documentation and release the v2 before starting work on that. I also need this kind of feature for my Fall semester.

@paulrouget What's the status on documentation et v2 ?

[hsablonniere]

I thought more about this issue and screen/paper mode is too strict (or not enough).

It would be better to have as many CSS themes as you want and a keyboard shortcut to loop through them.

In your case you would have the presentation theme and the handout/notes theme.

[reagle]

@hsablonniere that is a nice idea, though I'd like a paper/handout mode over nothing at all which we have presently :)

[hsablonniere]

I built it for my courses. I'm able to cycle through theme. I have two : paper mode and presentation mode.

It's a first try and I'm seeing wrong parts and good ideas. I'll try to refine the concept and integrate it when I have some time...

[reagle]

On 10/04/2012 04:34 PM, Hubert SABLONNIÈRE wrote:

I built it for my courses. I'm able to cycle through theme. I have two :
paper mode and presentation mode.

It's a first try and I'm seeing wrong parts and good ideas. I'll try to
refine the concept and integrate it when I have some time...

Look forward to it, and I'd be curious to have a look whenever you're
willing.

[hsablonniere]

You can have a look here : http://hsablonniere.github.com/markleft/prezas/javascript-101.html Press T to cycle throught the themes (there's just 2).

It's very "custom and for my own usage" work for now. The CSS are a bit ugly since I'm always in a hurry. The temporary syntax I chose looks like that :

<link href="../css/bootstrap.min.css" rel="stylesheet" data-dztheme="article">
<link href="../css/bootstrap-responsive.min.css" rel="stylesheet" data-dztheme="article">
<link href="../css/hljs-github.css" rel="stylesheet">
<link href="../css/theme-2012.css" rel="stylesheet">
<link href="../css/theme-2012-common.css" rel="stylesheet" data-dztheme="article">
<link href="../css/theme-2012-article.css" rel="stylesheet" data-dztheme="article">
<link href="../css/theme-2012-presentation.css" rel="alternate stylesheet" data-dztheme="presentation">
<link href="../css/javascript-101.css" rel="alternate stylesheet" data-dztheme="presentation">

• I used a data attribute to group several styles as a theme.
• Styles without data-dztheme are always active.
• alternate stylesheet won't be active on load.
• I added a new URL param to "save" theme when refresh.
• I don't think inline styles would work with that (yet).

This feature maybe the time to introduce plugins or not...

[hsablonniere]

BTW I have a lot of problems to solve :

• Touch events prevent scroll on touch device (article theme)
• Keyboad events prevent scroll on normal device (article theme)
• Maybe the cursor hash in the URL could be used in the article theme