Was fürs Webdesign benötigt wird – Teil 2 – Editoren und Grafikprogramme

Medienspürnase

vor 12 Jahren

Aller Anfang ist schwer, so auch im Webdesign. Ich möchte jedem potentiellen Webmaster einen groben Überblick geben, was er auf seinem Rechner benötigt, um erfolgreich oder auch erfolglos (ganz nach belieben) seine erste Website zu erstellen. Das beinhaltet ein paar Programmchen und Tools auf dem heimischen PC oder Mac dazu ein paar Tutorials. Denn mehr braucht man nicht, um die eigenen Bilder zu präsentieren oder um Omas Kochrezepte für die Nachbarschaft öffentlich einsehbar zu machen. Das Know-How für die Websitegestaltung wird in einigen Tutorials weitergegeben, die ich hier in dem Artikel verlinke.

Mit ein paar Ideen und etwas Kreativität kann man schon viel selbst machen und der eigenen Seite eine individuelle Note geben. Die in diesem Artikel vorgestellten Programme und Tutorials bilden nur eine Auswahl aus einer großen Menge Tools, die im Internet zum Download angeboten werden. Ich habe viel Wert darauf gelegt, daß die vorgestellten Tools auf allen gängigen Notebook und Desktopbetriebssystemen lauffähig sind. Die meisten der Programme, like Filezilla oder Notepadplusplus gibts für Windows auch als Portable Versionen, die ohne Installation auf einem USB Stick entsprechender Größe untergebracht werden und von dort auch gestartet werden können. Ich arbeite hauptsächlich unter Linux und Windows, deswegen bleibt Apple ein wenig außen vor mit den Programmen. Allerdings gibt es einige der hier vorgestellten Tools und Programme auch für Apple. Webinhalte, wie die Tutorials, aber auch die eBooks können gern auch auf dem heimischen Tablet oder dem Lieblings-Smartphone gelesen und studiert werden.

Zu aller erst…

… sollte man sich ein wenig belesen, wie man aus ein bisschen Quelltext und der einen oder anderen Scriptsprache eine gute Webseite bekommt. Das geht am besten mit der richtigen Lektüre, die gleich auch noch ein paar Codebeispiele mit sich bringt. Zum einen hat man da SelfHTML von Steffan Münz. SelfHTML wird gerade überarbeitet und in einem Wiki neu strukturiert. Steffan Münz hat auch noch ein kostenloses eBook mit dem grandiosen Namen Professionelle Websites im PDF Format herausgebracht. Für ein bisschen PHP und MySQL gibt es SelfPHP. Weiterführendes Wissen für CSS hat man auf CSS4you zusammengestellt. Bücher zu Javascript und Ajax gibt es als Openbook von Galileo Computing.

Update am 23. November 2012: Google hat mich zu einem weiteren Tutorial geführt, welches sich nicht ganz ernst nimmt. Man sollte es als Tutorial für schlechtes und nicht für gutes HTML ansehen. Das Tutorial befindet sich auf Karzauninkat und wird auch am Ende des Artikels als Link mit geführt.

Office Programme und WYSIWYG-Editoren

Was verdammt ist denn WYSIWYG¿?¿ werden jetzt sicher einige Leser dieses Artikels fragen. WYSIWYG ist Neudeutsch und heißt ausgesprochen What you see is what you get, übersetzt in etwa Was du siehst, ist das was du bekommst. Im Prinzip wird die künftige Webseite schon beim Erstellen genau so angezeigt, wie sie später im Internet angezeigt wird. Der Nötige Quellcode wird im Hintergrund vom verwendeten Programm erzeugt und kann nur begrenzt mit einem WYSIWYG-Editor direkt bearbeitet werden. Das kann man schon mit dem Lieblings-Office Programm auf seinem Rechner erledigen. Windows User greifen da sicherlich auf Word und Excel von MS Office zurück, können aber auch Writer und Calc von LibreOffice oder OpenOffice nutzen. Letztere beide bringen sogar einen eigenen WYSIWYG Editor für HTML Seiten mit sich. Die drei genannten Programme gibt es auch für den angebissenen Apfel aus Cupertino. LibreOffice und Openoffice laufen auch nativ auf allen Linuxdistributionen. Word und Excel kriegt man dort nur mit drei Handgriffen und vier gebrochenen Beinen mit Wine unter Linux zum laufen. MS Office bläht den Quellcode mehr auf als die beiden Opensourcependanten.

Spezialisierte WYSIWYG Editoren sind beispielsweise NVU und Kompozer. NVU selbst gibt es nicht mehr und wird derzeit als Kompozer weiterbetrieben.

Die Einfache Bedienung macht es Laien einfach, aufs Schnellste die eigene Homepages zusammen zu klicken. Der Nachteil ist, daß WYSIWYG Editoren den Quellcode der Website ein wenig aufbläht. Gerade im Mobilesektor mit Smartphones und passenden Flatrates dazu ist eine geringere Größe der Website angebracht. Das begründet sich auf den limitierten Downloadtraffic.

Wer selber schreibt, der bleibt…

… heißt es im Volksmund. Viel mehr Einfluss auf den Quellcode hat man mit sogenannten Texteditoren oder sogenannten HTML Editoren.

Das einfachste Werkzeug währe ein einfacher Texteditor, der dem Lieblingsbetriebssystem so oder so zu Grunde liegt. Bei Windows währe das beispielsweise Notepad. Allerdings sind diese Texteditoren so dermaßen simpel gestrickt, daß man mit denen durch die viele Tipparbeit sich nicht auf das Wesentliche konzentrieren kann. Spezialisierte Editoren bieten Syntaxhighlighting, Autovervollständigung von Tags und Befehlen und vieles mehr an, um aufwendige Tipparbeit zu erleichtern.

Unter Windows gibt es zum beispiel die HTML Editoren Phase5 und Notepadd++. Beide beherrschen ausnehmend gut HTML, CSS, Javascript, PHP und einige Script- und Programmiersprachen mehr und bieten nette Tools um schnell und einfach Tabellen, Listen und dergleichen zu erstellen.

Für Linux gibt es Bluefisch und Quanta plus. Beide sind in den gängigen Repositories vieler Distributionen enthalten, vor allem bei Debian und vielen Debianderivaten wie Ubuntu oder Knoppix. Quanta Plus ist hauptsächlich für KDE optimiert, läuft aber auch unter Gnome. Mit dem Metapaket kdewebdev installiert man Quanta Plus mit zusätzlichen Plugins auf seinem Linux.

Bilder, Bilder, nochmals Bilder

Jeder kennt für Windows und Mac Adobe Photoshop. Je nach Ausführung dieses Pakets darf man da schonmal mehrere Hundert Euro über die Ladentheke wandern sehen. Gerade Hobbyanwendern, die nur nebenbei mal ein bisschen mit Grafik herumexperimentieren, dürfte dieser Preis die Freude an Grafiken ziemlich verderben. Für Linux und Windows, sicher auch für Mac gibt es daher eine kostenlose Opensource Alternative, die es durchaus mit dem saumäßig teuren Platzhirsch von Adobe aufnehmen kann. Die Rede ist vom Gnu Image Manipulation Prgramm, kurz auch Gimp genannt. Für reisende Windows-Nutzer gibt es Gimp, wie die meisten hier vorgestellten Opensourcetools auch als portableVersion für den USB Stick.

Für Windows-Nutzer gibts natürlich auch noch Digifoto, ein recht schlankes Programmchen, welches auch ohne Installation auskommt. Es bringt auch eine Menge Funktionen zum Manipulieren von Bildern mit und ist durchaus einer Überlegung zum Nutzen wert.

„Was nun?“ sprachs, als man die fertige Website sah

Ersteinmal sollte man seine Seite am lokalen Rechner daheim testen. Dazu benötigt man den Browser seiner Wahl, am besten sind wohl mehrere Browser um das Design eventuell noch so anzupassen, damit es auf allen Browsern halbwegs gut aussieht. Jeder Browser interpretiert eine Website geringfügig anders. Man sollte auf dem Internet Explorer testen, aber auch auf dem Firefox, unter Chrome, mit Safari oder Opera. Besteht die Seite nur aus HTML und ein bisschen CSS, reicht ein Klick auf die jeweilige Startseite und der Standartbrowser öffnet diese Seite. Kommt nun noch PHP, ein bisschen Javascript oder Ajax dazu, reicht das nicht mehr. Benötigt werden hier die Voraussetzungen, wie auf einem Webserver. Da kommen bereits entsprechend vorkonfigurierte Tools zum Einsatz. XAMPP heißt das Zauberwort für das benötigte Programm und ist unter allen gängigen Betriebssystemen lauffähig. XAMPP bringt einen Indianer… nein einen Apache für HTML und CSS mit, dazu eine PHP und MYSQL Laufzeitumgebung sowie Tomcat für Javascript mit. Alle drei Umgebungen finden sich bei gängigen Linuxdistributionen in den Repositories wieder und Microsoft liefert auch entsprechend hauseigene Umgebungen für Windows mit und Apple für sein Mac OS sicherlich auch. Hauseigene Lösungen für Windows und Mac OS können durchaus kostenpflichtig sein.

Für Windows User gibt es durchaus noch ein weiteres Tool mit dem Namen Server2Go, welches schon einmal in einem Artikel unter Das eigene Wiki für den Windowscomputer vorgestellt wurde. Es ist ein recht gut vorkonfigurierter Server für den lokalen Einsatz.

Um XAMPP und Server2Go effektiv nutzen zu können, benötigt man erstnoch ein Programm, welches Standart auf jedem Rechner sein sollte. Hierbei handelt es sich um ein Packprogramm um komprimierte Dateien zu entpacken. Windowsuser können kostenlos Winrar oder 7zip nutzen. Letzteres gibt es auf alle Fälle auch für Linux, da es unter Opensource steht.

Hat man die Funktionalität seiner Webseite, die Links auf richtige Ziel und die Rechtschreibung geprüft, darf es losgehen, die Seite im Internet zu hosten. Hierbei ist ein FTP Client, mit dem die Verbindung zwischen eigenem Rechner und dem Webserver aufgebaut wird notwendig. So ein Programm hilft beim Verschieben der Dateien der Internetseite auf den gewählten Webspace. Der FTP Client der Wahl währe FileZilla. Er ist ein Opensource-Programm und für Linux, Mac und Windows lieferbar. Die Zugangsdaten für den Webspace erhält man generell von dem Hosting-Provider des geringsten Mißtrauens.

Fazit:

Man braucht nicht viel auf dem Rechner um eine Website zu erstellen und auszutesten. Einen Editor seiner Wahl, dazu ein paar gängige Browser seiner Wahl und vielleicht eine Laufzeitumgebung für HTML, PHP und MySQL bzw Javascript oder Ajax. Weiterhin ist nur noch ein FTP Client nötig um die Seite ins Internet zu bringen. Das ganze setzt natürlich einiges an Experimentierfreude und ein wenig Kreativität voraus.

Vorschau auf weitere Artikel dieser Serie

Im nächsten Artikel gehe ich auf Content Management Systeme ein und beschreibe in groben Zügen, was es bereits am Markt alles gibt und für welche Einsatzzwecke welches CMS von Vorteil ist.

Die Tutorials und Programme

Die Tutorials

Die Editoren

Grafikprogramme

Webserver für den eigenen Rechner

Browser

FTP Clients

http://filezilla-project.org/

Packprgramme

Portable Programmversionen

Portable Apps