Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Themes (Outline and Notes mode?) #32

Open
reagle opened this issue Oct 3, 2011 · 23 comments
Open

CSS Themes (Outline and Notes mode?) #32

reagle opened this issue Oct 3, 2011 · 23 comments
Labels

Comments

@reagle
Copy link

reagle commented Oct 3, 2011

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
Copy link
Owner

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
Copy link
Collaborator

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
Copy link
Owner

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
Copy link
Collaborator

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
Copy link

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
Copy link
Collaborator

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
Copy link

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
Copy link
Collaborator

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
Copy link

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
Copy link
Owner

Salut les francais.

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

@reagle
Copy link
Author

reagle commented Nov 30, 2011

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
Copy link
Owner

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
Copy link
Author

reagle commented Nov 30, 2011

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
Copy link
Collaborator

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

  • The view mode in PR Add view mode #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
Copy link
Author

reagle commented May 3, 2012

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
Copy link
Author

reagle commented Jun 15, 2012

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
Copy link
Collaborator

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
Copy link
Collaborator

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
Copy link
Author

reagle commented Oct 4, 2012

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

@hsablonniere
Copy link
Collaborator

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
Copy link
Author

reagle commented Oct 4, 2012

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
Copy link
Collaborator

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants