Katharina Brunner

Wordpress

Lesenswertes: Code und Drohnen beim Bund

by Kommentar verfassen

How Fusion does agile

Once your communication is like oxygen, agile goes best with a heavy dose of open source software.

Daniel Bachhuber, einer der prominentesten WordPress-Entwickler und ehemaliger Automattic-Angesteller, ist seit Kurzem bei Fusion. Dort leitet er die Entwicklungsabteilung. Fusion ist einer der neuen Player auf dem Medienmarkt, der sich mir vor allem bemerkbar gemacht hast, weil er prominente Köpfe abgeworben hat. Unter anderem Alexis Madigal vom Atlantic, Felix Salmon von Reuters und eben Daniel Bachhuber von Automattic.

Coding History

Genauer gesagt ist Coding History hörenswert. Die Selbstbeschreibung:

Ein Podcast zur Frage, wie die digitale Welt geworden ist, wie sie ist: Warum sieht Software so aus, wie sie aussieht? Wie hat sich das Programmieren von Software verändert und was für Auswirkungen hat das eigentlich darauf, wie wir Software benutzen?

„Ich bin kein Computerspieler“

Wie sieht die Arbeit von Drohnenpiloten bei der Bundeswehr aus? Wirklich interessantes Interview bei Zeit Online.

Storyteller: Multimediales Storytelling möglichst einfach

by 10 Kommentare

Gestern habe ich Storyteller veröffentlicht, ein Tool für multimediales Storytelling. Das Ziel: möglichst einfach zu verwenden. Die Zielgruppe: Journalisten, die nicht coden können. Ein Interview mit mir selbst.

Sind solche Geschichten die Rettung des Journalismus?

Nein, natürlich nicht. Verlangt das jemand? Ob die Geschichten gemacht werden, die mit Storyteller (oder Pageflow oder copytext.py von NPR), etwas taugen, liegt ja nicht nur am Werkzeug. Je einfacher allerdings das zu bedienen ist, desto mehr kann man sich auf die Geschichte konzentrieren.

Findest du diese Art des Erzählens immer super?

Nein. Sehr oft finde ich sie sogar ziemlich schlecht. Aber manchmal sind wirkliche Perlen darunter. Meiner Meinung nach die beste Veröffentlichung in dieser Stilform ist Borderland von NPR: Tolle Fotos, sehr kurze Texte, spannend. Es ist nicht zu übersehen, dass ich mich bei Storyteller daran orientiert habe.

demo

Es gibt doch Pageflow. Warum braucht es da noch ein Tool?

Ich finde Pageflow aus mehreren Gründen nicht ideal. Der wichtigste: zu hohe Einstiegshürden. Ich selbst bin zum Beispiel schon an den Voraussetzungen für die Installation auf dem eigenen Server gescheitert. Storyteller basiert auf WordPress, dem sehr viele Menschen, die ins Internet schreiben, schon begegnet sind. Das Ziel ist es, dass Journalisten, die nicht coden können, damit klar kommen. Den letzten Anstoß gab ein Tweet von Mario Haim:

Und wie willst du das schaffen?

Storyteller reduziert den Admin-Bereich auf das Wesentliche – unnötiges, wie beispielsweise „Seiten“ oder Kommentare sind entfernt. Dazu gibt es auf der Startseite des Adminbereichs und in auf jeder „Slide erstellen“-Seite einen Hilfebereich. Die einzelnen Slides selbst sind schnell gemacht: Ein Beitragsbild hochladen, Text rein, fertig.

Aber die Geschichten sehen dann ja alle gleich aus!

Das ist möglich, aber nicht sehr wahrscheinlich. Schließlich sind die dominanten visuellen Elemente Fotos oder Videos, die Schrift tritt eher in den Hintergrund. Und immerhin können Nutzer im Adminbereich aus vier verschiedenen Schriftarten auswählen. Wer noch mehr Individualisierung will, kommt um CSS nicht herum. Dafür gibt es zu jeder Folie ein Feld, in dem diese Elemente Platz haben.

Und ist das jetzt wirklich alles so einfach?

Ich hoffe doch! Allerdings bin ich auch befangen. Um das besser zu beurteilen und um Schwachstellen auszumerzen, muss das Ding getestet, genutzt und verbessert werden – am besten von euch! Ich würde mich freuen. Wer Storyteller mal ausprobieren will, bekommt von mir auch gerne einen Account für meine Version.

Wo bekomme ich Storyteller?

Auf seiner eigenen Webseite oder GitHub.

Mehr zum Thema

Multimedia-Reportagen: Was geht – und was nicht: Christian Jakubetz gibt Ratschläge
Der Irrweg „Multimedia-Reportage“: Jan Tißler findet solche Geschichten nicht so dufte.

Hooray! Ich hab mein erstes WordPress-Plugin gemacht

by 1 Kommentar

Und Dominik lieferte mir mit seinem Blogartikel „Liebe Blogger – macht es euren Lesern leichter!“ die Funktionalität: Ein Feld mit der URL des Posts, die man zum Teilen verwenden kann. Das Wirtschaftsmagazin Quartz verwendet das auch so.

Das gute daran: Die Funktion selbst ist schnell gemacht, keine zehn Zeilen Code. Deshalb konnte ich mich ganz dem widmen, vor dem ich etwas Respekt hatte: der Backend-Seite mit den Eigenschaften. Mit genauem Lesen der Dokumentation, der Beispiele und eines Tutorials war das überraschenderweise aber ziemlich einfach, der Settings API sei Dank.

Was das URL Sharing Plugin genau macht, kann man hier nachlesen oder etwa 20 Pixel tiefer bewundern.

URL Sharing Plugin for WordPress

by Kommentar verfassen

The URL Sharing Plugin adds a text field with the post URL at the end of your posts – a qz.com like sharing approach. Additionally you get a button that enables copying the URL to the user’s clipboard. Look at the end of this post to see a live version of the plugin.

The plugin can be used as a more privacy-friendly alternative to sharing buttons or as an additional sharing-option. I was inspired by Dominik’s post about readability and usability on blogs (in German) who uses the Quartz-like approach – something I wanted to have, too.

URL share implementation on qz.com.
URL share implementation on qz.com.

Download

You have two options to get the code:

Installation

  1. Upload the files in your plugins directory. Then activate it.
  2. For a label in front of the URL and a text on the copy-to-clipboard-button, go to the settings page and insert your strings in the input fields. Of course, you can leave the label blank, the button, however, should have a call to action.

Change style

You can change the styling by adding your changes to stylesheet of the plugin. The URL Sharing plugin uses three CSS-elements:

  • .url_share: div-container
  • .url_share_label: label of the input field
  • .url_share_input: input field
  • .zeroclipboard-is-hover: hover status for copy-button
  • .zeroclipboard-is-active: active status for copy-button

In the default version url_share_label and url_share_input don’t have values and therefore are using your theme’s style for label and input. Of course, you can change them just the way you want. For example: To change the color of the URL to red, add the following to the plugin’s stylesheet or your theme’s stylesheet: .url_share_input {color:red;}

To-do List

Things that might be considered in the future:

  • Enable font color change of the URL in backend
  • Offer a PHP-Snippet to enable more flexible positioning
  • A button to automatically copy the URL to the user’s clipboard (by using an existing JavaScript library)Added with version 1.1 by using ZeroClipboard

Questions? Comments?

If you have any remarks and/or questions, feel free to leave a comment.

How to Use SideComments.js with WordPress

by Kommentar verfassen

Medium.com and Quartz are both famous for their innovative ways of presenting content. Both use side comments in order to allow to comment individual paragraphs rather than whole articles.

A few days ago SideComments.js was released by Eric Anderson. It allows an easy integration of that commenting system.

A demo of sidecomments.js
A demo of sidecomments.js

If you want to use SideComments.js within your WordPress installation, follow these 3 simple steps:

1. Download the adaption for WordPress on Github by strategio: WP Side Comments (.zip).

2. Upload the plugin to your plugins folder and activate it.

3. Go to settings –> WPSC. There you have to include two CSS-Selectors, one for your content, one for your comments. For example, in order to make the plugin work with twentyfourteen you have to write:

One class and one ID selector in the twentyfourteen theme.
One class and one ID selector in the twentyfourteen theme.

Be aware that you need a . for a class, or a # for an ID. If you don’t use twentyfourteen you can find out your selectors with developer tools in your browser.

Every comment is a regular comment in the WordPress system and can be edited, reviewed etc. in the WordPress backend.

That’s it 🙂

Orte von WordPress-Posts dynamisch mit Leaflet.js posten

by Kommentar verfassen

Ich habe endlich eine Methode gefunden, wie WordPress-Posts automatische einer Leaflet-Karte hinzugefügt werden kann. Wer auf das CMS WordPress setzt, kann damit einen Schritt Richtung structured journalism tun.

Die Lösung basiert auf einem Code von Alicia Duffy und Ben C. Bond, die Entwickler bei der Tierschutzorganisation PETA sind und so verschiedene US-Universitäten auf einer Karte darstellen.

Über einen Custom Post Type und Taxonomien werden die Ort festgelegt, dann über geojson exportiert und in Leaflet eingelesen. Über einen Shortcode kann eine Karte überall leicht eingebunden werden.

Die Komponenten des Codes

  • Die Leaflet-Bibliothek und die dazu notwendigen Dateien (JavaScript und CSS).
  • Die Geocoder-Funktion von Google, die sich über JavaScript-Datei einbinden lässt. Orte, Postleitzahlen und Adressen werden so automatisch in Koordinaten umgewandelt. Dazu notwendig: Eine Google Maps API v3.
  • Eine Geojson-Datei, die sich jeden Tag updated und ggf. neue Standorte der Karte hinzufügt.
  • Die Icons von Fontawesome für die Marker.

Den Code gibt es bei Github: Generic Map.