paulrouget/dzslides

DZSlides is a one-file HTML template to build slides in HTML5 and CSS3.

dzslides's Issues

Coherent slide/controller message API

At the moment the way onstage.html and the slides communicated isn't very clear. It would be good if we had a clear list of the allowed messages, what they do and what they're expected to send back (if anything).

I'd suggest a slight modification:

Slide->Controller:
givePos -> send current position e.g. "slideNumber.bulletNumber" or [slideNumber,bulletNumber] e.g. "5.2" or [5,2]
slideChange -> fired when the slide changes, gives the number of the new slide
register -> as current

Controller->Slide:
forward() -> advance slides one step
back() -> retreat slides one step
setSlide(slideNumber, bulletNumber (optional)) - set slide position, if no bulletNumber given set to beginning of slide?
register() -> as current
poll() -> used to fire givePos from a slide
toggleContent() -> as before

What other features/modifications would be good?

Fails on iPhone 3g

1. open http://paulrouget.com/dzslides/examples/readme/slides.html#1
2. First page ok
3. No way to advance to the next slide.

In overview mode page does not scroll with cursor

In overview mode, the keys can be used to move the selected slide (in red) downwards, but you fall off the bottom of the screen and the page doesn't scroll.

Can't add Google Maps to Slide

Hi!

Is there a way to add Google Maps to a slide?

I had loaded a map inside a section, but I can't make it visible.

Thanks.

CSS Themes (Outline and Notes mode?)

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.

Make sure DZSlides is cross-browsers.

We prefer graceful degradation over complex code.

• Firefox >= 5
• Chrome >= 12
• IE >= 9
• Opera >= 11.50
• Safari >= 5
• iPhone (v???)
• Android 2.2 (native browser + Firefox >= 5)

Dzslides has stopped working on android

I upgraded an old presentation to the latest dzslides recently and it stopped working on my phone (A samsung galaxy S2 with ginerbread on the default browser, firefox mobile is fine). To make sure I redownloaded template.html and again it just appears as a black screen. The presentation that works was from a time when the dzslides source comment read "DZSlides CORE 2.0b1".

Can anyone confirm this?

Using DZSlides with a presentation clicker?

Does anyone have any experience of using DZSlides with a presentation clicker? Since one advances the slides with key presses rather than mouse clicks, I wonder if it would work, or if it could be made to work?

Make sure that the video controls are available if autoplay=0

We need to activate the controls for all the video:

$$("video").forEach(function(v){v.controls = true})

And we will need to update the CSS for the example video (z-index:-1 will make the video un-clickable).

Markdow or textile support

I found this gist and it reminded me that HTML has been slowing down my productivity when I write some DZslide presentation.

https://gist.github.com/1343518

So what about Markdown support and or Textile?

Maybe it's author responsability to do that, maybe not...

remove the extra title on top of embedder

… it's redundant.

Pressing `f` in fullscreen mode should leave the fullscreen mode

Integrate with Christian Heilmann's version?

Christian heilmann has done some very cool upgrade work on DZ Slides:

http://icant.co.uk/talks/jsconfeu2011/

• Slide selection before presentation
• Progress bar

Although his version breaks compatibility with the shells (perhaps he found a way for that too).

He mentions that his version is CC I think. But perhaps he could be asked to re-introduce some elements as public domain?

FullScreen button non-op if embedder.html is served from a file:// URL

onstage present does not wait for future to be loaded

In the onstage shell, once present is loaded, we try to REGISTER it.
Once a shell is REGISTERED, it fires a CURSOR message.
When the CURSOR message from present is received, we try to post a message to future which isn't always loaded yet.

Incremental lists do not work between onstage and popup

Expected:
When clicking through incremental lists via onstage the popup (main presentation) will follow along going down the list

Actual:
Incremental lists work on onstage and popup independently but not together.

Theory:
The decimal part for the slide is not being pushed into the popup (e.g. #2.4)

onstage.html : this.parentElement is undefined (line 237) (with Firefox 7 & ubuntu)

I can't use onstage.html with firefox 7 and ubuntu 11.04

Firebug tell this :

this.parentElement is undefined
onload()onstage.html (line 237)
[Break On This Error] var id = this.parentElement.id;
onstage.html (line 237)
this.parentElement is undefined
[Break On This Error] var id = this.parentElement.id;

But it works with Chromium.

Making better use of <h2> and documenting default style

This is related to #20 (documentation), but I was toying with moving to the newer version of dzslides with its implied Takahashi style of slides with large text. One of the things I noted is that an h2 slide looks just like an h1. It'd be nice if each heading served a particular stylistic purpose. Right now it seems like:

• h1: is horizontally/vertically centered (no room for content)
• h2: identical to 1
• h3: is a more traditional header at the top of a slide, permitting content.
• blockquote: is white text on a black background
• figure/img/caption: is full slide and superimposed on top of the image

Maybe an h2 could be h/v centered, but white text on a pretty blue background? (I thought of this given the beautiful transition of background color in reveal-js afer slide 7.)
We could even make use of h{4..6} elements.

Hence it'd be nice to have, and document, some key default slides types.

safari bind event problem

Hi !

I had some problems using dzslides with Safari (and thus phantomjs). The problem is with the bindevent call.

I fixed it with this :

function init() {
    Dz.init();
    window.onkeydown = Dz.onkeydown.bind(Dz);
    window.onresize = Dz.onresize.bind(Dz);
    window.onhashchange = Dz.onhashchange.bind(Dz);
    window.onmessage = Dz.onmessage.bind(Dz);
}

window.onload = init;

Hope this helps. (Tell me if you want a pull request)

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Instructions for using embedder full screen

If I understand correctly, embedder.html should be embedded into a website using iframe element.

This gives us a 3-level structure:

-> 1. MAIN WEBSITE
---> 1. 1. IFRAME (embedder)
-----> 1. 1. 1. IFRAME (slides)
-----> 1. 1. 2. CONTROLS (back, forward, full screen)

Now, when the user clicks full screen button, nothing happens, because the IFRAME with slides (1.1.1.) gets full screen inside IFRAME with embedder (1.1.), which normally has a fixed width and height.

Once allowfullscreen attributes (allowfullscreen mozallowfullscreen webkitallowfullscreen) are added to the IFRAME with embedder (1.1.), full screen button starts behaving as expected.

Should we add a short notice to the README file about using the full screen mode with embedder?

Integrate and control third party videos

As of today you can integrate videos from third party websites like YouTube or Vimeo using their HTML5 embedding iframe. The flash version won't work properly (see #87 for more details).

We need a way to have same behaviour as classic direct video tag usage :

• autoplay on slide
• no autoplay with the url argument
• ...

This could be useful : http://johndyer.name/html5-video-wrapper-for-youtube-and-vimeo-api-mediaelement-js/

Can't see embedded youtube videos when using Firefox

There is an embedded youtube video in the following slide:

http://reagle.org/joseph/2012/mcs/dzslides/embedder.html#../talks/220-race-new-media.html

I can see it in Chrome 18.0.1025.162-r131933 but not Firefox 11.0+build1-0ubuntu4, in the latter it is just a black rectangle with no image or controls. Is this a DZSlides issue, or perhaps I need to configure FF differently?

The sliding animation doesn't crop content on slides edges

Need documentation

Text pixilation using scale?

I've run into a very strange bug, which might actually just be a webkit thing.

When I embed a video whenever there is scaling on text which should be smooth, the text is pixelated at ratios over 1.0. It appears that if the video is a link, it only changes the presentation after the movie has been seen. This can be observed in the template at a relatively large size, go to the video, let it load, and then go to any other slide (before or after) and note the text pixelation.

I've tried chrome, safari, and firefox on os x lion. It happens in chrome. I tried safari, but it can't play webm (in a file I generated myself with a different codec I saw the same behavior), but it appears to not happen in firefox.

Has anyone found a work around for this?

Shells onstage is not incremental compatible

Hey :-),

The shell “onstage” does not well-support incremental slides when updating slides' indexes (#slideidx & #nextslideidx). Instead of update to 2.1 for next slide, it will update to 3.

Thanks.

Testresults: Ubuntu Lucid (10.04 x86_64)

First of all let me say I really like this project. At a first glance it looks quite simple and most of all: versatile
Here are my testruns on various browsers on a Linux machine

Chrome 11.0.696.68:

• smooth and nice
• totally functional

Chromium 13.0.750.0 (83303)

• smooth and nice
• totally functional

Firefox 4.0.1 / Aurora 5.0a2 (2011-05-12) / Nightly 6.0a1 (2011-05-12)

• smooth and nice
• totally functional

Opera 11.10

• You're able to advance/go back starting from the first slide to the second and then it stops
• missing the popup icon next to the slide number indicator
• missing the forward/back buttons

Question(s):

• does the popout button always have to show the first slide or should it show the slide you're currently looking at?
• does the video keep playing when advancing to the next slide? If so, can it be stopped automatically?

Support Opera

From @mstalfoort:

Opera 11.10 && 11.50

• missing the popup icon and forward/back buttons
• "Introduction to DZSlides" shows it contains 8 slides instead of 19 (paul: FIXED)

It looks like when a video is used within the slides, Opera doesn't handle it quite well.

Implement a nodejs-backend for websockets support

It would be interesting to synchronize slides through WebSockets. A master would control any instances of the presentation (slaves).

I did that before: http://paulrouget.com/e/paulatparisweb/ (sorry, in french).

Adding some notes on example

The example lacks some notes in <details> tag.

I can take care of it this evening.

Slide notes not showing up in onstage.html

There's a tiny bug in onstage.html that keeps it from showing the 'details'/notes for slides. I found the problem, and fixed it:

Line 221 (approx)

Please remove/alter this if statement, as it is currently stopping the other if-statements from being run properly:

  if (argv[0] === "CURSOR" && argc === 2) {

Don't forget to remove the closing bracket too.

iPad 2 demo page crash

When I try to open http://paulrouget.com/dzslides/ my Safari on iPad crashes.

Details does not take text content

Details is probably not the right element to hide speaker notes. This way of using the element is not like an "accordion" in any way.

A plain old div with a class of "notes" should probably be better.

Not working in master.html : navigation, next slide and navigation

I get ::

Current slide: n/a of n/a

Next slide n/a of n/a

And the next/previous buttons don't work. I've tried on the example slides.

Using Firefox 4.01 from ubuntu PPA and Chromium 11.0.696.68 (84545) Ubuntu 10.10

Onstage usage of view mode for slide selection

The soon to be view mode could be a good way to select slide in the onstage shell.

See #48 for more details.

advancing slides by click and/or space

At the moment, there is only one way to advance slides: using the right arrow key. While it also works with slide advancer hardware, when you don’t have such a thing it’s a bit hard to use.

As a solution, it should be possible to advance slides with space and also via mouse click on the slide (except when it’s a link that is clicked).

incremental item are not reset if HOME is pressed

STR:

1. go to the list page, press right until you reach the next slide
2. press home
3. press right until you reach the list page

Result: all the incremental items are visible, and they should not be.

Feature request: Add unobtrusive progressbar

it's very easy to do (even I could do it, based on Chris Heilman's version). You don't really notice it, but it's there for those who are bored and want to know how much longer the presentation is going to take ;-)

it's about 3 lines of code, a div, and 3 lines of css.

Incremental rendering

DZSlides appears to be missing a "build" or "incremental" feature to render things incrementally (e.g., bullets). Is this true? If so, do you know if there's any plans for this?

Implement a Shell to control slides from a mobile UI

... but we need a SSE or ws:// mechanism first (issue #21).

master.html doesn't use addEventListener (doesn't work in Chrome)

Implement a fullscreen-mode

Some browsers have a Fullscreen API

pandoc --smart quotes and the HTML5 q element in DZslides

I just upgraded to the latest git version of pandoc and note one bit of stylistic breakage. pandoc --smart now renders HTML quotations as elements. Pandoc's dzslides default template.html render as a inline-block element, which leads to some visual breakage.

Separate script and style from slides

Hi,

I believe that separating slides into slides.html, slides.css and slides.js would be a good approach.

Use case: I use the template for a presentation. Upstream some bugs get fixed. I have to manually port my slides to the new template to have both the new CSS and JS with my old slides (or vice-versa).

By having it in separeted files, I would only have to update/download the new files and copy the css and js into the folder where my presentation is.

cons: 2 more connections to the server
pros: way easier to read presentation file and css/js upgrade method

it is an easy change but before that, what do you think?

Video and audio troubles with onstage shell

If there's a video (or audio) element in a presentation, and onstage.html is used, then the audio starts coming out as soon as the video comes on the "future" iframe - whilst the presenter is still talking through the previous slide!

Also because of the communication lag between "present" and "remote" a horrible echo appears when the video slide is reached.

I would suggest always having video/audio muted in "future" and having "present" muted when "remote" exists.

Currently all messaging is done through postMessage, so either something like a "MUTE" and "UNMUTE"message needs adding (if so this belongs in issue #17) or we can use javascript to break into the iframe and turn the audio off from onstage.html (but that seems slightly like taking a hammer to the problem!)

Master.html not working properly

Hello,

I watched the DZSlide video you made was impressed by the master.html web page.
I downloaded your code, began a presentation and tried to see how it looks like using master.html. It didn't work.
I tried to use it on your own examples (tmt and html5) and it didn't work neither.

Actually, the navigation buttons don't work, and I guess it explains why it display twice the same slide. I am using Firefox 4.0.1 in ubuntu.

DZSlides embedding broken in Chrome

DZSlides embedding broken in Chrome 15.0.874.120.

fyi: pandoc's (brittle?) use of dzslides-core

I asked John MacFarlane about somehow indicating which version of dzslides he was using within Pandoc, or making it easier to update dzslides on my own. He responded as such:

---

I've now modified things a bit. Instead of including the core bits of
template.html in the default.dzslides template, I now just include
a variable dzslides-core. Pandoc now has a dzslides directory,
containing the unaltered template.html from dzslides, and it will
read this and extract the "core" part whenever you create a dzslides
document.

Thus, if you want to use a later version of template.html,
just drop it in ~/.pandoc/dzslides.

This might be a bit fragile though - it assumes that
the dzslides-core part of template.html will have a
similar starting comment and go til the end of file.

One-file paradigm and external core

Here is the situation :

• Some projects use DZSlides as a third party tool to provide slides (http://johnmacfarlane.net/pandoc, http://txt2tags.org...)
• Some people use DZSlides for a collection of presentations (teachers, speakers...). They need to apply DRY principle.
• The shells and the template share common/duplicate code.
• ...

As we discussed it in #52, the one-file paradigm doesn't always fit with these different cases.

What we could/should provide :

• The classic one-file template.html (like the current one)
• The JS core as a standalone file
• The CSS core as a standalone file
• The HTML core skeleton (with progress bar...)
• Other examples that demonstrate different styles and demo of third party integration like with SVG charts, code highlighting...
• A contribution guide/doc

Questions :

How does someone contribute to DZSlides core? Which files are the source?

We can use the 3 standalone files as source and build the different examples (template.html and others) with a simple script (bash, makefile, node...).

What would be the source tree and the branch repartition?

• The 3 core files should be available through the gh-pages like a CDN.
• The master branch could be something like that :

├── dist (only on gh-pages branch)
│   ├── dzslides-min.css
│   ├── dzslides-min.html
│   └── dzslides-min.js
├── gallery
│   ├── highlighted-code.html
│   ├── interactive-datagrid.html
│   └── svg-chart.html
├── shells
│   ├── embedder.html
│   └── onstage.html
├── src
│   ├── dzslides.css
│   ├── dzslides.html
│   └── dzslides.js
├── README.md
└── template.html

Pros

1. Simple usage for simple users (template.html as before) and for power users (standalone files).
2. Better reuse of code for collections of slides or third party project with the standalone core (minified or not) files.
3. Possibility to provide different kinds of presentations. Different styles, different use case and third party library integration.
4. Possibility to detect impact of core modifications on different kinds of presentations.
5. Code reuse between core and shells would be easier. I still don't know how to handle that.

Cons

1. It introduces a small compilation phase for core contributors. I'm not sure it is really a problem.
2. I'm sure there's more...

How could we reuse duplicate code from shells and template.html?

Still thinking...

Request for comment!

Let me know all your impressions on that subject...