DESIGNSEOMEDIENROSEN

Schwerpunkte

Webseiten, Online-Shops und Präsentationen

Meine Werkzeuge sind folgende Technologien:

  • CSS (Cascading Style Sheets) ,
  • HTML (Hypertext Markup Language),
  • PHP (PHP: Hypertext Preprocessor) und
  • CMS (Content-Management-System)
  • modernes Farb-Konzept, abgestimmt auf Ihr Material
  • hochwertigen SVG-Grafiken bei der Erstellung von Logos, Icons und Verläufen und
  • speziell auf schnellen Transfer optimierte Grafiken.

Zusätzlich bin ich in der Lage in reinen Quelltext, wie in HTML, PHP, CSS, SVG und weiteres, zu schreiben.
Diese Art der Erstellung garantiert sehr schnelle Ladezeiten im Browser, eine fehlerfreie Anzeige des Inhaltes in modernen Browsern und schnellere Verarbeitung von nachträglichen Veränderungen.

Webseiten-Erneuerung

Webseiten-Erneuerung, Renovierung oder Recycling ist meist möglich und noch mehr nötig!

Die Webseite sollte erneuert werden, wenn:

  • diese nicht korrekt arbeitet,
  • sie nicht korrekt angezeigt wird in Firefox, Google-Chrome und dem aktuellen Internet-Explorer,
  • der Inhalt nicht mehr aktuell ist,
  • das Impressum die rechtlichen Vorgaben nicht umsetzt,
  • lange Ladezeiten die Besucher abwandern lassen,
  • das Kontakt-Formular Spam durchlässt und
  • sie über 8 Jahre alt ist.

Mit den oben genannten Werkzeugen ist es möglich, sehr schnell individuelle Webseiten und Inhalte zu erstellen und zu pflegen.
Besonders ganz aktuelle Ereignisse können, bei bestehender Webseite, extrem schnell, innerhalb von Minuten, verarbeitet werden, wie zum Beispiel Sonder-Aktionen.

In einer Unterweisung kann ich Sie befähigen, Ihre Webseite selbst mit aktuellem Inhalt zusätzlich zu versorgen!

Ich empfehle dringend immer die aktuellste Browser-Version zu nutzen, zu Ihrer eigenen Sicherheit! Haben Sie Bedenken, ob sie auf den neuesten Stand sind [up to date], kontaktieren Sie mich bitte.

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' );

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/.
• 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.

Präsentations-Beispiel

Folgende Präsentation ist ein Titelblatt für eine Briefmarkenausstellung.
Der ehrgeizige Wunsch von Frau Monika Müller besteht darin, alle Menschen zu sensibilisieren für das Aussterben der Großkatzen und das die Gefahr real ist. Allein der Tiger könnte im Jahre 2016 ausgestorben sein!

Bedrohte Jäger
Wissenswertes über Großkatzen
Tiger
Weltweit noch 3.050
Löwe
Weltweit noch 25.000
Jaguar
Weltweit noch 20.000
Leopard
Weltweit noch 247.050
Alle sieben wild lebenden Groß­­katzen, Tiger, Löwe, Jaguar, Leopard, Schnee­leopard, Nebelparder und Gepard sind bedrohte Arten!

Die Bedrohungen bestehen fast 100%ig durch den Menschen:

  • Klimawandel
  • Umweltveränderungen
  • Wilderei
Schneeleopard
Weltweit noch 5.600

Ich möchte mit diesem Objekt die Bedrohung, das Vorkommen, die Lebensweise und Maßnahmen zum Schutze aller sieben noch vorkommenden Groß­­katzen aufzeigen.

Gepard
Weltweit noch 10.000
Nebelparder
Weltweit noch 10.000
© 2013 Idee: Monika Müller
Layout: Frank Rosenberger


Bildquelle: Wikppedia
Löwe – Kevin Pluck – Flickr: The King.
Tiger – Dave Pape
Jaguar – Lea Maimone
Leopard – U.S. Fish and Wildlife Service
Schneeleopard – Ltshears
Gepard – James Temple – Flickr
Nebelparder – frank wouters – Flickr