Webentwicklung

Webentwicklung ist der technische Part bei der Erstellung einer Webseite oder eines Webshops, der grafische Part ist das Webdesign, möglichst responsive. Das responsive Webdesign, von einer Grafikerin erstellt wird vom Webentwickler umgesetzt. Die Webentwicklung muss wie das responsive Webdesign Ihre persönliche Aufgabenstellung realisieren.

Die Webseite ist ein Teil eines Marketingkonzepts. Neben der Konzeption der Webenticklung empfehle ich ausdrücklich, auch eine Konzeption des Marketings anzugehen. Sie haben ein Ziel: Neue Kunden. Diese Kunden sind Menschen, die Schritt für Schritt an Sie und Ihre Dienstleistung herangeführt werden müssen. Hierbei hilft gute Webentwicklung natürlich, aber im Grunde brauchen Sie ein ganzheitliches Konzept für das Marketing. Hier helfe ich mit Beratung, Konzeption und Vorschlägen.

In diesem Artikel gehe ich nur auf die technischen Aspekte der Webentwicklung ein und zeige auf, wie ich individuelle Webanwendungen realisiere und wo ich als Webentwickler Ihren geschäftlichen Alltag angenehmer gestalten kann, indem ich bestimme Prozesse automatisiere. Auch unterscheide ich den Bereich der Webentwicklung von der Entwicklung komplexer Anwendungen (App Entwicklung), die mehr Ressourcen benötigen und vor allem ständigem technischen Wandel unterworfen sind. Die Webentwicklung ist zum Glück mittlerweile sehr routiniert, es gibt für viele Anforderungen eine klar umrissene optimale Lösung und eine Webseite kann mit wenig Aufwand erstellt und gepflegt werden. Systeme für CMS und Webshops stehen open-source bereit. Eine Internetadresse kostet ein paar Euro im Monat.

Technisch: Webentwicklung – Immer auf dem Zahn der Zeit (1)

Webentwicklung ist eine der Speerspitzen technischer Entwicklung. Aus HTML wird HTML5, aus CSS CSS3, JQuery ersetzt Javascript, responsive Webdesign, der Webentwickler muss sich ständig nach bilden. Noch heftiger geht es nur in der Entwicklung komplexer Webanwendungen zu: Dieser Bereich hat gerade in den Jahren 2014 und 2015 massive technologische Veränderungen erlebt. Gerade weil wir im Zeitalter der Apps und bald des Internet of Things (IoT) leben, ist die Softwareentwicklung ein treibender Faktor des digitalen Fortschritts. Klar, denn mit der zunehmenden Digitalisierung der ganzen Welt muss Schrittgehalten werden und die Prozessortechnik macht im Gegensatz zum letzten Jahrzehnt kaum noch Fortschritte. Dazu kommt eine wachsende Open-Source-Community, mit einem für außen stehende unglaublichen kreativem Potential. Dazu kommt Suchmaschinenoptimierung und ständige Google-Updates. Das Ergebniss dieser spannenden Ereignisse ist, dass fast im Wochentakt neue Technologien auf den „Markt“ (2) kommen, die teilweise so genial sind, dass ich für meinen Teil sie in alle meine Projekte integrieren möchte. Dazu mehr in einem späteren Artikel über Webtechnologien. Denn für die Webentwicklung kann ich sie beruhigen: Es gibt alte Standards, die sich über Jahrzehnte entwickelt und bewährt haben:

Bei der Webentwicklung eingesetzte Technologien und Software

Ihre Webseite führt ein Doppelleben: Sie wohnt auf dem Server und entfaltet sich in voller Pracht auf dem Endgerät (Laptop, Handy, Tablet, etc.) Ihrer Nutzer. Dort werden die Bilder angezeigt, Schriften formatiert und Formulare ausgefüllt. Diese beiden Bereiche nennt man Frontend (auf dem Endgerät) und Backend (auf dem Server). Da Webentwicklung standardisiert ist, und man vorgefertigte Backend-Technologien anwendet, kann man den Bereich des Server-Backends vernachlässigen. Deshalb verwendet man in der Webentwicklung die Begriffe Frontend und Backend gerne für andere Bereiche. (3) Für Sie ist das Backend z.B. der Bereich, in dem Sie ihre Texte editieren, Bilder austauschen oder Artikel schreiben können.

Das eigentliche Backend ist ihr Webserver. Das ist ein Computer ohne Tastatur und Bildschirm der in einem Rechenzentrum steht und ein ganz ganz dickes Internetkabel hat, weil seine einzige Aufgabe ist, Ihre Webseite an Ihre Kunden zu liefern. Auf dem Webserver läuft eine Applikation, das über eine Datenbank ihre Webseite verwaltet. Die Applikation läuft auf einer Programmiersprache. Für Webseiten und damit die Webentwicklung war PHP lange und zu recht etablierter Standard. Mit Linux, einem Apacheserver, einer MySQL (8) Datenbank und PHP als Programmiersprache (LAMP Stack) laufen noch immer mehr als die Hälfte aller Webserver und mehr als 80% aller Webseiten nutzen PHP (4). Webentwicklung ist damit quasi PHP-Entwicklung. Diese Programmiersprache hat tatsächlich den großen Vorteil der weiten Verbreitung. Wenn man in PHP programmiert, kann man sich sicher sein, dass die Webseite auf quasi allen Webservern läuft. Im Grunde genommen ist PHP der Standard der Webentwicklung. Tatsächlich hat PHP aber auch einige Nachteile, es ist nicht so schön zu programmieren und die Performance lässt zu Wünschen übrig. Trotzdem macht PHP weiterhin Sinn, vor allem in der Webentwicklung. Es geht schnell und für das auf dem Webserver laufende Programm gibt es eine große Auswahl und natürlich auch einen Favoriten.

Die am häufigsten eingesetzten Content-Management-Systeme sind alle kostenlos, weil open-source, und bauen alle auf PHP-MySQL auf:

  • WordPress (Opensoure, von mir eingesetzt)
  • Contao (modular, mochte ich nicht)
  • Joomla (etwas eingestaubt)
  • Typo3, oder der Nachfolger Neos. (Sehr mächtig, aber für einfache Webseiten etwas zu aufgeblasen und auch kompliziert in der Handhabung, wird häufig von großen Firmen benutzt)

Weiterhin gibt es speziell für Webshops eingesetzte Content-Management-Systeme (E-Commerce):

  • WordPress (mit dem Plugin Woocommerce, geeignet für einen kleinen Onlineshop)
  • Magento (das verbreiteste und umfassendste, wird von Ebay vertrieben)
  • Shopware (der zweite große Platzhirsch, kostenpflichtig)

Contao und Joomla finde ich als Webentwickler nicht ansprechend. Content-Management Typo3 ist für die Aufgabenstellung eines umfangreichen Webprojekts und oft kann anstatt Typo3 WordPress benutzt werden. (9) Die Webshops Magento und Shopware sind ein Universum für sich, auf das sich Webentwickler spezialisiert haben. WordPress ist, wie der Name schon sagt, ungefähr so einfach zu handhaben, wie das gleich lautende Textverarbeitungsprogramm. Mit WordPress habe ich verschiedene Webseiten umgesetzt und bin mir sicher, dass andere Webentwickler noch verrücktere Sachen gemacht haben. Die Realisierung von z.B. responsive Webdesign ist mit allen CMS möglich, Webshops lassen sich auch ohne Magento und Shopware umsetzen, JQuery funktioniert plattformunabhängig.

Wichtig: Ich benutze das CMS nur als Framework. Ich passe es mit HTML5, CSS3, Javascript und JQuery nach Ihrer Aufgabenstellung an und baue eine Webanwendung, mit der sie perfekt arbeiten können. Für die meisten Aufgabenstellungen gibt es bereits Plugins für WordPress. Für das CMS baue ich ein individuelles Theme / Template, dass sich den Aufgabenstellungen Ihrer Webanwendung anpasst. Auch Webshops bedürfen eines speziellen responsive Webdesigns, dass besonderer Webentwicklung bedarf.

Content-Management

Die Aufgabe des CMS ist es also, Ihre Inhalte mit PHP und MySQL zu verwalten. Diese Inhalte können Artikel, Bilder, Veranstaltungen, Termine, Lebensläufe, Projektbeschreibungen, Referenzen, etc. sein. Bei Webshops die Produkte und die Kategorien. Meistens läuft es sowieso auf Unterseiten zu Ihren Leistungen und Angeboten, Ihren Referenzen und natürlich – ganz wichtig – Kontaktdaten hinaus. Bei Webshops werden oft Bezahlsysteme eingebunden. Aus diesen Informationen bastelt das CMS dann das HTML5, CSS3 und Javascript und schickt es an den Browser des Nutzers, wenn dieser Ihre Domain oder Internetadresse eingibt. Der Browser baut daraus die grafische Repräsentation Ihres Internetauftritts auf. Et voilà.

Wie aber wird aus ihren eingegebenen Informationen im Frontend eine grafische Repräsentation? Hier kommen die

Responsive Webdesign: Techniken im Frontend

zum Einsatz.

  • HTML5
  • CSS3
  • Javascript / JS

Der Nutzer möchte also Ihre Webseite anschauen. Er fragt den Server, nach der Seite, der Server fragt das CMS, das CMS schaut nach, was die aktuellsten Artikel sind, baut diese in das Webdesign ein, und schickt dem Browser diese Daten in Form von HTML5, CSS3 und Javascript.

Der Browser bekommt von der Webanwendung ein total unformatiertes Textpaket, das für den menschlichen Betrachter ungefähr so aussieht: (Bitte jetzt STRG + U drücken, um den Sourcecode dieser Seite zu sehen). Der Browser (auch eine Software) liest aus diesem Text geschickt HTML5, CSS3 und Javascript aus, die für die Darstellung der Seite nötig sind, heraus und formt diese zum Webdesign. Anweisungen sind z.B. „Wenn Bildschirm größer als 1200 Pixel, dann großes Bild nach oben links, daneben Überschrift in groß und fett. Darunter kleinere Überschrift, dann Zeilenumbruch unter den kompletten Bereich und dort den Haupttext. HTML5 strukturiert die Seite, CSS3 styled sie und Javascript macht sie interaktiv.

Um diese eigenständigen Sprachen effizient zu benutzen, gibt es natürlich eine ganze Reihe von Hilfsmitteln:

  • JQuery (Erweiterung von Javascript)
  • ECMAScript (ECMA-262 and ISO/IEC 16262 oder einfach ES6 und bald ES7, jährliche Version der Sprache Javascript (Ich hab’s gesagt, hier tobt der Bär!)) (dies ersetzt um genau zu sein JS)
  • SASS / SCSS / LESS (Compiler für CSS3, erlaubt sauber gegliederten Code)
  • CSS3-Frameworks wie Bootstraps, Foundation, Semantic-UI (geben CSS3-Klassen vor, mit denen leicht eine Grundstruktur der Seite erstellt werden kann, und vor allem responsive Webdesign umgesetzt werden kann)

Diese Programmiersprachen geben also den gestalterischen Rahmen vor, in dessen Struktur Ihre Inhalte eingepflegt werden. Aus Ihren Inhalten wird von PHP, MySQL und CMS ein Paket aus HTML5, CSS3 und Javascript geschnürt, verschickt, vom Browser wieder entfalten und vom Nutzer angeschaut. Das ist funktionierende Maschinen-Mensch-Kommunikation!

So funktioniert übrigens fast alle Kommunikation im Internet. Moderne Webapps fragen nur nicht mehr ganze Seiten nach, sondern nur noch minimale Datenpakete, um nur Teilbereiche der Seite performant neu zu rendern (AJAX oder Javascript Frameworks). Apps auf dem Smartphone fragen auch Datenpakete ab, diese kommen z.B. in Form von JSON. Es ist sogar möglich, nur mit HTML5, CSS und Javascript eine App zu programmieren (7). Es bietet sich aber aufgrund der besseren Performance eine native Realisierung an, Softwareentwicklung unterscheidet sich Webentwicklung in der Aufgabenstellung massiv, also werden unterschiedliche Frameworks benutzt.

Wo wir gerade bei Datenpaketen sind, sollte ich vielleicht noch schema.org und Open Graph (6) erwähnen. Ihre Webseite soll ja nicht nur bei den Besuchern gut ankommen, sondern auch bei Suchmaschinen. Weiterhin soll sie gut auf Facebook geteilt werden können, weil Ihre Inhalte ja bald viral gehen. Dafür gibt es standardisierte technische Anforderungen, um den Robots bzw. anderen Programmen (Google, Twitter und Facebook sind auch nur Programme) die für sie relevanten Daten anzuzeigen. So will Facebook zum Beispiel wissen, welches Bild verlinkt werden soll und welcher Text darunter stehen soll. Google will am liebsten ganz genau wissen, ob es sich bei Ihrer Unterseite um einen Artikel oder ein Angebot handel, ob ein Unternehmen mit der Webseite verknüpft ist und ob dieses Unternehmen auch eine Facebookseite oder bestenfalls eine Google-Business-Seite besitzt. Hierfür gibt es mal wieder was neues: JSON-LD. Einfach alle wichtigen Daten strukturiert und in Maschinen-lesbarer Form angeben. Dies sollte bei der Webentwicklung unbedingt unter der Haube stecken. Das bedeutet auch, dass Sie in der Webanwendung mehr Felder ausfüllen müssen. Aber nur einmal 😉

Gerade bei Webshops muss der Webentwickler einen Katalog an suschmaschinenoptimierten Informationen und die passende Konfiguration anbieten!

Neben CMS (WordPress :) ) Systemen kommen auch allgemeinere Frameworks bei der Webentwicklung zum Einsatz. PHP Frameworks wie Laravel und Symfony, Ruby on Rails oder dem neuesten Schrei, dem Phoenix-Framework basierend auf Elixir / Erlang gibt es viele Realisierungen des MVC Gedankens. Model, View, Controller bezeichnet die Abstraktionsebenen der Webanwendung. Diese Technologien habe ich bereits genuzt, mit Content-Management habe ich gute Erfahrung. Die Leistungen vom Phoenix-Framework haben mich überzeugt. Softwareentwicklung bezieht sich dann oft auf das Javascript-Framework z.B. ReactJS, mit dem per AJAX hoch performant Daten vom Server gezogen werden. Obwohl hier HTML5 und CSS3 eingesetzt werden, ist die Grenze der Webentwicklung durchaus überschritten.

Einfach: Webseite pflegen soll Spaß machen

Meine Aufgabenstellung ist es, das Content-Management-System für Sie so angenehm wie möglich zu machen und mit Webanwendungen möglichst viel aus den eingegenen Daten zu machen. Bei der Konzeption ihres Content-Managements zu helfen und mit sauberer Webentwicklung eine angenehme User-Experience zu schaffen.

Beispiel: Sie benötigen eine Webseite auf der Sie neue Artikel und regelmäßig Veranstaltungshinweise veröffentlichen wollen. Diese sollen auf der Startseite gut sichtbar und leicht zugänglich angezeigt werden. Natürlich sollen die aktuellsten Artikel oben stehen und vergangene Veranstaltungen gar nicht angezeigt werden. Wenn Sie die Startseite immer von Hand bearbeiten müssen, würden Sie nach einer Zeit sicherlich durchdrehen. Hier hilft die Webentwicklung, indem diese Prozesse automatisiert werden. Sie tragen nur die Artikel und die Veranstaltung mit dem jeweiligen Datum ein, und die Startseite wird per Konfiguration automatisch angepasst. Wichtige Veranstaltungen stehen prominent oben, vergangene wandern ins Archiv. Über das Backend verwalten Sie einfach nur die Inhalte der jeweiligen Artikel und überlassen alles weitere der MySQL-Datenbank.

Wirksam: Ihre Kunden überzeugen

Erstmal müssen Ihre Kunden Sie finden. SEO heißt Suchmaschinenoptimierung und bedeutet, technisch und inhaltlich die Seite zu verbessern und ist teil der Webentwicklung. SEM bedeutet auf Google Adwords zu schalten. Als Entwickler bin ich mit Datenverarbeitung vertraut und beim SEO und SEM muss man die Infrastruktur des Contents analysieren. Wichtiger Bestandteil der Suchmaschinenoptimiertung ist valides HTML5 (W3C-konform) und Semantic Markup. Auch die Ladezeit ist Thema, CSS3 darf nicht zu groß, JQery nicht zu behäbig sein.

Dann müssen mit Inbound-Marketing die Nutzer auf Ihrer Website gehalten werden, und langsam als Kunden gewonnen werden. Diese Conversion vorzubeiten ist ein längerer Prozess, der über die Webentwicklung hinausgeht. Als Webentwickler bin ich in diesem Prozess involviert und biete auch hier die Konzeption, Beratung und auch Initiative an. Die Conversion-Rate ist auch für Webanwendungen maßgeblicher Faktor des Neukundengewinns. Hier gibt es weniger open-source als kostenpflichtige Software.

Als Webentwickler kann ich Ihnen über die Aufgabenstellung der Webentwicklung auch beim Marketing und der Suchmaschinenoptimierung helfen. Ich helfe gerne bei der Realisierung von Softwareentwicklung, und darüber hinaus bei der Konzeption eines Marketingplans. Schreiben Sie mir jetzt eine Email, ich freue mich auf eine unverbindliche Kontaktaufnahme.

Quellen / Fußnoten

  1. https://de.wikipedia.org/wiki/Liste_gefl%C3%BCgelter_Worte/Z#Zahn_der_Zeit
  2. Der Markt ist kein Markt im kapitalistischen Sinne. Vielmehr ist es ein kostenloses Angebot, bei dem sich jeder bedienen kann. Open-Source heißt, die Ergebnisse der eigenen Arbeit mit allen Rechten an die Öffentlichkeit abzugeben. Es ergeben sich Projekte, an denen hunderte von Programmierern arbeiten. Momentan geben große Unternehmen wie Google, Facebook, Apple und auch Netflix einen maßgeblichen Input, d.h. sie lassen ihre eigenen Entwicklerteams (Dev-Ops) mit Entwicklern der ganzen Welt zusammenarbeiten. Viel der momentanen Entwicklung läuft über die Plattform www.github.com.
  3. https://de.wikipedia.org/wiki/Front-End_und_Back-End
  4. http://w3techs.com/technologies/overview/programming_language/all
  5. schema.org
  6. ogp.me
  7. Zum Beispiel mit Meteor
  8. MySQL ist eine weit verbreitete relationelle Datenbank. Eine Alternative ist PostgresSQL. Es gibt auch no-sql Datenbanken wie MongoDB oder RethinkDB.
  9. Soll statt Typo3 WordPress benutzt werden, müssen die bestehenden Artikel migriert werden.