Drrrty WASTED DESIGNDrrrty WASTED DESIGN

  • RSS
  • Delicious
  • Follow Me on Pinterest
  • Facebook
  • Twitter
September - 7 - 2011

Eine Freundin von mir will nun Webdesign lernen. “Uff”, denken manche, “schon wieder so eine…” Ich kann diejenigen beruhigen, denn sie kennt die Grundlagen von HTML und CSS, aber ihr fehlt das Know-How bei den einzelnen Tools (also sie hat mit mir Medien Design studiert und ging dann hauptsächlich in den Printbereich – Musste ich von ihr aus unbedingt klarstellen jetzt *g*).

Hierzu wollte ich ihr eigentlich einen Link für gute und kostenlose Webentwicklungs Tools schicken, aber ich hab nichts passendes gefunden. Somit präsentiere ich nun eine Liste von Webdesign-Programmen, mit denen ich persönlich viel Arbeite und für diese ich nicht einmal Geld ausgeben musste.

Fangen wir aber einmal der Reihe nach an:


Webspace:

In Sachen Domain und Webspace kann ich euch zwei persönliche Empfehlungen geben. Für Neulinge zum “Ausprobieren” und deshalb eher ein Spielplatz oder “Webspace für die allererste Seite” rate ich euch zu funpic.de. Meine Seite war lange bei diesem kostenlosen Anbieter gehostet. Viel Speicherplatz und technologisch relativ Up-to-Date macht diesen Anbieter in meinen Augen perfekt für den Start. Der Anbieter ist (meines Wissens) kostenlos! Ob sich das in Zukunft mal ändern soll, kann ich natürlich nicht sagen (sollte jedem Leser klar sein). Funpic.de finanziert sich mit Einblendewerbung auf den kostenlosen Webspaces. Einen Banner, der sich über eure Seite legt, muss man somit in Kauf nehmen. Diesen können eure Besucher aber wegklicken. Ich hatte übrigens damals festgestellt, dass dieser Banner teilweise Probleme mit Javascript auf eurer Website verursacht, ich kann aber jetzt nicht sagen, ob dieses Problem behoben wurde… Außerdem bekommt man bei funpic.de nur eine sogenannte “Subdomain” (in etwa so: name.na.funpic.de), aber sehr schön finde ich die Möglichkeit, dass eine gekaufte Domain aufgeschaltet werden kann.

Webseiten mit Einblendwerbung wirken natürlich nicht äußerst seriös und somit sollte man sich für richtige Projekte einen seriösen Anbieter suchen, bei dem man Webspace mit Domain kaufen kann. Dafür empfehle ich meinen Freunden und Kunden außnahmslos Alfahosting.de. Alle meine Projekte laufen seit mehr als 3 Jahren über diesen Hoster und ich bin total zufrieden! Stabile Server, zugeschnitte Pakete und schneller Support! Letztens überraschte mich der Support wieder als ich mitten in der Nacht eine Frage per Ticket-System zwecks Paket-Transfer an ihn schrieb und innerhalb einer Stunde eine Antwort bekam (mit der ich in dieser Nacht eigentlich nicht mehr rechnete). Ein ebenso wichtiger Punkt ist der günstige Preis der einzelnen Pakete. Bei anderen Anbietern bezahle ich 1€ im Monat für eine Domain, hier zahle ich etwas über 1€ im Monat für Domain UND Webspace.

Webhosting bei Alfahosting – jetzt kostenlos testen!


FTP-Upload:

filezilla-logoSobald man seinen Webspace eingerichtet hat, will man ja irgendwie Daten hochladen können. Das gängiste Tool hierfür ist Filezilla. Ich kenne eigentlich keinen Webprogrammierer der etwas anderes Nutzt (außer vielleicht MAC-USER). Unter Filezilla kann man sich verschiedene Webseiten einrichten und verwalten. Alles was man hierzu braucht ist die Adresse der Website, den User und das Passwort. Diese bekommst du von deinem Webhost (Wo du deinen Webspace hast).


HTML und CSS Editor

pspad-logoSchön und gut! Ich kann Daten hochladen, aber ich hab ja noch gar keine…
HTML, CSS, PHP (und weiß der Teufel was für) Dateien kann man entweder mit dem teuren Adobe Dreamweaver erstellen (Er hat so seine Vor- und Nachteile – Größter Nachteil ist wohl, dass er verdammt teuer ist, aber größter Vorteil ist das Erstellen von Template-Dateien, damit man nicht alles auf jeder Seite einzeln ändern muss!), ODER man ladet sich eines der Open-Source-Programme PSpad bzw. Notepad++ kostenlos aus dem Internet runter. Bei den Open-Source-Tools nutzte ich bis jetzt immer PSpad, da dieser Editor nicht zu sehr aufgeblasen ist und man seine Daten auch via FTP synchronisieren kann (bzw. online arbeiten). Von Notepad hörte ich zwar, dass es sehr beliebt sei, mir war es dann aber doch etwas “zu nackig” ;-)

Update: Es hat mir keine Ruhe gelassen, dass tatsächlich noch keiner auf die Idee kam Templatefunktionen in einen HTML-Editor einzubauen (außer Dreamweaver). Ich bin aber letztendlich fündig geworden: Quanta+ (nur für Linux-User) und NVU. NVU werde ich in den nächsten Tagen einmal ausgiebig testen, ob es das hält, was es verspricht ^^


Fotobearbeitung

Wenn wir schon dabei sind, dann stell ich auch noch kostenlose Programme für Fotobearbeitung vor. Man braucht nicht wirklich Photoshop um ein nettes Webdesign zu gestalten:

GIMP-logoGimp

Der größte kostenlose Konkurrent zu Photoshop ist Gimp. Gimp (The Gnu Image Manipulation Program) kann fast alles, das Photoshop auch kann, aber man muss sich etwas einarbeiten (genauso wie bei Photoshop). Mit diesem Foto/Grafik Bearbeitungs-Tool baust du dir das Design deiner Seite zusammen.

 

inkscape-logoInkscape

Schaden kann es nicht hier auch Inkscape vorzustellen. Nette Illustrationen basierend auf Vektorgrafiken können ohne Probleme damit umgesetzt werden.

 

fotosizer-logoFotosizer

Kommen wir nun noch zu einem Geheimtipp in Sachen Stapelverarbeitungs-Programm. Sollte auf deine Website eine Galerie mit Unmengen von Bildern oder deinen “Urlaubsfotos”, aber alle sind Dank Spiegelreflexkamera jenseits der 3000 Pixelbreite und du willst sie etwas “komprimieren” (verkleinern), dann kannst du entweder jedes Foto einzeln unter Gimp ;-) bearbeiten, oder du fügst sie alle in den Fotosizer, drehst ein paar Knöpfchen und wählst den neuen Speicherort und drückst zu guter Letzt nur noch auf Start. Den Rest erledigt dein Computer…


Content Management Systeme (CMS)

Wordpress-LogoMan muss ja nicht sofort eine Website von “Null” aufbauen. Zum Einstieg in das Webprogrammieren oder für ihre erste Website nutzen viele Menschen kostenlose Open-Source CMS wie Joomla oder WordPress. Mit Joomla habe ich damals meine erste Seite erstellt, danach hab ich alle meine Seiten programmiert um am Ende der Einfachheithalber wieder bei einem CMS namens WordPress zu landen ;-)

In meinen Augen ist auch WordPress bis heute noch am Sinnvollsten. Es ist wirklich einfach zu bedienen wenn man oft seinen Inhalt ändert und erweitert.
Weitere bekannte CMS wären noch Drupal (vorwiegend für Communities) und TYPO3 (das Flaggschiff – nur für Experten)

Für CMS gibt es auch unzählige Erweiterungen wie z.B. Fotoglaerien und Kalender…


Debugging

Am Ende sollte man sich auf Fehlersuche begehen, denn manchmal funktioniert es einfach nicht so wie man es sich gedacht hat: Vielleicht hat man an einer Stelle vergessen das schließende Div-Tag zu setzen, oder das Element sollte nicht auf die linke Seite “gefloatet” werden. Nur wie kommt man auf diese Fehler?

Firefox Addons

Firefox LogoFirefox ist in Sachen webdeveloping der beste Browser! Es gibt dutzende Debugger dafür und zwei will ich näher hervorheben:

1. Firebug: mit diesem Addon kann man sich jeden Quellcode einer Seite anschauen und live auf Fehlersuche gehen. Man erkennt wie sich die Tables und DIVs öffnen und schließen und welche Elemente durch einen Fehler nicht erkannt werden. Sehr praktisch ist das bearbeiten der CSS! Welches Element vererbt bestimmte Attribute weiter oder welche Attribute besitzt es überhaupt? Außerdem kann man Paddings und Margins live vergrößern oder verkleinern, somit muss man nicht lange rumprobieren, sondern kann sich sofort den perfekten Wert anzeigen lassen…

2. HTML-Validator: Der schnellste Weg um Fehler zu finden! Unten rechts wird auf jeder Seite ein Symbol (Kreuz, Ausrufezeichen, oder Häkchen) angezeigt. Sollte man ein Kreuz sehen weiß man, dass mindestens ein Fehler auf der Seite ist. Mit Doppelklick werden diese Fehler im Quellcode angezeigt und erklärt was falsch ist…


Jetzt hoffe ich noch, dass ich nicht nur einer guten Freundin weiterhelfen konnte, sondern jedem Leser der hier gelandet ist um etwas über Webdesign/Webprogrammierung zu erfahren, weil er vielleicht einen Einstieg in das Thema wagt.