Structuring a presentation

To structure your presentation you can use the context menu which is shown by right clicking on your deck.

You can use drag and drop in order to change the positions of slides within a deck.

Editing Slides

SlideWiki employs Aloha-Editor for editing slide content.It also uses SVG-edit for drawing shapes within an slide.

Using these features you can add code, quotes, shapes and etc. to your slides. Some examples follow:

<div> Hello World! </div>

Food is an important part of a balanced diet! 

Layer 1 Use

* Note : It is recommended to edit the slides in fullscreen mode .

Editing Slide HTML Code

Users familiar with HTML can easily edit slides' source code. SlideWiki uses     CodeMirror to highlight the HTML source code.

WYSIWYG and source code views are synchronized so that changes in one view will affect the other one instantly.

LaTeX integration

SlideWiki uses MathJax to display mathematical content.
You can use LaTeX  expressions within your slides. For example:
\[\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)\]
which will result in:
\[\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)\]
You can also write inline LaTeX. For example:
  \(a^{\mathcal{I},\mathcal{Z}} = a^{\mathcal{I}} \in \Delta_{\mathcal{I}}\)
which will result in: \(a^{\mathcal{I},\mathcal{Z}} = a^{\mathcal{I}} \in \Delta_{\mathcal{I}}\)

For more TeX samples click here .

Scalable Vector Graphics (SVG) Integration

SlideWiki allows to integrate Scalable Vector Graphics (SVG)

  • use the Pencil tool in the editor Insert tab

Layer 1 Layer 1 SVG Layer 1 image/svg+xml Layer 1 Farm BuildingFarm BuildingbuildingfarmOpen Clip Art ProjectArtFavorPublic Domain2005/10/03image/svg+xml Layer 1 Layer 1

Inline Frames

 You can embed inline frames into your slides. Using this approach, you can run online Web applications within your slides.

For example (embedding a video):

* Notice: the slide containg the iframe tag should not be the first slide of your deck

Progressive display of slides

SlideWiki supports the progressive display of slides, just surround the content to be displayed progressively with additional HTML block elements (e.g. DIV) having the attribute class="inslide"

Content to display first
<div class="inslide">
Content to display second
<div class="inslide">
Content to display third

For example:

  • Content to display first
  • Content to display second
  • Content to display third

  • Animations and Effects

    SlideWiki supports different types of animations and effects within slides.

    For example:

    • Shake (use class "effect-shake")
    • Bounce (use class "effect-bounce")
    • Pulsate (use class "effect-pulsate")
    • Highlight (use class "effect-highlight")


    • SlideWiki employs Saas for creating dynamic styles for the presentations.

    • To create a new theme for your presentation, you can use the following predefined CSS classes:











    Besides the four default transitions, SlideWiki supports creating impress.js transitions.

    * To create your customized transitions, click on the Edit button next to the transition drop-down menu and then click on the Builder4Impress link on top.

    Creator: soeren (TIB)

    ali1k (VU Amsterdam), darya (VUA), Daniel_Mietchen

    Licensed under the Creative Commons
    Attribution ShareAlike CC-BY-SA license

    This deck was created using SlideWiki.