...es gibt immer eine Lösung!


Jede Entwicklung beginnt mit dem ersten Schritt.
>

Webentwicklung

Wer jetzt ein Tutorial über Webentwicklung erwartet, wird hier nicht fündig.

If you can dream it,
you can do it!

Für Interessierte gebe ich hier einen kurzen Überblick, so wie ich ihn anfangs hätte gebrauchen können und beschreibe meine ersten Schritte in Richtung Webentwicklung.
Ich möchte damit allen Laien, die sich ebenfalls der Webentwicklung widmen wollen und denjenigen, die grundsätzlich ein neues Thema angehen möchten, Mut machen, es 'einfach' zu tun.
Wem es (nur) um die Veröffentlichung von Inhalten im Web geht, der sollte fertige Baukastensysteme oder Websoftware benutzen, wie sie jeder Provider anbietet oder die kostenlos im Web zu finden sind (z.B. WordPress).


Wenn man das Internet nur als Anwender kennt oder sich so wie ich bisher nur mit der Entwicklung von Desktop-Anwendungen beschäftigt hat, ist es sinnvoll, sich zunächst einmal zu fragen:
Internet oder Web, was ist das überhaupt?

Das Internet

World Wide Web

Umgangssprachlich wird das Internet häufig mit dem World Wide Web gleichgesetzt.
Technisch gesehen gibt es elementare Unterschiede.

Das Internet ist ein weltweiter Zusammenschluss verschiedener Computer-Netzwerke, über das Dienste wie E-Mail, Chat oder Dateiübertragung angeboten werden.

Das World Wide Web (WWW) ist der wohl bekannteste Dienst und bezeichnet ein über das Internet abrufbares System von Webseiten.
Man spricht dabei von einen Request-Response-Prinzip:
Ein Client (PC, Tablet, Smartphone) ruft bestimmte Daten, die von einem Provider auf einem Server bereitgestellt werden, ab und der Server liefert die Daten gestreamt zurück, die der Browser dann interpretiert.

Grundlage aller Webseiten im World Wide Web ist die textbasierte Hypertext-Auszeichnungssprache HTML (Hypertext Markup Language).
Für die Standardisierung ist das W3C (World Wide Web Consortium) zuständig.
Eine Webseite ist eine (HTML-)Datei, eine Website eine Sammlung von Webseiten, die untereinander verknüpft sind.

Der Aufruf erfolgt über eine (eindeutige) Webadresse (URL - Uniform Resource Locator) der Form:

Webadresse
  1. Das verwendete Protokoll – hier: HTTP (Hypertext Transfer Protocol)
  2. Der Host oder Hostname: www.black-solutions.de
  3. Die Subdomain: www.
  4. Der Domainname (Domain): black-solutions.de
  5. Die Top-Level-Domain (Endung von Webadressen): .de (abgekürzt auch TLD genannt)
  6. Der Pfad / Datei: /index.html
    Ein Pfad verweist meist auf eine Datei oder einen Ordner (Verzeichnis) auf dem Webserver (z.B. "/ordner/datei.html").
    Wird keine Datei angegeben, wird die Startseite mit dem Namen "index.html" aufgerufen, die immer vorhanden sein sollte.

HTML, CSS und JS

HTML ist eine standardisierte client-seitige Technologie, die von (allen) Browsern interpretiert wird.
HTML ist für den strukturierten Inhalt zuständig.

Ergänzt wird HTML durch die Formatierungssprache CSS (Cascading Style Sheets), die für die Gestaltung der Webseiten verwendet wird und durch die Scriptsprache JavaScript für die Steuerung des Verhaltens.

Zieldefinition

Wer eine (erste) Website entwickeln möchte, sollte zunächst einmal eine grobe Vision haben, was am Ende dabei herauskommen soll.
Diese sollte durchaus flexibel sein, da man erst im Laufe der Zeit eine Vorstellung davon bekommt, was (einem selbst) möglich ist und was nicht.
Später mit mehr Erfahrung gilt: je besser und stabiler die Zielvorgabe desto weniger Anpassungsaufwand hinterher.

Inhalt

Webentwicklung ohne Inhalt macht keinen Spaß – mir zumindest nicht.

Beim Inhalt ist zu unterscheiden, ob es sich eher um statischen Inhalt handelt oder auch um dynamische Daten, wie es z.B. bei einem Online-Shop der Fall ist.
Für den Anfang habe ich mich auf statische Daten konzentriert.

Es ist hilfreich, sich am Anfang eine grobe Struktur (Sitemap) aufzumalen (Zettel und Stift reichen aus), die folgendes beschreibt:

  • Themen
  • Gliederung
  • Navigation

Diese Struktur muss nicht in Stein gemeißelt sein und kann sich im Verlauf sicher noch ein Dutzend Mal ändern.

Neben der Struktur sollte man schon eine Vorstellung davon haben, ob man Bilder, Grafiken, Videos oder Musik benutzen möchte.
Zusätzlich ist es motivierend, sich schon mal Gedanken über einen Namen, über eine Domain zu machen. Das kann der eigene Name sein, aber auch wie hier 'black-solutions.de'. Wer sehr fixiert ist auf eine Domain, sollte frühzeitig prüfen, ob diese noch frei ist und sie evtl. schon reservieren.

Darstellung

Auch für die Darstellung sollte man eine grundsätzliche Vision im Kopf haben. Wer sich noch nichts vorstellen kann, kann sich Anregungen im Internet holen.

Zielgruppe

Für wen ist die Website?
Ich gehe davon aus, dass es sich zunächst einmal eher um eine private Spielerei handelt, so dass Kundenwünsche außen vor bleiben.
Bleibt die Frage:

  • Welche Browser möchte ich unterstützen?
  • Welche Endgeräte stehen im Vordergrund?

Browserkompatibilität

Wenn Sie z.B. ein MS Word-Dokument erstellen, müssen Sie sich vielleicht noch über Versionsunterschiede, aber weniger über die Endgeräte oder die Wahl des Werkzeugs, mit dem das Dokument aufgerufen wird, Gedanken machen. Das ist durch Word bereits festgelegt (OpenOffice ist vergleichbar). Auch das Gerät spielt eine untergeordnete Rolle.

Bei Webseiten bestimmt der Anwender das Werkzeug (den Browser) und das Gerät (den Viewport), die beide Einfluss auf die Darstellung haben.
Für jeden Webentwickler ist es eine Herausforderung, alle gängigen Browser - auch in älteren Versionen - zu unterstützen. Aktuell sind die gängigsten Browser Internet Explorer, Firefox, Chrome, Safari und Opera. Das kann sich aber täglich ändern.
Ich habe mir die Freiheit nehmen können, mich auf die gängigsten Browser in den aktuellsten Versionen zu konzentrieren.
Eine möglichst breite Browserabdeckung unterscheidet aber einen guten von einem sehr guten Webentwickler.

Responsive Webdesign

In der heutigen Zeit sind verschiedene Endgeräte zu beachten, mit denen eine Website aufgerufen wird. Dabei spielen Größe, Auflösung und Eingabeverhalten (klicken, touchen) eine Rolle.
Responsive Webdesign bedeutet, Webseiten so zu gestalten, dass sie in der Darstellung auf alle Geräte entsprechend reagieren.
Es ist noch nicht so lange her, dass für unterschiedliche Endgeräte jeweils eigene Seiten entwickelt wurden. Dass das aufgrund hoher Redundanz nicht zielführend sein kann, steht außer Frage.

Heute bilden die neuen Webstandards HTML5, CSS3 (inkl. Media Queries) und JavaScript flexiblere Möglichkeiten.
Das (nicht mehr ganz so neue) Schlagwort lautet: mobile first, d.h. das Design wird in erster Linie für Smartphones optimiert und dann für alle anderen angepasst.

Ich habe einen anderen Weg gewählt und meine Website in erster Linie für PCs optimiert.

Ziel

Last but not least:
Wer ein professioneller Webentwickler werden will, sollte sich darauf einstellen, sich mit sehr vielen verschiedenen Technologien auseinanderzusetzen und: es hört nie auf!

Aber auch ein professioneller Entwickler fängt klein an.

(Technische) Voraussetzung

Für den Start braucht es nicht viel:

  • PC mit Internetzugang
  • Texteditor (notepad++)
    Als Entwicklungsumgebung reicht für den Anfang ein Texteditor aus. Ich habe notepad++ gewählt, den es kostenlos als Download gibt.
    Alternativ gibt es sogenannte integrierte Entwicklungsumgebungen (IDE) wie z.B. Visual Studio, die für den privaten Gebrauch ebenfalls kostenlos angeboten werden. Diese bieten dem Entwickler zahlreiche Unterstützungen, sind anfangs aber komplizierter in der Bedienung.
  • Browser (Firefox)
    Um die Ergebnisse lokal anzuzeigen, ist ein Browser erforderlich.
    Ich habe Firefox gewählt, da es dafür einige Add-ons wie z.B. firebug gibt, die die Analyse einer Website unterstützen.
    Bzgl. Cross-Browser-Tests empfiehlt es sich, weitere Browser zu installieren.
  • Knowhow
    Zwecks Knowhow-Aufbau bieten sich verschiedene Quellen an.
    Ich habe mit einem Basisbuch angefangen und mich dann ergänzend bei Video2Brain, einem Anbieter für Videotraining, angemeldet (20 € pro Monat).
    Zusätzlich gibt es zahlreiche kostenlose Websites - eine sehr empfehlenswerte: ▸ Selfwiki.
  • Grafik
    Zur Erstellung von Grafiken und Bearbeitung von Fotos bieten sich Photoshop oder das kostenlose Gimp an.
    Meine Grafiken habe ich mit Powerpoint erstellt.

Entwicklung

Ausgelöst wurde mein Interesse an der Webentwicklung durch ein berufliches Projekt zur Erstellung einer Webanwendung auf Basis von ASP.NET.
Ich startete mit Visual Studio und einem Beispielprojekt, hatte aber vom 'drumherum' keine Ahnung.
Arrogant wie ich war dachte ich mir 'das kann ja so schwer nicht sein', schaute mir den Quellcode verschiedener Websites an – und verstand kein Wort.
Schnell war klar, dass die grundlegende Beschäftigung mit HTML und CSS doch extrem sinnvoll war.

Da es sich bei dem Projekt eher um eine Vorbereitung mit ungewissem Ausgang als um ein definiertes Ziel handelte, suchte ich nach einer sinnvollen Ergänzung und fand diese in meiner privaten Website. Das Projekt wurde wie erwartet zugunsten anderer Aufgaben auf Eis gelegt, meine Website aber habe ich auf Basis von HTML, CSS und JavaScript fertiggestellt.

HTML

Öffnen Sie einen Texteditor, schreiben Sie 'Hallo Welt' und speichern Sie diese Datei mit der Endung '.html' ab –fertig ist die HTML-Datei.
Wenn Sie allerdings standardkonformes HTML schreiben und die Darstellung beeinflussen möchten, sollten Sie etwas mehr tun.

HTML-Dateien bestehen im Wesentlichen aus strukturiertem Text, der durch sogenannte Tags ausgezeichnet wird.

Ein einfaches Beispiel:


<h1>Überschrift</h1>


Diese Zeile besteht aus einem öffnenden und schließenden Tag, der den Inhalt als Element des Typs 'h1' auszeichnet.
Das Grundgerüst einer HTML-Seite sieht (in notepad++) wie folgt aus:

HTML

Im head-Bereich werden neben dem Titel der Website Metainformationen angegeben, die in der Regel nicht angezeigt werden.
Metainformationen können Angaben sein, die in Suchmaschinen verwendet werden oder Anweisungen, wie sich Viewports zu verhalten haben.
Ebenso kann der head-Bereich Styleanweisungen oder JavaScript-Blöcke enthalten.
Aufgrund von Lesbarkeit und Wiederverwendung ist es empfehlenswert, HTML-Code, Styles und JavaScript in separaten Dateien zu verwenden und entsprechend zu verknüpfen. Diese Verknüpfungen werden ebenfalls im head-Bereich angegeben.

Der body-Bereich enthält den sichtbaren Teil, der durch Tags weiter verschachtelt ist.
Als Hauptstrukturen können Kopf- (header), Inhalts- (main) und Fußbereich (footer) gewählt werden, müssen aber nicht.
Tags strukturieren den Text und können per CSS angesprochen werden. Zusätzlich haben einige Elemente noch spezielle Attribute wie z.B. das img-Element (image), mit dem Bilder eingebunden werden, oder das a-Element (anchor), mit dem ein Anker bzw. Link auf eine andere Seite gesetzt wird.
Das a-Element wird insbesondere für die Navigation verwendet, die eine spezielle Aufmerksamkeit verdient. Die Funktionalität (das Verzweigen) wird über a-Elemente mit dem Attribut 'href' realisiert, das Layout wird über CSS definiert. Unterschieden wird dabei zwischen vertikaler und horizontaler Navigation.

Arbeitsersparend ist es (bei statischen Seiten), am Anfang zunächst eine Seite fertig zu stellen und diese dann als Vorlage zu verwenden, da Bereiche wie die Navigation auf jeder Seite enthalten sind und gleich sein sollten.
Jede Anpassung muss auf allen Seiten durchgeführt werden.

HTML-Dateien werden mit der Endung 'html' abgespeichert und können direkt im Browser angezeigt werden.

Mit etwas Disziplin und Geduld ist es nicht schwer, 'sauberen' HTML-Code zu schreiben.


CSS

Mit CSS (Cascading style sheets) beschreibt man, wie einzelne HTML-Elemente dargestellt werden.
Jeder Browser bringt ein eigenes, simples Stylesheet mit, so dass als Basis eine gewisse Darstellung vorhanden ist. Will man selbst Kontrolle über die Darstellung erhalten, sollte man Angaben für alle (verwendeten) Elemente machen.

Stellen Sie sich ein Bild mit 'Malen nach Zahlen' vor. Die Felder sind nummeriert, jede Nummer steht für eine Farbe. Auf einem anderen Blatt steht, welche Nummer welcher Farbe entspricht.

CSS funktioniert nicht anders.

Ein einfaches Beispiel:

h1 {
font-size: 16px;
font-family: font-family: Verdana, Arial, Helvetica, sans-serif;
}

Alle Inhalte, die mit dem tag <h1> gekennzeichnet sind, sollen die Schriftgröße 16 Pixel und die Schrift 'Verdana' haben. Ist Verdana auf dem PC nicht vorhanden, soll die nächste gewählt werden.

Will man auf spezielle Elemente zugreifen, verwendet man IDs (für eindeutige Elemente) oder Klassen (für eine definierte Menge von Elementen).

Mit CSS beschreibt man also die Eigenschaften verschiedener HTML-Elemente wie

  • Größe
  • Positionierung
  • Schriftart
  • Farben
  • Rahmen
  • etc.

Elementar ist dabei das zugrundeliegende Box-Modell. Jedes (Block-)Element wird als Box interpretiert, die eigene Abstände und Größen hat. Boxmodell

Diese Boxen sind standardmäßig entsprechend des Textflusses vertikal untereinander angeordnet. Um diese anders zu positionieren, wählt man die CSS-Eigenschaft 'float' oder die Flexbox-Methode. Flexbox bietet eine relativ einfache Möglichkeit, flexible und responsive Layouts zu verwirklichen.

Es gibt einige Bibliotheken (frameworks) mit vorgefertigten Styles, die frei zur Verfügung stehen und in eigene Websites eingebunden werden können. Ein häufig verwendetes 'framework' ist Bootstrap. Unter dem Stichwort 'css-frameworks' finden Sie mit Hilfe von Suchmaschinen weitere.
Ich habe bisher keine Bibliotheken benutzt, da ich nicht etwas benutzen wollte, was ich noch nicht beurteilen konnte.

JavaScript

Die Dritte im Bunde ist JavaScript, eine Client-seitige Programmiersprache, mit der im Wesentlichen Interaktionen gesteuert werden.
Auch hier gibt es zahlreiche Bibliotheken wie z.B. jQuery, die das Leben eines Entwicklers erheblich erleichtern können. Zunächst sollte man sich aber ein Grundverständnis von JavaScript aneignen und sich mit der Syntax vertraut machen.

Beachten sollte man, dass es Anwender gibt, die das Ausführen von JavaScript in ihrem Browser deaktiviert haben.

Auf meiner Website habe ich JavaScript an folgenden Stellen eingesetzt:

  • Ein- und Ausklappen von Text
  • Auswertung des HS-Tests
  • Black Chesster
  • Kontaktaufnahme

Ablauf

Der Weg zu meiner Website hätte also so aussehen können:

Website

In der Realität sah es aber - vereinfacht ohne die 3. Dimension - eher so aus:

Website

Und so darf es auch ruhig sein. Man lernt mehr als man beabsichtigt hatte.
Jeder kann eine Website in wenigen Wochen erstellen. Ich habe mehrere Monate gebraucht, da mich der Inhalt mindestens genauso beschäftigt hat und ich das Ganze 'nebenbei' gemacht habe.

Die nächste Ausbaustufe für meine Website ist die Verwendung von PHP und MySQL.

Dynamische Webseiten

Für die Verwendung dynamischer Daten oder zur Erstellung einer Webanwendung sind serverseitige Scriptsprachen erforderlich.
Dynamisch bedeutet dabei, dass die Webseite erst beim Aufruf generiert wird und nicht als statisches HTML-Dokument auf dem Server bereit liegt.
Soll eine Seite (tages-)aktuelle Daten enthalten, ändern sich Daten häufig oder ähneln sie sich von der Strukur, sollte man die Seite dynamisch gestalten.
Auf meiner Website bietet sich der HS-Test an, diesen während der Laufzeit zu generieren, da er aus ähnlich strukturierten Fragen besteht. Für den Anfang habe ich darauf verzichtet, da keine größeren Anpassungen zu erwarten sind.

PHP / MySQL

PHP ist die am weitesten verbreitete serverseitige Scriptsprache in der Webentwicklung.
Wer als Webentwickler Fuß fassen will, sollte PHP beherrschen.

Neben der dynamischen Erzeugung von Webseiten wird PHP auch dazu verwendet, Daten zu verarbeiten und (zentral) abzuspeichern.
Ein Highscore für Black Chesster wäre hier ein einfaches Beispiel.

Daten können in Dateien abgelegt werden. Bei komplexeren Datenstrukturen bietet sich allerdings eine (relationale) Datenbank an.
Am häufigsten wird MySQL in Zusammenhang mit PHP verwendet.
PHP und MySQL sind kostenlos. Für die Entwicklungsumgebung braucht man etwas mehr als einen Texteditor und eine Browser. Zusätzlich sind noch ein Webserver und eine Datenbank erforderlich. Ein Gesamtpaket mit freier Software für die Testumgebung bietet z.B. XAMPP.

Der Betrieb einer dynamischen Website stellt sich also insgesamt wie folgt dar:

Betrieb Website

Und was sonst noch wichtig ist:

  • Sicherheit
    Spätestens vor der Veröffentlichung (je früher, desto besser) sollte man sich Gedanken über die Sicherheitsanforderungen seiner Seiten machen.
    Bei jeder Anwendung, die Usereingaben entgegennimmt, sollte man mögliche Risiken erkennen und Vorkehrungen treffen.
    Wer z.B. ein Kontaktformular anbietet, sollte sich vor Spam schützen (Stichwort 'Captcha' oder alternative Ansätze).
    Je sensibler die Daten sind, desto mehr Wert sollte auf die Sicherheit gelegt werden.
    Stichwörter hier sind:
    • Userauthentifizierung
    • Cross-Site-Scripting (XSS)
    • SQL-Injection
    • URL-Manipulation
    • Session Hijacking
    Für meine Website sind diese Gefahren bisher nicht relevant.
  • SEO
    SEO (search engine optimization ) steht für Suchmaschinenoptimierung, worüber es ganz Bücher gibt.
    Wer von Google und Co. gefunden werden will, sollte sich die Zeit nehmen und sich etwas eingehender damit beschäftigen.
  • Rechtliches
    Urheberrecht, Datenschutz und Impressumspflicht sollten in jedem Fall berücksichtigt werden.

Veröffentlichung

Um eine Website zu veröffentlichen, braucht man eine Domain und einen Provider.
Die Dienste eines Providers kosten ein paar Euro im Monat.

Bevor man seine Webseiten veröffentlicht, sollte man diese validieren, d.h. prüfen lassen, ob diese syntaktisch korrekt sind. Es gibt dafür im Netz z.B. unter dem Stichwort 'HTML Validierung' Tools, die dieses kostenlos übernehmen.

Um die Dateien zum Server des Providers hochzuladen, braucht man ein unterstützendes Tool. Ich habe das kostenlose Tool 'FileZilla' gewählt.
Falls man zunächst nur eine Testversion hochladen möchte, besteht die Möglichkeit, Subdomains anzulegen und diese mit einem Passwort zu schützen.

Fazit

Falls ich Sie nicht abgeschreckt habe: für eine eigene Website braucht es nicht viel!

  • Eine Idee
  • Lust auf etwas Neues
  • Etwas Zeit
  • Einen PC mit Internetzugang
Website

Mehr braucht es für den Anfang nicht.


In jedem Fall habe ich viel gelernt und eines ganz besonders: ein professioneller Webentwickler werde ich in diesem Leben nicht mehr – dafür bin ich zu alt - und zu langsam.