Was man alles aus einer Seite herauslesen kann: Quellcodeanalyse (Teil I)

Gastartikel von Bernd Klüppelberg

afoma_krimi_4Beim Gassi gehen am Strand von Cuxhafen blieb Rex plötzlich stehen und drehte den Kopf zur Meeresseite. Die Flut war gerade am ablaufen, doch Rex hatte in einem Priel ca. 500m entfernt einen nassen Körper gesehen. Mit einem lauten Jaulen, sprang der Schäferhund  auf den Körper zu. Sogleich hatte Rex neben dem Kopf einen Arm gefunden, an dem er einen pudelnassen Körper aus dem Wasser zog. Fast völlig verschlammt ließ Rex von dem ebenso mit Schlamm überzogenen Körper ab, setzte sich daneben und winselte leise. Dann stupste Rex den Körper mit seiner Schnauze fast liebevoll an. Das auffällige an diesem Körper, es war ein Mann,  er nannte rotes Haar sein Eigen und er hatte eine Sonnenbrille etwas schräg um die Augen hängen……

Im Meetingraum angekommen, setzte sich Rex gleich neben Horatio und legte erwartungsvoll beide Pfoten auf den Tisch und seine Schnauze zwischen die Pfoten. Das erste Top der Tagesordnung war der Quelltext von Internetseiten, und was man hierbei herauslesen könnte. Dazu hatte man sich einen beliebigen Word-Press-Blog vorgenommen.

Quelltext (Source)

Sie sehen einen schönes Theme innerhalb eines Blogs. Der Verfasser der Seite hat aber im Footer keinerlei Hinweis auf das Theme hinterlassen. Was tun? Sie wollen wissen, was er hier für ein Theme benutzt!

Jeder Browser – den ich kenne – hat eine sog. Quelltextanzeige. Der eine kann diesen Quelltext nur über eine Menüauswahl anzeigen, bei anderen – wie Firefox – geht die Anzeige über <strg>U! Schauen Sie sich den Quelltext einfach mal an. Nehmen Sie einen Blog Ihres Vertrauens! Keine Angst, Sie begehen keinen Copyright-Verstoß, Sie schauen ja nur!

Die Schnauze von Rex bewegte sich leicht hin und her! Der Rex-Übersetzter meinte zum Vortragenden und zu Horatio „Hat Rex nicht verstanden, genauer“! Horatio bekam einen leicht roten Kopf, denn er hatte es auch nicht verstanden, wollte aber sich keine Blöße geben.

Was ist der Quelltext oder die Source einer Seite?

Quelltext einer Seite

Wie man sieht, sind in der Anzeige HTML-Statements (Anweisungen) zu sehen. Das sind die Anweisungen, die Ihr Browser bekommt um die Seite anzuzeigen.  Auch ohne HTML-Kenntnisse erkennt man bei Blogs hier z.B. gleich oben sog. Header-Link-Anweisungen mit <link…. />!

Hier stehen nun die interessanten Dinge! Gehen Sie bitte in den Quelltext der folgenden Seite:

http://blog.technik.berechtigung.sybeklue.de/

So finden Sie z.B. in der Link-Anweisung:

<link rel=“stylesheet“ …..href=“…../wp-content/themes/digg-3-col/style.css“…. />

Was sagt uns das als Blogger? Das Verzeichnis /wp-content/ das kennen wir! Auch das Unterverzeichnis /themes/. Danach folgt der Name des im WordPress verwendeten Themes. Hier ist es digg-3-col. Also ist das das Theme und Sie können sich bei WordPress das Theme genauer anschauen und ggf. herunterladen.

Wenn Sie nach Themes in einem Blog schauen, ist es das Sicherste hier nach dem <link….- vom Typ stylesheet zu schauen.

Hier könnte auch ein <link-Statement auf /themes/headway/style.css stehen, dann wüssten Sie, es geht um das kostenpflichtige Headway-Theme. [Schauen Sie sich den Quelltext auf der folgenden Seite http://marketer.blog.sybeklue.de/ an]

„Ah, headway an American theme, we have it in US“ meinte Horatio! Rex legte die Ohren an und prustete leicht durch die Nase, was so viel hieß wie „Das haben wir in Germany auch, Ätsch!“.

Andere Seiten, die gar keinen Blog enthalten, haben meist auch einen <link-Eintrag auf eine *.css Datei, da aber /wp-content/themes/ fehlt, können Sie davon ausgehen, dass es sich nicht um eine WordPress Blog-Seite handelt:

…..“c_DP/includes/stylesheet_css“ type=“text/css“ />

(Siehe z.B. Quelltext der Seite http://www.divers-point.de/]

Auf dieser Seite wird ein Stylesheet eingebaut, das nicht zu einem WP-Blog gehört. Trotzdem ist es ggf. ganz wertvoll, sich diese css-Datei ein wenig genauer anzuschauen:
Also klicken Sie – wenn Sie den Firefox benutzen – einfach auf den Link und Sie können sich das css-stylesheet anschauen.  [Achtung: Andere Browser können das nicht, da muss man die Adresse eingeben; Mit Rechtsklick und Menü „Zurück“ kommen Sie beim Firefox wieder auf die Ausgangsseite!]

Sie haben Schwierigkeiten hier die Ausdrücke Stylesheet, themes etc. zu verstehen, dann kann ich Sie nur auf meinen Blog einladen, um sich das nötige Grundwissen über css, html etc. anzueignen, denn es würde den Rahmen hier sprengen, auf all das einzugehen.
Im Blog ist auch eine Artikelserie von 2010, die Sie in die HTML-Sprache einführt. Sie ist für Beginners geschrieben und behandelt HTML von Anfang an (eigentlich ist das ein Kurs).  Ein Mr. Browser und ein Mr. Server geleitet Sie  in die Technik, wie eine Seite angezeigt wird und was der Browser vom Server erwartet.
Wie gesagt, HTML ist keine Programmiersprache, man kann sie eher mit einer Anweisungsrichtlinie an ein Programm betrachten, wie das Programm Texte auf dem Bildschirm darstellen soll. HTML ist völlig statisch. Wer meint, mit HTML könne man alles im Internet kapieren, der hat HTML falsch verstanden. Im Hintergrund (auf dem Server) liegen meist  Programme, die einen Text in HTML ausgeben, damit jeder Browser auf der Welt den Text im gewünschten Aussehen darstellen kann. Das sind aber Programmiersprachen die Texte variabel erstellen und Logik enthalten.  Wer also HTML lernen will, kann sich meinen Kurs anschauen, er ist nur relativ teuer: 0 EUR . Wer lieber Bücher lesen will, es gibt auch eine Literaturliste.

Anzeige

Expert Branding Club

Lernen mit Quellcode

Man kann mit dem Lesen des Quellcodes auch lernen:  „Wie wurde das gemacht“ . Hier eine schöne Tabelle, da ein schöne Textaufteilung. Warum sollte man sich solche Dinge nicht zu eigen machen?

Allein das Studium der CSS-Dateien und der Seitenprogrammierung haben schon vielen ein Aha-Erlebnis beschert.  Ok, Sie dürfen dieses Coding als Anregung nehmen, wie man was macht! Sie sollten es aber aus Rücksicht gegenüber dem Programmierer nicht 1:1 übernehmen, da könnten Sie Schwierigkeiten bekommen. Doch am Lernen kann Sie niemand hindern. Denn genau wie das HTML-Coding des Textes ist die CSS-Datei von jedem einsehbar. Man kann also erkennen, ob es eine 1:1 Kopie eines anderen CSS ist.

Die linke Hand Horatios griff nach der Sonnenbrille. Er hob sie leicht von der Nase, um sie sogleich wieder Millimeter genau vor seinem Augen zu justieren. Rex fiel diese Bewegung auch auf;  da er Horatios Körpersprache kannte, schnaubte Rex leicht mit einem ganz leichten pfiepsen, was so viel hieß wie: „Horatio langweilt sich, wann geht es weiter“.

„We in die US haben auch Gesetz, was tut verbieten Raub von – how you say – geistig Eigentum“, versuchte sich Horatio in deutsch. „but es ist nicht so großes Verbrechen, as in Germany. In deinem Land hier – wie sagen in deutsch  – sogar Minister müssen nehmen ihren Hut!“

Rex hob seine Schnauze leicht an, was eine Bejahen ausdrücken sollte.

Formularprüfung:

Sie probieren eine fremde Seite aus und Ihnen fällt auf, dass Sie nach dem Absenden des Formulars Fehlermeldungen direkt auf dem Bildschirm als kleine Windows erhalten, die Ihnen sagen, „Bitte die Telefonnummer im Format xxx / xxxx-xxx angeben“. Wie wird das gemacht? Das wollen Sie auch haben, weil Ihre Kunden immer die Telefonnummer für Sie falsch auf Ihrem Formular angeben!

Nun schauen Sie sich doch das Formular auf der Seite im Quelltext an.
Ein Formular beginnt mit dem HTML-Tag <form und endet mit </form>. Innerhalb dieser beiden Tags wird das Formular definiert. Mit <input können die Formularfelder auf den Bildschirm gebracht werden, sog. Radiobuttons oder Textfelder definiert werden. Um das Formular an den Server zu übertragen,  gibt es ebenfalls ein <input-Tag mit type=“submit“-Attribut.  (genaueres: http://marketer.blog.sybeklue.de/serie_html-verstehen/html-verstehen-teil-9-das-formular-i/)

Nun kann man mit einer Sprache genannt JavaScript direkt vom Browser das Formular prüfen und sogar ergänzen. Sie haben sich wahrscheinlich schon mal gewundert, dass es Formulare gibt, die Worte, die sie beginnen zu schreiben, ergänzen.  Auch das wird mit JavaScript gemacht.

Beispiel:
Sie sehen im <form-Tag oder im <input type=“submit“ bestimmt eine Anweisung onclick=…. oder onsubmit=“…“ ! Hier wird auf ein JavaScript verzweigt, das das Formular bevor es an den Hintergrund übertragen wird, auf Vollständigkeit prüft. Dieses JavaScript steht nun offen im Quelltext beginnend mit <script…> </script> oder über einen <link auf eine .js-Datei!
Das JavaScript können Sie sich anschauen und daraus lernen, wie sie Ihr Formular überprüfen können, bevor sie es an das Hintergrundprogramm übergeben.

JavaScript ist nun aber schon eine schon ausgereifte Programmiersprache. Hier müssen Sie richtig programmieren können.

Horatio unterbrach: „Oh yes, this fu..ing JavaScript, I remember..!“ Er erzählte, als er mit dem Internet begann, wollte er ein Passwort als Zugang zu seiner Seite programmieren. Er definierte ein Formular mit einer Passwort-Eingabe und prüfte das Passwort in einem JavaScript auf Richitgkeit. Es funktionierte nach einer Weile. Er wollte die Seite Online stellen, doch davor gab er es einem damaligen Kollegen. Dieser kam in kürzester Zeit grinsend auf Horatio zu und meine „Stupid boy“. Er öffnete Horatios Seite und tippte das richtige Passwort ein.

Wieso? Nun JavaScript wird wie gesagt von Ihrem Browser ausgeführt. Das Quellprogramm kann man sich anschauen. Und dort musste Horatio die Prüfung auf das richtige Passwort machen, also stand da auch der Vergleich, ob das eingegebene Passwort gleich „horatio“ war. Da der Kollege dieses Coding sehen konnte, wusste er, wie das Passwort von Horatios Seite war.

„Waau, winsel“,  war Rex Antwort und er schaute seinen Freund Horatio verständnisvoll an. „Durch Fehler lernt man“ sollte das heißen.

Wie gesagt JavaScript ist schon eine Programmiersprache und diese muss man lernen. Es gibt unzählige Links und Bücher zu Javascript. Mit dieser Sprache lassen sich ganze Internetprotale steuern. Und man kann JavaScript so schreiben, dass es nicht gleich jedem offensichtlich ist, was man da programmiert hat. Die Sprache ist m.E. schwerer als z.B. die Serversprache PHP. Aber kleinere Dinge wie Formularüberprüfungen oder Vercodung von E-Mail-Adressen lassen sich leicht realisieren. Der Vorteil ist, ein Javascript wird innerhalb des HTML-Codes mit <script>…</script> eingegeben, so dass sich diese Möglichkeit auch in Ihrem Blog ergibt.

Im WordPress-Artikel, den Sie erstellen, können sie zu jeder Zeit in den Code des Artikels springen und erhalten die HTML Anzeige des Quelltextes. Somit steht es Ihnen offen, hier ein JavaScript einzubauen, das irgendwelche Berechnungen oder Auswertungen macht.

Wenn Sie z.B. in meinem Blog sind, dann gibt es da eine Reihe von Gratisprodukte zu erwerben. Das Angebot ist im Widget untergebracht und ändert sich jede Minute. Ich habe das aber nicht als JavaScript realisiert, sondern mit PHP,  d.h. nur wenn Sie die Seite erneuern z.B. mit <strg>R im Firefox oder IE,  dann bekommen Sie ein neues Angebot gezeigt.

Hätte ich das in JavaScript programmiert, hätte sich das Angebot jede Minute erneuert,  auch wenn Sie keine Seitenerneuerung gemacht hätten.  Sie sehen hier den Unterschied zwischen einer Browserprogrammierung und einer serverseitigen Programmierung. Da PHP auf dem Server läuft, kann das Angebot nur wechseln, wenn PHP im Hintergrund messen kann, ob eine Minute vorbei ist. Der Server bekommt aber nur Kontrolle, wenn Sie die Seite neu vom Server holen. Ein JavaScript, das ja auf dem Browser läuft, hätte nach genau einer Minute auf das nächste Angebot gewechselt.
Oft sehen sie auch Laufschriften an solchen Stellen, diese sind auch in JavaScript realisiert.

Aber Rex wollte Ihnen noch einen Rat geben:

Diese Spielereien sind ja ganz nett, aber sie können auch den Leser verwirren, deshalb setzen Sie diese Dinge nicht zu häufig ein. Der Leser wird von Ihrem Content abgelenkt und das sollte ja nicht passieren. Deshalb empfiehlt Rex Ihnen, sich für die PHP-Lösung zu entschieden. Denn dann überlassen Sie dem Leser die Kontrolle, wann sich auf der Seite etwas ändert und bevormunden ihn nicht! [Bemerkung: Hoffentlich habe ich das richtig übersetzt, denn die Aussprache von Rex ist einfach schlimm :O) ]

Nun ist Horatio also in good old Germany, hat in Rex einen Berater, Wissenden und Freund gefunden. Horatio will sich ja nach den für ihn sonderlichen Eigenschaften des deutschen Internets erkundigen……..

Viele Grüße bis zum nächsten Teil,

Horatio, Rex und Bernd

Bernd Klüppelberg

Mein Name ist Bernd Klüppelberg (64), und ich beschäftige mich neben anderem, seit einigen Jahren mit der Programmierung von Webanwendungen (zwar nicht hauptberuflich, aber doch mehr als nur Hobby). Mein erster Kontakt mit der EDV – wie man früher dazu sagte – begann 1973 noch mit Lochkarten auf einem Großrechner (Siemens 4004/151), der sage und schreibe 1MB Kernspeicher und 600MB Wechselplatten – Platz hatte.

Hinterlasse eine Antwort

Sichere dir jetzt unser kostenloses AFOMA-Starterkit und erfahre, wie du...

  • die perfekte Webseite aufbauen musst
  • täglich neue Besucher und Neukunden bekommst
  • dich als der Experte Nr. 1 über das Internet etablierst