PictureStory

PictureStory ist ein Template für bildreiche Webreportagen. Schlicht, schön und aufgrund der schwierigen Bedienung eher was für Profis oder technophile Bastler.

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

PictureStory ist definitiv etwas für Fortgeschrittene. Nicht jeder fummelt gerne im HTML-Code herum. Allerdings macht gerade das freie Basteln großen Spaß. Und dank eines gut und minimalistisch programmierten CSS-Sheets machen PictureStorys echt was her.

Nachdem wir schon einige Rund-um-sorglos-Angebote für Webreportagen getestet haben, wollte ich schon länger mal ein anspruchsvolleres Programm ausprobieren.

Fakten & Daten

Preis
Sprache
Lernzeit
Arbeitszeit
nAusspielart
Support

|
|
|
|
|
|

kostenlos
englisch
2 Stunden
2 Stunden
zum selber Hosten
Github "Issues"


zum Tool

PictureStory ist so eins. Es handelt sich dabei um ein Template, das auf Github zur freien Verfügung steht. Das heißt: Es liegen HTML-Datei (bilden das Grundgerüst einer Webseite), CSS-Dateien (definieren das Layout einer Webseite) und Javascript-Dateien (sind für Interaktivität zuständig) in einem downloadbaren ZIP-Ordner bereit.

Einen Editor gibt es nicht. Alles Änderungen werden in den Dateien selbst vorgenommen. Das ist komplex – lässt dir aber alle Freiheiten. Wie du damit zurechtkommst, werde ich gleich erklären.

PictureStory ist – wie der Name bereits impliziert – auf Fotografie zentriert. Natürlich können im Grunde alle Medien in dein HTML integriert werden. Das Template hat sich aber auf die gute Darstellung von Bilder spezialisiert. Aber schau selbst.

 

Anschauungsbeispiel

Clipboard01Clipboard01

Das Template

Lade dir als Erstes das Template herunter und entpacke die ZIP-Datei. Du erhälst dann eine Ordnerstruktur, in der sich unter "stories" (s. Bildergalerie) einige Beispielgeschichten befinden. Öffne eine dieser HTML-Datei mit einem Texteditor. Ich empfehle hierfür das formidable Programm Notepad++.

Notepad++ färbt dir den Code dankbarerweise ein. Was schwarz gefärbt ist, wird später als Text auch tatsächlich erscheinen. Blau erscheinen HTML-Befehle, grün Kommentare.

Der Code

Leider ist der Code der Templates nicht ganz so übersichtlich programmiert. Ich habe deswegen einen kommentierten Code des Dummybeispiels hochgeladen. Der Dummy enthält alle in PictureStory vorgesehenen Bild-Text-Kombinationen. Ich empfehle dir, dieses HTML-Sheet herunterzuladen bzw. den Code in eine Textdatei zu kopieren und mit Notepad++ zu öffnen. Dann solltest du den Code ganz langsam anhand der grünen Kommentare durchgehen. Damit er auch im Browser funktioniert, musst du ihn in die Ordnerstruktur von PictureStory unter "Picture-Story-master/compiled" abspeichern und mit einem Browser öffnen.

In der Bildergalerie habe ich dir einige der wichtigen Codeabschnitte abgelichtet, damit du einen ersten Eindruck hast. Zugegeben: Es ist am Anfang abschreckend und Frickelarbeit – vor allem für Anfänger. Aber wenn du ein wenig Lust auf Technik mitbringst, solltest du es schaffen.

Natürlich kannst du auch andere Medien als Bilder in den Code integrieren. Dafür brauchst du nur den Einbettungs-iFrame-Code deiner Videos, Audios oder Infografiken. Copy'n'Paste an die richtige Stelle und schon sollte das Snippet geladen werden.

Der Server

Wenn du mit Notepad++ arbeitest, solltest du deinen Code nach einem Speichern über die Schaltfläche "Ausführen" häufig überprüfen. So siehst du jede Veränderung deines Befehle gleich im Browser.

Tricks für Pros
Blöderweise sind in PictureStory keine Parallax-Bilder vorgesehen. Ich habe deswegen in das im Text angesprochene Erklärstück ein Parallax-Bild hineinprogrammiert, das du nutzen kannst. Damit auch Anfänger davon profitieren, habe ich Inline-CSS genutzt. Wenn du ein Purist bist, steht es dir natürlich frei, den Code ins CSS-Sheet zu überführen.

Hast du alle Änderungen eingepflegt, speichere deine HTML-Datei ab und lade die gesamte Ordnerstruktur auf deinen Server. Ich empfehle hierzu das FTP-Programm Filezilla. Wenn dir das noch zu hoch ist, kannst du deine Webreportage auch auf Google Drive oder einer vergleichbaren Cloud hosten. Einfach hochladen und unter "Freigeben" "Öffentlich im Web" einstellen. Alle anderen Freigabe-Einstellungen reichen nicht aus. Beachte, dass du in diesem Fall die Links zu CSS und JavaScript neu setzen musst. Die Adresse ändert sich hier zu "googeldrive.com/host" und dann die ID der entsprechenden Dateien. Auch diese müssen öffentlich im Netz zu finden sein.

Hast du das alles endlich geschafft, bleibt dir eigentlich nur, dir den Schweiß aus der Stirn zu wischen. Denn du hast Großes geleistet ... und wahrscheinlich viel gelernt. Top!

Pro

PictureStory ist nicht kommerziell. Es ist Opensource. Es lässt dir alle Freiheiten. Es ist – das blieb bisher unerwähnt – responsiv, passt sich also der Größe deines Browsers an. Hinzu kommt: Es ist einfach schön. Minimalistisch, schlicht, edel. Wer schlanke Webreportagen ohne großes Geschnörkel bauen will, für den ist PictureStory eine gute Wahl.

Kontra

Seien wir ehrlich: PictureStory ist was für Pros. Wenn du nicht so sehr auf Coding und Hosting stehst, solltest du dir ein anderes Programm suchen. Darum kommst du bei PictureStory einfach nicht herum. Auch könnte der Code übersichtlicher geschrieben sein. Doch für den allgemeinen Gebrauch war das Programm wohl nie ausgelegt.

Bleiwüsten abonnieren:

Fazit & Alternativen

Als jemand der schon viele – teils sehr mächtige – Programme gesehen hat, gefällt mir PictureStorys Bescheidenheit. Da ist nichts, was da nicht hingehört, da ist kein Protzen mit fünfzigtausend Zusatzfunktionen. Wenn du sie willst, codiere sie halt selbst. Oder lass es. Das ist sympathisch.

coole Beispiele

Alternativen gibt es einige, die jeweils unterschiedliche Schwerpunkte bei den Mediengattungen setzen:

Da haben wir zum Beispiel das videolastige Klynt, das meine Kollegin Daniela Späth als das beste Programm dieses Jahres bezeichnete. Weiterhin das magazinartige, aber ebenfalls ein wenig anspruchsvolle Readymag, das wunderbar mit großen Hintergrundbildern arbeitet.

Storyform wird ein wenig Zeit verlangen, wenn du deine Webreportage wirklich zu einem Edelstein formen willst. Aber auch dieses Programm hat großes Potential. Racontr widerum legt seinen Schwerpunkt auf Multimedialität. Meist eine gute Wahl.