search

paulrouget / dzslides

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.
http://paulrouget.com/dzslides
932 stars 254 forks source link

CSS Themes (Outline and Notes mode?) #32

Open reagle opened 12 years ago

reagle commented 12 years ago

Now that pandoc supports the dzslide output format, I'm hoping to transition from landslide->HTML5Slides to pandoc->DZSlides. One thing I miss in DZSlides is a table of content (pop up with slides titles) and "view all" (view as a complete web page) -- these were both done well in slidy.

paulrouget commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

I think we're looking at :

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 commented 12 years ago

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 :

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

Salut les francais.

So this pull request (https://github.com/paulrouget/dzslides/pull/48) adds support for view mode. I think it's what @firewalkwizme wants.

reagle commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 11 years ago

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

hsablonniere commented 11 years ago

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 commented 11 years ago

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 commented 11 years ago

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">

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

hsablonniere commented 11 years ago

BTW I have a lot of problems to solve :