Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

KI verändert radikal das Webworking

Symbolbild

Ich bastle seit über 20 Jahren Webseiten. Und das ohne CMS, oder sonst irgend etwas Vorfabriziertes wie Wordpress o.ä. Vielmehr schreibe ich jede einzelne Zeile HTML, PHP, CSS und JavaScript in einem einfachen Texteditor. Das mag rückständig oder umständlich klingen, hat aber den Vorteil, dass ich jedes Detail der von mir verfassten Webseiten kenne, und bei Bedarf an der richtigen Stelle eingreifen kann.

Als Autodidakt, also ohne einschlägige Ausbildung, musste ich natürlich häufig Hilfestellung suchen. Verschieden Quellen im Internet waren meine Anlaufstellen. Zu Beginn war das häufig selfhtml.org, zuletzt oft stackoverflow.com.

In Kombination aus angelesenem Basiswissen, Beispielen aus dem Internet und viel Trial and Error entstanden Lösungen, die meistens funktionierten und häufig auch ansprechend waren.

KI hat Alles geändert

  • Künstliche Intelligenz (KI) ermöglicht es Computern, selbstständig zu lernen und Probleme zu lösen.
  • ChatGPT ist ein KI-Sprachmodell, das Texte versteht und in natürlicher Sprache antwortet.
  • Ein Prompt ist die Eingabe oder Anfrage, die man einer KI wie ChatGPT gibt, um eine Antwort zu erhalten.

Meine Arbeitsweise hat sich komplett geändert

Anstatt Zeile für Zeile Code zu schreiben, stelle ich jetzt Fragen an ChatGPT, prüfe die Antwort, fasse nach, bitte um Änderungen oder Ergänzungen.

Ich frage ChatGPT, wenn ich etwas Neues machen will, oder auch, um vorhandenen Code zu optimieren (dazu mehr in einem zukünftigen Artikel). Und wie im echten Leben, hängt auch hier die Qualität der Antwort von der Qualität der Frage ab.

Ein Beispiel

So kann ein Script mit Hilfe von ChatGPT entstehen: Ich frage ("Prompt"), und ChatGPT antwortet; häufig gleich mit einem fertigen Code in der jeweiligen Scriptsprache.

Ich habe viele Bild-Dateien auf dem Server. Darunter viele, die während der Entwicklung der Website entstanden sind, aber auf der Site nicht mehr genutzt werden.
Alles klar 🙂 hier ein einfaches PHP-Skript, das alle Bilder in einem Ordner ($imgDir) erfasst und mit den im Quellcode (HTML, PHP, CSS, JS) gefundenen Bildreferenzen vergleicht. Am Ende bekommst du eine Liste mit wahrscheinlich unbenutzten Dateien.
<?php /** * unbenutzte_bilder.php * * Sucht alle Bilder in $imgDir und prüft, ob sie irgendwo im Quellcode * der Website ($scanDir) referenziert sind. * * Ergebnis: Liste von Dateien, die vermutlich nicht mehr benutzt werden. */ $imgDir = __DIR__ . '/images'; // Ordner mit den Bildern $scanDir = __DIR__; // Ordner mit Website-Dateien (Quellcode) // --- 1. alle Bilder im Image-Ordner erfassen --- $bilder = []; $rii = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($imgDir)); foreach ($rii as $file) { if ($file->isFile()) { $ext = strtolower(pathinfo($file->getFilename(), PATHINFO_EXTENSION)); if (in_array($ext, ['jpg','jpeg','png','gif','webp','svg'])) { $bilder[] = $file->getPathname(); } } } // --- 2. alle Referenzen in Website-Dateien sammeln --- $referenzen = []; $rii = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($scanDir)); foreach ($rii as $file) { if ($file->isFile()) { $ext = strtolower(pathinfo($file->getFilename(), PATHINFO_EXTENSION)); if (in_array($ext, ['php','html','htm','css','js'])) { $inhalt = file_get_contents($file->getPathname()); if ($inhalt !== false) { // alle Strings wie "xxx.jpg" usw. finden if (preg_match_all('/[\/\w\-\.\@]+?\.(jpg|jpeg|png|gif|webp|svg)/i', $inhalt, $matches)) { foreach ($matches[0] as $treffer) { $referenzen[] = strtolower(basename($treffer)); } } } } } } $referenzen = array_unique($referenzen); // --- 3. Vergleich: welche Bilder sind unbenutzt? --- $unbenutzt = []; foreach ($bilder as $bild) { if (!in_array(strtolower(basename($bild)), $referenzen)) { $unbenutzt[] = $bild; } } // --- 4. Ausgabe --- header('Content-Type: text/plain; charset=utf-8'); echo "Gefundene Bilder insgesamt: " . count($bilder) . "\n"; echo "Gefundene Referenzen: " . count($referenzen) . "\n"; echo "Vermutlich unbenutzt: " . count($unbenutzt) . "\n\n"; foreach ($unbenutzt as $u) { echo $u . "\n"; }
👉 Soll ich dir noch eine Variante bauen, die die ungenutzten Bilder gleich in einen separaten Ordner verschiebt, statt nur die Liste zu drucken?
Ja bitte, das wär' cool
Sehr gut 👍 dann bauen wir die „Verschiebe-Variante“ – aber so, dass nichts gelöscht wird.
Alle Dateien, die das Skript als „vermutlich unbenutzt“ erkennt, landen in einem Unterordner unbenutzt_bilder (den das Skript selbst anlegt).
Hier die erweiterte Version:
<?php /** * unbenutzte_bilder.php * * Sucht alle Bilder in $imgDir und prüft, ob sie irgendwo im Quellcode * der Website ($scanDir) referenziert sind. * * Ergebnis: nicht referenzierte Dateien werden nach $targetDir verschoben. */ $imgDir = __DIR__ . '/images'; // Ordner mit den Bildern $scanDir = __DIR__; // Ordner mit Website-Dateien $targetDir = __DIR__ . '/unbenutzt_bilder'; // Zielordner für unbenutzte Bilder // --- Zielordner anlegen --- if (!is_dir($targetDir)) { if (!mkdir($targetDir, 0755, true)) { die("Kann Zielordner nicht anlegen: $targetDir"); } } // --- 1. alle Bilder im Image-Ordner erfassen --- $bilder = []; $rii = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($imgDir)); foreach ($rii as $file) { if ($file->isFile()) { $ext = strtolower(pathinfo($file->getFilename(), PATHINFO_EXTENSION)); if (in_array($ext, ['jpg','jpeg','png','gif','webp','svg'])) { $bilder[] = $file->getPathname(); } } } // --- 2. alle Referenzen in Website-Dateien sammeln --- $referenzen = []; $rii = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($scanDir)); foreach ($rii as $file) { if ($file->isFile()) { $ext = strtolower(pathinfo($file->getFilename(), PATHINFO_EXTENSION)); if (in_array($ext, ['php','html','htm','css','js'])) { $inhalt = file_get_contents($file->getPathname()); if ($inhalt !== false) { if (preg_match_all('/[\/\w\-\.\@]+?\.(jpg|jpeg|png|gif|webp|svg)/i', $inhalt, $matches)) { foreach ($matches[0] as $treffer) { $referenzen[] = strtolower(basename($treffer)); } } } } } } $referenzen = array_unique($referenzen); // --- 3. Vergleich: welche Bilder sind unbenutzt? --- $unbenutzt = []; foreach ($bilder as $bild) { if (!in_array(strtolower(basename($bild)), $referenzen)) { $unbenutzt[] = $bild; } } // --- 4. Ausgabe + Verschieben --- header('Content-Type: text/plain; charset=utf-8'); echo "Gefundene Bilder insgesamt: " . count($bilder) . "\n"; echo "Gefundene Referenzen: " . count($referenzen) . "\n"; echo "Verschiebe unbenutzte Bilder nach: $targetDir\n\n"; foreach ($unbenutzt as $u) { $ziel = $targetDir . '/' . basename($u); // falls der Name schon existiert → eindeutigen Namen bauen if (file_exists($ziel)) { $ziel = $targetDir . '/' . uniqid('dup_') . '_' . basename($u); } if (rename($u, $ziel)) { echo "verschoben: $u -> $ziel\n"; } else { echo "FEHLER beim Verschieben: $u\n"; } }
Ich hätte gerne so etwas wie eine Warnung vorgeschaltet. Mit Auflistung, was das Script macht (also: So läuft's ab). Und dann einen Go-Button.
Sehr gute Idee 👍 dann machen wir aus dem Script eine kleine HTML-Seite mit Warnung, die zuerst erklärt, was passieren wird. Erst wenn du auf „GO“ klickst, läuft der Verschiebe-Teil.

usw. usf. … Nach einigen weiteren Schritten stand ein fertiges Tool, das mir jetzt hilft, Ordnung bei den Bilddateien zu halten.

Die Benutzeroberfläche des fertigen Tools

Anzeige des Tools im Browser

Muss jetzt niemand mehr HTML & Co lernen …

… um Webseiten oder Anwendungen zu schreiben? Nein. So einfach ist es nicht. Schließlich muss ich wissen, was ich wie fragen soll. Und dazu sind wiederum brauchbare Kenntnisse der entsprechenden Sprachen erforderlich. Aber um selbst ein Script wie in obigem Beispiel zu erstellen, hätte ich um ein Vielfaches länger gebraucht, und vor allem viel Zeit mit Testen zugebracht.

A propos Testen

Testen, und vor allem vor jeder Änderung entsprechende Sicherheitskopien anlegen, ist auch bei der Arbeit mit einer KI unverzichtbar. Bei korrekt Prompts erstellt ChatGPT zwar in der Regel saubere, fehlerlose Scripte; Man sagt, ChatGPT arbeite auf dem Niveau eines Diplom-Informatikers.
Eine Charaktereigenschaft jeder KI kommt aber auch beim Codieren manchmal plötzlich und unerwartet zutage: "Halluzinieren". Dann kann es sein, dass ein vorher funktionierender Code vollkommen umgebaut wird, dass die KI alle vorher abgestimmten Schritte "vergisst", und Neues "erfindet".

Dazu werde ich einen eigenen Artikel schreiben.

Copyright-Hinweis

Artikeltexte und Code-Snippets: Creative Commons  CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

Kommentare

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat