Wordpress alsOpenData-Frontend

Hartmut Albers, LK Diepholz- IuK-Forum, August 2016 -

Zielsetzung

• Vorhandene strukturierte Daten einfach im WWW anzeigen!

• KEIN Ziel: Fachanwendungen durch Web-App ablösen/ersetzen

„ Data pimped by Wordpress “

Klarstellung, 2 unterschiedliche Dinge:

Wordpress als OpenData-Frontend

• Daten visualisieren/präsentieren

• Herkunft: URL oder lokale Datei• Anders CMS

• OpenData-Portal

• API einer Fachanwendung

• usw… / d.h. Datenquelle mit strukturierten Daten

Wordpress als CKAN-Frontend

• Daten bereitstellen/ausliefern

• OpenData-Datenbank CKAN im Hintergrund ansprechen(API)

• Daten aus CKAN mit Zusatzcontent und/oder Blog-Funktionalitäten versehen

Vortrag in 2 Teilen

© Foto: Wikipedia

( Teil II )Wordpress als

OpenData-Frontend

( Teil I )OpenData allgemein

beim LK Diepholz

Teil I

OpenData

• Gesellschaftspolitisches Thema

• Muss ohne nennenswerten personellen Zusatzaufwand mgl. sein !!!

• Vorhandene Daten & Ressourcen zugänglich machen

• Datenbank mit CKAN-Technologie (OpenSource) http://daten.diepholz.de

• Nach Möglichkeit noch Mehrwert für Homepage schaffen• Embed-Code Visualisierung Daten-Clustering auf Maps (noch in Arbeit)

• Embed-Code Visualisierung Haushaltsdaten (noch in Arbeit)

• Ausgangssituation: viele Daten als WMS vorhanden

Anlass für Aktionismus in 2016-Q2

• Ablösung altes CMS unbedingt erforderlich

Thema „Aufbereitung Daten“ = seit 2002 PHP-Anwendung

CMS ist modernen Anforderungen nicht mehr gewachsen

• nicht responsive, alte Codebase, fehlende Interaktivität, keine Volltextsuche, kein Cache, keine Modals, Maintenance

propritäre SQL-Insert-Commands beim bisherigen CMS

• Ablösung solcher SQL-Commands

• Output vorhandener Daten auf Basis neutraler Formate als CSV, XML, JSON

• Datenbereitstellung dann als OpenData

In 2016-Q2 vom CMS-Wechsel betroffen

• Seniorenangebote im LK Diepholzhttp://seniorenangebote.diepholz.de

• Kinderbetreuungsangebote LK Diepholzhttp://kinderbetreuung.diepholz.de

• Familienhandbuch(Familienangebote im LK Diepholz)http://familienhandbuch.diepholz.de

bis Juli 2016:Die Daten waren inhaltlich aus Kundensicht auf

den bisherigen Webseiten ebenfalls gut aufbereitet und nach vielen Merkmalen/Kriterien abrufbar

(Handlungsdruck halt aus technischen Gründen gegeben)

Die Folgen daraus

• Anderes Web-Tool für den Zweck „Aufbereitung Daten“

• Abwägungsprozess, ob individueller Programmierauftrag an CMS-Hersteller oder andere Lösung

• Entscheidung für Wordpress als Tool Extrem flexibel

Nutzung für Projektwebseiten

Nutzung für Zweck „Aufbereitung Daten“ => WP als Frontend für XML-Daten

Wordpress bei anderen Projekten bereits im Einsatz

• Primäres CMS ist von Entscheidung nicht tangiert

Positionierung von Wordpress & OpenData

• Was Wordpress angeht, ist der LK Diepholz Konsument seiner eigenen offener Daten ;-) seniorenangebote.xml + kinderbetreuung.xml + familienhandbuch.xml

• Bereitstellung der Daten im OpenData-Portal

• Wordpress ist nur das Frontend, um diese Daten anzuzeigen

• Vorhaben passt als kleiner Baustein in die OpenData-Strategie/OpenData-Aktivitäten

Klassifizierung von Daten, 3 Bereiche

UnstrukturierteDaten

(Webseiten)

Strukturierte Daten

(CSV, XML, JSON)

Strukturierte Daten

Geodaten (WMS & Karten)

ANMERKUNG: der Vollständigkeit halber, WWW-Aplicationsserver mit Fachanwendungen (z.B. Baulastenauskunft, Schulkonsole, Reverse-Proxy, GDI-System, usw.) sind nicht Gegenstand o.a. Gruppierung/Kategorisierung

D A T E N

(1.) (2.) (3.)

relevant aus Sicht OpenData:

(zu 1.) Unstrukturierte Daten (Webseiten)

Webseite(Homepage)

INHALTE AUF:www.diepholz.de Volltextsuche schließt ALLRIS-Datenbestand vollständig ein

ALLRIS-Server(Politik, Sitzungen,

Dokumente, Protokolle usw.)

Webseiten für Projekte

INHALTE AUF:VereinsportalGeowebOpenData-PortalSeniorenangeboteKinderbetreuungFamilienhandbuchNatura2000 # Schutzgebiete

Sprungbrett # Jugendberufshilfe

Horizont # Schülerfirmen

Webseitenvon Partnern

INHALTE AUF:Verein Schülerhilfen e.V.Dümmerweserland e.V.LV Weser-Hunte e.V.VolkshochschuleMusikschule

(zu 2.) Strukturierte Daten (CSV, XML, JSON)

• Strukturierte Datenformate CSV, XML, JSON

• OpenData-Portal http://daten.diepholz.de

• Datenbank auf Basis CKAN-Technologie

• 2 Arten von Daten/Ressourcen im Verzeichnis:• URL‘s registrieren d.h. Ziel-URL zeigt auf entsprechende Datenquelle

• Upload von Dateien d.h. Ziel-URL verweist auf CKAN-Server als Datenquelle• Nur sinnvoll, wenn keine andere Datenquelle als URL vorhanden/ansprechbar

• Manueller Dateiupload nur in (wenigen) Ausnahmefällen!!!

• Z.Zt. für Schulen + Seniorenangebote + Kinderbetreuungsangebote + Familienhandbuch

XML-Dateienseniorenangebote.xmlkinderbetreuung.xmlfamilienhandbuch.xml

(zu 3.) Strukturierte Daten (speziell Geodaten)(A

) Q

ue

llen

fü

r In

fos

• Metadaten-verzeichnisse

• Projektwebseite # geoweb.diepholz.de

• Viewer inside# Infos in Sidebars

• OpenData-Portal

(B)

Qu

elle

fü

r D

ate

n

• AuslieferungDaten durchGDI-Server# Reverse Proxy

• Bereitstellung in Form von WMS-Diensten

(C)

Be

nu

tzu

ng

Dat

en

du

rch

• GIS-Viewer LKDH

• Navigator LKDH

• GIS-Programme

• Smartphone-App

• Arcgis-Portal

• Wordpress

• etc. / weitere…

OpenData-Portal

Rein organisatorische Fragestellung:• Was sind Gruppen• Was sind Datensätze• Was sind Ressourcen

http://daten.diepholz.de

Kurze Zusammenfassung

(zu 1.) Unstrukturierte Daten• Im OpenData-Portal Verweise auf Webseiten (als Ressource) grundsätzlich NEIN

• In speziellen Fällen jedoch Verweis auf eine Webseite (HTML)• Und zwar dann, wenn es bei der Webseite tatsächlich um „echte“ Daten geht

• Das OpenData-Portal ist schließlich kein Bookmark-Verzeichnis für Webseiten

(zu 2.) Strukturierte Daten (CSV, XML, JSON)• Im OpenData-Portal grundsätzlich JA

(zu 3.) Strukturierte Daten (Geodaten, WMS + Karten)• Im OpenData-Portal grundsätzlich JA

Ausblick OpenData

• Conversion-Service im Herbst 2016• Daten (auch Flächeninfos) aus WMS tabellarisch ausliefern (CSV, JSON, XML)

• Evtl. GDI-Migration „Kinder-, Familien-, Seniorenangebote“• Dann Auslieferung der Daten als WMS-Dienst (über GDI) möglich

• ABER => XML-Import bei Wordpress weiterhin erforderlich• GDI-Migration somit erst möglich, wenn Conversion-Dienst online

• Embed-Code f. Homepage f. optische Präsentation (Clustering auf Maps)• Problem: CKAN vollzieht Clustering („Bubbles“) auf Maps automatisch

• als Marker jedoch 3 feste Ebenen gewünscht: LK => Kommunen => Gemeinden

Teil II

…..nun aber zum eigentlichen Inhalt ;-)

Wordpress

WP bekannt ?

• Blog & CMS-Software, Open Source

• Geringe Kosten für Themes, Plugins und Betrieb

• Nutzer:• „Normale“ User (einfach nur Webseiten bauen)• Softwareentwickler (Wordpress als Framework nutzen)

• große Auswahl Themes + riesiges Plugins-Repository

Wordpress

WP bekannt ?

• Eigener Server vs. Professioneller WP-Provider/Hoster?• Entscheidung hängt vom KnowHow & Zeit ab

• Wenn Zweifel, dann lieber professionellen WP-Hoster vorziehen!

• Eigener Server: • Sicherheit + Sicherheit + Sicherheit

• z.B. daily unattended updates für Linux-Pakete & WP-Core & WP-Plugins & WP-Themes | Apache-MPM | Hardening | restriktive iptables | fail2ban | u.v.a.m.……

Wordpress

Lernkurve

0

2

4

6

8

10

12

0 2 4 6 8 10 12 14

Aufwand / Zeit

Begeisterungskurve

0

2

4

6

8

10

12

14

0 2 4 6 8 10 12 14

Nutzungsdauer

WP-CLI

Eigener Server = Scripting mit WP-CLI mgl… (komplettes Setup)

WP-CLI

….und WP-Updates + WP-Backups dabei ebenfalls automatisieren

Anwendungsbeispiele Wordpress + OpenData

1. WMS-Dienst benutzen• Projektwebseite Natura 2000, http://natura2000.diepholz.de

• Karte mit Flächeninfos (Naturschutzflächen) auf Google-Karte

• Veredelung der Daten durch WP-Content und redaktionelle Inhalte

• ZIEL: Wordpress als Projektwebseite (Bürgerinformation)

2. XML-Daten anzeigen• Seniorenangebote, http://seniorenangebote.diephozl.de

• Kinderbetreuungsangebote, http://kinderbetreuung.diepholz.de

• Familienhandbuch, http://familienhandbuch.diephozl.de

• ZIEL: Daten nach unterschiedlichsten Kriterien visualisieren/präsentieren

WMS-Dienst benutzen

• WP-Plugin „Maps Marker Pro“

• Flächen auf Karte zeigen

• Marker setzen + Content zeigen

• Ergebnis:

Was heißt eigentlich „Daten anzeigen“?

• Funktionalität der Javascript library „Table plug-in for JQuery“:

http://www.datatables.net

Was heißt eigentlich „Daten anzeigen“?

• Wünsche/Anforderungen an Einsatz von Datentabellen• Responsive Darstellung der Tabellen (RWD)

• Beliebigen Teilmengen eingrenzen (einfach + flexibel + keine SQL-Statements)

• Beliebige Spalten / individuelle Spaltenüberschriften

• Paginierung über mehrere Seiten

• Sortierbarkeit durch Anwender

• Live-Filter, angezeigte Daten und Infos „on the fly“ ohne Page-Reload eingrenzen

• Verlinkung = Flexibilität welche Felder/Spalten in Datentabelle als Link erscheinen

• Anzeige „Beschreibung / Details“ als Modal (Text bei Anklicken des Links)

• freie Javascript-Library www.datatables.net deckt einige Wünsche bereits ab

Ergebnis

•

Hier die Datentabelle

Hier das Modal

Hier die Gliederung

Ziel erreicht durch passende WP-Komponenten

Theme freie Auswahl

PluginMaps Marker Pro

PluginWP All Import Pro

Plugin JsDataTable

Plugin Easy Fancybox

Plugin Show Content Only

Mit diesen 4 Wordpress-Plugins wird die gewünschte Funktionalität „Daten anzeigen“ realisiert

Flächen aus WMS-Dienst auf anzeigen

a) Plugin WP All Import

• Zweck: Daten aus fremder Quelle (z.B. URL) als WP-Posts einlesen

• Tolles Plugin mit den richtigen Features, z.B.• Einfaches Drag & Drop, um Daten aus XML-Datei dem WP-Post zuzuordnen

• Mehrere Kategorien + mehrere Schlagwörter + Custom Post Fields möglich

• Neu, Ändern, Löschen konfigurierbar (Vorlage für später Durchläufe)

• Viele inhaltliche Transformationen/Manipulationen möglich

• Cronjob möglich

• Plugin als Testversion (WP All Import) im Wordpress-Repository • Hinweis: mit Testversion ist nur 1 Datensatz (!) importierbar

• Kostenpflichtige Vollversion (WP All Import Pro) ist jeden Cent wert

b) Plugin JsDataTable

• Javascript-Bibliothek www.datatables.net in Wordpress integrieren

• WP-Posts tabellarisch als Datentabelle auflisten• WP-Kategorien „cat“ und WP-Schlagwörter „tag“ als Suchkriterium

• Daten aus WP-Posts in Spalten anzeigen, auch eigene Zusatzfelder

• Einfache Benutzung des Plugins• Shortcode in WP-Seite: [jsdatatable cat=xxxxx] / [jsdatatable tag=xxxxx]

• Details frei konfigurierbar (Beispiele auf Projektseite)

• Zusammenspiel mit Easy Fancybox und Show Content Only ist fest integriert

• Plugin kostenlos / z.Zt. noch nicht im Wordpress-Repository• Download über Projektseite http://www.web-sky.de/plugin-jsdatatable

JsDataTable

c) Plugin Easy Fancybox

• Grund für Installation: Modal öffnen, wenn Link in Tabelle angeklickt wird

• Nach Plugin-Installation folgende Plugin-Einstellung tätigen:• Media Enable FancyBox for Images deaktivieren (Haken rausnehmen)

• Media Enable FancyBox for iFrames aktivieren (Haken setzen)

• Hinweis• Auch ohne Plugin Easy Fancybox würde Plugin JsDataTable funktionieren

• Jedoch werden Links in der Datentabelle dann nicht als Modal geöffnet!

• Das wäre aus Kundensicht unschön + unpraktisch (weil Wechsel auf neue Seite)

• Schönheitstipp: bei iFrame-Einstellung „Rand = 30“ setzen (Standard ist 0)

• Plugin kostenlos im Wordpress-Repository

d) Plugin Show Content Only

• Grund für Installation: Inhalt eines WP-Post „nackt“ darstellen• D.h. kein Header, keine Menüs, keine Sidebars und kein Footer drumherum

• Also nur den reinen Text (Inhalt des WP Post) zeigen

• Hinweis• Auch ohne Plugin Show Content Only würde Plugin JsDataTable funktionieren

• Das wäre aus Kundensicht jedoch unschön + unpraktisch (weil innerhalb des Modal eine ganze Webseite mit allem „Drumherum“ erscheinen würde)

• Plugin kostenlos im Wordpress-Repository

2 kleine Bugs

• Kombination „Paginierung in Datentabelle + Anzeige Text in Modal“ funktioniert nicht• Spürbar, wenn auf „Seite 2“ geblättert wird und dort Link angeklickt wird

(hat technische Gründe / Javascript aus 2 Libraries)

• Daher OptIn: Paginierung ist in Plugin JsDataTable per default ausgeschaltet

• Tipp• wenn Paginierung in Datentabelle gewünscht, so sollten keine Links in Tabelle gezeigt werden

• Beschreibung siehe Projektseite http://www.web-sky.de/plugin-jsdatatable

• Einige wenige Smartphones zeigen keine Scrollbar, wenn der eingeblendete Modaltext sehr lang ist• Dennoch ist Plugin Easy Fancybox sehr beliebt (> 200.000 aktive Installationen)

Jetzt Live-Präsentation

BEIPSPIEL:Import beliebiger Daten (aus externer Quelle) in die Demoumgebung undAusgabe/Präsentation dieser Daten