Auch für JavaScript ist diese Möglichkeit interessant. So könnte ein JavaScript beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, die Zeit stoppen, die der Anwender zum Ausfüllen eines Formulars benötigt, und das Ergebnis in ein verstecktes Formularfeld schreiben. Das Ergebnis wird dann, wenn der Anwender das Formular abschickt, mit übertragen und kann für statistische Zwecke oder Website-Optimierungen ein nützlicher Input sein.

Beispiel

<form method="post" action="/newsletter-subscriber-update.php">
  <input type="hidden" name="id" value="5839">
  <p>Name:<br>
  <input type="text" name="givenname" value="Michaela">
  <input type="text" name="familyname" value="Mustermann">
  </p>
  <p>Mail:<br>
  <input type="text" name="mail" value="mmustermann@example.org">
  </p>
  <input type="submit" value="Ändern">
</form>

Erläuterung

Das Beispiel zeigt ein Formular zum Ändern vorhandener Daten, wie es innerhalb einer Webanwendung typisch ist. Die value-Attribute der Formularfelder sind von dem Script, das den HTML-Code des Formulars generiert oder zumindest ergänzt hat, mit vorhandenen Werten gefüllt worden. Da es sich um Daten handelt, die beim Absenden des Formulars in eine Datenbank zurückgeschrieben werden sollen, gibt es außerdem ein verstecktes Formularfeld mit der internen Datenbank-Tabellen-ID des Datensatzes.

Solche versteckten Felder werden durch <input type="hidden"> markiert (hidden = versteckt). Die Daten, die in dem versteckten Feld gespeichert werden sollen, stehen im Attribut value. Der Name, unter dem dieser Wert für ein serverseitig verarbeitendes Script abrufbar ist, wird beim name-Attribut vergeben.

Dieser Text ist dem HTML5-Handbuch von Stefan Münz und Clemens Gull entnommen, das voraussichtlich im November 2010 im Franzis Verlag erscheinen wird. Sie können das Buch hier direkt vorbestellen.

Um die Erweiterung einzurichten, wählen Sie über das Menü Hilfe / Erweiterungen verwalten den Adobe Extensions Manager aus. Klicken Sie dort auf Datei/Öffnen, suchen Sie die heruntergeladene Erweiterung auf der Festplatte und installieren Sie sie in Dreamweaver.

Über einen Klick lassen sich Code-Snippets einfügen. Auf diese Weise wird die Erstellung von Joomla-Templates stark vereinfacht.

Mit diesem Tool lassen sich somit ganze Template-Bereiche per Klick in die Seite kopieren und richtig positionieren. Daher ist es bestens für jeden Template-Entwickler geeignet. Es kann für Joomla-Versionen von 1.5 an aufwärts genutzt werden.

Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.

Nun kann man ja sagen: Wenn der Titel von den Bots der Suchmaschinen gescannt wird, dann ist es sinnvoll, diesen Titel auszutauschen gegen einen, der aussagekräftiger ist und besser zum Thema der Seite passt. Genau das haben wir getan. Wie viele Seitenersteller das jedoch vernachlässigt haben, erkennen Sie, wenn Sie genau diesen Eintrag googeln: unbenanntes Dokument.

Vielleicht sollte man den Glücklichen, der die Spitzenposition innehat, einmal fragen, wie er das gemacht hat. Allerdings sind Zweifel, ob dies überhaupt so geplant war, durchaus berechtigt, denn wer möchte schon etwas unter dem Eintrag unbenanntes Dokument finden? Wir tauschten ihn in unserem Dokument deshalb gegen den folgenden Titel aus:

<title>Perücken Lexikon – alles über Perücken</title>

Die Änderung können Sie direkt im Quellcode vornehmen (siehe oben) oder im Eigenschaften-Bedienfeld, wenn kein anderes Element markiert ist.

Die Änderung kann auch über das Menü Modifizieren/Seiteneigenschaften erfolgen. Last but not least besteht noch die Möglichkeit, die Seiteneigenschaften über ein Kontextmenü aufzurufen. Dazu klicken Sie mit der rechten Maustaste in einen freien Bereich innerhalb der Webseite und wählen im Kontextmenü den Eintrag Seiteneigenschaften aus.

Dieser Text ist dem Buch “Dreamweaver CS5: Webseiten entwerfen und umsetzen” von Andreas Mylius und Raimund Boller entnommen, das im Franzis Verlag erschienen ist. Sie können es hier direkt bestellen.

Onpage-Optimierung

Die Offpage-Optimierung spielt in diesem Buch keine Rolle, da es nicht zu den Aufgaben gehört, für die das Programm Dreamweaver irgendeine Rolle spielt. Einige der folgenden Optimierungstechniken haben wir bereits beim Erstellen der Seiten erledigt. An dieser Stelle werden die minimalen notwendigen Schritte der Onpage-Suchmaschinenoptimierung ausführlicher zusammengefasst. Diese können Sie auch ohne größeren Aufwand realisieren, um schon einmal die Grundvoraussetzungen für gute Platzierungen zu erfüllen.

Meta-Tags: Schlüsselwörter, Beschreibung und mehr

Meta-Angaben werden im Kopf eines HTML-Dokuments abgelegt und waren das Zauberwort für die Suchmaschinenoptimierung in den ersten Jahren des World Wide Web. Heute verfehlen die Zaubertricks jedoch meist ihre Wirkung und sind aus der Sicht der großen Suchmaschinen bestenfalls noch kleine Helferlein. Weglassen sollte man sie jedoch auch nicht, da kleinere Suchmaschinen und Webkataloge sich durchaus hier bedienen können und sie auch bei den Großen manchmal Zünglein an der Waage sind.

Warum ihre Wirkung abnehmen musste, ist einfach zu verstehen. Wenn es zehn Webseiten zu einem Thema gibt und noch wenige Webmaster, die ihr Handwerk richtig verstehen, reichen ein paar Schlüsselbegriffe und eine knackige Inhaltsangabe aus, um darüber die Positionierung festzulegen. Wenn aus den zehn Seiten im Laufe der Zeit aber Millionen werden, die das gleiche Thema behandeln, und immer mehr Webmaster die gleichen Schlüsselwörter eintragen, wird es nicht mehr möglich sein, ausschließlich nach diesem Verfahren zu bewerten. Trotz allem werden wir die Sache abrunden und die Eintragungen aus oben angeführten Gründen vornehmen. Öffnen Sie Ihr Dokument und wählen Sie im Menü Einfügen den Eintrag HTML/Head-Tags/Schlüsselwörter aus. Es öffnet sich ein kleines Fenster, in dem Sie Ihre Schlüsselwörter durch Kommas getrennt eintragen können.

Auch wenn es manchmal Gegenstand von Diskussionen in entsprechenden Foren zu diesem Thema ist: Ich habe in den ganzen Jahren noch nicht feststellen können, ob es einen Vorteil bringt, Leerzeichen statt Kommas als Trennstelle zu nutzen. Auf jeden Fall ist es unsinnig, mehrere Hundert Schlüsselwörter einzutragen, zehn reichen meist völlig aus. Allerdings sollten sie auf jeder einzelnen Seite Ihrer Site ausgetauscht bzw. variiert werden. Was weiter vorn steht, ist wichtiger als die Einträge weiter hinten. Wenn Sie mit Ihren Einträgen fertig sind, bestätigen Sie Ihre Eingabe mit OK.

Ihre Schlüsselwörter sind nun Bot-gerecht im Header des Quellcodes eingetragen. Auf die gleiche Art und Weise fügen Sie nun die Beschreibung ein. Erstellen Sie eine kurze Inhaltsbeschreibung für die Seite, für die wir gerade den Text einfügen. Zwar erlauben Suchmaschinen durchaus einiges an Text in der Description, aber je weniger Text die Beschreibung enthält, umso wichtiger wird jedes Wort angesehen. Die wichtigsten Keywords in der Beschreibung unterzubringen ist sicher auch keine schlechte Idee. Anbei nun unsere kompletten Einträge für die Startseite des Perückenlexikons:

<meta name="description" content="im Perücken Lexikon erhalten Sie
Hintergrundwissen zu Perücken, ihrer Haarstruktur und Machart. Details zu
medizinischen Perücken oder modischen Perücken" />
<meta name="keywords" content="Perücken, Perückenshop, medizinische Perücke,
Karnevalsperücke, historische Perücke, Perückenmacher, Perückenlexikon,
Maskenbildner, Echthaarperücken, Kunsthaarperücken" />

Dieser Text ist dem Buch “Dreamweaver CS5: Webseiten entwerfen und umsetzen” von Andreas Mylius und Raimund Boller entnommen, das im Franzis Verlag erschienen ist. Sie können es hier direkt bestellen.

WordPress benutzt MySQL für die Datenspeicherung. Neben einer kommerziellen Enterprise-Version liegt MySQL als Open-Source-Software vor. Nahezu alle Webserver von Hosting-Anbietern haben MySQL von Grund auf installiert, sodass WordPress dieses RDBMS (Relational Database Management System, relationales Datenbankverwaltungssystem) aufgrund der hohen Beliebtheit (über 35.000 Downloads pro Tag) einsetzt.

Aufbau der MySQL-Datenbank

Auch wenn MySQL nicht zu den schnellsten Datenbanksystemen gehört, die aktuell auf dem Markt existieren (Oracle, MS SQL, DB2 etc.), hat es sich aufgrund der kostenfreien Lizenz und des geringen Speicherbedarfs sowie der leichten Erlernbarkeit schnell für Webanwendungen durchgesetzt.

Wie viele andere Datenbanken gehört MySQL auch zu den sogenannten relationalen Datenbanken. Der Name Relation ist in diesem Zusammenhang eher von Tabellen bekannt. Dieses Verfahren gilt als Quasi-Standard in Datenbanken, da dieses Datenbankmodell verglichen mit anderen Datenbankmodellen sehr einfach und flexibel zu handhaben ist.

Eine Datenbank besteht in der Regel aus mehreren Tabellen (Relationen). Diese Tabellen enthalten wiederum eine bestimmte Menge an Attributen, die als Spalten bekannt sind. Die eigentlichen Datensätze werden in je einer Zeile gespeichert und können pro Datensatz jeweils einen Wert pro Attribut der Spalte enthalten (Datum).

Grundlegende Tabellen

WordPress hat in der Grundinstallation elf unterschiedliche Tabellen in einer Datenbank zusammengefasst. Auch wenn alle Tabellen für den Blog nötig sind, haben sie wie jede Datenbank unterschiedliche Relevanzen. Die wichtigste Tabelle ist in WordPress die Tabelle wp_posts. Sie beinhaltet die gesamten Texte der Beiträge und Seiten.

Abweichender Tabellenname
Je nach eingestelltem table_prefix in der Konfigurationsdatei kann der Tabellenname abweichen. In der Standardinstallation ist als Tabellenpräfix wp_ eingestellt. Die Tabellennamen beginnen also alle mit wp_. Wenn Sie zum Beispiel blog_ als Präfix definiert haben, würde Ihre Post-Tabelle dementsprechend blog_posts heißen.

Die folgende Tabelle zeigt, welche Daten WordPress an welcher Stelle der Datenbank speichert:

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im im Franzis Verlag erschienen ist. Sie können es hier direkt bestellen.

VaultPress bietet einen Live-Backup-Service für Ihre Bloginhalte an - nach Abschluss der Betaphase jedoch kostenpflichtig

XML-Backup

Um ein sicheres Backup Ihrer Datenbank herstellen zu können, reicht diese Funktion nicht aus. Führen Sie, um eine echte Datensicherung zu erhalten, in jedem Fall einen SQL-Export durch, wie es das Backup-Plugin herstellt, oder führen Sie das Backup manuell durch. Die Funktion des XML-Backups finden Sie im Backend unter Werkzeuge/Daten importieren.

Backup-Plugin

Die bei Weitem komfortabelste Lösung ist das Backup durch ein Plugin. Ein richtig gutes Plugin bietet Austin Matzko an: WordPress Database Backup ist der treffende Name, hinter dem sich ein wirklich gutes Plugin verbirgt.

http://bit.ly/11kfW

Nach der Installation und der Aktivierung des Plugins starten Sie, um damit den Ordner wp-content beschreibbar zu machen. Dazu geben Sie dem Ordner die Schreibrechte (CHMOD) 755. Das Plugin erstellt später die Backups in einem kryptisch benannten Ordner innerhalb von /wp-content/.
Wenn Sie die Berechtigungen richtig gesetzt haben und anschließend auf Werkzeuge/Backup klicken, gelangen Sie zu den Backup-Einstellungen des Plugins. Im oberen Bereich haben Sie die Möglichkeit, per Klick ein Backup herzustellen. Dazu wählen Sie zunächst aus, welche Tabellen in Ihr Backup eingeschlossen werden. Wenn Sie mehrere Plugins installiert haben, die zusätzliche Tabellen erstellen, sollten Sie diese ebenfalls in Ihr Backup einschließen. In der mittleren Box können Sie wählen, wie Sie die Sicherung erhalten möchten. Zur Auswahl stehen hier:

Auf dem Server speichern: Mit Sicherheit die angenehmste, aber leider auch die unsicherste Variante, die das Plugin zur Verfügung stellt. Sollte Ihr Server ausfallen, sind auch Ihre Datenbanksicherungen verloren.

Auf den Computer herunterladen: Wenn Sie die Daten händisch auf Ihrem Computer speichern möchten, können Sie das mit dieser Option tun. Es wird Ihnen nach dem Erstellen des Backups eine Download-Möglichkeit angeboten.

Per E-Mail verschicken: Hier wird es sehr interessant. Das WordPress-Plugin ist in der Lage, Ihnen eine Sicherung Ihrer Datenbank per E-Mail zu schicken. Sie können die E-Mail-Adresse dabei natürlich selbst bestimmen.

Geplante Sicherung: Das klingt vielversprechend. Bei dieser Funktion handelt es sich um eine Art Automatisierung (Cron-Job) Ihrer Datenbanksicherung. Sie können sich durch das Plugin E-Mails mit der Sicherung in einem bestimmten Zeitintervall erstellen lassen. Für den Anfang sollte Ihnen eine Sicherung einmal wöchentlich genügen. Wenn Sie das Intervall verkürzen wollen, da Sie mehr und häufiger bloggen, umso besser. Klicken Sie, nachdem Sie eine E-Mail-Adresse Ihrer Wahl eingetragen haben, auf Backup planen. Um einen Sicherungszeitpunkt zu erstellen, ändern Sie oben neben Nächste Sicherung mit dem Button Ändern einen Zeitpunkt, der Ihnen passend erscheint. Wenn Sie zum Beispiel immer am Sonntag neue Beiträge erstellen, wäre ein guter Zeitpunkt der Montagmorgen. Nachdem Sie die Änderung gespeichert haben, errechnet das Plugin selbstständig den nächsten Sicherungszeitpunkt auf Basis des von Ihnen eingestellten Intervalls.

Online-Backup

Um ein Backup relativ sicher abzulegen, können Sie auf einen Free-Webmail-Account zurückgreifen. Fast alle Webmail-Anbieter stellen genügend kostenlosen Webspace zur Verfügung. So haben Sie das leidige Speicherplatzproblem ausgeschlossen, können sich automatisierte Backups per E-Mail zuschicken lassen und haben von jedem internetfähigen Rechner Zugriff auf Ihr Backup.

VaultPress: Seit einiger Zeit gibt es eine Betaversion eines neuen Service. Die Firma Automattic, die auch Inhaber von WordPress.com und der Erfinder des Plugins Akismet ist, bietet einen Live-Backup-Service für Ihren Blog an. Der Dienst, der nach der Betaphase ca. 15 US-$ pro Monat kosten soll, stellt auf speziell für diesen Service bereitgestellten Servern Backups Ihres Blogs her. Neben den Beiträgen, Kommentaren und Einstellungen erkennt das System laut Aussage des Herstellers auch Änderungen am Quellcode. Modifikationen an Templates oder Plugins werden binnen Minuten erkannt, und es wird umgehend ein Sicherheits- Backup der Änderung hergestellt.

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Auch der beste Webhoster kann hin und wieder mit Datenverlusten zu kämpfen haben. Sollte dieser Fall eintreten, sind Sie selbst gefragt, konsistente Backups von Ihrem Blog bereitzustellen, um ihm so schnell wie möglich wieder Leben einzuhauchen.

Die Domain

Beachten Sie: Viele Webhoster sind nach Ihren AGB nicht einmal dazu verpfl ichtet, ein Backup durchzuführen. Oder was passiert, wenn Ihr Webhoster auf einmal insolvent ist und Ihre Zugangsdaten für den FTP-Server oder die Datenbank nicht mehr funktionieren? Dann sind Sie wieder gefragt und sollten ein gutes Backup zur Hand haben. An die Domain Ihres Blogs kommen Sie dank der zentralen Verwaltung von Domains (Denic, Internic etc.) immer. Natürlich nur vorausgesetzt, Sie sind selbst der Inhaber der Domain.

Source-Backup

Auch wenn die Datenbank sehr wichtig ist, da diese alle Einstellungen und Beiträge speichert, müssen Sie regelmäßig Ihre medialen Inhalte sichern. Mit jedem Beitrag werden Sie in der Regel ein oder mehrere Bilder hochladen. Diese werden standardmäßig im Ordner wp-content/uploads gespeichert. Das ist der wichtigste Ordner, den Sie mindestens einmal in der Woche sichern sollten. Um ein gutes Backup zu haben, sollten Sie die mühsam erstellten Templates und installierten Plugins auch regelmäßig mit in Ihre Backup-Routine einschließen. Am Anfang Ihres Blogger-Lebens sollten Sie das Backup alle zwei Wochen durchführen. Wenn Sie einen fertigen Blog haben und wirklich gar nichts mehr ändern, sichern Sie einmal im halben Jahr. Um die Daten zu sichern, reicht es, per FTP-Programm die Daten auf Ihren lokalen Rechner zu kopieren.

Wie sagt man doch so schön: 1 GB Platzverschwendung tut nicht so weh wie 1 KB Datenverlust.

Datenbank-Backup

Um Ihre Datenbank zu sichern, haben Sie vielfältigere Möglichkeiten als beim Source- Backup. Neben dem manuellen Exportieren der Daten mit phpMyAdmin gibt es noch sogenannte XML-Backups und Plugins, die nahezu automatisch ein Backup der Datenbank durchführen.

Datenbank-Backup “per Hand”

Am einfachsten ist hier wieder das Backup mithilfe von phpMyAdmin. Sie können auch per sogenanntem SSH (Secure Shell) direkt auf Ihrem Server durch die Eingabe einiger Codezeilen ein Backup erstellen. Da wir hier davon ausgehen, dass Sie ein Shared Hosting benutzen, werden Sie selten diese Zugangsdaten bekommen. Deshalb lassen wir diesen
Punkt außen vor.

Nachdem Sie – wie schon von der Installation und dem Umzug Ihres Blogs bekannt – phpMyAdmin aufgerufen haben, führen Sie ein Backup mittels Export durch. Wählen Sie die Datenbank aus, auf der Ihre WordPress-Version installiert ist, und klicken Sie auf den Reiter Export in der oberen Navigation. Wählen Sie mit Alle auswählen sämtliche Tabellen der Datenbank aus und legen Sie SQL als Exportmethode fest. Als Komprimierung wählen Sie zip oder gzip. Alle anderen Einstellungen können Sie unverändert lassen. Speichern Sie mit dem Dateidownload-Diaog die Datei an einen beliebigen Ort auf Ihrem Computer.

Überprüfen Sie anschließend, ob die Datei auch richtig gespeichert wurde! Eine relativ leere Datenbank von WordPress verbraucht ZIP-komprimiert etwa 100 KB. Diese Datenmenge steigt mit der Zeit an. Überprüfen Sie also am besten, ob die jetzige Sicherung größer ist als die vorherige. Das trifft allerdings nur dann zu, wenn Sie nicht in WordPress selbst Sicherungszustände im Backend gelöscht haben. Diese werden auch in der Datenbank gespeichert und verbrauchen dadurch zusätzlich Speicherplatz.

Dieser Text ist dem Buch “WordPress-Themes – Design und Implementierung für WordPress 3” von Jonas Hellwig und Christian Gatzen entnommen, das im August 2010 im Franzis Verlag erscheint. Sie können es hier direkt vorbestellen.

Da wir eine konkrete Vorstellung von dem haben, was wir anfertigen wollen, haben wir mit Adobe Photoshop das Screendesign erstellt und dem Kunden vorgelegt. Nach einigen kleineren Änderungen lag das Endresultat vor, das als Basis für das CSS-Layout dienen soll.

Projektstruktur festlegen

Auch die Struktur des Projektes wird zunächst skizziert. Es gibt keine allgemein und überall gültige Regel, nach der eine Ordnerstruktur angelegt werden muss. Allerdings stellt man oft Schwierigkeiten im Umgang mit Verzeichnisbäumen fest. Sie sollten auf jeden Fall Leerzeichen in Ordner- und Dateinamen vergeben, alle Namen kleinschreiben und alle Dateien entweder mit der Dateiendung .htm oder der Endung .html benennen, nur nicht mischen.

Für unsere Projekte nutzen wir als Ausgangsbasis stets eine bereits angelegte Ordnerstruktur, die wir mit kleinen Änderungen oder Ergänzungen bei allen anstehenden Arbeiten verwenden. Der Ordner kundenname wird dann in den tatsächlichen Namen des Kunden geändert. Auf oberster Ebene in dem Ordner liegen dann weitere fünf Hauptverzeichnisse.

Im Ordner rohmaterial landen alle von uns noch unbearbeiteten Dateien, die unser Kunde ggf. anliefert. Das können z. B. Texte in Form von Worddokumenten sein, digitale Bilder, Scans, PDFs, Audiodateien oder Videofilme. Der Ordner arbeitsdateien ist unser Ablageort für bearbeitete Materialien in einem Format, das im Sinne von Crossmedia Publishing als leicht zu ändernde Ausgangsbasis für unsere Zielmedien dient.

Dort landen Montagen, verschiedene Bilder im Photoshop-Format oder die mit Premiere geschnittene, aber noch unkomprimierte Videodatei. Dann gibt es natürlich einen Ordner Web für eine oder mehrere Homepages, einen Ordner Print für alle Druckmaterialien und einen Ordner Multimedia für Anwendungen, die auf mobilen Endgeräten oder DVDs laufen sollen. Diese Grundstruktur ist auf jeden Kunden übertragbar und enthält alle Aspekte unserer Aufgabenbereiche. Die einzelnen Ordner auf der ersten Ebene enthalten meistens nochmals weitere Unterordner, die unsere Struktur weiter unterteilt und sinnvoll verfeinert.

Selbstverständlich bleibt es Ihnen überlassen, Ihre eigene Hierarchie festzulegen, die am besten zu Ihrer Arbeitsweise passt. Wenn Sie möchten, können Sie unsere Dummy-Struktur benutzen oder für Ihren Zweck verändern.

Dieser Text ist dem Buch “Dreamweaver CS5: Webseiten entwerfen und umsetzen” von Andreas Mylius und Raimund Boller entnommen, das im August 2010 im Franis Verlag erscheint. Sie können es hier direkt vorbestellen.

Motivation
Versuchen Sie, mit Ihrem Kunden direkt abzuklären, ob das Projekt später eventuell ausgebaut werden soll, und beraten Sie ihn nach bestem Wissen und Gewissen. Er wird es Ihnen danken. Am besten fassen Sie das Ergebnis des Gesprächs schriftlich zusammen und lassen es gegenzeichnen. So haben Sie im Falle von Unstimmigkeiten ein zusätzliches Dokument, das zur Klärung von Ungereimtheiten hinzugezogen werden kann. Zunächst gilt es, die Frage zu klären, warum man das Projekt überhaupt durchführt. Antworten wie »Weil man eine Homepage braucht« oder »Um das Unternehmen zu präsentieren« haben keine Aussagekraft.

Kundenbedürfnisse definieren

In unserem Beispielprojekt ist unser Kunde ein am Niederrhein bekannter Friseursalon und sein Partner aus Österreich. Beide haben in den letzten Jahren expandiert und neue Geschäftsfelder erschlossen. Beide bieten z.  B. hochwertige Haarverlängerungen und medizinischen Haarersatz an und arbeiten bereits seit längerer Zeit zusammen. Nun möchten sie ihren Kunden die Möglichkeit bieten, modische, hochwertige Perücken, Kopftücher und notwendiges Zubehör direkt in einem Online-Shop zu bestellen. Ein Blick auf die Mitbewerber zeigt, dass dies bei einigen sehr gut, bei anderen weniger gut funktioniert. Ausschlaggebend für einen rentablen Produktverkauf ist eine gute Positionierung in den Suchmaschinen bzw. eine gut durchdachte Strategie für Anzeigenkampagnen.

Suchmaschinen-Aspekte – Bot-Freundlichkeit kommt vor Design

Um die Suchmaschinen besser mit zielgerichteten Inhalten füttern zu können, werden wir deshalb vorab eine statische Seite erstellen, die es uns ermöglicht, ohne die Zwänge einer korsettähnlichen Shopstruktur zu arbeiten. Während das Hauptziel für den Shop Funktionalität und Bedienerfreundlichkeit sein soll, liegt bei dieser ersten Seite der Fokus auf einer Seitenstruktur, die in der Hauptsache »botfreundlich« ist. Wer unabhängig von der Kommunikationsaufgabe einfach nur schöne Layouts designen möchte, ist bei der Kunst oder der Gestaltung von Printmedien besser aufgehoben als beim Webdesign. Viele sehr schön gestaltete Seiten sind sehr häufig überhaupt nicht zu finden.

Die zu erwartende Zielgruppe lässt Rückschlüsse zu auf die verwendete Hardware, Sprachkenntnisse, Surfverhalten und auch darauf, welche Technologien aufgrund von eingeschränkten Rechten nicht genutzt werden können. JavaScript und Flash-Plug-ins werden z. B. in öffentlichen Einrichtungen oft vom Webmaster deaktiviert. Unsere Zielgruppe lässt sich nicht so leicht bestimmen, es könnte zunächst einmal jeder sein. Denkt man dann genauer darüber nach, kann man sie doch eingrenzen. Folgende Aspekte sind wahrscheinlich:

- Die Käufer sind hauptsächlich weiblich.
- Oft ist der Grund des Kaufes die Folge einer krankheitsbedingten Therapie.
- Der Grund ist eine chronische Erkrankung.
- Der Grund ist ein modischer Aspekt.

Es kann alle Altersgruppen betreffen, sehr wahrscheinlich ist die Mehrzahl der Käufer zwischen 15 und 60 Jahre alt. Da der in Frage kommende Personenkreis sehr breit gefächert ist, setzen wir keine High-Tech-Rechner und auch keine DSL-Leitung voraus. Wir verzichten an den wichtigsten Stellen auf Technologien wie JavaScript bzw. Flash, setzen sie jedoch ein, um die Seite ein wenig aufzupeppen. Wir verwenden harmonisch zusammengestellte, blumige Farben, da die Zielgruppe zum größten Teil aus Frauen besteht. Nach diesen grundsätzlichen Vorüberlegungen können wir uns nun an die Arbeit für die statische Website machen.

Dieser Text ist dem Buch “Dreamweaver CS5: Webseiten entwerfen und umsetzen” von Andreas Mylius und Raimund Boller entnommen, das im August 2010 im Franis Verlag erscheint. Sie können es hier direkt vorbestellen.

Browser für die Vorschau von Webseiten festlegen

Durch Drücken der [F12]-Taste kann der Primärbrowser z. B. direkt aus Dreamweaver heraus aufgerufen werden, für den Sekundärbrowser benötigen Sie zusätzlich die [Strg]-Taste oder beim Mac die [Befehlstaste].

Sie können noch weitere Browser oder Browserversionen installieren, die dann aber ohne Tastaturkommando auskommen müssen. Allerdings sollten Sie auf einem Windows-Betriebssystem niemals zwei Versionen des Internet Explorer installieren. Der ist dermaßen eng mit Windows verzahnt, dass der Versuch, eine weitere Version zu installieren, zu einem nicht mehr funktionstüchtigen Betriebssystem führen kann.

Die Browservorschau kann auch im Menü Datei/Vorschau in Browser aufgerufen werden. Dort befindet sich auch, falls installiert, die Device Central, eine Adobe-Anwendung, die es ermöglicht, eine Vorschau für Anwendungen, die auf mobilen Endgeräten laufen sollen, anzuzeigen. Die Device Central beinhaltet bereits eine Bibliothek mit einer Vielzahl an Geräteprofilen, weitere können aus dem Internet geladen werden. Die Device Central liefert Infos zum Geräteprofil und einen Simulationsmodus für Anwendungsgeschwindigkeit und Display. Die Vorschau ist ganz brauchbar. Für eine tatsächliche Beurteilung einer zu entwickelnden Anwendung ist ein echtes Gerät zum Testen jedoch unersetzlich.

Die Abbildung zeigt eine Website auf einem Touch Screen.

Dieser Text ist dem Buch “Dreamweaver CS5: Webseiten entwerfen und umsetzen” von Andreas Mylius und Raimund Boller entnommen, das im August 2010 im Franis Verlag erscheint. Sie können es hier direkt vorbestellen.