Web-Design und Multimedia im www Ein Vortrag im

Web-Design und Multimedia im www Ein Vortrag im Rahmen des Vertieferseminars in Kartographie von Kathrin Haverkamp

Gliederung • Planung von Webseiten - Aufbau von Webseiten - Zielplanung - Fehlerquellen • Herstellung von Webseiten - Basis - Grafik - Multimedia - Interaktion • Machbarkeitsstudie Gliederung

Planung von Webseiten • Aufbau der Webseite - Wahl der Dateinamen - Pfadangabe - Wahl der URL • Zielplanung und Informationsdesign - Informationsgehalt - Website-Planung § § § Überblick über Dimensionen des Projektes gewinnen Entwurf und Produktion Corporate Design • Fehlerquellen Planung von Webseiten

Aufbau der Website • Wahl der Dateinamen - HTML- gerechter Dateiname - Vermeidung von Sonderzeichen und Symbole - keine Leerzeichen - Dateinamen bestehen aus Namen, einem Punkt und Suffix - Möglichst kurze Dateinamen - Groß- und Kleinschreibung beachten Planung von Webseiten

Aufbau der Website • Pfadangabe - Absolute Pfadangabe § - Komplette Angabe aller Verzeichnisse zu einer bestimmten Datei, ausgehend vom Startverzeichnis Relative Pfadangabe § Vom aktuellen Speicherort werden nur die notwendigen Schritte zurückgelegt, um zum Ziel zu kommen Planung von Webseiten

Aufbau der Website • Wahl der URL - Guter Domain-Name - Wenig Unterverzeichnisse - Keine Ge. Misch. Te Schreibweise - URLs sollten knackbar sein Beispiel: www. honk. de/privat/lebenslauf. html www. honk. de/privat Planung von Webseiten

Zielplanung • Informationsgehalt - Wichtigste gehört an zentrale Stelle - Ladezeiten so gering wie möglich halten - Links sollten nicht auf Seiten verweisen, die nicht weiterführen oder eine Fehlermeldung haben - Einfache Navigation KDS Planung von Webseiten

Zielplanung • Website-Planung - Überblick über die Dimensionen des Projektes gewinnen § § § § Warum soll ein Webauftritt erstellt werden? Was soll präsentiert werden? Welche Inhalte sollen konkret dargestellt werden? Wie sieht die Zielgruppe aus? Welchen Umfang soll die Site haben? Gibt es Gestaltungsrichtlinien? usw. Planung von Webseiten

Zielplanung • Website-Planung - Entwurf und Produktion § § § Stimmiges Konzept entwickeln Navigatiosnmodell entwickeln Strukturierung der Seiten Formatierung der Inhalte Beschaffung des Materials, wie z. B. Fotos und Texte Programmierung einer Datenbankanbindung Planung von Webseiten

Zielplanung • Website-Planung - Corporate Design § § § Wahl der Farben Grafische Elemente Einheitliche Gestaltung der einzelnen Seiten Übersichtliche Navigation Ausführliches Testen der Site auf den unterschiedlichsten Browsern Schumi Planung von Webseiten

Zielplanung • Fehlerquellen - Vermeidung von extrem langen Seiten - Vermeidung von horizontalem Scrollen - Verwendung von geeigneten Schriftarten - Kontaktmöglichkeiten - Möglichkeit Multimediale-Effekte zu überspringen - Aktualisierung der Site Dynasoft Planung von Webseiten

Herstellung von Webseiten • Basis - HTML mit Erweiterungen, wie z. B. CSS XML • Grafik - Grafikformate: Pixel- oder Vektorformate • Multimedia - Animation und Sound • Interaktion - Serverseitige Interaktionen Clientseitige Interaktionen Herstellung von Webseiten

Hyper Text Markup Language • Entwicklung - 70 er: Standford Uni entwickelt La. Tex - 1986: ISO-Norm 8879 legt SGML als Standard fest - 1990: Benners-Lee entwickelt HTML - 1993: Andreeson entwickelt Browser (Mosaik) mit grafischer Benutzeroberfläche - 1998: w 3 -Konsortium stellt neuen Standard HTML 4. 0 vor - 2000: w 3 -Konsortium formuliert neuen Standard XHTML 1 Herstellung von Webseiten

Hyper Text Markup Language • HTML-Befehle - Einleitenden und abschließenden Tag - Groß- und Kleinschreibung wird nicht unterschieden - Tags können Attribute zugewiesen werden - Umlaute müssen speziell kodiert werden - Tags können ineinander verschachtelt werden <html> <head> Seitentitel </head> <body> Inhalt der Seite, wie z. B. <H 1 algin=„center“>&Uumlberschrift</h 1> </body> </html> Herstellung von Webseiten

Hyper Text Markup Language • Vorteile - einfacher Aufbau - unkomplizierte Nutzung - plattformunabhängig - HTML-Seiten lassen sich mit einem Texteditor erstellen - Hyperlinks • Nachteile - Format und Inhalt sind nicht getrennt - es ist statisch - keine detaillierte Layoutsprache Herstellung von Webseiten

e. Xtensible Markup Language • Entwurfsziele - Im Internet auf einfache Weise zu nutzen - Breites Spektrum von Anwendungen unterstützen - SGML kompatibel - Einfache Programme, die XML-Dokumente verarbeiten - Lesbar und angemessen verständlich - Formaler und präziser Entwurf Herstellung von Webseiten

e. Xtensible Markup Language SGML DSSL Teilmenge DTD XSL XML DTD Teilimplementierung CSS HTML Herstellung von Webseiten

e. Xtensible Markup Language • XML-Befehle - XML beinhaltet DTDs, die logischen Elemente und Struktur von Objektklassen definieren Ich kann eigene Tag´s definieren - Interne und externe DTD´s - Trennung von Basisdokument und Formatierung <? xml version=„ 1. 0“? > <!DOCTYP buch [<!ELEMENT WORT (#PCDATA)>] > <WORT> Hallo XML </WORT> <? xml version=„ 1. 0“? > <!DOCTYP buch SYSTEM „extern. dtd“> <WORT> Hallo XML </WORT> Inhalt von ertern. dtd: <! ELEMENT WORT (#PCDATA)> Herstellung von Webseiten

Cascading. Style. Sheets • Vorteile - Einfache Bestimmung des Formates - Feste Verknüpfung von Informationen mit einem Tag - Interne und externe CSS - Einfache Änderung des Layouts • Nachteile - Kompatibilität: Ältere Browser können CSS nicht interpretieren Herstellung von Webseiten

Grafik • Pixelformate In HTML lassen sich nur folgende Pixelformate einbinden - GIF (Graphics Interchange Format) - JPEG (Joint Photographic Experts Group) - PNG (Portable Network Graphik) Herstellung von Webseiten

GIF - Format • Vorteile - Zeichnet sich durch hohe Komprimierungsdichte aus - LZW-Kompressionsverfahren komprimiert Bildinformationen verlustfrei - GIF 89 a bietet als Besonderheit die Optionen Interlaced, Transparenz und Animation • Nachteil - Kann max. 256 Farben speichern - 1 -Bit transparente Hintergründe Herstellung von Webseiten

JPEG - Format • Vorteile - Wichtigstes Format bei der Darstellung von Fotos - Farbinformationen bleiben erhalten • Nachteil - Komprimierung ist verlustbehaftet • Zukünftig JPEG 2000 - Höhere Komprimierungsrate mit besserer Bildqualität - Verzicht auf verlustbehafteter Komprimierung - Kann transparente Farben darstellen Herstellung von Webseiten

PNG - Format • Vorteile - Vereint Vorteile von GIF und JPEG - Ermöglicht Helligkeitskorrekturen Bild wirkt auf allen Systemen gleich hell - Komprimierung ist verlustfrei - Unterstützt 8 -Bit-transparente Hintergründe weiche Übergänge, sowie Schatteneffekt sind möglich • Nachteil - Ältere Browser, sowie einige Grafikprogramme können dieses Format nicht lesen Herstellung von Webseiten

Vektorgrafikformate • Allgemein SVG - Durch Plug-In´s Darstellung möglich - w 3 -Konsortium empfiehlt SVG (Scalable Vektor Graphics), • Vorteile - spart Speicherplatz - Bildbeschreibung kann auch durch 3 -D Objekte erfolgen 3 -D Welten entstehen - frei wählbare Skalierbarkeit des Bildes • Nachteile - Details nur mit viel Aufwand Herstellung von Webseiten

Multimedia • Animationen - Animated GIF´s - Macromedia Director - Macromedia Flash - VRML • Soundformate - Wavetables - MP 3 - MIDI Herstellung von Webseiten

Animated GIF´s • Allgemein - Einzelbilder, Informationsblöcke werden in Datei gespeichert - Fester Algorithmus zeigt Einzelbilder nacheinander an - Wird wie statisches Bild in HTML eingebunden • Vorteil - Lassen sich universell in jedem Browser darstellen - Nehmen relativ wenig Speicherplatz in Anspruch - Haben Optionen Interlaced und Transparenz - Lassen sich einfach erstellen - Können als Link zu einer anderen Webseite führen Herstellung von Webseiten

Macromedia Director • Allgemein - Entwicklungsumgebung für interaktive Multimedia. Präsentationen - Bilder, aus denen Film erzeugt wird, müssen vorher mit Grafikprogramm erzeugt werden - Interaktivität wird durch Skriptsprache Lingo erzeugt - Fertiger Film als Shockwave exportieren - Shockwave kann als Datei in Webseite integriert werden - Aufwand und Speicherplatz zu hoch, um komplette Webseiten damit zu realisieren Herstellung von Webseiten

Macromedia Flash • Allgemein - Vektor- und Bitmap-Grafiken, kompakte Animationen, Navigationsstrukturen, technische Illustrationen und effektvolle Webcartoons unter einer Oberfläche - Bild-, Text-, und Soundelemente werden in einer Datei gespeichert - Flash-Animationen können mit einem Plug-In angezeigt werden - Importieren unterschiedlicher Pixelformate, sowie von Vektorgrafiken möglich Ivanb Herstellung von Webseiten

Interaktionen • Clientseitige Interaktion - Java-Applets - Java. Script, Jscript • Serverseitige Interaktionen - CGI - Perl - PHP - Aktive. X - ASP Herstellung von Webseiten

Java. Script, JScript • Allgemein - Optimierung von Web-Sites Resourcen des Rechners des Client zu nutzen Sprachinterpreter von Netscape und Microsoft hält sich an den Standard ECMA-262 Interne und Externe Java-Script-Programme • Vorteil - Java. Script ist relativ einfach Keine weitere Software nötig • Nachteil - Ältere Browser können es nicht interpretieren Keine Sicherheitsrelevante Funktionen Herstellung von Webseiten

Common Gateway Interface • Allgemein - Schnittstelle, die dem Browser erlaubt über den Server Programme auszuführen - Server beinhaltet nicht nur Web-Site, auch CGI-Programm - CGI kann Daten vom Server auslesen und verarbeiten - Programm, das Daten entgegennimmt, verarbeitet, Webseite erstellt und diese an Browser schickt • Vorteil - Flexibilität - Sicherheitsabfragen Herstellung von Webseiten

Machbarkeitsstudie Alles ist Möglich Voraussetzung: - Inhalt der Seite festlegen § § § - Tools bereitstellen § § - Informationsgehalt Gestaltung Navigation HTML-Editoren Grafik und Multimedia -Tools Einsatz der Teilnehmer Bonn Machbarkeitsstudie