Auftrag fertig…

Juni 12, 2007

…die Buttons mussten warten 🙂

fanus_gmbh.jpg

Auftraggeber: FANUS GmbH

Marksegement: hauptsächlich Pflanzenlogistik (ohne Scheiß, das gibt’s wirklich)

Arbeit: Neugestaltung Internetauftritt | Logo

Advertisements

Für die Aufgabe des zweiten Themenkomplexes (Umsetzung einer einfachen Seitennavigation) habe ich mich für das Autorenwerkzeug „Mediator 8 Pro“ der Softwareschmiede MatchWare entschieden. Zwei verschiedene Testversionen (Pro / Exp) stehen auf dem Internetauftritt des Herstellers zur Verfügung, eine Registrierung ist MIT ANGABE der eigenen E-Mail-Adresse notwendig, leidige Werbebotschaften lassen sich jedoch durch das entsprechende Deaktivieren eines „Häkchens“ im Feld „Infos per Mail von MatchWare“ während der Registrierung unterbinden.

Download und Installation

Der Download der rund 50 Mbyte großen Datei läuft mit durchschnittlich 248 KByte/s erfreulich flott über den Datenäther, anschließend leitet eine Setup-Routine (nach Doppelklick auf die heruntergeladene Datei „mediator80_pro_ge_demo.exe“) durch den weiteren Installationsprozess.

Nach der Installation kann das Softwareprodukt unter „Start“ – „Alle Programme“ – „MatchWare“ – „Mediator 8.0 Pro“ – „Mediator (Demo)“ gestartet werden.

Anmerkung: Eine kommerzielle Nutzung ist bei der Demo-Version untersagt, zusätzlich ist die Seitenanzahl auf 5 Stück pro Projekt (die nur 7 Tage nutzbar sind) begrenzt. Auch der Medienkatalog fehlt im Testprodukt – wie dem auch sei, immerhin lassen sich die Grundfunktionen der Vollversion genauer unter die Lupe nehmen.

Nach dem Start des „Mediators“ leitet ein recht übersichtlicher Assistent durch den weiteren Projektverlauf. Drei verschiedene Auswahlmöglichkeiten: „Standard (CD-Rom etc)“, „Flash“ und „HTML“ stehen dabei zur Verfügung. Danach lässt sich der gewünschte Bildschirmmodus: „Fenster(Window)“ , „Ganzer Bildschirm mit Rand“ oder „Ganzer Bildschirm(Fullscreen)“ selektieren um im letzten Schritt des Assistenten die gewünschte Auflösung – die man im Übrigen auch an die individuellen Vorstellungen anpassen kann – auszuwählen. Da das Ziel eine „webbasierte Anwendung“ sein soll, entscheide ich mich für die HTML-Variante.
001_mediator8_pro_assistent1.jpg

001_mediator8_pro_assistent21.jpg

001_mediator8_pro_assistent3.jpg

Anmerkung: Ob MatchWare’s „Mediator 8.0 Pro“ das geeignete Werkzeug für Flash- bzw. HTML-Projekte ist, bleibt fraglich. Für beide bieten alternative Lösungen, etwa „Adobe Dreamweaver“ oder „Macromedia Flash MX“, wesentlich umfangreichere Optionen. Außer Frage steht jedoch, dass der „Mediator“ für CD-ROM-Produktionen ein passables Software-Instrument darstellt.

Realisierung der Projektaufgabe

Nach den obligatorischen Abhandlungen des Projektassistenten erscheint eine leere Seite, die es nun gilt, mit Inhalten zu füllen. Auf der linken Seite des Mediators befinden sich verschiedene Auswahlfenster (Eigenschaften, Seiten, Objekte), darüber eine Werkzeugleiste, aus der unter anderem die Auswahlfunktion, Textfelder, Schaltflächen und Bilder selektiert werden können.

001_mediator8_pro_schaltflaeche_03.jpg

Abb. 1: Die Werkzeugleiste des Mediator

Prinzipiell ist es von Vorteil, zunächst eine Prototyp-Seite mit Navigationselementen (Für die in der Aufgabenstellung vorgegebenen Rubriken „Technik“, „Content“ und „Organisation“), Textfeldern, Überschriften und dem Druck-Button anzufertigen. Diese Elemente der fertigen Prototyp-Seite brauchen später nur noch in die anderen Seiten kopiert werden (die Navigationselemente sind schließlich in allen drei Seiten gleich) – die variablen Inhalte wie Texte und Überschriften lassen sich später schnell anpassen.

Schaltflächen für das Navigationsmenü anlegen

Zunächst wird ein Navigationsbutton (In der Werkzeugleiste den Button „Schaltfläche“ auswählen, auf die Arbeitsfläche wechseln und „ein Rechteck bei gedrückter linker Maustaste ziehen“) angelegt.

001_mediator8_pro_schaltflaeche_01.jpg

Abb. 2: In der Werkzeugleiste kann der Button „Schaltfläche“ zum Anlegen des Navigationsmenüs ausgewählt werden .

Danach kann das Auswahlwerkzeug in der Werkzeugleiste aktiviert werden, um anschließend den angelegten Button im Arbeitsbereich auszuwählen. Der voreingestellte Text kann gelöscht werden, da für die Navigationsleiste externe Bilder (vgl. Material) zur Verfügung stehen. Anschließend kann man im Fenster links („Eigenschaften von Schaltfläche…“) den Button „Bild“ anklicken und wählt im Feld „Bildpfad normal“ die zur Verfügung gestellte Vorlage aus.

001_mediator8_pro_ereignisse_03.jpg

Abb. 3: Schaltflächen mit individuellen Bildern versehen

Gegebenenfalls kann nun die Größe der Schaltfläche angepasst werden (Im Arbeitsbereich die Schaltfläche auswählen und an den schwarzen Randpunkten mit gedrückter linker Maustaste ziehen)

001_mediator8_pro_auswahlwerkzeug.jpg

Abb. 4: Mit dem Auswahlwerkzeug können Elemente auf der Arbeitsfläche justiert, verzerrt und (später) mit bestimmten Aktionen ausgestattet werden.

Die so erzeugte Schaltfläche muss in einem nächsten Schritt mit der ersten Seite verknüpft werden. Dazu genügt ein Klick im Kontextmenü (rechte Maustaste – Ereignisse), bei der per „Drag&Drop Aktionen miteinander verknüpft werden können. Dazu einfach im linken Bereich „Mausklick“ und im oberen Bereich „Seitenwechsel“ in das zunächst leere Feld ziehen und den passenden Seitennamen angeben.

001_mediator8_pro_ereignisse_01.jpg

001_mediator8_pro_ereignisse_02.jpg

001_mediator8_pro_ereignisse_05.jpg

Abb. 5 – 7: Schaltflächen mit bestimmten Ereignissen verbinden.

Auf diese Weise können nun nacheinander drei Schaltflächen angelegt werden, die zunächst alle auf die eine vorhandene Seite verweisen.

Textfelder für Überschriften und Textinhalte

Um die Prototyp-Startseite fertig zu stellen, werden Textfelder für die Überschrift und den Textinhalt benötigt. Dazu klickt man in der Werkzeugleiste auf den Button „Text“ und zieht bei gedrückter linker Maustaste im Arbeitsbereich ein entsprechendes Feld. Per Doppelklick lassen sich nun Schriftart- und Farbe auswählen. Die in den Vorlage-Dokumenten (Seite1.doc, Seite2.doc, Seite3.doc) bereits vorgehaltenen Inhalte lassen sich bequem per „Copy&Paste“ einfügen.

001_mediator8_pro_ereignisse_03_textfeld.jpg

Abb. 8: Textfelder editieren

Titelbild einfügen

Fehlt noch das Titelbild, welches auf allen drei Seiten erscheinen und im Beispiel am unteren Bildschirmrand positioniert werden soll. Dazu in der Werkzeugleiste den Button „Bild“ auswählen und im Arbeitsbereich mit gedrückter linker Maustaste ziehen. Danach kann das Pixelmaterial (titel.gif) ausgewählt, positioniert und ausrichtet werden.

001_mediator8_pro_bild.jpg

Abb. 9: Bilder einfügen

Neue Seiten anlegen, Inhalte ändern

Nachdem das Layout der ersten Seite steht, werden im Fenster links (Seiten) per Kontextmenü (rechte Maustaste – „Neu“) zwei weitere Seiten angelegt, da schließlich drei Stück („Technik“, „Content“ und „Organisation“) davon benötigt werden. Diese zunächst leeren Seiten werden nun mit den fertigen Elementen der ersten Seiten (In der Werkzeugleiste den Button „Auswahlwerkzeuge“ anklicken und im Arbeitsbereich bei gedrückter Strg-Taste und linker Maustaste alle Elemente markieren, anschließend im Menü unter „Bearbeiten“ –
Kopieren“ wählen, auf die zweite Seite wechseln (linkes Fenster „Seiten“) und im Menü „Bearbeiten“ – „Einfügen“ klicken – fertig!

001_mediator8_pro_schaltflaeche_04.jpg

Abb. 10: Neue Seite anlegen

HTML produzieren

Nachdem alle drei Seiten erstellt, verlinkt und mit Inhalten gefüllt sind, soll im letzten Schritt das Mediator-Projekt in das HTML-Format exportiert werden. Dazu im Menü „Datei“ – „Runtime erzeugen“ – „Schnell“ wählen und als Ausgabeformat „HTML(Website)“ markieren. Der Ausgabeordner kann ggf. modifiziert und auf entsprechenden Webspace geladen werden.

001_mediator8_runtime_erzeugen.jpg

001_mediator8_runtime_erzeugen2.jpg

Abb. 11-12: Projekt in HTML konvertieren

Finales HTML-Produkt:

001_mediator8_pro_final_html.jpg

FERTIGES HTML (externe Seite)

Probleme:

Dynamische Navigationselemente mit Mausover-Effekt ließen sich im Mediator ebensowenig einbinden wie die gewünschte Druckfunktion.

Weiterführende Links: