Facebook Plug-Ins datenschutzkonform in Contao einbinden

Jonathan Schreibe einen Kommentar

Das LG Düsseldorf hat entschieden, dass die Einbindung von Facebook-Buttons, Like-Boxen usw. nicht den geltenden Datenschutzbestimmungen entspricht. Das Plug-In übermittelt nämlich Daten über das Surfverhalten des Nutzers an Facebook, ohne dass überhaupt klar ist, was mit den Daten passiert. Da dies bereits mit Aufrufen der Seite passiert, ist es weder möglich, diese Datenübermittlung im Vorfeld zu erkennen, noch sie zu unterbinden. Eine möglicher Workaround dafür ist die sog. Zwei-Klick-Lösung: Die Elemente werden erst nach erneuter Bestätigung durch den Nutzer geladen und bleiben ansonsten inaktiv. Auch bei dieser Umsetzung ließe sich streiten, ob mit Blick auf die fehlende Transparenz überhaupt eine informierte Einwilligung möglich ist; dies stellt jedoch die Plug-Ins insgesamt in Frage. Als Webdesigner möchte ich mich im Folgenden daher mit dem Workaround beschäftigen und beschreiben, wie Facebook Plug-Ins datenschutzkonform in Contao eingebunden werden können.

1. Um ein Plug-In zu nutzen, können die entsprechenden Codeschnipsel direkt via Facebook erzeugt werden. Für das folgende Beispiel werde ich das Page-Plugin nutzen: https://developers.facebook.com/docs/plugins/page-plugin. Die Codeschnippsel bereiten wir vor und legen sie für die folgenden Schritte bei Seite.

2. Zunächst gehen wir ins Contao Backend und legen ein neues Modul an (eigenes HTML-Modul). In dieses Modul kopieren wir den include-Code, der uns von Facebook vorgegeben wird. In meinem Fall sieht das dann so aus:

3. Als nächstes legen wir ein neues Seitenlayout an, ich habe es Facebook genannt. Dort fügen wir in der Hauptspalte das eben erstellte Modul ein. Die üblichen Stylesheets unserer sonstigen Webseite laden wir nicht; wir wollen eine leere Seite, in der lediglich das Plugin liegt. Bei eigener Javascript-Code fügen wir die Javascript-SDK von Facebook ein:

4. Wir haben nun also ein Seitentemplate und ein Modul erstellt. Als nächstes gehen wir in die Seitenstruktur und legen eine neue Seite an, ich nenne sie in meinem Beispiel Facebook. Bei den Layout-Einstellungen stellen wir das zuvor angelegte Layout „Facebook“ ein. Wenn ihr jetzt die Seite aufruft, sollte die Like-Box angezeigt werden. Ich verzichte an dieser Stelle darauf den Link zu posten, damit ich mir nicht die hier erklärte Zwei-Klick-Lösung selber aushebele. 😉

5. Nun legen wir ein weiteres HTML-Modul an, in dem wir die Zwei-Klick-Lösung integrieren, die später auf unsere Webseite soll. Bei dem iframe in Zeile 5 muss die URL bzw. Seiten-ID (kann in der Seitenstruktur von Contao eingesehen werden, indem man mit der Maus über eine Seite fährt)  der zuvor erstellten Seite mit der Like-Box drin eingefügt werden. Unten folgt dann ein Text, der den Nutzer vor den Folgen seiner Entscheidung warnt. Bitte dabei beachten, dass <script> und <iframe> in den Contao-Einstellungen ggf. erst freigegeben werden müssen, um nicht aus dem HTML-Modul entfernt zu werden. Bei mir sieht das z.B. so aus:

6. Dieses Modul können wir nun an beliebiger Stelle in unsere Contao Webseite einbinden. Das fertige Ergebnis kann dann so aussehen: http://jst-media.de/facebook-2click.html – die optischen Anpassungen aus meinem Beispiel gibts im nächsten Punkt.

7. Zu guter letzt passen wir die Optik noch etwas an. Ich habe dazu einen Screenshot des Plug-Ins gemacht und mit einem transparenten Layer überzogen, der als Hintergrundgrafik dient. Daraus ergibt sich folgendes CSS:

 

 

Ich hoffe, das Tutorial ist hilfreich. Falls ja würde ich mich – in diesem Fall ganz besonders – über ein Like im frisch erstellten Page-Plugin freuen.

Selbstverständlich lässt sich das Tutorial auch mit einem Like-Button umsetzen, dann müssen nur die Code-Schnipsel und das css entsprechend angepasst werden.

Die oben genannte Umsetzung einer 2-Klick-Lösung soll lediglich als Denkansatz dienen. Die Rechtslage in diesem Feld ist sehr komplex, und ich möchte ausdrücklich nicht für mich beanspruchen, hiermit eine Lösung zu präsentieren, die sämtlichen rechtlichen Bedenken standhalten kann. Wer auf Nummer sicher gehen will, kann auh einfach „normal“ auf seine Facebook-Seite verlinken und das z.B. mi einem Icon etwas aufhübschen.

Onepage Webseite mit Contao

Jonathan 19 Kommentare

Im folgenden Tutorial soll die Umsetzung einer Onepage Webseite mit Contao erklärt werden. Onepager sind beliebt – sie eignen sich nach meinem Empfinden insbesondere für kleinere Projekte, die nur wenig Content beinhalten (es sieht dann einfach nicht nach so wenig aus), können aber auch für größere Projekte eingesetzt werden.

Damit ein Onepager aber auch gut aussieht, sind m.E. zwei Elemente erforderlich: Die Seite muss smooth scrollen und bestenfalls den Bereich, der sich gerade im Blickfeld befindet, hervorheben. Ich habe das in Contao nun folgendermaßen umgesetzt:

  1. Zunächst legen wir ein neues Modul mit eigenem html-Code an. In dieses Modul kommt unsere Navigation – Contao selbst bietet leider keine (mir bekannte) Möglichkeit, mit den Core-Modulen einen Onepager zu realisieren, sodass wir hier selbst Hand anlegen.
  2. Die Navigation ist wie folgt aufgebaut:

    Die Klassen home, leistungen, about und kontakt habe ich in vorliegendem Beispiel verwendet, um jedem Button noch eine separate Hintergrundgrafik zuzuweisen; ansonsten ist das nicht unbedingt erforderlich.
  3. Als nächstes legen wir in der Seitenstruktur 4 Unterseiten für Home, Leistungen, About und Kontakt an. Die Seiten schalten wir offline.
  4. Wir wechseln nun zur Artikelansicht und notieren uns die Artikel-IDs der Artikel in den zuvor angelegten Seiten.
  5. Wir erstellen ein neues HTML-Modul, mit dem der Content „erzeugt“ wird. Die IDs geben wir in der gewünschen Reihenfolge ein:

    WICHTIG: Die Section-ID muss dabei jeweils den Verlinkungen (#home, #leistungen, …) in der Navigation entsprechen.
  6. Nun legen wir ein neues Seitenlayout an und nennen es z.B. Onepager. In die Kopfzeile binden wir unsere Modul „Navigation“ ein, in die Hauptspalte das Modul „Content“.
  7. Wir aktivieren im Seitenlayout jquery
  8. Als nächstes fügen wir bei „eigener Javascript Code“ im Seitenlayout folgenden Code ein:

    Dieses Script fügt unserer Navigation mit der css-Klasse .navbar die smooth scroll und highlighting Funktionalitäten hinzu. Im Script können diverse Variablen noch etwas angepasst werden: In Zeile 5 können wir die Erfassung des Sichtbereichs relativ zur .navbar verschieben, z.B. wenn der #header größer ist als die .navbar. In Zeile 17 kann außerdem die Dauer der Animation eingestellt werden sowie der Animationstyp. Wer mehr Auswahl möchte, sollte einen Blick auf die jquery easings werfen. Im Standard-jquery Paket, das mit Contao eingebunden wird, sind die easings nicht vorhanden.
  9. Jetzt geht es ans .css: Zunächst empfiehlt es sich, die Navigation zu fixieren, da ansonsten der highlighting-Effekt nicht sichtbar ist. Das könnte z.B. so aussehen:
  10. Durch das Skript bekommt der Link, dessen Inhalt gerade im Sichtbereich liegt, die css-Klasse .active zugewiesen. Dementsprechend müssen wir nun noch eine entsprechende Formatierung hinzufügen:
  11. Die .css Datei muss natürlich im Seitenlayout noch eingebunden werden. 😉 Die Onepage-Webseite mit Contao ist nun in ihren Grundzügen fertig. Ich habe für das von mir erstellte Projekt noch folgendes .css für die Navigation-Bar verwendet:

     

Ich hoffe, dieses kleine Tutorial ist hilfreich.

 

 

Contao Formulare: Zu Fehlermeldung springen

Jonathan Schreibe einen Kommentar

Ich hatte vor Kurzem das Problem, auf einer etwas älteren Contao-Installation ein längeres Registrierungs-Formular einrichten zu müssen. Das Problem hier war, dass bei falsch ausgefüllten Pflichtfeldern zwar eine Fehlermeldung ausgegeben wurde, diese jedoch mitunter außerhalb des Viewports lag und vom Benutzer daher gar nicht wahrgenommen wurde.

Die Lösung dafür ist wie folgt:

  1. Neues Seitenlayout anlegen, indem das Layout der Seite, in der das Formular eingebunden wird, kopiert wird
  2. In dem neuen Seitenlayout dann den folgenden Javascript-Code einfügen:
  3. In der Seitenstruktur der entsprechenden Seite das Layout zuweisen.

Mit diesem Workaround sind die Fehlermeldungen dann im Viewport. Ich habe mittels css dann noch .error in Rot eingefärbt, damit die fehlerhaft ausgefüllten Felder direkt ins Auge springen.

Fullscreen Navigation Menu in Contao

Jonathan 1 Kommentar

Im folgenden Artikel wird die Einbindung einer mit jquery animierten fullscreen Navigation in Contao erklärt.

Aktuell bin ich dabei, meine Webseite zu überarbeiten. Das ist gerade bei Designern nicht immer einfach: Viele Webdesigner toben sich dann richtig aus, das Ergebnis ist nach meinem Empfinden aber nicht immer optimal: Technisch mag zwar alles perfekt ausgeklügelt sein, aber die Nutzbarkeit ist, gerade für weniger Internet-affine Nutzer, die aber wiederum die Zielgruppe sind, meist eingeschränkt.

Dennoch wollte ich bei meiner neuen Webseite einige schlichte, moderne, seltene, auffällige und einprägsame Dinge einbauen. Die Liste an Kriterien ist insofern lang gewesen. 😉

Einem dieser Elemente – dem wohl wichtigsten – möchte ich heute einen Beitrag widmen: Der Navigation. Ich habe mich hier für eine Vollbild-Navigation entschieden, da hier keine größeren Änderungen für die Mobilversion nötig sind (die ist quasi von Haus aus responsive), seeeeehr viel Platz (z.B. für große Icons, Action-Buttons, usw.) vorhanden ist und das Ganze nach meinem Empfinden auch sehr gut aussieht. Als Basis dient die „Full-Screen Pop-Out Navigation“ von codyhouse.co.

Um das Ganze in Contao zu implementieren, sind folgende Schritte nötig:

  1. Das Paket herunterladen und entpacken.
  2. In Contao im Seitenlayout einen eigenen Navigationsbereich hinzufügen; bei mir heißt er Navigation, die zugewiesene id ist entsprechend #Navigation
  3. Bevor es los geht, bearbeiten wir noch schnell die main.js und style.css aus dem Paket: Mit suchen&ersetzen ersetzen wir alle .cd-header durch #Navigation
  4. Nun laden wir die style.css und main.js in Contao hoch und binden sie unter Seitenlayout im Header ein:
  5. Im Seitenlayout aktivieren wir außerdem jquery.
  6. Jetzt legen wir eine neue Seite an, die wir im Menü verstecken. Hier werden wir unsere Navigation einfach als Textelement anlegen und hübsch stylen. Ich würde die Verwendung eines responsive grids oder der rocksolid columns empfehlen.
  7. Sobald das erledigt ist, legen wir ein neues html-Modul an, mit dem wir die Navigation, die aufgerufen wird, einbinden:
  8. Um den Button, mit dem die Navigation aufgerufen wird, einzubinden, legen wir ebenfalls ein html-Modul an. Ich habe dem Ganzen noch die Klasse .navbutton gegeben, um den Button in meiner #Navigation anordnen zu können:
  9. Als nächstes binden wir die Module im Seitenlayout ein. Den Button (7. Schritt) fügen wir in unseren unter 2. angelegten Navigationsbereich ein, die Navigation (6. Schritt) in der Hauptspalte.
  10. Das war es auch schon – die Navigation sollte nun nach einem Klick auf den Menü Button herunter fahren. Natürlich kann das .css noch etwas angepasst werden, nicht benötigte Elemente wie .cd-logo oder .cd-secondary-nav können entfernt werden.

Was mir dann noch nicht gefallen hatte war der Umstand, dass das Menü beim Klicken eines Ankerlinks offen geblieben ist. Das ist insbesondere bei Onepage-Webseiten sehr unpraktisch. Ich habe daher die main.js wie folgt angepasst, um die Navigation beim Anklicken eines Links zu schließen:

 

 

JQuery Progress-Bar in Contao

Jonathan Schreibe einen Kommentar

Visualisierungen sind wichtig, um eine Webseite möglichst intuitiv und gleichzeitig ansehnlich zu gestalten. Animierte Balkendiagramme, auch progress-bars genannt, sind dabei eine gute Möglichkeit. Das folgende Tutorial erklärt, wie mit jquery animierte Progress-Bars in Contao eingebunden werden können. Die Grundlage dafür ist skillset.js.

      1. Das Paket herunterladen, entpacken, im Backend hochladen.
      2. Im Seitenlayout die .css sowie die skillset.css und skillset.js im <head>-Bereich einbinden, außerdem JQuery aktivieren:
      3. Im <head>-Bereich fügen wir außerdem die Inhalte für unsere geplante progress-bar ein. Bei headline wird die Überschrift eingetragen, unter description findet sich der tooltip wieder. Mit length und value können Länge sowie Anzeigestand der Progressbar eingestellt werden.
      4. Als nächstes gehen wir in den Artikel, in dem die Progressbar zu sehen sein soll. Dort legen wir ein html-Element an und fügen folgenden Code ein:
      5. Die Farbe der Balken kann in der skillset.css angepasst werden, nämlich unter
      6. Da ich außerdem Font-Awesome nutze, habe ich darauf verzichtet, den in skillset eingebundenen Fontello zu nutzen. Die Anpassung in der skillset.css ist wie folgt:
      7. Fertig ist die Progress-Bar!

 

 

Jquery Tabs in Contao

Jonathan Schreibe einen Kommentar

Gerade wenn eine Webseite viel Text enthält ist es wichtig, die Inhalte möglichst ansprechend anzuordnen. Neben Akkordeon-Effekten eignen sich Tabs dafür gut – im Gegensatz zum Akkorden haben sie aber den Vorteil, dass alle verfügbaren Tabs oberhalb des Inhaltes angezeigt wird; befindet sich z.B. im 1. Akkordeonelement ein großer Inhalt, verschwinden die darauffolgenden Akkordeonelemente am Ende der Seite.

Für die Neugestaltung meiner Webseite habe ich mich daher entschieden, Tabs zu verwenden. Da die Webseite auf Contao basiert, habe ich mich für die Extension „Jquery UI Tabs“ von wangaz entschieden, die Tabs als Content-Element in Contao anlegt.

Nach Einbindung der Tabs hat sich jedoch schnell heraus gestellt, dass die Optik noch stark verbesserungswürdig war. Ich habe dabei sowohl das Aussehen an sich verbessert, allerdings auch die Haptik durch Einfügen eines Animationseffektes. Aber eins nach dem anderen:

I. CSS

1. Zunächst möchte ich die Tabs nebeneinander angezeigt haben; dazu geben wir .ui-state-default float:left und display:inline

2. Der Tab-Navigation kann mit.ui-tab-nav ein eigener Look verliehen werden

3. Der aktive Tab kann mit .ui-state-active separat gestylet werden

4. Mit .ui-tabs-panel lässt sich der Inhaltsbereich stylen; das fertige .css könnte z.B. wie folgt aussehen:

 

II. Animation

Ferner wollte ich, dass die Tabs beim Umschalten eine Transition haben, also animiert sind. Dafür bin ich wie folgt vorgegangen:

1. Jquery UI im Seitenlayout eingebunden; dazu einfach jquery ui im Backend hochladen und im Seitenlayout z.B. im <head> Bereich verlinken: <script src=“files/jquery-ui.js“></script>

2. Auf Templates klicken und dort ein neues Template j_ui_tabs.html5 anlegen

3. In diesem Template kann dann ein Effekt eingefügt werden – ich habe mich für einen Überblendeffekt (fade) entschieden. Das Ganze sieht wie folgt aus:

4. Für diejenigen, denen ein Fade-Effekt zu langweilig ist, lohnt sich das Stöbern im Jquery UI Toolkit: Es gibt dort viele weitere Effekte.

Die Impressumspflicht – Ein Kurzüberblick

Jonathan Schreibe einen Kommentar

Für den Betrieb einer Webseite ist regelmäßig die Bereitstellung eines Impressums erforderlich, um Besuchern der Seite die Möglichkeit zu eröffnen, mit dem Seitenbetreiber in Kontakt zu treten. Diese Pflicht ergibt sich grundsätzlich zunächst aus § 5 TMG. Für redaktionell-journalistische Inhalte gelten außerdem die zusätzlichen Anforderungen nach §§ 55 RStV.

Die Anforderungen, die an den Inhalt eines Impressums zu stellen sind, ergeben sich aus dem Gesetz. Für den Laien kann die Nutzung eines Impressumsgenerators ratsam sein. Auf Grundlage der eingegebenen Daten wird dann ein passendes Impressum erzeugt. Impressumsgeneratoren gibt es z.B. hier oder hier.

Ist das Impressum erst einmal fertig gestellt, muss es nur noch in die Webseite eingebunden werden. Auch hier gibt es, insbesondere aus Webdesigner-Sicht, einige Dinge zu beachten. So sollte das Impressum z.B. nicht als pop up eingebunden werden, da pop-ups oftmals vom Browser blockiert werden. Auch eine Unterbringung im Tooltip kann für Mobilgeräte problematisch sein. Neben diesen technischen Aspekten ist auch die Platzierung wichtig: Das Impressum sollte nach maximal zwei Klicks erreichbar sein, bestenfalls jedoch direkt von jeder Unterseite aus. Die Platzierung sollte so gewählt sein, dass das Impressum für den durchschnittlichen Besucher gut erkennbar ist; gängige Praxis ist die Fußzeile. Zuletzt sollte der Link zum Impressum auch klar zum Ausdruck bringen, dass dort Informationen zum Seitenbetreiber zu finden sind, z.B. Kontakt oder Impressum; letzteres würde ich als gängige Praxis bezeichnen.

Webdesign und Urheberrecht: Ein kurzer Überblick

Jonathan Schreibe einen Kommentar

Ein oftmals sehr problematisches – da fehleranfälliges – Feld im Webdesign ist das Urheberrecht. Durch die Bereitstellung von Inhalten auf einer Webseite kommen Betreiber jedoch zwangsläufig mit dem Urheberrecht in Kontakt. Der folgende Beitrag soll daher die Grundzüge des Urheberrechts skizzieren, um ein Grundverständnis zu schaffen und mögliche Stolperfallen aufzudecken.

Was ist urheberrechtlich geschützt?

Damit das Urheberrecht anwendbar ist, müsste ein urheberrechtlich geschütztes Werk betroffen sein. Der Begriff eines Werkes ist im Gesetz nur schwammig als „persönliche geistige Schöpfung“ definiert, § 2 Abs. 2 UrhG. Bei der Frage, ob etwas urheberrechtlich geschützt ist, ist also zunächst dieser Maßstab anzulegen. In § 2 Abs. 1 UrhG liefert das Gesetz dann einige Beispiele. Für Webdesigner und Seitenbetreiber sind insbesondere relevant:

  • Sprachwerke, wie Schriftwerke, Reden und Computerprogramme
  • Werke der Musik
  • Lichtbildwerke und vergleichbare Werke
  • Filmwerke

Vorsicht ist also bei der Verwendung fremder Texte, fremden Quellcodes, Musik, Videos und Bildern geboten.

 

Welche Verwertungshandlungen sind verboten?

Ein Urheber hat verschiedene Rechte an seinem Werk. Dazu gehören die Urheberpersönlichkeitsrechte (§§ 11-13 UrhG), die Verwertungsrechte (§§ 15 – 24 UrhG) sowie sonstige Rechte (§§ 25 – 27 UrhG). Ein Verstoß gegen diese  Vorschriften kann eine Abmahnung zur Folge haben. Für Webdesigner und Seitenbetreiber sind insbesondere das Recht auf Namensnennung (§13 UrhG) sowie das Recht der öffentlichen Zugänglichmachung (§ 19a UrhG) relevant. Durch das einbinden urheberrechtlich geschützter Werke dürfte sich regelmäßig eine solche Verwertung ergeben, die ohne Einwilligung des Urhebers rechtswidrig ist.

 

Wann darf ich Werke nutzen?

Selbstverständlich ist es dem Urheber erlaubt, anderen Personen ein Nutzungsrecht einzuräumen. Das ergibt sich aus § 31 UrhG: Demnach darf der Urheber ein einfaches oder ausschließliches Nutzungsrecht einzuräumen, das zeitlich, inhaltlich und räumlich begrenzt werden kann. Die Möglichkeiten einer Lizensierung sind also vielfältig. Umso wichtiger ist es, die Lizenzbedingungen genau zu analysieren und einzuhalten. Denn auch ein Verstoß gegen die Lizenzbedingungen kann eine Abmahnung zur Folge haben, selbst wenn grundsätzlich ein Nutzungsrecht eingeräumt wurde. Letztlich läge dann wieder eine unrechtmäßige Vervielfältigung vor.

 

Was ist mit Open Source und freien Inhalten?

Eine inzwischen relativ bekannte und beliebte Form der Lizensierung ist die Nutzung von Open Source Lizenzen oder anderen freien Inhalten, deren Nutzung und Verbreitung urheberrechtlich gestattet ist. Vereinfacht gesagt erteilt der Urheber hier jedem Nutzer ein kostenfreies Nutzungsrecht, das an je nach Lizenz unterschiedliche Bedingungen geknüpft ist – die GPL z.B. verpflichtet Nutzer, dass abgeleitete Werke ebenfalls unter der GPL lizenziert werden müssen. Eine ebenfalls sehr bekannte Lizenzform ist Creative Commons, die ein Nutzungsrecht einräumt, dieses jedoch an bestimmte Bedingungen knüpft und z.B. eine Namensnennung des Urhebers fordert oder eine kommerzielle Nutzung ausschließen kann. Eine solche ist jedenfalls beim Betrieb einer Unternehmens-Webseite anzunehmen. Webdesigner und Seitenbetreiber sollten daher stets die zugrundeliegenden Lizenzbedingungen im Blick haben und sich nicht dem Trugschluss hin geben, dass bei einer „freien Nutzung“ nichts weiter zu beachten ist.