Diap.

based on a lot of cool stuff, including the best of

Reveal.js / Google IO Slides / slides / CSSS / iView Lightview

by Raphaël MARQUES

Toggle the slide counter

You can easily switch on and off the slide counter on the top left corner by adding data-no-slide-counter as an attribute to the section, e.g.

Toggling counter off

<section data-no-slide-counter>

Slide counter off, what else?

The slide counter actually displayed on the top left corner, is not fixed. Slide down ;)

See?

It can be displayed on each of the four corners:

top-left
top-right
bottom-right
bottom-left

But how?

Simple!

<section data-counter-position="bottom-right">

Magic!

The counter is intented to suit your wish. Play with it. Enjoy it ;)

And here come the controls.

On the bottom-right!

And here come the controls. (bis-cuit)

On the top-right!

And here come the controls. (ter-mite)

On the top-left!

And here come the controls. (quater-back)

On the bottom-left!

<section data-controls-position="bottom-left">

Spectacular image!

You can display an image like this:

Even more spectacular image!

Or you can display it like this:

my awesome image :D

All thanks to...

Two data attributes:

data-no-title-caption
- Uses the <img> "title" attribute to (not) display the caption
data-no-bottom-shadow

Which gives

<img title="Awesome!" data-no-title-caption data-no-bottom-shadow>

The Hell Of

An extremely awesome title!

An extremely awesome title

Using simple <figure>:

javascript

<figure>
	<h3>The Hell Of</h3>
	<br/>
	<h1>An extremely awesome title!</h1>
</figure>

Tip: You can edit this one. Just click on it ;)

What about alignment?

You can align every tag using the data-align="value" attribute in every displayable HTML tag you want.

Just replace value by one of these:

center
left
right

When highlighting becomes easier

And it works with HTML / CSS color formatting (e.g. "#something", "red", ...):

<code data-highlighted="green">array = malloc(hyp_sz * sizeof(int***));</code>
<p data-highlighted="blue">Lorem ipsum blah blah</p>
<div data-highlighted="#333333">Wassup y'all?</div>

By default, the highlighted color is rgba(184, 20, 20, 0.8).

Code stuffing

What do you think of that:

c++

// Display "Hello world!" a thousand times
for(int i(0); i < 1000; ++i)
	std::cout << "Hello world!" << std::endl;

How it is done

<pre data-no-shadow data-caption="your_caption">
	<code>
		your awesome code is amazed by other stuff too
	</code>
</pre>

Tip: You can disable the box-shadow around the code, using data-no-shadow on the <pre>.

Styled listsTip: Use them on the <ul> elements

is something
class="roundRight"
like that

Cool

is something
class="roundLeft"
like that

What you can do with it

Me

... and even more!

Turn it on and off

Square Green Inactive Led
Square Green Flashing Led
Square Green Active Led
Square Orange Inactive Led
Square Orange Flashing Led
Square Orange Active Led
Square Red Inactive Led
Square Red Flashing Led
Square Red Active Led

Round Green Inactive Led
Round Green Flashing Led
Round Green Active Led
Round Orange Inactive Led
Round Orange Flashing Led
Round Orange Active Led
Round Red Inactive Led
Round Red Flashing Led
Round Red Active Led

The way it is done

Make it blinky!

<ul class="leds">
	<li>
		<span class="round green"></span>
                 Round Green Inactive Led
	</li>
	<li>
		<span class="orange active blink"></span>
                 Square Orange Flashing Led
	</li>
	<li>
		<span class="round red active"></span>
                 Round Red Active Led
	</li>
</ul>

Round Green Inactive Led
Square Orange Flashing Led
Round Red Active Led

Playing with it

Charges:

Very Low
Low
Medium
High
Critical

Tip: You can use the leds anywhere, they aren't fixed on the lists! :D

About the awesome titles

<header>About the awesome titles</header>

Buttons!

default blue lightblue yellow orange red green violet

Tip: Use the onclick attribute to personalize them. Go down for an example!

Turning off the light

Clicking the button will turn off the light. Hope you are not afraid of the dark!

Turn off the light!

This way, you can easily focus on important things.

Make it shiny!

<button type="button" id="light" class="button yellow"
        onclick="lightOnOff()">
							Turn off the light!
</button>

Link them!

Using the onclick attribute is not an obligation. Feel free to link them all!

Link or Zelda?

<a href="#/charts">
	<button class="button blue">Next slide</button>
</a>

Next slide

Charts support

Created with Highcharts 3.0.6Chart context menuWeb clientWeb service / CLICommand line clientSaaS client(browser orscript)POST options in JSONPhantomJSSVGBatikRasterized imageBrowserrunningHighchartsPOST SVGRasterized imageScriptCommandRasterized imageHighcharts export server overviewHighcharts.com

More charts!

Created with Highcharts 3.0.6Chart context menuBrowser market shares at aspecific website, 2010FirefoxIEChromeSafariOperaOthersHighcharts.com

Even more charts!!

Created with Highcharts 3.0.6ValueLive random data05:30:4005:30:50-0.200.20.40.60.81Highcharts.com

Always more...

Created with Highcharts 3.0.6Chart context menuHeight (cm)Weight (kg)Height Versus Weight of 507Individuals by GenderSource: Heinz 2003FemaleMale14016018020020406080100120140Highcharts.com

Your turn

Thanks to highcharts.js, you can do all the charts you want. Just take a look at the examples available here.

Displaying PDF files

From now on, displaying PDF files has been made easy. Take a look at the next slide folk!

Turn the light off

The tricks

As you can see, you have the ability to automatically add a light button. If you do not want a light button at all, please use data-no-light-button. If you want to change the color of the light button, which is yellow by default, please use data-light-color="green". You can pick a color between the available button colors.

Example

<div data-pdf="pdf/example.pdf"></div>

<div data-pdf="pdf/example.pdf" data-no-light-button></div>

<div data-pdf="pdf/example.pdf" data-light-color="violet"></div>

Tip: the data-pdf attribute MUST contain the path to the PDF file!!

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Themes

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Simple - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link>.

Intergalactic Interconnections

You can link between slides internally, like this.

Export to PDF

Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.

Merci de votre attention

Si vous avez des questions, je suis tout ouïe.

Question time! — Leonardo Da Vinci

The end!

Twas Diap. by Raphaël Marques

/42

Diap. – Reveal.js / Google IO Slides / slides / CSSS / iView Lightview – Toggle the slide counter

Adrael