SVG in WordPress einbinden

Diese Anleitung gilt auch für andere Web-CMS.

Warum sind SVG-Dateien, also skalierbare Grafiken so interessant?
Weil diese schneller im Internet transportiert werden und sich somit die Webseite schneller öffnend. Außerdem entlastet es die Datenbank.

Vorsicht, nur selbst erstellte SVG-Dateien hochladen, den SVG-Dateien werden bewusst gesperrt um ausführbaren Code, der in SVG-Dateien versteckt werden kann, keinen Zugang zur Webseite und somit auch zu den Webseiten-Besuchern zu gewähren.

Hier am Beispiel des Farbrades mit 256 Farben.
Colorwheel-small

150 kB die Original-SVG-Datei
 65 kB als komprimierte PNG-Datei
 17 kB als optimierte JPEG-Datei
 20 kB als SVGZ-Datei, verlustfrei komprimierte SVG-Datei

Nun sieht es so aus, das JPEG die kleinste Datei ist und nicht die verlustfreie komprimierte SVGZ-Datei, aber JPEG hat die schlechteste Qualität und SVG ist das Original. Gerade für Zeichnungen und Logos sind Artefakte wie in JPEG-Dateien keine Option!
Bei JPEG-Dateien besteht noch das Problem die Original-Datei aufzuheben, zusätzlich zur eingesetzten Datei mit den speziellen Abmessungen für die jeweilige Webseite.


Um SVG-Dateien und auch komprimierte SVGZ-Dateien in WordPress zu nutzen, werden zwei Arbeitschritte benötigt.

1. muss dem Apache-Server mitgeteilt werden das diese Dateiformate, die zu Recht als gefährlich eingestuft werden, zulässig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird WordPress dieselbe Mittelung gemacht über das aktivierte Theme.

/wordpress-webseite/wp-content/benutztes-theme/
functions.php

/* MIME-Type svg und svgz zulassen */
    function custom_mtypes( $uwd ){
        $uwd['svg'] = 'image/svg+xml';
        $uwd['svgz'] = 'image/svg+xml';
        return $uwd;
    }
    add_filter( 'upload_mimes', 'custom_mtypes' );

Renovierung der Webseite von KNG-Rastatt

www.kng-rastatt.de

Im Januar 2014 hatte ich diese Webseite mit einem CMS, Content Management System, neu erstellt.
Das Material an Texten und Bildern der schon bestehenden Webseite und die persönliche Unterstützung von Michael Weber halfen mir damals schnell die neue Webseite umzusetzen.

Beim Erstellen nahm ich das Farbkonzept des Wappen der Stadt Rastatt als Anregung und ersetzte Gelb durch Gold, das Rot etwas dunkler und als dritte Farbe Schwarz. Die Farbersetzungen entsprechen etwa den in Karneval typischen Farben.

Das Titelbild wurde von mir mit dem Vektorprogramm Inkscape und dem Rastergrafikprogramm Gimp erstellt, so das ich freie Hand in der Skalierung und der Positionierung der einzelnen Elemente hatte.

Im April 2014 übergab ich die Pflege an Margitta Weber. Sie hatte bis September diese Aufgabe zur Zufriedenheit des KNG Rastatt erfüllt, konnte diese aber durch eine höhere berufliche Belastung nicht weiterführen.

Nun Anfang Dezember 2015 wurde im Zuge der neuen Karnevalsaison ein Review durchgeführt mit der Aufgabe die Seite zu Renovierung und damit auf den heutigen Stand der Sicherheit zu bringen, Fehler zu beheben sowie neue Inhalte ein zu pflegen.


Nur auf die Renovierung bezogen, wurden folgende Arbeiten notwendig:
* Durch ein früheres Theme-Update wurde das eingestellte CSS, Cascading Style Sheets, gelöscht. Das CSS ist jetzt wiederhergestellt und ausgelagert.
* Der Syntax von HTML5 war in einigen Beiträgen verletzt und nun wiederhergestellt.
* Ein Fehler in einer Galerie, der das Maximieren der Bilder verhinderte, wurde entfernt.
* Update des CMS
* Update des Theme
* Update der Plugins
* Optimierung des Hauptmenüs
* Optimierung des Blogs
* kleine Fehlerbehebungen in den Beiträgen


Zusätzlich Arbeiten
* 4 neue Beiträge eingestellt
* Backup der Inhalte
* Backup der Bilder
* Nebenarbeiten

WordPress WooComerce – Zu wenig PHP-Speicher

Problem:
Wenn Sie mehrere Artikel in WooCommerce einstellen und eine umfangreiche Konfiguration haben, kann schnell das vorgegeben Limit von 40MB ausgereizt sein.

Lösung:
In der eigenen WordPress-Installation können Sie mit Hilfe von FTP die Einstellungen optimieren.

1. Hier eine Bildschirmaufnahme [Screenshot] des Problems.
Auf der Bearbeitungsseite [Backend] sehen Sie beispielsweise unter WooCommerce, dann Systemstatus, unter dem Eintrag WordPress PHP-Memory Limit, die standardmäßig eingestellten 40 MB.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-01


2. Sie Auf Ihren Server mit einem FTP-Programm Ihrer Wahl, wie FileZilla, einlogen und
im Verzeichnis wp-includes die Datei defaults-constants.php zum Bearbeiten öffnen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-02


3. Setzen Sie diese Werte ein um einen Engpass im Speichermanagement auszugleichen:
Zuerst den 1. Wert WP_MEMORY_LIMIT auf 96M setzen.
Nun 2. Wert WP_MEMORY_LIMIT auf 128M setzen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-03


4. Falls wider Erwarten doch keine Änderung sofort sichtbar ist, kann
im WordPress-Wurzelverzeichnis die Datei wp-config.php zum Bearbeiten geöffnet werden.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-04


5. Folgenden Eintrag können Sie hier unter den ersten großen Kommentar setzen:
define( 'WP_MEMORY_LIMIT', '96M' );
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-05

Nun sollte Ihr Onlineshop für 1.000 Artikel und mehrere Bestellungen am Tag gerüstet sein.

seriöse Webseite

Was eine seriöse Webseite ist, kann ich nur von meinen Standpunkt erklären und mit meiner Erfahrung seit 1996.

Hier eine Priorisierung

Technik der Webseite
1. zu aller erst soll die Webseite sich schnell öffnen
2. nur verbreitete und OpenSource-Technologien verwenden
3. aktuelle Versionen nutzen, wie HTML5, CSS3, PHP ab 5.4, MySQL ab 5.x
4. responsives Verhalten der Webseite
5. ein modernes CMS für Erweiterbarkeit und Bedienbarkeit
6. Bildformate in der Reihenfolge PNG, JPG und GIF
7. Videoformate in der Reihenfolge OGV, WebM und MP4
8. Hohe Sicherheit für die Besucher mit weitestgehendem Verzicht auf Javascript

Erste Seite der Webseite, auch Frontpage, Homepage oder Mainpage
1. soll sie sofort zum Thema kommen
2. Zielgruppe direkt ansprechen
3. kein großes Bild, siehe 1. bei Technik der Webseite
4. die Webseite muss auf einem Smartphone lesbar sein
5. Navigation muss sichtbar sein
6. Impressum muss erreichbar sein
7. keine Fremdwerbung

Inhalt der Webseite
1. eigene Bilder, gerne auch groß
2. Farben des Logos und dem Inhalt der Webseite angepasst
3. aktuelle Inhalte mit mindestens ein Beitrag jeden Monat
4. Fakten
5. Navigation des Verstehens, also auch Kategorien und Schlagwörter
6. Aufzählungen oder Tabellen statt Schachtelsätze
7. Downloads für Dokumente nur in PDF-Format anbieten

Was nicht auf eine seriöse Webseite gehört
1. Flash
2. Klammern
3. Abkürzungen
4. Bindestriche, wenn nicht vorgegeben
5. mehrfachen Superlative
6. Füllwörter
7. Werbephrasen

Inkscape – Farbrad [Colorwheel]

Diese Tutorial ist eine Grundlage für verrückte Design-Ideen.
Zum Beispiel als Pfad erstellt für einen Regenbogen oder Farbrand mit Weichzeichner und vieles mehr.

Ergebnis des Tutorials
Colorwheel-small
Die Einstellungen sind in Bearbeiten -> Klonen -> Gekachelte Klone erzeugen.

Werte
P1: Einfache Verschiebung
Reihen: 1
Spalten: 255
Rotation = Segmentgröße: 1,4117°
Farbe pro Spalte H-Wert: 0,3921%


Colorwheel-12-rows

Werte
P1: Einfache Verschiebung
Reihen: 1
Spalten: 12
Rotation: 30°
Farbe pro Spalte H-Wert: 8,3%


Berechnungen

360 Grad geteilt durch 255 Segmente gleich 1,411764706 Grad je Segment.
360° / 255 = 1,411764706°

100 % Farben geteilt durch 255 Segmente gleich 0,392156863 Farbanteil je Segment.
100 % / 255 = 0,392156863% H

Startfarbe
HSL, H = 0, S = 255, L = 128, A = 255


Objekt

Mit gedrückter Strg-Taste einen Kreis ziehen.
Objekt-Füllung undefiniert lassen, das ist das Fragezeichensymbol und keine Kontur.


Video


Bilder

zfr07

zfr08

zfr09

zfr10

zfr11

zfr12

zfr13

Webdesign – Trennung von Content und Layout

Tatsache ist, die strikte Trennung vom „Text“-Inhalt und „Schön“-Aussehen, ist die Grundlage jedes Webdesigns und der ISO-Standard, sowie W3C-Standard, für die Sprachen HTML, CSS, SVG und XHTML. Außerdem ist barrierefreies Web eine Forderung aller Behinderten-Organisationen, anderer Benachteiligten und zum Teil schon als Gesetz verabschiedet.


Problem:
Webdesignern wird die Arbeit oft mit untaugliches Material erschwert.
• Mail hat keine Anhang, sonden die Bilder werden zum Quelltext der Mail per „Drag and Drop“ hinzugefügt und nicht als separate Dateien, das vollkommenste Desaster
• Texte werden in Bilder integriert
• Photoshop*-Dateien, Word-Dateien, Excel-Dateien
• keine Rohdaten
Kein Webbrowser beinhaltet Photoshop, Word, Excel und so weiter, sondern nur Webtechniken!
Es werden in jedem Fall Rohdaten als Originalbild und Text oder CSV-Datei benötigt mit den Endungen *.txt und *.csv. Nein, Word ist kein Text-Editor, sondern eine proprietäre Textverarbeitung.

Wie wirkt sich das aus?
Ein Photoshop-Bild ist Super für Flyer, Plakete und ähnliche Printmedien, dort kann der Content nur Schaden am Ersteller-Computer oder dem Computer des Verarbeitenden anrichten. Aber um Bilder durch das Internet zu schleusen ist eine gewaltige Internet-Technik zu bedienen, da die Bilder von Photoshop sehr groß sind und unnötige Sachen transportieren, macht es die Sache noch schwerer und könnte bei Computer-Sabotage sogar rechtliche Konsequenzen nach sich ziehen. Außerdem wird der zu lesende Content unleserlich.

Ergebnis:
Riesige Datenmengen, riesiges Defizit beim Vermitteln von Content, Bilder mit schlechtester Qualität und nach 2 Sekunden weißem Bildschirm ist der User schon fort auf der Konkurenz-Website. Ein rießiger Schaden für alle.
Schranke


Im Einzelenen
1. Wie groß sind die Bilder
2. Darstellungsfehler


1. Wie groß sind Bilder
a) Größe bei Übertragung von der Website auf den Computer, also den Desktop
Das angezeigte Bild mit Schranke, unbearbeitet als Screenshot in der Größe 510×403 Pixel aufgenommen ergibt:
• 1.201.750 Bytes – Photoshop-Dateiformat, ohne HSV, ohne Adope-Zusatz-Content
• 616.326 – Gimp-Dateiformat
• 429.348 – PNG-Format
• 81.828 – JPG-Format
Schranke-Datei

b) Größe der übertragenen Datei im Arbeitsspeicher
Jetzt die tatsächliche Größe im Arbeitsspeicher (RAM):
510x403x24RGB = 4.932.720 Bytes

Für direkt von Photoshop erstellte Dateien gilt im RAM:
510x403x48CMYK = 9.865.440 Bytes + unbekannter Content von Adobe.
Der mir unbekannte Content macht mir am meisten Sorgen, da er möglicherweise unerwünschten Content noch nachladen könnte, Adobe ist eine USA-Firma.

2. Darstellungsfehler
Gerade die Trennung von Content und Layout kann die geforderte barrierefreie Darstellung ermöglichen.
• Suchmaschinen die den Inhalt lesen, können keinen Text aus einem Bild auslesen
• textbasierte Browser sehen auch nichts
• was ist mit RSS und so weiter
• Blinde die mit mit ihrer Darstellungstechnik arbeiten, fühlen ebenfalls nichts
• die Tastenkombination „Strg++“ kann in allen Webbrowsern die Schrift mit ihren Vektoren klar und größer darstellen. Bei Text im Bild verschwimmt dieser, siehe meinen Beitrag http://ro-kom.de/mediendesign/grafiken/.
• eigene Desktop-Einstellungen, wie zum Beispiel Kontrast, werden torpediert.

Ergebnis:
Derzeitige Gesetze und weltweit anerkannte Industrie-Normen werden missachtet und der User wird mit dem vom Photoshop-Macher erstelltem Kunstwerk terrorisiert, da dem User die Kontrolle über den Content verloren geht.


Lösung:
Respekt vor dem Webmaster und dazu lernen, so bekommt die gewünschte Website ein rechtskonformes Aussehen und ein Top-Ranking bei den Suchmaschinen.
Eine weitere Lösung ist Gimp, da diese Programm OpenSourceSoftware ist und somit saubere Dateien erstellt ohne Müll-Content.


*Photoshop ist eine Marke von Adobe, Kalifornien und eine proprietäre Software mit 58% Schwarzkopien, das heißt jeder 2. Anwender ist kriminell!
Quellen:
https://de.wikipedia.org/wiki/Photoshop
http://www.photoshoplady.com/infographics/photoshop-evolution.html

Waipoua – Beitrag oben halten

Problem:
Ein Fehler im WordPress-Theme „Waipoua“ der sehr lästig ist, die Funktion „Beitrag auf Startseite halten“, früher „Artikel oben halten“, wird ignoriert.

Lösung:
Das Zählen fängt immer bei Null an! Die Datei „index.php“ muss an folgender Stelle editiert werden:

query_posts( $query_string . ‚&ignore_sticky_posts=1
zu
query_posts( $query_string . ‚&ignore_sticky_posts=0‚.

Bilder werden nicht mehr angezeigt

Problem:
Warum werden Bilder plötzlich nicht angezeigt?

Lösung:
In Zeiten von Überwachungswahn der Politik und der Internet-Industrie ist man geneigt, so viel wie möglich seine Website abzusichern.
Wenn dann plötzlich keine Bilder mehr angezeigt werden, zum Beispiel nach Updates der Plugins, dann ist die „.htaccess“ einen Blick wert.

WordPress Multisite

Multisite
Mehrere Websites mit einer WordPress-Installation sind möglich.

Der Vorgang ist wie folgt. Im Root-Verzeichnis der WordPress-Installation liegt die Datei „wp-config.php“.
Innerhalb dieser Datrei muss oberhalb von
/* That’s all, stop editing! Happy blogging. */

der nachstehender Code eingesetzt werden:
define(‚WP_ALLOW_MULTISITE‘, true);

Dadurch wird die Multisite als Möglichkeit aktiviert.


Um vollständig eine Multisite zu erstellen, müssen folgende Code-Zeilen in die gleiche Datei eingetragen werden:
define(‚MULTISITE‘, true);
define(‚SUBDOMAIN_INSTALL‘, false);
define(‚DOMAIN_CURRENT_SITE‘, ‚avektor.de‘);
define(‚PATH_CURRENT_SITE‘, ‚/‘);
define(‚SITE_ID_CURRENT_SITE‘, 1);
define(‚BLOG_ID_CURRENT_SITE‘, 1);

/* That’s all, stop editing! Happy blogging. */


Also komplett wird der zusätzliche Code in der Datei „wp-config.php“ so aussehen:
define(‚WP_ALLOW_MULTISITE‘, true);
define(‚MULTISITE‘, true);
define(‚SUBDOMAIN_INSTALL‘, false);
define(‚DOMAIN_CURRENT_SITE‘, ‚avektor.de‘);
define(‚PATH_CURRENT_SITE‘, ‚/‘);
define(‚SITE_ID_CURRENT_SITE‘, 1);
define(‚BLOG_ID_CURRENT_SITE‘, 1);

/* That’s all, stop editing! Happy blogging. */


Ebenfalls im Rootverzeichnis liegt die Datei „.htaccess“. Der Inhalt der WordPress-Regeln wird so geändert:
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ – [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
# END WordPress

Impressumspflicht

Glasfueller

Seit dem 16. Jahrhundert besteht in deutschen Länder die allgemeine Impressumspflicht. Sie galt zuerst nur für Druckerzeugnisse für den damals revolutionären Buchdruck.

Unsere Bundesregierung hat, auch unter dem Vorwand der Verbraucher-Sicherheit, die Impressums-Pflicht für Online-Veröffentlichungen vorgeschrieben, mit typischerweise so unklarer Abgrenzung, dass auch private Online-Präsentationen betroffen sind und die Angaben welche Daten veröffentlicht werden müssen, nicht präzise sind.

Hier, aus meiner Sicht, eine Klarstellung.
1. Gegenstand des Telemediengesetzes
2. Pflicht
3. Ort
4. Angaben für Webseiten oder Dienste von natürliche Personen
5. Angaben für Webseiten oder Dienste von juristische Personen
6. Angaben für Webseiten oder Dienste mit Dienstbarkeit oder Personen und Firmen mit verpflichteter Aufsichtsbehörde


Impressumspflicht nach §5 des Telemediengesetzes

1. Gegenstand des Telemediengesetzes
• Webseiten
• Online-Visitenkarten
• Online-Inserate
• Online-Shop´s
• Chatrooms
• weitere über das Netzwerk erreichbare Publikationen
Eine komplette klare Auslegung des Gegenstandes und der tatsächlich zu bereithaltenden Daten gibt es nicht, daher darf jedes Gericht dieses Gesetzt auslegen.

2. Pflicht
Wer ordnungswidrig keine oder falsche Angaben macht, kann mit einer Geldstrafe bis 50.000 Euro belangt werden.

3. Ort
Impressums-Angaben müssen ohne Umwege über „Impressum“ oder „Kontakt“ erreichbar sein. Also muss direkt auf der ersten Seite [Home-Page, Front-Page, Main-Page, Start-Page] ein Link erkennbar sein.

4. Angaben für Webseiten oder Dienste von natürliche Personen
• Echte Person mit vollem bürgerlichen Namen, also Vorname(n) und Familienname(n)
• Postleitzahl, Ort,Straße, Hausnummer
• mindestens eine Telefon-Nummer; Erreichbarkeit vorausgesetzt.
• mindestens eine E-Mail-Adresse; Erreichbarkeit vorausgesetzt.

ACHTUNG, NICHT ausreichend sind
• bekannter Künstlername oder andere Pseudonyme
• Postfach, auch nicht die neuen eineindeutigen
• Kontaktformular

5. Angaben für Webseiten oder Dienste von juristische Personen
• vollständiger und ausgeschriebener Firmenname
• Niederlassung UND Hauptniederlassung angeben
• eine NATÜRLICHE Person als gesetzlicher oder geschäftlicher Vertreter
• Postleitzahl, Ort,Straße, Hausnummer
• Postfach oder zugeteilte Postleitzahl ist NICHT ausreichend
• mindestens eine Telefon-Nummer; Erreichbarkeit vorausgesetzt
• mindestens eine lesbare E-Mail-Adresse, die auch Spamgeschütz sein darf; Erreichbarkeit vorausgesetzt
• Angabe der Umsatzsteuer-Identifikationsnummer oder Wirtschafts-Identifikationsnummer
• Angabe ob eine Abwicklung, Auflösung und ähnliches zur Zeit stattfindet

ACHTUNG, NICHT ausreichend sind
• zugeteilte Postleitzahl ist NICHT ausreichend bei Niederlassungen
• Kontaktformular

6. Angaben für Webseiten oder Dienste mit Dienstbarkeit oder Personen und Firmen mit verpflichteter Aufsichtsbehörde
• Name der Aufsichtsbehörde
• Name des Registers
• Name der zuständigen Kammer
• Registriereintragungen mit Nummer und Zuständigkeiten
• gesetzliche Berufsbezeichnung
• Name des Auslandes in dem der Beruf und/oder der Titel erworben wurde
• Angabe der Umsatzsteuer-Identifikationsnummer oder Wirtschafts-Identifikationsnummer
• Angabe ob eine Abwicklung, Auflösung und ähnliches zur Zeit stattfindet.