1 / 32

Web-Design und Multimedia im www

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.

jarvis
Download Presentation

Web-Design und Multimedia im www

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. Hyper Text Markup Language • <html> • <head> • Seitentitel • </head> • <body> • Inhalt der Seite, wie z.B. • <H1 algin=„center“>&Uumlberschrift</h1> • </body> • </html> • 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 Herstellung von Webseiten

  15. 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

  16. 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

  17. eXtensible Markup Language SGML Teilimplementierung DSSL Teilmenge DTD XSL XML DTD CSS HTML Herstellung von Webseiten

  18. eXtensible Markup Language <?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)> • 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 Herstellung von Webseiten

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. Vektorgrafikformate • Allgemein • Durch Plug-In´s Darstellung möglich • w3-Konsortium empfiehlt SVG (Scalable Vektor Graphics), SVG • 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

  25. Multimedia • Animationen • Animated GIF´s • Macromedia Director • Macromedia Flash • VRML • Soundformate • Wavetables • MP3 • MIDI Herstellung von Webseiten

  26. 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

  27. 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

  28. 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

  29. Interaktionen • Clientseitige Interaktion • Java-Applets • JavaScript, Jscript • Serverseitige Interaktionen • CGI • Perl • PHP • AktiveX • ASP Herstellung von Webseiten

  30. 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

  31. 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

  32. 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

More Related