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”

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; }

Web­de­sign — Tren­nung von Con­tent und Lay­out

Tat­sa­che ist, die strik­te Tren­nung vom “Text”-Inhalt und “Schön”-Aussehen, ist die Grund­la­ge jedes Web­de­signs und der ISO-Stan­dard, sowie W3C-Stan­dard, für die Spra­chen HTML, CSS, SVG und XHTML. Außer­dem ist bar­rie­re­frei­es Web eine For­de­rung aller Behin­der­ten-Orga­ni­sa­tio­nen, ande­rer Benach­tei­lig­ten und zum Teil schon als Gesetz ver­ab­schie­det.


Pro­blem:
Web­de­si­gnern wird die Arbeit oft mit untaug­li­ches Mate­ri­al erschwert.
• Mail hat kei­ne Anhang, son­den die Bil­der wer­den zum Quell­text der Mail per “Drag and Drop” hin­zu­ge­fügt und nicht als sepa­ra­te Datei­en, das voll­kom­mens­te Desas­ter
• Tex­te wer­den in Bil­der inte­griert
• Photoshop*-Dateien, Word-Datei­en, Excel-Datei­en
• kei­ne Roh­da­ten
Kein Web­brow­ser beinhal­tet Pho­to­shop, Word, Excel und so wei­ter, son­dern nur Web­tech­ni­ken!
Es wer­den in jedem Fall Roh­da­ten als Ori­gi­nal­bild und Text oder CSV-Datei benö­tigt mit den Endun­gen *.txt und *.csv. Nein, Word ist kein Text-Edi­tor, son­dern eine pro­prie­tä­re Text­ver­ar­bei­tung.

Wie wirkt sich das aus?
Ein Pho­to­shop-Bild ist Super für Fly­er, Pla­ke­te und ähn­li­che Print­me­di­en, dort kann der Con­tent nur Scha­den am Erstel­ler-Com­pu­ter oder dem Com­pu­ter des Ver­ar­bei­ten­den anrich­ten. Aber um Bil­der durch das Inter­net zu schleu­sen ist eine gewal­ti­ge Inter­net-Tech­nik zu bedie­nen, da die Bil­der von Pho­to­shop sehr groß sind und unnö­ti­ge Sachen trans­por­tie­ren, macht es die Sache noch schwe­rer und könn­te bei Com­pu­ter-Sabo­ta­ge sogar recht­li­che Kon­se­quen­zen nach sich zie­hen. Außer­dem wird der zu lesen­de Con­tent unle­ser­lich.

Ergeb­nis:
Rie­si­ge Daten­men­gen, rie­si­ges Defi­zit beim Ver­mit­teln von Con­tent, Bil­der mit schlech­tes­ter Qua­li­tät und nach 2 Sekun­den wei­ßem Bild­schirm ist der User schon fort auf der Kon­ku­renz-Web­site. Ein rie­ßi­ger Scha­den für alle.
Schranke


Im Ein­zele­nen
1. Wie groß sind die Bil­der
2. Dar­stel­lungs­feh­ler


1. Wie groß sind Bil­der
a) Grö­ße bei Über­tra­gung von der Web­site auf den Com­pu­ter, also den Desk­top
Das ange­zeig­te Bild mit Schran­ke, unbe­ar­bei­tet als Screen­shot in der Grö­ße 510x403 Pixel auf­ge­nom­men ergibt:
• 1.201.750 Bytes — Pho­to­shop-Datei­for­mat, ohne HSV, ohne Ado­pe-Zusatz-Con­tent
• 616.326 — Gimp-Datei­for­mat
• 429.348 — PNG-For­mat
• 81.828 — JPG-For­mat
Schranke-Datei

b) Grö­ße der über­tra­ge­nen Datei im Arbeits­spei­cher
Jetzt die tat­säch­li­che Grö­ße im Arbeits­spei­cher (RAM):
510x403x24RGB = 4.932.720 Bytes

Für direkt von Pho­to­shop erstell­te Datei­en gilt im RAM:
510x403x48CMYK = 9.865.440 Bytes + unbe­kann­ter Con­tent von Ado­be.
Der mir unbe­kann­te Con­tent macht mir am meis­ten Sor­gen, da er mög­li­cher­wei­se uner­wünsch­ten Con­tent noch nach­la­den könn­te, Ado­be ist eine USA-Fir­ma.

2. Dar­stel­lungs­feh­ler
Gera­de die Tren­nung von Con­tent und Lay­out kann die gefor­der­te bar­rie­re­freie Dar­stel­lung ermög­li­chen.
• Such­ma­schi­nen die den Inhalt lesen, kön­nen kei­nen Text aus einem Bild aus­le­sen
• text­ba­sier­te Brow­ser sehen auch nichts
• was ist mit RSS und so wei­ter
• Blin­de die mit mit ihrer Dar­stel­lungs­tech­nik arbei­ten, füh­len eben­falls nichts
• die Tas­ten­kom­bi­na­ti­on “Strg++” kann in allen Web­brow­sern die Schrift mit ihren Vek­to­ren klar und grö­ßer dar­stel­len. Bei Text im Bild ver­schwimmt die­ser, sie­he mei­nen Bei­trag https://ro-kom.de/mediendesign/.
• eige­ne Desk­top-Ein­stel­lun­gen, wie zum Bei­spiel Kon­trast, wer­den tor­pe­diert.

Ergeb­nis:
Der­zei­ti­ge Geset­ze und welt­weit aner­kann­te Indus­trie-Nor­men wer­den miss­ach­tet und der User wird mit dem vom Pho­to­shop-Macher erstell­tem Kunst­werk ter­ro­ri­siert, da dem User die Kon­trol­le über den Con­tent ver­lo­ren geht.


Lösung:
Respekt vor dem Web­mas­ter und dazu ler­nen, so bekommt die gewünsch­te Web­site ein rechts­kon­for­mes Aus­se­hen und ein Top-Ran­king bei den Such­ma­schi­nen.
Eine wei­te­re Lösung ist Gimp, da die­se Pro­gramm Open­So­ur­ce­Soft­ware ist und somit sau­be­re Datei­en erstellt ohne Müll-Con­tent.


*Pho­to­shop ist eine Mar­ke von Ado­be, Kali­for­ni­en und eine pro­prie­tä­re Soft­ware mit 58% Schwarz­ko­pi­en, das heißt jeder 2. Anwen­der ist kri­mi­nell!
Quel­len:
https://de.wikipedia.org/wiki/Photoshop
http://www.photoshoplady.com/infographics/photoshop-evolution.html

CSS-Zeich­nen Drei­ecke


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #c00; border:.1em solid #ddd;">
<div style="border-top: 4em solid goldenrod; border-bottom: 4em solid transparent; border-right: 24em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 4em solid yellowgreen; border-bottom: 4em solid transparent; border-right: 4em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: url(rose.jpg) #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid royalblue; border-left: 2em solid transparent; border-right: 2em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid transparent; border-bottom: 2em solid mediumvioletred; border-left: 22em solid transparent; border-right: 2em solid transparent;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: auto; height: 2em; border-top: 2em solid transparent; border-bottom: 2em solid transparend; border-right: 2em solid black;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="width: 0; height: 0; border-top: 2em solid goldenrod; border-bottom: 2em solid royalblue;border-left: 2em solid yellowgreen; border-right: 2em solid mediumvioletred;">
</div>
</div>



<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd;">
<div style="border-width: 1em; height: 2em; border-color:goldenrod royalblue yellowgreen mediumvioletred; border-style:solid;">
</div>
</div>

box-shadow

Es gibt noch viel fan­tas­ti­sche­re Mög­lich­kei­ten für box-shadow, hier eini­ge Anre­gun­gen.

Wei­cher Schat­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 1.1em 1.2em 1.3em royalblue;"></div>

• 1.1em = hori­zon­ta­le Ver­schie­bung
• 1.2em = ver­ti­ka­le Ver­schie­bung
• 1.3em = Unschär­fe-Radi­us [Blur]
• royal­blue = Schat­ten­far­be


Har­ter Schat­t­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow:1.1em 1.2em silver;"></div>


4 Far­ben-Schat­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 5px 5px 5px mediumvioletred,-5px 5px 5px yellowgreen,5px -5px 5px royalblue,-5px -5px 5px goldenrod;"></div>


Inne­rer wei­cher Schat­ten auf 2 Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 5px 5px 5px black;"></div>


Inne­rer har­ter Schat­ten auf 2 Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset -5px -5px 0 5px #000;"></div>


Inne­rer wei­cher Schat­ten auf allen Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: inset 0 0 10px black;"></div>


Äuße­rer wei­cher Schat­ten auf allen Sei­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 10px black;"></div>


Äuße­rer wei­cher Schat­ten auf 1 Sei­te


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 20px 20px -20px black;"></div>


Trans­pa­ren­ter Schat­ten


<div style="width: 24em; background: mediumvioletred;">
<div style="width: 50%; height: 4em; box-shadow: 3em 1em rgba(0,0,0,0.3);"></div>
</div>


Schat­ti­ger Schat­ten


<div style="width: 24em; height: 4em; background: #fff; border:.1em solid #ddd; box-shadow: 0 0 .5em .3em black,1.5em -1em yellowgreen,1.5em 1em 2em mediumvioletred,-1.5em 1em goldenrod,-1.5em -1em 2em royalblue;"></div>

text-shadow

Bei­spiel­text mit text-shadow


<div style="text-shadow: .1em .2em .3em #666; font-size: 2em; color: mediumvioletred;">Beispieltext mit <em>text-shadow</em>
</div>

• 0.1em = hori­zon­ta­le Ver­schie­bung
• 0.2em = ver­ti­ka­le Ver­schie­bung
• 0.3em = Blur [Unschär­fe-Radi­us]
• #666 = Schat­ten­far­be
• medi­um­vio­let­red = Schrift­far­be


Bei­spiel­text mit 2x Text­schat­ten


<div style="text-shadow: 0 0 .5em red,.1em .1em .1em gold; color: white; font-size: 2em;">Beispieltext mit 2x Textschatten
</div>


Bei­spiel­text im Vor­der­grund


<div style="text-shadow: .1em .1em .1em black; color: white; font-size: 2em;">Beispieltext im Vordergrund
</div>


Bei­spiel­text mit Kon­tur


<div style="text-shadow: 0 -1px black,1px 0 black,0 1px black,-1px 0 black; color: white; font-size: 2em;">Beispieltext mit Kontur
</div>


Bei­spiel­text im Inset


<div style="text-shadow: 0 -1px 1px black,0 1px 1px white; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Inset
</div>


Bei­spiel­text im Out­set


<div style="text-shadow: 0 -1px 1px white,0 1px 1px black; color: silver; font-size: 2em; font-weight:900;">Beispieltext im Outset
</div>


Wei­te­re Infor­ma­tio­nen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/

bor­der-radi­us


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 2em 4em 6em;"></div>

bor­der-top-left-radi­us: 0;
bor­der-top-right-radi­us: 2em;
bor­der-bot­tom-right-radi­us: 4em;
bor­der-bot­tom-left-radi­us: 6em;


Bor­der-Radi­us mit 1 Wert alle Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em;"></div>


Bor­der-Radi­us mit 1 Ecke


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 4em 0;"></div>


Bor­der-Radi­us mit 2 Ecken unten


<div style="width: 24em; height: 4em; background: silver; border-radius: 0 0 6em 6em;"></div>


Bor­der-Radi­us mit 2 dia­go­na­le Ecken


<div style="width: 24em; height: 4em; background: silver; border-radius: 6em 0;"></div>


Bor­der-Radi­us mit 2 unter­schied­li­che Wer­ten in 2 Ecken


<div style="width: 24em; height: 4em; background: silver; border-bottom-left-radius: 6em 1em; border-bottom-right-radius: 2em 1em;"></div>


Bor­der-Radi­us als Kreis


<div style="border-radius: 10em; height: 10em; width: 10em; background: silver;"></div>