Ein Tauchgang in die Tiefen des WWW
Heute will ich einen Tauchgang, einen Abstieg in die Tiefenstrukturen des World Wide Web, kurz „Das Web“ oder WWW genannt, versuchen.
Eine Metapher
Tauchen ist eine Metapher, die ich gerne verwende, um immer tiefer, bis in feinste Details, vorzustoßen. Um verborgene Details zu entdecken, sie zu studieren, sie zu verstehen, sie in größere Zusammenhänge zu bringen, um dann letztlich mit ihnen arbeiten zu können.
Im Blogbeitrag Tiefenstrukturen digitaler Bilder habe ich die Methode am Beispiel von digital bearbeiteten Tiefenstruktur-Bildern gezeigt.
Das World Wide Web
Das WWW ist die bisher wohl zugkräftigste Anwendung des Internet, mit vielen Millionen Webseiten und unzähligen Dokumenten, auf die zugegriffen werden kann. Über die wenigen Jahrzehnte seit seiner Begründung im Jahre 1990 ist es zu einem unverzichtbaren Präsentations-, Kommunikations- und Auskunftsmedium für Milliarden Menschen rund um den Globus geworden. Sie alle nutzen das WEB für ihre Social Media Kommunikation, für online-shoppen, als Spieleplattform (die ersten Pokemon Go-Spieler sind im Freistädter Stadtgrabenpark nach der langen Winterpause bereits wieder mit ihren Smartphones unterwegs auf der Jagd nach den Pokemons!), als Such- und Nachschlagewerk, für Streamingdienste usw..
Der Web-Browser
Normalerweise bewegen wir uns nur an der Benutzer-Oberfläche desjenigen Gerätes, das uns den Zugang ins Internet ermöglicht. Nach dem Einschalten meines Computers, sei es der PC, der Laptop, das Notebook, das Tablet, das Smartphone, erscheint am aufleuchtenden Bildschirm bzw.Display die Windows- oder OS X-Seite: das installierte Betriebssystem meldet sich. Auf dem Bildschirm findet man die Browser-Symbole, z.B. die blaue Weltkugel des Mozilla Firefox-Browsers mit dem roten Fuchs, oder das blaue e mit dem gelben Reifen des Internet Explorers bzw. seines Nachfolgers MS Edge,… je nachdem, welche Browser wir installiert haben. Und dann geht´s los mit „Suchbegriff eingeben“ etc… Du kennst das und hast es vermutlich schon xmal gemacht.
Unter die Oberfläche des Webbrowsers tauchen.
Mich interessiert nun, wie und warum das alles so einfach und komfortabel funktioniert. Was spielt sich im Untergrund, im Hintergrund, unter der Oberfläche einer Recherche mittels des Browsers ab? Mit einem Klick auf einen Button oder mit einer gesprochenen Frage ins Smartphone löse ich die Suche aus und erhalte sogleich als Antwort eine oder mehrere Dokumententitel am Bildschirm, die ich per Klick aufrufen und öffnen kann. Dann steht das gesuchte Dokument sauber, in perfekter Ausführung,formvollendet vor mir. So wie es der Autor des Dokumentes programmiert und ins Netz gestellt hat!
Was machen da mein Computer und der Browser? Was macht das Internet, mit dem er verbunden ist, was macht das WWW, mit dem der Browser interagiert? Was macht dieses ganze komplexe System,damit alles so perfekt und in Sekundenschnelle funktioniert?
[Nun, was die physischen Komponenten wie Computer und materielle Netzwerkelemente betrifft, das will ich ein Andermal recherchieren. Auch was das Internet selbst, dieses omnipräsente Netz der Netze betrifft: ein Andermal.]
Digital Tauchen im WWW.
Diesmal will ich etwas tiefer hinabtauchen ins WWW: in den Bereich der Software, in die Programmierung eines Dokumentes.
Der erste Tauchgang:zu den Technologien des WWW
Wenn ich mich in einer ersten Tiefenschicht des WWW umsehe, bemerke ich, dass das WEB auf einigen wichtigen Technologieblöcken beruht:
Auf den Dokument-Adressen,den URIs/URLs, die jedes Dokument weltweit einzigartig kenntlich und auffindbar machen. Beispiel: http://www.antoniazimmermann.at
Auf den Programmiersprachen SGML, HTML und XML, die die Struktur eines Dokumentes so bestimmen, damit jeder Computer, egal ob als Client oder Server,diese Struktur eines Dokumentes versteht, interpretieren und bearbeiten kann.
Auf den Cascading Style Sheets, den CSS, die das typographische Layout eines Dokumentes festzulegen helfen.
Aus der Verlinkung von Dokumenten untereinander mittels der Hyperlinks.
Aus dem für den Transport von Nachrichten und Dokumenten zuständigen Internetprotokoll HTTP.
Aus den vielen Web-Programmen, die für die verschiedenen Web-Dienste notwendig sind.
Der zweite Tauchgang: zur HTML
Im Sinne eines selektiven Tauchganges in die Tiefenschichten des WWW entscheide ich mich, heute die Web-Komponente HTML, die Hypertext Markup Language, näher zu betrachten. Diese standardisierte Programmsprache gibt vor, wie die Struktur eines internetkonformen Textdokumentes auszusehen hat, damit es von beliebigen Computern interpretiert, gelesen und weiterverarbeitet werden kann. Weltweit. Herstellerunabhängig. Geräteunabhängig.
Die von HTLM geförderte Struktur für ein Webdokument besteht erstens aus der Angabe der HTML-Version, aktuell HTML5. Es sollen ja auch Dokumente, die mit älteren Versionen erstellt wurden, reibungslos verarbeitet werden können.Daher muß dem Browser mitgeteilt werden, auf welche Version er sich einstellen muß. Zweitens aus dem HEADER, dem Dokumentenkopf. Und schließlich drittens aus dem eigentlichen Dokumenteninhalt, dem BODY.
Der dritte Tauchgang: zum Header
Jetzt will ich mich auf der dritten Tiefenebene beim Header umschauen. Was soll im Header stehen? Im Dokumentenheader gibt der Autor eines neuen Dokumentes dem WWW wichtige Meta-Informationen über sein Dokument: den Titel, den Namen des/der Autor/en, wichtige Schlüsselwörter, Beschreibungen/Abstracts, den URL/Uniform Ressource Locator, die Verbindungen/Links zu anderen Dokumenten. Diese Metainformationen benötigen auch die Suchmaschinen, um das Dokument zu indizieren, also bearbeiten, einordnen und wieder auffinden zu können. Obwohl mein Browser mit diesen Metainformationen arbeitet, zeigt er sie mir nicht am Bildschirm/Display. Er weiß: Ich bin ja nur am Dokument selbst, an seinem Inhalt interessiert.
[Allerdings: Falls ich den URL eines konkreten Dokumentes kenne und eingebe, erhalte ich das zugehörige Dokument sofort. Wenn ich aber eine Suchanfrage mit einem Stichwort eingebe, z.B. „Metainformationen“, gibt mir der Browser eine oft lange Liste mit möglichen Dokumenten, die dieses Stichwort enthalten, mit dem Titel der Dokumente und weiteren hilfreichen Informationen…]
Der vierte Tauchgang: zur Headerprogrammierung
Im nächsten Tauchgang sehe ich mir die verborgenen Header-Informationen näher an. Dazu muss ich mir die Programmierung des Headers mit HTML genauer ansehen. Im Kürzel HTLM steht das M für Markup, was soviel wie Signal/Auszeichnung/Hinweisschild heißt und den beteiligten Computern signalisiert, dass da ein Strukturelement kommt, z.B. der Titel, der Autor, der URL des Dokumentes. Was dann konkret mit dem Markup-Signal gemeint ist, steht nach dem Signal/Markupzeichen und heißt Tag, was soviel wie Etikett heißt. Im Falle des Headers sind es die Metatags.
Der fünfte Tauchgang: zu einer HTML-Programmzeile
Im vorläufig letzten Schritt ins Detail sehe ich mir die Schreibweise der HTML- Programmiersprache an.
Das Markup-Symbol: <….> , zwei liegende Pfeile
Das Tag: <titel> , das Etikett für ein konkretes Strukturelement namens Titel
Der Dokumententitel: <titel>….</titel>, steht zwischen Anfangstag und Endtag
Der Titel für diesen Blogbeitrag wird in HTML daher so geschrieben:
<titel> tauchgang in die tiefen des www </titel>
Und so sieht ein Ausschnitt aus dem HTML-Quellcode/Quelltext dieses Beitrags aus:
….>Und so sieht ein Ausschnitt aus dem <em><strong>HTML-Quellcode/Quelltext</strong></em> dieses Beitrags aus:</span></p><p> </p><p><span style=“font-size: 24pt;“><em><strong><span style=“font-family: terminal,monaco,monospace;“>Noch ein Tipp, wo Du,lieber Leser, mehr erfährst:<br> </span></strong></em></span></p><p><span style=“font-family: terminal,monaco,monospace; font-size: 18pt;“>Lieber Leser, der Du mir bis hierher gefolgt bist: für mehr Informationen empfehle ich Dir den <em><strong>gratis online-Kurs</strong></em> der <strong><em>Universität Potsdam/Hasso Platter Institut</em></strong>, unter dem URL <strong><em><a href=“https://open.hpi.de“ target=“_blank“>https://open.hpi.de</a><br> </em></strong></span></p><p><span style=“font-family: terminal,monaco,monospace; font-size: 18pt;“…
Noch ein Tipp, wo Du,lieber Leser, mehr erfährst:
Lieber Leser, der Du mir bis hierher gefolgt bist: für mehr Informationen empfehle ich Dir den gratis online-Kurs der Universität Potsdam/Hasso Platter Institut, unter dem URL https://open.hpi.de
Der Kurs WEB-Technologien 2017 wird bereits zum zweiten Mal angeboten und läuft jetzt gerade. Es genügt eine online-Anmeldung bei obiger Adresse mit Deinem Namen, Email-Adresse und Passwort und Du bist dabei!
Bis bald und bis zum nächsten Blogbeitrag!
Burkhard Zimmermann
PS:
Noch einige Links zum Thema Internet :
http://www.burkhardzimmermann.at/2017/03/24/kartographie-des-internet/
http://www.burkhardzimmermann.at/2017/03/15/digitaler-zwilling/
http://www.burkhardzimmermann.at/2017/02/13/antonia-zimmermann-designt-unsere-webseiten-selbst/
http://www.burkhardzimmermann.at/2017/01/31/digital-immigrant/