Inhalt
- 01. Packen Sie die Struktur aus
- 02. Packen Sie den Code aus
- 03. Decken Sie den Stapel auf
- Versuch es selber
Der Versuch zu verstehen, wie eine Website erstellt wurde, ist oft eine entmutigende Aufgabe. Immerhin schauen Sie sich das Endprodukt an: die gebaute Version. Sie haben es mit verkleinertem und verkettetem Code zu tun, der je nach verwendetem Agenten oder Gerät dynamisch geladen wird. Dies ist nicht leicht zu verstehen.
Erstellen Sie Ihre eigene Website mit diesen brillanten WordPress-Tutorials
Darüber hinaus sind Sie mit Tausenden von (manchmal unnötigen) Codezeilen überladen, von denen einige vom Entwickler erstellt und andere automatisch generiert wurden. Dies macht das Leben schwierig, wenn Sie einen bestimmten technischen Aspekt der Website analysieren und daraus lernen möchten.
Ist es also möglich, eine Website zurückzuentwickeln? Und wenn ja, gibt es eine Möglichkeit, diesen Dissektionsprozess zu vereinfachen? Zum Glück lautet die Antwort auf die erste Frage: Ja. Was das zweite betrifft ... nun, hier kommt dieser Artikel ins Spiel.
Wir werden eine Website in die Hand nehmen und unter die Haube schauen, um zu verstehen, was passiert und welche Technologien verwendet werden.Die Idee hier ist nicht, den Code zu kopieren, sondern das Innenleben einer Site zu analysieren, damit Sie daraus lernen und hoffentlich ein besserer Entwickler werden können.
Für den Zweck dieses Artikels habe ich mich auf Foodsense konzentriert, da es sich um eine vergleichsweise einfache Website handelt. Sobald Sie die hier beschriebenen Tools und Techniken beherrschen, können Sie sie auf jede Art von Site anwenden, egal wie komplex sie ist.
01. Packen Sie die Struktur aus
Es ist verlockend, direkt in den Code zu springen, aber bevor wir dies tun, versuchen wir, die Gesamtstruktur der Website und ihr allgemeines Verhalten zu verstehen. Während dieses Vorgangs verwende ich häufig Chrome, da es viele nützliche Erweiterungen enthält.
Um die Struktur einer Site besser zu verstehen, empfehle ich eine Chrome-Erweiterung namens Instant Wireframe. Dies gibt Ihnen eine Röntgenansicht der Site und ist sehr nützlich, wenn Sie verstehen möchten, welche Arten von Reaktionstricks beim Ändern der Größe Ihres Browserfensters stattfinden.
Aber wir können mit dem Gerätemodus noch tiefer gehen. Öffnen Sie einfach DevTools und klicken Sie auf das kleine Symbol Gerätemodus umschalten. Dies zeigt Ihnen genau, wo sich die Haltepunkte befinden. Wenn Sie die Größe der Site mit diesem Tool ändern, können Sie bestätigen, dass die Haltepunkte bei ungefähr 475px, 775px, 975px und 1.175px liegen.
Natürlich überprüfen wir die Website nur über Chrome, das auf einem Desktop ausgeführt wird. Wie können wir überprüfen, ob es sich anders verhält, wenn wir es in einem anderen Browser oder auf einem anderen Gerät ausführen?
Auch hier kann Chrome Ihnen helfen: Rufen Sie einfach den Gerätemodus auf und wählen Sie ein bestimmtes Gerät aus dem Dropdown-Menü oben auf dem Bildschirm aus. Danach müssen Sie nur noch die Seite aktualisieren - versuchen Sie es mit Websites wie Twitter oder LinkedIn und Sie werden sehen, was ich meine. Mithilfe dieser Tools können Sie bestätigen, ob es sich um eine einfache reaktionsfähige Website handelt oder ob Sie etwas Komplexeres haben.
Wenn Sie die Größe einer Website ändern, können Sie auch viel über reaktionsschnelle Bilder lernen. Wenn Sie beispielsweise akqa.com/services besuchen und die Größe Ihres Browsers ändern, sehen Sie, wie die Bilder abhängig von den Haltepunkten der Site ausgetauscht werden.
02. Packen Sie den Code aus
Wir haben bereits viel gelernt, aber wir haben uns den Code noch nicht angesehen. Wenn Sie eine Seite lokal auf Ihrem Computer speichern, werden Sie feststellen, dass der CSS- und JavaScript-Code häufig komprimiert ist, was das Verständnis erschwert. Sie können Online-Tools wie Unminify verwenden, um die Minimierung aufzuheben.
Wenn Sie Sublime Text als Code-Editor verwenden, gibt es auch einige nette Plugins, die Ihnen helfen. Für CSS verwende ich CSS Unminifier und Minify, um CSS- und JavaScript-Code zu deaktivieren oder zu verschönern.
Bitte beachten Sie, dass bei vielen Websites die Quellen in einer einzigen Datei minimiert sind. Selbst wenn Sie den Code nicht mehr mindern, bleibt er in einer einzigen Datei vorhanden. Sie können versuchen, die verschiedenen Teile des Codes manuell zu trennen, oder Sie können das nächste Tool verwenden, um Ihnen zu helfen.
03. Decken Sie den Stapel auf
Was ist, wenn wir herausfinden müssen, mit welchem Stack eine Website erstellt wurde? Dafür gibt es eine sehr nützliche Chrome-Erweiterung namens Wappalyzer. Es wird eine Zusammenfassung der Technologien zurückgegeben, die zum Erstellen der Site verwendet wurden.
Ich weiß zum Beispiel, dass Foodsense jQuery 1.6.1, Google Analytics, Typekit-Schriftarten, Apache-Webserver, ExpressionEngine (CMS), das CodeIgniter-PHP-Framework und natürlich PHP selbst verwendet. Wappalyzer erzählt uns viel, aber nicht alles.
Das Auschecken der Registerkarte Quellen in Chrome DevTools bietet noch mehr Informationen. Beispielsweise verwendet Foodsense das jQuery Cycle-Plugin für das Hauptbildkarussell.
Ein weiteres Problem, mit dem Sie beim Betrachten des Quellcodes einer Webseite häufig konfrontiert sind, besteht darin, dass zu viel davon vorhanden ist, um es leicht zu verstehen. Beispielsweise verwenden viele Websites Frameworks wie Bootstrap, verwenden dann jedoch nur 10% des Framework-Codes.
Versuchen Sie zum Entfernen des nicht verwendeten Codes UnCSS oder die Chrome-Erweiterung CSS Entfernen und Kombinieren entfernen und kombinieren. Beide können unnötiges CSS löschen, sodass Sie leichter untersuchen können, welche Art von Stylesheet-Tricks auf eine bestimmte Seite angewendet werden.
Versuch es selber
Zu verstehen, wie eine Site funktioniert, ist sowohl eine Technik als auch eine Kunst. Wenn Sie eine Site analysieren, ist es immer besser, sich auf ein bestimmtes Element oder Widget zu konzentrieren und zu verstehen, wie es funktioniert, als zu versuchen, die gesamte Site auf einmal zu absorbieren.
Obwohl die in diesem Artikel behandelten Tools Ihnen auf dieser Reise helfen können, gibt es keinen wirklichen Ersatz dafür, sich die Hände schmutzig zu machen.
Wörter: Ricardo Quintas
Ricardo Quintas ist freiberuflicher Softwareentwickler. Dieser Artikel wurde ursprünglich im Netzmagazin veröffentlicht.
