Referat Webdesign Screen Design, SoSe 2004 Dozent: Andreas Naurath Referat: Silke Rothfuß, Matr.-Nr

Transkript

1 Referat Webdesign Screen Design, SoSe 2004 Dozent: Andreas Naurath Referat: Silke Rothfuß, Matr.-Nr Die Grundlagen 1.1 Domainnamen bestimmen Internetadressen sog. URL s (Uniform Resource Locator) werden standardisiert dargestellt. Unter lässt sich kontrollieren, ob der gewünschte Domainname noch frei ist. Das DENIC (Deutsches Network Information Center) ist die offizielle Registrierungsstelle für alle deutschen de-domains. Eine Domain (Domäne) ist ein Name für eine Internet-Adresse. Jede Website ist über eine IP-Adresse (Internet-Protokoll-Adresse) identifizierbar (z.b. http.// ) Weil sich die Zahlen aber kein Mensch merken kann, wird jeder Zahlen-Domain ein symbolischer Name zugeordnet. Das geschieht über den sog. DNS (Domain Name Service). Im Kontext einer Homepage wird unter Domain der Domain-Name inklusive dem damit verbundenen Webspace verstanden. Da im Internet jede Domain nur einmal registriert werden kann - sonst wäre die eindeutige Zuordnung zu den IP-Adressen nicht mehr gegeben -, braucht jede Top Level Domain eine zentrale Registrierungsstelle, bei der alle Daten zentral zusammenlaufen. Dies gilt sowohl für die mehr als 240 country code Top Level Domains (kurz cctlds) wie.de für Deutschland oder.at für Österreich als auch für allgemeine Endungen wie.com,.net,.org,.biz oder.info, die auch als generische TLDs (gtlds) bezeichnet werden. Informationen über die verschiedenen Domainverwaltungsstellen findet man in den Datenbanken von IANA und ICANN. 1.2 Anmeldung bei einem Provider und Registrierung der Domain Man unterscheidet Provider, die den Internetzugang ermöglichen und Hosting-Provider, die Rechnerkapazitäten sog. Webspace für WWW-Auftritte zur Verfügung stellen. Bei der Anmeldung einer neuen Domain sollte man bei der Registrierung darauf achten, dass man nicht nur als Domainbesitzer sonder auch als Admin-C eingetragen ist, damit sonst niemand über den Namen verfügen kann. Je nach Platzbedarf und Speichergröße schon für wenige Euro im Monat. Es gibt auch kostenlosen Webspace, der aber über Werbung finanziert wird, deshalb nicht empfehlenswert. Bekannte Provider sind z.b. Domainfactory ( oder 1 und 1 ( 1.3 Was ist HTML? Webseiten sind ganz normale Text-Dateien, in denen die darzustellenden Inhalte in der Layout- Beschreibungssprache HTML definiert sind. HTML steht für "Hypertext Markup Language". Das ist eine einfache "Programmiersprache". Mit HTML werden Schriftarten, Schriftgröße, Textformatierungen, Darstellung von Bildelementen, Farbdefinitionen, Links usw. durch HTML-Befehle beschrieben. HTML-Dateien haben im Namen die Dateierweiterung.html bzw..htm und können auch offline auf dem PC mit jedem Web-Browser angezeigt werden. Die Dateien lassen sich mit einem ganz normalen Text-Editor öffnen. Dann sieht man "HTML pur", wobei die eigentlichen HTML-Befehle in <spitzen Klammern> stehen, die auch Tags genannt werden. Die Weiterentwicklung von HTML heißt XML und steht für extensible Markup Language. Besonderer Vorteil: System unabhängiger Datenaustausch auch Plattformübergreifend möglich. 1.4 Cascading Style Sheets (CSS) Standard zur Beschreibung der Layouteigenschaften von HTML-Dokumenten.

2 CSS ist eine der wichtigsten Erweiterungen des HTML-Standards. Mit CSS kann man unter anderem die Gestaltung/Formatierung und den Inhalt einer Webseite voneinander trennen: Der Body-Teil der HTML-Seite enthält nur den Text und die grundsätzlichen Strukturierungs-Tags. Die Formatierungen lagert man in ein Datei-internes oder externes "Style Sheet" aus, das im <head>-bereich der Webseite eingebunden wird. Statt in jedem Absatz erneut die Schriftart, -farbe und -größe zu definieren, bestimmt man im Style Sheet, dass alle Absätze (oder Tabellenzellen) mit einer bestimmten Formatierung angezeigt werden sollen. Diese Vorgehensweise führt zu schlankere HTML- Dokumenten und vereinfacht die Umformatierung bei Änderungen des Textlayouts. 1.5 Die Web-Editoren (=Webseiten-Erstellungswerkzeug) Beispiele für kostenlose textbasierte Freeware HTML-Editoren: - "First Page 2000" von EVRSoft. First Page hat eine englische Bedienungsoberfläche unter zum Download. - "W3E" mit englischer Bedienungsoberfläche. Erhältlich unter - "Arachnophilia". Steht auf - "VIM" mit englischer Bedienungsoberfläche und sehr guter Syntax-Hervorhebung.VIM ist erhältlich auf für alle gängigen Betriebssysteme. Ohne HTML-Kenntnisse kann man trotzdem eigene Sites erstellen und zwar mit Hilfe von WYSIWYG-Editoren. WYSIWYG heißt "What you see is what you get": Schon bei der Erstellung sieht man sofort, was der Browser später anzeigt. Texte und Bilder werden direkt wie bei einer Textverarbeitung eingegeben und formatiert. Mit dem HTML-Code kommt man nicht in Berührung. Bekannte WYSIWYG-Editoren sind: - Dreamweaver (von Macromedia, ) informiert via online-präsentation über die Möglichkeiten des Programms. - GoLive (von Adobe, - Namo WebEditor (von Namo, ) - Frontpage 2000 (von Microsoft, - Fusion (von NetObjects, Übertragung der eigenen Page auf den Server des Providers FTP heißt "File Transfer Protocol". Das ist das übliche Verfahren zum Transferieren von Dateien jeder Art über das Internet und wird von den meisten Webspace-Providern unterstützt. Für den eigenen Computer benötigen man ein "FTP Client" Programm, das Gegenstück zur serverseitigen Software. HTTP: (engl. "Hypertext Transfer Protocol"), ist ein Standard, der den Datenaustausch im World Wide Web regelt). 1.7 JavaScript JavaScript ist eine von Netscape "erfundene" Scriptsprache, deren Anweisungen meist direkt im HTML-Code stehen. Die Implementierungen der einzelnen JavaCript Interpreter bei den verschiedenen Browsern sind recht unterschiedlich, so dass Seiten mit JavaScript auf verschiedenen Browsern getestet werden müssen. Beispiele für sinvolle Anwendungen: das Erzeugen von Popup-Fenstern, in denen Bilder, Text oder Flash-Filme angezeigt werden oder Seitenumleitungen. Oft auch überflüssige Spielereien wie Links

3 und Grafiken, die sich ändern, wenn die Maus darüber fährt (sogenannte OnMouseOveroder Hover-Effekte), eine Datumsanzeige, Laufschrift in der Statuszeile, das Sperren der rechten Maustaste und das Anzeigen eines Begrüßungsfensters beim Öffnen einer Webseite. Viele Surfer haben JavaScript wegen der nervigen JavaScript-Spielereien oder aus Sicherheitsgründen in ihren Browser- Einstellungen deaktiviert. In der Vergangenheit gab es immer wieder Sicherheitslöcher z.b. beim Internet-Explorer: Mit Hilfe einer im Browser enthaltenen ActiveX-Controls "XMLHTML" konnten Javascript-Programme auf andere Webseiten zugreifen und deren Inhalt lesen. Das Kommunikationsprotokoll HTTP, mit dem Webseiten abgefragt werden, beinhaltet die Möglichkeit, dass Webserver den Seitenabruf auf beliebige andere Adressen umlenken können. Sie senden dazu einen sogenannten "Redirect-Header" an den Browser zurück. Damit kann eine Abfrage sogar auf Dateien auf der lokalen Festplatte des Anwenders umgeleitet werden. Fertige JavaScripts für alle erdenklichen Anwendungen kann man im Internet herunterladen, z.b. bei Flash "Flash" von der Firma Macromedia ist ein Erstellungsprogrammm für interaktive Animationen für das World Wide Web. Diese Animationen sind quasi kleine Filme. Flash- Filme können auch Elemente zur Seiten-Navigation enthalten und werden aus Vektorgrafiken erstellt. Sie sind somit wesentlich speichersparender als GIF-Animationen und im Gegensatz zu diesen ohne Qualitätsverlust beliebig skalierbar. Im Flash-Format lassen sich animierte Logos, Navigationselemente für Websites, lange Animationen oder komplette Flash-Websites erstellen. Flash-Dateien haben die Dateiendung ".SWF" (ShockWave Flash), die noch editierbaren "Rohdateien" die Endung ".FLA". Kleinere Flash-Animationen lassen sich auch mit dem kostengünstigen "GIF Animator" der Firma Ulead ( ) erstellen.zum Abspielen von Flash- Animationen braucht man zusätzlich zum Browser den Macromedia Flash Player, ein kostenloses Browser - Plugin der Firma Macromedia. Bei neueren Internet-Browsern ist der Flash Player standardmäßig mit im Lieferumfang enthalten. 2. Das Konzept. 2.1 Entwerfen für den Benutzer Bedienerfreundliche und benutzerorientierte Gestaltung zeichnen gute Websites aus. Effekte werden sinnvoll nur dann eingesetzt, wenn sie den Zweck der Site unterstützen. Das Medium ist maßgeschneidert für die ständige Aktualisierung und Weiterentwicklung. Für die Weiterentwicklung oder Ergänzung einer Site sollte deshalb eine durchgängige leicht zu ergänzende Struktur gewählt werden. Die Darstellung ist vom Browser und vom Rechner abhängig. Deshalb sollte eine Site immer für unterschiedlichen Umgebungen getestet werden. Der Entwurf orientiert sich im Idealfall auch an älteren Browsern und bietet alternative Darstellungsarten an. Webseiten sind keine gedruckten Seiten Entscheidung zwischen optischer Qualität und Bedienerfreundlichkeit (Geschwindigkeit) muss getroffen werden. 2.2 Lean Webdesign Geringe Datenmengen machen das Hochladen der Site schneller und sind besucherfreundlich. Beispiel yahoo: besteht aus wenigen Bilddateien, das meiste sind Tabellen, die wesentlich schneller geladen werden können. Ein weiterer wichtiger Punkt ist das Komprimieren. Immer noch die effektivste Möglichkeit, um Datenmengen zu verkleinern, indem man Fotos oder Grafiken als JPEG oder GIF- Dateien ablegt. Die Methode, Websites bis zum puren HTML-Gerüst zu reduzieren ist aber auch nicht empfehlenswert, weil hier an Komfort und Benutzerfreundlichkeit gespart wird, nur um einen kleinen Quellcode zu erreichen.

4 2.3 Die Navigation Damit der Besucher einer Website sich nicht verirrt, ist es sinnvoll sich bei der Navigation an ein paar einfache Regeln zu halten. Z.B. verwendet man am besten unterschiedliche Farben für Links und bereits besuchte Links, damit man erkennen kann, auf welcher Seite man bereits war. Nicht zu viele Verzweigungsmöglichkeiten anbieten, sonst verliert der Besucher schnell den Überblick. Einfache klare Navigation, am besten über Seitenleiste links (wegen Lesegewohnheit) hat sich bewährt. Hilfreich ab einer gewissen Größe ist außerdem ein Suchfunktion. 3. Das Layout 3.1 Der Hintergrund Je stärker der Kontrast desto besser die Lesbarkeit. Buttons, Logos, Text und Grafiken sollen besser zur Geltung kommen. Für Ausdrucke eine eigene Druckversion anbieten, da der Hintergrund nicht mitgedruckt wird Frames Frames verwendet man, wenn Informationen auf jeder Seite gleich sind oder nicht weg gescrollt werden sollen. Ladezeiten verringern sich, wenn nur Teile der Seite nachgeladen werden müssen. Frames können außerdem dazu benutzt werden, um sicherzustellen, dass eine Seite immer in einer festen Größe dargestellt wird, unabhängig von der Bildschirmauflösung des Benutzers Der Kacheleffekt Ein Hintergrundbild wird so lange in der Vertikalen und Horizontalen wiederholt, bis die gesamte Fläche des Browserfensters ausgefüllt ist. Dabei muss eine Hintergrunddatei nicht quadratisch sein, sondern kann jede beliebige Rechteckform annehmen. Um diesen Hintergrund zu erzeugen, muss eine Datei nicht in der gesamten Größe des Browserfensters erzeugt werden. Es reicht, wenn sie im Minimalfall einen Pixel hoch ist und dafür aber bis zu 1280 Pixel breit. Analog dazu kann ein horizontaler Streifen durch eine ein Pixel breite, aber entsprechend lange Datei angezeigt werden. Bei einer asymmetrischen Form kann der Hintergrund nicht durch den Kacheleffekt generiert werden, sonst wird die Datenmenge zu groß. 3.2 Typografie und Gestaltung Da das menschliche Auge die Seite zunächst als grafisches Muster wahrnimmt, erleichtert eine durchgängiges Layout die Bedienung. Zusammengewürfelte Schriftarten, zu viele Überschriften, zu viele Farben erschweren den Erkennungsprozess der Muster. Keine Headlines aus Versalien da leseunfreundlich. Schriften mit Serifen erst ab einer Größe von 12 Punkt. Grundsätzlich nicht mit nur einer Schriftart formatieren, da nicht jeder User die gleichen Fonts zur Verfügung hat. Kurze Zusammenfassung am Anfang der Seite, gibt besseren Überblick. Wichtige Fakten und Informationen aus Fließtext hervorheben. Wenige, dafür sinnvolle Buttons und Logos auf einer Seite. Seiten zum Scrollen sind beim Surfer nicht beliebt. Texte, deshalb möglichst kurz halten und auf mehrere Seiten verteilen, die sich ohne Scrollen lesen lassen. Längere Dokumente zum Download anbieten.

5 4. Allgemeines Flash-Animationen nur dann, wenn wirklich sinnvoll. Immer Alternativen zu Plug-ins anbieten, wenn nicht sichergestellt werden kann, dass jeder Browser die Seite darstellen kann. Musikuntermalung ist out wenn Sound, dann nicht automatisch beim Laden der Datei. Fotos und Grafiken komprimieren. JPEG für Fotos, GIF für Grafiken. Bildschirm kann nur 72 dpi darstellen. Hoch aufgelöste Scans mit 300 dpi oder mehr sind nicht sinnvoll. Bei einer Bildergalerie lieber kleine Vorschaugrafiken (Thumbnails) verwenden, die einen Link auf die Originale enthalten. Aufwendige Intros nerven nur Surfer geben einer Seite im Durchschnitt 8 Sekunden Zeit, bevor sie weiterklicken. Farben sparsam einsetzen, da Bildschirm selbstleuchtendes Medium ist. Farben erscheinen intensiver als auf dem Papier. Quellen: URL s: Literatur: K., Gerhard: Webdesign, must s and dont s, Fachakademie für Holzgestaltung, Juni 2001, Garmisch-Partenkirchen