From 6479712c583440000758243c3f6bc0bc0c27d40e Mon Sep 17 00:00:00 2001 From: "W. Trevor King" Date: Thu, 16 Jan 2014 20:55:02 -0800 Subject: [PATCH] index.html: Pull out Reveal.js content and add Aron's cover slide Based on Aron's slideshow [1]. On Fri, Jan 17, 2014 at 05:04:54PM -0800, Aron Ahmadia wrote [2]: > On Fri, Jan 17, 2014 at 04:27:09PM -0800, W. Trevor King wrote: > > Aron and Greg, I'm not sure what the terms are for your text. I > > assume Greg's is CC-BYv3.0 (like the rest of the SWC > > documentatation), and that Aron is distributing his talk under the > > same license that Greg started with. > > All text by Greg and I is CC-BYv3.0. I use to embed the SVG images [3]. [1]: http://www.slideshare.net/aronahmadia/esip-2014 [2]: https://github.com/swcarpentry/assets/issues/49#issuecomment-32670141 [3]: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#object --- index.html | 322 ++++------------------------------------------------- 1 file changed, 21 insertions(+), 301 deletions(-) diff --git a/index.html b/index.html index 72bf08d..97baf8a 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - reveal.js - The HTML Presentation Framework + Software Carpentry - + @@ -37,314 +37,34 @@
-

Reveal.js

-

HTML Presentations Made Easy

-

- Created by Hakim El Hattab / @hakimel -

-
- -
-

Heads Up

-

- reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with - support for CSS 3D transforms to see it in its full glory. -

- - -
- - -
-
-

Vertical Slides

+

Software Carpentry for the
Geophysical Sciences

+

- Slides can be nested inside of other slides, - try pressing down. + + ESIP Winter Meeting, January 2014 +

- - Down arrow - -
-
-

Basement Level 1

-

Press down or up to navigate.

-
-
-

Basement Level 2

-

Cornify

- - Unicorn - -
-
-

Basement Level 3

-

That's it, time to go back up.

- - Up arrow - -
-
- -
-

Slides

-

- Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es. -

-
- -
-

Point of View

-

- Press ESC to enter the slide overview. -

-

- Hold down alt and click on any element to zoom in on it using zoom.js. Alt + click anywhere to zoom back out. -

-
- -
-

Works in Mobile Safari

-

- Try it out! You can swipe through the slides and pinch your way to the overview. -

-
- -
-

Marvelous Unordered List

-
    -
  • No order here
    • -
  • Or here
    • -
  • Or here
    • -
  • Or here
    • -
-
- -
-

Fantastic Ordered List

-
    -
  1. One is smaller than...
    2. -
  2. Two is smaller than...
    3. -
  3. Three!
    4. -
-
- -
- -
- -
-

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

-
- -
-

Global State

-

- Set data-state="something" on a slide and "something" - will be added as a class to the document element when the slide is open. This lets you - apply broader style changes, like switching the background. -

-
- -
-

Custom Events

-

- Additionally custom events can be triggered on a per slide basis by binding to the data-state name. -

- 

-Reveal.addEventListener( 'customevent', function() {
-	console.log( '"customevent" has fired' );
-} );
-
-
- -
-
-

Slide Backgrounds

+

Aron Ahmadia

- Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported. + Software Carpentry + and + US Army ERDC-CHL

- - Down arrow - -
-
-

Image Backgrounds

- 
<section data-background="image.png">
-
-
-

Repeated Image Backgrounds

- 
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
-
-
- -
-

Background Transitions

-

- Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade. -

-
- -
-

Background Transition Override

-

- You can override background transitions per slide by using data-background-transition="slide". -

-
- -
-

Clever Quotes

-

- These guys come in two forms, inline: - “The nice thing about standards is that there are so many to choose from” and block: -

-
- “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would - reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.” -
-
- -
-

Pretty Code

- 

-function linkify( selector ) {
-  if( supports3DTransforms ) {
-
-    var nodes = document.querySelectorAll( selector );
-
-    for( var i = 0, len = nodes.length; i < len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) {
-        node.className += ' roll';
-      }
-    }
-  }
-}
-
-

Courtesy of highlight.js.

-
+ -
-

Intergalactic Interconnections

-

- You can link between slides internally, - like this. -

-
- -
-
-

Fragmented Views

-

Hit the next arrow...

-

... to step through ...

-
    -
  1. any type
    2. -
  2. of view
    3. -
  3. fragments
    4. -
- - -
-
-

Fragment Styles

-

There's a few styles of fragments, like:

-

grow

-

shrink

-

roll-in

-

fade-out

-

highlight-red

-

highlight-green

-

highlight-blue

-

current-visible

-

highlight-current-blue

-
-
- -
-

Spectacular image!

- - Meny - -
- -
-

Export to PDF

-

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

- - -
- -
-

Take a Moment

-

- Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen - during a presentation. -

-
- -
-

Stellar Links

- +
+ + Use a browser that supports SVG! + + + +

THE END

-

BY Hakim El Hattab / hakim.se

-- 2.26.2