Download Pik7 1.0.1

An introduction to PIK7

HTML5 presentation framework

Press or tap on the right to learn more
v. 1.0.1

Features

Downsides

Getting started

  1. Download Pik7 from pik.peterkroener.de or git clone git://github.com/SirPepe/Pik7.git && npm install && bower install && grunt
  2. Place the files in a directory on your web server
  3. Open Pik7 in a browser, click the "Browse" link to navigate through the slide sets

Controls

Building presentations

Minimal working example:

<!-- /presentations/Foo/bar.html -->
<html id="PikSlides">
<script src="../../core/pik7.js"></script>

<div class="pikSlide">First Slide</div>
<div class="pikSlide">Second Slide</div>

Use presentations/Template/index.html as a starting point.

Styling presentations

Multiple views

Open Pik7 in additional browser windows to create multiple, synchronized presentation views.

Try it now!

Presenter view

Presenter view

Speaker notes

Additional speaker notes can be added using an element with the class pikNotes for each slide.

<div class="pikNotes">
  <p>Use all the HTML you like here!</p>
</div>

Notes are invisible in the presentation, but can be shown in the presenter view.

Use all the HTML you like here!

Printing

Events

Events demo

$(document).ready(function(){
  $('#EventsDemo').bind({
    pikActivate: function(){
      $(this).find('p').addClass('awesome');
    },
    pikDeactivate: function(){
      $(this).find('p').removeClass('awesome');
    }
  });
});

Awesome!

Summary of special html classes

Slide transitions

Server

A very basic web server based on Node.js is provided. To run: node server.js

To do

Contributions are appreciated!

Links