Web-Design und Mutimedia im www
Werbung
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 - • Grafik - • Grafikformate: Pixel- oder Vektorformate Multimedia - • HTML mit Erweiterungen, wie z.B. CSS XML 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 <html> <head> Seitentitel </head> <body> Inhalt der Seite, wie z.B. <H1 algin=„center“>&Uumlberschrift</h1> </body> </html> 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 DSSL Teilmenge DTD XSL XML DTD Teilimplementierung 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 <?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)> 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 MultimediaPrä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 - • Vorteil - • 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 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 - Tools bereitstellen - Informationsgehalt Gestaltung Navigation HTML-Editoren Grafik und Multimedia -Tools Einsatz der Teilnehmer Bonn Machbarkeitsstudie
