Herausfinden mit welchem Programm eine Website erstellt wurde

Alter Gentleman mit Strohut und Monokel vor dem nigelnagelneuen Laptop sitzend.

Sie haben einen stylischen Blog gelesen, oder eine spielerische Website bestaunt, die so feines selbstgebasteltes für Ihre Freunde anbietet und fragen sich: Wie erstellt man so eine schöne Website?

Vielleicht schauen Sie auch einfach nach Anregungen, um Ihre eigene Site oder Online-Shop zu bauen? Oder Sie haben ein großartiges Widget gefunden, welches Sie ebenfalls nutzen wollen?

Sie können das.

Alles was Sie tun müssen ist herausfinden, welche Plattform die Website verwendet.

Informationen, die Sie hier lesen, werden nicht nur Ihre Neugierde befriedigen, sondern ebenfalls helfen sich anhand existierender Websites zu orientieren und den richtigen Websitebaukasten zu finden (falls Sie noch nach einem suchen).

Wenn Sie die Anwendungen kennen, können Sie Stile und Layouts von Websites vergleichen. Weiterhin bekommen Sie einen Eindruck von der Funktionalität und der möglichen Integration von Widgets, die Website-Anbieter anbieten.

Es lohnt sich also, tiefer zu graben.

Wie aber nun die Quelle einer Website erkennen? Es ist einfacher als Sie denken.

Den Quellcode einer Website finden

Viele Wege führen nach Rom. Einige sind direkt andere nicht so offensichtlich. Lassen Sie uns mit den einfacheren Methoden beginnen.

Subdomains

Die meisten Website Builder ermöglichen es Websites kostenlos zu erstellen. Diese erhalten automatisch eine Web-Adresse einer Subdomain, unter dem Namen des Websiteanbieters. Eine Subdomain ist eine Domain, die sich durch einen Punkt von der Hauptdomain abzeichnet. Diese wird häufig vom Provider als originale Domain bezeichnet, da der Ursprung der spezifische Provider ist.

Wenn Sie zum Beispiel bei Webnode ein Website Projekt erstellen, so ist die URL auf dem gratis Projekt Ihr Projekt Name plus der Webnode Domain, wie meinblog.webnode.page.

Sollten Sie mehr als eine Website mit dem gleichen Namen erstellen, wie zum Beispiel meinblog, wird die Subdomain systematisch eine Nummer erhalten, wie zum Beispiel meinblog1.webnode.page. Eine Domain kann niemals doppelt existieren.

Beispiel einer Webnode Sub-Domain

Beispiel einer Webnode Sub-Domain

Wenn Sie also eine Subdomain sehen, können Sie sicher sein, dass diese den Anbieter enthüllt.

Werbung

Ein weiterer einfacher Weg ist die Werbung bzw. Banner, die Anbieter einbauen. Websites, die nicht unter einem bestimmten Premium Tarif laufen, tragen ein Werbebanner des Providers. Entweder in der Kopf- oder Fußzeile oder am Rande einer Seite.

Verschiedene Werbe-Banner von Website Anbietern.
Verschiedene Werbe-Banner von Website Anbietern.

Verschiedene Werbe-Banner von Website Anbietern.

Zusätzlich können Provider eine kleine Copyright Notiz in der Fußzeile angeben, welche auf den Website Baukastenanbieter verweist.

Je nachdem welches Business-Modell der Anbieter verfolgt, können selbst bestimmte bezahlte Premium Versionen diese Form von Werbung enthalten. Dies auch dann noch, wenn die Website einen eigenen persönlichen Domain Namen trägt, wie etwa meinblog.de.

Es ist sehr wahrscheinlich, dass Sie über den Website Baukasten erfahren, indem Sie einfach bis ganz unten zur Fußzeile scrollen.

Nicht so offensichtliche Wege die Quelle herauszufinden

Sobald der Website Besitzer einen bestimmten Premium Tarif zahlt und eine eigene Domain für die Site registriert hat, sehen Sie nicht sofort mit welchem Website Baukastenanbieter diese erstellt wurde. Eine schnelle Methode ist ein Website Plattform Scanner.

Website Plattform Scanner

Einer der konstruktivsten ist Builtwith. Sie geben einfach die Web-Adresse bzw. Domain ein und der Scan- Bericht wird Ihnen die Quelldaten angeben. Es werden hier neben der Website Plattform die Web-Server, SSL Zertifikat und Cookies angezeigt. Ein ähnlicher Scanner ist WhatCMS.

Ein Beispiel des Berichts vom Website Plattform Scanner Buildwith, wenn nach der Website  Amazon.com gesucht wird

Ein Beispiel des Berichts vom Website Plattform Scanner Buildwith, wenn nach der Website Amazon.com gesucht wird

Weitere nützliche Tricks

Sie sind ein junger Unternehmer, der nach Kontakten sucht und wissen will, wie es die Konkurrenz macht? Ein Tool, um sogenannte Businessleads zu finden, ist Wappalyzer. Es bietet eine generelle Marktübersicht. Sie lernen so besser von Ihren Konkurrenten.

Wappalyzer ist eine Browsererweiterung, die zeigt welche Technologien eine Website verwendet. Auch wenn diese nicht sofort die Quelle der Website frei gibt, wird es Ihnen eine Idee über verwendete Widgets und Applikationen geben, nach denen Sie suchen könnten.

An dieser Stelle ist es gut zu wissen, dass alle Widgets in Form eines HTML Codes in Webnodes Websites eingebaut werden.

Mit einem Klick hinter die Kulissen

Jeder der eine Website in einem Browser öffnet kann den Quellcode dieser einsehen. Der Code wird als HTML-Skript angezeigt.

Das sogenannte Frontend einer Website beschreibt das was Sie sehen. Es ist in dem Quellcode definiert und beinhaltet den Stil und das Layout von Website-Elementen, wie Text und Bilder und dessen Anordnungen.

Im Firefox oder Chrome Browsern können Sie den Code mit einem Rechtsklick auf dem Bildschirm einsehen. Gehen Sie beim Klicken auf “Element prüfen” (auf English inspect). Alternativ können Sie ebenso diese Tastenkombinationen verwenden:

  • CTRL+Shift+I für den PC

oder

  • CMD+Shift+I für den Macintosh
Beispiel, um den Quellcode einer Website im Developer Tools Fenster anzeigen zu lassen

Beispiel, um den Quellcode einer Website im Developer Tools Fenster anzeigen zu lassen

Ein neues Fenster wird sich öffnen. Hier werden die meisten von uns erstmal wie das Schwein vorm Uhrwerk unter all den farbigen Hieroglyphen von Code nicht viel erkennen.

Orientieren Sie sich an die obere linke Zeile des neuen Fensters. Sie sehen dort einige Tabs und rechts ein “x”, um das kryptische Fenster wieder zu schließen.

Sollte sich jetzt alles etwas verschwommen anfühlen, lassen Sie sich nicht unterkriegen. Konzentrieren Sie sich einfach auf die Reiter im Menü. Je nachdem welchen Browser Sie verwenden, haben genau diese Tabs unterschiedliche Namen. Der Source Tab wird den Hersteller des Website Baukastens enthüllen.

Es wird jetzt ein bisschen so, als wären Sie ein Ermittler, der Fingerabdrücke an einem Tatort zurückverfolgen will. Quelle ist nicht gleich Quelle. Sie werden von Browser zu Browser unterschiedlich preisgegeben.

Die folgenden Abschnitte werden Ihnen an drei Browserbeispielen deutlich machen, wie Sie die Quelle finden.

Google Chrome

Sobald Sie Ihre Lieblingswebsite im Chrome Browser öffnen und mit dem Rechtsklick auf “inspect” gehen, halten Sie Ihre Augen oben auf das sich neu öffnende Fenster. Gehen Sie auf den Source Tab. Öffnen Sie den oberen Ordner links, wo sich die Unterordner mit den Wolkensymbolen befinden.

Beispiel anhand des Google Chrome Browsers

Beispiel anhand des Google Chrome Browsers

Sie finden den Websiteanbieter gewöhnlich unter den ersten 5 Wolken Symbolen. Abhängig von dem System sehen Sie den Anbieter im Namen eines bestimmten Ordners. Dies ist der Fall von Website, die mit WordPress erstellt wurden. Bei anderen Anbietern finden Sie diese unter den Daten die mit “cdn.” beginnen oder mit original domain.

Safari

Quellcode im Safari Browser

Quellcode im Safari Browser

Ähnlich wie beim Chrome Browser öffnen Sie den Quellcode mit der Tastenkombination:

  • CMD+Shift+I

oder Sie klicken oben mittig im Browserfenster auf den Develop Tab. Gehen Sie im sich öffnenden Fenster auf den Sources Reiter und suchen Sie nach dem Namen “generator”.

Unter website generating system finden Sie den Anbieter. Im Fall einer Webnode Website sehen Sie Webnode 2, welches sich auf den neueren Webnode Baukasten bezieht.

Firefox

Die Quelle des Web-Baukastens im Firefox zu finden ist etwas kniffeliger. Sie gelangen auf dieselbe Weise zum Quellcode, indem Sie auf “Element prüfen” (inspect element) klicken.

Quellcode im Firefox

Quellcode im Firefox

Der Source Tab im Firefox versteckt sich hinter dem Debugger und Style Editor Tab. Demnach haben Sie zwei Optionen die Informationen über den Provider zu finden.

Sie können im Style Editor Tab nach einem spezifischen Style Code oder lizenzierten Inhalten suchen, die für den Provider spezifisch sind. Im Falle der Webnode Website finden Sie dies unter Author.

Häufiger jedoch wird der Debugger Tab den Anbieter zeigen. Unter einer ähnlichen Struktur wie im Chrome Browser finden Sie in einem Drop-Down Menü links unter dem Main Thread Folder. Hier steht der Name des Websitebuilder unter Abkürzungen wie a., asset. oder res. Einige Baukästen können allein durch den Ordnernamen eindeutig sein, wie zum Beispiel bei WordPress. Der Ordnername beginnt dann mit den Buchstaben “wp-“.

Es ist nicht immer glasklar, aber je mehr Sie Detektiv spielen, je einfacher wird es den Provider zu erkennen. Seien Sie nicht frustriert, wenn Sie die Quelle nicht ausmachen können. Manchmal ist die Information zu verschlüsselt. Anstelle dessen, können Sie die neuen ermittlerischen Fähigkeiten dazu nutzen aus den Hieroglyphen des Codes weiteres interessantes herauszukitzeln.

Wie soll der Kram nützlich sein?

Herauszubekommenmit welchem Website Baukasten eine Site erstellt wurde wird:

  • Ihre Neugierde befriedigen
  • Ihnen dabei helfen den für Sie besten Website-Builder zu wählen
  • Informationen zu verwendeten Widgets liefern
  • es möglich machen unterschiedliche Stile und Layouts zu vergleichen
  • Informationen zu der Website-Funktionalität geben
  • Ihnen vielleicht Inspirationen geben selbst zu Coden

Ein Blick hinter die Website-Kulissen bringt noch einiges mehr. Sollten Sie bis hierher gelesen haben, sind Sie vom wissbegierigen Schlag. Sollten Sie sich also fragen:

Ist es rechtens den Code so für jeden sichtbar zu machen?

Das Frontend allein ist ohne das Backend nutzlos. Somit, besteht auch nicht die Gefahr das Urheberrechte genommen werden. Sollten Sie ein kreativer Hobby-Developer sein, bringt der Code Ihnen Ideen. Und als kreativer Kopf suchen Sie doch eher nach Inspiration, als dass Sie Dinge einfach kopieren, nicht wahr?

Wofür ist das Ganze noch gut?

Die Tabs, die unter den Developer Tools im Browser zu sehen sind, sind sinnvoll, wenn Sie mehr über Website-Inhalte wie Widgets erfahren möchten. Der kleine Zeiger ganz links lässt Sie alle Elemente der Website (Text, Bilder, Hintergründe) auswählen und dazugehörigen Code anzeigen. Sie können hier Details, wie verwendete Fonts und Farben herausfinden, indem Sie den Elements Tab öffnen.

  • Der Cookies Tab listet die Cookies auf, welche die Website gerade verwendet.
  • Der Security Tab zeigt Ihnen zum Beispiel das Sicherheitszertifikat (SSL -Zertifikat) der Website.
  • Nutzen Sie die Developer Tools, um herauszubekommen welches Design und Stil-Details verhüllt werden.

Sie kennen nun alle Tricks, um herauszufinden mit welchem Website-Builder eine Website erstellt wurde und können sich als Website-Detektiv und Fachmann behaupten.

Sie fragen sich, was ein Homepage-Baukasten ist und wie er verwendet wird? Wir haben eine detaillierte Anleitung für Sie.