S6 // 12-2010 // Demo


|



 



Präsentationen aus der Hosentasche

iPodTouch_P1070604
S6 auf dem iPod Touch „Retina“

Zum Weiterblättern bitte mit Mouse oder Finger innerhalb der weißen Fläche klicken…


Übersicht aller Slides

Wenn Sie auf die „Seitenzahlen“ (oben rechts im Browserfenster) klicken, wird die Übersicht aller Slides sichtbar.


Bedienung via Tastatur

0 („Null“)
Zurück zur ersten Seite der Präsentation
→ (Pfeiltaste rechts)
Nächste Seite
← (Pfeiltaste links)
Vorherige Seite
C
Aufruf eines deutlich größeren Cursors – funktioniert momentan nur bei Safari & Chrome
?
Darstellen der Tastaturbefehle – aber das haben Sie ja gefunden!
SPACE („Leerzeichen“)
Übersicht aller Slides sichtbar/unsichtbar schalten

Verlinken auf einen speziellen Slide

Wenn Sie Ihre Präsentation online gestellt haben und z.B. via eMail auf einen speziellen Slide verweisen wollen, können Sie dies folgendermaßen machen:

http://servername.de/demo/index.html#A_7

hier meine <a href="http://servername.de/demo/index.html#A_7">Angaben</a>

#A_7 gibt dabei an, dass S6 auf das Slide mit der Nummer „7“ springen soll – die Nummer des jeweiligen Slides sieht man oben rechts im Browserfenster!



Erstellen einer neuen Präsentation (1)

Bitte legen Sie eine neue Präsentation paralell zur hier dargestellten Präsentation „demo“ an – dadurch bleiben alle relativen Pfade zu den „meta“-Dateien enthalten!

Am einfachsten erstellen Sie eine neue Präsentation indem Sie den kompletten Ordner „demo“ kopieren und diesen anschliessend umbenennen…

S6_Dateistruktur
„meineEigenePraesentation“ ist die neu angelegte Präsentation

Erstellen einer neuen Präsentation (2)

  1. Ändern Sie im <title> und im <h1 id="titel"> den Namen der Präsentation
  2. Falls Sie statt des hellen Hintergrundes lieber einen dunklen verwenden möchten, müssen Sie bei der Verlinkung des Stylesheets dies noch ändern:
skin_bright
Auswahl des hellen Hintergrundes
skin_dark
Auswahl des dunklen Hintergrundes

Hinzufügen von Slides

<article>
  <h1>Überschrift</h1>
  <figure>
    <!-- keine Breiten- und Höhen-Angaben hier, 
    damit das Bild „elastisch“ bleibt! -->
    <img src="demo.jpg" alt="ein demobild">
    <figcaption>Ein schönes Demobild</figcaption>
  </figure>
  <p>Paragraph mit weiteren Informationen</p>
</article>

Jeder neuer Slide muss innerhalb eines <article>-Tags stehen;
<h1>-Überschriften werden via Webfont besonders behandelt.


Eigenes Theme erstellen

S6_Dateistruktur_2

Die Themes befinden sich bei „meta“ im Ordner „themes“ – dort muss hauptsächlich die Datei „pretty.css“ bearbeitet werden, um das Theme zu verändern…


S6-Präsentationen ohne Coding

ipadYou_aufmacher

Um S6 auch für Leute komfortabel bedienbar zu machen, die nicht direkt im HTML-Code arbeiten (wollen), entwickeln wir gerade zusammen mit Notos Media ein Backend, welches es ermöglicht, Inhalte einfacher einzugeben und zu formatieren.

Mit dem auf Typo3 basierenden Tool, das von uns gehostet wird, lassen sich auch Slides via Drag & Drop umsortieren und komplett als Zip-Dateien herunterladen.

Mehr dazu ist auf der Website iPadYou.de zu finden…


Microformate

Foto von Matthias Edler-Golla

Matthias Edler-Golla arbeitet seit 16 Jahren als Web- und Interaction Designer in Rosenheim und unterrichtet an der FH Salzburg und der Hochschule München. Er schreibt gelegentlich bei Twitter.

Sein Statussymbol ist ein Brompton.

Seine vCard/hCard können Sie direkt in Ihr Adress-Buch exportieren, wenn Sie die Operator-Extension für Firefox installiert haben…


Download von S6

S6 kann bei Github heruntergeladen oder – noch besser – geforkt werden: http://github.com/megolla/S6

S6 wird unter der Creative Commons Attribution 3.0 Lizenz veröffentlicht