10 Jan 2018

Technisches Update / Darstellungsoptionen

Submitted by Bernd

Insbesondere wegen der in diesem Jahr geplanten Touren durch Europa ist ein Update der primär optischen Darstellungsmöglichkeiten dieser Website angezeigt. Eine kleine, dann doch etwas umfangreicher geratene Einführung mag den Umgang mit alten und neuen Funktionen etwas deutlicher machen und darüber hinaus gewisse Hintergründe erläutern.


Eigentlich bin ich kein Freund von audiovisuellem Overkill, mag weder automatisch aufpeppende Fenster, noch ungefragt loslaufende Videos. Auch (Bilder)galerien, lediglich für das Erzeugen von Klicks (potentiell für Werbetreibende) zuständig, die mag ich nicht wirklich. Aber gerade das Thema der bislang hier auf der Website fehlenden Bildergalerien war ein erster Anstoß, das ganze Thema etwas weiter auszurollen.

Was ich ebenfalls nicht so toll finde, das ist diese Überfrachtung der Webseiten, insbesondere der Einstiegsseiten mit vielen Bildern, vielen Videoanrissen und anderen Gimmicks. Bin eher ein Textmensch, der lesen möchte, was ihn ggf. auf der Seite erwartet. Mal abgesehen von der oft nicht beachteten Tatsache, dass derartiger optisch-akustischer Overkill das Laden der Seite beeinträchtigt. Nicht nur im kommerziellen Umfeld kommen dann noch jede Menge Tracker, Traps&Buttons, sowie weitere Analysetools hinzu; die ja auch erstmal geladen werden müssen, eher dann das angezeigt wird, weswegen man diese Website eigentlich ansteuert.

Insofern geht meine Antwort dahin, auf der Einstiegsseite zu einem Blogtext nur das an optischen Unterbrechungen des Textflusse anzubieten, was wirklich notwendig ist. Alles andere mag mindestens eine, gar zwei Ebenen tiefer angesiedelt sein, mag anklicken und aufrufen, wer sich von der Erläuterungen und den wenigen optischen Inhalten angesprochen fühlt, darüber dann ein Interesse nach Vertiefung entwickelt.

- - - - -

Die technische Basis für das vorgenannte Konzept bilden die sogenannten Inhaltetypen des hier eingesetzten CMS namens Drupal. Für bestimmte Inhalte optimiert sind verschiedene Inhaltstypen hinterlegt und werden bei Erstellung eines Blogtextes als jeweilige Sub-Seiten mit Leben erfüllt und können dann vom übergeordneten Haupttext her aufgerufen werden.

Diese Subseiten haben ein äußerst eingeschränktes Funktionsspektrum, haben beispielsweise keine eigenständige Kommentarfunktion, keinen separaten Titel und es gibt keine Möglichkeit, für diese Seiten sog. Tags (Stichworte) zu hinterlegen. Dafür sind sie in das unter der Website liegende Dateisystem einbebunden und bringen bestimmte Zugriffsstrukturen per Definition gleich mit. Folgende Subseiten sind jetzt verfügbar:

1. Eine allgemeine Medienseite für (einzelne) Bilder, aber auch für extern (Youtube, Vimeo etc.) gehostete Videos

2. Eine Galerieseite, über die der Zugriff auf eine dort hinterlegte Bildergalerie möglich ist

3. Eine Videoseite, auf der interne, eigene Videos abgespielt werden können

4. Eine Kartenseite, auf der insbesondere Routen (Google Maps) eingebunden und angezeigt werden können

 

Auf allen Seiten besteht unterhalb der primär dort angezeigten und verwalteten Inhalte die optionale Möglichkeit, weitere Erläuterungen zu eben diesen Inhalten anzugeben; sprich: die übergeordnete, diese Subseite aufrufende Hauptseite davon weitgehend frei zu halten. Möglich wird diese Art der Integration durch den relativ leistungsfähigen Editor, der es nur selten nötig macht, in die doch schon etwas komplexen Bereiche von purem HTML oder gar Javascript einzusteigen. Via Browser getestet wurden die folgenden Beispiele mit Firefox, mit Chrome, mit Opera und mit dem von mir primär eingesetzten Pale Moon.

Für die vier genannten Unterseiten sollen hier nun einige Beispiele folgen, fungiert dieser Blogtext exemplarisch als Hauptseite. Vorab jedoch noch einige Bemerkungen zur Darstellung von Bildern, wenngleich dies auch bislang bereits Stand der Technik hier war.


Bilder (an sich):

In der Regel müssen Bilder vor einer Verwendung auf der Webseite bearbeitet werden. Allein die schiere Größe, welche moderne Digitalkameras heute als Bilddatei liefern, sie verbietet es aus Gründen der Performance, diese Bilder im Normalfall  in eben dieser Größe einzustellen. Dazu und eher im kommerziellen Bereich angesiedelt, mögen Gründe kommen, die Bilder nur in einer eingeschränkten Qualität anzubieten. Außerdem kann es auch Gründe geben, die Bilder aus Gründen der besseren Darstellbarbeit nachzuarbeiten, sie anders zu positionieren, zu drehen oder als Bildausschnitt zu verwenden. Ändereungen bei Kontrast, Helligkeit und Schärfe mögen hinzukommen. Schlußendlich ist auch der Datenschutz bzw. der Persönlichkeitsschutz einzuhalten. Autokennzeichen beispielsweise sollten in der Regel unkenntlich gemacht werden und auch die Gesichter von unbeteiligten Personen müssen ggf. verfremdet werden.

Für die gesamte Bildbearbeitung wird von mir primär das Opensource-Tool IrfanView  eingesetzt. Das Format der dann hier auf der Website eingesetzten Bilder wird im Horizontalmodus auf maximal 1600x900 Pixel reduziert und die Dateigröße auf maximal 0,5 Megabyte (500 Kilobyte) komprimiert. Im Original, dem was meine aktuelle, bestenfalls Mittelklassekamera (Sony HX50V) liefert sind dies 5184x2920 Pixel (bei 350 DPI) mit einer Dateigröße zwischen 5 und 7 Megabyte.

Der hier unter dem CMS Drupal eingesetzte Editor bietet umfangreiche Möglichkeiten, einzelne Bilder (aus externen wie internen Quellen) hier in einem Blogbeitrag einzubinden (einzubetten) und darzustellen. Externe Bilder sollten und werden schon aus rechtlichen Gründen lediglich eingebettet und mit einem hinter dem Bild einzubringenden Link auf die Originalquelle versehen; einschließlich dem obligatorischen Quellennachweis. Das kann dann, als neuer Tab eröffnet, aussehen, wie in diesem Blogbeitrag.

Primär wird es hier jedoch im eigene Bilder gehen, welche vorab in die entsprechenden Unterverzeichnisse dieser Website hochgeladen werden. Einzelne Bilder werden in der Regel als sogenanntes Popup dargestellt. Oben rechts im Rahmen befinden sich die üblichen Symbole bzw. Buttons zum Reduzieren des Bildes auf die Taskleiste, zum Vergößern auf den gesamten Bildschirm und zum Schließen der Bildanzeige.

Anstelle eines Links zum Popup kann natürlich auch ein kleines Vorschaubild als Einstieg dienen.

Der Vorteil dieser Variante liegt u.a. darin, dass ggf. hier eine Erklärung zum Bild angegeben werden kann.

Ein Klick auf das Bild bringt dann das bereits erwähnte Popup zur Anzeige.


 

 


Unter dem Bild mag nun der normale Text (des Blogbeitrages weiter gehen. Falls mehrere, thematisch ggf. zusammenhängende Bilder dargestellt und erläutert werden sollen, so bietet sich die auch bislang bereits eingesetzte, oben als erste genannte Medienseite (Subseite) an.



Medienseite (Bilder):

Mehrere, thematisch zusammenhängende Bilder werden auf der Medienseite dargestellt, in der Regel in einer modalen Colorbox (Drupal-Modul). Zusätzlich ist in diesem ebenfalls -aber eben anders als das vorgenannte Popup- aufpeppenden Rahmen unterhalb der Bilder ein entsprechender Erklärungstext möglich. Die Bilder selbst sind anklickbar und werden dann und wie vorher beschrieben in einem normalen Popup geöffnet.

Als Link aus dem Haupttext könnte das dann  so aussehen ..... gar so aussehen

Natürlich, falls eine umfangreichere Erklärung sinnvoll erscheint, dann kann diese modale Box auch für ein einzelnes Bild zum Einsatz kommen.

Geschlossen wird diese Box, dieser modale Rahmen entweder unten rechts mit einem Klick auf das [x]; oder einfach einem Klick außerhalb des Rahmens. Den "Zurück" Button des Browsers sollte man in dem Falle nicht verwenden, führt er doch auf den Anfang der gesamten Website..



Galerieseite:

Nun geht es zur (Sub)seite der Bildergalerien, eigentlich der primäre Anlaß, hier ein kleines, technisches Update der Darstellungsmöglichkeiten vorzunehmen. Bildergalerien können zur Erläuterung des Haupttextes durchaus nützlich sein, sollten meiner Meinung nach jedoch nicht als sog. Klickstrecken vorab unbekannter Inhalte daher kommen, wo man sich von einem Bild zu nächsten hangeln muss, um vielleicht, irgendwann  etwas interessantes zu sehen. Erst recht mag ich keine selbst laufenden und gar noch revolvierenden Diaschows als (lediglich) Animation.

Der Schwerpunkt einer Bildergalerie sollte nach wie vor das einzelne Bild sein, welches man gezielt ansteuern, ggf. auch noch weitergehend optisch darstellen kann. Eine Erläuterung pro Bild, im Bild muß möglich sein und schlußendlich kann jedes Bild, darf jedes Bild dieser Webseite zum privaten Gebrauch heruntergeladen und incl. Quellennachweis auch weiterverwendet werden.

Für das hier eingesetzte CMS (Content Management System) namens Drupal gibt es verschiedene Möglichkeiten, derartige Galerien einzubinden, sind mehr oder weniger komplex bei der Installation und Konfiguration, bieten ähnliche, aber auch ganz unterschiedliche Möglichkeiten der Darstellung. Manchs ist eher im Hobbybereich angesiedelt, anderes ist skalierbar bis hin zu hoch professionellen (ggf. auch kostenpflichtigen) Ansprüchen.

Nach diversen Tests incl. einer jeweiligen Recherche zu den weiterführenden Möglichkeiten fiel meine Wahl auf Juicebox. Ein netter Mensch, der sich offensichtlich sowohl mit dieser Box, als auch mit Drupal auskennt, er hat eine entsprechende Schnittstelle programmiert, ohne die es kaum ginge, mir der ansonsten zu leistende Aufwand dann doch zu hoch gewesen wäre.

Neben der kostenlosen, hier nun eingesetzten "Lite"-Version gibt es für rund 50 Euro auch eine "Pro"-Version mit erweiterten Möglichkeiten. Entscheidend (für mich) und bereits in der kostenlosen Variante enthalten ist eben diese, wie ich es nenne, Konzentration auf das einzelne Bild. Beispielsweise ist die unter dem jeweils aktiven Bild (auch im Full-Screen Modus) wahlweise anzeigbare Galerie der Vorschaubilder genau das, was mir wichtig ist. Man kann gezielt ein Bild ansteuern und hat oben rechts drei Buttons bzw. Schaltflächen zur Variation der Anzeige genau dieses aktuellen Bildes.

Hier ein erster Eindruck ...

Die Galerie wird in einem neuen Tab geöffnet und sollte auch darüber wieder geschlossen werden. Zusätzlich ist via dem "Panikknopf" (oben links) der Rücksprung auf die Startseite der gesamten Webspace möglich. Wenn die Maus in den aktiven Bereich der Galerie bewegt wird, dann erscheinen oben rechts die drei genannten Schaltflächen und außerdem mittig des Bildes am rechten und/oder linken Rand die kleinen Dreiecke für das nächste bzw. vorherige Bild. Soweit hinterlegt, wird links unten im aktuellen Bild selbst eine Beschriftung angezeigt,  Über die unter dem aktuellen Bild angeordnete Leiste der Vorschaubilder kann gezielt jedes einzelne Bild angeklickt und zum aktuellen gemacht werden, ist der Umfang der Galerie ebenfalls erkennbar. Mehr als zehn Bilder sollten es im Normalfall nicht sein.

Die drei Schaltflächen oben rechts haben folgende Funktionen: Mit dem linken Button können die kleinen Vorschaubilder am unteren Rand aus- bzw. eingeblendet werden. Das aktuelle Bild selbst wird beim Ausblenden dann sofort entsprechend größer dargestellt. Dieses Prinzip funktioniert ebenfalls, soweit der rechte Button angeklickt, auf Vollbild umgeschalten wird. Der mittlere Button öffnet das aktuelle Bild in einem neuen Tab, welcher es ermöglicht die ansonsten gesperrte rechte Maustaste zu benutzen (Kontextmenü) und darüber beispielsweise das aktuelle Bild herunter zu laden.

Natürlich, statt über einen reinen Textlink kann die Galerie ebenfalls über ein entsprechend vorbereitetes Einstiegsbild aufgerufen werden.

 

 

 


 

Medienseite (externe Videos):

Die einfachste Art Videos auf der Webseite einzubinden besteht darin, diese extern gehosteten Inhalte (hier eben Videos) einfach einzubetten. Sie sind dan physikalisch weiterhin ausschließlich auf der Webspace des Hosters vorhanden, was nicht zuletzt auch eine rechtliche Frage (Urheberrecht) sein kann. Um mit eigenen Videos ebenso verfahren zu können, muss man sich bei so einem Videohoster einen Account anlegen, kann dann dorthin seine (eigenen) Videos hochladen und auf einer beliebigen anderen Website wieder einbetten (soweit die dafür notwendigen Rechte gegeben sind).

Der bekannteste Hoster für Videos ist die Google-Subdivision Youtube; und ist keinesfalls umsonst, auch wenn es so gern beworben wird. Permanente Werbung muss man schon hinnehmen, und was mit den bei der Einrichtung und Nutzung eines Accounts anfallenden Daten geschieht, das kann hier nur vermutet werden. Eine Alternative zu Youtube ist Vimeo, vollkommen ohne Werbung und andere Gimmicks, jedoch oberhalb eines in Funktion und Performance beschränktem Basisaccounts dann kostenpflichtig. Bei beiden genannten Hostern wird von mir ein Account unterhalten, jedoch weitgehend lediglich zu Test- und Vergleichszwecken.

Das Einbetten von externen Videos erfolgt im Normalfall mit einen sogenannten "iframe", einer HTML-Sequenz, welche von den zwei genannten, externen Hostern für nahezu jedes Video bereits vorkonfiguriert angeboten wird. Man braucht dieses Codefragment -entsprechende Rechte vorausgesetzt- dann lediglich mit copy&paste in die eigene Website einzufügen, muss dies jedoch im Sourcecode justiert, an die richtige Stelle gebracht werden und es sind ggf. noch einige Parameter anpassen.

Ein über "iframe" (weiterhin möglich) hinaus gehender Weg wird hier auf der Website beschritten und beinhaltet zusätzlich noch einige weitere Konfigurationsmöglichkeiten. Über einen im Editor verfügbaren Button kann ein Video der genannten Hoster (und anderer) an einer beliebigen, einfach über das Setzen des Cursors zu definierenden Stelle der Website eingefügt und dabei über einen kleinen Dialog mit verschiedenen Parametern versehen werden. Ein Vorteil dieser Vorgehensweise liegt im Folgenden:

Während der iframe ohne Anpassung des HTML-Codes immer die ganze Breite der Websitearea einnimmt und dabei die vom Hoster definierte Größe des Videos fix vorgegeben ist, so kann über die Buttonlösung via einem dahinter liegenden kleinen Drupal-Modul nicht nur die Größe des Videos vorgegeben werden, sondern es können auch mehrere verschiedene Videos horizontal nebeneinander angeordnet werden.

Auf eine Sub-Seite (hier: Medienseite) ausgelagert  könnte es so aussehen. Erklärung (etwas runterscrollen) eben dort ...

Die Medienseite wird ebenfalls in einem neuen Tab aufgerufen, sollte auch so wieder geschlossen werden, wennkleich der Panikknopf (oben links) ebenfalls verfügbar ist. Innerhalt dieser Medienseite (2. Ebene) wird im unteren Bereich über ein Anrißbild eine weitere Medienseite (3. Ebene) als ebenfalls nun neuer Tab aufgerufen und dort ein Video sofort gestartet. Mehr Ebenen als diese drei soll es aus Gründen der Übersichtlichkeit hier auf der Website nicht geben.

Noch ein Wort zur Größe der eingebetteten und separat angezeitgten Videos. Weder bei Youtube noch bei Vimeo und auch nicht hier auf der Website ist es dem Nutzer möglich, die Größe des videos variabel, gar stufenlos anzupassen. Das ist technisch auch nicht wirklich trivial; im Gegenteil. Was in der Regel dagegen immer geht, das ist der Modus als Vollbild, unten rechts im Video über die eingeblendete Schaltfläche aufrufbar. Mit einem Doppelklick auf das Vollbild oder mit der ESC-taste kann dieser Modus wieder verlassen werden.

Daher muss man sich als Entwickler einer Website entscheiden, in welcher Größe das Video erscheinen soll. Dabei ist auch zu beachten, dass nicht jeder Nutzer über einen entsprechend großen Full-HD (oder mehr) Bildschirm verfügt. Laptops mit einer maximal darstellbaren Breite von 1200 bis 1600 Pixeln sind auch heute noch gängig. Üblich ist außerdem das sog. 16 zu 9 Format und somit ein Verhältnis von 1,77 zu 1 (Breite zu Höhe). Andere Formate werden dann mit schwarzen Balken (seitlich bzw. oben und unten) dargestellt. Die hier auf den separaten Medienseiten oder den Videoseiten (nächster Abschnitt dargestellten Videos haben -bis auf einige ältere- eine fixe Größe von 720 x 405 Pixeln; sind natürlich immer auch auf Vollbild einzustellen.



Videoseite (interne Videos):

Bei eigenen Videos bzw. dort wo man alle Rechte besitzt, da sollte man schon überlegen, ob und warum man diese Inhalte einem externen Hoster zur Verfügung stellt. Klar, wer auf Traffic aus ist, wer gesehen werden will, wer dahingehend gar komerziell unterwegs ist, der hat beinahe keine andere Wahl. Für den Rest von uns und soweit die gegenüber dem externen Hosten und dann Einbetten nicht ganz so trivialen technischen Rahmenbedingungen darstellbar sind, für uns  gibt es die nun hier vorgestellte und auf dieser Website genutzte Möglichkeit des eigenen Hosting.

Hier kommt das erste Video, wird im Browser in einem neuen Tab geöffnet. Das gleiche Video wird nun in einem Popup  geöffnet.

Beide Varianten sind im Editor sehr einfach einstellbar, unterscheiden sich jedoch danach, ob und wie sie (Tab oder Popup) geschlossen werden. Das Popup wird rechts oben mit dem [X] geschlossen, während der neue Tab in der Browser-Adressleiste geschlossen werden muß. Das sollte man auch so handhaben, aber beides ist nicht zwangsläufig und via dem weiter oben bereits erwähnten "Panikknopf" (oben links) ist auch noch der Rücksprung auf die Startseite der gesamten Website möglich. Der Unterschied beim Schließen via Startseite besteht nun darin, dass der neu eröffnete Tab ebenfalls geschlossen wird, während ein Popup weiterhin vorhanden ist, wenngleich ggf. überlagert.

Für Videos und im Gegensatz zu (einzelnen) Bildern wird daher hier das Öffnen via neuem Tab bevorzugt. 

Wahlweise und wie bekannt, kann man das Video in dessen Fußleiste (links) einfach anhalten oder (rechts) bildschirmfüllend vergrößern - zurück mit [Esc].

Ansonsten und kurz zur Technik, welche dahinter steht. Um innerhalb der Website gespeicherte (eigene) Videos abzuspielen ist ein sog. Videoplayer erforderlich. Das unterscheidet diese Art der Darstellung, technisch nicht ganz so trivial, von dem (lediglich) Einbetten der Videos via Youtube etc. Daher wird hier ein separater, genau dafür vorbereiteter Inhaltstyp (Subseite) verwendet.

Abschließend zu diesem Bereich sei erwähnt, dass das Video auch über ein hier hinterlegtes Bild gestartet werden kann. Das ist oftmals aussagefähiger als ein reiner Link, wie weiter oben beispielhaft verwendet. Das kann dann so aussehen:

Das Bild ist mit einem Rahmen versehen und optisch etwas eingerückt.

Gleichzeitig kann wie hier gezeigt, auch der Text um das Bild herum angeordnet sein.

Das Video wird ebenfalls in einem neuen Tab geöffnet.

 


Was bei eigenen Videos wichtig sein kann, dass ist ein nachträgliches Entfernen von Verwacklungen. Gerade wenn man (like me) priär ohne Stativ und aus der Hand fotografiert und eben auch filmt, dann lässt sich ein Verwackeln kaum vermeiden. Teure Videokameras können das bereits während der Aufnahme begrenzen, aber das von mir eingesetzte 200-Euro-Modell eben nicht. Es gibt verschiedene, in der Regel 30 bis 50 Euro teure Tools, mit denen man das Verwackeln auch nachträglich noch reduzieren kann. Einher geht dies jedoch mit einer mehr oder weniger großen Steigerung der Unschärfe.

Insofern -Asche auf mein Haupt- kommt dann doch wieder das kostenlose Youtube ins Spiel. Wenn man dort einen Account besitzt, dann kann man Videos hochladen, sie mit dem im Videomanager angebotenen Tool entwackeln und wieder runterladen; anschließend und falls sonst dort nicht benötigt das Teil bei Youtube wieder löschen. Die Veringerung der Qualität (Minderung der Schärfe) ist nach meinem Eindruck sogar geringer als bei denjenigen Tools, die von mir bislang, via einer oft angebotenen kostenlosen Schnupperversion getestet wurden.

 

Kartenseite Google Maps):

Eigentlich, ja eigentlich wollte ich anstelle der Datenkrake Google für die (interaktive) Kartendarstellung nun Openstreetmap verwenden. Ausführliche Tests brachten (mir) jedoch das Ergebnis, dass Google für die Anforderungen dieser Website, insbesondere für das Tourmanagement inclusive dem Routing über bis zu zehn Zwischenstopps momentan die bessere Lösung ist. Und die Betonung liegt hier bei dem Wort "interaktiv", da der Nutzer die Möglichkeit haben soll, auf Basis der hier jeweils angebotenen Karte dann selbst weiter zu navigieren.

Karten und Routen werden hier in der Regel ebenfalls auf einer Subseite dargestellt und dann als neuer Tab aufgerufen. Diese Subseite enthält in ihrer Grundkonfiguration zwei Bereiche, einen für den via Goggle-Maps angebotenen "iframe" (ähnlich dem bei Videos), und einen darunter liegenden Bereich für ggf. angefügte Erläuterungen zu eben dieser Karte.

Das Ganze kann via einem Link dann so aussehen

Das Bewegen, verschieben (linke Maustaste drücken und gedrückt haltend die Maus bewegen) und Zoomen der Karte ist genau so möglich vie von Google-Maps eh bekannt. Links oben über den Punkt "Weitere Optionen" ist die Karte im Detail mit allen darin enthaltenen Zwischenstopps aufrufbar. Die Größe der initial angezeigten Karte ist zwar in dem von Google bereit gestellten "iframe"-Code angegeben, kann jedoch angepasst werden.

 

Klar, auch hier nur der Vollständigkeit halber angegeben, so kann die Karte natürlich auch über ein kleines, eher symbolhaftes denn interaktives Vorschaubild aufgerufen werden.

Einfach mal d'rauchklicken.

 

 

- - - - -


Zum Abschluß noch ein Hinweis, da es sich bei den hier und insgesamt auf dieser Webpräsenz dargestellten Inhalten zum großen Teil um eigenes (mein) Material handelt, so stehen diese Inhalte uneingeschränkt unter Creative Commons  in der Version 4.0