Zum Hauptinhalt springen
Web Development Hauptbild

Web Development

Umsetzung des Designs in Code

Der Begriff Web Development kommt aus dem Englischen und lässt sich mit Web Entwicklung übersetzen. Die Entwicklung von Websites befasst viele Aufgabengebiete.

Ich befasse mich primäre mit der Front-End Entwicklung. Das Front-End befasst sich “lediglich” mit den visuellen Aspekten der Website und die Interaktivität des Nutzers oder der Nutzerin mit der Website.

Nachdem das Design erstellt wurde und von Ihnen freigegeben wurde, wird das Design dann Schritt für Schritt in Quellcode umgewandelt. Das Ziel ist dabei eine “Pixel perfekte” Website aufzubauen, die stabil und vollständig funktionsfähig ist.

Ebenso wird darauf geachtet, dass die Syntax sauber ist. Dadurch kann gewährleistet sein, dass in Zukunft die Website gewartet werden kann.

Wird eine Datenbank oder ein Server - meist in Form eines CMS (Content Management System) - verwendet, bin ich in der Lage die Daten herauszulesen und diese visuell auf der Website darzustellen.

Die Grundpfeiler jeder Website

Typische “Programmiersprachen” sind HTML, CSS und Javascript.

Die Grundpfeiler einer Website

Die Grundpfeiler einer Website

HTML (Hypertext Markup Language)

HTML ist der Grundbaustein jeder Website.

HTML ist sozusagen das Gerüst oder Skelett der Website. Die HTML Datei beschreibt den Inhalt bzw. die Elemente auf der Website.

Das Schreiben von HTML ist auf dem ersten Blick recht einfach. Aber man sollte stets die richtigen HTML Elemente verwenden.

D.h. Unterschriften sollten auch als Headings definiert werden. Viele Elemente, wie Button, Navigationen, Footer oder Formen besitzen passende HTML Elemente.

Wenn es möglich ist, sollte man immer semantische HTLM5 Elemente (Semantic HTML) verwenden. Die netten Nebeneffekt sind barrierefreie Websites und Websites, die besser für die Suchmaschinen ranken (SEO).

CSS (Cascading Style Sheets)

Für die Optik und das Design wird zusätzlich noch CSS benötigt. Kurz gesagt ist CSS für das Styling der Website verantwortlich. Mit CSS kann man das Layout anpassen, Farbe hinzufügen, Schriftgrößen und Bilder anpassen und vieles mehr. Wenn HTML das Gerüst ist, wird CSS als Haut bezeichnet.

Mit CSS lässt sich das Layout für verschiedene Bildschirmgrößen anpassen. Dadurch ist die Website für jedes Gerät optimiert (Responsive Webdesign).

Javascript

Zusätzlich kann für die Interaktivität auf der Website die Programmiersprache Javascript (JS) benutzen werden. Javascript ist bei der Website das Gehirn und die Muskeln. Ein einfaches Beispiel wäre das Betätigen einer Navigationsleiste. Meistens gibt es bei kleineren Bildschirmen bei der Navigationsleiste einen sogenannten “Toggler”. Um diese zu öffnen, muss der Benutzer auf die Leiste drücken. Daraufhin öffnet sich dann das Menü. Diese Interaktivität lässt sich einfach mit Javascript implementieren.

Statische Website

Mit diesen drei Grundpfeiler lassen sich statische Websites erstellen.

Eine statische Website ist wie eine digitale Broschüre. Der Inhalt einer statischen Website ist in den HTML Code eingebettet und ist bei jedem Aufruf der Website gleich.

Wird eine statische Website im Browser (Chrome, Firefox oder ähnliches) aufgerufen, wird diese Anfrage (engl. Page request) zu einem Server geschickt. Dieser sendet daraufhin eine HTML Datei zu dem Browser des Benutzers. Dies geschieht in Millisekunden, da eine HTML Datei meistens klein ist und der Server nur die Datei zurücksenden muss.

Seitenanfrage einer Statischen Website

Seitenanfrage einer Statischen Website

SEO-Freundlich, schnell und sicher

Ein „fest" eingebetteter Inhalt ist gut für Suchmaschinen (SEO). Die Suchmaschinen, wie z.B. Google oder Bing, “crawlen” jede Seite und ordnen den Inhalt zu einem bestimmten Suchbegriff und Platzieren diese nach Relevanz in den Index (Indexierung).

Der Inhalt ist bei statischen Websites komplett in der HTML Datei enthalten, somit ist es für die Suchmaschinen einfacher den Inhalt zu “verstehen”.

Statische Websiten sind standardmäßig schnell und sicher. Es handelt sich dabei am Ende nur um HTML-Dateien, die der Server dem Benutzer servieren muss. HTML-Dateien benötigen keine Datenbank, deswegen ist das Servieren dieser Dateien schnell. Phishing-Attacken, Malware oder unbefugte Zugriffe auf ihre Website sind bei reinen HTML-Dateien nicht möglich.

HTML-Dateien benötigen wenig Speicherplatz. Das Hosten statischer Websites ist daher einfach und günstig.

Statische Websites Beispiele

Statische Websites Beispiele

Statische Websites Beispiele

Für wen eignen sich statische Websites

Für den Aufbau einer Webpräsenz eignen sich statische Websites perfekt.

Dennoch sollte man die Limitierungen von statischen Websites bei der Zielplanung der Website berücksichtigen.

Will man zum Beispiel eine Website mit einem Login oder Zugriff zu einem Server mit Datenbank, so sind statische Website nicht oder schlecht geeignet.

Will man hingegen als Handwerker "nur" seine Bilder und eine kurze Beschreibung mit Anfahrt und Öffnungszeiten präsentieren, reicht eine statische Website vollkommen aus.

Zurück zu den Leistungen

Bessern Sie Ihre Webpräsenz auf!

Jetzt ein Angebot einholen!