Mit WebSlides wurde ein kostenfreies OpenSource-Produkt zur Verfügung gestellt, welches eigene Präsentationen in HTML ermöglicht. Mit wenig Kenntnissen in HTML und CSS können so Landingpages, Portfolios und Artikel, die auf ansprechende Weise eine Geschichte erzählen, schnell realisiert werden.
WebSlides - Präsentations-Tool!
Screenshots von WebSlides.tv
Mit den WebSlides ist ein interessantes und vor allem kostenfreies Werkzeug erschienen, welches in manchen Fällen sogar Powerpoint von Microsoft ersetzen könnte. Im Prinzip können mit dem Tool auf HTML basierende, blätterbare Seiten mit jeglichen Inhalten erstellt werden.
Es ist kein Problem, Bilder, Videos, Hyperlinks, Maps, SVG-Icons, Animationen usw. zu nutzen. Einzelne Seiten können sowohl horizontal, als auch vertikal geblättert werden. Natürlich ist auch das gewohnte Scrollen möglich. Es gibt in Grundsätzen durchaus eine gewisse Ähnlichkeit mit FlipHTML5, wenngleich dieses Tool doch ungleich umfangreicher ist. Hierüber ist ein ausführlicher Bericht unter "FlipHTML5 für digitale Magazine, Kataloge und mehr" zu finden.
WebSlides ist eher darauf ausgelegt, sehr schnell, ohne großes Know-How und technischen Aufwand, ansprechende Informationen zu präsentieren und Geschichten zu erzählen. Um loszulegen, nutzt man einfach eine der über 120 Demo-Slides und passt diese nach eigenen Wünschen an.
Screenshot von WebSlides.tv
Einfache Kenntnisse in HTML und CSS sollten für eigene Umsetzungen aber schon vorhanden sein. Die Entwickler bieten recht gute Unterstützung für den ersten Start. So gibt es jeweils eine Seite für die zur Verfügung stehenden Komponenten sowie für die Klassen. Dort wird recht gut beschrieben, wie damit umzugehen ist. Natürlich sind auch diese Seiten mit der Maus oder der Tastatur blätterbar.
Eine blätterbare Seite bzw. jeder Slide, wird als Section definiert. Das Grundgerüst sieht z.B. so aus:
<article id="webslides">
<!-- Slide 1 -->
<section>
<h1>Ahadesign Slide 1</h1>
</section>
<!-- Slide 2 -->
<section class="bg-primary">
<div class="wrap">
<h2>.wrap = container 1200px with fadein</h2>
</div>
</section>
</article>
Um vertikal zu blättern, wird oben an die ID einfach noch eine Klasse angehängt.
<article id="webslides" class="vertical">
So können auch andere Bereiche wie Header und Footer via Klassen z.B. mit Farben belegt werden. Horizontale und vertikale Navigationen sind ebenso möglich und vieles mehr. Alle Features sind auch in der WebSlides-Seite bei Github beschrieben.
Der WebSlide-Download ist z.B. über die oben genannten Seiten zu den Klassen und Komponenten direkt auf der ersten Seite oder auf der Hauptseite zu WebSlides möglich. Das kostenfreie Paket beinhaltet Demos und Bilder. Die Bilder und Grafiken sind jedoch nur zum Testen gedacht und nicht frei von Rechten. Aber man wird ohnehin eigenes Material verwenden wollen. Ansonsten sind neben einer index.html, drei CSS-Dateien und zwei JavaScript-Dateien enthalten. Ein sehr überschaubares Paket also.
