Webseiten-Erstellung

Webdesign » Webseiten Erstellung – CMS Systeme

Moderne Webseiten-Programmierung

Moderne Webseiten erstellen & saubere Programmierung

Webdesign modern und valide für alle gängigen Ausgabegeräte wie Desktop-PC, Tablet oder Smartphone stellt hohe Anforderungen an den Programmierer. Das Design einer Webseite ist die Visitenkarte des Unternehmens. Nicht alles was benutzerfreundlich ist, muss langweiliges Aussehen haben. Es soll in erster Linie den Benutzer auf der Webseite gezielt lenken und ihm das Navigieren erleichtern. Barrierefreies Webdesign garantiert, dass jeder Besucher und natürlich auch die Suchmaschinen sie nutzen und lesen können.

Internetseiten erstellen mit CMS-System

  • Sie wollen Ihren Internetauftritt lieber in ein CMS-Systeme packen?
  • Sie möchten Ihre Inhalte wie Texte und Bilder selber pflegen?

Kein Problem, ich erstelle Ihnen Webseiten in CMS-Systemen (Content-Management-Systeme) – ganz nach Ihren Wünschen, valide und für Suchmaschinen optimiert. Ich übernehme gerne auch bestehende Websites, die bereits in CMS-Systemen erstellt wurden, bei den Suchmaschinen aber kein Ranking erreichen.

Vorteile von Content-Management-Systeme

Heutzutage werden fast alle größeren Webauftritte mit Hilfe von Content-Management-Systemen (kurz: CMS) erstellt und gepflegt. Das vereinfacht die Änderungen von Text und Bild.

Die Vorteile sind folgende:

  • Redakteure kümmern sich nur noch um Inhalt und Struktur
  • Die Bearbeitung der Web-Inhalte erfolgt über den Browser
  • Änderungen sind unproblematisch im Template durchzuführen
  • Die gesamte Datenspeicherung wird vom CMS übernommen

Design & Layout

Die Webprogrammierung mit (X)HTML und CSS bietet einen enormen Freiraum zur Gestaltung der Internetseiten. Dabei leistet diese Programmierung einen Beitrag zur Accessibility (Barrierefreiheit) und Usability (Zugänglichkeit) und ist somit den Webstandards entsprechend.

Weg von den Einschränkungen des Tabellenlayouts sind mit HTML5 oder (X)HTML und CSS großartige Designs möglich.

Benutzerfreundliches modernes Webdesign

  • Internetseiten sollen modern und individuell gestaltet sein. Dabei werden die Wünsche des Auftraggebers selbstver­ständlich berücksichtigt.
  • Egal ob ein einfaches oder eher exklusives Webdesign gewählt wird, der Webauftritt soll zu Ihrem Unternehmen passen, die Besucher begeistern und auf den Webseiten zum Verweilen einladen.

Trennung von Inhalt und Design

Die Erstellung aller Webseiten mit CSS, Cascading Style Sheets, bringt enorme Vorteile für Ihren Internetauftritt.

  • Übersichtlicher und schlanker Quellcode
  • Schnelle Ladezeiten der Webseiten
  • Flexibles Design
  • Bessere Indexierung durch die Suchmaschinen
  • Barrierefreiheit, z. B. für Blindenprogramme – Accessibility
  • Hohe Benutzerfreundlichkeit – Usability

Ich arbeite nach diesem Prinzip und erstelle so Ihre neuen Internetseiten oder passe den vorhanden Webauftritt an die aktuellen Gegebenheiten an. Responsives WebdesignBei der Programmierung mit CSS hat man wesentlich mehr Gestaltungs­möglichkeiten als mit HTML. Schnell sind Layout Anpassungen wie Farben, Schriftarten, Schriftgrößen, Layers usw. erledigt. Abgesehen von einem schlanken Quellcode, der für die Suchmaschinen von großer Bedeutung ist, halten sich die Kosten bei einer Layout-Änderung in Grenzen.

Um sauberen Quellcode also valide Internetseiten zu erhalten, müssen auch bei CMS-Systemen gute Programmierkenntnisse in HTML, PHP, JavaScript und CSS vorhanden sein.

Valide und sauber programmierte Internetseiten – barrierefreies Webdesign


Nützliche Tools

Beim Webdesign spielt die Farbwahl eine entscheidende Rolle. Am Anfang der Entwicklung eines Webdesign Projekts steht hierbei auch die Farbgebung.

Hier finden Sie einige Design-Tools, welche die Erstellung von Farbpaletten erleichtern:

Paletton-Generator
Seit 2002 ein Designer-Tool für die Erstellung von Farbkombinationen, die sehr gut harmonieren.

ColorBlender
Über einen Schieberegler kann die Hauptfarbe festgelegt werden. Sogleich werden fünf weitere dazu passende Farben angezeigt. Natürlich kann auch jede Farbe einzeln angepasst werden.

Adobe Kuler
Mit dem Adobe Kuler lassen sich Farbpaletten anlegen, archivieren und exportieren. Adobe Kuler lässt sich z.B. auch direkt über Adobe’s Creative Suite Anwendungen aufrufen. Eine große Auswahl an Farbschemata ist bereits vorhanden.


Lorem ipsum Text erstellen

Meist liegen bei der Erstellung des Layouts für ein Web-Projekt die Texte noch nicht vollständig vor. Dann generieren Sie mithilfe des Loremipsum-Generators ein paar Absätze und schon sieht das Design authentisch aus.
Mit dem Lorem Ipsum-Generator erstellen Sie einfach soviel Text wie Sie benötigen. Kopieren diesen und fügen ihn als vorläufigen Text-Platzhalter in die Webseite ein. Es können verschieden Varianten von Lorem ipsum Text heruntergeladen werden.

Blindtexte als Platzhalter

Lorem ipsum Text - BlindtextBlindtexte sind Texte, die beim Entwurf eines Layouts für ein Web-Projekt als Platzhalter für spätere Inhalte dienen. Sie werden auch als Dummytexte bezeichnet. Blindtexte werden auch zu Demo-Zwecken für verschiedener Schrifttypen verwendet. Sie ergeben im Normalfall keinen inhaltlichen Sinn. Blindtexte bestehen meist aus einer willkürlichen Folge von Wörtern oder Silben. Wiederholungsmuster trüben also nicht den Gesamteindruck. Die Schriftarten können besser miteinander verglichen werden. Vorteile bringt es dem Webdesigner, wenn die Blindtexte halbwegs realistisch erscheinen, damit die Wirkung des Layouts der späteren Internet-Präsenz nicht beeinträchtigt wird.


Erstellung von Web-Auftritten heute

Bei manchen Publikationen sind keine Programmier-Kenntnisse erforderlich, wie z. B. den Bau-Kasten-Systemen, bei manchen sind Programmier-Kenntnisse zumindest von Vorteil und bei guten, sauberen, barrierefreien und validen Websites ist gute Programmierung unabdingbar.

Website-Typen
Wenn Sie vorhaben, einen Internetauftritt im Web zu präsentieren, dann sollten Sie diese Typen kennen:

Homepage: Als Homepage wird die Einstiegsseite, Indexseite oder Hauptseite einer Internetpräsenz bezeichnet. Das ist meist die Seite, die bei der Eingabe der Internetadresse als erstes erscheint. Umgangssprachlich wird der Begriff Homepage oft für eine komplette Website verwendet.

Website: Eine Website auch Web-Auftritt oder Web-Präsenz bezeichnet, ist der komplette Internetauftritt. Dieser besteht aus mehreren Webseiten.

Webseite: Webseiten werden die einzelnen Seiten eines Internetauftritts bezeichnet. Dies können sein: Angebot, Referenzen, Kontakt, Impressum, uvm. Alle Webseiten zusammen ergeben eine Website.

Weblog kurz: Blog: Ein Weblog – Kurzform: Blog, ist eine dynamisch präsentierte Website, die aus vielen einzelnen Beiträgen besteht, ähnlich einem Tagebuch.

Web-Shop: Ein Web-Shop ist ein Web-Auftritt, der einen Produktkatalog präsentiert und einen Warenkorb zur Bestellabwicklung hat.

Web-Plattform: Eine Web-Plattform ist eine Website mit ganz speziellen Zielgruppen. Häufig arbeiten diese Web-Plattformen mit registrierten Benutzern.


Bestandteile einer Webseite

Öffnen Sie Ihren Browser und betrachten Sie eine Webseite, dann sehen Sie Bilder, Grafiken und Text. Eventuell hören Sie einen Sound oder sehen Animationen. Während die Webseiten immer komplexer werden, bleiben die Strukturen relativ einfach.

Eine Webseite besteht primär aus drei Komponenten:

  • Textinhalt: Das ist der reine Text auf der Seite, der die User über die Produkte, die Firma, die Termine usw. informiert.
  • Verweise auf andere Dateien: Diese Links, die wiederum andere Objekte wie Bilder, Videos und Audio-Dateien, CSS-Dateien oder JavaScript-Dateien laden und so die Webseite um bestimmte Effekte ergänzen.
  • Markup: Diese HTML-Elemente beschreiben Ihren Textinhalt und lassen Ihre Querverweise funktionieren.

Alle drei Komponenten bestehen aus Text. Diese wesentliche Eigenschaft bedeutet, dass die Webseiten in reinem Text-Format gespeichert werden und so in jedem Browser auf einer beliebigen Plattform (egal nun Tablet, Smartphone oder Desktop-PC) betrachtet werden können.

HTML-Tags und ihre Geschichte

Der ursprüngliche Standard für HTML war HTML 2.0. Die meisten Tags dieser ursprünglichen Spezifikation werden von allen Browsern unterstützt.

Mit HTML-Tags

  • Listen gestalten
  • Elemente einfügen wie Bilder, Java-Applets usw.
  • Links zu weiteren Seiten

Wichtige Bestandteile einer Webseite sind außerdem:

  • Ein CC – aussagekräftiges Logo
  • Ein eigener Firmenstil
  • Guter Content (Text)
  • Professionelle Fotos
  • Klare und logische Aufteilung der Seite

HML5 Standard

HTML (Hypertext Markup Language) ist eine Markup-Sprache (Auszeichnungssprache) und verantwortlich für die Beschreibung der Struktur einer Webseite, nicht für die tatsächliche Darstellung.
Standard war XHTML 1.1

Der Standard war XHTML 1.1 in XML (Extensible Markup Language) geschrieben. Der Unterschied zu HTML besteht darin, dass XML strengere Regeln für die Struktur eines Dokumentes enthält. Zu finden ist die Spezifikation von XHTML im Internet unter W3C oder hier in der deutschen Fassung.
Aktueller Standard: HTML5

Das W3C (World Wide Web Consortium) hat die fertige HTML5-Spezifikation vorgelegt. Ziel von HTML5 ist es, neue Elemente einzuführen, die dem aktuellen Zustand des Webs entsprechen.

Dadurch kommt die Sprache den Erfordernissen der Programmierung stärker entgegen. Webseiten können so semantisch ordentlicher strukturiert werden. Sofern alle gängigen Browser die entsprechenden Funktionen unterstützen, können die Programmierer bereits HTML5 einsetzen. Diese Empfehlung spricht auch das W3C aus.

HTML5 bietet sehr viele neue Möglichkeiten. Eine davon ist der <video>-Tag. Mit diesem Tag ist es möglich, Videos – ähnlich wie Bilder – in Websites einzubinden, ohne dass dafür ein Browser-Plugin (z. B. Flash) benötigt wird. Ebenso gehören Audio und zahlreiche neue Interface-Elemente zum Funktionsumfang von HTML5. Außerdem wurden viele Verbesserungen von XHTML in HTML5 übernommen.

Neue Programmier-Schnittstellen ( Application Programming Interfaces, API ) für die Programmier-Sprache JavaScript sind entstanden, z. B.:

  • Offline-Webanwendungen
  • das Canvas-Element zur Erzeugung dynamischer 2D- und 3D-Grafiken
  • Drag & Drop von Objekten auf einer Webseite
  • Dokumentbearbeitung in Echtzeit
  • Kommunikation über Dokumente hinweg

Nur im Zusammenhang mit der Programmier-Sprache JavaScript ist das Canvas-Element sinnvoll. Im normalen HTML erzeugt das Element lediglich ein weißes Rechteck und ist deshalb nutzlos.

Semantische Programmierung – modernes Webdesign so wird Ihre Webseite ein Erfolg

Webdesign & SEO

Alles aus einer Hand
So werden Sie gefunden!

Programmierung & SEO

Webseiten erstellen und
Suchmaschinen Optimierung
» alles aus einer Hand «

Responsives Webdesign

Moderne Web-Programmierung
für Smartphones und Tablets

Internet-Auftritt

  • Modernes Design
  • Aktuelle Inhalte
  • HTML5 / CSS3
  • CMS-Systeme
  • Individuelle Programmierung

CMS – Systeme

  • » Typo3
  • » WordPress
  • » Redaxo
  • » Joomla!
  • » Drupal
  • » Cantao
  • » Plone