4 Installation des Programms
Werbung
Projektarbeit JavaScript Navigations-Menu Instruktion für Benutzung und Unterhalt Navigations-Menu Name: Manuel Munoz Klasse: 01b Manuel Munoz Klasse 01b TBZ-TS 14.05.2016 JavaScript Navigations-Menu Inhaltsverzeichnis 1 Einleitung .................................................................................................................... 1 1.1 1.2 2 Programmgebrauch, erste Schritte ........................................................................... 1 2.1 3 Präsentation des Programms .......................................................................................... 1 Sinn und Zweck der Anwendung ..................................................................................... 1 Dies sind die ersten Bedienungsschritte .......................................................................... 1 Die Bedienungselemente ........................................................................................... 2 3.1 Bereiche zur Ein- / Ausgabe ............................................................................................ 2 3.1.1 3.1.2 3.1.3 3.2 Banner-Frame .............................................................................................................................. 2 Navigations-Frame....................................................................................................................... 2 Anzeige-Frame ............................................................................................................................ 2 Navigationsstruktur .......................................................................................................... 3 3.2.1 3.2.2 3.2.3 3.2.4 4 Das Navigationsmenu .................................................................................................................. 3 Das Mainmenu ............................................................................................................................. 3 Das Submenu .............................................................................................................................. 5 Zur Startseite................................................................................................................................ 5 Installation des Programms ....................................................................................... 6 4.1 Systemvoraussetzungen ................................................................................................. 6 4.1.1 4.2 4.3 4.4 4.5 5 Vom Server starten.......................................................................................................... 7 Lokal starten .................................................................................................................... 7 Bedienungshinweise .................................................................................................. 7 6.1 6.2 6.3 6.4 6.5 7 Hardware ......................................................................................................................... 6 Software .......................................................................................................................... 6 Instruktionen zur Installation ............................................................................................ 6 JavaScript im Browser aktivieren ..................................................................................... 7 Starten des Programms ............................................................................................. 7 5.1 5.2 6 Empfohlene Web-Browser sind: .................................................................................................. 6 Empfohlene Grafik Auflösung .......................................................................................... 7 Voreingestellte Konfigurationen ....................................................................................... 7 Zurücksetzen des Programms ......................................................................................... 7 Kompatibilität mit Normen und Browsern ......................................................................... 8 Bekannte Probleme ......................................................................................................... 8 Anhang ......................................................................................................... ab Seite 7 A.1 A.2 A.3 Pflichtenheft ...................................................................................................... ab Seite 7 Struktogramme ................................................................................................. ab Seite 7 Code ................................................................................................................. ab Seite 7 Manuel Munoz Projektarbeit Klasse 01b TBZ-TS JavaScript Navigations-Menu 1 Einleitung 1.1 Präsentation des Programms Im Rahmen unserer Semesterarbeit im Fach Anwendersoftware 2, habe ich den Auftrag erhalten in JavaScript eine Menustruktur zur Navigation einer Internetseite zu programmieren. Die vorliegende Applikation ist der Versuch das Navigieren auf einer Internetseite zu erleichtern. Durch das Anklicken eines Menueintrages in einem nur für die Navigation vorgesehenen Bereich werden Untermenus geöffnet und die Links (Untermenus) werden sichtbar. Beim Anklicken eines Links wird die betreffende Seite angezeigt, das Navigationsmenu bleibt dabei immer sichtbar. Das Menu ist strukturiert aufgebaut und selbsterklärend. 1.2 Sinn und Zweck der Anwendung Ein Navigationsmenu macht das Navigieren zu den vorhandenen Links sehr komfortabel und ist zudem platzsparend. Es können sehr viele Links auf einer kleinen Fläche untergebracht werden. Auf Internetseiten mit mehreren Frames und einer grossen Anzahl an Links, ist das Navigieren zwischen den Links oft mühsam und unübersichtlich. Für die erwähnten Seiten ist ein strukturiertes Navigationsmenu das ideale Werkzeug. Durch die Strukturierung der Navigation wird sichergestellt, dass der Anwender nicht die Übersicht verliert. 2 Programmgebrauch, erste Schritte Die Bedienung des Menus ist gänzlich einfach, der Benutzer findet sich schnell zurecht. Unter dem nachfolgenden Titel „Die Bedienungselemente“ wird der Gebrauch genauer und mit Illustrationen erklärt. 2.1 Dies sind die ersten Bedienungsschritte 1. Man klickt im linken Bereich der Seite auf den gewünschten Oberbegriff (Mainmenu) und öffnet dadurch das Untermenu. Durch erneutes Anklicken des Oberbegriffs wird das Menu wieder geschlossen. 2. Es können mehrere Menus gleichzeitig geöffnet sein, können aber nach Belieben auch wieder geschlossen werden. 3. Klickt man im geöffneten Menu auf das gewünschte Untermenu (Submenu) wird die betreffende Seite geladen und dargestellt. 4. Wird ein anderes Untermenu gewählt, wird die aktuell angezeigte Seite durch die neu gewählte ersetzt. 5. Beim Anklicken des Eintrages „Zur Startseite“ wird wieder die Willkommensseite angezeigt und das Navigationsmenu wird zurückgesetzt. Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 1 von 7 JavaScript Navigations-Menu 3 Die Bedienungselemente 3.1 Bereiche zur Ein- / Ausgabe Die Seite besteht aus drei Frames, dem Navigations-Frame, dem Anzeige-Frame und dem Banner-Frame (Abbildung 1). Banner-Frame Eingabe Navigations-Frame Keine Ein/Ausgabe Anzeige-Frame Ausgabe (Eingabe) Abbildung 1 3.1.1 Banner-Frame Das Banner-Frame wird nicht für die Eingabe oder Ausgabe verwendet, es dient lediglich als Anzeigefläche für Grafiken oder den Titel, wie z.B. ein Banner. 3.1.2 Navigations-Frame In diesem Frame ist die Seite die der Navigation dient untergebracht. Diese Seite ist als Eingabefenster gedacht, wobei alle Eingaben mit der Maus getätigt werden. Die Eingabe beschränkt sich auf das Anklicken von Links. 3.1.3 Anzeige-Frame Im Anzeige-Frame werden die Seiten, die über das Navigationsmenu gewählt wurden dargestellt. Dieser Bereich dient nicht nur der Ausgabe, es können auch Eingaben auf der angezeigten Seite getätigt werden (z.B. Links anklicken usw). Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 2 von 7 JavaScript Navigations-Menu 3.2 3.2.1 Navigationsstruktur Das Navigationsmenu Das Navigationsmenu besteht aus drei Komponenten: Mainmenus (Oberbegriffe) Submenus mit deren Links Link um zur Startseite zurück zu kehren Die Submenus werden erst sichtbar, wenn eines der Mainmenus angeklickt wurde und so die Submenus anzeigt. 3.2.2 Das Mainmenu Das Menu beinhaltet Oberbegriffe (Abbildung 2). Diese öffnen sich beim Anklicken mit der Maus und zeigen die dazugehörigen Unterbegriffe (Links) an (Abbildung 3). Das Menu wird wieder Oberbegriffe (Mainmenus) Abbildung 2 geschlossen indem man den selben Oberbegriff erneut anklickt. Die Mainmenus beinhalten folgende Themen: Das Projekt Alle Informationen zum Projekt Der Designer Informationen über mich (Personalien, Hobbys) JS Links Hilfreiche Links zur Programmierung mit JavaScript/HTML Meine Links Ein paar meiner Lieblingslinks Coole Links Interessante Links, eindrucksvolle Webpages Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 3 von 7 JavaScript Navigations-Menu Fun for you Manuel Munoz Links die zum Lachen anregen Instruktion für Benutzung und Unterhalt Seite 4 von 7 JavaScript Navigations-Menu 3.2.3 Das Submenu Das geöffnete Menu bleibt so lange offen bis es durch einen erneuten Klick geschlossen wird. So sind je nach Wunsch mehrere Menus offen, können aber bei Nichtgebrauch oder um Platz für weitere Untermenus zu schaffen geschlossen werden. Anzeige-Frame Links (Submenus) Abbildung 3 Beim Anklicken eines Links in einem Submenu wird die entsprechende Seite geladen und im Anzeige-Frame dargestellt (Abbildung 3). Wird ein anderer Link angeklickt, wird die im AnzeigeFrame vorhandene Seite durch die neu gewählte ersetzt. Seiten die sich durch ihre Beschaffenheit nicht in einem Frame anzeigen lassen, werden in einem neu geöffneten Fenster dargestellt. Der aktuell gewählte Link ist immer durch einen Pfeil markiert und erleichtert dem Benutzer somit die Orientierung (Abbildung 4). Der Pfeil springt immer zum zuletzt gewählten Link. Zur Startseite Am Ende des Menus befindet sich der Link der zurück zur Startseite führt. Ein Klick auf den Link „Zur Startseite“ und die Willkommensseite wird wieder angezeigt (Abbildung 4). Alle geöffneten Menus werden dadurch wieder geschlossen. Zur Startseite Abbildung 4 Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 5 von 7 JavaScript Navigations-Menu 4 Installation des Programms 4.1 Systemvoraussetzungen Um die Anwendung benutzen zu können, muss ein Betriebssystem mit grafischer Oberfläche und ein Web-Browser installiert sein. Das Betriebssystem kann beliebig gewählt werden, es muss allerdings einen der empfohlenen Browser unterstützen. 4.1.1 Empfohlene Web-Browser sind: MS Explorer ab Version 5.0 Netscape Navigator ab Version 4.5 (nur bedingt, siehe Bekannte Probleme) Der Browser muss JavaScript ab Version 1.2 und HTML4 unterstützen. Ausserdem ist zu beachten, dass der Browser so konfiguriert ist, dass er JavaScript ausführt. Dazu mehr unter „JavaScript im Browser aktivieren“. 4.2 Hardware Als Hardware kann ein handelsüblicher Computer mit einer funktionierenden Internetverbindung benutzt werden. Die Hardware muss den Anforderungen des verwendeten Browsers entsprechen. 4.3 Software Als Client muss ein Browser verwendet werden mit dessen Hilfe die Default Seite (Default.htm), die auf dem Server abgelegt ist, geöffnet werden kann. Informationen zu den zu verwendeten Browsern finden Sie weiter oben in diesem Dokument unter „Empfohlene Web-Browser“. Auf der Serverseite muss ein Computer als Webserver konfiguriert werden, um den Zugriff auf die Applikation zu gewährleisten. Die Applikation kann mit einem Browser auch lokal von der Festplatte des verwendeten Computers gestartet werden. Dazu müssen alle notwendigen Files im gleichen Ordner abgelegt sein. Siehe „Instruktionen zur Installation“. 4.4 Instruktionen zur Installation Um die Applikation lokal zu verwenden, müssen alle Files, einschliesslich Grafiken, im selben Ordner abgelegt werden. Werden die Grafiken in einem separaten Ordner abgelegt, können diese nicht angezeigt werden, weil der in der Applikation programmierte Pfad nicht mehr übereinstimmt. Zum Starten der Applikation muss das File „default.htm“ geöffnet werden. Folgende Dateien müssen im gleichen Ordner abgelegt sein: Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 6 von 7 JavaScript Navigations-Menu 4.5 JavaScript im Browser aktivieren Es muss darauf geachtet werden, dass im Browser die Verwendung von JavaScript aktiviert ist. Falls dies nicht der Fall ist, wird die Applikation nicht funktionieren. So stellen Sie sicher, dass Ihr Browser JavaScript unterstützt: Internet Explorer: Im Menu unter „Extras“ „Internetoptionen“, im Register „Sicherheit“, wählen Sie die Schaltfläche „Stufe anpassen“. Unter dem Punkt Scripting muss „Active Scripting“ aktiviert sein. Netscape Navigator: Öffnen Sie das Menu „Bearbeiten“ „Einstellungen“, wählen Sie den Punkt „Erweitert“ und aktivieren Sie JavaScript und JavaScript für Navigator. 5 Starten des Programms 5.1 Vom Server starten Mit dem Eintrag der Adresse http://130.60.208.53:8854/asuserd/ im verwendeten Browser wird die Applikation vom Webserver gestartet. Soll die Verbindung von ausserhalb der TBZ-TS Netzwerkumgebung hergestellt werden, muss vorher eine VPN Verbindung zum TBZ-TS Netzwerk hergestellt werden. Bedingt durch die Firewall der TBZ-TS ist erst dann ein Zugriff auf den Server und die Applikation möglich. 5.2 Lokal starten Lokal wird das Programm durch das Öffnen des Files „default.htm“ gestartet. Die Webseite wird in Ihrem als Standard definierten Browser geöffnet. 6 Bedienungshinweise 6.1 Empfohlene Grafik Auflösung Die Seite ist optimiert für eine Auflösung von 1024x768 Bildpunkten. Es wird empfohlen diese Auflösung zu benutzen. Wird eine niedrigere Auflösung benutzt (z.B. 800x600), wird die Seite nicht vollständig angezeigt. 6.2 Voreingestellte Konfigurationen Die Seite wird mit dem geschlossenen Menu und der Willkommensseite als Standard im AnzeigeFrame gestartet. 6.3 Zurücksetzen des Programms Beim Betätigen des Links „Zur Startseite“ wird die Anwendung in den Anfangszustand zurückgesetzt. Es werden alle offenen Menus geschlossen, die Willkommensseite wird geladen und somit angezeigt. Alternativ kann auch der „Aktualisieren“ Button in Ihrem Browser benutzt werden. Allerdings wird in diesem Fall die Willkommensseite nicht geladen. Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 7 von 7 JavaScript Navigations-Menu 6.4 Kompatibilität mit Normen und Browsern Die Anwendung entspricht den Normen des Microsoft Internet Explorers. Dieser kennt alle im Programm verwendeten HTML und JavaScript Anweisungen. Die Applikation ist nicht vollständig an die von Netscape vorgeschriebenen Normen angepasst: Einige für die Funktion wichtige Anweisungen in der Applikation werden vom Netscape 6.x nicht unterstützt. Diese Browser Generation ist inkompatibel und ist nicht geeignet um die Applikation zu verwenden. Der Netscape Navigator 4.x ist nur teilweise kompatibel. Die Funktion der Applikation wird aber nicht beeinträchtigt, nur das Erscheinungsbild der Grafiken. Auch Opera 6.x ist inkompatibel und kann nicht verwendet werden. Mehr darüber finden Sie unter „Bekannte Probleme“. 6.5 Bekannte Probleme Probleme mit Browsern Die Browser Netscape 6.x und Opera 6.x unterstützen einige verwendete JavaScript Anweisungen nicht und zeigen das Navigationsmenu nicht an. Diese Browser können nicht eingesetzt werden. Der Netscape Navigator Version 4.x kann verwendet werden. Allerdings werden die Grafiken im Banner und im Navigations-Frame nicht korrekt dargestellt (verschoben). Bekannte Schönheits-Fehler Der Netscape Navigator hat Probleme mit „<style>“ Anweisungen, daher werden die Definitionen für die Darstellung der Schriften im Navigationsmenu ignoriert. Die Schriften haben ein anderes Erscheinungsbild als im Original. 7 Anhang Anhang 1 Pflichtenheft Anhang 2 Struktogramme Anhang 3 Code Manuel Munoz Instruktion für Benutzung und Unterhalt Seite 8 von 7
