Kategorien
Infrastruktur Server Shared Hosting Webdesign Webserver Wunschthema

Das Wunder der Erstellung einer Website

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
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
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
/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
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
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
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
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
meinesite.html

Wenn ich mein Browserfenster aktualisiere, taucht die Datei im Verzeichnis auf.

localhost mit meinesite.html
localhost mit meinesite.html

Wenn ich den Link klicke, interpretiert der Browser das HTML und stellt es als Überschrift dar.

Hallo Welt
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
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.

 

 

Kategorien
Webdesign Wunschthema

Eine One Page Website mit WordPress

In der letzten Zeit wurde ich mehrfach nach One Page Websites gefragt. Content Management Systeme wie WordPress funktionieren normalerweise so, dass man auf einen Menü-Link klickt und dann wird eine neue Seite aufgebaut. Bei One Page Websites ist es so, dass alle Inhalte auf einer Seite dargestellt werden. Nach einem Klick auf einen Menü-Link scrollt die Seite an die gewünschte Stelle. Das Scrollen sieht elegant aus und der komplette Seitenaufbau wird bei dieser Technik vermieden. Die eine Seite ist ja schon geladen. Der Besucher hat das (sachlich richtige) Gefühl, dass die Seite schnell reagiert. Es gibt aber einen wichtigen Unterschied zwischen One Page Websites, nach denen ich gefragt wurde und Single Page Webanwendungen. Bei einer Single Page Webanwendung werden die Inhalte auf genau einer Seite dynamisch nachgeladen, beispielsweise bei Google Maps. One Page Websites dagegen haben die oben beschriebene Funktionalität, eine gewisse Dynamik (weniger Dynamik als Single Page Anwendungen) und können durchaus weitere Einzelseiten haben, beispielsweise ein Blog, einen Shop und andere Erweiterungen. Das Wort One Page bezieht dabei sich meistens nur auf die Startseite.

Kategorien
Infrastruktur

Gibt es alternative Suchmaschinen?

Der Elefant im Raum heißt Google. Google hilft bei der Suche. So sehr, dass das Verb „googeln“ seit etwa 15 Jahren in den allgemeinen Sprachgebrauch aufgenommen wurde. Im Zusammenhang mit der Suche im Internet hat es das Wort „suchen“ zunächst ergänzt, mittlerweile fast ersetzt. Google hatte 2017 in der Schweiz einen Marktanteil von sage und schreibe 93.38 %. In Deutschland sind es unglaubliche 94.52, in Österreich 94.21. Diese Prozentwerte umfassen alle Suchanfragen auf allen Endgeräten. Wenn man sich mobile Endgeräte ansieht, liegt der Anteil von Google jeweils bei etwa 97% und damit noch höher. Wenn man mit seinem Google Konto eingeloggt ist, werden je nach Einstellungen die eigenen Suchanfragen gespeichert. Dabei werden standardmäßig die Services Android, Anzeigen, Bildersuche, Books, Chrome, Developers, Google Play Store, Hilfe, Maps, News, Shopping, Suche, Videosuche und YouTube ausgewertet.

Kategorien
Soziale Netze

Vero – Das soziale Influencer Netzwerk?

Soziale Netzwerke funktionieren ja am besten, wenn alle mitmachen. Dann kann man theoretisch jeden erreichen und „sozial sein“.
Neue soziale Netzwerke leiden anfangs daran, dass es bereits grosse und etablierte Konkurrenten wie Facebook, Instagram und Twitter gibt, bei denen die gewünschte Zielgruppe bereits angemeldet ist und „sozial interagiert“. Diese Nutzer gilt es dann für etwas Neues, am besten zu einem Umstieg, zu motivieren.

“In a world where you are what you post, Vero serves the needs and desires of people who want a safe, genuine reflection of their real-life relationships in an online setting. We have created a platform where users can express themselves in the most natural way possible,”

Ayman Hariri, CEO and Co-Founder of Vero.


Vero ist so ein „neues“ soziales Netzwerk, dass es sich zum Ziel gesetzt hat, soziale Beziehungen aus dem realen Leben in einer Online Umgebung so gut wie möglich abzubilden. Vero wurde 2013 gegründet und startete im Juli 2015. Seit ein paar Wochen entwickelte sich ein Hype um den Service und die Serverinfrastruktur brach unter dem Andrang neuer Benutzer zusammen.

Teile, beschütze und sammle, was du liebst ist die einfache Idee für Inhalte, die die Nutzer posten sollen. Es gibt sogar ein Manifest!

Nun behaupten die Konkurrenten ähnliche Dinge, doch Vero hat noch eine neue Idee.

Es gibt keinerlei Werbung und keine Algorithmen, die die Anzeige von Posts kontrollieren!

An dieser Stelle horcht man auf und fragt nach dem Geschäftsmodell von Vero. Auch das ist ganz einfach: Als Nutzer muss man für die Teilnahme bezahlen! An so einem Modell sind bereits andere gescheitert, also hat Vero auch hier eine Idee. Die erste Million Benutzer darf das Netzwerk ein Leben lang kostenlos benutzen. Seit dem 1. März 2018 ist die Millionengrenze erreicht, bis auf weiteres gilt die Regel des lebenslangen kostenlosen Services für alle weiteren Anmeldungen. Unter welchen Bedingungen man nach dieser Einführungsphase am Netzwerk teilnehmen kann, wurde bisher nicht kommuniziert.

Wie funktioniert Vero?

Du lädst die Vero App auf dein Telefon (iOS und Android) und gibst deine E-Mail Adresse und Telefonnummer an. Danach kannst du die App benutzen. Deine Kontakte teilst du in Privat, enge Freunde, Bekannte und Follower auf. Jeder Post kann auf die gewünschte Gruppe beschränkt werden. So grundsätzlich kannst du Fotos, Links, Musik, Filme, Bücher und Orte mit einem Beschreibungstext posten.

Inhaltstypen
Inhaltstypen

Posts können kommentiert und geliked werden. Alles sieht sehr schön aus und die Benutzung macht Spaß.
Wenn du Musik und Bücher postest, wird unter iOS ein Link auf den iTunes und den iBook Shop eingeblendet.

Vero - Musik Post
Vero – Musik Post

Vero erhält eine Provision, wenn deine Bekannten dieses Lied kaufen. Und hier wird es interessant, weil Vero die „klassische“ Werbung vermeidet aber Influencer Werbung über Empfehlungen nutzt. Jeder ist ein Vero, ein Influencer („In a world where you are what you post, …“). 

Deine Timeline ist zunächst chronologisch sortiert, wobei das Neueste oben steht. Im Punkt Collections kannst du dir die Posts der unterschiedlichen Inhaltstypen in einer sehr Liste anzeigen lassen. Dabei kannst du wählen, ob es eine chronologische oder eine alphabetische Sortierung sein sein. Hier ein Beispiel für Bücher.

Bücherliste
Bücherliste

Es gibt ein einfaches Chatprogramm

Vero Chat
Vero Chat

Und … man kann Dinge kaufen … ganz einfach! Im Suchbereich der App gibt es die am meisten benutzten Hashtags, Produkte und Featured Users.

In addition to individual subscriptions, we charge a transaction fee to merchants when they sell via our „Buy Now“ feature that allows creators and brands to sell products directly from posts.

Products
Products

Durch diese Integration erscheint mir die App als ein Beispiel für Influencer Marketing. Jeder Benutzer ist ein Influencer und durch die Empfehlungen verdient Vero Geld. Vielleicht ist es ja gar nicht notwendig Gebühren für die Benutzung zu nehmen 🙂


tl:dr: Ein neues soziales Netzwerk wird durch das virtuelle Dorf getrieben – Vero – und es sieht gut aus 🙂