Transkription:

Klaus Miesenberger: Wieder zurück, ich hoffe gestärkt, frisch und munter nach dem Kaffee. Wir fahren weiter im Programm, wie ist die Frage, mein Wordpress-Theme geht auch barrierefrei. Sylvia Egger ist unsere Vortragende, Teamleaderin, Senior Frontend Developer und Autorin in Köln, sie spricht aber ausgezeichnet Wienerisch Sylvia Egger: Nee.] hab ich schon gehört und setzt sich aktiv für Barrierefreiheit von modernen Webseiten ein, besonders in ihrem Weblog sprungmarker.de. Sylvia bitte.

Sylvia Egger: Danke. Also dieses Mikrophon ist ein bisschen geschossartig, aber ich versuch damit zu arbeiten. Kurz vorausgeschickt, warum habe ich mit Wordpress beschäftigt. Also ich nutze Wordpress eigentlich schon sicher sieben, acht Jahre, also ich kenn die ganze Entwicklung von Wordpress. Und ich hab auch immer wieder die barrierefreie Entwicklung verfolgt, gut Wordpress ist standardkonform ziemlich weit vorn, aber es gibt halt immer wieder die gleichen Probleme, zum Beispiel bei der Tastaturnutzung. Das hat sich halt nicht wirklich geändert. Es gibt zwar ein Bug-System auch für Barrierefreiheit, da werden auch immer wieder Bugs eingereicht, aber die werden dann teilweise gelöst oder teilweise auf die nächsten Milestones verschoben. Und ich hab mir jetzt einfach dieses Jahr gesagt, ich versuche mal zu kucken welches Konzept kann man in Wordpress für Barrierefreiheit verwenden. Und wir sprechen einerseits über das Standard Theme, das neue Standard Theme ist Twenty Ten, das man hier auch sieht in der Folie. Und ich hab ein Konzept fruchtbar gemacht, das Child Theme-Konzept, und hab versucht quasi mit dem Child Theme das Standard Theme einfach barrierefreier zu machen.

Was ich präsentiere, ist ein erster Zwischenzustand. Ich wollt halt für den A-Tag auch schon etwas releasen, damit die Frage nachher auch positiv beantwortet werden kann, dass man etwas downloaden und verwenden kann. Und ich hab mich nicht nur mit dem Theme beschäftigt, sondern auch mit dem Editor. Es gibt noch weitere Bereiche, die ich noch kurz erwähnen werde, die auch noch kritisch sind. Ich hab mich mit dem Editor beschäftigt und angesehen wo sind da die größten Probleme und hab auch ein Plug-in für die Sprachauszeichnung entwickelt. Das ist eine Neuentwicklung, das gab’s bis dato nicht.

Also ich find, man muss sich bei Wordpress auch ein bisschen immer die Dimensionen vor Augen führen, also mittlerweile sind schon über 20 Millionen Downloads, also das ist der berühmte Wordpress Counter, der täglich läuft. Ich find das immer ganz lustig, wenn man sich das anschaut, weil da also wirklich eben sekündlich sich da etwas ändert, das ist natürlich jetzt eine Simulation. Aber das ist einfach, wenn man sich davor stellt, wenn man da wirklich was macht, dann hat es einfach schon eine ziemlich hohe Verbreitung. Und pardon, ist etwas lahm mein Notebook heute. Und dieses Standard Theme das neue, das Twenty Ten, wird natürlich auch jedes Mal mit herunter geladen und wenn man etwas installiert, die erste Installation zeigt immer dieses Theme an. Also das hat natürlich dann auch eine immense Verbreitung.

Und das Wordpress 3.0, die neue Version, kam im Juni raus. Da gab es auch seit langen Jahren, also ich glaube es waren zwei Jahren oder waren’s sogar drei Jahre, vielleicht kennen einige auch das vorherige Standard Theme Qbrick, das war seinerzeit total schick vor zwei bis drei Jahren mit den runden Ecken und dem Schatten und war halt so blau. Also das hat man relativ häufig auch, im englischsprachigen Bereich ist das fast durchgängig zu sehen gewesen. Das Twenty Ten, das ist jetzt nur ein paar Monate aktiv, sieht man auch schon. Also man kann’s durchaus sehen, dass die Leute das einfach nutzen. Und ich hab so ein bisschen Zahlenspiel gemacht, also wenn man sich nur vorstellt von dieser großen Summe, jeder 50. würde nach dem Download tatsächlich dieses Default oder dieses Standard Theme nutzen, dann wäre das eine Nutzung von ungefähr 400.000.

Also das ist schon ziemlich hoch und deswegen habe ich mir nicht wegen der Zahl allein, aber ich habe mir gedacht, das ist schon mal echt ein Ansatz um da einfach was anderes zu machen. Und ich denke, dass die Nutzung sicherlich noch höher ist. Also ich zeig jetzt hier einen kleinen Screenshot von ungefähr so sechs Seiten, das ist alles Twenty Ten, also links oben sieht man, das ist so ungefähr das Standard Theme, da hat jemand nur so ein bisschen was verändert, und der Rest ist eher stark verändert, aber der Quellcode, ich hab mir den Quellcode von diesen Seiten angesehen, von diesen Blogs, der ist tatsächlich genauso noch wie das Standard Theme es vorgibt. Das heißt wenn man da mein Theme eingeben würde, dann würde es tatsächlich einfach besser bedienbar sein.

Aber ich wollt auch zeigen, dass man das Standard Theme nicht immer wieder erkennen muss, sondern man kann halt tatsächlich, wir wissen das alle, mit HTML und CSS und Graphik halt sehr viel machen. Und so sieht das Original aus, das werden vielleicht etliche schon kennen, also das ist nicht direkt ein Standard Theme, das von Wordpress selbst entwickelt wurde, sondern ein Entwickler hat Monate vorher dieses Theme auf dem Blog entwickelt und nach einer Weile wurde das dann von Wordpress eingemeindet. Und so sieht’s auch ein bisschen aus, muss man auch sagen, wenn man sich die Quellcodebasis ansieht. Ist leider schade, sie hätten da viel mehr machen können. Dann vielleicht, viele glauben immer noch nicht, obwohl ich schon ein paar Beispiele gegeben hab, dass dieses Theme tatsächlich genutzt wird. Man muss sich nur ein bisschen umhören.

Sehr lustig ist auch immer zu lesen, Wordpress Deutschland im Forum wie die Leute so halt ihre Probleme mit diesem Standard Theme versuchen irgendwie zu erläutern. Die Einsteiger, das sind die, die eben sagen, gut ich hab jetzt, ich nutze einfach dieses Default Theme, weil irgendwie krieg ich’s halt nicht hin. Also wenn ich irgendwas anderes mache, dann zerschießt das einfach. Das ist so die typische Einsteigerquote, die sagen, ich kann halt leider nix anderes, deswegen nehme ich dieses Theme. Dann haben wir die eher Individuellen, also das fand ich auch sehr schön, habe grade mein Wordpress installiert und bin dabei meine Seite zu designen, ich benutze das Standard Twenty Ten Theme, dort werden die Links in der Sidebar und der Kommentarfunktion blau angezeigt.

Diese Farbe würde ich gern ändern, das muss doch an irgendeiner Stelle im Quelltext gehen, nur wo. Also da merkt man schon, da ist eine Bewegung da, ja. Ich meine, okay im Quelltext wird’s nicht zu ändern sein, sondern im CSS. Aber egal, der ist schon mal auf dem richtigen Weg. Aber das sind die Leute, die einfach sagen, das Theme an sich gefällt mir schon ganz gut, aber ich hätte vielleicht noch ein paar Farbänderungen gerne. Und dann haben wir schon eher die Professionellen, die sind auf einem ganz anderen Weg, da kommt auch schon ein ganz anderes Vokabular, ja Theme ist auf dem aktuellen Stand, lediglich die Style-CSS und drei, vier kleinere Dinge in Header und Footer habe ich verändert. Ich muss allerdings erwähnen, dass ich an und für sich recht fit bin in PHP und CSS und auch das lange nicht meine erste Anpassung von Wordpress ist. Da merkt man, dann steht einfach schon echt jahrelange Erfahrung dahinter. Der kennt sich aus wo er die Sachen einfach ändern muss. Das ist einfach denke ich mir zwei Drittel der Leute, die mit Wordpress umgehen.

Und ich zähl mich aber jetzt eigentlich noch nicht zu dem letzten Teil, zu den Theme-Entwicklern, weil ich nicht wirklich mit XAMPP was anfangen kann, aber das wird schon noch werden. Die Theme-Entwickler, die nutzen dieses Theme meistens auch um es als Basis zu nehmen um irgendein anderes Theme oder Framework daraus zu entwickeln, weil es ist ja nicht nur wichtig wie etwas aussieht, sondern dieses Basis-Theme von Wordpress bietet ja auch die entsprechenden Funktionen an, die Ausgaben, die man eben in jedem Theme braucht damit man die ganze Funktionalität von Wordpress tatsächlich in seinem Theme auch zum Laufen bringen kann. Und das fand ich dann halt sehr lustig, ich hab folgendes Problem, mir gelingt es nicht den jQuery in meiner XAMPP-Entwicklungsumgebung bei Wordpress zum Laufen zu bringen, ich habe ein Child Theme, also das ist schon ganz toll, wer weiß schon was ein Child Theme ist, zu Twenty Ten angelegt. Der Link wird angezeigt auf einem Fenster mit Hello World geht nicht auf, das würde ich auch ganz gern mal wieder haben, so was mit Hello World. Hat jemand eine Idee woran das liegen könnte.

Also da merkt man, da ist einfach eine sehr große Entwicklertiefe schon da. Also ich finde man kann sich jetzt ungefähr vorstellen, dass es doch genutzt wird. Und jetzt kann man sich, also die stellen sich natürlich diese Frage alle nicht, sondern die wollen eher ihr Theme zum Laufen bringen. Es geht darum, ist dieses Twenty Ten überhaupt barrierefrei. Und das fand ich auch eine sehr schöne Frage, weil es ist ja tatsächlich so, Wordpress ist eine offene Lizenz, jeder kann damit arbeiten, sie profitieren ja davon, dass sehr viele Entwickler dafür entwickeln und Sachen zur Verfügung stellen. Aber es macht sich einfach nur bedingt jemand den Kopf, ist das auch wirklich barrierefrei.

Und ich könnte natürlich jetzt jein sagen, aber sich sage, weil man ja provokativ sein muss, sage ich jetzt nein. Und warum ist das so. Man muss überlegen, es geht nur um das Theme in Wordpress, sondern der Hauptcontent, den man einpflegt in Wordpress, der geschieht eigentlich im Backend, im Editor, mit dem beschäftigen wir uns auch noch. Es ist wirklich ein gradueller Prozess, ich bewege mich auch auf so einer Schiene. Es ist noch nicht ganz barrierefrei, aber ich bin auf dem Weg. Und es ist auch so, dass man nicht sagen kann, das Theme ist barrierefrei und das nicht, weil standardkonform ist es ja, das heißt es ist einfach ein guter Weg schon geschafft, aber am meisten ist es so, entweder es geht um zusätzliche Optimierung, das ist meistens in den Themes so. Oder beim Editor ist, man muss einfach Dinge raus nehmen oder man muss tatsächlich etwas neu entwickeln. Also man ist da wirklich, wenn man sich da wirklich damit beschäftigen möchte, ist man richtig gefordert. Es ist einfach ein komplexer Prozess.

Wir schauen uns an das Theme, das neue Theme, Twenty Ten, dann die Pflege der Inhalte im Editor. Was wir uns nicht ansehen, weil das einfach die Zeit hier sprengt und weil es auch sehr komplex ist, da werde ich mich in nächster Zeit damit beschäftigen, bei Wordpress kann man ja Links und im Footer sehr viele zusätzliche Inhalte hinzufügen, das nennt man dann widgets oder Plug-ins und das entwickelt ja irgend jemand und die meisten Leute kümmern sich eigentlich nicht darum, ob das tatsächlich barrierefrei ist. Das habe ich schon gesagt, wir sehen uns beide Bereiche an. Jetzt noch eine kurze Zusammenfassung, welche Hauptbarrieren treten auf.

Es gibt natürlich noch detailliertere Geschichten, aber ich konzentriere mich jetzt mal auf die Hauptprobleme. Eine schöne Tortengraphik. Das Hauptproblem in Theme ist die Tastaturbedienung, das heißt man kommt gut durch mit der Tastatur, aber man hat nicht sonderlich eine Komfortfunktion dabei. Ja also es geht, aber gut man sieht nicht recht wo man ist, man hat auch teilweise keine Ahnung wo man ist, weil Wordpress hat auch ein Problem immer genau die Position zu markieren, das ist standardmäßig nicht vorgesehen. Und teilweise haben sie auch bei Mouseover das nicht ganz fertig gezurrt, das ist ein bisschen schade. Farben und Kontraste, das finde ich besonders schade, weil dieses wie wir gesehen haben, dieses Standard Theme ist eigentlich sehr einfach gehalten, hat auch nicht sonderlich viele Farben. Man hätte bei diesen Farben, also ich hab die Farben jetzt angepasst nach dem WCAG 2.0, sogar auf der Stufe 3A. Und man merkt wirklich nur den Unterschied graduell. Und das ist eigentlich nicht viel Aufgabe, vielleicht schreibe ich Ihnen das mal, die Farben könnte man wirklich einfach schnell anpassen und dann wäre das einfach schon mal erledigt. Also ich finde es halt schad, weil da ist ja nicht viel in dem Sinn. Und was man halt in Wordpress gar nicht kann, man kann in dem Editor keine Tabellen einpflegen und man kann zum Beispiel auch keine Sprachauszeichnung machen.

TinyMCE, das ist ja der Editor von Wordpress, der hat standardmäßig ein Tabellenmodul integriert, aber Wordpress hat das irgendwie gesperrt. Und man kann das einfach nicht mit einem Haken sagen, ja ich möchte das haben, sondern das muss man erst wieder als Plug-in installieren. Und es gibt Plug-ins, die das wieder flott machen, aber ich werde das jetzt noch mal neu bauen, weil da sind so viele Funktionen, die man gar nicht braucht, und ich werde das einfach reduziert dann zur Verfügung stellen. Noch mal kurz, das habe ich eh schon erwähnt, wir kucken in Theme und in den Editor. Ich wiederhol mich offensichtlich ein bisschen. Jetzt kann ich eben sagen, wir sehen uns ein Theme an, ich hab ein neues Child Theme entwickelt, das heißt ganz toll Accessible 1.0, das liegt daran, dass Wordpress verbietet, dass man es Theme nennt oder Wordpress oder ähnliches. Also jetzt habe ich mir gedacht, gut dann reduziere ich das auf das Minimalste, es heißt halt Accessible. Und für den Editor habe ich ein neues Plug-in entwickelt, das heißt auch ganz toll Accessible Language Change, MCE nennt man’s damit man erkennt, dass es sich um ein TinyMCE Plug-in handelt.

Ich erkläre noch ganz kurz was ein Child Theme ist, weil das kennen denke ich mir wahrscheinlich dann nicht alle. Ist eigentlich ein ganz tolles Konzept, ich hab das hier komplexer geschrieben, aber im Grunde ist es eigentlich ganz einfach. Ich hab so ein Standard Theme und normalerweise nutzen die Leute das, dass sie sagen na ja, das Standard Theme ist jetzt nicht schlecht, aber ich hätte gerne die Links alle grün, ja. Dann kann man sich so ein Child Theme anlegen, da sagt man ich hol mir alle Styles und alle Formatierungen von diesem Standard Theme, aber meine Links mache ich grün, das überschreibe ich hier.

Dieses Konzept ist eigentlich ganz simpel und leider ist bis jetzt noch niemand drauf gekommen, man kann das für die Barrierefreiheit einfach fruchtbar machen, dass man sagt, ja gut, das Standard Theme kann jetzt dieses und jenes in der Barrierefreiheit nicht. Ich gehe jetzt hin und sag, das bleibt so wie es ist, also es braucht auch kein Theme-Entwickler, wenn er es installiert, Angst haben, dass sein Standard Theme weg ist, sondern es ist einfach das Standard Theme da. Und ich lege quasi wie so Oberflächen noch was drauf und sag, komm ich mach dir die Tastaturbenutzung einfach ein bisschen sichtbarer. Oder ich mach dir dieses und jenes. Ich will zum Beispiel auch eine Skalierbarkeit durchgängig noch anbieten im nächsten Update, das heißt wenn du mein Plug-in noch dazu packst, ja dann ist deine Seite auch super skalierbar. Und das fand ich also vom Konzept ganz überzeugend. Die Vorteile sind halt für mich auch als Entwickler, dass ich sagen kann, jetzt kommt das 15. Update von dem Standard Theme und wenn ich jetzt im Standard Theme arbeiten würde, dann würde es ja ständig überschrieben werden. Und nachdem ich aber im Child Theme völlig unabhängig davon arbeite ist es mir egal was die da updaten. Außer sie würden die Klassen oder die ID alle ändern, dann müsste ich natürlich wieder ran.

Man kann ganz gezielt Änderungen machen, also das Child Theme ist natürlich auch ein Konzept, das eben schmal ist, man kann damit nicht alles machen, weil Wordpress bietet nur einen kleineren Kreis an Funktionen an, dass ich sagen kann, ich setz jetzt die Funktion X da drauf und dann mache ich das und das. Das geht halt nur bedingt. Es ist ein kleiner Rahmen, aber man kann was damit machen. Und die meisten Änderungen, also ich hab kein einziges Template angefasst, ich hab nur CSS, die CSS-Datei genommen, das überschrieben und ich hab eine Function-PRP, da kann man in Wordpress einfach die ganzen Funktionen überschreiben. Man kuckt immer so, gibt’s die Funktion, wenn nicht, dann mach meine Funktion. Die Nachteile hatte ich schon kurz angesprochen, irgendwann in der Entwicklung dieser Child Themes habe ich gedacht, meine Güte, ich würde es eigentlich im Template lieber ganz anders machen, ja. Spätestens wenn man an diesen Punkt gelangt sollte man sagen, gut mach einfach ein richtiges Theme, weil das ist einfach dann, das Child Theme eignet sich einfach dafür nicht. Und ich hab gehört, obwohl es keine Zahlen dafür gibt, die Performance geht runter. Also wenn man zum Beispiel jetzt sämtliche Templates aus dem Haupt-Theme rüber kopieren würde, die alle bearbeiten, dann würde Wordpress zuerst das Standard Theme laden und dann dein eigenes Child Theme und da geht die Performance runter.

Aber ich hab das nicht gemacht, ich hab wirklich nur die CSS-Datei und die Function-PHP genutzt und dadurch gibt es auch keine Performanceprobleme. Also mir ist jetzt noch nix aufgefallen und die Leute haben teilweise, also es hat auch keiner was rückgemeldet. Und es ist halt auch technisch sehr komplex mit dieser Function-PHP zu arbeiten. Man installiert das Child Theme wie jedes andere Theme, leider kann ich es nicht in Wordpress direkt integrieren, weil Wordpress es nicht zulässt, dass man in diesem Theme-Verzeichnis auch Child Themes, obwohl sie dieses Konzept selber erfunden haben, integrieren lässt. Das heißt man muss es leider noch von meiner Homepage laden. Also wenn man es jetzt runter lädt ins FTP-Verzeichnis, im Verzeichnis packt, dann erscheint es hier, das kennen die Leute vielleicht, die Wordpress nutzen, dann hat man hier ja alle möglichen Themes zur Verfügung und das muss man dann einfach ganz normal aktivieren und dann funktioniert das.

So sieht es dann bei den Styles-CSS aus, also da ist oben einfach nur Zusatzinformationen um welches Theme es sich handelt und man sieht hier diese Import-URL, dort wird quasi von dem Standard Theme die Styles rein geladen und ab dieser Sache hab ich dann meine eigenen Styles hinzugefügt und habe zum Beispiel die Farben überschrieben. Ich hab schon ein bisschen gesagt was dieses Child Theme kann, also die Farben und Kontraste validieren, die Tastaturbedienung, wir sehen uns das alles gleich an. Ich bin jetzt nicht mehr so der Fan von Sprunglinks, aber im neuen Theme hat es Wordpress endlich geschafft einen Sprunglink einzubauen, nur sie haben ihn leider auch falsch eingebaut. Also wenn man mit der Tastatur dorthin kommt, wird er leider nicht aktiviert und sie haben ihn auch relativ nicht am Anfang der Seite gesetzt, sondern erst kurz vor der Navigation. Also sie haben das Konzept irgendwie erfasst, dass es so was gibt, aber sie haben es nicht ganz durchdrungen.

Das ist meistens immer wenn man versucht nachzusehen, wenn sie Sachen umsetzen, dann fehlt ihnen offensichtlich tatsächlich so ein barrierefreier Spezialist, der ihnen das dann wirklich erklärt. Also der Marco Zehe zum Beispiel hat ja dort auch immer einige Bugs eingetütet, teilweise werden sie gemacht, teilweise nicht. Dann, ja die anderen Sachen, ist jetzt nicht so wichtig, aber ja das lass ich jetzt mal weg, weil die Zeit läuft. Ja das kam auch immer wieder, dieses neue Standard Theme hat immer Home und Home kann man nicht ändern, ja. Das haben die Leute halt immer gesagt, ich will aber nicht, dass das Home heißt, ja. Ist ganz komisch, dass sie das nicht pflegbar machen. Also das hab ich jetzt irgendwie pflegbar gemacht, weil die Leute gesagt haben, das soll eben Startseite oder irgendwie anders heißen, ganz merkwürdig. Aber im englischsprachigen Bereich wollen die wahrscheinlich alle Home. Was ich da noch gemacht hab ist, dass ich den Editor, wenn man diese Themes installiert, dann wird der Editor auch ein bisschen zusammen gedampft.

Das sehen wir uns auch gleich an was der Editor macht und viele Dinge sind einfach sinnlos, die braucht man heute nicht mehr. Ja hier kann man noch mal sehen, das ist die Filestruktur von dem Theme. Wie ich gesagt habe, es gibt eine Styles-CSS, es gibt eine Function-PRP und die anderen Sachen, die Language ist klar, also es liegt in Deutsch und in Englisch vor. Und hier kann man auch sehen die Plug-ins, die hab ich jetzt nicht rein gepackt als Dateien, sondern nur der Hinweis wo man die Plug-ins für den Editor installieren kann. Da sieht man die noch ausgegrauten Sachen, da bin ich noch dran, die hab ich noch nicht geschafft. Das will ich eben in Zukunft realisieren bei dem Theme noch, den Layout und Textzoom integrieren, weil es ist halt, es ist tatsächlich so, dass das Theme einigermaßen skalierbar ist, das Default Theme, es geht. Nur wenn da, normalerweise ist ja im Default-Zustand fast nur Text, dann geht das, ja.

Aber wenn die Leute dann anfangen ihre Bildgalerien da einzubauen, spätestens dann wird’s ziemlich merkwürdig. Dann will ich einen Breadcrumb integrieren, weil es ist einfach so, das gewisse Ebenen nie sichtbar sind wo man sich gerade befindet. Dann haben sie auch WAI-ARIA eingebaut, aber eben auch nur bedingt. Also sie schaffen es immer irgendwas einzubauen, aber dann bleiben sie irgendwo am halben Weg stehen. Es ist schon gut, dass sie es eingebaut haben, aber es ist nicht ganz konsistent. Und eben noch weitere Plug-ins werde ich fertig stellen. Wir sehen uns jetzt einen kurzen Vergleich an im Screencast. Da kann man dann drauf kucken, zuerst sehen wir immer das Standard Theme Twenty Ten und im Vergleich dann quasi das Child Theme, was das damit macht. Sind die Farben und Kontraste jetzt besser, zum Beispiel oben dieses Hauptmenü, das ja sehr, sehr grau auf schwarz ist, kann man das wirklich erkennen. Ist klar wo bin ich aktuell jetzt eigentlich in dem Theme. Und wie sieht zum Beispiel der Sprunglink aus. Am Schluss sehen wir dann noch eine kurze Sequenz wie man den Editor verschlanken kann. So, mal kucken ob er das macht, ja. Das ist jetzt das Standard Theme, da tappen wir jetzt durch. Ich meine es geht alles, aber es ist halt nicht sonderlich komfortabel, find halt ich so. Es ist so grau auf blau und weiß. Wir sehen jetzt im Vergleich, wenn man das Child Theme aktiviert hat, da sieht man jetzt, da habe ich jetzt ganz kurz angehalten, da ist ja der Sprunglink. Den haben wir vorher ja nicht gesehen, der ist jetzt da. Dann habe ich das einfach ein bisschen alles hochgezogen, auch die Farben sind hochgezogen. Man merkt es ein bisschen an den Grautönen. Hier sieht man noch mal eine kurze Sequenz.

Ich find halt auch Wordpress kann sehr lang im Contentbereich sein, dass man auch wieder nach springen kann. Jetzt sehen wir mal die erste Sequenz, den TinyMCE, was man mit dem alles machen kann im Default, also wie er ausgeliefert wird. Man kann so schöne Überschriften machen, die man dann auch noch rot färbt, wenn ich das dann hinkriege. Also der hat die typischen Sachen aus der Ursteinzeit. Ich meine abgesehen davon, dass es für die CI einer Webseite nicht gut ist, wenn ein Kunde hier alle möglichen Dinge macht. Mittig setzen, links und rechts, Einrücken und ähnliches. Und wir sehen im Quelltext, das wird alles mit Inline-Styles realisiert. Und ich find solche Sachen müssen heute einfach nimmer sein, geschweige denn dass die Leute dann, also es wird dann noch schlimmer Bilder einzusetzen sind, dann kann man dann, also Bilder werden standardmäßig auch immer gefloatet mit Inline-Styles. Und ich hab das Ding jetzt einfach abgespeckt, die Sachen gibt’s einfach nicht mehr, ja. Ich mein das kann man alles auskommentieren, wenn der Kunde dann doch seine Farben möchte. Und hier sieht man schon die beiden neuen Button zur Sprachauszeichnung.

Ich hab auch schon erste Reaktionen, ich hab’s am Montag released und dann wurde es tatsächlich runter geladen und die internationale Gemeinde hat sich schon ein bisschen damit beschäftigt. Ich fand das dann auch so super, weil ich mag halt das Wort awesome so gern, weil ich bis heut nicht genau verstehe was eigentlich sich hinter diesem Wort verbirgt. Can’t wait to try it. Und bis jetzt habe ich, ich hab mir dann die Blogs angesehen wo das Theme eingesetzt wurde und das lief eigentlich, das sah gut aus. Aber im Grunde kann auch nix passieren, weil ich ja quasi eben nix hinzugefügt hab was wirklich kritisch wäre. Das kann noch werden.

Jetzt sehen wir uns ein bisschen den Editor an, TinyMCE, die meisten, die Wordpress bedienen, kennen ihn. Also ich denk auch wahrscheinlich 80 Prozent der Leute schalten die Option auch nicht aus und werden diesen Editor nutzen. Typisches Konzept, what you see is what you get. Mittlerweile hat in Wordpress dann JuLiA auch Einzug gehalten, dass man eben die Styles des Editors so anpassen kann, dass der Kunde das Gefühl hat er würde auf seiner Webseite tatsächlich arbeiten. Wordpress aktiviert eben, das haben wir grad gesehen, einen bestimmten Default. Es gibt zum Beispiel Plug-ins von TinyMCE für semantische Auszeichnungen, von Abkürzungen und so weiter. Das hat alles Wordpress deaktiviert, warum auch immer. Das finde ich komisch, weil glaube ich schon vor zehn Jahren damit der Matt Mullenweg der erste war, der überhaupt eine Abkürzung eingeführt hat im Blogsystem. Ich weiß nicht warum er’s macht, vielleicht mag er’s heute nicht mehr. Dann ebenso Sprachauszeichnung, Datentabellen, alles nicht möglich, muss man alles erst wieder kompliziert aktivieren. Das Ziel der meisten Optionen in diesem Editor ist tatsächlich nicht die Semantik, sondern möglichst viele alte Layoutoptionen zu unterstützen, möglichst viele merkwürdige Dinge dem Quellcode hinzuzufügen.

Und das Ziel für mich ist es eben bei diesem Editor zu verschlanken, entschlacken und neu entwickeln. Und einen Teil macht eben das Child Theme und den anderen Teil ist tatsächlich, man muss hingehen, die fehlende Semantik quasi mit dem Plug-in wieder reinholen. Das ist jetzt nicht so die leichteste Aufgabe. Aber ich hab’s mal probiert und jetzt wird’s schneller gehen, am Anfang ist es eher schwierig gewesen. Also es ist halt sehr viel Sucharbeit, wie macht man so was überhaupt, man muss sich mit TinyMCE beschäftigen, man muss sich mit Wordpress beschäftigen, wie ist es da integriert und so weiter. Wir sehen uns jetzt das Plug-in für die Sprachauszeichnung an. Hier die Buttons haben wir schon gesehen. Wir haben zwei Optionen in der Sprachauszeichnung, einerseits kann man ein Wort markieren, zum Beispiel in einem deutschen Text ein französisches Wort, so markiert man das Wort, es wird ein Spamelement rein geschrieben und man gibt die entsprechende Sprache einfach in Popup an, das ist der Button Lang. Dann leider, ich hab das Ziel das alles in einem Button zu vereinen, aber das hab ich noch nicht geschafft, weil das ist, von TinyMCE gibt’s da zwei Konzepte und ich hab noch nicht verstanden wie man die Konzepte zusammenführt, aber vielleicht krieg ich das ja noch hin. Bestehende Elemente wie ein Absatz oder eine Überschrift, die können ja theoretisch auch in einer anderen Sprache vorliegen, da klickt man einfach auf den Absatz, geht auf den Button, trägt die Sprache ein und dann hat der Absatz die Sprachauszeichnung.

Ich hab dann noch ergänzt, wir haben ja auch Probleme zum Beispiel eine Zielsprache anzugeben. Das normale Linkelement in TinyMCE lässt das nicht zu, da kann zwar irgendwo ein Fenster aufgehen oder so, auswählen, aber man kann nicht ein hreflang einfügen um die Sprache des Zieles anzugeben. Ich hab gedacht, es ist ganz gut wenn man das ein bisschen hervorgehoben hat, wenn man so ein Wort markiert und mit einer Sprache versieht, in drei Tagen weiß man das vielleicht nicht mehr, dass man das gemacht hat. Ich hab das jetzt mal so in Grautönen gemacht, das kann man aber alles anpassen, dafür gibt’s eine Editor-CSS und wenn jemand das rot haben will, kann er das gerne rot färben. Bis jetzt, weil ich halt mit aktuellen Funktionen gearbeitet hab, ist es nur in Wordpress 3.0 lauffähig.

Ich hoffe, dass ich das vielleicht irgendwann rückwärts kompatibel noch in untere Versionen kriege, eventuell schaffe ich einen Button und ich möchte es ganz allgemein für den TinyMCE in das Plug-in-Verzeichnis kriegen, weil da muss man wieder abspecken, muss wieder die Wordpress-Sachen rausarbeiten, weil TinyMCE hat ja noch ne viel größere Verbreitung als jetzt Wordpress an sich. Ich strebe die Masse an. Wir sehen jetzt ein Videobeispiel, da kann man sich den Sprachwechsel in Aktion ansehen. Einerseits das erste Beispiel der Sprachwechsel mit Hilfe des Spamelements, dann ein bestehendes Element, zum Beispiel einen Absatz mit der Sprache versehen und am Schluss einem Link eine Zielsprache hinzufügen.

Also wir markieren das Wort, gehen auf den Button Lang, fügen da die Sprache hinzu, in dem Fall hab ich jetzt Französisch genommen, dann fügt man das einfach ein und dann sieht man ein bisschen hervorgehoben, das sollte jetzt Französisch sein, man kann das einfach wieder editieren und zum Beispiel Deutsch eintragen und dann updaten. Im Quellcode sieht es dann so aus, also ich bin auch noch bestrebt die Klasse Lang rauszukriegen. Das ist wieder eine Sache nach unten per CSS. Und man kann’s einfach wieder löschen. Das sieht jetzt sehr einfach aus, aber es ist relativ komplex so was zu erstellen. So und hier können wir uns jetzt anschauen wie man so einen Absatz, einfach den Absatz anklicken, sagen der ist Französisch, und den markiere ich dann natürlich nicht, weil ganze Absätze in Grau zu markieren finde ich jetzt ein bisschen hässlich, weil das fällt eher auf so ein französischer Absatz. Man kann es dann auch wieder entfernen, das ist eben weil das eine andere Funktion ist, kann man das nur so entfernen. Das versuche ich irgendwie alles irgendwann zusammen zu fügen. Jetzt kucken wir uns noch an einen Link, zum Beispiel hier ist ein Link zu Yahoo, den versuche ich jetzt mit einer Zielsprache zu versehen.

Klicken wir wieder drauf, Fenster geht auf, die Target-Sprache, also die Zielsprache eingeben und dann hat man das im Quelltext hinzugefügt. Dieses Plug-in, das hab ich immerhin schon geschafft ins Plug-in direkt rein zu kriegen, das ging relativ flott. Also Plug-ins werden ohne Weiteres angenommen, für mich auch ganz angenehm, weil man hat auch zugleich ein RSS-Feed dabei, eine Möglichkeit dass die Leute nachfragen, wenn sie mit dem Plug-in nicht zurecht kommen. Ich hab das auch abonniert, also wenn Fragen kommen, dann werde ich die glatt beantworten. Ja danke fürs Zuhören. Für mich eben noch ne Menge zu tun, also das ist jetzt absoluter Zwischenstand, aber ich denke ich werde da weiter machen.

Bilder von web’n’foto.