Navigation für Internetpräsenzen

Transkript

1 Navigation für Internetpräsenzen Gestern und heute 2016

2 Navigieren in Internetseiten Das Wort Navigation wird den meisten bekannt sein und fast jeder kann eine Verknüpfung aus seinem alltäglichen Leben zu diesem Wort herstellen. Sei es, dass man gehört hat, das ein Schiff über das Meer navigiert oder das Flugzeug durch die Luft und Autos auf den Strassen, um an ihr Ziel zu kommen. Und genau das ist es, was wir auch auf einer Internetseite mit einer Navigation erreichen wollen, ans Ziel kommen. Internetpräsenzen bestehen in der Regel aus diversen Seiten mit unterschiedlichem Inhalt. Damit der Nutzer jetzt schnell und sicher zu seinem Ziel kommt benutzt er die Navigation. Diese Navigationhilfen sind meistens als Leisten angelegt deshalb spricht man hier von Navigationsleiste.

3 Die Navigationsleiste Eine Navigationsleiste kann ganz unterschiedlich konzipiert sein. Sie kann nur aus Texten bestehen aber sie kann auch genau so nur aus grafischen Elementen oder Bildern bestehen. Möglich sind natürlich auch Kombinationen aus diesen Bestandteilen und im allgemeinen werden auch Kombinationen in heutigen Internetpräsenzen verwendet. Der Grund ist simpel, das Grafikelement symbolisiert ein Punkt/Knopf und der Text liefert die Information wohin dieser Navigationspunkt führt. Was alle Navigationsleisten gemein haben, ist,das die Elemente, Grafiken, Bilder oder Texte verlinkt sind mit ihrem Ziel. Eine Verlinkung ist eine Zuweisung von einem Punkt zu einem anderen. Z.B. von Seite1 zu Seite10 oder von Thema Berichte zu Thema Bildergalerie.

4 Aufbau einer Navigationsleiste Hintergrund Grafikelement Textinformation Durch diesen Aufbau wird eine Navigationsleiste auf der Internetseite visualisiert und durch den Nutzer schnell als solche war genommen. Bis vor kurzem waren solche Navigationsleisten Standard. In heutigen Zeiten gibt es sie in zahlreichen unterschiedlichen Varianten aber dazu später mehr.

5 Internetseiten gestern und heute In der Vergangenheit wurden Internetseiten nur mit festem Layout erstellt. Sie wurden so erstellt, dass sie auf den Standardmonitoren gut zu lesen waren. Somit wurde auch nur eine Art von Navigationsleisten erstellt, diese sahen häufig ähnlich der auf der Vorseite abgebildeten aus. Zu diesem Zeitpunkt bestand auch noch kein Bedürfnis die Visualisierung unterschiedlich zu gestallten, da es nur eine geringe Anzahl an verschiedenen Monitorgrössen gab. Mit dem Aufkommen neuer Geräten mit denen man das Internet nutzen sollte, wurde die Vielfalt der Displaygrössen mehr und man mußte sich etwas einfallen lassen um mit allen Geräten die Internetseiten gut nutzen zu können. So wurden Internetseiten entwickelt die nicht mehr mit festem Layout waren sondern mit einem fließenden Layout, die sogenannten responsiven Internetseiten. Diese passen sich auf jegliche Bildschirmbreite an und sind so auf allen Geräten gut zu nutzen. Jetzt wurden aber auch neue, flexible und sich verändernde Navigationsleisten benötigt die zu dem noch leicht anpassbar sein sollten.

6 Moderne Navigationsleisten Die heutigen modernen Navigationsleisten bestehen in den meisten Fällen immer noch aus den 3 Standardelementen Hintergrund, Grafik und Textinformation. Zusätzlich sind sie heute häufig animiert. Die Anpassungen der Navigationsleisten geschieht heute über die Scriptsprache CSS. Hiermit kann man das gesamte Aussehen und die Funktionalität beeinflussen und ändern. In heutigen Zeiten sind auch transparente oder teilweise transparente Hintergründe kein Problem mehr. Eine Internetseite kann heute mit verschiedenen Navigationsleisten visualisiert werden und so auch in der Größe angepasst werden. Diese verschiedenen Navigationsleisten können optisch total unterschiedlich aussehen und gehören trotzdem zum selben Internetauftritt. Auf der nächsten Seite mal ein paar Bilder.

7 Navigationsleiste in verschiedenen Visualisierungen Navigation für große Displays 2 Navigation für mittel große Displays (Tablet) 3 Navigation für kleine Displays ( Handy)

8 Vorteile der einzelnen Navigationsvisualisierungen Diese Art der Navigation wird Mega Menü oder auch Big Menü genannt. Sie kommen hauptsächlich auf sehr großen umfänglichen Internetpräsenzen zum Einsatz. Der Vorteil einer solchen Variante ist, das man direkt mit nur einem Klick zum Endziel kommt. Der Nachteil ist, das diese Variante nur auf entsprechend großen Displays nutzbar sind. Die zweite Variante ist eine Navigationsleiste mit Untermenü. Jeder Punkt in der oberen Leiste hat diverse Unterpunkte. Angezeigt wird das Untermenü aber nur wenn man z.b. mit dem Mauspfeil auf einen Punkt in der oberen Leiste geht. Vorteil dieser Navigation ist das sie sich gut eignet für mittelgroße Displays, da eine mäßige Breite benötigt wird und der Rest nach unten geöffnet wird. Nachteil ist hier das man nicht direkt ans Endziel kommt, man muss immer erst einen Punkt in der oberen Leiste wählen und kann dann erst im Untermenü zum entsprechenden Thema (Endziel) gelangen. Hier handelt es sich um eine Off-Canvas-Navigation. Sie ist für den Einsatz auf sehr kleinen Displays gedacht. Ihre Funktionsweise bewirkt,dass Sie das gesamte Display benutzt. So ist am Anfang nur ein Eintrag zusehen der sich MENÜ nennt wenn man den anklickt schiebt sich das gesamte Menü in den Bildschirm und den Inhalt der Internetseite außerhalb des sichtbaren Bereichs. Nach Auswahl des neuen Thema s schließt sich das Menü wieder und der Inhalt der Internetseite wird wieder im sichtbaren Bereich angezeigt. Vorteil dieser Variante ist die volle Nutzung des Displays sowohl für das Navi wie auch für die Visualisierung des Conten der Internetpräsenz. Nachteil ist hier das man erst nach dem aktivieren des Menü s sehen kann was auswählbar ist und es kann sich über mehrere Ebenen erstrecken ja nach Umfang der Internetpräsenz.

9 Cascading style sheets was ist das? Cascading Style Sheets oder auch CSS genannt ist eine Stylesheet-Sprache für elektronische Dokumente die in Verbindung mit der Programmiersprache HTML steht, eine der Kernsprachen des World Wide Webs. Für genauere Informationen folgen Sie diesem Link hier: CSS was ist das? Die Syntax dieser Sprache sieht wie folgt aus: p.info { font-family: arial, sansserif; line-height: 150%; margin-left: 2em; padding: 0,5em; border: 3px solid red; background- color: #f89; display: inline-block; }

10 Vorteile bei Verwendung von CSS Das visuelle Gestallten des Inhalts von Internetseiten durch die Script-Sprache CSS bringt viele Vorteile. So z.b. wenn man bei einem Text die Schrift vergrößern bzw. die Farbe ändern möchte geht dies sehr schnell und die Schrift bleibt immer Scharf da sie nie verpixelt dargestellt wird. Ein weiterer Vorteil der durch das Nutzen von CSS entsteht, ist dass man für bestimmte sich wiederholende Elemente einen fest vorgegebenen Style anlegen kann. Wenn Sie jetzt in Ihrer Seite solch ein Element neu Anlegen, bekommt es automatisch den Style den Sie vorher angelegt haben. Ein Beispiel wäre hier die Darstellung der adresse im verlinkten Zustand. Hier wird dann vordefiniert, welche Farbe die Schrift haben soll, ebenso die Größe und auch die Rollover-Farbe angezeigt wird.

11 Implementieren von CSS-Scripten Die Script-Sprache CSS kann auf verschiedene Art und Weise Implementiert werden. Man kann die CSS-Anweisung direkt vor ein Element im Quelltext setzen dann gilt das was da steht nur für das eine Element. <h1 style="color: red; background-color: black;">überschrift</h1> Es ist aber genauso möglich einen Stylebereich in den Headbereich des HTML Quelltext zu schreiben. Dann müssen diese aber Elementen zugewiesen werden. In den Stylebereich werden dann die CSS-Anweisungen geschrieben. <!DOCTYPE html> <html lang="de"> <head> <style type="text/css"> h1 { color: red; background-color: black; } </style> </head> <body> <Das ist dein gestylter Text</h1> </body> </html>

12 CSS auslagern Die dritte Variante und die am meisten genutzte ist das sogenannte Auslagern. Bei dieser Variante wird eine eigene Datei erstellt die sämtliche CSS-Anweisungen enthält und einen eigenen Namen mit der Endung css bekommt. Damit auf diese Datei auch zugegriffen werden kann, muß im Quelltext (HTML) ein Verweis auf diese Datei erzeugt werden. Dieser Verweis wird in den Headbereich geschrieben und hat einen festen Syntax. Die Datei mit den CSS-Anweisungen wird mit einem Editor erstellt und muß ohne Formatierung erstellt werden. Abgespeichert wird die Datei dann mit der Endung.css ( z.b. meinedatei.css). Syntax für die CSS Datei: <link href= meinedatei.css" type="text/css" rel="stylesheet"> h1 { color: red; background-color: black; }

13 Unterlage erstellt von AndyNeu am AndyNeu Genehmigung zur Verwendung im NetObjectFusion Blog und Forum 2016