Word­Press miss­ach­tet W3C-Stan­dards


Inhalts­ver­zeich­nis

  1. Heu­te am Bei­spiel des Unter­strich von Hyper­links, auch Selek­tor “a”
  2. Die Nor­mung von HTML5 und CSS3 sind gro­ße Erleich­te­run­gen
  3. Word­Press und die Ehr­lich­keit
  4. Noch Open Source Soft­ware oder doch nicht mehr zu emp­feh­len
  5. Bei­spiel der Dekla­ra­tio­nen “out­line” und “bor­der”

Immer wie­der wer­den von “Word­Press” bewähr­te Stan­dards miss­ach­tet. Hier im The­me “Twen­ty Six­te­en” von WordPress.org.


Heu­te am Bei­spiel des Unter­strich von Hyper­links, auch Selek­tor “a”

Das CSS, Cas­ca­ding Style She­ets, gibt dem Inhalt das Aus­se­hen. Die­se Tren­nung ist vom W3C, World Wide Web Con­sor­ti­um, auch genau­so gewollt. Das CSS gibt es mitt­ler­wei­le in der 3. Ver­si­on und deckt für die meis­ten Web­de­si­gner auch gefühl­te 99% der gewünsch­ten Funk­tio­nen ab.


Die Nor­mung von HTML5 und CSS3 sind gro­ße Erleich­te­run­gen

Wird ein Link gesetzt, so wird die­ser sofort ohne wei­te­re Lay­out-Ein­stel­lun­gen in der Far­be Blau und mit Unter­strich dar­ge­stellt. Außer­dem bekommt der Maus­zei­ger die Form des Poin­ters zuge­wie­sen. Das sind die 3 Stan­dards die in jedem HTML-Doku­ment für Hyper­links schon vor­de­fi­niert sind. Der Unter­strich wird dabei von der Dekla­ra­ti­on “text-deco­ra­ti­on” mit dem Wert “under­line” dar­ge­stellt.
Die­ser Stan­dard soll gewähr­leis­ten, das nach­fol­gen­de Arbei­ten an der Web­sei­te und sei­nem CSS, ohne wei­te­ren Auf­wand und von jedem ande­rem Bear­bei­ter fort­ge­setzt wer­den kön­nen. Denn das schluss­end­li­che Werk, für das ein Web­de­si­gner bezahlt wird, gehört dem Kun­den.


Word­Press und die Ehr­lich­keit

Jetzt das Aber, aber war­um ver­su­chen Web­de­si­gner die­se Stan­dards mit nicht kon­for­men Win­kel­zü­gen aus­zu­he­beln? Das bleibt wohl deren Geheim­nis. Das es getan wird, das ist zwei­fel­los Tat­sa­che. Doch das es bei den emp­foh­le­nen und von der eige­nen Platt­form ver­brei­te­te The­mes von Word­Press sind, das ist ärger­lich und wider­spricht auch dem Gedan­ken von Open Source Soft­ware, näm­lich der Nicht­dis­kri­mi­nie­rung, und dem wich­tigs­tem Design­prin­zip, dem KISS-Prin­zip.

In ver­schie­den The­mes, die von Word­Press ver­trie­ben wer­den, sind mir sol­che nicht stan­dard­kon­for­men Dekla­ra­tio­nen von Ele­men­ten vor­ge­kom­men und sie ärgern mich so sehr das ich nun einen Bei­trag zum Word­Press Stan­dart-The­me “Twen­ty Six­te­en” schrei­be. Denn hier wird der Unter­strich von Links erstellt mit “box-shadow: 0 1px 0 0 cur­rent­Co­lor;”.

Ver­sucht nun jemand die­sen Unter­strich zu ändern oder zu ent­fer­nen wird er nicht fün­dig mit der Suche nach “text-deco­ra­ti­on”. Bei einem ande­rem The­me von Word­Press wird der Unter­strich mit “bor­der-bot­tom” erstellt, das zu dem sel­bem Ärger beim Web­de­si­gner führt.


Noch Open Source Soft­ware oder doch nicht mehr zu emp­feh­len

Jetzt stellt sich mir die Fra­ge, sind die­se The­mes denn dann über­haupt noch Open Source Soft­ware und wenn nicht, dann sind die­se auch nicht mehr zu emp­feh­len!

Bei­spie­le
stan­dard­kon­for­mer Hyper­link der W3C-Emp­feh­lung
Hyper­link mit “bor­der-bot­tom“
Hyper­link mit “box-shadow“
Es sind kei­ne Unter­schie­de zu erken­nen, genau das ist die fata­le Situa­ti­on, vor dem der Web­de­si­gner steht. Zudem sind in dem The­me “Twen­ty Six­te­en” 6(sechs) CSS-Datei­en mit 53kB, das ent­spricht etwa 9000 Wör­ter, da ist die Suche nach der ent­spre­chen­den Dekla­ra­tio­nen schon sehr schwer.


Bei­spiel der Dekla­ra­tio­nen “out­line” und “bor­der”

Hier liegt kein Feh­ler vor, nur scheint “out­line” doch sehr red­un­dant zu sein. Die Dekla­ra­ti­on “out­line” ist ohne sie zu ken­nen nicht gleich von “bor­der” zu unter­schei­den. Der Unter­schied liegt dar­in, “bor­der” legt sich zuerst um den Inhalt und “out­line” beinhal­tet “bor­der” und den Con­tent. Aber ein­zeln gesetzt, ist “out­line” nicht von “bor­der” zu unter­schei­den.

Hyper­link mit “bor­der“
Hyper­link mit “out­line“
Hyper­link mit blau­er gepunk­te­ter Linie für “out­line” und roter Linie für “bor­der”

Stan­dard-Hyper­link mit text-decoration: underline;

Hyper­link mit border-bottom: 1px solid #3A78E0;

Hyper­link mit box-shadow: 0 1px 0 #3A78E0;

out­line : 0;

Ein­zel­ne Wör­ter in allen Bei­trä­gen mit CSS ohne “class” und “span” form­ar­tie­ren

Oft besteht der Wunsch ein­zel­ne Wör­ter im Lay­out zu cha­rak­te­ri­sie­ren oder zu kenn­zeich­nen. Bis­her wer­den dafür die Optio­nen mit “class”, “span”, “div” oder ande­ren Ele­men­ten genutzt.

Ich habe mir eine Metho­de erstellt wie dies auch ohne die­se Ele­ment funk­tio­niert, da zum Bei­spiel der Stan­dard-Text­edi­tor in Word­Press sol­che Ele­men­te nicht anzeigt.
einzelne-woerter-css3


Bei­spie­le
1. Bei­spiel
Nut­zen sie für fol­gen­de Ein­ga­ben das Ter­mi­nal.

... Eingaben das <em><strong>Terminal</strong></em>.

2. Bei­spiel
Nut­zen sie für Befehl für die Sys­tem­über­sicht inxi -Fxz.

... Systemübersicht <code>inxi -Fxz</code>.

Das dazu­ge­hö­ri­ge CSS:
em strong { color:#c00; }
code { color: #00c; }

Tele­fon­num­mer direkt zum anwäh­len

Die Inter­net­nut­zung durch Smart­pho­nes ver­langt Ver­än­de­run­gen des Web­de­signs um wei­ter­hin oder anders Benut­zer­freund­lich zu sein oder zu ver­bes­sern.

Inhalts­ver­zeich­nis

  1. Bei­spiel
  2. Sym­bo­le
  3. Ver­wei­se

Hier am Bei­spiel einer sofort anwähl­ba­ren Tele­fon­num­mer direkt aus der Web­sei­te heraus.
Mobil: 0172 — 3062373

Der ent­spre­chen­de Code ist:

Mobil: <a href="tel:+491723062373">0172 - 3062373</a>

Sym­bo­le
Mit ver­schie­de­nen UTF-Sym­bo­len ist das gan­ze auch noch indi­vi­du­el­ler anzu­pas­sen.
Aus­füh­rung Code
📱 &#128241;
&#9990;
&#9742;
🖁 &#128385;
🕽 &#128381;
📴 &#128244;

Das letz­te Sym­bol wäre geeig­net um Ruhe­pau­sen in Kli­ni­ken, Kin­der­ta­ges­stät­ten, Senio­ren­hei­me anzu­zei­gen oder ande­re sen­si­ble Orte zu kenn­zeich­nen.


Ver­wei­se
http://unicode-table.com/de/search/?q=Phone
UTF8 mit Goog­le suchen

SVG in Word­Press ein­bin­den

Die­se Anlei­tung gilt auch für ande­re Web-CMS.

War­um sind SVG-Datei­en, also ska­lier­ba­re Gra­fi­ken so inter­es­sant?
Weil die­se schnel­ler im Inter­net trans­por­tiert wer­den und sich somit die Web­sei­te schnel­ler öff­nend. Außer­dem ent­las­tet es die Daten­bank.

Vor­sicht, nur selbst erstell­te SVG-Datei­en hoch­la­den, den SVG-Datei­en wer­den bewusst gesperrt um aus­führ­ba­ren Code, der in SVG-Datei­en ver­steckt wer­den kann, kei­nen Zugang zur Web­sei­te und somit auch zu den Web­sei­ten-Besu­chern zu gewäh­ren.

Hier am Bei­spiel des Farb­ra­des mit 256 Far­ben.
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 kleins­te Datei ist und nicht die ver­lust­freie kom­pri­mier­te SVGZ-Datei, aber JPEG hat die schlech­tes­te Qua­li­tät und SVG ist das Ori­gi­nal. Gera­de für Zeich­nun­gen und Logos sind Arte­fak­te wie in JPEG-Datei­en kei­ne Opti­on!
Bei JPEG-Datei­en besteht noch das Pro­blem die Ori­gi­nal-Datei auf­zu­he­ben, zusätz­lich zur ein­ge­setz­ten Datei mit den spe­zi­el­len Abmes­sun­gen für die jewei­li­ge Web­sei­te.


Um SVG-Datei­en und auch kom­pri­mier­te SVGZ-Datei­en in Word­Press zu nut­zen, wer­den zwei Arbeitschrit­te benö­tigt.

1. muss dem Apa­che-Ser­ver mit­ge­teilt wer­den das die­se Datei­for­ma­te, die zu Recht als gefähr­lich ein­ge­stuft wer­den, zuläs­sig sind.
.htaccess

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

2. wird Word­Press die­sel­be Mit­te­lung gemacht über das akti­vier­te The­me.

/word­press-web­sei­te/wp-con­ten­t/­be­nutz­tes-the­me/
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' );

3. Im Hea­der der Sei­te muss ein even­tu­el­les “no-svg” gelöscht oder aus­kom­men­tiert wer­den.

Word­Press Woo­Co­merce — Zu wenig PHP-Spei­cher

Pro­blem:
Wenn Sie meh­re­re Arti­kel in Woo­Com­mer­ce ein­stel­len und eine umfang­rei­che Kon­fi­gu­ra­ti­on haben, kann schnell das vor­ge­ge­ben Limit von 40MB aus­ge­reizt sein.

Lösung:
In der eige­nen Word­Press-Instal­la­ti­on kön­nen Sie mit Hil­fe von FTP die Ein­stel­lun­gen opti­mie­ren.

1. Hier eine Bild­schirm­auf­nah­me [Screen­shot] des Pro­blems.
Auf der Bear­bei­tungs­sei­te [Backend] sehen Sie bei­spiels­wei­se unter Woo­Com­mer­ce, dann Sys­tem­sta­tus, unter dem Ein­trag Word­Press PHP-Memo­ry Limit, die stan­dard­mä­ßig ein­ge­stell­ten 40 MB.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-01


2. Sie Auf Ihren Ser­ver mit einem FTP-Pro­gramm Ihrer Wahl, wie File­Zil­la, ein­lo­gen und
im Ver­zeich­nis wp-inclu­des die Datei defaults-constants.php zum Bear­bei­ten öff­nen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-02
3. Set­zen Sie die­se Wer­te ein um einen Eng­pass im Spei­cher­ma­nage­ment aus­zu­glei­chen:
Zuerst den 1. Wert WP_MEMORY_LIMIT auf 96M set­zen.
Nun 2. Wert WP_MEMORY_LIMIT auf 128M set­zen.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-03
4. Falls wider Erwar­ten doch kei­ne Ände­rung sofort sicht­bar ist, kann
im Word­Press-Wur­zel­ver­zeich­nis die Datei wp-config.php zum Bear­bei­ten geöff­net wer­den.
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-04
5. Fol­gen­den Ein­trag kön­nen Sie hier unter den ers­ten gro­ßen Kom­men­tar set­zen:
define( 'WP_MEMORY_LIMIT', '96M' );
WordPress_WooComerce_-_Zu_wenig_PHP-Speicher-05

Nun soll­te Ihr Online­shop für 1.000 Arti­kel und meh­re­re Bestel­lun­gen am Tag gerüs­tet sein.

seriö­se Web­sei­te

Was eine seriö­se Web­sei­te ist, kann ich nur von mei­nen Stand­punkt erklä­ren und mit mei­ner Erfah­rung seit 1996.

Hier eine Prio­ri­sie­rung

Tech­nik der Web­sei­te
1. zu aller erst soll die Web­sei­te sich schnell öff­nen
2. nur ver­brei­te­te und Open­So­ur­ce-Tech­no­lo­gi­en ver­wen­den
3. aktu­el­le Ver­sio­nen nut­zen, wie HTML5, CSS3, PHP ab 5.4, MyS­QL ab 5.x
4. respon­si­ves Ver­hal­ten der Web­sei­te
5. ein moder­nes CMS für Erwei­ter­bar­keit und Bedien­bar­keit
6. Bild­for­ma­te in der Rei­hen­fol­ge PNG, JPG und GIF
7. Video­for­ma­te in der Rei­hen­fol­ge OGV, WebM und MP4
8. Hohe Sicher­heit für die Besu­cher mit wei­test­ge­hen­dem Ver­zicht auf Java­script

Ers­te Sei­te der Web­sei­te, auch Front­pa­ge, Home­page oder Main­page
1. soll sie sofort zum The­ma kom­men
2. Ziel­grup­pe direkt anspre­chen
3. kein gro­ßes Bild, sie­he 1. bei Tech­nik der Web­sei­te
4. die Web­sei­te muss auf einem Smart­pho­ne les­bar sein
5. Navi­ga­ti­on muss sicht­bar sein
6. Impres­sum muss erreich­bar sein
7. kei­ne Fremd­wer­bung

Inhalt der Web­sei­te
1. eige­ne Bil­der, ger­ne auch groß
2. Far­ben des Logos und dem Inhalt der Web­sei­te ange­passt
3. aktu­el­le Inhal­te mit min­des­tens ein Bei­trag jeden Monat
4. Fak­ten
5. Navi­ga­ti­on des Ver­ste­hens, also auch Kate­go­ri­en und Schlag­wör­ter
6. Auf­zäh­lun­gen oder Tabel­len statt Schach­tel­sät­ze
7. Down­loads für Doku­men­te nur in PDF-For­mat anbie­ten

Was nicht auf eine seriö­se Web­sei­te gehört
1. Flash
2. Klam­mern
3. Abkür­zun­gen
4. Bin­de­stri­che, wenn nicht vor­ge­ge­ben
5. mehr­fa­chen Super­la­ti­ve
6. Füll­wör­ter
7. Wer­be­phra­sen

Ink­scape — Farb­rad [Color­wheel]

Die­se Tuto­ri­al ist eine Grund­la­ge für ver­rück­te Design-Ide­en.
Zum Bei­spiel als Pfad erstellt für einen Regen­bo­gen oder Farb­rand mit Weich­zeich­ner und vie­les mehr.

Ergeb­nis des Tuto­ri­als
Colorwheel-small
Die Ein­stel­lun­gen sind in Bear­bei­ten -> Klo­nen -> Geka­chel­te Klo­ne erzeu­gen.



Wer­te
P1: Ein­fa­che Ver­schie­bung
Rei­hen: 1
Spal­ten: 255
Rota­ti­on = Seg­ment­grö­ße: 1,4117°
Far­be pro Spal­te H-Wert: 0,3921%


Colorwheel-12-rows

Wer­te
P1: Ein­fa­che Ver­schie­bung
Rei­hen: 1
Spal­ten: 12
Rota­ti­on: 30°
Far­be pro Spal­te H-Wert: 8,3%


Berech­nun­gen

360 Grad geteilt durch 255 Seg­men­te gleich 1,411764706 Grad je Seg­ment.
360° / 255 = 1,411764706°

100 % Far­ben geteilt durch 255 Seg­men­te gleich 0,392156863 Farb­an­teil je Seg­ment.
100 % / 255 = 0,392156863% H

Start­far­be
HSL, H = 0, S = 255, L = 128, A = 255


Objekt

Mit gedrück­ter Strg-Tas­te einen Kreis zie­hen.
Objekt-Fül­lung unde­fi­niert las­sen, das ist das Fra­ge­zei­chen­sym­bol und kei­ne Kon­tur.


Video


Bil­der

zfr07

zfr08

zfr09

zfr10

zfr11

zfr12

zfr13