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

Web-Design und Multimedia im www

  • Upload
    jarvis

  • View
    26

  • Download
    0

Embed Size (px)

DESCRIPTION

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. - PowerPoint PPT Presentation

Citation preview

Page 1: 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

Page 2: Web-Design und Multimedia im www

GliederungGliederung

• Planung von WebseitenPlanung von Webseiten

- Aufbau von Webseiten

- Zielplanung

- Fehlerquellen

• Herstellung von WebseitenHerstellung von Webseiten

- Basis

- Grafik

- Multimedia

- Interaktion

• MachbarkeitsstudieMachbarkeitsstudieGliederung

Page 3: Web-Design und Multimedia im www

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

Page 4: Web-Design und Multimedia im www

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

Page 5: Web-Design und Multimedia im www

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

Page 6: Web-Design und Multimedia im www

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

Page 7: Web-Design und Multimedia im www

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

Page 8: Web-Design und Multimedia im www

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

Page 9: Web-Design und Multimedia im www

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

Page 10: Web-Design und Multimedia im www

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

Page 11: Web-Design und Multimedia im www

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

Page 12: Web-Design und Multimedia im www

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

Page 13: Web-Design und Multimedia im www

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

Page 14: Web-Design und Multimedia im www

• 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

Page 15: Web-Design und Multimedia im www

• 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

Page 16: Web-Design und Multimedia im www

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

Page 17: Web-Design und Multimedia im www

SGML

XML

HTML

DSSL

CSS

XSL

DTD

Teilmenge

DTD

Teilimplementierung

Herstellung von Webseiten

eeXXtensibletensible M Markuparkup L Languageanguage

Page 18: Web-Design und Multimedia im www

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

Page 19: Web-Design und Multimedia im www

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

Page 20: Web-Design und Multimedia im www

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

Page 21: Web-Design und Multimedia im www

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

Page 22: Web-Design und Multimedia im www

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

Page 23: Web-Design und Multimedia im www

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

Page 24: Web-Design und Multimedia im www

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

Page 25: Web-Design und Multimedia im www

MultimediaMultimedia

• AnimationenAnimationen

- Animated GIF´s

- Macromedia Director

- Macromedia Flash

- VRML

• SoundformateSoundformate

- Wavetables

- MP3

- MIDI

Herstellung von Webseiten

Page 26: Web-Design und Multimedia im www

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

Page 27: Web-Design und Multimedia im www

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

Page 28: Web-Design und Multimedia im www

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

Page 29: Web-Design und Multimedia im www

InteraktionenInteraktionen

• Clientseitige InteraktionClientseitige Interaktion

- Java-Applets

- JavaScript, Jscript

• Serverseitige InteraktionenServerseitige Interaktionen

- CGI

- Perl

- PHP

- AktiveX

- ASP

Herstellung von Webseiten

Page 30: Web-Design und Multimedia im www

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

Page 31: Web-Design und Multimedia im www

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

Page 32: Web-Design und Multimedia im www

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