How I Made This Presentation – Using the Tools of the Web to Present About It. – My Presentation History

View Github Repository Open presentation in a new window

svenaas

See all presentation from svenaas

How I Made This Presentation – Using the Tools of the Web to Present About It. – My Presentation History

0 0

web-presenting

How I Made This Presentation: Using the tools of the web to present about it

On Github svenaas / web-presenting

How I Made This Presentation

Using the Tools of the Web to Present About It.

Sven Aas Lead Web Application Developer Mount Holyoke College@svenaas

#MPD4

My name is Sven Aas. I work at Mount Holyoke College, down in Massachusetts, where I develop and support web applications.

My Presentation History

I went to my first HighEdWeb conference back in 2007 and I was powerfully impressed by the conference, the community, and the presentations. Presentations weren't really a big part of my life, but I knew I wanted to be a part of this thing and I made up my mind to submit a proposal the next year if I'd be able to attend the conference.

HighEdWeb 2008

Higher Ed on Rails

Powerpoint

As it turned out I was able to go, and my proposal was accepted. I prepared my talk, Higher Ed on Rails, in Powerpoint in accordance with the ancient form. There were a lot of screenshots and a lot of bullets and maybe a few transitions, and everything worked ok.

Then

  • HighEdWeb 2009 (missed it)
  • HighEdWeb 2010 (didn't present)

But meanwhile ...

That was 2008. I wasn't able to attend in 2009 so I missed all the excitement (dropshadow slide). In 2010 I was there but didn't present.

Back Home

HighEdWeb 2010 Report

Google Presentation

I'd been presenting more back at home, though, mostly in PowerPoint, which I never liked much, and several times more recently in Google Presentations, including this example reporting some of the lessons learned at HighEdWeb 2010. As you know (or should) Google's tools offer a lot of advantages for collaboration.

But as nice as this tool is in various ways, it doesn't look great. It let you use the web, but in a lowest-common-denominator sort of way. It offers some conveniences but denies others.

Back Home

HTML5

Keynote

So when I was asked to speak about HTML5 to the Five College Libraries' Digital Environment Development and Coordinating Committee (DEDCC) I decided to try Apple's Keynote. This was definitely a better tool. It suffers from weird little limitations of its own, but it tended to snap things to where I wanted them, put options where I expected them, and generally feel less frustrating. I had fun with the talk, and it looked better than anything else I'd done.

HighEdWeb 2011

Swinging with Sinatra

Keynote

HighEdWeb 2011 was a busy conference for me. I did too much. I volunteered for a few things (registration, band), I presented a poster, and I gave another 45-minute talk. This time I wanted to do something more dynamic and exciting, a live programming demonstration. As luck would have it it was a little more exciting than I would have liked, as my computer (yes, this very computer) let me down (core dump slide) mid stream. This proved a popular diversion, and I got to repeat it two more times. One thing I promised myself was that next time I'd deliver a talk I could present in jeans.

HighEdWeb 2012

I Can Convert!

Keynote

In 2012 Jason Proctor and I collaborated on a talk, and because we wanted it to look nice we used Keynote. Now this time the tool really got in the way. Jason knows a lot more about typography than I do, but I know Keynote better. Our collaboration consisted of sharing some notes, and then working on a single Keynote file in a shared Dropbox folder, being careful not to overwrite each other's changes. We know each other well and we got through this ok but it was really the last straw.

I did wear jeans, though.

Available Presentation Tools

(and their limitations)

  • Conventional (Powerpoint, Keynote)
  • Cloud-based (Google)
  • Flash-based (Prezi)
Elapsed time check: 8min
  • Conventional presentation tools offer cryptic and shifting interfaces and little or no collaboration functionality.
  • Google's presentation tool offers much better collaboration support but limited presentational flexibility.
  • Some people were starting to use Prezi, of course, and that was impressive the first time I saw it, but it doesn't work for everything and it has other drawbacks.

What About Version Control?

For a dozen years by this point I'd been managing source code in version control systems. First StarTeam, then CVS, SVN, and Git. I invested a lot of time working with these tools, and relied upon them to care for the output of the hours (and the years) I spent at the keyboard doing my main job.

What About the Web?

That main job, meanwhile, which had always been one kind of programming or another, had for years been web programming, and by this point for me that meant blue-beanie standards-based web programming, with CSS, yo.

It turns out there are options.

Lacy Tite of Vanderbilt University presented a talk at HighEdWeb 2012 on WordPress functions, and during the conference I heard that she was using a web-based presentation tool. After really feeling the limitations of Keynote for collaboration with another web developer that year I thought "That's what I'm going to do next time."

http://lacytite.com/heweb12/wordpress.html

Web-based Presentation Tools

The Basic Idea

HTML

HTML is used to structure content and mark it up, often semantically

The Basic Idea

CSS

CSS is used to provide presentation styling.

The Basic Idea

JavaScript

JavaScript is used to add behavioral elements

Sound familiar?

Opera Show

  • Presentation Mode
  • media: projection
  • XHTML and CSS
  • Opera Show Generator

Around 2000 Opera introduced Opera Show

With a little CSS you could use the same XHTML for slide show, web, and printed handouts.

Cross-platform. But limited to Opera. Which you had to pay for.

In 2004 Opera released Opera Show Generator to allow presentations to be built without knowledge of web development.

Tantek Çelik

http://tantek.com/presentations/2004sxsw/css.html

Elapsed time check: 15min

Tantek Çelik is an important figure in Web Standards. He (and others) saw the potential of Opera Show but wanted to make this functionality more generally available. So a few years later Tantek built a slide show system for his own use.

Cross-browser. JavaScript. But requires manually-assigned IDs.

S5

Eric Meyer

  • XHTML
  • XOXO

http://meyerweb.com/eric/tools/s5/

Eric Meyer's framework retains the things that are valuable about Tantek's, but uses JavaScript to assign IDs automatically, making things easier for the editor.

Still compatible with Opera Show. Also compatible with XOXO (Extensible Open XHTML Outlines microformat).

S5

Pros:

  • Printable
  • Accessible
  • Semantic

Cons:

  • Fairly Static
  • Single URL

Deck.js

Caleb Troughton

https://github.com/imakewebthings/deck.js

Example

Deck.js

  • Built with jQuery and Modernizr
  • Themable slide and transition styles
  • Simple HTML
  • JavaScript API
  • Contributed extensions

Reveal.js

Hakim El Hattab

https://github.com/hakimel/reveal.js

Example Elapsed time check: 20min Reveal.js was built by Swedish user interface developer Hakim El Hattab. It has a smaller community than Deck.js, but in my personal opinion it offers a few advantages. You're looking at it now.

Transitions

Supports swipe/pinch navigation.

Markdown

This is markdown text right here.

Code Highlighting

<section>
	<h2>Code Highlighting</h2>
	<pre><code contenteditable>
		<!-- Recursion here. Look away! -->
	</code></pre>
</section>

Overview

10,000-foot view of your presentation.

Mobile

Supports swipe/pinch navigation.

PDF Export

Supported via print Stylesheet (Chrome only at this time).

Pause

Hit B to pause your presentation. This probably stands for "blank" but I like to think it stands for "breathe".

Theming

Uses SASS and related tools to make themes more consise.

Presenter View

See notes along with current/next slide and timer

Remote

(Server-side speaker notes)

Control presentations with another device.

Multiplex

Control presentation clients

API

  • Read and observe presentation state
  • React to presentation events
  • Control and modify presentation

And more!

You can link directly from slide to slide.

Node.js is used for remote and multiplexing, and Node and Grunt are used for Reveal.js development.

Third-party developers have experimented with novel control mechanisms, new transition types, and even programattic generation of presentations using Sinatra.

A few other options

Elapsed time check: 27min

Parallax scrolling

Flowtime

https://github.com/marcolago/flowtime.js Parallax example

Follow example link and click through to see the parallax effect demonstrated.

NOTE: In Safari be sure to leave fullscreen mode first.

Prezi-style effects

Impress

https://github.com/bartaz/impress.js

Follow "Impress" link for a quick click-through of the Impress demo.

NOTE: In Safari be sure to leave fullscreen mode first.

jQuery

Fathom

https://github.com/markdalgleish/fathom

Things to Look For

When Choosing a Platform

Elapsed time check: 32min

Navigation

  • Keyboard
  • Mouse
  • History

In general all of these tools allow you to control your presentation with the keyboard in a reasonable (and usually familiar) way, though the details vary, as they do with mouse control options.

You are, however, in a browser, and the behavior of the back button is a bit different from one presentation tool to another. Test this out if it matters to you.

Adaptability

  • Printable
  • Accessible
  • Exportable (PDF)
  • Semantics (XOXO)
  • Look at a presentation without CSS or JavaScript.
  • Try print-previewing a presentation.
  • View the source code!

Presenter Tools

  • Overview
  • Fullscreen
  • Remote
  • Pause
  • Multiplex

Community

Content

  • Online Editor
  • Markdown

Style

  • Themes and Theming
  • Flexibility
  • Code Highlighting

Behavior

  • Transitions
  • Animation
  • API / Events

This is all so great!

  • Version control? Sure!
  • Collaboration? Why not!
Elapsed time check: 37min

And of course all this works in version control. It's styled with CSS. It gets its behavior from CSS and JS. It only uses the same technologies we use to do everything else.

Collaboration? Why not!

Would I go back?

to Powerpoint/Keynote?

For delivery specifically in those formats

to Google Presentations?

For something small and simple

Would I go back to Powerpoint or Keynote? Sure, if I have to make something available in those formats for someone else. And I'd use Google if I had a lower bar for something small and simple. But for something I'm going to spend time on, why not do it this way? I'm not promising that it's easier to get your theme working the way you want, but you're doing it with CSS. Maybe you're already great at this. Maybe not. But either way ...

Better to go forward

Best of all: your presentation design work can now help you get better with the tools of your profession, instead of drawing you away from them and making you fight with the user interface of another office suite.
Get better at CSS!

Source Code

https://github.com/svenaas/web-presenting

Questions?

Elapsed time check: 40min

Thank you!

Stay in touch:

Sven Aas, Mount Holyoke College saas at mtholyoke dot edu@svenaas

#MPD4