Web-Design und Mutimedia im www

 Documents

 147 views
of 32
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
Web-Design und Multimedia im www Ein Vortrag im Rahmen des Vertieferseminars in Kartographie von Kathrin Haverkamp Gliederung ã Planung von Webseiten - Aufbau…
Share
Transcript
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 GeMischTe 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 - 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 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 Seitentitel Inhalt der Seite, wie z.B.

Überschrift

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 eXtensible 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 eXtensible Markup Language SGML Teilimplementierung Teilmenge DSSL DTD XML XSL DTD CSS HTML Herstellung von Webseiten eXtensible Markup Language • XML-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 ] > Hallo XML Hallo XML Inhalt von ertern.dtd: Herstellung von Webseiten CascadingStyleSheets • 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 - GIF89a 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 - w3-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 - MP3 - 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 - JavaScript, Jscript • Serverseitige Interaktionen - CGI - Perl - PHP - AktiveX - ASP Herstellung von Webseiten JavaScript, 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 - JavaScript 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  Informationsgehalt  Gestaltung  Navigation - Tools bereitstellen  HTML-Editoren  Grafik und Multimedia -Tools - Einsatz der Teilnehmer Bonn Machbarkeitsstudie
Related Search
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks