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


In­halts­ver­zeich­nis

  1. Heu­te am Bei­spiel des Un­ter­strich von Hy­per­links, auch Se­lek­tor “a”
  2. Die Nor­mung von HTML5 und CSS3 sind gro­ße Er­leich­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 De­kla­ra­tio­nen “out­line” und “bor­der”

Im­mer wie­der wer­den von “Word­Press” be­wä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 Un­ter­strich von Hy­per­links, auch Se­lek­tor “a”

Das CSS, Cas­ca­ding Style She­ets, gibt dem In­halt das Aus­se­hen. Die­se Tren­nung ist vom W3C, World Wide Web Con­sor­ti­um, auch ge­nau­so ge­wollt. 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 ge­fühl­te 99% der ge­wünsch­ten Funk­tio­nen ab.


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

Wird ein Link ge­setzt, so wird die­ser so­fort ohne wei­te­re Lay­out-Ein­stel­lun­gen in der Far­be Blau und mit Un­ter­strich dar­ge­stellt. Au­ßer­dem be­kommt der Maus­zei­ger die Form des Poin­ters zu­ge­wie­sen. Das sind die 3 Stan­dards die in je­dem HTML-Do­ku­ment für Hy­per­links schon vor­de­fi­niert sind. Der Un­ter­strich wird da­bei von der De­kla­ra­ti­on “text-de­co­ra­ti­on” mit dem Wert “un­der­line” dar­ge­stellt.
Die­ser Stan­dard soll ge­währ­leis­ten, das nach­fol­gen­de Ar­bei­ten an der Web­sei­te und sei­nem CSS, ohne wei­te­ren Auf­wand und von je­dem an­de­rem Be­ar­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 be­zahlt wird, ge­hö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 de­ren Ge­heim­nis. Das es ge­tan wird, das ist zwei­fel­los Tat­sa­che. Doch das es bei den emp­foh­le­nen und von der ei­ge­nen Platt­form ver­brei­te­te The­mes von Word­Press sind, das ist är­ger­lich und wi­der­spricht auch dem Ge­dan­ken von Open Source Soft­ware, näm­lich der Nicht­dis­kri­mi­nie­rung, und dem wich­tigs­tem De­sign­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 De­kla­ra­tio­nen von Ele­men­ten vor­ge­kom­men und sie är­gern mich so sehr das ich nun ei­nen Bei­trag zum Word­Press Stan­dart-The­me “Twen­ty Six­te­en” schrei­be. Denn hier wird der Un­ter­strich von Links er­stellt mit “box-shadow: 0 1px 0 0 cur­rent­Co­lor;”.

Ver­sucht nun je­mand die­sen Un­ter­strich zu än­dern oder zu ent­fer­nen wird er nicht fün­dig mit der Su­che nach “text-de­co­ra­ti­on”. Bei ei­nem an­de­rem The­me von Word­Press wird der Un­ter­strich mit “bor­der-bot­tom” er­stellt, das zu dem sel­bem Är­ger 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 Hy­per­link der W3C-Emp­feh­lung
Hy­per­link mit “bor­der-bot­tom“
Hy­per­link mit “box-shadow“
Es sind kei­ne Un­ter­schie­de zu er­ken­nen, ge­nau das ist die fa­ta­le Si­tua­ti­on, vor dem der Web­de­si­gner steht. Zu­dem sind in dem The­me “Twen­ty Six­te­en” 6(sechs) CSS-Da­tei­en mit 53kB, das ent­spricht etwa 9000 Wör­ter, da ist die Su­che nach der ent­spre­chen­den De­kla­ra­tio­nen schon sehr schwer.


Bei­spiel der De­kla­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 De­kla­ra­ti­on “out­line” ist ohne sie zu ken­nen nicht gleich von “bor­der” zu un­ter­schei­den. Der Un­ter­schied liegt dar­in, “bor­der” legt sich zu­erst um den In­halt und “out­line” be­inhal­tet “bor­der” und den Con­tent. Aber ein­zeln ge­setzt, ist “out­line” nicht von “bor­der” zu un­ter­schei­den.

Hy­per­link mit “bor­der“
Hy­per­link mit “out­line“
Hy­per­link mit blau­er ge­punk­te­ter Li­nie für “out­line” und ro­ter Li­nie für “bor­der”

Stan­dard-Hy­per­link mit text-decoration: underline;

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

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

out­line : 0;

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

Oft be­steht 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 da­für die Op­tio­nen mit “class”, “span”, “div” oder an­de­ren Ele­men­ten ge­nutzt.

Ich habe mir eine Me­tho­de er­stellt 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 an­zeigt.
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 Be­fehl für die Sys­tem­über­sicht inxi -Fxz.

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

Das da­zu­ge­hö­ri­ge CSS:
em strong { color:#c00; }
code { co­lor: #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 je­des Web­de­signs und der ISO-Stan­dard, so­wie 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 al­ler Be­hin­der­ten-Or­ga­ni­sa­tio­nen, an­de­rer Be­nach­tei­lig­ten und zum Teil schon als Ge­setz ver­ab­schie­det.


Pro­blem:
Web­de­si­gnern wird die Ar­beit oft mit un­taug­li­ches Ma­te­ri­al er­schwert.
• Mail hat kei­ne An­hang, son­den die Bil­der wer­den zum Quell­text der Mail per “Drag and Drop” hin­zu­ge­fügt und nicht als se­pa­ra­te Da­tei­en, das voll­kom­mens­te De­sas­ter
• Tex­te wer­den in Bil­der in­te­griert
• Photoshop*-Dateien, Word-Da­tei­en, Ex­cel-Da­tei­en
• kei­ne Roh­da­ten
Kein Web­brow­ser be­inhal­tet Pho­to­shop, Word, Ex­cel und so wei­ter, son­dern nur Web­tech­ni­ken!
Es wer­den in je­dem Fall Roh­da­ten als Ori­gi­nal­bild und Text oder CSV-Da­tei be­nö­tigt mit den En­dun­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 Su­per für Fly­er, Pla­ke­te und ähn­li­che Print­me­di­en, dort kann der Con­tent nur Scha­den am Er­stel­ler-Com­pu­ter oder dem Com­pu­ter des Ver­ar­bei­ten­den an­rich­ten. Aber um Bil­der durch das In­ter­net zu schleu­sen ist eine ge­wal­ti­ge In­ter­net-Tech­nik zu be­die­nen, da die Bil­der von Pho­to­shop sehr groß sind und un­nö­ti­ge Sa­chen trans­por­tie­ren, macht es die Sa­che noch schwe­rer und könn­te bei Com­pu­ter-Sa­bo­ta­ge so­gar recht­li­che Kon­se­quen­zen nach sich zie­hen. Au­ßer­dem wird der zu le­sen­de Con­tent un­le­ser­lich.

Er­geb­nis:
Rie­si­ge Da­ten­men­gen, rie­si­ges De­fi­zit beim Ver­mit­teln von Con­tent, Bil­der mit schlech­tes­ter Qua­li­tät und nach 2 Se­kun­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 an­ge­zeig­te Bild mit Schran­ke, un­be­ar­bei­tet als Screen­shot in der Grö­ße 510x403 Pi­xel auf­ge­nom­men er­gibt:
• 1.201.750 Bytes — Pho­to­shop-Da­tei­for­mat, ohne HSV, ohne Ad­o­pe-Zu­satz-Con­tent
• 616.326 — Gimp-Da­tei­for­mat
• 429.348 — PNG-For­mat
• 81.828 — JPG-For­mat
Schranke-Datei

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

Für di­rekt von Pho­to­shop er­stell­te Da­tei­en gilt im RAM:
510x403x48CMYK = 9.865.440 Bytes + un­be­kann­ter Con­tent von Ado­be.
Der mir un­be­kann­te Con­tent macht mir am meis­ten Sor­gen, da er mög­li­cher­wei­se un­er­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
Ge­ra­de die Tren­nung von Con­tent und Lay­out kann die ge­for­der­te bar­rie­re­freie Dar­stel­lung er­mög­li­chen.
• Such­ma­schi­nen die den In­halt le­sen, kön­nen kei­nen Text aus ei­nem Bild aus­le­sen
• text­ba­sier­te Brow­ser se­hen auch nichts
• was ist mit RSS und so wei­ter
• Blin­de die mit mit ih­rer Dar­stel­lungs­tech­nik ar­bei­ten, füh­len eben­falls nichts
• die Tas­ten­kom­bi­na­ti­on “Strg++” kann in al­len Web­brow­sern die Schrift mit ih­ren 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/.
• ei­ge­ne Desk­top-Ein­stel­lun­gen, wie zum Bei­spiel Kon­trast, wer­den tor­pe­diert.

Er­geb­nis:
Der­zei­ti­ge Ge­set­ze und welt­weit an­er­kann­te In­dus­trie-Nor­men wer­den miss­ach­tet und der User wird mit dem vom Pho­to­shop-Ma­cher er­stell­tem Kunst­werk ter­ro­ri­siert, da dem User die Kon­trol­le über den Con­tent ver­lo­ren geht.


Lö­sung:
Re­spekt vor dem Web­mas­ter und dazu ler­nen, so be­kommt die ge­wü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 so­mit sau­be­re Da­tei­en er­stellt ohne Müll-Con­tent.


*Pho­to­shop ist eine Mar­ke von Ado­be, Ka­li­for­ni­en und eine pro­prie­tä­re Soft­ware mit 58% Schwarz­ko­pi­en, das heißt je­der 2. An­wen­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 ei­ni­ge An­re­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 = ho­ri­zon­ta­le Ver­schie­bung
• 1.2em = ver­ti­ka­le Ver­schie­bung
• 1.3em = Un­schär­fe-Ra­di­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>


In­ne­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>


In­ne­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>


In­ne­rer wei­cher Schat­ten auf al­len 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 al­len 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 = ho­ri­zon­ta­le Ver­schie­bung
• 0.2em = ver­ti­ka­le Ver­schie­bung
• 0.3em = Blur [Un­schär­fe-Ra­di­us]
• #666 = Schat­ten­far­be
• me­di­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 In­set


<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 In­for­ma­tio­nen:
http://www.wss-expert.de/Style/Examples/007/text-shadow.html
http://pixeltuner.de/css3-text-shadow/

bor­der-ra­di­us


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

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


Bor­der-Ra­di­us mit 1 Wert alle Ecken


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


Bor­der-Ra­di­us mit 1 Ecke


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


Bor­der-Ra­di­us mit 2 Ecken un­ten


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


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


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


Bor­der-Ra­di­us mit 2 un­ter­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-Ra­di­us als Kreis


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