Schöner Bloggen

Dienstag, 6. Februar 2018

Die Blogaufräum-Heldenliste

Wichtiger Hinweis

Schlechte Zeiten für Bloghelden: Mit der Bekannt­gabe des Abschalt­datums von Twoday zum 31.05.2018 ist diese Initiative zur Blog­bereinigung obsolet geworden. Nutzen Sie die ver­bleibende Zeit zur Sicherung Ihrer Blog­inhalte, z.B. mit diesem Tool.

https-ergebnisse.jpg

Jede Initiative, und besonders eine zur Verbesserung dieser Blogplattform, ist sinnlos, wenn man nicht deren Wirksamkeit misst, mindestens um zu analysieren, ob der Aufwand sich gelohnt hat, oder ob man die Maßnahme vielleicht verbessern kann, oder — ganz elementar — ob überhaupt noch Interesse an einer organisierten Heilung von Mängeln besteht.

Nun ist von den inaktiven Blogs (die habe ich für mich mal definiert als die Blogs, bei denen die letzten 90 Tage kein neuer Artikel hinzugekommen ist) wahrscheinlich eh nichts mehr zu erwarten, aber immerhin bleiben noch aktive Blogs, deren Besitzer:Innen noch ein Interesse an der Fehler­freiheit und einer minimalen Erhal­tungs­pflege dieser Plattform haben könnten.

Doppelt schade, wenn man nach doch angemessener Zeit feststellt, dass nur wenige Mutige das Angebot aufgegriffen haben und die bei weitem überwiegende Menge bislang nicht bereit war, das wenige eigene Mögliche beizusteuern, um Twoday zumindest graduell zu verbessern (oder sagen wir besser: nicht weiter absinken zu lassen).

Sieben. Obwohl, eigentlich sind's nur sechs, da Frau Araxe gleich zwei ihrer Blogs in der Liste verantwortet. Sechs also haben mitgemacht. Hm, tatsächlich nicht besonders ermutigend, wenn eine Lösung von weniger als derjenigen genutzt wird, für die sie gemacht wurde. Daher geht mein Dank an die Sechs, die Bloghelden, die Technik-Avantgardisten, die Nicht-Aufgeber, die Anpacker und Macher, die, die nicht nur rumnörgeln, sondern selbst einen Beitrag leisten (Bonuslob an der Stelle für Herrn Blödbabbler für die 100%-Abdeckung, zweites Bonuslob für Frau Araxe als einzige teilnehmende Frau ;).

 Stand:

Aktive Blogs Inaktive Blogs
Übersicht
  • Letzte Änderung <=
  • Twoday Blogs
  • davon mit http-Urls
  • und mit altem rootStat-Skin
  • bereinigt wurden:
  • Letzte Änderung >
  • Twoday Blogs
  • davon mit http-Urls
  • und mit altem rootStat-Skin
  • bereinigt wurden:
HTTP-Referenzen bereinigt?
Skin root.statsCounter bereinigt?
Die ultimative Heldenliste

heldenkranz.png

 Diese großherzigen, lösungsorientierten, avantgardistischen, community-unterstützenden Vorreiter-Blogs haben ihre Blog-Bereinigung bereits erfolgreich durchgeführt (mit Herrn Blödbabbler als primus inter pares, weil Doppel-ja rules!!! Respekt!!). 

Blogheld Referenzen bereinigt? root.statsCounter bereinigt?

Sie wollen auch auf die Heldenliste? Hier startet der sichere Weg dahin.

Motivationshilfe für Nachzügler

Womöglich sind sich einige Blogger:Innen noch gar nicht recht bewusst, was der https-Modus für ihr Blog bedeutet und dass die meisten ihrer Besucher dort sehr viele leere Stellen bzw. nicht funktionierende Sidebar-Elemente sehen. Ein Aufruf des eigenen Blogs mit vorangehendem https://-Kürzel hilft beim Erkennen der Probleme. Insbesondere den folgenden Top10-Bloggern mit den meisten unwirksamen http-Urls wäre dies ans Herz zu legen:

Blog Unwirksame http-Urls https-Blogadresse (Check)

Anmerkung: quh und corum sind mit ihren Blogs bereits umgezogen.

Weitere Informationen zu den Detailproblemen in den Blogs kann man hier finden — ansonsten gerne Frage als Kommentar hinterlassen oder ein Mail senden.

Donnerstag, 25. Januar 2018

Korrigiert Eure Blogs! Jetzt!

Wichtiger Hinweis

Schlechte Zeiten für Bloghelden: Mit der Bekannt­gabe des Abschalt­datums von Twoday zum 31.05.2018 ist diese Initiative zur Blog­bereinigung obsolet geworden. Nutzen Sie die ver­bleibende Zeit zur Sicherung Ihrer Blog­inhalte, z.B. mit diesem Tool.

https-umstellung.jpg

Ihre Blogcounter- und Statistiklösungen funktionieren nicht mehr richtig? Ihre Sidebar-Widgets erscheinen nicht? Eingebettete Videos werden mal angezeigt — und dann wieder nicht? Hier finden Sie die Lösung dieser Probleme, die übrigens auch zu der viel kritisierten Google-Penalty beitragen. Ein Grund mehr für alle Twoday-BloggerInnen, zumindest mal diesen Stein des Anstoßes aktiv beiseite zu räumen.

Vor ziemlich genau einem Jahr hat Twoday auf einen zweigleisigen Protokollbetrieb umgestellt: seither können alle Blog- und Plattformseiten entweder im http- oder im https-Modus aufgerufen werden.

Leider gibt es keine strikte Festlegung, welcher Modus verlässlich genutzt wird und so ist man, je nachdem, mit welchem Aufruf man zu twoday.net gelangt ist, mal im unsicheren http, mal im sicheren (weil verschlüsselten) https Mode:

URL-Aufruf im Browser Aktivierter Modus
twoday.net http
http://twoday.net http
www.twoday.net https
http://www.twoday.net https
https://twoday.net https
https://www.twoday.net https

Da man so nicht sicherstellen kann, in welchem Modus Besucher auf das eigene Blog gelangen (und die Wahr­schein­lich­keit für https zudem deutlich größer ist), hat das gravierende Auswirkungen auf die Blog­funktio­na­li­tät. Ist ein Besucher nämlich im sicheren https-Modus, verweigert der Browser die Ausführung und Anzeige aller Ressourcen, die im Blog per "unsicherer" http-URL aufgerufen werden, z.B.

  • script-Aufrufe (z.B. Counter, Statistiken, IP-Anzeigen)
  • embed-Befehle (z.B. Youtube-Videos)
  • iframe-Einbettungen (z.B. Wetter-Widgets, Facebook, FeedJit Live Traffic)

Dies bedeutet, dass Ihre Counter-/Statistik-Skripte nicht ausgeführt werden, Embed-Videos schwarz bleiben und iframe-Einbettungen nicht erscheinen! Die Lösung dieses Problems ist im Grunde einfach:

Nur URLs, die mit https beginnen, werden immer (d.h. in allen Modi) ausgeführt!

Ein Besucherzähler, der nur Besucher zählt, die über http auf den Blog kommen, ist sinnlos, ebenso wie ein embed-YouTube-Video, das bei einem Besucher angezeigt wird und beim nächsten nicht.

TippStellen Sie alle script-, embed- und iframe-Aufrufe in Ihrem Blog auf https:// um.

Im Prinzip ist diese Umstellung sehr einfach: Sie müssen die unwirksamen http-Referenzen identifizieren und im Blog (= Ihren Twoday Skins oder Beiträgen) finden, dann prüfen, ob der Anbieter auch https bereitstellt, um anschließend das http-Kürzel auf https zu ändern. Im folgenden beschreibe ich, wie das am effektivsten geht.

1. Unwirksame http-Referenzen identifizieren

Zur Unterstützung habe ich ein kleines Tool entwickelt, das für die zuletzt geänderten 750 Twoday-Blogs (das sind die ersten fünfzig Seiten der Twoday-Blogroll) alle unwirksamen http-Aufrufe findet und auflistet.

Das Tool durchsucht dabei nicht Ihren gesamten Blog, sondern nur die aktuelle Homepage und die derzeit dort angezeigten Beiträge. Die Analyseergebnisse werden nicht realtime ermittelt, sondern reflektieren die Resultate des letzten Analyselaufs vom .

Zeige Analyseläufe bisher 

Lauf Datum
#

Wenn Sie Änderungen in Ihrem Blog vornehmen, werden diese erst nach dem nächsten Analyselauf hier angezeigt!

Bitte wählen Sie in der nachstehenden Auswahlbox Ihren Blog aus, um unwirksame http-Aufrufe anzuzeigen, die in Ihrer Homepage verwendet werden:

http-Referenzen von Twoday-Blogs (Stand: )
Icon
https://

.twoday.net
https.jpg
Lade Bloginformationen...

Falls Sie eine grüne Nachricht erhalten: Prima! Ihre Homepage und die dort angezeigten Beiträge enthalten keine unwirksamen http-Aufrufe. Sie brauchen nichts zu unternehmen.

Eine rote Nachricht zeigt an, dass in Ihrem Blog unwirksame http-Aufrufe gefunden wurden. Diese werden unter der Nachrichtenbox vollständig mit dem jeweiligem HTML-Befehl und der verwendeten (hier evtl. verkürzt angezeigten) URL gelistet.

2. Stellt der Anbieter den Dienst auch per HTTPS bereit?

Zunächst macht es Sinn, zu prüfen, ob die verwendete http-URL überhaupt noch existiert. Mancher Anbieter ist aus dem Markt gegangen oder von anderen Unternehmen übernommen worden (Bsp. sitemeter.com, formspring.me). Falls die URL-Adresse gültig ist und Sie dieses Angebot/diese Funktion weiter in Ihrem Blog nutzen möchten, ist zu prüfen, ob dieser Service auch im sicheren HTTPS Modus verfügbar ist.

Für die wichtigsten und am häufigsten verwendeten Dienste finden Sie nachstehend diese Information — für andere müssen Sie diese ggf. selbst ermitteln. Ist die URL jedoch nicht mehr sinnvoll nutzbar, entfernen Sie die Referenz (z.B. den Script-Aufruf) aus dem Skin und speichern ihn neu ab.

Infos zu den am häufigsten benutzten Diensten anzeigen 


URL / Domäne Häufigkeit Existiert noch? Bietet HTTPS? Empfehlung
3. http-Referenzen im Blog finden

Twoday-Blogs setzen sich aus sog. Skins zusammen, welche das Layout und die Darstellung des Blogs bestimmen. Der wichtigste Skin, in dem wohl die meisten http-Referenzen zu finden sein werden, ist der Skin der Hauptseite Site.page.

Zu den Skins gelangen Sie über Klick auf Admin1)LayoutSkins (HTML). Die von Ihnen in der Vergangenheit bearbeiteten (d.h. irgendwann einmal veränderten) Skins finden Sie aufgelistet, wenn Sie auf Bearbeitete Skins klicken. Alle dort angezeigten Skins könnten http-Referenzen enthalten, oft z.B. in Story.display oder Site.weblogStatus.

1) Falls Sie Ihre Menüleiste ausgeblendet haben, kommen Sie mit {ihrblogname}.twoday.net/manage in den Admin-Bereich

Weitere potenzielle Fundorte von gesuchten http-Referenzen sind die Sidebar-Module. Klicken Sie auf der Admin-Seite oben auf den Tab Module2) und prüfen Sie z.B. den Inhalt der Freetext-Module (1-5) oder das Web-Counter Modul, ob dort eine der unwirksamen http-URLs verwendet wird.

2) Zu den Sidebar-Modulen gelangen Sie auch über die URL {ihrblogname}.twoday.net/modules/sidebar

Außer in den Skins und Modulen können unwirksame http-Referenzen auch in den Beiträgen selbst vorkommen, wobei dies dann meist embed-Befehle sind (script / iframe sind in Beiträgen ja generell verboten). Wenn Sie embed-Befehle finden, stellen Sie sicher, dass diese nur noch https-Quellen (z.B. Videos) aufrufen.

Arbeiten Sie Ihre Liste der unwirksamen http-Referenzen ab, bis Sie alle Aufrufe gefunden und diese

  • entweder auf https geändert haben,
  • mit einem neuen Anbieter (z.B. ein neuer Counter) ersetzt haben,
  • oder aus dem Code entfernt haben.

4. Twodays Web-Counter Problem

Im Web Counter Modul bietet Twoday im Standard drei vordefinierte Counter-Einbindungen an: blogcounter.de, sitemeter.com und blogstats.de:

webcountermodul.jpg

Jede dieser drei Optionen ist mittlerweile unbrauchbar: blogcounter.de bietet keinen sicheren https-Modus an (und zählt daher nur http-Besuche), sitemeter.com und blogstats.de existieren nicht mehr. Sollten Sie eine dieser Optionen gewählt haben, deaktivieren Sie sie!

Nutzen Sie stattdessen die verbleibende Option "Anderer Counter" und kopieren Sie in das Textfeld den Code zur Einbindung des von Ihnen gewählten Counters mit https-Fähigkeit. Kostenlose Counter mit https-Eignung gibt es z.B. bei statcounter.com oder trendcounter.com (weitere Empfehlungen gerne hier als Kommentar posten).

Der jeweilige Counter-Anbieter gibt vor, welcher Einbettungscode von Ihnen in das Textfeld "Anderer Counter" zu kopieren ist.

5. Twodays Google Analytics Problem

Im nicht direkt zugreifbaren Skin root.statsCounter, der in jede Twoday-Blogseite eingebaut wird, liegt ein weiteres Problem verborgen: Twodays eigener Google-Analytics-Aufruf funktioniert nicht unter https, da die Skripteinbettung mit einer fixen http-Adresse gespeichert ist. Dadurch wird kein einziger Twoday-Besuch via https gezählt. Außerdem ist das derzeit gerufene Skript (urchin.js) schon ewig veraltet und sollte längst durch eine neue Version ersetzt worden sein (analytics.js). Dieses Problem können wir bei unserer Be­reini­gungs­aktion gleich mit beheben: wir ersetzen den veralteten Code im Skin root.statsCounter durch einen korrekten, aktuell gültigen Code.

Twoday Analytics Problem beheben für Blog:
Icon
https://

.twoday.net

Ich kann den Layout-Namen dieses Blogs nicht selbsttätig ermitteln, da Sie bei der Neu­anlage keinen eigenen Namen vergeben haben. Bitte ermitteln Sie den Layout-Namen daher selbst und geben Sie ihn in das unten angezeigte Feld ein!

meinlayoutname.gif

Schritt 2
Skin-Editor für root.statsCounter des Blogs aufrufen...

Damit der Link zum Skin-Editor funktioniert, müssen Sie bei Twoday angemeldet sein und für den ausgewählten Blog Administratorrechte besitzen. Im Skin-Editor angekommen, führen Sie bitte folgende Aktion aus:

  1. In das große (letzte) Textfeld klicken.
  2. Taste -A drücken, um den gesamten Inhalt zu markieren.
  3. Taste -V drücken, um den markierten Inhalt mit dem neuen zu ersetzen.
  4. Ganz unten auf Speichern und Schließen klicken.

Führen Sie diese zwei Schritte nacheinander für jedes Ihrer Blogs durch (respektive die Blogs, auf die Sie Administrator­zugriff besitzen).
6. Letzte Worte Tipps
  1. Verwenden Sie keine Ressourcen mehr, die nur über http erreichbar sind. Einzige Ausnahme sind Bilder, die (derzeit noch) im sicheren Modus angezeigt werden, auch wenn sie nur eine http-Url haben. Aber: Wenn der Bildspeicherplatz (wie z.B. Flickr, Cloudinary) ein https-Protokoll anbietet, nutzen Sie dieses und binden Bilder über https ein!
  2. Verwenden Sie keine Flash-Ressourcen mehr (SWF-Dateien). Flash ist tot, böse und steht mit dem Teufel im Bunde. Es hat Gründe, weshalb Chrome, Firefox u.a. die Ausführung von Flash im Browser mittlerweile standardmäßig gesperrt haben. Wirklich! Kein Flash mehr!
  3. Wenn Sie Videos noch über embed einbinden wollen, verwenden Sie nur noch https-Adressen. Nutzen Sie für Videos und andere Dienste von derzeit 20 Plattformen alternativ das bewährte Videoload-Tool, welches immer die korrekten https-Adressen generiert.

Ich werde die Analysedaten über die unwirksamen http-Adressen in unregelmäßigen Abständen aktualisieren. Sie können dann anhand der neuen Daten kontrollieren, ob Sie bereits alle Probleme erfolgreich bereinigt haben.

Dieses Tool ist Open Source — Lizenz MIT — Code Github

Mittwoch, 20. Dezember 2017

Videoload News: TED Talks und Umfragen mit Strawpoll

Quasi als kleine Twodayadventsüberraschung ist Videoload ab sofort in der Lage, auf dieser stoisch altbackenen Blogplattform auch beliebige TED-Talks der TED-Webseite in einem Beitrag anzuzeigen (zu sehen oben in Pamela Meyers Rede: How to spot a liar).

Falls der TED Talk deutsche Untertitel besitzt, können diese über einen Videoload-Parameter aktiviert werden (so wie z.B. im obigen Beispiel).

Zusätzlich habe ich auch die Umfrageplattform strawpoll.me in das Videoload-Tool integriert. Zwar bietet Twoday auch eine eigene Umfragemöglichkeit an, jedoch scheint mir die Strawpoll-Lösung etwas schneller umsetzbar und auch effizienter zu sein, da sie durch das wahlweise aktivierbare Google-Captcha weniger gut durch Bots manipulierbar ist.

Als anschauliches Beispiel hierfür eine aktuelle Befindlichkeitsumfrage zum Zustand Twodays (*harhar*):

Das Videoload2-Script wurde entsprechend erweitert und in dieser neuen Version auch schon hochgeladen/aktiviert. Bestehende Nutzer von Videoload2 können somit die neuen TED- und Strawpoll-Optionen ohne eigene Aktivität sofort nutzen (außer vielleicht den Browser-Cache einmalig zu löschen, damit die aktualisierte Version geladen werden kann). Mit diesen beiden Neuzugängen können nun Einbettungen von 20 verschiedenen Plattformen in Twoday-Beiträge integriert werden.

Wer Videoload und die damit verbundenen Möglichkeiten zukünftig nutzen möchte, kann sich hier über die Installation und Arbeitsweise informieren. Dort ist auch beschrieben, wie TED Talk Videos eingebunden werden bzw. wie eine neue Strawpoll-Umfrage angelegt und in einem Beitrag angezeigt werden kann. Dazu bitte im Beitrag den Abschnitt "Videoload verwenden" öffnen und dort etwas weiter unten auf einen der blauen Tabs TED bzw. Strawpoll klicken.

Wie immer gilt: Fragen und Probleme bitte gerne hier hinterlassen — ich versuche, diese zeitnah zu beantworten.

P.S. Wer in diesem Beitrag gelbe Fehlermeldungen zu sehen bekommt, muss einmal seinen Browser-Cache löschen bzw. einmal einen Hard Reload ausführen (Strg-F5 für Windows bzw. Cmd-Umschalt-R für Mac), um die aktuelle Videoload-Version zu laden.

Dienstag, 21. November 2017

Videoload News: Einbinden von Filmtrailern

filmstarts.jpg

Wer Filmtrailer des Filmportals filmstarts.de in seine Beiträge einbinden möchte, kann dies jetzt mithilfe des Videoload2-Tools auch bei Twoday tun.

Das Videoload2-Script habe ich entsprechend erweitert und in dieser neuen Version auch schon hochgeladen/aktiviert. Existierende Nutzer von Videoload2 können somit die neue Option ohne eigene Anpassungen sofort nutzen. Mit diesem Neuzugang können nun Videos und andere Einbettungen von 18 verschiedenen Plattformen auf einfache Weise in Twoday-Beiträge integriert werden.

Wer Videoload und die damit verbundenen Möglichkeiten zukünftig nutzen möchte, kann sich hier über die Installation und Arbeitsweise informieren.

Zur Veranschaulichung nachfolgend die Einbindung des Trailers "Aus dem Nichts" mit Diane Kruger:

Montag, 5. Dezember 2016

Videos reloaded - Neue Videoload-Version 2

Dieser Beitrag dokumentiert die nunmehr zweite, vollständig überarbeitete Version des Videoload-Werk­zeugs, mit dem sich in Twoday auf einfache Weise Video-, Audio- und andere Quell­formate einbinden lassen, die ansonsten mangels iframe-Möglich­keit unter Twoday draußen bleiben müssten. Er ersetzt voll­ständig die alte Doku­men­tation in diesem Beitrag vom Februar 2015.
Wichtige Infos für bisherige Videoload-Nutzer

1 Um die neue Videoload-Version nutzen zu können, müssen Sie den Aufruf des Scripts im Twoday-Skin Site.page einmalig ändern. Wie das geht, wird weiter unten im Abschnitt Upgrade auf Videoload Version #2 beschrieben.

2 Die alte Tool-Version bleibt zwar weiterhin abrufbar, wird jedoch nicht mehr gepflegt. Die neue Version ist um Größenordnungen schneller, beinhaltet außerdem neue Anbieter wie z.B. Bandcamp, dctp.tv, Slideshare sowie Speakerdeck und ist bereinigt um mittlerweile nicht mehr aktive Anbieter (z.B. myvideo.de). Ich rate wärmstens zum vertrauensvollen Umstieg auf Videoload #2! ;)

videoload/videoinst.jpg

In der IT ist das so eine Sache mit der Pflege und Wartung von Alt-Software. So schwankt man beim Wiederstudium von älteren eigenen JavaScript-Codeschnipseln zwischen sehr ambivalenten Gefühlen, die sich irgendwo zwischen "Diese in einem magischen Moment entstandene brillante Codestrecke verstehen nur noch Gott, Mark Zuckerberg oder mein früheres Ich!" und "War ich das? Wie schlecht ist das denn bitte programmiert?" bewegen.

Jeder hat eben das Recht, täglich etwas schlauer zu werden. Und so ist auch Videoload erwachsener geworden, sehr viel schlanker und auch deutlich schneller. Für interessierte Techies und Nerds gibt's hier weitere Informationen.

Warum Videoload und wozu dient es?

Seit die meisten Videoplattformen und Content-Anbieter den alten <embed>-Befehl zugunsten des mo­derneren <iframe>-Formats aufgegeben haben, ist eine Einbindung solcher Quellen mit Standardmitteln bei Twoday nicht mehr möglich. In Twoday-Beiträgen wird jeder mutige Versuch einer direkten iframe-Nutzung beim Speichern des Beitragstextes sofort wieder herausgefiltert.

Videoload führt einen Ausgleich zwischen Twodays berechtigtem Sicherheitsinteresse und den Content-Wünschen der Nutzer herbei, indem es valide und überprüfbare iframe-Aufrufe für einen definierten Kreis von sicheren Anbietern erzeugt. Derzeit (Stand: Dezember 2017) generiert Videoload Verbindungen zu 20 verschiedenen Plattformen und bindet den gewünschten Inhalt (z.B. ein YouTube-Video) auf einfache Weise in den jeweiligen Blogbeitrag ein. Folgende Provider stehen zur Verfügung:

Klick auf Icon öffnet die jeweilige Anbieterseite

Videoload bietet nicht nur Zugriff auf die wichtigsten Videoanbieter, sondern stellt auch Audioinhalte (z.B. via Bandcamp, Soundcloud), Präsentationen (z.B. via Slides, Slideshare, Speakerdeck), GIFs (via Giphy), Code-Snippets (via Jsfiddle) oder eigene Umfragen (via Strawpoll) bereit.

Erstmalige Installation

Zur Installation Ihrer neuen Videoload-Möglichkeiten ist eine einmalige Anpassung des Twoday-Skins Site.page erforderlich:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML).
  3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das untere Ende der Anzeige.
  4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeilen hinein:
    <script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
    <script type="text/javascript">video2day.run();</script>

    Wie kopiere ich das?

    Ihr Skin Site.page sollte nun in etwa so aussehen:

    videoload/install.jpg

    <% staticURL %> ist ein Twoday-Makro und steht für "https://static.twoday.net/", dem abgesicherten Blogspeicher für Twoday-Bilder oder -Dateien.

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Twoday-Beiträgen Video- und Audioelemente der aufgeführten Plattformanbieter einbinden. Wie das funktioniert, finden Sie im übernächsten Abschnitt Videoload verwenden.

Upgrade auf Videoload Version #2

Falls Sie bereits die Erstversion des Videoload-Scripts nutzen, sollten Sie auf die neue Version 2 umstellen. Hierzu ist der Aufruf von Videoload im Skin Site.page anzupassen bzw. zu ergänzen.

Bisher steht dort am Ende des Skins, vor dem abschließenden </body>-Befehl, folgender Eintrag:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>

Bitte ändern/erweitern Sie den Aufruf wie folgt:

<script type="text/javascript" src="<% staticURL %>cdn/files/videoload2-min-js.js"></script>
<script type="text/javascript">video2day.run();</script>

Wie kopiere ich das?

d.h. also in Zeile 1 den Scriptnamen videoload in videoload2 ändern und die zweite Zeile darunter ergänzen.

Selbstverständlich ist die Version #2 vollständig abwärtskompatibel zur Erstversion, d.h. alle bisherigen Videoeinbettungen funktionieren sofort und ohne Änderung mit der neuen Version problemlos weiter.

Videoload verwenden

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class="html5video youtube" id="DyfM7oLIlp0"></div> …

An der feststehenden Zeichenkette html5video erkennt das Videoload-Script, dass es innerhalb dieses div-Elements eine Einbettung vornehmen soll. Die darauf folgende Anbieterkennung bezeichnet die Plattform, von der das anzuzeigende Objekt stammt. Im Beispiel oben soll ein Youtube-Video generiert werden. Im Attribut id legen Sie fest, welches Youtube-Video angezeigt wird (jedes Anbieterelement hat eine eindeutige Identifikation).

Die betreffende ID findet sich meist recht einfach im Einbettungs­code des Videoanbieters (dem <iframe>-Befehl) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. In der Tabelle "Individuelle Parameter je Anbieter" weiter unten finden Sie eine genaue Information, wie Sie die benötigte ID bei jedem Anbieter manuell ermitteln. Außerdem stelle ich im Folgekapitel ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-DIV-Befehl gebrauchsfertig zusammenstellt. Damit entfällt die manchmal etwas umständliche Suche nach der richtigen ID.

Die passende Kennung für einen der 20 möglichen Anbieter finden Sie unten als Beschriftung in den blauen Tabulatoren. Um also ein Vimeo-Video einzufügen, heißt der entsprechende DIV-Befehl

<div class="html5video vimeo" id="{eine-vimeo-id}"></div>

Für die Anzeige eines GIFs von giphy.com wäre das DIV-Element folgendermaßen zu schreiben:

<div class="html5video giphy" id="{eine-giphy-id}"></div>

Minimal benötigt eine Einbettung also stets drei Informationen: den feststehenden Bezeichner html5video, die Textkennung des gewünschten Anbieters und die eindeutige ID des anzuzeigenden Elements.

Ergänzende Einstellparameter

Es gibt weitere Parameter, mit denen Sie die Breite und das Seitenverhältnis des einzubettenden Elements beeinflussen können. Diese beiden Parameter sind für alle Anbieter zulässig.

Parameter bestehen mindestens aus dem Parameternamen und — soweit erforderlich — aus einem Parameterwert, verbunden durch einen Bindestrich. Eine Breitenangabe kann z.B. width-500 sein; ein Parameter zum Seitenverhältnis z.B. ratio-1.6834. Kommazahlen müssen dabei stets mit Punkt geschrieben werden.
width — Breite festlegen/begrenzen

Im oben gezeigten Beispiel nimmt das Youtube-Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe mithilfe des width-Parameters machen. Für eine Breite von z.B. 350 Pixeln lautet der Befehl:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div> …

ratio — Seitenverhältnis einstellen/korrigieren

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,77778. Manche Videos haben noch ein 4:3 Verhältnis (1,33333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Vine-Video mit einem Seitenverhältnis von 1,0 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video vine ratio-1 width-400" id="OTtQVYI2JY2"></div> …

Dies bewirkt in diesem Fall, dass das Video die gleiche Höhe wie Breite erhält, d.h. 400 Pixel breit und hoch ist.

Neben diesen beiden grundsätzlich verwendbaren Parametern gibt es je Plattform verschiedene individuelle Parameter, mit denen man bestimmte Funktionen oder Darstellungsweisen des Anbieters aktiviert. Diese sind je Plattform in den nachstehenden Tabs beschrieben.

Individuelle Parameter je Anbieter

Klick auf ein Tab öffnet die Dokumentation für diesen Anbieter

Einen Moment bitte, die Dokumentation wird geladen...

Videoload-Tool nutzen

Twoday-Videoload-Code automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für jeden der 20 Anbieter im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom jeweiligen Anbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code des Tools kopieren 1. Dieses erkennt die jeweilige Quellplattform, extrahiert die korrekte ID des Elements sowie alle anderen erkannten Einstellparameter. Daraus generiert es den kopierfertigen HTML-Befehl für Ihren Twoday-Beitrag und zeigt diesen im Feld HTML-Code an 2.

videoload/videoload1.jpg

Beispiel: Bandcamp-Audio

Nehmen wir ein konkretes Beispiel: Sie möchten das Album "Love & War & The Sea In Between" (Josh Garrels) von der Plattform Bandcamp in einen neuen Twoday-Beitrag einbetten. Sie haben den entsprechenden iframe-Befehl auf seiner Albumseite ermittelt und in die Zwischenablage kopiert. Nach Aufruf des Videotools fügen Sie den kopierten iframe-Befehl in das Eingabefeld iframe-Code ein 1.

Das Videotool analysiert den übergebenen Befehl und stellt alle erkannten Parameter in einem speziellen DIV-Kommando2 zusammen, aus dem das Videoload-Script später wieder den eigentlichen Einbettungsbefehl erstellt.

videoload/videoload2.jpg

Unter dem HTML-Befehl zeigt das Tool das von Ihnen gewünschte Element an, und zwar so wie es später auch beim Aufruf des Beitrags zu sehen sein wird 3. Sie haben nun die Möglichkeit, die Anzeige weiter zu konfi­gurieren, z.B. Größe und Erscheinungsbild zu ändern oder weitere Parametereinstellungen vorzunehmen, die für diesen Anbieter zulässig sind. Klicken Sie hierfür auf die grüne Schaltfläche "Parameter ändern / manuell setzen...".

videoload/videoload3.jpg

Statt des iframe-Code-Feldes wird nun eine Detailansicht mit allen verfügbaren Einstellparametern angezeigt. Die einzelnen Felder sind bereits mit den Werten vorbelegt, die aus dem iframe-Befehl herausgelesen werden konnten. Ändern Sie eine Einstellung, wird der zugehörige HTML-Befehl sofort neu generiert und als Kopiervorlage angezeigt.

videoload/videoload4.jpg

Wenn Sie z.B. die Bandcamp-Linkfarbe ändern und zusätzlich eine Tracklist mit 6 Songs anzeigen wollen, stellen Sie dies in den zugehörigen Feldern ein. Unmittelbar passt das Tool auch den HTML-Befehl an die veränderten Einstellwerte an.

videoload/videoload5.jpg

Das tatsächliche Aussehen des Elements können Sie unterhalb des Codes kontrollieren. Entspricht alles Ihren Vorstellungen, markieren Sie den fertigen HTML-Befehl und kopieren ihn in die Zwischenablage.

videoload/videoload6.jpg

Navigieren Sie nun zu Ihrem Beitrag und fügen Sie den kopierten Code an der gewünschten Stelle in den Text ein:

videoload/videoload7.jpg

Dieser Ablauf funktioniert für jeden der 20 Anbieter identisch. Wollen Sie also ein YouTube-Video in Ihren Beitrag einfügen, kopieren Sie den entsprechenden iframe-Code des Videos und das Tool zeigt Ihnen das passende DIV-Kommando für die Einbettung im Twoday-Beitrag.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

https://neonwilderness.twoday.net/stories/videotool2

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen...

Videoload parametrisieren (für erfahrene Nutzer)

Script-Verhalten über Parameter steuern

Im Aufruf des Videoload-Scripts video2day.run(); (siehe Abschnitt "Installation") müssen keine Parameter innerhalb der Klammer mitgegeben werden, wenn Sie die Standardeinstellungen nutzen wollen. Gleichwohl kennt das Script eine Reihe von Einstellparametern, mit denen Sie sein Verhalten beeinflussen können. Diese werden nachstehend erläutert. Parameter übergeben Sie stets in geschweiften Klammern, wobei die einzelnen Parameter durch Komma getrennt sind:

video2day.run( {parameter1: wert, parameter2: wert, ... , parameterx: wert} );

Um z.B. die Breite für alle Videoload-Elemente auf maximal 400 Pixel zu begrenzen und außerdem den Debug-Modus einzuschalten, muss der Videoload-Aufruf inkl. der entsprechenden Parameter folgendermaßen aussehen:

video2day.run( {maxWidth: 400, debug: true} );

Die Reihenfolge der Parameter untereinander ist beliebig. Folgende Möglichkeiten stehen zur Verfügung:

Script-ParameterStandardBedeutung/Wirkung
addFlexVideoClassfalsetrue aktiviert den "responsive"-Modus, in welchem alle Anbieterelemente responsiv, d.h. in Abhängigkeit einer sich verändernden Containergröße dargestellt werden. Dieser Modus wirkt sich nur innerhalb von responsiven Blog-Templates aus (die Standard-Templates von Twoday sind leider NICHT responsiv). Dieses Blog hier basiert auf einem eigenerstellten, responsiven Foundation5-Template. Bei der Ansicht von Blogseiten mit Videoload-Elementen werden diese im Portrait- oder Landscape-Modus eines Tablets bzw. Mobile Phones anders dargestellt. Auch bei der Verkleinerung des Browserfensters am Desktop wird die Größe der Videoelemente dynamisch im richtigen Aspektverhältnis angepasst.
contentClass'storyContent'Dies ist die div-Klasse des Containers, der einen gesamten Blogbeitrag umfasst und seine maximale Breite festlegt. Bei Twoday heißt diese Klasse storyContent (Standard).
debugfalsetrue aktiviert den Debug-Modus, in welchem zusätzliche Nachrichten auf die Browser-Console ausgegeben werden. Im Fehlerfall oder bei Unstimmigkeiten können hiermit wichtige Zwischenergebnisse des Scripts protokolliert und kontrolliert werden.
maxWidth-1Mit maxWidth können Sie für alle auf Ihrem Blog angezeigten Videoload-Elemente eine maximale Breite festlegen. Wenn z.B. kein Element breiter als 440 Pixel breit sein soll, geben Sie beim Scriptstart den Parameter { maxWidth: 440 } mit. Dies erspart Ihnen in dem Fall eine Größenlimitierung in jedem einzelnen Element mitzugeben (z.B. per width-440 als Videoparameter).
position'bottom'Mit Hilfe des position-Parameters können Sie festlegen, wo der iframe des Anbieters eingefügt werden soll. Gültige Werte sind bottom, also am Ende des DIVs (das ist auch der Standard) oder top für den Anfang des DIVs. Text, der innerhalb des DIVs steht, wird also jeweils vor dem iframe (bei Einstellung bottom) oder nach dem iframe (bei Einstellung top) ausgegeben.
posterSize'cover'Für MP4-Videos (Videoload-Typ other) kann ein Posterbild angezeigt werden, solange der Nutzer das Video noch nicht gestartet hat. Über den Script-Parameter posterSize lässt sich einstellen, wie das Bild in der festgelegten Größe des Videorahmens angezeigt wird: cover streckt das gesamte Bild, so dass es den Videorahmen vollständig ausfüllt. contain skaliert das Bild auf die längste Seite (es können Ränder entstehen). Die Standardeinstellung ist { posterSize: 'cover' }.
selector'.html5video'Mit Hilfe des Selectors findet Videoload alle Stellen, in denen eine Einbettung eines Anbieterelements vorgenommen werden soll (z.B. ein YouTube-Video oder ein Bandcamp-Audio). Standardmäßig ist dafür die CSS-Klasse .html5video eingestellt.
useVideoJStrueFür die Anzeige beliebiger MP4-Videos wird der bewährte Videoplayer VideoJS genutzt. Dieser wird bei Vorliegen des Videoload-Typs other nachgeladen und mit dem Abspielen des Videos beauftragt. Allerdings beinhalten die meisten modernen Browser bereits eigene Routinen zum Abspielen von MP4-Videos (z.B. Chrome, Firefox), so dass man — wenn man das Problem für Nutzer älterer Browser ignoriert — eine separate Player-Lösung nicht bräuchte. Wer sich also nur auf den Browser als Abspielsoftware verlassen will, kann über die Einstellung { useVideoJS: false } das Nachladen eines universellen Players unterbinden und so noch ein paar Millisekunden Ladezeit einsparen.

Videotool 2

Anleitung: Kopieren Sie den Einbettungscode der Quellplattform in das Feld iframe-Code, um den entsprechenden Videoload2-Befehl zu erhalten. Ergänzend können Sie die Breite anpassen oder auch alle Parameter ändern bzw. vollständig selbst einstellen.

Den resultierenden HTML-Code kopieren Sie anschließend in Ihren Beitragstext (Videoload2-Script muss installiert sein!).

iframe-Code
HTML-Code für Twoday

Mittwoch, 11. März 2015

Twoday-Tipp #9 - Thalia Büchersuche repariert

thalia/thaliarepair.jpg

Datum Änderungen / Edits
27.01.2016 Anpassung der Büchersuche aufgrund struktureller Änderungen auf der thalia.at Webseite. Die aktualisierte Version 1.1 des Skins (module.modReadingSetup-v11.txt) muss neu installiert werden.

Beginnen wir mit einer Preisfrage: Was haben die Twoday-Büchersuche über Thalia.at und Amazon.de gemeinsam? Stimmt! Beide existierten einmal, aber keine davon funktioniert noch. Und trotz regelmäßiger Forumnachfrage sind Bemühungen zur baldigen Behebung des Dauer­brenners derzeit nicht erkennbar. Zeit, das Thema selbst in die Hand zu nehmen und auch ohne Server-Zugriff eine brauch­bare anwender­seitige Lösung zu schaffen.

Vor einigen Jahren hat Amazon bereits seine Bücher-/Produkt­suche für "normalen" Programmier­zugriff geschlossen. Für die Nutzung des Product Advertising APIs sind seither spezielle An­mel­dungen, Partner-IDs und Zugriffs­schlüssel erforderlich, was für eine Blog­plattform wenig Sinn macht, zumal die Anzahl der erlaubten Zugriffe limitiert ist. Bleibt also Thalia.at, die ihrer kürzlich neu entworfenen Webseite auch eine detaillierte, von außen ansteuerbare Suchfunktion spendiert haben.

Neue Büchersuche installieren

Das Skin module.modReadingSetup

Wie schon die alte Twoday-Standard-Büchersuche liegt auch die neue Funktion im Skin module.modReadingSetup. Im Gegensatz zu vielen anderen Skins, die über die Navigation AdminLayoutSkins (HTML) angesteuert und angepasst werden können, entzieht sich der für die Büchersuche zuständige Skin jedoch einem schnellen Zugriff. Um ihn ändern zu können, bedarf es der Anwendung eines kleinen Kniffs.

  1. Laden Sie zunächst einmalig den zukünftigen Inhalt des Büchersuche-Skins herunter. Klicken Sie dazu auf die nachfolgende Schaltfläche und speichern Sie die Textdatei in einem beliebigen Verzeichnis Ihrer Festplatte.

     module.modReadingSetup-v11.txt

  2. Öffnen Sie die Datei in einem Texteditor (z.B. Notepad, Notepad++, Wordpad, TextEdit) als reine Textdatei, markieren Sie den gesamten Inhalt (Strg-A für Windows, Cmd-A für Mac) und kopieren Sie diesen in die Zwischenablage (Strg-C für Windows, Cmd-C für Mac). Schließen Sie danach den Editor.

    thalia/thalia00.jpg

  3. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  4. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)Falls Sie Ihre Menüzeile ausgeblendet haben, erreichen Sie die Skin­bearbeitung alternativ auch durch direkte Eingabe der Adresse http://blogalias.twoday.net/layouts (blogalias = Ihr Blogname) und dann durch Klick auf Skins (HTML).
  5. Klicken Sie dort auf ein beliebiges Skin. Im Beispiel verwenden wir das Skin Dayheader (Story.dayheader). Es ist aber nicht wirklich wichtig, welches Skin verwendet wird, weil es nur als Vorlage für die Adresse dient.

    thalia/thalia01.jpg

  6. Oben in der Adresszeile des Browsers wird nun folgende Zeichenkette angezeigt — natürlich mit Ihrem Blogalias und Layoutnamen:

    thalia/thalia02.jpg

  7. Markieren Sie den gesamten Rest hinter key= und schreiben Sie stattdessen module.modReadingSetup hinter das Gleichheitszeichen:

    thalia/thalia03.jpg

  8. Betätigen Sie die Datenfreigabetaste (Return), um den bisherigen Inhalt des Skins module.modReadingSetup anzuzeigen. Klicken Sie in das Feld mit dem Scrollbalken und markieren den gesamten Inhalt des Skins (Strg-A für Windows, Cmd-A für Mac):

    thalia/thalia04.jpg

  9. Fügen Sie nun den neuen Büchersuche-Inhalt (welcher sich seit Schritt 2 in Ihrer Zwischenablage befindet) in das Textfeld ein und ersetzen damit den markierten alten Inhalt vollständig (Strg-V für Windows, Cmd-V für Mac):

    thalia/thalia05.jpg

    Klicken Sie abschließend auf Speichern und Schließen um Ihre Änderung zu sichern.

    Gratulation! Die neue Suchfunktion über Thalia.at ist nun installiert. Im folgenden Kapitel lesen Sie, wie Sie die neue Büchersuche ab sofort verwenden können.

Büchersuche flexibel einsetzen

Büchersuche aufrufen

  1. Klicken Sie im Übersichtsbildschirm auf Module.

    thalia/thalia06.jpg

  2. Klicken Sie beim Eintrag "Bücherliste" auf Einstellungen.

    thalia/thalia07.jpg

  3. Unter der Überschrift Nach neuen Büchern suchen finden Sie den überarbeiteten Teil der Büchersuche, die nun über die Thalia.at Webseite erfolgt:

    thalia/thalia08.jpg

    Ein Büchersuche kann prinzipiell einfach oder strikt durchgeführt werden. Bei der einfachen Suche können Sie in jedem der beiden Eingabefelder beliebige, gemischte Suchwörter eingeben, unabhängig davon, ob sie zum Titel oder Autorennamen gehören. Bei der strikten Suche müssen die Suchwörter für Titel und Autor getrennt eingegeben werden. Standardmäßig ist die einfache Suche aktiviert (empfohlen).

  4. Einfache Suche
    Tippen Sie Nick Cave Munro in das Buchtitelfeld und klicken Sie anschließend auf die Jetzt auf Thalia.at suchen-Schaltfläche.
  5. Ein grafischer Indikator zeigt Ihnen an, dass die Suche gestartet ist. Nach kurzer Zeit werden die Suchergebnisse angezeigt. Jedes von Thalia gefundene Ergebnis wird in einem eigenen Kasten aufbereitet. Ein Klick auf das Buch führt direkt zur Webseite und weiteren Informationen.

    thalia/thalia09.jpg

    Um mehrfache Ergebnisse zu reduzieren, können Sie einen bestimmten Produkttyp einstellen, z.B. nur Bücher, oder nur eBooks, oder nur Hörbücher.

  6. Strikte Suche
    Für eine exakte Suche aktivieren Sie das Auswahlkästchen "Strikte Suche". Damit wird es erforderlich, Suchwörter strikt nach Titel bzw. Autorenname aufzuteilen. Beispiel: Tippen Sie Argo in das Titelfeld und Herbst in das Autorenfeld.

    thalia/thalia10.jpg

    Es kommt vor, dass Thalia bei der strikten Suche keine Suchergebnisse zurückliefert. Verwenden Sie dann die einfache Suche.

  7. Haben Sie Ihr gewünschtes Buch gefunden, können Sie es mit einem Klick auf das Pluszeichen automatisch in das Twoday-Eintragsformular übernehmen.

    thalia/thalia11.jpg

  8. Titel, Autor, Link und Bild werden in das Formular übernommen. Klicken Sie auf Hinzufügen, um das Buch endgültig in Ihre Bücherliste zu übernehmen.

    thalia/thalia12.jpg

  9. Alle Titel in Ihrer Bücherliste können Sie nach eigenen Wünschen umsortieren. Zum Abschluss klicken Sie auf Sichern um die Änderungen dauerhaft zu speichern.

    thalia/thalia13.jpg

Bücherliste in der Seitenleiste anzeigen

Das Modul "Bücherliste" in die Sidebar integrieren

Damit Ihre Bücherliste in der Seitenleiste Ihres Blogs angezeigt wird, sind folgende Schritte erforderlich:

  1. Klicken Sie in Ihrer Blog-Menüzeile oben auf AdminModule und dann auf Sidebar Module anordnen.Falls Sie Ihre Menüzeile ausgeblendet haben, erreichen Sie die Modul­anordnung alternativ auch durch direkte Eingabe der Adresse http://blogalias.twoday.net/modules/order (blogalias = Ihr Blogname).

    thalia/thalia14.jpg

  2. Wählen Sie das Büchermodul aus (im Twoday-Standard hat dies die Textbezeichnung "Mein Lesestoff") und übertragen Sie es durch Klick auf die entsprechende Schaltfläche in die erste (Sidebar 1) oder zweite (Sidebar 2) Seitenleiste.

    thalia/thalia15.jpg

  3. Nachdem Sie das Büchermodul eingefügt haben, speichern Sie ihre Änderung durch Klick auf Sichern.

    thalia/thalia16.jpg

  4. Klicken Sie auf Weblog ansehen, um die Anzeige des Büchermoduls zu kontrollieren.

    thalia/thalia17.jpg

    In der Seitenleiste werden nun die übernommenen Buchtitel angezeigt. Die Coverbilder haben teilweise unterschiedliche Größen und Titel/Autor sind sehr klein formatiert. Im folgenden Kapitel lesen Sie, wie Sie die Bücher nach Ihren Wünschen formatieren können.

    thalia/thalia18.jpg

Bücher in der Seitenleiste formatieren

Drei weitere Skins anpassen

Für die optische Aufbereitung der Bücherliste sind drei weitere Skins verantwortlich: Site.modReadingItem für den einzelnen Buchtitel, Site.modReadingDivider für den Trennbereich zwischen zwei Büchern und Site.modReading für den gesamten Container der Bücherliste. Die Skins sind sehr schnell und einfach anzupassen.

  1. Klicken Sie in Ihrer Blog-Menüzeile oben auf AdminModule.Falls Sie Ihre Menüzeile ausgeblendet haben, erreichen Sie die Modul­liste alternativ auch durch direkte Eingabe der Adresse http://blogalias.twoday.net/modules/sidebar (blogalias = Ihr Blogname).

    Klicken Sie im Eintrag Bücherliste auf Skins.

    thalia/thalia19.jpg

  2. Alle drei Skins benötigen kleine Anpassungen, um die einzelnen Bestandteile einer Buchtitelanzeige zukünftig besser formatieren zu können.

    thalia/thalia20.jpg

    Die Zahlen oben markieren die Reihenfolge der Änderungen. Klicken Sie also zunächst auf den Skin Site.modReadingItem.

  3. Markieren und kopieren Sie die nachstehenden Zeilen in die Zwischenablage, wechseln Sie in den geöffneten Skin Site.modReadingItem und ersetzen dort den gesamten Inhalt.
    <div class="sbBookItem">
        <% param.ReadingImage %>
        <div class="sbBookAuthor"><% param.ReadingAuthor %></div>
        <div class="sbBookTitle"><% param.ReadingTitle %></div>
    </div>

    Alter Inhalt

    thalia/thalia21.jpg

    Neuer Inhalt

    thalia/thalia22.jpg

    Klicken Sie auf Speichern und Schließen, um die Änderung zu sichern.

  4. Klicken Sie nun auf Site.modReadingDivider und entfernen Sie den gesamten Inhalt des Skins (im Standard ist dies ein einzelnes <br />).

    Alter Inhalt

    thalia/thalia23.jpg

    Neuer Inhalt

    thalia/thalia24.jpg

    Klicken Sie auf Speichern und Schließen, um diese Änderung zu sichern.

  5. Klicken Sie nun auf Site.modReading. Markieren/kopieren Sie die nachstehenden Zeilen in die Zwischenablage, wechseln Sie in den geöffneten Skin und ersetzen dort den gesamten Inhalt.
    <style>
    .sbBookContainer {}
    .sbBookItem { margin-bottom: 20px; font-size: 13px; }
    .sbBookItem img { box-shadow: 3px 4px 6px #ccc; max-height: 120px; }
    .sbBookAuthor { font-style: italic; margin-top: 10px; }
    .sbBookTitle {}
    </style>
    <div class="sbBookContainer">
        <% param.Reading %>
    </div>

    Alter Inhalt

    thalia/thalia25.jpg

    Neuer Inhalt

    thalia/thalia26.jpg

    Klicken Sie auf Speichern und Schließen, um auch diese Änderung zu sichern.

  6. Klicken Sie auf Weblog ansehen, um sich das Ergebnis der Änderungen anzusehen.

    thalia/thalia27.jpg

    Die im Skin Site.modReading definierten Formatanweisungen (CSS-Stile) haben folgendes bewirkt:

    .sbBookItem { margin-bottom: 20px; font-size: 13px; } definiert für jedes Buch einen unteren Abstand von 20 Pixel und stellt eine Zeichensatzgröße von 13 Pixel ein.

    .sbBookItem img { box-shadow: 3px 4px 6px #ccc; max-height: 120px; } erzeugt einen schmalen Schatten um das Buchcover und stellt die Höhe des Bildes auf maximal 120 Pixel ein (die Breite wird automatisch proportional angepasst).

    .sbBookAuthor { font-style: italic; margin-top: 10px; } stellt den Autorennamen in Kursiv dar und definiert einen oberen Abstand (zum Coverbild) von 10 Pixeln.

    Diese Vorbelegungen lassen sich jederzeit nach eigenen Wünschen anpassen. Rufen Sie dazu erneut den Skin Site.modReading auf und passen Sie die Stildefinitionen entsprechend an.
Probleme, Fragen, Ergänzungswünsche?

Falls Sie Probleme mit der Büchersuche bemerken, posten Sie diese bitte zusammen mit einem Screen­shot in die Kommentare.

Wichtiger Hinweis: Der Zugriff auf die Thalia.at Suchfunktion erfolgt über ein technisches Werkzeug (YQL), das von Yahoo bereitgestellt wird. Bei starker weltweiter Nutzung kann eine Überlastungssituation eintreten, in der das Tool keine Ergebnisse zurückmeldet. Wiederholen Sie dann einfach Ihre Suchabfrage.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

module.modReadingSetup, site.modReading/modReadingItem/modReadingDivider © 2015 NeonWilderness — lizensiert unter MIT.

Mittwoch, 11. Februar 2015

Twoday-Tipp #8 - Videos anzeigen

Wichtiger Hinweis

Die in diesem Beitrag beschriebene Erstversion des Videoload-Scripts ist veraltet. Bitte nutzen Sie die neue Version #2, die hier dokumentiert ist.

video2day.jpg

Datum Änderungen / Edits
08.06.2016 Neue Parameter zur Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos: start und endat
07.02.2016 Audioplattform soundcloud.com neu aufgenommen (Dokumentation siehe Kapitel Videos im Blogbeitrag anzeigen).
15.01.2016 Videoanbieter putpat.tv wurde entfernt (Übernahme durch ampya.com, die keine Einbettungen mehr ermöglichen), Plattform jsfiddle.net zur Anzeige von HTML/CSS/JS-Lösungen neu aufgenommen.
28.10.2015 Videoanbieter blip.tv wurde entfernt (Übernahme durch maker.tv), GIF-Plattform giphy.com neu aufgenommen.
03.03.2015 Plattform vube.com wurde entfernt (Webseite ist inaktiv), Plattform funnyordie.com neu aufgenommen.

Eine der ältesten, am häufigsten nachgefragten und trotzdem stoisch ignorierten Twoday-Nutzer­anforderungen ist die der simplen Anzeige von Videos. Seit die großen Videoplattformen den historischen, in Twoday noch erlaubten Einbettungscode mittels <object> und <embed> zugunsten des moderneren <iframe>-Befehls aufgegeben haben, fühlt sich das Thema Videoeinbindung bei Twoday so an, wie wenn man im Casino zu spät seine Chips auf den Tisch schiebt: "Rien ne va plus!".

Der Grund: Twoday lässt iframe-Befehle in Beitragstexten aus Sicherheits­erwägungen grund­sätzlich nicht zu, filtert diese automatisch aus und lässt dem Nutzer nur die Möglichkeit eines drögen YouTube- oder Vimeo-Textlinks. Unnötig langweilig. Und inkonsequent. Und Zeit, dies zu ändern!

Selbstverständlich hat Twoday ein berechtigtes Sicherheitsinteresse, das es zu respektieren gilt, jedoch gibt es unzweifelhaft gute und sicherheitskonforme Lösungen, zu denen es auch schon vor über 2 Jahren Vorschläge gab. Passiert ist seitdem, wie so oft, nichts.

Die nachstehend beschriebene Open-Source-Lösung ermöglicht Ihnen die einfache und schnelle Videoeinbindung von derzeit 12 verschiedenen Videoplattformen sowie die Anzeige beliebiger MP4-Videodateien.

Das Video-Script einmalig installieren

Nur ein Script — und alles wird gut

Um ab sofort in Ihrem Blog Videos aller großen Plattformen oder auch eigene MP4-Videodateien anzeigen zu können, benötigen Sie nur ein Script, das Sie einmalig im Skin Site.page einbinden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihr Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Hauptseite (Site.page), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort vor das abschließende </body>-Element folgende Zeile hinein:
    	<script type="text/javascript" src="<% staticURL %>cdn/files/videoload-min-js.js"></script>
    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld oben und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster und kopieren Sie ihn in die Zwischen­ablage. Falls bei Ihnen der Link copy angezeigt wird (Rechner mit Adobe Flash-Installation), können Sie darauf klicken, um den Text ohne Pop-Up-Fenster sofort in die Zwischen­ablage zu kopieren. Gehen Sie nun in Ihren Skin Site.page und kopieren dort aus der Zwischenablage an die richtige Stelle vor </body>.Ihr Skin Site.page müsste nun in etwa so aussehen:

    video1.jpg

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern. Sie können nun zu jeder Zeit in Ihren Beiträgen Videos einbinden und anzeigen.
Das Script ist so geschrieben, dass es die Videofunktion nur dann lädt, wenn auf der aktuell anzuzeigenden Seite tatsächlich ein Videobefehl gefunden wird. Es gibt also keine Verzögerung bei den Ladezeiten für Seiten ohne Videos.

Videos im Beitragstext einbinden

Videos im Blogbeitrag anzeigen

Um ein Video in einem Beitrag anzuzeigen, verwenden Sie einen einfachen DIV-Befehl, der z.B. für ein YouTube-Video so aussieht:

<div class="html5video youtube" id="DyfM7oLIlp0"></div>

An der feststehenden Zeichenkette html5video erkennt das eingebundene Script, dass hier ein Video angezeigt werden soll. Die darauf folgende Kennung beschreibt die Plattform, von der das Video stammt. Derzeit kann das Script Videos von folgenden Anbietern generieren:

KennungVideoanbieter
youtubewww.youtube.com
vimeowww.vimeo.com
vevowww.vevo.com
giphywww.giphy.com
dailymotionwww.dailymotion.com
jsfiddlewww.jsfiddle.net
soundcloudwww.soundcloud.com
funnyordiewww.funnyordie.com
liveleakwww.liveleak.com
vinewww.vine.co
metacafewww.metacafe.com
myvideowww.myvideo.de
othereigene URL eines MP4-Videos

Im DIV-Parameter id wird die ID des jeweiligen Videos vermerkt. Diese Video-ID findet sich meist recht einfach im iframe-Befehl des Videos (Einbettungs­code des Videoanbieters) und besteht i.d.R. aus einer kurzen Kombination von Zahlen und Buchstaben. Weiter unten stelle ich ein Tool vor, das die notwendigen Daten voll­automatisch aus dem kopierten iframe-Einbettungs­code ermittelt und für Sie den korrekten Twoday-HTML-Befehl gebrauchsfertig zusammenstellt.

Ergänzende Videoparameter

Breite

Im oben gezeigten DIV-Befehl nimmt das Video die volle Breite des umgebenden Containers ein, d.h. es füllt die Twoday-Beitragsspalte horizontal vollkommen aus. Falls Sie das Video kleiner darstellen wollen, können Sie zusätzlich eine Breitenangabe machen. Der Befehl für das obige Video in einer Breite von 350 Pixeln lautet dann:

<div class="html5video youtube width-350" id="DyfM7oLIlp0"></div>

Seitenverhältnis

Die meisten Videos haben ein Seitenverhältnis von 16:9, d.h. ein Verhältnis von Breite zu Höhe von 1,7778. Manche Videos haben noch ein 4:3 Verhältnis (1,3333) und wieder andere eine sehr individuelle Streckung (z.B. bei Breitbildformaten). Das Script verwendet im Standard die 16:9-Anzeige. Wenn das Video verzerrt dargestellt wird, können Sie ein eigenes Seitenverhältnis einstellen. Der Befehl für ein Putpat-Video mit einem Seitenverhältnis von 2,4 und einer Breite von 400 Pixeln lautet dann:

<div class="html5video putpat ratio-2.4 width-400" id="3qs5vhn"></div>

Eigene MP4-Videodateien

Sie können auch eigene MP4-Videodateien in einem Videoplayer anzeigen lassen. Diese müssen eine öffentlich erreichbare URL besitzen, also z.B. bei einem Cloudspeicheranbieter wie Dropbox, GoogleDrive oder auf eigenem Webspace liegen. Für die Anzeige wird der bekannte Open Source HTML5 Videoplayer VideoJS verwendet. Die Adresse/URL des Videos wird im Parameter id übergeben. Der Befehl für die Einbindung eines eigenen MP4-Videos hat dann folgendes Format:

<div class="html5video other ratio-2.4" id="https://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Posterbild für eigene MP4-Videodateien

Über einen weiteren Parameter weisen Sie die Videofunktion an, ein Posterbild im Videobereich anzuzeigen, solange das Video noch nicht vom Anwender gestartet wurde. Das Posterbild ist ein "Standbild" in einem beliebigen Bildformat (z.B. jpg, png, gif, bmp) und muss sich an gleichem Ort wie das MP4-Video befinden.

Wenn ein MP4-Video im Pfad http://www.meinewebadresse.de/videos/meinvideo.mp4 zu finden ist, muss ein zugehöriges jpg-Standbild die Adresse http://www.meinewebadresse.de/videos/meinvideo.jpg besitzen. Für die Anzeige eines Standbilds ergänzen Sie einfach poster als zusätzlichen Übergabewert. Ist das Standbild nicht vom Typ jpg, so definieren Sie je nach Dateityp ergänzend ein image-png, image-gif oder image-bmp.

Beispiel: Für ein MP4-Video in 500 Pixel Breite, einem Seitenverhältnis von 2,4 und einem gif-Standbild lautete der DIV-Befehl dann so:

<div class="html5video other width-500 ratio-2.4 poster image-gif" id="https://dl.dropboxusercontent.com/u/16775880/movies/oceans-clip.mp4"></div>

Der poster-Parameter funktioniert nur bei MP4-URL-Videos (Typ other)! Bei Videos von Plattformen wie z.B. YouTube hat er keine Wirkung.
Anzeige einer wählbaren Zeitspanne (von/bis) von YouTube-Videos

new.pngFalls Sie nur einen selektiven Ausschnitt eines YouTube-Videos zeigen möchten, d.h. ab einer gewissen Stelle des Videos starten und/oder an einer bestimmten Stelle des Videos enden wollen, so verwenden Sie dafür den start- bzw. den endat-Parameter. Beide Angaben erfordern einen zusätzlichen Zeitwert in Sekunden. Dazu ist die Beginn- bzw. Endestelle in Sekunden umzurechnen, z.B. 21:32 entspricht 1292 (21*60+32).

Beispiel: Um einen Song eines längeren Festival-Videos von Stelle 21:32 bis Stelle 31:35 anzuzeigen, ist folgender Befehl zu verwenden:

<div class="html5video youtube start-1292 endat-1895" id="qNNecZkPY2Y"></div>

Um nur ab einer bestimmten Stelle zu starten, reicht die alleinige Angabe des start-Parameters.

Anzeige von jsfiddle-Codebeispielen

jsfiddle.net ist eine Plattform, mit der das Zusammenspiel von HTML-, CSS- und JavaScript-Elementen dargestellt, getestet und visualisiert werden kann. Fertige Lösungen können zu Lernzwecken auf anderen Webseiten eingebunden werden. Das hat zwar wenig mit Videos zu tun, allerdings ist der Einbettungsbefehl fast identisch mit einem Video-iframe-Kommando. Zur Einbindung eines jsfiddle-iFrames wird — ähnlich der Videofunktion — nur eine ID benötigt:

<div class="html5video jsfiddle" id="{id-des-jsfiddles}"></div>

Die benötigte ID des jsfiddles entspricht der ID-Kennung hinter der Adressangabe 'https://jsfiddle.net/':video3.jpg

Zusätzlich können Sie den Umfang der Anzeige festlegen. Im Standard zeigt das eingebettete jsfiddle alle vier Komponenten (html, css, js und result) an. Mit Hilfe des scope-Parameters können Sie diesen Umfang eingrenzen (Elemente durch Komma, jedoch ohne Leerzeichen, trennen, z.B. scope-css,html):

<div class="html5video jsfiddle scope-html,css,js" id="tx2w4s19"></div>

Für das Aussehen des Einbettungsobjekts stehen die Layoutversionen hell ("light") und dunkel ("dark" = Standard) zur Verfügung — diese werden über den color-Parameter aktiviert, z.B. so:

<div class="html5video jsfiddle color-light scope-html,css,js" id="tx2w4s19"></div>

Einbindung von Soundcloud-Audiostücken
soundcloud.png

soundcloud.com ist eine Musikplattform, deren Audiosamples in Webseiten eingebettet und abgespielt werden können. Da die Einbindung sich sehr ähnlich zu der einer Videodatei darstellt, kann die Videoload-Lösung dies einfach mit erledigen: benötigt wird wie immer nur die ID des Audiostücks, die sich relativ einfach aus dem iframe-Code ermitteln und kopieren lässt:video4.jpg

Noch einfacher ist es, den gesamten iframe-Code des Audiostücks in das vorhandene Videotool zu kopieren — das Tool erkennt die Quelle und die ID automatisch und liefert Ihnen den fertigen Twoday-konformen HTML-Befehl als Kopiervorlage:video5.jpg

Ein Beispiel für die Einbindung des Audiosamples Be merciful der Gruppe Kula Shaker würde demnach mit folgendem Code erzeugt werden:

<div class="html5video soundcloud" id="20636707"></div>

Um die Soundcloud-Anzeige etwas schmaler zu gestalten, kann man den Zusatz stripe ergänzen. Der Befehl

<div class="html5video soundcloud stripe" id="20636707"></div> erzeugt

Tool für Twoday-Videocode nutzen

Twoday-Videocode automatisch generieren

Es ist evtl. etwas mühsam, die oben beschriebenen Parameter für einen Videoaufruf im Kopf zu behalten oder erst wieder nachzuschlagen, wenn man sie für ein Video benötigt. Aus diesem Grund habe ich zusätzlich ein kleines Online-Tool erstellt, das den Twoday-Code automatisch für Sie zusammenstellt.

Sie müssen nur noch den vom Videoanbieter bereitgestellten iframe-Einbettungscode in das Formularfeld iframe-Code 1 des Tools kopieren. Dieses erkennt den Videoanbieter, extrahiert die korrekte Video-ID, errechnet aus Breite und Höhe das empfohlene Seitenverhältnis und stellt diese Ergebniswerte im Bereich Optionen Videoanzeige 2 ein.

Dort können Sie nun noch nach Wunsch eine kleinere Breite einstellen oder ein anderes Seitenverhältnis wählen. Bei jeder Änderung wird der entsprechende Twoday-HTML-Code neu generiert 3 und als Kopiervorlage angezeigt.

video2.jpg

Direkt unter dem Feld HTML-Code wird das gewünschte Video auf Basis Ihrer gewählten Einstellungen eingeblendet. Entspricht alles Ihren Vorstellungen, kopieren Sie den generierten HTML-Code einfach in Ihren Beitragstext.

Das Videotool finden Sie dauerhaft unter folgender Linkadresse:

http://neonwilderness.twoday.net/stories/videotool

oder per Schaltfläche hier im Beitrag sowie rechts unten in der Sidebar:

Videotool aufrufen...

Probleme, Fragen, Ergänzungswünsche?

Falls Sie Probleme mit dem Videotool oder bei der Anzeige von Videos bemerken, posten Sie diese bitte zusammen mit einem Screen­shot in die Kommentare. Dies gilt auch für evtl. Änderungs-/Erweiterungs­wünsche — z.B. zusätzliche Video­anbieter/Platt­formen, die integriert werden sollen.

Falls ein Videofenster schwarz bleibt, liegt der Grund meist darin, dass diese Plattform Flash-Videos verwendet. Dazu muss auf Ihrem Endgerät Adobe Flash installiert sein, was z.B. auf allen Apple- und den meisten Android-Geräten nicht der Fall ist.

Demovideos anzeigen...

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

videoload.js und video2day.js © 2015-2016 NeonWilderness — lizensiert unter MIT. Quelldateien:  GitHub.
video.js © 2013 Brightcove, Inc. — lizensiert unter Apache2.

Dienstag, 30. Dezember 2014

Twoday-Tipp #7 - Beitragsmarkierung

newupdatestory.jpg

In tiefer Weihnachtsnacht wurde dem Forum die Frage beschert, ob es möglich sei, Beiträge und Kommentare in der Seitenspalte je nach Aktualisierungsstatus automatisch mit Neu oder Update zu kennzeichnen. Und auch hier heißt die richtige Antwort wieder: "Im Prinzip Twoday-Standard nein, jedoch, mit zwei kleinen Ergänzungen in den richtigen Skins geht es doch.

Zwar bietet die Twoday-Software keine direkte Funktion, um einen neuen von einem geänderten Beitrag zu unterscheiden, allerdings gibt es zu jedem Beitrag (und auch zu jedem Kommentar) zwei Zeitstempelfelder, die per Makro abrufbar sind:

  1. <% story.createtime %> gibt das Ersterstellungsdatum eines Beitrags,
  2. <% story.modifytime %> das Datum der letzten Beitragsänderung wieder.

Wenn modifytime also gleich createtime ist, darf man davon ausgehen, dass der betreffende Beitrag noch nie geändert wurde, also "Neu" ist.

Relativierung: Dies wirft allerdings folgende Fragen auf: Wie lange gilt ein neuer Beitrag als "neu"? Soll er nach Ablauf einer gewissen Zeitspanne immer noch als "neu" gekennzeichnet werden? Wohl eher nicht. Und ab wann gilt ein neuer Beitrag als "geändert"? Bereits dann, wenn man drei Minuten nach dem Anlegen einige Tippfehler korrigiert?

Diese Festlegungen sind individuell und können nach eigenem Gusto in der unten beschriebenen Lösung angepasst werden. Als Vorbelegung sind folgende Regeln abgebildet:

  1. Ist ein Beitrag oder Kommentar älter als 7 Tage, erhält er keine Kennzeichnung mehr als "neu" oder "geändert".
  2. Liegt zwischen Änderungsdatum und Erstellungsdatum nicht mehr als eine Minute, so gilt der Beitrag weiter als "neu".
Der Abstand von einer Minute darf übrigens nicht auf Null verringert werden, da Twoday manchmal schon beim Neuanlegen eine (falsche) Minutendifferenz zwischen den beiden Zeitstempeln hat.
Installation der Beitragskennzeichnung

Um die Beitragsmarkierung zu aktivieren, müssen sowohl im Skin Site.style sowie in Story.historyview kleine Ergänzungen vorgenommen werden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Stylesheet (Site.style), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort folgende Zeilen hinein:
    .historyItem:before { content: ""; padding: 2px 4px; color: #fff; border-radius: 3px; font-size: 10px; font-weight: bold; margin-right: 5px; vertical-align: bottom; display: block; }
    .historyItem.new:before { content: "New"; background: #ee2424; display: inline; }
    .historyItem.update:before { content: "Update"; background: #aaa; display: inline; }
    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster, kopieren Sie ihn in die Zwischenablage und von da in das Skin-Textfeld.
    Ihr Stylesheet müsste nun in etwa so aussehen:

    newupdatestory3.jpg

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern.
  6. Scrollen Sie nun in der Skinübersicht weiter herunter bis zur Überschrift "Elemente in den Seitenleisten" und klicken Sie dort auf »kürzlich geändert« Eintrag (Story.historyview).
  7. Kopieren Sie das nachstehende Script vor das letzte </div> in diesem Skin:
    <script type="text/javascript">
        var now = Date.now(), modified = Date.parse("<% this.modifytime format="yyyy/MM/dd HH:mm" %>"), created = Date.parse("<% this.createtime format="yyyy/MM/dd HH:mm" %>");
        if (now - modified < 7*24*60*60*1000){
            scriptTag = document.getElementsByTagName("script");
            scriptTag[scriptTag.length-1].parentNode.className += (modified - created > 60000 ? " update" : " new");
        }
    </script>
    
  8. Ihr Modulcode sollte nun folgendermaßen aussehen:

    newupdatestory1.jpg

  9. Klicken Sie nach erfolgter Änderung unten auf "Speichern und Schließen". In der Anzeige unter "Aktuelle Beiträge" sollten nun farbige Markierungen neben den Beiträgen auftauchen (Hard-Reload via Strg-F5 nicht vergessen!).

    newupdatestory0.jpg

Markierung auch für Kommentare aktivieren

Falls Sie auch Kommentare automatisch mit "Neu/Geändert"-Markierungen versehen wollen, müssen Sie noch eine weitere Änderung vornehmen. Statt Story.historyview heißt der entsprechende Skin Comment.historyview. Dieser wird nicht direkt über die Skinseite zur Änderung angeboten, kann aber leicht folgendermaßen aufgerufen und verändert werden:

  1. Rufen Sie zunächst erneut den bereits geänderten Skin Story.historyview auf (siehe oben).
  2. Gehen Sie nun oben in die Browseradresszeile und ersetzen Sie "Story" durch "Comment"

    newupdatestory2.jpg

  3. Nachdem Sie die Datenfreigabe-/Return-Taste gedrückt haben, wird der Skin Comment.historyview angezeigt. Kopieren Sie das oben erwähnte Script auch hier vor das letzte </div> und speichern Sie die Änderung.
Zeitspannen ändern

Die vorbelegte Zeitspanne von 7 Tagen, ab der keine Markierungen mehr angezeigt werden, kann einfach geändert werden.

Twoday-Zeitstempel reflektieren vergangene Millisekunden seit einem bestimmten Fixdatum. Die Differenz aus modifytime und createtime ist also eine Millisekundenzahl. Im Script finden Sie eine Stelle now - modified < 7*24*60*60*1000, die die Millisekundenzahl für 7 Tage darstellt. Wollen Sie die Markierung beispielsweise erst nach 14 Tagen stoppen, ersetzen Sie 7 durch 14.

Sie können auch ändern, wie lange ein Beitrag die Markierung "Neu" behält, obwohl Sie ihn zwischenzeitlich ändern.

Im Script wird an der Stelle modified - created > 60000 geprüft, ob bereits eine Minute (60 Sekunden * 1000 Millisekunden) vergangen ist, bevor eine "Änderung" konstatiert wird. Wollen Sie z.B. 4 Stunden für eigene Anfangskorrekturen reservieren, dann ersetzen Sie die 60000 durch 4*60*60*1000.
Farben oder Text ändern

Farben oder Text ändern Sie im Stylesheet (Skin Site.style). Die Neu-Markierung wird durch den eingefügten Eintrag .historyItem.new:before gesteuert, die Geändert-Markierung entsprechend durch .historyItem.update:before. Die Hintergrundfarbe wird über den Parameter background: #farbe gesetzt. Den richtigen Wert für Ihre Wunschfarbe können Sie z.B. hier ermitteln.

Texte ändern Sie im Parameter content. Dort können Sie für "New" und "Update" z.B. "Neu" und "Geändert" oder beliebige andere kurze Texte einsetzen.

Problematische Änderungserkennung unter Twoday

Die Twoday-Software erkennt nicht immer zuverlässig Textänderungen an Beiträgen oder Kommentaren (wodurch dann der modifytime-Zeitstempel nicht verlässlich gesetzt wird). Z.B. wird keine Änderung erkannt, wenn man nur den Titel ändert. Auch im Textbereich eines Beitrags/Kommentars werden Änderungen erst ab einem bestimmten, größeren Umfang registriert.

Wenn man also eine Änderungserkennung erzwingen will, kopiert man eine längere Zeichenkette, sichert einmal, löscht diese wieder und sichert erneut. Umständlich, aber das funktioniert dann.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

© 2014 NeonWilderness — lizensiert unter MIT.

Donnerstag, 4. Dezember 2014

Twoday-Tipp #6 - Berechtigungen für Twoday-Module

module2role/role01.jpg

Die Anfrage von LadySaville im Hilfe-Forum wirft eine interessante Fragestellung auf: Wie kann man ausgewählte, eigene Twoday-Module bestimmten Mitgliedergruppen zuordnen und die Modulanzeige auf diese beschränken?

Beispiel: Als Blogbesitzer möchte ich die Liste meiner Abonnements (Sidebar-Modul: "Abonnements"), meine Bücherliste (Sidebar-Modul: "Bücherliste") sowie meine Kommentare auf anderen Blogs (Sidebar-Modul: "Meine Kommentare") nur meinen eingetragenen Abonnenten anzeigen. Wie kann man dies realisieren?
Das Twoday-Berechtigungsmodell

Für plattforminterne Berechtigungsprüfungen verwendet Twoday 5 Rollen­definitionen, mit denen jeweils bestimmte Erlaubnisse verbunden sind. Der Berech­tigungs­umfang entspricht einer invertierten Pyramide und wächst vom einfachen Blogleser mit minimaler Berechtigung bis zum Administrator mit maximalen Berechtigungen an. Jede höhere Stufe umfasst automatisch auch alle Berechtigungen der darunter liegenden Stufen.
Beispiel: Die Rolle "Contributor" hat neben den speziellen Berechtigungen für diese Rolle auch alle Berechtigungen eines Subscribers oder Bloglesers.

module2role/role02.jpg

Ein Blogbesitzer (Eigentümer) ist gleichzeitig immer auch "Administrator". Ein normaler Abonnent erhält automatisch die Standardberechtigung "Subscriber", kann aber vom Administrator des Blogs (individuell) auf höhere Berechtigungsstufen angehoben werden. Jeder Besitzer eines Twoday-Blogs kann die beschriebenen Berechtigungsrollen unter AdminMitglieder (bzw. der Direkt-URL blogname.twoday.net/members/main) an beliebige andere Twoday-Mitglieder vergeben oder diese auch wieder zurücknehmen:

module2role/role03.jpg

Als wahrscheinlich häufigste Anwendungsfälle (Use-Cases) für Modulberechtigungen kann man sich folgende Szenarien vorstellen:

  • Twoday-Module, die man nur seinen eingetragenen Abonnenten zeigen will,
  • Module, die man nur selbst als Blogbesitzer (respektive Administrator) angezeigt bekommen soll.

Trotz dieser zwei plausibelsten Fälle habe ich die Routine zur Berechtigungsprüfung sofort allgemeingültig realisiert, d.h. dass prinzipiell alle definierten Twoday-Rollen für Berechtigungsprüfungen verwendet werden können.

Installation der Berechtigungsprüfung für Twoday-Module

Die Aktivierung der Berechtigungsprüfung auf Modulebene ist sehr einfach und besteht in der Ergänzung zweier Zeilen im Skin Seitenleiste 2 (Site.sidebar02):

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Scrollen Sie herunter bis zur Überschrift "Seitenleisten" und klicken Sie dort auf Seitenleiste 2 (Site.sidebar02).

    module2role/role04.jpg

  4. Geben Sie dort hinter der vorhandenen Zeile <% site.sidebarItems for="sidebar02" %> die nachstehenden zwei neuen Zeilen ein:
    <div id="loginStatus" style="display:none"><% site.loginstatus %></div>
    <script src="//static.twoday.net/cdn/files/module2role-min-js.js">
  5. Ihr Modulcode sollte nun folgendermaßen aussehen:

    module2role/role05.jpg

  6. Klicken Sie abschließend unten auf "Speichern und Schließen":

    module2role/role06.jpg

    Fertig! Damit haben Sie die Berechtigungsprüfung prinzipiell aktiviert und können nun daran gehen, einzelne Module bestimmten Rollen zuzuordnen.

Module bestimmten Twoday-Rollen zuordnen

Unter "Module" versteht man diejenigen Elemente, die Sie in Ihre zwei Sidebars aufnehmen können. Klicken Sie in Ihrer Blog-Menüzeile auf AdminModule und dann Sidebar Module, um sich die 26 verfügbaren Module anzeigen zu lassen.

Nehmen wir an, Sie haben das Modul "Free-Text (4)" in Ihre Sidebar aufgenommen, wollen seinen Inhalt aber nur Ihren Contributoren anzeigen. Um das Modul also der Berechtigung "Contributor" zuzuordnen, gehen Sie in die Einstellungen zu diesem Modul und ergänzen in der Überschrift ganz einfach den Text @[Contributor] und sichern danach Ihre Änderung:

module2role/role07.jpg

Wollen Sie ein Modul nur Ihren eingetragenen Abonnenten zeigen, ergänzen Sie ein @[Subscriber] in der Überschrift. Soll ein Modul nur für Sie als Blogbesitzer (=Administrator) sichtbar sein, fügen Sie stattdessen ein @[Administrator] an.

Beim Aufruf des Blogs wird das obige Beispiel folgendermaßen in der Sidebar angezeigt — natürlich nur, wenn man über die Berechtigung Contributor oder höher verfügt:

module2role/role08.jpg

Wie man sehen kann, entfernt die Routine vor der Anzeige des Moduls den Berechtigungszusatz aus der Überschrift.

Verfügt man als Aufrufer der Webseite nicht über die erforderliche Berechtigung, wird das betreffende Modul aus der Sidebar-Anzeige entfernt.

Auf diese Weise können Sie nun alle in Ihrer Sidebar angezeigten Module — so das Sinn macht — nacheinander gewünschten Berechtigungsgruppen zuordnen. Hat ein Modul keinen Berechtigungszusatz, so bleibt es grundsätzlich für alle Blogbesucher sichtbar.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

© 2014 NeonWilderness — module2role ist OpenSource und lizensiert unter MIT.Quellcode
Außergewöhnliches
Dinge, die gut sind
Entgleisungen
Gemalte Lebenserfahrung
Musik
Nachtgedanken
Neon's Must-Have-Tools
Neon's Top10 List
Neon-Award
Schöner Bloggen
Today I Learned
Wort des Tages
Profil
Abmelden
Weblog abonnieren
Meine bearbeiteten Skins
Hauptseite (Site.page)
Toolbar (Site.foundationToolbar)
Foundation 5 docs
Foundation Sites github
Font Awesome Cheatsheet