Top
Sichtreise / Tutorials  / HTML & PHP  / impress  / Impress.js für eigene Präsentationen

Impress.js für eigene Präsentationen

Kennst du Powerpoint? Ich schätze schon. Bist du auch davon genervt, dass man sowas nicht per Browser machen kann? Also ganz ohne Microsoft Produkte und mit etwas mehr “Action”. Wenn ja, dann bist du hier richtig. Denn dieser Artikel befasst sich mit Impress.js – Das ist quasi wie Prezi, nur eben für sich selbst und kostenlos.

Da Impress.js aber in der “Standardvariante” etwas komplex und nicht ganz flexibel ist, werde ich dir hier zeigen, wie man damit ein Vorlagensystem baut, um später schnelle Präsentationen für den Browser zu basteln. Ein kleiner Hinweis in eigener Sache: Auch ich taste mich erstmal langsam an das Ganze ran. Es kann also sein, dass wir Anfangs etwas umständlich agieren bis wir zum gewünschten Ziel kommen 🙂

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Die Vorbereitungen[/custom_headline]

Wenn du nun den Hauptordner via Browser öffnest, dann startet bereits die Impress.js Präsentation mit einigen DemoDaten. Ich habe das z.B. unter diesem Pfad http://ronny.dechler.headlong.at/sandbox/impressjs/original/ für dich zugänglich gemacht.

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Die Struktur[/custom_headline]

Die Ordnerstruktur ist relativ simpel gestrickt:

  • css (Ordner)
    • impress-demo.css (beinhaltet die Stylesheet Informationen)
  • js (Ordner)
    • impress.js (beinhaltet die JavaScript Steuerinformationen)
  • apple-touch-icon.png (ein Bild das in der Demopräsentation verwendet wird)
  • bower.json (eine JSON Datei mit Informationen über das gesamte Projekt und dem Autor)
  • favicon.png (das FavoritenIcon)
  • index.html (die gesamte Präsentation bzw. deren Information)
  • README.md (eine zusätzliche ReadMe Datei mit Updateinformationen, usw.)
[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Erstes Ziel[/custom_headline]

Das erste Ziel für die Anpassung ist, die index.html Datei so aufzusplitten, dass die Optionen, vom Steuerungsbreich der “Folien” und vom Inhalt getrennt werden. Im Vorfeld noch manuell, später soll dann Impress.js automatisch erkennen, wie viele Folien es so gibt und diese automatisch anordnen und ausgeben.

Alles klar?

[custom_headline type=”left” level=”h3″ looks_like=”h4″ accent=”true”]Die index.html[/custom_headline]

Dann sehen wir uns doch die index.html Datei mal Stück für Stück an. Denn Impress.js besteht “fast” nur aus dieser Datei.
[code]<!doctype html>

<!–

Welcome to the light side of the source, young padawan.

One step closer to learn something interesting you are…

____
_.’ : ._
.-.'
. ; .’.-.
__ / : ___ ; /___ ; __
,'_ ""=-.:__;".-.";: :".-.":__;.-="" _
,
:’ .t""=-.. '<@.;_ ‘,@: ..-=""j.' ;
:-.._J '-.-'L__ -.-‘ L_..-;’
“-.__ ; .-” “-. : __.-”
L ‘ /.======. ‘ J
“-. “__” .-”
__.l”-:_JL_;-“;.__
.-j/’.; ;”””” / .'”-.
.’ /:. "-.: .-" .'; .
.-” / ; “-. “-..-” .-” : “-.
.+”-. : : “-.__.-” ;-._
; .; ; : : "+. ;
: ; ; ; : ; : :
; : ; : ;: ; :
: ; : ; : ; / ::
; ; : ; : ; : ;:
: : ; : ; : : ; : ;
; : ; : ; ; ; ;
:
.”-; : ; : ; / ;
; -: ; : ; : .-” :
: : ; : .-” :
;. ; : ;.'_..-= / ;
: "-. "-: ; :/." .' :
: ;/ __ :
.-
. /t-“” “:-+. :
. .-" l __/ /. : ; ; ;
.-" .-"-.-" .' .'j / ;/
/ .-" /. .'.' ;_:' ;
:-""-.
./-.’ / .___.'
t ._ /
“-.t-._:’

–>

<!–

So you’d like to know how to use impress.js?

You’ve made the first, very important step – you’re reading the source code.
And that’s how impress.js presentations are built – with HTML and CSS code.

Believe me, you need quite decent HTML and CSS skills to be able to use impress.js effectively.
More importantly, you need to be a designer. There are no default styles or layouts for impress.js presentations.

You need to design and build it by hand.

So…

Would you still like to know how to use impress.js?

–>[/code] Nach einer kurzen Begrüssung von Yoda und dem Hinweis, dass wir im Quellcode mehr als richtig sind, kann es auch schon losgehen. By the way: Die erste Zeile dieser Datei beginnt mit
[code]<!doctype html>[/code] … also eine HTML5 Deklaration. Das ist mehr als perfekt, wie wir später feststellen werden.
[code]<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=1024″ />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>

<meta name=”description” content=”impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.” />
<meta name=”author” content=”Bartek Szopka” />

<link href=”http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic” rel=”stylesheet” />

<!–

Impress.js doesn’t depend on any external stylesheets. It adds all of the styles it needs for the
presentation to work.

This style below contains styles only for demo presentation. Browse it to see how impress.js
classes are used to style presentation steps, or how to apply fallback styles, but I don’t want
you to use them directly in your presentation.

Be creative, build your own. We don’t really want all impress.js presentations to look the same,
do we?

When creating your own presentation get rid of this file. Start from scratch, it’s fun!

–>
<link href=”css/impress-demo.css” rel=”stylesheet” />

<link rel=”shortcut icon” href=”favicon.png” />
<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
</head>[/code] Der <head> Bereich ist ebenfalls schnell erklärt und sehr übersichtlich:

  • Die Sprache ist mit englisch spezifiziert (en)
  • Die Kodierung ist auf UTF-8 festgelegt
  • Der Viewport ist mit einer Breite von 1024px angegeben. Gut oder schlecht?! Im Prinzip ist er für mobile Endgeräte wichtig, aber darüber streiten sich noch die Geister. Wir nehmen das zurzeit einfach mal so hin.
  • Der Metatag mit dem “apple” bewirkt, dass die Tabs und die Adresszeile am oberen Bildschirmrand verschwinden, wenn man die Präsentation über Apple Geräte betrachtet (zumindest in der Theorie)
  • Als nächstes folgt der <title> Tag, der klarerweise den Titel für den Browser beinhaltet
  • Danach folgt eine <description> die eine Beschreibung der Seite umfasst, sowie der <author> Tag, der den Besitzer gespeichert hat
  • Der Tag mit <link href=”http://fonts.googleapis.com…> bindet die Google Schriftarten ein
  • Anschliessend wird die eigentliche CSS Datei eingebunden
  • Sowie ein FavoritenIcon für Windows und Apple(Touch) eingebunden

Author Profile

RonnyDee
RonnyDee"Wenn du tust, was du immer getan hast, dann wirst du bekommen, was du immer bekommen hast"
Ich blogge hier über alle Themen mit denen ich in Berührung komme. Möchtest du wissen, warum ich so denke was ich schreibe, dann findest du unter "Über mich" mehr Informationen über mich und mein Leben
3 Comments

Post a Comment

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Skip to content