Bild Technik

technik

Hier wird es jetzt technisch. Sie brauchen das nicht zu lesen. Aber falls es Sie interessieren sollte, was wir technisch machen, dann finden Sie hier Antworten zu folgenden Themen: Websites und Webseiten, Programmiersprachen, Metasprachen & Tools, Frameworks & Plugins, Scriptsprachen, Responsive Design und Grid-Systeme, Content Management Systeme, statische versus dynamische Webseiten, Blogs und RSS-Feeds, Moderne Browser, Search Engine Optimization (SEO).

Websites und Webseiten

False friends — falsche Freunde nennt man Begriffe, die bei der Übersetzung gern verwechselt werden. Actual heißt übersetzt »tatsächlich« und nicht »aktuell«, to become heißt »werden« und nicht »bekommen«.

Genauso verhält es sich mit Websites. Websites sind »Web-Auftritte« und nicht »Webseiten«. »Webseiten« hingegen heißen im Englischen Webpages. Eine Website setzt sich in der Regel aus mehreren Webpages oder Webseiten zusammen.

Programmiersprachen

Webseiten verwenden ausschließlich drei Programmiersprachen:

  1. HTML für Struktur und Inhalte,
  2. CSS für die grafische Repräsentation,
  3. JavaScript (JS) für Strukturveränderungen, Effekte oder Funktionen, die nicht oder nur sehr mühsam mit CSS erreicht werden können.

Metasprachen & Tools

Die Entwicklung einer Webseite ist aufwändig. Deshalb gibt es eine Reihe von Metasprachen und Hilfsmitteln, die den Entwicklungsprozess erleichtern. Für die Entwicklung des HTML-Codes verwenden wir Pug. Zur Erzeugung des CSS-Codes setzen wirSass ein. Die Entwicklung von JavaScript geschieht am leichtesten mit jQuery. jQuery ist eine JavaScript-Bibliothek, die eine Reihe von sinnvollen Funktionen zur Verfügung stellt. Das Schreiben von jQuery oder JavaScript Code wird durch CoffeeScript vereinfacht.

Für das Schreiben der Inhalte benutzen wir Markdown. Um all diese Metasprachen während der Entwicklung zusammenzubringen und um die finale Webseite zu erzeugen, verwenden wir Gulp zusammen mit Metalsmith. Gulp ist ein sogenannter Task Runner, der immer wiederkehrende Aufgaben automatisiert. Metalsmith ist ein sogenannter Static Site Generator, mit dessen Hilfe eine Webseite aus vielen Einzelteilen zusammengesetzt werden kann. Die Entwicklung selbst führen wir auf Basis von node durch.

Die JavaScript-Welt und damit auch die Welt von Internetseiten und Webanwendungen verändert sich konstant und mit rasanter Geschwindigkeit. Besonders viel Spaß macht derzeit eine Furore machende Bibliothek namens React mit seinen Ergänzungen wie Redux oder Styled Components und den darauf aufbauenden Generatoren create-react-app, next.js und Gatsby.

Damit bei einer Webseiten-Entwicklung und bei Ihrem späteren Betrieb alles geordnet abläuft, ist es extrem wichtig, die einzelnen Entwicklungsschritte zu versionieren. Damit lassen sich Änderungen dokumentieren und nachverfolgen, eventuell zurückdrehen oder leider unvermeidlichen Fehler zur schnellen Behebung eingrenzen. Jedes seriöse Webseiten-Projekt sollte ein Tool zur Software-Versionierung verwenden. Bei uns kommt git zum Einsatz.

Technik

Frameworks & Plugins

Das Rad muss ja nicht immer neu erfunden werden. In der Internet-Gemeinde sind eine Reihe von sogenannten Frameworks, also Baukastensystemen, entstanden, die das Leben eines Web-Entwicklers erleichtern. Sie machen darüber hinaus eine Seite auch weniger fehleranfällig, da diese Frameworks von sehr vielen Entwicklern eingesetzt und auf allen möglichen Systemen getestet werden. Wer einen Fehler findet, beseitigt diesen auch gern und übergibt den verbesserten Code auf dem Treffpunkt der Open Source–Gemeinde namens Github

Foundation hat sich sowohl für den Umgang mit Rastern als auch in Hinsicht auf das responsive Design bewährt. Mit diesem Framework ist es leichter möglich, Webseiten auf Rasterstrukturen zu designen und für unterschiedliche Bildschirmgrößen anzupassen. Außerdem besitzt Foundation eine Reihe nützlicher CSS-Klassen und JS-Funktionen.

Als generelle Basis dient das HTML5 Boilerplate. Es hat zwei wesentliche Vorzüge: Erstens schafft es einen HTML-Rahmen, in den alle wesentlichen Ressourcen eingebunden werden, um Browser so weit es geht zu normieren. Zweitens verfügt es über eine .htaccess-Datei. Mit dieser wird später der Apache-Server des Internet-Providers konfiguriert, der die fertige Seite im Internet hostet.

Alternativen

Nur damit Sie es einmal gehört haben: zu den von uns verwendeten Tools gibt es natürlich viele Alternativen. Statt Foundation gibt es beispielsweise Bootstrap , statt Pug gibt es Haml, statt Sass gibt es Less. Neben jQuery gibt es noch ein Reihe große Zahl anderer JavaScript-Bibliotheken und JavaScript-Frameworks . Und anstelle von Metalsmith lassen sich eine Reihe alternativer Webseiten-Generatoren verwenden. Die bekanntesten sind: Jekyll, Hugo, Brunch, Pelican, Middleman und viele mehr. Einen Überblick über die verschiedenen Website-Generatoren findet sich auf Staticgen. Die Alternative zu git ist Subversion.

Wenn Sie sich fragen, warum es so viele verschiedene konkurrierende Tools und Systeme gibt und was die Vor- bzw. Nachteile gibt, kommt hier die Antwort. Die unterschiedlichen Tools und Systeme haben ihren Ursprung in unterschiedlichen Programmiersprachen genommen. Sass und Haml wurden beispielsweise in der Ruby-Welt entwickelt. Less und Pug stammen aus der JavaScript-Welt. Viele Systeme haben vergleichbare Eigenschaften — man muss die Tools finden, die einem am ehesten zusagen bzw. den eigenen Arbeitsprozess am besten unterstützen.

Auf diese Weise habe wir auch unseren Satz an Frameworks, Tools und Techniken ausgewählt. Wir verwenden für Sie die modernsten und erprobtesten Systeme. Außerdem versuchen wir Strukturbrüche zu minimieren, damit das System schnell und wartbar bleibt. Auf diese Weise können wir Ihre Webseiten am besten pflegen.

Scriptsprachen

Die Aufgabe von Browsern besteht darin, Informationen auf die ein oder andere Art anzuzeigen. Benötigt man Funktionen, die über das bloße Anzeigen hinausgehen, braucht man den hinter der Webseite liegenden Webserver.

Mit diesem lassen sich Informationen abspeichern, weiterverarbeiten oder versenden. Auf dem Webserver laufen dann kleine Programme, die die gewünschte Funktion ausführen. Die kleinen Programme nennen sich cgi-Scripts. Diese werden von der Webseite aus aufgerufen, laufen aber — wie gesagt — auf dem Webserver ab. CGI-Scripts lassen sich in unterschiedlichen Sprachen schreiben. Die bekanntesten Sprachen dafür sind PHP, Perl, Python und Ruby. Wir selbst schreiben unsere Skripts in Python.

Responsive Design und Grid-Systeme

Üblicherweise werden Webseiten auf sogenannten grids, d.h. Rastern designt, damit alle Elemente harmonisch platziert werden können. Darüber hinaus werden Webseiten heutzutage in der Regel so angelegt, dass sie jeweils auf die Größe des Anzeigegeräts angepasst werden. Eine Webseite wird auf einem Smartphone oder Tablet also anders angezeigt als auf einem 27-Zoll-Monitor. Man nennt dies responsive, weil die Webseite auf das Anzeigegerät »reagiert«.

Grid Systems

Content Management Systeme

Content Management Systeme sind System, die Inhalte (Content) aus einer Datenbank auslesen und daraus Webseiten generieren. Es gibt eine große Zahl von Content Management Systemen — abgekürzt CMS. Die bekanntesten sind Wordpress, Drupal, Joomla! und Typo3. Daneben gibt es noch eine Reihe weitere Systeme wie Plone, ExpressionEngine, MODX , Contao , SilverStripe CMS und viele mehr.

Alle Content Management Systeme bedürfen einer gewissen Einarbeitung, so dass sich Webdesigner oder Agenturen in der Regel auf ein oder zwei Systeme spezialisieren.

Die angezeigten Seiten einer Website werden bei Verwendung eines Content Management Systems erst im Moment der Nutzeranfrage erzeugt. Dazu werden die Inhalte aus einer Datenbank geladen und in ein definiertes Schema gebracht. Die Inhalte werden von den Kunden und Webagenturen in der Datenbank gespeichert, die Schemata werden von den Agenturen entwickelt oder gekauft. Es gibt natürlich auch frei verfügbare Schemata.

Da die einzelnen Webseiten bei einer Nutzeranfrage jedes Mal erzeugt werden müssen, nennt man Content Management Systeme auch »dynamisch«. Content Management Systeme sind am besten für große und umfangreiche Webauftritte geeignet, da sie eine Datenbank benötigen. Auch Internet-Shops benötigen natürlich eine Datenbank. Trotzdem werden Content Management Systeme häufig auch für kleine Unternehmen eingesetzt — entweder weil der Kunde das unbedingt will, oder weil die Agentur das so empfiehlt.

Statische versus dynamische Webseiten

Die meisten Webseiten für kleine und mittlere Unternehmen benötigen in der Regel gar kein Content Management System. Besser ist es, die Website fertig zu generieren. Dadurch entfällt die Notwendigkeit einer Datenbank — Komplexität und Fehleranfälligkeit sinken und in der Regel auch die Kosten. Wenn ein Nutzer eine Seite aufruft, ist diese bereits fertig und wird lediglich geladen. Das ist natürlich viel schneller als wenn die Seite erst durch das CMS erzeugt werden muss.

Im Gegensatz zu den dynamischen Seiten der Content Management Systeme nennt man Seiten, die bereits fertig sind, »statisch«. »Statische« Seiten werden nicht nur schneller angezeigt, sie weisen auch keine Sicherheitsrisiken auf. Die Datenbanken der Content Management Systemen werden ab und zu gern von Hackern angegriffen. Diese versuchen, in die Datenbank zu gelangen, um dort Kundendaten zu entwenden oder Seiten zu manipulieren.

Mit »statischen« Seiten gibt es auch mehr Freiheitsgrade in Hinsicht auf die Gestaltung des sogenannten UIs, also dem User Interface oder der Benutzerführung, da man an alle Informationen frei heran kommt und sie nicht aus dem CMS extrahieren muss.

Aus diesen Gründen, ist in letzter Zeit in der Web-Entwicklergemeinde ein starker Trend zurück zu »statischen« Seiten zu beobachten.

Natürlich haben Content Management System auch Vorteile. Diese existieren vor allem dann, wenn ein Besitzer die Inhalte einer Website regelmäßig ändern oder ergänzen möchte, beispielsweise für einen Blog. Ist ein Content Management System fertig erstellt, dann lassen sich neue Texte ohne tiefere Programmierkenntnisse in die Datenbank einstellen. Diese werden dann von dem Content Management System für das Web aufbereitet. Aber natürlich lassen sich Blogs auch mit »statischen« Systemen generieren.

Bei »webseiten anders« verwenden wir grundsätzlich keine Content Management Systeme. Alle Seiten des Webauftritts werden fertig generiert. Das ist unserer Meinung nach am effizientesten, am schnellsten und am sichersten.

Blogs und RSS-Feeds

Blogs sind kurze Artikel, die im Internet zu beliebigen Themen veröffentlicht werden. Häufig liest man in Blogs von Themen, mit denen sich der Autor gerade beschäftigt. Man findet aber auch in Unternehmens-Blogs aktuelle Informationen, Ankündigungen, Zwischenberichte und vieles mehr.

Für Leser, die Blogs verfolgen, ist es natürlich komfortabel, wenn sie automatisch über neue Blog-Einträge informiert werden und diese beispielsweise in ihrem E-Mail-Postkorb landen. Dies ist mit einer Technik möglich, die sich RSS-Feed nennt. Wenn eine Website diesen Service anbietet, können Leser (in der Regel kostenfrei) Informationen »abonnieren« und diese anschließend komfortabel in ihrem Browser oder Email-Programm lesen.

Moderne Browser

Software entwickelt sich rapide weiter. So ist das auch mit den zuvor erwähnten Programmiersprachen. HTML liegt mittlerweile in der Version 5 vor und wird HTML5 genannt. CSS existiert in der Version 3 als CSS3. Für Javascript existiert seit 2015 ebenfalls eine überarbeitete und verbesserte Fassung, die mit den synonymen Namen ES6 oder ECMAScript 2015 bezeichnet wird. Die neueren Versionen dieser Programmiersprachen bieten deutlich mehr Möglichkeiten. Der Vorteil der neuen Möglichkeiten ist gleichzeitig aber auch ein Problem. Denn nicht jede neue Möglichkeit wird bereits durch ältere Browser unterstützt.

Insbesondere der Internet Explorer verdient in diesem Kontext ein besonderes Augenmerk. Während die meisten Browser sich schon seit geraumer Zeit in Richtung eines gemeinsamen Standards entwickeln, ist Microsoft mit den älteren Versionen des Internet Explorers immer eigene Wege gegangen. Erst ab Internet Explorer 9 sieht man eine Unterstützung der meisten Standards, mit dem neusten Internet Explorer 11 hält sich Microsoft schon recht eng an die Standards. Mit Edge ab Windows 10 wird Microsoft sogar schon fast vorbildlich in Hinsicht auf die Umsetzung von Standards. Auf caniuse.com kann man sich einen Überblick verschaffen, wie gut sich die einzelnen Browser an die Standards halten bzw. diese schon umgesetzt haben.

Bei der Entwicklung einer neuen Website muss man sich daher entscheiden: will man die moderne Möglichkeiten der aktuellen Programmiersprachen nutzen und ein zeitgemäßes Aussehen erreichen oder will man lieber darauf verzichten, damit die Seite in allen — auch den alten — Browsern angezeigt werden kann. Natürlich kann man auch so entwickeln, dass beides möglich ist, aber das entspricht häufig einer Parallelentwicklung und dauert entsprechend länger.

Unseren Kunden empfehle wir in der Regel, die aktuellen Möglichkeiten zu nutzen. Der problematische Internet Explorer IE8 wird von Microsoft nicht mehr unterstützt und stirbt langsam aus. Entsprechend entwickeln wir Webseiten auch nur für die aktuellen Browser ab Internet Explorer 9.

Die aktuellen Versionen der Browser Firefox, Chrome, Opera und Safari aktualisieren sich erfreulicherweise selbstständig. Daher nennt man sie auch gern Evergreen-Browser. Es ist also damit zu rechnen, dass die Nutzer zukünftig automatisch einen aktuellen Stand ihrer Browser haben.

Search Engine Optimization (SEO)

Unter Search Engine Optimization versteht man die Optimierung der Seite in jeder Dimension, die eine Anzeige auf den vorderen Seiten von Suchmaschinen wie Google wahrscheinlich macht. Dazu gehören inhaltliche, organisatorische und technische Aspekte.

Der Link zu einer Seite wird von Suchmaschinen gefunden, wenn das gesuchte Wort mit einem (synonymen) Keyword auf der Seite übereinstimmt. Wenn die Seite gefunden ist, stellt sich die Frage, an welcher Stelle die Seite plaziert wird. Dafür gibt es eine Reihe von Kritierien:

Grundsätzlich gilt, dass eine Seite umso weiter vorne bei Google angezeigt wird, je lieber sie von den Nutzern aufgerufen wird bzw. je verlinkter sie von populären Seiten ist.

Dabei werden die Keywords umso höher bewertet, je wichtiger sie auf der Seite sind. Die Reihenfolge der Wichtigkeit ist: Name der Domäne, Titel der Seite, Seitenüberschrift nach Hierarchie, Häufigkeit des Keywords im Text.

Ferner berücksichtigt Google auch positiv, mit welcher Geschwindigkeit die Website angezeigt wird, ob die Website responsive reagiert und ob sie Sitemaps enthält.

Einen ersten Überblick über SEO findet man in dieser Einführung von Google.