Webdesign mit ChatGPT

Braucht es den Web­master noch oder können wir den auf die Strasse stellen und statt­des­sen ChatGPT nutzen? Ich mache die Probe aufs Exempel, indem ich zwei Pro­bleme meines Blogs mittels KI angehe.

ChatGPT ist hervorragend darin geeignet, uns bei Excel-Formeln auf die Sprünge zu helfen. Wie das geht, habe ich neulich für den «Tagesanzeiger» beschrieben. Weil das ein so grossartiger Erfolg war, habe ich mir überlegt, wie sich das weitertreiben liesse. Könnte ich von ChatGPT aus dem Stand ein CMS genau nach meinen Wünschen entwickeln lassen? Natürlich ist das, zumindest derzeit noch, ein zu hochfliegendes Ziel. Aber ich fresse einen Besen, wenn nicht jetzt schon Leute dabei sind, einer KI beizubringen, wie sie Word­press-Themes generiert.

Aber probieren wir an dieser Stelle doch etwas ganz Simples. Mich nervt seit einiger Zeit, dass die in Word­press eingebetteten Youtube-Videos die Textspalte nicht ausfüllen und linkbündig angeordnet sind. Entweder sollten sie in voller Breite erscheinen oder aber wenigstens zentriert. Also, kann uns ChatGPT helfen, dieses Problem zu lösen?

Grundsätzlich gut, aber in der Praxis untauglich

So redselig sind Webdesigner sonst nie.Ich frage konkret, das bei Word­­press bewerkstelligt werden kann. Ich erhalte sofort eine umfassende Anleitung, in der mir auch beschrieben wird, wie ich die Stildatei anpasse. Die Anleitung ist für meinen Fall ungenau: Ich müsste im Backend-Menü auf Design > Customizer klicken und dann Zusätzliches CSS auswählen. Leider kann das ChatGPT nicht genau wissen, weil Menüs und Klickpfade bekanntlich je nach CMS-Version, Konfiguration und den installierten Themes variieren.

Das gleiche Urteil – grundsätzlich richtig, aber für meine spezielle Situation inakkurat – lässt sich auch zum CSS-Code sagen, den ich von ChatGPT erhalte¹.

Warum? Ich führe eine Inspektion mit dem tollen Untersuchen-Befehl in Firefox durch, der beim Rechtsklick auf ein Seitenelement im Kontexmenü erscheint. Er zeigt auf, dass in meinem Fall das Youtube-Video nicht in einem Element namens .wp-block-embed__wrapper steckt. Das gehört mutmasslich zum Gutenberg-Editor.

Den verwende ich nicht, dafür habe ich aber die Jetpack-Erweiterung installiert, die sich anscheinend auch bei den eingebetteten Videos einmischt. Jedenfalls stecken meine Youtube-Videos im .jetpack-video-wrapper.

Ein Steilpass für die Faulen unter uns

Natürlich könnte ich den Code selbst anpassen, aber der Faulheit halber frage ich ChatGPT danach. Und voilà, ich erhalte sogleich die angepasste Stilanweisung zurück². Die funktioniert nun zumindest zur Hälfte: Die Videos werden jetzt schön zentriert (siehe z.B. hier), aber sie füllen die Spalte noch immer nicht vollkommen aus. Das scheint daran zu liegen, dass im Embed-Code die Breite und Höhe fix vorgegeben ist.

ChatGPT empfiehlt mir – wie erwartet –, die Angabe mit important zu überschreiben³. Das funktioniert ansatzweise: Die Videos erscheinen nun winzig, also wohl in der Standardgrösse, in der sie Youtube ausliefert. Ich komme wohl nicht umhin, die gewünschte Grösse selbst anzugeben. Und das funktioniert: Die Youtube-Videos erscheinen in der gewünschten Spaltenbreite. Allerdings nur am Desktop-Computer und nicht am Handy – darum habe ich diese Deklaration wieder weggelassen.

Was lernen wir daraus?

Aus diesem simplen Experiment ergibt sich ohne jeden Zweifel, dass ChatGPT einen erfahrenen Webmaster nicht ersetzen kann. Nur er kennt die Unwägbarkeiten einer Site und weiss, auf welche individuellen Besonderheiten Rücksicht genommen werden muss. Das würde sich jedoch ändern, sobald ein solcher Bot in der Lage wäre, die fragliche Konfiguration selbst zu untersuchen.

Doch auch wenn ChatGPT den Webmaster nicht arbeitslos macht, ist unbestreitbar, was für eine riesige Hilfe die Sprachmodelle sind. Alles, was ich hier beschreibe, hätte ich zwar selbst ergoogeln können. Doch das wären allgemeine Informationen gewesen, die ich für meinen Fall hätte adaptieren müssen. Die pfannenfertige Lösung spart Zeit und oft genug auch Frust. Sie macht die eigenen Kenntnisse aber keineswegs überflüssig: Wer von CSS keine Ahnung hat, kommt auch mit ChatGPT nicht weiter.

PS: Ich habe auch Bing gefragt, allerdings ohne Erfolg. Microsofts Chatbot hat mir mitgeteilt, er kenne sich mit CSS nicht besonders gut aus.  Und noch ein Nachtrag: Ich habe mich des Weiteren danach erkundigt, ob es möglich wäre, die Fussnoten hier im Blog standardmässig auszublenden und nur bei Bedarf sichtbar zu machen. Auch diese Antwort ist einwandfrei und leider ist, wie befürchtet, dafür Javascript notwendig.

Fussnoten

1) Das ist der CSS-Code:

/* Youtube-Videos in der Textspalte zentrieren */
.entry-content .wp-block-embed__wrapper {
    display: flex;
    justify-content: center;
}

/* Breite der Youtube-Videos festlegen */
.entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed__wrapper object,
.entry-content .wp-block-embed__wrapper video {
    max-width: 100%;
    height: auto;
}

2) Der neue, angepasste Code:

/* Youtube-Videos in der Textspalte zentrieren */
.entry-content .jetpack-video-wrapper {
    display: flex;
    justify-content: center;
}
/* Breite der Youtube-Videos festlegen */
.entry-content .jetpack-video-wrapper iframe,
.entry-content .jetpack-video-wrapper object,
.entry-content .jetpack-video-wrapper video {
max-width: 100%;
height: auto;
}

3) Die Grössenangaben im Youtube-Video überschreiben:

.youtube-player {
    width: 100% !important;
    height: auto !important;
}

4) Youtube-Videos mit fixen Grössenangaben für mein Theme:

.youtube-player {
    width: 722px !important;
    height: 406px !important;
}

5) ChatGPTs Antwort:

Ja, es ist möglich, einen div-Bereich auf einer Website mit CSS auszublenden und ihn über einen Einblenden-Knopf sichtbar zu machen. Dies kann mithilfe von CSS-Klassen und JavaScript erreicht werden. Hier ist ein Beispiel, wie das gemacht werden kann:

HTML:

<button id="einblenden">Einblenden</button>
<div id="meinDiv">Dieser Inhalt wird ausgeblendet.</div>

CSS:

#meinDiv {
  display: none;
}

Javascript:

document.getElementById("einblenden").addEventListener("click", function() {
  document.getElementById("meinDiv").style.display = "block";
});

In diesem Beispiel wird der div-Bereich standardmässig mit display: none; ausgeblendet. Wenn der Einblenden-Button geklickt wird, wird die CSS-Eigenschaft display des div-Bereichs über JavaScript auf block gesetzt, wodurch er sichtbar wird.

Das obige Beispiel ist ein grundlegendes Beispiel und kann je nach Anforderungen und Design der Website angepasst werden. Es zeigt jedoch das grundlegende Konzept, wie man einen div-Bereich ausblenden und einblenden kann.

Beitragsbild: Adobe Firefly zum Prompt «a friendly robot who designs a website on a computer screen».

2 Kommentare zu «Webdesign mit ChatGPT»

  1. ChatGPT ersetzt nicht das Fachwissen, aber er erhöht die Effizienz enorm, wenn man Sachen nicht per Suchmaschine finden oder in der Doku nachlesen muss.

    Meine letzten Anfragen, die alle zu meiner Zufriedenheit beantwortet wurden:

    – „Gib mir zwei CSS-Farbcodes in passendem hell- und dunkelgrün, um Tabellenzeilen abwechselnd zu formatieren.“
    – „Gib mir CSS-Code um in einem div ein Element oben rechts und eines unten rechts zu platzieren.“
    – „Erstelle ein PowerShell-Script, welches ein Verzeichnis auf neue Dateien überwacht. Wird eine Datei mit Endung fbx hinzugefügt, führe ein externes Kommando aus, mit der Datei als Parameter. Gibt die externe Anwendung einen Fehlercode zurück, schicke ein Benachrichtigungs-E-Mail. Der Mailserver erfordert Authentifizierung.“

    Besonders beim letzten Punkt war erfreulich, wie schön das generierte Script war. Kommentiert, Konfiguration in Variablen am Anfang, Logging ausgelagert in eine separate Funktion. Wie aus dem Lehrbuch.

    Kleiner Tipp zum CSS: Wenn man nicht so gerne mit dem Customizer arbeitet (das Textfeld für das CSS ist doch recht unübersichtlich), kann man eine eigene CSS-Datei erstellen und per „@import“ im Customizer laden. So kann man die Datei in einem vernünftigen Editor (Visual Studio Code) bearbeiten.

  2. Ich habe viel bessere Erfahrungen gemacht und sogar einige WordPress-Plugins von ChatGPT programmieren lassen. Wie immer kommt es auf die Instruktionen an. Je mehr Kontext man gibt (z.B. detaillierter Code, der zu fixen ist), desto besser ist auch der Output.
    Ganz ohne Programmierkenntnisse funktoniert es allerdings bei meinen Tests noch nicht. Ich habe jeweils mit den Grundfunktionalitäten begonnen, dann weitere Features (z.B. Admin-Page) hinzugefügt, und am Schluss das Design mit CSS erstellen lassen.
    Hin und wieder „verliert“ sich ChatGPT aber auch und findet eigene Fehler nicht. dann lohnt es sich, den Output von ChatGPT zu Bard zu kopieren, und dort nach einem Fix zu fragen. Damit wieder zurück zu ChatGPT 🙂

Kommentar verfassen