Webdesign im Ruhrgebiet

Seitenübersicht

Die Artikel dieser Internetseite beschäftigen sich mit verschiedenen Themen rund um Webdesign.

• Adobe Flash

  Adobe Flash (kurz Flash, früher Macromedia Flash) ist ein kleines Programm zur Erstellung multimedialer Inhalte, sogannanter Flash-Filme.

  Um Flashdateien anzeigen zu können wird das Programm Flash Player benötigt. Es ist für viele Browser schon als Plugin erhältlich oder standartmässig vorhanden. Da Adobe Flash früher ein reines Animationswerkzeug war, wurde es häufig als Programm zur Erstellung von Intros oder für animierte Werbebanner genutzt.

  Seit Version 4 ist Adobe Flash auch in der Lage, kompliziertere Webinhalte wie zum Beispiel die Bewegung eines Viertacktmotors darzustellen. Aufgrund der großen medialen Fertigkeiten werden in Flashs oft Video- und Sounddateien verwendet.

• Adobe Photoshop

  Adobe Photoshop ist ein Bildbearbeitungsprogramm des Softwareherstellers Adobe Systems. Mit diesem Programm wird in erster Linie eine Skizze für die Webseite gemacht, um die Vorstellungen des Kunden zu visualisieren und ihm die realisierbaren Möglichkeiten darzustellen. Weiter dient es zur grafischen Optimierung der Webseite und zur Bearbeitung einzelner grafischer Elemente oder Bilder auf der Webseite. Mit Adobe Photoshop können Bilder auf verschiedene Weisen bearbeitet werden, zum Beispiel können roten Augen bearbeitet oder die schärfe einzelner Bilder bearbeitet werden. Doch auch spezielle Effekte, wie Transparenz können mit Photoshop in das Bild eingefügt werden.

• AJAX

  AJAX ist ein Konzept zur asynchronen Datenübertragung zwischen einem Server und einen Browser. Das heisst das die Seite bei Veränderung des Inhalts nicht aktualisiert werden muss.

  Asynchronous JavaScript and XML (AJAX) bezeichnet ein Konzept zur asynchronen Datenübertragung zwischen einen Server und einen Browser. Es wird auf einer Seite eine HTTP-Anfrage durchgeführt ohne die komplete Seite neu zuladen, was sonst der fall wäre. Die eigentliche Neuerung ist jedoch, dass nur gewisse Teile der HTML-Seite neu geladen oder allmählich nachgeladen werden. Traditionell übermitteln Webanwendungen zuvor ausgefüllte Formulare an einen Webserver. Dieser antwortet, indem er dem Nutzer die Daten neu generiert. Da der Webserver die Seite bei jeder neuen Anfrage immer neu generieren muss, erscheint das ganze als wenig intuitiv und eher träge. Ajax ist dagegen in der Lage nur die Daten anzufordern die neu generiert werden müssen. Dies funktioniert über einen XML-Webservice. Hier verarbeitet der Client, also der Webbrowser die Daten nicht selbst, sondern lässt sie von der Ajax-Engine bearbeiten. Dadurch reagiert die Benutzeroberfläche wesentlich besser auf Anfragen seitens des Benutzers.

• Bilder und Lizenzen

  Für Websiten werden Bilder benötigt um diese nicht langweilig oder steril erscheinen zu lassen. Sie sollen den Auftritt der Webseite auflockern und ihr das richtige Flair verleihen.

  Es stehen zwar einige freien archive zur verfügung, doch sind die eher rar. Doch noch lange sind nicht alle Bilder frei. Die freien Bilder können direkt verwendet werden, teilweise auch ohne den Urheber zu nennen. Doch für andere Bilder muss eine Lizenz erworben werden.

  Die Preise von lizenzen sind sehr weit gefächert, und können von kostenlos, bei freien Bilder, über 0,10€ bis 5€ oder gar auf 99-300€ anwachsen. Wobei meist gildt, dass umso teuer das Bild desdo höher auch die Qualität.

  Es gibt verschiedene Arten von Lizenzen. Einmal währen da die freien Lizenzen wie GNU, der General Public License. Hier dürfen Bilder frei nach eigenem Belieben genutzt weden, wobei kommerzieller Nutzen sogar erwünscht ist. Dann gibt es noch die Creative Commons eine gemeinützige Gesellschaft, die im Internet verschiedene Standart-Lizenzverträge anbietet.

• Browser

  Der Internetbenutzer kann zwischen mehreren Browsern wählen. Diese werden benötigt um den Inhalt einzelner Webseiten grafisch darzustellen. Windows Internet Explorer ist der Standard-Browser von Microsoft. Er wird bei Windows (ab Windows 95) mitgeliefert. Die derzeit aktuellste Version ist Internet Explorer 7. Der Windows Internet Explorer hat einen Marktanteil von über 80%. Durch den Umstieg auf Mozilla Firefox fällt dieser jedoch seit einigen Jahren stetig.

  Der Mozilla-Firefox ist ein weiterer Webbrowser, der sich vor allem durch seine hohe Geschwindigkeit und Sicherheit auszeichnet. Er ist der Nachfolger des nicht mehr weiter geführten Mozilla. Das Mozilla-Projekt basiert auf dem Netscape-Browser. Der Marktanteil des Mozilla-Firefox liegt ungefähr bei 10% und ist steigend.

  Weiter gibt es noch Opera, einen Webbrowser der sich durch seine Funktionsvielfalt auszeichnet. Neben den eigentlichen Internetfunktionen bietet er einen integrierten E-Mail-Client, Chatmodule, BitTorrent-Unterstützung und viele, oft einmalige Funktionen zusätzlich. Opera ist darüber hinaus für eine Vielzahl von Betriebssystemen und Benutzersprachen verfügbar.

  Ein großer Unterschied zwischen verschiedenen Browsern ist die Darstellung einzelner Webseiten. So kommt es vor, dass der Internet Explorer eine Webseite völlig anders darstellt als der Mozilla-Firefox oder Opera. Dies hängt mit einer Vielzahl von Programmierfehlern im weit verbreiteten Internet Explorer 6 zusammen. Eine wichtige Aufgabe bei der Erstellung von Webseiten ist es also, diese Unterschiede zu beachten und durch kluge Programmierung zu beheben. Dies gewährleistet eine identische Darstellung von Internetseiten auf ganz unterschiedlichen Browsern.

• CMS

  Ein Content-Management-System (CMS) ist ein Anwendungsprogramm, dass die Erstellung und Bearbeitung des Inhalts von Internetseiten ermöglicht. Dabei wird auf Online-Texteditoren zurückgegriffen, die einen mit Programmen wie Microsoft Word vergleichbaren Komfort bieten.

  Weiter können hiermit Inhalte in das Internet gestellt werden. Man unterscheidet zwischen einem client- und einem serverseitigem CMS. Ein serverseitiges CMS ist auf dem Server gespeichert und wird dem Benutzer als eigenständige Oberfläche (Webseite) präsentiert. Dafür wird eine Sprache wie PHP in Verbindung mit einer Datenbank verwendet. Hierdurch können mehrere Personen an der Webseite mitwirken. Clientseitige CMS werden mit einem Programm gesteuert, das auf einem PC installiert ist und dann z.B. mittels FTP hochgeladen. Diese Variante lohnt vor allem, wenn man mit größeren Webinhalten, wie zum Beispiel Videos, arbeitet, da diese zu groß wären um sie serverseitig zu bearbeiten.

  Es wird dabei zwischen einem Frontend, also dem, was der Besucher der Webseite hinterher an Inhalten sieht, und einem Backend, also der Verwaltungsoberfläche, unterschieden.

• CSS

  Cascading Style Sheets ist für das Design einzelner Webinhalte verantwortlich.

  Cascading Style Sheets (CSS) ist eine deklarierte Stylesheet-Sprache für strukturierte Dokumente. Sie dient zum designen einzelner Webinhalte. CSS ermöglicht es die Darstellung dem jeweiligen Ausgabemedium anzupassen. Neben der Möglichkeit diverse Veränderungen im Farb- und Schriftbereicht durchzuführen bietet CSS auch die Möglichkeit Elemente frei zu positionieren oder verschiedene Hintergrundbilder festzulegen. CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web. Es stellt eine Ergänzung zu HTML dar. Während HTML die Strukturierung der Seite angibt, indem es Texte gliedert, ist CSS dafür da, diese Elemente zu gestalten. So ist es zum Beispiel auch möglich, Seiten mehrspaltig aufzubauen.

  Es sollte auch darauf geachtet werden, das Layout und Inhalt voneinander getrennt sind, da so die Webseite wesentlich schlanker als vorher ist.

• Drupal

  Drupal ist ein weiteres Open-Source-Web-Content-Management-System. Dieses dient vor allem zur Unterstützung des Aufbaus von Web-Communities.

  Genau wie Typo3 basiert auch Drupal auf PHP. Es unterscheidet sich von anderen CMS vor allem durch die Umsetzung von Ansätzen einer Social Software. Mit Drupal können Nutzer eigene Weblogs anlegen, sich in Foren austauschen oder eigene Artikel veröffentlichen. Drupal besteht aus einem Kern (Engl. Core), der den Grundbaustein darstellt und Modulen die nach Bedarf vom Administrator, also dem Verwalter der Webseite, hinzugefügt werden können. Durch die Vielzahl an Möglichkeiten die Drupal bietet, kann dieses sowohl als 1-Personen-Weblog als auch als Web-Community mit tausenden Mitgliedern verwendet werden.

• FTP

  File Transfer Protocol (FTP) dient der Datenübertragung zwischen dem Benutzer (Client) und einem Server. Werden hier die Daten vom Server auf den Benutzer "übertragen" so nennt man dies Download, wenn die Daten vom Benutzer auf den Server übertragen werden nennt man dies Upload. Außerdem können mit FTP Verzeichnisse angelegt und ausgelesen, sowie Verzeichnisse und Dateien umbenannt oder gelöscht werden. Da mit diesem Programm Daten übertragen weden können, wird es oft von Webdesignern verwendet um die erstellte Webseite online zustellen.

• HTML

  HTML stellt die Grundlage einer Webseite da. Es bestimmt die Struktur der Webseite. Hypertext Markup Language (HTML) ist eine textbasierte Auszeichnungssprache zur Darstellung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von so genannten Browsern dargestellt. Es bestimmt die Struktur der Webseite. [umformulieren] HTML wird durch xHTML ersetzt, wie das W3C, ein Gremium zur Standardisierung des World Wide Web, festgelegt hat. xHTML ist eine Neuformulierung von HTML in XML, eine Sprache zur Struktur von einzelnen Webinhalten, die vom W3C festgelegt wurden. XML regelt den Aufbau von Dokumenten die Daten enthalten, die teilweise eine feste Struktur haben, aber auch solche die nicht diesem Schema entsprechen. XML lässt somit offen, ob und wie ein XML-Dokument automatisiert werden kann und soll. XML ist eine Vereinfachung von SGML. [einfacher, weniger technisch] Durch die Verwendung der strenger geregelten und einfacher zu parsenden Teilmenge von SGML, XML sind XHTML Dokumente einfacher und klarer strukturiert.

• HTML-Editor

  Um die für Webseiten benötigten Texte zu schreiben und zu bearbeiten, benötigt man einen Editor.

  Ein HTML-Editor ist ein Editor der zum schreiben oder bearbeiten der benötigten HTML-Dokumente dient. Hierbei unterscheidet man zwischen Editoren, in denen direkt der verwendete Quellcode editiert wird und solchen in denen die Seite beim bearbeiten so angezeigt wird, wie sie im Internet angezeigt werden würde. Diese werden WYSIWYG-Editoren (What you see, is what you get - zu Deutsch was man sieht, ist was man bekommt) genannt. Gute HTML-Editoren verfügen über eine Syntaxhervorhebung. Die Syntax ist praktisch der Aufbau des HTML-Codes. Bei dieser werden einzelne Befehle, auch Tags genannt, im Quellcode farblich gekennzeichnet.

  Weiter gibt es noch die Funktion des Debuggig, also der Fehlerbehebung. Hier wird dem Webdesigner bei der Erkennung und Behebung von Fehlern geholfen. Dies funktioniert ähnlich wie bei der Rechtschreibprüfung von Microsoft Word, verfügt jedoch über deutlich mehr Komfort und Möglichkeiten.

  Der Unterschied zwischen einem einfachen Texteditor und einem HTML-Editor ist, dass reine Texteditoren wie z.B. Microsoft Word für eine ganz andere Zielgruppe konzipiert sind. Der Anwender benötigt zum Beispiel Funktionen für Seriendruck, jedoch kann er mit Syntaxhervorhebung nichts anfangen. Weiterhin ist die Benutzeroberfläche wesentlich einfacher strukturiert. Bei speziellen Programmierungs-Editoren ist eine stark unterteilte und vielfach aufgespaltene Oberfläche alltäglich.

• PHP

  PHP sorgt für dynamische Webinhalte.

  PHP (ursprünglich Personal Home Page Tools jetzt PHP: Hypertext Preprocessor) ist eine Skriptsprache die zur Entwicklung dynamischer Webinhalte dient. PHP zeichnet sich vor allem durch die breite Datenbank-Unterstützung und Internet-Protokoleinbindung aus. Beispielsweise existieren Programmbibliotheken, um Bilder und Grafiken in Webseiten dynamisch einzubinden. PHP wird, im Gegensatz zu Java, welches clientseitig ausgeführt wird, serverseitig ausgeführt. Das heisst, dass der Quellode nicht an den Browser übermittelt wird sondern an einen Interpreter des Webservers weiterleitet. Dort wird dieser ausgeführt, analysiert, abgearbeitet und das Ergebnis in die Internetseite eingebunden. Viele moderne Webanwendungen werden u.a. auf der Basis von PHP programmiert.

• Software

  Ein Webdesigner benötigt, genau wie jeder andere Handwerker, Werkzeuge um seiner Arbeit nachzugehen. Nur das es sich hier nicht um Hammer und Meißel sondern um einen HTML-Editor und Photoshop handelt.

  Hier wollen wir ihnen diese Werkzeuge kurz vorstellen.

• Suchmaschinenoptimierung

  Beim Bau einer Website sollte auch auf Suchmaschinenoptimierung geachtet werden. Also die Beachtung, dass die Homepage möglichst weit oben steht, da ca. 90% der User auf eine Website durch Suchmaschinen gelangen

  Das Programm, dass bestimmt wie weit oben eine Homepage steht wird Pagerang genannt. Genaugenommen ist es ein Algorithmus der von Larry Page (daher der Name) und Sergey Brin etwickelt wurde und in vielen Suchmaschinen wie Google verwendung finden um das Ranking festzulegen.

  Die Positionierung der Seite, das sogenannte Ranking, wird von Suchmaschinen anhand interner Kriterien vergeben. Dabei besucht die Suchmaschine regelmäßig die gelisteten Seiten und analysiert diese inhaltlich. Umso informativer und innovativer die Website ist, umso höher steht diese dann im Ranking. Ebenfalls sollte auf den Domainnamen, also die Internetadresse der Homepage, geachtet werden. Er sollte ihre Firma oder ihr Angebot wiederspiegeln. So steht eine Webseite für die Suchbegriffe "Meier" und "Holz" meist höher in Suchmaschinenergebnissen, wenn die Internetadresse die Begriffe beinhaltet (www.meier-holz.de).

  Weiter wird das ganze noch durch Backlinks, also Links die zur Website zurückführen, beeinflusst. In vielen Suchmaschinen werden diese als Indiz dafür genommen, wie beliebt die jeweilige Website ist. Doch lassen sie sich nur geringfügig und mit hohem Aufwand durch den Betreiber beeinflussen.

• Typo3

  Typo3 ist ein Open-Source-Web-Content-Management-System für mittlere bis große Websites. Typo3 basiert auf der serverseitigen Skriptsprache PHP.

  Typo3 ist ein Open-Source-Web-Content-Management-System, also ein System das dazu dient Inhalte in Form von Webseiten zu veröffentlichen. Es wird vor allem für mittlere bis große Webseiten genutzt, da es hohe Ansprüche an die Leistungs- und Konfigurationsfähigkeit des Servers stellt. Typo3 basiert auf der serverseitigen Skriptsprache PHP. Typo3 kann mittels Erweiterungen, auch Plugins genannt, an fast jede Situation angepasst werden. Derzeit sind etwa 2000 solcher Erweiterungen verfügbar. Zu den Funktionen gehören unter anderem zeitliche Steuerung zum Einblenden und Entfernen von Inhalten, Suchfunktionen, Mehrsprachigkeit, suchmaschinenfreundliche URLs, die sich über verschiedene Zusatzmodule (so genannte Extensions), wie z. B. Gästebücher, Foren, Newsletter, Statistikmodule etc. erweitern lassen. Bilder, Texte, Tabellen, Animationen sowie externe Datenquellen können auch in Typo3 verwaltet werden. Das eingebaute Redaktionssystem erlaubt eine professionelle Verwaltung von Inhalten und Artikeln auf Internetseiten. So ist es möglich, dass viele Mitarbeiter gleichzeitig den Content einer Webseite bearbeiten. - screenshots

• Vergleich Typo3 - Drupal

  Typo3 sollte verwendete werden, wenn man eine größere Homepage erstellen will und auch die dafür benötigten Möglichkeiten hat(Große Firmen Homepages etc.). Drupals Anwendungsbereich liegt vor allem im Bereich der Social Software und ist damit besonders für Web-Commnitys geeignet - in die anderen artikel integriert: allgemein auch allgemein gehalten, aufgeteilt auf cms nach vorteilen

• Webdesign

  Alles sollte so einfach wie möglich sein - aber nicht einfacher. Albert Einstein

  Webdesign umfasst die Gestaltung und den Aufbau von Webseiten für das World Wide Web. Dabei werden in der Regel strukturierte Texte, die in Programmiersprachen wie zum Beispiel XHTML bzw. HTML verfasst sind, samt ergänzenden Grafiken und Bildern mit CSS formatiert. Der Webdesigner hat dabei den Auftrag, die Vorstellungen seines Kunden in Hinblick auf die Darstellung bestmöglich zu realisieren.

  Der Ablauf ist wie folgt. Als erstes kommt der Kunde zum Webdesigner. Sie besprechen die Vorstellungen des Kunden. Danach zeichnet der Webdesigner sich mit Photoshop eine Skizze, einmal um das vom Kunden gewünschte zu realisieren aber auch um dem Kunden zu zeigen was möglich ist. Nachdem beide sich auf ein Konzept geeinigt haben, geht der Webdesigner daran das Grundgerüst für die Webeite, also das HTML-Dokument, mit einem Editor zu schreiben. Darauf folgt eine grafische Verschönerung des ganzen durch CSS. Nun kann nach Bedarf noch Ajax, PHP oder ein sogennantes Flasch integriert werden. Hiermit wird die Homepage lebendiger, da diese Programme für dynamische Webinhalte sorgen. Darauf wird die vorher angfertigte Homepage mit einem Content-Management-System ins Internet gestelt. Nun wird die Seite nur noch mittels einem FTP ins Internet geladen und online gestellt.

  Es muss während des Programmierens auch auf Accessibility, die möglichst von körperlichen und/oder technischen Möglichkeiten uneingeschränkte Nutzung des Internet-Angebots, geachtet. Weiter muss auch darauf geachtet werden, dass das Angebot plattformunabhängig ist, also das es gleichermaßen auch auf einem PDA oder einem Handy dargestellt werden kann. Weiter muss eine strikte Trennung von Inhalt (Texte, Bilder etc.) und dem Layout vorhanden sein.