Vom Strich zur Site

Vom Strich zur Site

Obwohl die Softwareschmieden uns Webworkern suggerieren wollen, dass es möglich sei, eine Website komplett in einem Programm zu erstellen, ist das bislang noch nicht möglich. Vereinzelt integrieren Anwendungen wie Adobes ImageReady oder Fireworks von Macromedia Funktionen für das Web, aber keine Anwendung enthält alle Features, die man benötigt. Nachdem fest steht, welchen Umfang die Website haben soll und über welche Funktionalitäten sie verfügen soll, heißt es, das Erscheinungsbild der Seiten zu skizzieren. Im Normalfall scribbelt man auf Papier. Ein Kollege von mir propagiert das Erfassen grafischer Überlegungen auf Bierfilzen. Es bleibt jedoch der gleiche Vorgang, auf welchem Material man es auch betreibt. Manchmal sind die Ideen, die man im Kopf hat auch schon so gefestigt, dass man ein grobes Layout auch schon am Rechner erstellen kann. Doch welches Programm sollte man dazu nehmen? Nun, im Prinzip reicht ein einfaches Malprogramm. Man sollte jedoch darauf achten, dass die Bildformate, die man damit erzeugen kann, auch später in den anderen Anwendungen weiter verarbeitet werden können. Auf dem Macintosh hat sich schon seit langer Zeit Adobe Photoshop (PS) durchgesetzt, das zwar deutlich mehr Funktionen bietet als man benötigt, aber durch seine vielfältigen Import-Möglichkeiten kann der Benutzer auch einige Dokumente anderer Programme öffnen und bearbeiten. Bei Aufbau einer Seite im PS ist die wichtigste Frage die, für welche Zielkonfiguration die Seite passen soll. Im Normalfall lege ich die Seitengröße auf 740 x 416 Pixel fest. Dieses Maß habe ich durch einen Screen Shot auf einem Windows-Rechner mit 17″-Bildschirm bei 832 x 624 Pixel gemessen. Ich bin davon ausgegangen, dass diese Konfiguration die zurzeit am meisten verbreitete sein dürfte.
Abbildung 1

Abbildung 1

Ideensichtung im PS kann großen Spaß machen, da man unendlich viele Möglichkeiten hat, die Entwürfe zu dem werden zu lassen, was man sich vorstellt. Meist jedoch hat man nur eine vage Ahnung, wie es später aussehen soll und nähert sich Schritt für Schritt heran. Man sollte sich allerdings nicht durch die Flut an Features, die einem das Programm bietet erschrecken lassen. Es ist eben ähnlich wie mit einem Schweizer Taschenmesser. Man sollte sich etwas Zeit nehmen und ohne Druck versuchen, das Programm kennen zu lernen, um dann beim Entwerfen besser damit umgehen zu können. Tut man dies nämlich nicht, so wird man praktisch von der Fülle an Möglichkeiten erschlagen und weiß bald nicht mehr, was man machen will. Der zu füllende Bereich muss sowohl die Navigation, die man am besten vorher auf einem Blatt Papier strukturiert hat, und den eigentlichen Content-Bereich enthalten. Hierzu greife ich oft auf Ideensuche im Web zurück, man kann allerdings auch Bücher zum Thema lesen. Aber am Ende ist man allein mit dem Entwurf und muß seine eigene grafische Form finden. Und um es gleich vorneweg zu sagen: jeder Webworker sollte, meiner Meinung nach, versuchen neben den Wünschen des Auftraggebers auch seine eigenen Ideen zu verwirklichen und so mithelfen, das Web lebendig zu halten, damit es nicht zum Schaufenster der Marketingleute und der reinen Händler verkommt. Ein qualitativer und ästhetischer Anspruch bleibt davon natürlich unberührt. Bei der Platzierung der Navigation ergeben sich im Prinzip nur zwei Positionen, horizontal oben oder vertikal links. Es hat sich mittlerweile eingeschliffen, dass die Benutzer einer Website mit ihren Sehgewohnheiten an diesen beiden Stellen nach Verknüpfungen suchen würden. Es wäre auch einigermaßen blamabel, wenn die Navigation nicht zu sehen wäre, weil der Bildschirm zu klein ist. Auch lohnt sich, bereits beim Entwurf der Seite daran zu denken, wie man die Seiten aufbauen möchte, ob nun die Navigationen statisch in einem Frame bleibt und nur die Content-Seite aufgerufen wird oder ob man alle Teile (Navigation & Content) beim Klick neu aufbauen lässt. Mit PHP lassen sich die verschiedenen Elemente in getrennten Dokumenten anlegen und erst beim Aufruf der Seite zusammenbringen, es würde allerdings zu weit führen dies in diesem Artikel zu erklären. Davon mehr zu einem späteren Zeitpunkt. Wenn dann der Entwurf steht und man die Navigation und den Bereich für den Inhalt in ansprechender Form untergebracht hat, dann heißt es, die Seite in HTML umzusetzen. Wenn man den Entwurf mit Adobes Photoshop gemacht hat, dann bietet sich es an, das Schwesterprogramm Adobe ImageReady zu benutzen. Bei geöffnetem Dokument im PS klickt man dazu auf das Icon ganz unten in der Werkzeugleiste
ImageReady

ImageReady

Bei ImageReady handelt es sich nicht nur um eine abgespeckte Version des Photoshop, das Programm bietet darüber hinaus noch eine Reihe von Funktionen, die Webworkern das Leben stark erleichtern können. ImageReady ermöglicht nicht nur das schnelle Bauen von Rollover-Funktionen, die dann zusammen mit dem Bildern und dem passenden HTML-Code exportiert werden, sondern auch von Gif-Animationen. Es ist verblüffend zu sehen, wie einfach so etwas geht, wenn man sich daran erinnert, welche Anstrengungen man noch vor ein, zwei Jahren man unternehmen musste, um eben das hin zu bekommen. Da es leider noch kein Universalprogramm auf dem Markt gibt, dass alle notwendigen Schritte bis zur erfolgreichen Umsetzung einer Website erledigt, muss man als Webworker den Spagat zwischen vielen verschiedenen Anwendungen üben und mehrere Programme beherrschen, um ein konkurrenzfähiges Ergebnis zu produzieren. In diesem Artikel geht es um die abschließenden Arbeiten, vom gefüllten Image-Ordner bis zum Upload und Debugging. Adobe ImageReady stellt einen bemerkenswerten Schritt nach vorn dar. Bislang waren Bildbearbeitungsprogramme, wie Photoshop (Mac/Win) oder Paint (Win) der einzige Weg, um Grafiken für das Web zu erstellen. Durch die HTML-Exportfunktion von ImageReady kann man Rollovers nicht nur entwerfen, sondern auch gleich samt Bild und Code ausgeben. Doch auch die Optimierungsfunktion des Programms übernimmt Aufgaben, die man sonst mühsam per Hand erledigen müsste. ImageReady erzeugt bei allem Können nicht all die Features, die man gern auf einer Website hätte. Funktionen wie Layer, PopUp-Fenster oder Multimedia-Objekte (Filme, Sounds etc.) lassen sich mit Macromedia Dreamweaver oder Adobe GoLive relativ einfach einbauen. Der so erzeugte Code ist schon ziemlich schlank, aber es geht noch besser.
Adobe GoLive

Adobe GoLive Sitefenster

Oft gibt es weitere Kritikpunkte und Änderungsbedarf für zu umfangreich geratenen Quellcode. Auch wenn die Codier-Programme in den letzen Jahren immer besser geworden sind, muss man HTML-Code per Hand nachbessern. Neben den sog. spurious blanks (unsichtbaren Leerzeichen), die die Größe der Dateien künstlich aufblasen, weisen automatische Codierer Tabellen gern einmal Attribute zu, die man nun wirklich nicht haben wollte. Es empfiehlt sich also, den erzeugten Code nach den eigenen Maßstäben zu prüfen, um nicht plötzlich überrascht zu werden. Dieses Vorgehen ist deshalb so wichtig, weil ein und dasselbe HTML-Dokument auf verschiedenen Rechner-Plattformen (Mac, Windows, Unix) zu verschiedenen Ergebnissen führen kann. Man sollte daher nach Möglichkeit auf andere Rechner zurückgreifen um sicherzustellen, dass auf jedem Rechner mehr oder weniger das Gleiche zu sehen ist. Für die Korrektur des HTML-Codes sollte man ein Editor-Programm benutzen, das möglichst wenig in die Arbeit eingreift. Auf dem Macintosh gibt es hierfür das Programm PageSpinner, einen speziellen Editor, der besondere Funktionen zum Erstellen von HTML-Files bereitstellt. Für Windows-Benutzer gibt es Homesite von Allaire mit einem ähnlichen Umfang an Möglichkeiten. Der Grund, warum man ein nicht mitarbeitendes Programm verwenden sollte, ist relativ simpel. Ist die Datei korrigiert, kann beim Ansehen des Resultats alles offenbar in Ordnung sein. Beim Sichern des Dokuments auf die Festplatte kommt die unerfreuliche Überraschung, denn das Programm ändert alles in den vorigen Zustand. Schon fängt man wieder von vorn an. Dieser Schritt, das Debugging, erfordert neben der Konzeption die meiste Zeit. Es ist daher besonders wichtig, sich für diesen Arbeitsgang ausreichend Zeit einzuplanen, weil es erfahrungsgemäß unter Druck nicht besonders sauber wird. Jetzt, da man die Seite fertig hat, kann man sie in anderen Programmen weiterverarbeiten und z.B. mit PHP-Elementen oder JavaScripts erweitern. Es ist aber auch ohne solche Ergänzungen noch nicht alles getan. Die Seite ist noch nicht im Web zu sehen und muss deshalb ins Netz hoch geladen werden. Hierzu braucht man einen so genannten FTP-Client wie Fetch (Mac) oder WS FTP (Windows). Es wäre müßig, jetzt über das Hochladen von Dateien per FTP zu erzählen, weil es genauso einfach ist wie das Kopieren von Dateien von einer Festplatte zur Anderen. Man sollte darauf achten, dass wirklich alle benötigten Bilder und HTML-Dokumente mit übertragen wurden. Nach meiner Erfahrung ist dies die beliebteste Fehlerquelle und bedeutet meist, dass die Kunden bei einem anrufen und völlig aufgelöst fragen, warum dieses oder jenes nicht ginge.
WS_FTP

WS_FTP

Es passiert auch recht häufig, dass die externen Betrachter der soeben fertig gestellten Seiten die “neue” Seite nicht zu Gesicht bekommen, weil ihr Browser die alten Dateien aus dem Cache lädt. Daher nicht verzweifeln, wenn mal etwas nicht zu sehen ist und trotzdem alles auf dem Server vorhanden zu sein scheint. Es ist alles in Ordnung, man muss lediglich den Cache löschen. Im Prinzip sind jetzt alle Schritte getan, um vom Strich zur Site zu kommen. Natürlich ist nicht alles so einfach, wie es in diesem Artikel scheint. Man muss nicht alle Programme beherrschen, die hier angesprochen wurden. Es reicht, wenn man die grundlegenden Funktionen eines Programms begriffen hat und diese sicher umsetzen kann. Mit der Zeit kommen dann andere Programme hinzu, und man entwickelt Talente auf allen Gebieten. Also immer an das lateinische Sprichwort denken: “Non omnia possumus omnes” (Nicht alle können alles).