Herausfinden mit welchem Programm eine Website erstellt wurde

Du hast einen stylischen Blog gelesen, oder eine spielerische Website bestaunt, die so feines selbstgebasteltes für deine Freunde/Freundinnen anbietet und fragst dich: Wie erstellt man so eine schöne Website?

Vielleicht schaust du auch einfach nach Anregungen, um deine eigene Site oder Online-Shop zu bauen? Oder hast ein großartiges Widget gefunden, welches du ebenfalls nutzen möchtest?

Du kannst das.

Alles was du tun musst ist herausfinden, welche Plattform die Website verwendet.

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

Wenn du die Anwendungen kennst, kannst du Stile und Layouts von Websites vergleichen. Weiterhin bekommst du einen Eindruck von der Funktionalität und der möglichen Integration von Widgets, die Website-Anbieter verwenden.

Es lohnt sich also, tiefer zu graben.

Wie aber nun die Quelle einer Website erkennen? Es ist einfacher als du denkst.

Den Quellcode einer Website finden

Viele Wege führen nach Rom. Einige sind direkt andere nicht so offensichtlich. Lass 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 du zum Beispiel bei Webnode ein Website Projekt erstellst, so ist die URL auf dem gratis Projekt dein Projekt Name plus der Webnode Domain, wie meinblog.webnode.page.

Solltest du 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

Wenn du also eine Subdomain siehst, kannst du dir 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.

Zusätzlich können Provider eine kleine Copyright Notiz in der Fußzeile angeben, welche auf den Website Baukasten 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 du über den Website Baukasten erfährst, indem du einfach bis ganz unten in der Fußzeile scrollst.

Nicht so offensichtliche Wege die Quelle herauszufinden

Sobald der/die Website Besitzer/-in einen bestimmten Premium Tarif zahlt und eine eigene Domain für die Site registriert hat, entdeckst du 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. Du gibst einfach die Web-Adresse bzw. Domain ein und der Scan- Bericht wird dir 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

Weitere nützliche Tricks

Du bist 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. Du lernst so besser von deinen 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 dir eine Idee über verwendete Widgets und Applikationen geben, nach denen du suchen könntest.

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 du siehst. 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 kannst du den Code mit einem Rechtsklick auf dem Bildschirm einsehen. Gehe hierbei auf “Element prüfen” (auf English inspect). Alternativ kannst du 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

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.

Orientiere dich an die obere linke Zeile des neuen Fensters. Du siehst dort einige Tabs und rechts ein “x”, um das kryptische Fenster wieder zu schließen.

Sollte sich jetzt alles etwas verschwommen anfühlen, lass dich nicht unterkriegen. Konzentriere dich einfach auf die Reiter im Menü. Je nachdem welchen Browser du verwendest, 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ärst du ein Ermittler, der Fingerabdrücke an einem Tatort zurückverfolgen will. Quelle ist nicht gleich Quelle. Du wirst von Browser zu Browser unterschiedlich preisgegeben.

Die folgenden Abschnitte wird dir an drei Browserbeispielen deutlich machen, wie du die Quelle findest.

Google Chrome

Sobald du deine Lieblingswebsite im Chrome Browser öffnen und mit dem Rechtsklick auf “inspect” gehst, hälst du deine Augen oben auf das sich neu öffnende Fenster gerichtet. Gehe nun auf den Source Tab. Öffne den oberen Ordner links, wo sich die Unterordner mit den Wolkensymbolen befinden.

Beispiel anhand des Google Chrome Browsers

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

Safari

Quellcode im Safari Browser

Ähnlich wie beim Chrome Browser öffnest du den Quellcode mit der Tastenkombination:

• CMD+Shift+I

oder klickst oben mittig im Browserfenster auf den Develop Tab. Geh im sich öffnenden Fenster auf den Sources Reiter und suche nach dem Namen “generator”.

Unter website generating system findest du den Anbieter. Im Fall einer Webnode Website siehst du Webnode 2, welches sich auf den neueren Webnode Baukasten bezieht.

Firefox

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

Quellcode im Firefox

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

Du kannst 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 findest du dies unter Author.

Häufiger jedoch wird der Debugger Tab den Anbieter zeigen. Unter einer ähnlichen Struktur wie im Chrome Browser findest du 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 du Detektiv/-in spielst, je einfacher wird es den Provider zu erkennen. Sei nicht frustriert, wenn du die Quelle nicht ausmachen kannst. Manchmal ist die Information zu verschlüsselt. Anstelle dessen, könntest du deine neuen ermittlerischen Fähigkeiten dazu nutzen aus den Hieroglyphen des Codes weiteres interessantes herauszukitzeln.

Wie soll der Kram nützlich sein?

Herauszubekommen mit welchem Website Baukasten eine Site erstellt wurde wird:

• deine Neugierde stillen.
• dir dabei helfen den für dich 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.
• dir vielleicht Inspirationen geben selbst zu Coden. 🤓

Ein Blick hinter die Website-Kulissen bringt noch einiges mehr. Solltest du bis gelesen haben, bist du von einem wissbegierigen Schlag. Du solltest dich 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. Solltest du ein kreativer Hobby-Developer sein, bringt der Code dir Ideen. Und als kreativer Kopf suchst du doch eher nach Inspiration, als dass du Dinge einfach kopierst, nicht wahr?

Wofür ist das Ganze noch gut?

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

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

Du kennst nun alle Tricks, um herauszufinden mit welchem Website-Builder eine Website erstellt wurde und kannst dich als Website-Detektiv/-in und Fachmann ehm, Fachfrau behaupten.

Solltest du dich für Webnode entscheiden, so kannst du deine Website kostenlos erstellen. Probier es aus!