Im Zeitalter von Page Buildern, Cloud Services, Social Medial Portalen, eCommerce und dem Internet of Things wird es Zeit mal wieder an die Basics des WWW zu erinnern.
Stand der Dinge im Web ist bis heute folgender:
Ein Besucher mit einem Browser (Mobil oder Desktop) greift auf eine Website über einem Domainnamen zu. Das kann per Klick auf einen Link in einer E-Mail, einem Tweet, einem Facebook Post oder auch über das Eintippen des Domainnamens im Browser passieren. Der Domainname ist mit einer IP-Adresse verbunden. Hier im Blog ist die Domain blog.novatrend.ch und die IP Adresse 193.33.128.50. Die Kommunikation vom Browser zu dieser IP Adresse läuft über das HTTP Protokoll. Anfragen an die gewünschte IP Adresse beantwortet ein Web Server. Dieser Web Server liefert Dateien (HTML, Grafiken, CSS, JavaScipt) an den Browser des Besuchers. Der Browser interpretiert die an ihn gesendeten Daten und macht daraus eine Website.
An dieser grundsätzlichen Kommunikation und Vorgehensweise hat sich bis heute wenig verändert. Es gibt zahlreiche unterschiedliche Konzepte, wie die Daten, die der Server sendet, effektiv interpretiert werden können, aber prinzipiell sind die Zusammenhänge sehr einfach.
Jeder Computer, der mit dem Internet verbunden ist, kann Client und Server sein. Den Computer, auf dem ich diesen Text schreibe, nutze ich gerade als Client. Ich habe ein offenes Browserfenster und schreibe diesen Artikel im WordPress Editor des Novatrend Blogs. Das WordPress liegt auf einem Webhosting bei Novatrend. Wenn ich auf den Veröffentlichen Button klicke, werden die Daten von meinem Computer auf den Server bei Novatrend übertragen und du kannst darauf zugreifen. Das passiert am Montag, den 26.3.2018 um 8:00 Uhr.
Mein Computer könnte allerdings auch ein Web Server sein und andere mit dem Internet verbundene Computer könnten darauf zugreifen. Mein Computer ist allerdings ein Laptop und nicht immer am Internet und somit wäre es nicht besonders klug, eine Website rund um die Uhr darauf zu betreiben. Prinzipiell würde es aber gehen. Und nun sind wir beim eigentlichen Thema, dem "Wunder der Erstellung einer Website :)".
Um eine Website unter realistischen Bedingungen auf deinem Computer zu erstellen, musst du ihn gleichzeitig zu einem Client und zu einem Web Server machen. Client ist er ja schon weil er einen Browser hat. Web Server ist er aber leider nicht, weil Betriebssysteme wie Windows und macOS keinen Web Server im Lieferumfang haben.
Um diese Funktionalität nachzurüsten gibt sehr viele Möglichkeiten. Die pragmatischste Lösung ist vermutlich XAMP für Windows und MAMP für macOS. Die Buchstaben MAMP standen ursprünglich für die Worte Mac, Apache Webserver, MySQL Datenbank und PHP. Das X in XAMP stand für Windows, Linux und Mac, also ein Platzhalter für beliebige Systeme. In der Realität hat sich allerdings XAMP für Windows durchgesetzt und MAMP im macOS Bereich. Linux Benutzer installieren die benötigten Programme meist separat mit ihrem Paketmanager.
MAMP
Da ich mit einem Mac arbeite, nehme ich als Beispiel hier MAMP. Es gibt eine freie und eine kostenpflichtige Version. Die kostenpflichtige hat viele Kleinigkeiten, die einem das Leben erleichtern. Um eine Website zu erstellen, reicht die freie Version allerdings mehr als aus.
MAMP
Nach dem Download von mamp.info muss MAMP lokal installiert werden. Nach dem ersten Aufruf der App sieht man eine sehr einfache Oberfläche um die Server (Web Server und Datenbank Server) zu starten. Wie das heute so üblich ist, gibt es natürlich auch eine kostenpflichtige Cloud Funktion, auf die ich aber nicht eingehen möchte.
MAMP
Bevor ich nun die Server starte, kurz ein paar Anmerkungen. So eine Website besteht aus vielen Dateien und es ist sinnvoll, von Anfang an "Ordnung" zu halten. Ordnung in dem Sinne, dass ich die Dateien meiner Website auf meiner lokalen Festplatte wiederfinde. Ich sammle beispielsweise alle meine Projekte in einem /dev Ordner. Die einzelnen Websites sind dann in entsprechenden Unterordnern.
/dev Verzeichnis (noch ohne beispiel Ordner :) )
Wenn ein neues Projekt dazukommt, erstelle ich mir einen neuen Ordner und nenne ihn meistens nach der Domain oder dem Projektnamen. In diesem Fall nenne ich ihn beispiel. Ich lege im novatrend Ordner also den Ordner beispiel an und muss dem MAMP sagen, dass in genau diesem Ordner, dem sogenannten Document Root des Web Servers, meine neue Website liegen wird.
Document Root festlegen
Standardmäßig läuft bei MAMP der Web Server Apache auf dem "Port" 8888. Ich stelle das bei mir um auf den Standardport 80 für den Webserver und 3306 für den Datenbankserver. Wir sehen gleich warum.
Standard Ports
Nachdem ich das getan habe, kann ich die Server in der MAMP App starten. Wenn alles grün leuchtet, öffnet MAMP automatisch ein Browserfenster und verzweigt auf die Startseite http://localhost/MAMP/ .
Server laufen
Auf der MAMP Startseite gibt es viele nützliche Dinge über MAMP zu lesen, ich will aber meine eigene Website bauen, also rufe ich http://localhost oder 127.0.0.1 auf. Im Browserfenster sehe ich das leere Inhaltsverzeichnis meines beispiel Ordners.
Wenn ich den Port nicht geändert hätte, hätte ich jetzt http://localhost:8888 oder 127.0.0.1:8888 aufrufen müssen.
localhost
Um eine Website zu sehen, müsste ich dort eine Datei erstellen, die HTML Code enthält. Das macht man mit einem Editor (oder auf der Kommandozeile, aber das ist vielleicht zu viel Technik :)). Ich benutze für einfache Dinge, wie das Bearbeiten von HTML-Dateien, ein kostenloses Programm aus dem App Store mit dem Namen Textwrangler, es gibt allerdings hunderte anderer Editoren. Ich erstelle eine Datei mit dem Namen meinesite.html im beispiel Verzeichnis und schreibe eine HTML Überschrift hinein (<h1>Hallo Welt</h1>).
meinesite.html
Wenn ich mein Browserfenster aktualisiere, taucht die Datei im Verzeichnis auf.
localhost mit meinesite.html
Wenn ich den Link klicke, interpretiert der Browser das HTML und stellt es als Überschrift dar.
Hallo Welt
Wenn ich will, dass diese Datei gleich aufgerufen wird, wenn ich http://localhost eingebe, muss ich sie index.html nennen. Wenn ich das mache, sehe ich allerdings kein Dateiverzeichnis mehr und in der URL steht auch nur noch localhost.
Der Bauplatz für die Website ist jetzt fertig.
Bevor du nun Content Management Systeme wie WordPress, Joomla, Drupal oder gar Typo3 installierst, solltest du dich ein wenig mit HTML, der Hypertext Markup Language, CSS, den Cascading Stylesheets und JS, der Programmiersprache JavaScript auseinandersetzen. Ein guter Startpunkt ist die Dokumentation über den h1 Tag auf selfhtml.
selfhtml.org
Wenn es dir so geht wie mir vor mehr als 20 Jahren, wirst du alles ausprobieren wollen und echt begeistert sein von den Möglichkeiten, die HTML bietet. Du wirst nie wieder "Zeit haben" und du wirst keine Website mehr so ansehen wie vorher :) . Auch wenn heute alles scheinbar viel schneller, einfacher und fluffiger von der Hand geht mit all den Webservices in der Cloud, im Ergebnis erzeugen sie alle HTML und es erleichtert das Verständnis von Websites ungemein, wenn man weiß, was man mit HTML, CSS und JavaScript alles anstellen kann.
Das was da jetzt auf meinem und vielleicht auch deinem Computer läuft ist gewissermaßen die Miniaturversion eines Webhosters. Wenn dein Computer nun rund um die Uhr am Netz hängen würde, eine von außen erreichbare IP-Adresse hätte, sicher gegen fiese Angriffe und dein Internetzugang schnell genug wäre um ein paar tausend Besuchern deine Website auszuliefern, dann wäre das jetzt deine Website, die du ganz allein, ohne etwas zu kaufen oder zu mieten mit Open Source Software und freien Standards erstellen kannst!
Da in diesem diesem Satz doch ziemlich oft das Wort "wäre" vorkommt, gibt es Firmen wie uns, bei denen du deine Website, wenn das einfacher für dich ist, betreibst. Erstellen kannst du sie aber ganz allein auf deinem Computer!
Fazit
Es ist hilfreich sich selbst eine Website zu erstellen. Die Basics des World Wide Web gelten für alle Teilnehmer und sind nach wie vor erstaunlich einfach und logisch.
tl;dr: Bau dir einfach eine Website auf deinem Computer.
Posted from my blog with SteemPress : https://blog.novatrend.ch/2018/03/26/das-wunder-der-erstellung-einer-website/