Post on 24-Jan-2016
description
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“>Überschrift</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