web-design und multimedia im www

Web-Design und Multimedia Web-Design und Multimedia im wwwim www

Ein Vortrag im Rahmen des Ein Vortrag im Rahmen des Vertieferseminars in Kartographie Vertieferseminars in Kartographie

von Kathrin Haverkampvon Kathrin Haverkamp

GliederungGliederung

• Planung von WebseitenPlanung von Webseiten

- Aufbau von Webseiten

- Zielplanung

- Fehlerquellen

• Herstellung von WebseitenHerstellung von Webseiten

- Basis

- Grafik

- Multimedia

- Interaktion

• MachbarkeitsstudieMachbarkeitsstudieGliederung

Planung von WebseitenPlanung von Webseiten

• Aufbau der WebseiteAufbau der Webseite

- Wahl der Dateinamen

- Pfadangabe

- Wahl der URL

• Zielplanung und InformationsdesignZielplanung und Informationsdesign

- Informationsgehalt

- Website-Planung Überblick über Dimensionen des Projektes gewinnen Entwurf und Produktion Corporate Design

• FehlerquellenFehlerquellenPlanung von Webseiten

Aufbau der WebsiteAufbau der Website

• Wahl der DateinamenWahl 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 WebsiteAufbau der Website

• PfadangabePfadangabe

- 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 WebsiteAufbau der Website

• Wahl der URLWahl der URL

- Guter Domain-Name

- Wenig Unterverzeichnisse

- Keine GeMischTe Schreibweise

- URLs sollten knackbar sein

Beispiel: www.honk.de/privat/lebenslauf.html

www.honk.de/privat

Planung von Webseiten

ZielplanungZielplanung

• InformationsgehaltInformationsgehalt

- 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

ZielplanungZielplanung

• Website-PlanungWebsite-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

ZielplanungZielplanung

• Website-PlanungWebsite-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

ZielplanungZielplanung

• Website-PlanungWebsite-Planung

- Corporate Design Wahl der Farben Grafische Elemente Einheitliche Gestaltung der einzelnen Seiten Übersichtliche Navigation Ausführliches Testen der Site auf den

unterschiedlichsten Browsern

Planung von Webseiten

Schumi

ZielplanungZielplanung

• FehlerquellenFehlerquellen

- 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 Herstellung von WebseitenWebseiten

• BasisBasis- HTML mit Erweiterungen, wie z.B. CSS- XML

• GrafikGrafik- Grafikformate: Pixel- oder Vektorformate

• MultimediaMultimedia- Animation und Sound

• InteraktionInteraktion- Serverseitige Interaktionen- Clientseitige Interaktionen

Herstellung von Webseiten

HHyperyper T Textext M Markuparkup LLanguageanguage

• EntwicklungEntwicklung

- 70er: Standford Uni entwickelt LaTex

- 1986: ISO-Norm 8879 legt SGML als Standard fest

- 1990: Benners-Lee entwickelt HTML

- 1993: Andreeson entwickelt Browser (Mosaik) mit grafischer Benutzeroberfläche

- 1998: w3-Konsortium stellt neuen Standard HTML 4.0 vor

- 2000: w3-Konsortium formuliert neuen Standard XHTML 1

Herstellung von Webseiten

• HTML-BefehleHTML-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

HHyperyper T Textext M Markuparkup LLanguageanguage

<html><head>Seitentitel</head><body>Inhalt der Seite, wie z.B. <H1 algin=„center“>&Uumlberschrift</h1></body>

</html>

Herstellung von Webseiten

• VorteileVorteile

- einfacher Aufbau

- unkomplizierte Nutzung

- plattformunabhängig

- HTML-Seiten lassen sich mit einem Texteditor erstellen

- Hyperlinks

HHyperyper T Textext M Markuparkup LLanguageanguage

Herstellung von Webseiten

• NachteileNachteile

- Format und Inhalt sind nicht getrennt

- es ist statisch

- keine detaillierte Layoutsprache

eeXXtensibletensible M Markuparkup L Languageanguage

• EntwurfszieleEntwurfsziele

- 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

SGML

XML

HTML

DSSL

CSS

XSL

DTD

Teilmenge

DTD

Teilimplementierung

Herstellung von Webseiten

eeXXtensibletensible M Markuparkup L Languageanguage

• XML-BefehleXML-Befehle

- XML beinhaltet DTDs, die die logischen Elemente und Struktur von Objektklassen definieren

Ich kann eigene Tag´s definieren

- Interne und externe DTD´s

- Trennung von Basisdokument und Formatierung

Herstellung von Webseiten

eeXXtensibletensible M Markuparkup L Languageanguage

<?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)>

CCascadingascadingSStyletyleSSheetsheets

• VorteileVorteile

- Einfache Bestimmung des Formates

- Feste Verknüpfung von Informationen mit einem Tag

- Interne und externe CSS

- Einfache Änderung des Layouts

Herstellung von Webseiten

• NachteileNachteile

- Kompatibilität: Ältere Browser können CSS nicht interpretieren

GrafikGrafik

• PixelformatePixelformate

In HTML lassen sich nur folgende Pixelformate In HTML lassen sich nur folgende Pixelformate einbindeneinbinden

- GIF (Graphics Interchange Format)

- JPEG (Joint Photographic Experts Group)

- PNG (Portable Network Graphik)

Herstellung von Webseiten

GIF - FormatGIF - Format

• VorteileVorteile

- Zeichnet sich durch hohe Komprimierungsdichte aus

- LZW-Kompressionsverfahren komprimiert Bildinformationen verlustfrei

- GIF89a bietet als Besonderheit die Optionen Interlaced, Transparenz und Animation

• NachteilNachteil

- Kann max. 256 Farben speichern

- 1-Bit transparente Hintergründe

Herstellung von Webseiten

JPEG - FormatJPEG - Format

• VorteileVorteile

- Wichtigstes Format bei der Darstellung von Fotos

- Farbinformationen bleiben erhalten

• NachteilNachteil

- Komprimierung ist verlustbehaftet

• Zukünftig JPEG 2000Zukünftig JPEG 2000

- Höhere Komprimierungsrate mit besserer Bildqualität

- Verzicht auf verlustbehafteter Komprimierung

- Kann transparente Farben darstellen

Herstellung von Webseiten

PNG - FormatPNG - Format

• VorteileVorteile

- 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

• NachteilNachteil

- Ältere Browser, sowie einige Grafikprogramme können dieses Format nicht lesen

Herstellung von Webseiten

VektorgrafikformateVektorgrafikformate

• AllgemeinAllgemein

- Durch Plug-In´s Darstellung möglich

- w3-Konsortium empfiehlt SVG (Scalable Vektor Graphics),

Herstellung von Webseiten

• VorteileVorteile

- spart Speicherplatz

- Bildbeschreibung kann auch durch 3-D Objekte erfolgen

3-D Welten entstehen

- frei wählbare Skalierbarkeit des Bildes

• NachteileNachteile

- Details nur mit viel Aufwand

SVG

MultimediaMultimedia

• AnimationenAnimationen

- Animated GIF´s

- Macromedia Director

- Macromedia Flash

- VRML

• SoundformateSoundformate

- Wavetables

- MP3

- MIDI

Herstellung von Webseiten

Animated GIF´sAnimated GIF´s

• AllgemeinAllgemein

- Einzelbilder, Informationsblöcke werden in Datei gespeichert

- Fester Algorithmus zeigt Einzelbilder nacheinander an

- Wird wie statisches Bild in HTML eingebunden

Herstellung von Webseiten

• VorteilVorteil

- 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

Macromedia DirectorMacromedia Director

• AllgemeinAllgemein

- 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 FlashMacromedia Flash

• AllgemeinAllgemein

- 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

Herstellung von Webseiten

Ivanb

InteraktionenInteraktionen

• Clientseitige InteraktionClientseitige Interaktion

- Java-Applets

- JavaScript, Jscript

• Serverseitige InteraktionenServerseitige Interaktionen

- CGI

- Perl

- PHP

- AktiveX

- ASP

Herstellung von Webseiten

JavaScript, JScriptJavaScript, JScript

• AllgemeinAllgemein- 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

Herstellung von Webseiten

• VorteilVorteil- JavaScript ist relativ einfach- Keine weitere Software nötig

• NachteilNachteil- Ältere Browser können es nicht interpretieren- Keine Sicherheitsrelevante Funktionen

CCommonommon G Gatewayateway I Interfacenterface

• AllgemeinAllgemein

- 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

• VorteilVorteil

- Flexibilität

- SicherheitsabfragenHerstellung von Webseiten

MachbarkeitsstudieMachbarkeitsstudie

Alles ist MöglichAlles ist Möglich

Voraussetzung:Voraussetzung:

- Inhalt der Seite festlegen Informationsgehalt Gestaltung Navigation

- Tools bereitstellen HTML-Editoren Grafik und Multimedia -Tools

- Einsatz der Teilnehmer

Machbarkeitsstudie

Bonn