Digitale Medien

Zum Verfassen von Kommentaren bitte anmelden.

Berufe:

Ajax - Asynchrone Datenübertragung

Ajax steht für Asynchronous JavaScript and XML und dient der asynchronen Datenübertragung zwischen Browser(Clinet) und dem Server. Ajax spielt eine sehr wichtige Rolle im www. So können seiten wie Google zum Beispiel während der Eingabe, Sucheregebnisse anzeigen.

Durch Ajax können Daten ausgetauscht werden ohne die komplette Seite neu laden zu müssen. Dabei sendet JavaScript eine Anfrage an den Server. Diese Anfrage muss nicht zwingend Inhalt haben.

Auf dem Server kann durch eine serverseitige Programmiersprache wie PHP die Anfrage verarbeitet werden. Diese sendet dann eine Antwort als Request.

Ein Beispiel in JavaScript:


    'use strict';
    ladeContent();
    function ladeContent() {
        let xhr = new XMLHttpRequest();
        let myForm = new FormData();
        xhr.open('POST', 'zusatzinhalt.php');
        xhr.addEventListener('readystatechange', () => {
            if(xhr.status === 200 && xhr.readystate === 4) {
                let elem = document.createElement('p');
                elem.textContent = xhr.responseText;
                document.body.appendChild(elem);
            }
        });
    }

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Ajax

Bewertung:

Bisher keine Bewertung

Arten von Websites

Websites lassen sich nach ihrer Verwendung durch User bzw. durch die Zielsetzung des Betreibes kategorisieren

Werben/Präsentieren
Verkaufen
Informieren
Lerninhalte vermitteln
Spielmöglichkeiten
Gewinnmöglichkeiten
Unterhaltung
geschäftliche oder private Inhalte präsentieren
Soziale Netzwerke

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Audiodaten-Berechnung

AUDIODATEN-BERECHNUNG

Datenmenge [Byte] = Auflösung [bit] * Abtastfrequenz [Hz] * Anzahl Kanäle * Aufnahmezeit [s]

Datenstrom [bit] = Auflösung [bit] * Abtastfrequenz [Hz] * Anzahl der Kanäle

Abtastfrequenz (Sample rate)

Die Abtastrate ist die Anzahl der Samples, die pro Sekunde von einem Audiosignal abgetastet werden. Die Abtastrate bestimmt den Frequenzbereich einer Audiodatei. Je höher die Abtastrate ist, desto ähnlicher ist die digitale Wellenform der analogen Quellwellenform. Niedrige Abtastraten begrenzen den Bereich der Frequenzen, die aufgezeichnet werden können. Dies kann zu einer Aufnahme führen, die den ursprünglichen Klang nur sehr schlecht wiedergibt.

Zur Reproduktion einer bestimmten Frequenz muss die Abtastrate mindestens doppelt so hoch sein wie die Frequenz (Nyquist-Frequenz). CDs verfügen beispielsweise über eine Abtastrate von 44.100 Samples pro Sekunde, sodass sie Frequenzen von bis zu 22.050 Hz reproduzieren können; das menschliche Ohr kann jedoch nur Frequenzen bis zu 20.000 Hz wahrnehmen.

Wenn man die Datenmenge in Byte ausrechnen möchte, dann muss man das Ergebnis aus der Formel noch durch 8 teilen. 8 Bit sind 1 Byte.

Will man dann aus Byte Kilobyte machen (binär), dann heißt es: geteilt durch 1024 (1024 Byte = 1 kiByte), um Megabyte (binär) zu erhalten, noch einmal durch 1024 (1024 kiByte = 1 MiByte)

Abtastrate	Qualitätspegel	Frequenzbereich
96 kHz	High-End-DVD	0 – 48 kHz
48 kHz	Standard-DVD	0 – 24 kHz
44,1 kHz	Audio-CD	0 – 22,05 kHz
32 kHz	Standardrate für Rundfunk	0 – 16 kHz
22,05 kHz	Multimediaanwendungen, annähernd UKW-Qualität	0 – 5,512 Hz
11,025 kHz	Schlechte Mittelwellenqualität	0 – 5.512 Hz

Auflösung (Sample size)

24 bit	16,7 Mio (DVD-Qualität)
16 bit	65536 Stufen (CD-Qualität)
8 bit	256 Stufen (Multimedia, Monosound)

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Barrierefreiheit

Definition
Barrierefreies Internet bezeichnet Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können. (Wikipedia)

Muss eine Webseite barrierefrei sein?
In Deutschland müssen nur die Inter- und Intranetangebote der Bundesverwaltung barrierfrei sein.
Natürlich empfiehlt es sich auch für kommerzielle und private Webseiten, auf Barrierefreiheit zu setzen, doch dies ist dem Betreiber freigestellt.

Wer entscheidet, ob eine Webseite barrierefrei ist?
In Deutschland ist hierfür die Barrierefreie Informationstechnik-Verordnung (BITV) geschaffen worden. Sie definiert, was barrierefrei ist und leitet sich aus den Web Content Accessibility Guidelines des W3C ab.

Die 4 Grundvoraussetzungen für Barrierefreiheit nach den Web Content Accessibility Guidelines 1.0:

Wahrnehmbarkeit
Heißt: Alle Inhalte müssen auf verständliche Weise für alle Menschen seh- und hörbar sein.
Benutzbarkeit
Heißt: Alle Inhalte müssen für alle Menschen leicht zugänglich und auffindbar sein.
Verständlichkeit
Heißt: Die Webseite als Ganzes muss für alle Menschen einen selbsterklärenden Aufbau haben und Inhalte verständlich präsentieren.
Robustheit
Heißt: Die Webseite darf nicht auf die Kompatibilität mit irgendeiner Soft- oder Hardware angewiesen sein.

Wie lauten die Bestimmungen für barrierefreie Webseiten in Deutschland?
(siehe Kompendium der Mediengestaltung S.166)

1. Für Bilder, Sounds und Videos müssen Alternativen bereit gestellt werden (z.B. Alternativtexte für Grafiken, Untertitel bei Sound und Videos)
2. Texte, Bilder und Grafiken müssen auch ohne Farben erkennbar sein
3. Trennung von Inhalt und Layout: Stylesheets zur Gestaltung verwenden!
4. Abkürzungen und Akronyme vermeiden oder kenntlich machen
5. Tabellen nur zur Darstellung tabellarischer Daten verwenden
6. Browserunabhängigkeit; keine Applets oder Plugins; deaktiviertes JavaScript berücksichtigen
7. Zeitgesteuerte Ereignisse müssen durch Nutzer kontrollierbar sein, also auf automatische Akutalisierung, Weiterleitung etc. verzichten.
8. Zugriff auf Benutzerschnittstellen, z.B. zur Datenbankanbindung, muss behindertengerecht möglich sein.
9. Die Webseite muss unabhängig von Ein- und Ausgabegeräten funktionieren. Sie muss z.B. anstatt mit Maus auch allein mit der Tastatur navigierbar sein.
10. Die Webseite mit alter Software nutzbar sein, z.B. mit alten Browsern
11. Die zur Erstellung der Webseite verwendeten Technologien müssen referenziert werden.
12. Klare Seitenstruktur, Orientierungshilfen durch Sitemaps und Suchfunktion
13. Für das erleichterte Verständnis der Inhalte müssen geeignete Maßnahmen getroffen werden, z B. durch Verwendung einer klaren Sprache.

Weiterführende Links

http://www.barrierekompass.de/barrierefreiesinternet.php

http://www.barrierefreies-webdesign.de/wcag2/

http://www.w3.org/Translations/WCAG20-de/WCAG20-de-20091029/

http://www.barrierefreies-webdesign.de/

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 3.5 (2 Stimmen)

Burri, Peter (2010): Kriterien für die Erstellung von Websites für Menschen über 50 Jahre

Kriterien für die Erstellung von Websites für Menschen über 50 Jahre

Von Peter Burri, Beuth Hochschule für Technik Berlin

Gliederung

1. Einleitung
1.1 Kurzbeschreibung
1.2 Bedeutung des Themas für die Druck- und Medienbranche
2. Herausforderung: Veränderung im Aufbau der Altersstruktur
3. Herausfordeungen an das Webdesign
3.1 Vorüberlegungen
3.2 Mögliche Richtlinen für die Gestaltung
3.2.1 Farbgestaltung
3.2.2 Schriftarten
3.2.3 Navigationsmechanismen
3.2.4 Sound
3.2.5 Inhalt
3.2.6 Layout und Stil
3.2.7 Lernen
3.2.8 Anderes
4. Stand der Technik
5. Resümee
6. Quellen

Erstellung von Websites für Menschen über 50 Jahre

Innovationsfeld Medienproduktion, Bereich Webdesign

1. Einleitung

1.1 Kurzbeschreibung

Durch den demographischen Wandel steigt die Altersgruppe der über 50-jährigen im Verhältnis zur Gesamtbevölkerung in den nächsten Jahren deutlich an. Damit diese Generation die Möglichkeiten das Medium Internet bestmöglich nutzen kann, müssen neue Standards in Bezug auf die Usability von Websites eingeführt werden, da im Alter motorische wie auch psychische Eigenschaften nachlassen.

1.2 Bedeutung des Themas für die Druck- und Medienbranche

Die Usability von Webseiten spielt eine große Rolle, die mittlerweile von allen Seiten erkannt wurde. Usability beschreibt die Eigenschaft einer Webseite, die folgende Eigenschaften aufweist:

Schnell und einfach Informationen bereit zu stellen.
Eine effiziente und effektive Nutzbarkeit.
Gewisse Fehlertoleranz gegenüber dem Nutzer.
Unterstützung und Förderung des Nutzers, einfaches Erlernen.

Mit Hilfe von Usability können nicht nur Nutzer der Website, sondern auch der Betreiber profitieren. Die Nutzer können Nutzen aus der Usability ziehen, da sie durch das Betrachten der Seite nicht frustriert, sondern zufrieden sind. Sie werden die Interaktion mit der Seite mögen, da sie ihre Ziele auf der Seite effektiv und effizient erreichen können. Gleichzeitig wird ein Vertrauen aufgebaut. Die Betreiber profitieren von reduzierten Entwicklungskosten, Supportkosten (Hotline etc.), weniger Fehler der Nutzer sowie ein höherer Return On Investment (ROI).

Wird die Seite als nicht nutzerfreundlich empfunden, verlassen die Nutzer die Seite und es tritt kein Kontakt zum Beispiel mit einem Unternehmen ein. Dies erschwert den Kontakt mit potentiellen Kunden im bereits hart umkämpften Feld der Kundengewinnung und -Bindung.

Durch die immer stärkere Fokussierung auf das Medium Internet hat das Thema Usability von Websites eine immer größere Relevanz. Dabei spielt die Zielgruppe der über 50-jährigen eine wichtige Rolle, da sie eine immer größere Zahl der Internetnutzer ausmachen. Mittlerweile nutzen 44,9% der Menschen in der Altersgruppe 50+ das Internet. In der Gruppe der 50- bis 59-jährigen sind es sogar 64,2%.

2. Herausforderung: Veränderung im Aufbau der Altersstruktur

Die abnehmende Zahl der Geburten und das Altern der gegenwärtig stark besetzten mittleren Jahrgänge führen zu gravierenden Veränderungen in der Altersstruktur der Bevölkerung.
Die aktuelle Bevölkerungsstruktur weicht schon lange von der Form der klassischen Bevölkerungspyramide ab, bei der die stärksten Jahrgänge die Kinder stellen und sich die Besetzungszahlen der älteren Jahrgänge allmählich als Folge der Sterblichkeit verringern. Im Altersaufbau von 1950 haben die beiden Weltkriege und die Weltwirtschaftskrise Anfang der 1930er Jahre deutliche Kerben hinterlassen. Heute gleicht der Bevölkerungsaufbau Deutschlands eher einer „zerzausten Wettertanne“. Die mittleren Altersklassen sind besonders bevölkerungsstark, zu den älteren und den jüngeren gehören weniger Personen.

Bis zum Jahr 2060 werden die stark besetzten Jahrgänge weiter nach oben verschoben und dabei schließlich ausdünnen und von zahlenmäßig kleineren ersetzt. Damit gehen signifikante Verschiebungen in der Relation der einzelnen Altersgruppen einher.
Heute besteht die Bevölkerung zu 19% aus Kindern und jungen Menschen unter 20 Jahren, zu 61% aus 20- bis unter 65-Jährigen und zu 20% aus 65-Jährigen und Älteren. Im Jahr 2060 wird – nach der Variante Untergrenze der „mittleren“ Bevölkerung – bereits jeder Dritte (34%) mindestens 65 Lebensjahre durchlebt haben und es werden doppelt so viele 70-Jährige leben, wie Kinder geboren werden. Die Alterung schlägt sich besonders gravierend in den Zahlen der Hochbetagten nieder. Im Jahr 2008 lebten etwa 4 Millionen 80-Jährige und Ältere in Deutschland, dies entsprach 5% der Bevölkerung. Ihre Zahl wird kontinuierlich steigen und mit über 10 Millionen im Jahr 2050 den bis dahin höchsten Wert erreichen. Zwischen 2050 und 2060 sinkt dann die Zahl der Hochbetagten auf 9 Millionen. Es ist also damit zu rechnen, dass in fünfzig Jahren 14% der Bevölkerung – das ist jeder Siebente – 80 Jahre oder älter sein wird.

Spürbare Veränderungen in der Altersstruktur stehen Deutschland bereits im kommenden Jahrzehnt bevor. Insbesondere werden die Altersgruppen der 50- bis 65-Jährigen (+24%) und der 80-Jährigen und Älteren (+48%) bis zum Jahr 2020 wachsen. Die Zahl der unter 50-Jährigen wird dagegen abnehmen (–16%). Allein die Bevölkerung im mittleren Alter von 30 bis unter 50 Jahren wird um circa 4 Millionen (–18%) schrumpfen (Untergrenze der „mittleren“ Bevölkerung).

Das mittlere (mediane) Alter der Bevölkerung steigt infolge dieser Veränderungen schnell an. Heute stehen die 43-Jährigen genau in der Mitte der Altersverteilung der Gesellschaft. Bis Mitte der 2040er Jahre wird das mittlere Alter um 9 Jahre steigen, sodass zwischen 2045 und 2060 etwa die Hälfte der Einwohner älter als 52 Jahre sein wird (Untergrenze der „mittleren“ Bevölkerung).

Bevölkreungspyramide

Abb. Bevölkerungspyramide. Quelle: Statistisches Bundesamt, Bevölkerung Deutschlands bis 2060 - 12. Koordinierte Bevölkerungsvorausberechnung.

3. Herausfordeungen an das Webdesign

3.1 Vorüberlegungen

Generell lässt sich sagen, dass es zwei Hauptschwierigkeiten für ältere Menschen (Menschen ab 50 Jahren) gibt: Ein Großteil der älteren Menschen hat den Großteil seines Lebens ohne Computertechnologie zugebracht. Das bedeutet, dass sie keine oder nur beschränkte Erfahrungen mit dieser Technologie haben.
Der zweite Punkt ist, dass diese technischen Schwierigkeiten in Verbindung mit physischen, mentalen und kognitiven Beeinträchtigungen auftreten. Obwohl das Auftreten dieser Beeinträchtigungen sehr stark zwischen den einzelnen Personen variieren, so gibt es Erkenntnisse, dass die Fähigkeit zu hören, zu sehen, motorische Fähigkeiten, Konzentrationsspanne und die Erinnerungskraft im Alter abnehmen. Ältere Menschen zeigen Einschränkungen in ihrem Sehfeld, Lichtempfindlichkeit, Farbempfinden, bewegliche und statische Sehschärfe, Abnahme der Kontrastempfindlichkeit, Abnahme der Mustererkennung. Die Fähigkeit des Hörens, speziell hohe Töne, nimmt im Alter ab. Ebenso die Reaktionsgeschwindigkeit bei komplexeren motorischen Aufgaben. Das Filtern von relevanten Informationen aus einer Ansammlung von ablenkenden Informationen fällt schwerer. Ältere Menschen sprechen langsamer mit mehr Schwierigkeiten in der Wortfindung. Die Verständnisfähigkeit geht ebenso zurück.
Während das Kurzzeitgedächtnis nicht schlechter wird, so werden die räumliche Erinnerung und das Arbeitsgedächtnis durch das Älterwerden vermindert.

Das Ziel eines verbesserten Interface Design soll die oben stehenden Hindernisse minimieren, besonders wenn es um die räumliche Erinnerung, das Arbeitsgedächtnis, die Sehfähigkeiten sowie um die motorischen Fähigkeiten geht.

3.2 Mögliche Richtlinen für die Gestaltung

Es gibt viele Punkte in der Gestaltung von Websites, die verändert oder angepasst werden können, um älteren Menschen die Möglichkeiten des Internet zu öffnen. Einige von ihnen sind unten stehend aufgelistet.

3.2.1 Farbgestaltung

Keine Verwendung von Komplementärfarben, denn diese führen zu einem störenden Flimmereffekt
Farbvermeidung. Bestimmte Farben vermeiden (besonders sehr hell, leuchtend oder dynamisch). Diese hinterlassen Schattenbilder und strengen die Augen an. Blau-grüne Farben sollten ebenso vermieden werden.
Kontrast. Den Kontrast erhöhen zwischen Vorder- und Hintergrundfarben, am besten schwarze Typo auf hellem Grund verwenden.
Nicht nur auf Farbe konzentrieren. Die Webseite soll auch alle Informationen ohne Farben (s/w, Grautöne) darstellen können. Zum Testen kann eine kleine Monitorauflösung mit 16 Bit Farbtiefe hilfreich sein.

3.2.2 Schriftarten

Schriftgröße. Die Schrift sollte mindestens 12pt groß sein, besser noch 14 Punkt. Überschriften und Titel sollten üblicherweise 2 Punkt größer sein. Damit wird eine gute Lesbarkeit gewährleistet. Aber Größenangabe nicht als pt oder px, sondern em bzw. ex – relative Größenangaben – verwenden.
Dekorative sowie sehr enge Schriftarten vermeiden. Ebenso sollten so wenig Schriften wie möglich verwendet werden.
Verwenden von Basic-Schriften (Systemschriften). Damit wird gewährleistet, dass der Nutzer die Webseite genauso sieht, wie sie erstellt wurde.
Verwendung von relativen Schriftgrößen. Die Nutzer sollen die Möglichkeit erhalten, sich die Schriftgrößen nach belieben anzupassen.
Schriftarten. Serif Schriftarten sind generell besser lesbar und sollten verwendet werden. Bei kleinen Schriftgrößen auf dem Monitor können diese Schriften jedoch unleserlich werden.
Schriftstärke. Bold Schnitte sollten nur zur Auszeichnung in Texten verwendet werden. Obwohl sie fetter sind, sind sie schlechter lesbar.
Das Verwenden von Versalsatz unterlassen. Aufgrund ihrer Gleichmäßigkeit sind die Zeichen schlechter lesbar. In Überschriften sollte jedes Wort groß geschrieben werden um die Lesbarkeit zu erhöhen.

3.2.3 Navigationsmechanismen

Eine tiefe Hierarchie sollte vermieden werden. Der Grund liegt in dem Rückgang des Erinnerungsvermögens. Ältere Menschen können sich schneller in Navigationsstrukturen verirren.
Klares und konsistentes Navigationskonzept entwickeln. Navaigationsleisten, Sitemap, Information zur Navigation unterstützen die Orientierung der User auf der Seite und sie finden schneller die gewünschten Informationen.
Anbieten von Information über den generellen Aufbau der Seite. Eine Sitemap oder ein Inhaltsverzeichnis an einer festgelegten Position kann den Seitenaufbau beschreiben. Auch eine Markierung im Inhaltsverzeichnis, wo sich der Nutzer gerade befindet, ist sehr hilfreich.
Links unterstreichen. Als Standart hat es sich etabliert, dass die Links auf Webseiten mit einem Unterstrich gekennzeichnet sind. Links ohne Unterstreichung sind schwer zu erkennen, unterstrichener Text ohne Linkfunktion kann frustrierend sein. Links sollten so immer unterstrichen sein, auch da sie von "Screen Readers" (Screen Reader = Software Programm, das Menschen mit Sehschwäche Texte auf der Webseite vorliest) als Links erkannt werden. Im Gegenzug dazu sollten keine Texte unterstrichen werden, die keine Links sind.

3.2.4 Sound

Verwendung von tieffrequenten Tönen. Die Fähigkeit des Hörens von hohen Tönen nimmt im Alter ab. Klänge mit einer Frequenz um 500-1000 Herz haben sich als effektiv erwiesen. Aufgenommene Stimmen sollten ebenfalls eine tiefere Stimmlage besitzen.

3.2.5 Inhalt

Anbieten von textlicher Alternative zu akustischem und visuellem Inhalt. Für jedes Nicht-Text Element (Bild, Grafik, Videos, Animationen, Karten, ASCII etc.) sollte ein Text Äquivalent erstellt werden. (Dies kann durch ein "Alt"-Tag in HTML realisiert werden). Der Vorteil von Äquivalenztext besteht in erster Linie darin, dass dieser nach den jeweiligen Anforderungen der Menschen angepasst und durch diverse Technologien an die Bedürfnisse der Menschen angepasst werden kann (Z.B. Ausgabe des Text als Sprache etc.).
Anbieten von Alternativen zu Text. Manchmal ist es ebenfalls sinnvoll zu dem Text auch andere Alternativen anzubieten. Bilder, Videos, Audiofiles können Nutzer unterstützen, die Schwierigkeiten beim Lesen haben.
Irrelevante Bildschirminformationen vermeiden. Nur das Notwendigste an Informationen sollte angezeigt werden, damit keine Ablenkung stattfindet und die Nutzer sich leichter zurecht finden. Wichtige Informationen sollten hervorgehoben werden. Nur einfache relevante Grafiken sollten Verwendung finden.

3.2.6 Layout und Stil

Verwendung von viel Weißraum und kurzen Textblöcken. Dies erhöht die Lesbarkeit. Die Seiten wirken klarer und übersichtlicher. Text sollte in kurzen Absätzen gegliedert werden. Auf der anderen Seite sollten die Seiten nicht zu lang werden, da sonst zuviel scrollen nötig ist. Hier könnten interne Links (Anker) eingefügt werden, so dass die Nutzer in langen Abschnitten per einfachem Klick vor und zurück springen können. Ein Abstand auf der rechten Seite soll gewährleisten, dass der Text auf unterschiedlichen Monitoren, Fenstergrößen und Bildschirmauflösungen darstellbar ist.
Klare Organisation des Inhalts. Zur besseren Organisation sollten die Informationen klar geordnet sein. Dies ist insbesondere wichtig, da die visuellen Fähigkeiten und die Konzentrationsfähigkeit im Alter abnimmt. So sollten bestimmte Inhalte zu Gruppen zusammengefasst werden. Verwendung von Farbcodierung unterstützt ebenfalls die Ordnung.
Spaltenanordnung. Kurze Zeilenlängen (etwa 65 Zeichen pro Zeile), größere Zeilenabstände und ein linksbündig ausgerichteter Text erhöhen die Lesbarkeit.
Hintergründe einfach halten. Unruhige Hintergründe vermeiden, einfarbige Hintergründe verwenden.
Blinkende Bilder (Grafiken, etc.) sowie animierte Buttons sollten vermieden werden. Diese lenken die Nutzer ab und erschweren das Finden der eigentlichen Information.
Anbieten von großen Klickzielen. Buttons und grafische Links sollten so groß wie möglich erstellt werden, da viele ältere Manschen Schwierigkeiten mit der Motorik haben und das Treffen eines Links oftmals schon eine Schwierigkeit darstellen kann. Niemals Links oder Klickflächen erstellen, die sich auf der Seite bewegen.

3.2.7 Lernen

Onlinehilfe und Support-Dokumentation. Ältere Menschen sind oftmals neu mit der Technologie und sind nicht mit den Einstellungsmöglichkeiten ihres Rechners und ihrer Software vertraut. Ein Link oder eine Dokumentation mit Hilfestellungen kann sehr hilfreich sein. Hier können Browsereinstellungen (Farben, Fonts, Hintergründe) und ihre Einstellmöglichkeiten beschrieben werden. Links auf Herstellerseiten von Betriebssystemen (Microsoft, Apple, Linux) sowie von Browseranbietern (Microsoft, Apple, Mozilla) können auf der Seite mit eingebunden werden.

3.2.8 Anderes

Größe der Seite. Viele ältere Menschen haben oftmals langsamere Interrnetverbindungen. Seiten sollten dementsprechend "schlank" programmiert werden, damit ein schneller Seitenaufbau erfolgen kann.
Testen der Website. Die Website sollte mit verschiedensten Ausgabegeräten und Einstellungen getestet werden.

4. Stand der Technik

Mit Hilfe der aktuellen Tools und Konzepten der Websitegestaltung können die Anforderungen bereits zu sehr großen Teilen erfüllt werden. Dies liegt der Tatsache zugrunde, dass das Thema bereits in einigen Studien untersucht wurde, da die Wichtigkeit erkannt wurde. Zu großen Teilen werden die Ergebnis dieser Untersuchungen angewendet.
Anforderungen gibt es heute eher in Richtung neuer Peripheriegeräte, die die Art der Betrachtung von Webseiten verändert werden (z.B. das iPad oder IPTV, dem Nutzen des Internet über das Fernsehgerät). Auch hier muss eine Nutzung durch ältere Menschen möglich sein. Dies wird zum Beispiel durch eine immer intuitivere Benutzeroberfläche (User Interface) ermöglicht.
So ist die Umsetzung der oben genannten Kriterien kein Problem von fehlender Technik. Es muss viel mehr ein Einzug in das Denken des umsetzenden Designers/Programmierers bzw. der umsetzenden Agentur und Betreiber der Websites stattfinden. Nicht nur bei Seiten speziell für ältere Menschen, sondern z.B. auch bei Webseiten von Ämtern, Ärzten, der Öffentlichen Verkehrsmittel etc. müssen die Gestaltungsprinzipien angewendet werden.

5. Resümee

Das Thema der Usability von Websites für ältere Nutzer ist mittlerweile gut untersucht. Durch viele Studien konnte herausgefunden werden, welche konzeptionellen und gestalterischen Gesichtspunkte zu beachten sind. So scheint der Bereich schon recht gut erschlossen.

Wieder spannend wird das Thema in Verbindung mit neuen Endgeräten zur Betrachtung von Webseiten, wie Internet fähige Mobiltelefone, Computer mit Touch User Interfaces oder die Verwendung von Augmented Reality in Kombination mit der Betrachtung von Webseiten. Generell findet eine Verschmelzung aller Dienste statt, so dass das Medium Internet und die benötigten Endgeräte weiter in das Leben der Nutzer einziehen. Das Filtern und Zunutze machen von Informationen wird in der Informationsgesellschaft somit immer wichtiger. Hier liegen auch die Anforderung an Technik und Entwickler, den Nutzern Möglichkeiten zur Navigation und Orientierung bieten müssen.
Durch die rasante Entwicklung der Technik und der Art wie sie verwendet wird, wird jedoch die Usability auch von Webseiten eine sehr wichtige Rolle spielen. Neue Konventionen müssen entwickelt und an die Technik angepasst werden.

6. Quellen

ARD-ZDF-Online-Studie
http://www.ard-zdf-onlinestudie.de
Bohan, M., und Scarlett, D. Can Expanding Targets Make Object Selection Easier For Older Adults? Usability News 5.1. Februar 2003.
http://psychology.wichita.edu/mbernard/articles/elderly.pdf
Chadwick-Dias, A., McNulty, M., and Tullis, T. Web Usability And Age: How Design Changes Can Improve Performance. Presentation, Aging by Design. September 2004.
http://www.bentley.edu/events/agingbydesign2004/presentations/tedesco_chadwickdias_tullis_webusabilityandage.pdf
Coyne, K.P., und Nielsen, J. Web Usability for Senior Citizens. Nielsen Norman Group. April 2002.
http://www.nngroup.com/reports/seniors
Quesenbery, Whitney. What does Usabiltiy mean: Looking beyond 'Easy to use'. 2001.
http://www.wqusability.com/articles/more-than-ease-of-use.html
Statistisches Bundesamt, Bevölkerung Deutschlands bis 2060 - 12. Koordinierte Bevölkerungsvorausberechnung. 2009, S. 14ff
http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/DE/Presse/pk/2009/Bevoelkerung/Statement__Egeler__PDF,templateId=renderPrint.psml
U.S. National Institues of Health. National Institue on Aging. Making Your Website Senior Friendly. 2009.
http://www.nia.nih.gov/HealthInformation/Publications/website.htm
Zhao, Haixia. Universal Usability Web Design Guidelines for the Elderly. University of Maryland.2001.
http://www.co-bw.com/DMS_Web_the_elderly_on_the_web.htm

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Bewertung:

Durchschnitt: 4.3 (4 Stimmen)

CMS-Benutzer

Allgemeines

Unter einem Content-Mangement-System (CMS) versteht man meistens ein serverbasiertes System zur gemeinschaftlichen Verwaltung und Pflege von Inhalten in Webseiten. Sämtliche Daten werden in einer Datenbank (im Web meistens MySQL) auf einem Server gespeichert werden. Der Zugriff auf die Daten erfolgt in der Regel über PHP und SQL-Befehle.

Ein Vorteil eines CMS ist die unabhängig voneinander und zeitgleiche Verwaltung von Inhalten durch mehrere Benutzer. Dies muss innerhalb des Systems (Backend) organisiert werden. Dafür stellen alle CMS eine mehr oder weniger differenzierte Nutzer- und Rechteverwaltung zur Verfügung.

Zu den bekanntesten CMS gehören: Joomla, Drupal, TYPO3 und Wordpress

Über das Backend lassen sich neue Benutzer obligatorisch mit Benutzername und Passwort anlegen. Weitere Angaben, wie z.B. Kontaktdaten, können meistens optional hinzugefügt werden.
Abhängig vom jeweiligen CMS, kann hier eventuell schon festgelegt werden, welche Rechte ein Benutzer haben darf und welche nicht. Grundsätzlich gilt bei der Rechtevergabe immer das Prinzip, dass eine höhere Stufe immer alle Rechte der darunterliegenden Rechtestufen mit umfasst (Hierarchie).

Arten von Benutzer

Frontend-Benutzer
Frontend-Benutzer sind Benutzer, die die Inhalte einer Webseite, in dem Fall durch das CMS bereitgestellte Inhalte, sehen. Die Möglichkeit sich mit Benutzername und Passwort auf einer Webseite anmelden zu können und somit Zugriff auf Ressourcen und Seiten innerhalb einer Webseite zu haben, die für normale Benutzer verborgen sind, sind auch Bestandteil des Front-End. Beispiele: Facebook, YouTube, Amazon, Bild.de

Backend-Benutzer
Als Backend-Benutzer bezeichnet man alle Benutzer, die sich am Administrationsbereich eines CMS mit Benutzername und Passwort anmelden können. Hier wird noch einmal zwischen den Benutzern, hinsichtlich ihrer Rechte, unterschieden. Denn nicht alle Benutzer haben im Backend dieselben Rechte und Befugnisse.

Zu den Backend-Benutzern gehören:

Redakteur

Redakteure dürfen in der Regel, in den für sie freigegebenen Bereichen, eigene Inhalte erstellen und bearbeiten. Dazu zählen z.B. Seiten bearbeiten, Texte verfassen, Bilder hochladen etc.

Sie haben keine Berechtigung zur Nutzer- und Rechteverwaltung und haben keinen Zugriff auf systemrelevante Bereiche. In der Regel führen Sie die Rolle des Autors aus. Es gibt auch Editor, die das Erscheiunungsbild des Front-End ändern können.

Administrator

Der Administrator kann neuen Inhalt erstellen/bearbeiten/löschen und hat die Berechtigung zur Nutzer- und Rechteverwaltung. Er darf systemspezifische Änderungen durchführen (z.B. Erweiterungen installieren, System-Updates einspielen) und ist in der Lage das komplette CMS zu löschen. Der Administrator hat in der Regel alle Rechte innerhalb eines CMS.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Content Management System

Unter einem Content-Management-System (CMS) versteht man ein serverbasiertes System zur einfachen Verwaltung und Pflege von Websites. Ein CMS ermöglicht, dass die Erstellung durch Programmierer/Agentur von der Pflege durch den Kunden ohne Programmierkenntnisse getrennt stattfindet.

Was sind die Vor- und Nachteile?

Vorteile
Trennung von Inhalt und Layout
Da das Grundprinzip der strickten inhaltlichen und layoutspezifischen Trennung besteht,
kann nach der finalen Einrichtung grundsätzlich jeder Endanwender (Laie sowie Profi) den Internetauftritt pflegen, steuern und betreuen.

Keine Vorkenntnisse nötig
Auf Seiten des Endusers sind keine speziellen Vorkenntnisse von bspw. Programmierung,
HTML oder XML notwendig. Die Bedienung läuft für ihn vollkommen ohne Hintergrundwissen über diese Technologien.

Medienneutrale Datenhaltung möglich
In vielen CMS können die Inhalte in andere Dateiformate wie z.B. PDF sehr leicht überführt werden,
da die Formate zur Laufzeit „live“ aus der Datenbank heraus generiert werden.

Rechteverwaltung
In einem CMS können verschiedenen Nutzern verschiedene Rechte zugeteilt werden
und quasi eine Rollenvergabe durchgeführt werden. Der Administrator hat somit Zugriffsrecht auf alle Bereiche,
wogegen ein Redakteur, der sich um die Aktualität der News kümmern soll, nur für diesen Abschnitt Schreibrechte erhält.

Gleichzeitiges Arbeiten mehrerer Personen
Ein gemeinsames Arbeiten an einem Online-Projekt ist theorethisch von jedem Ort mit einem Internetzugang aus möglich.

Nachteile
Zu wenig Freiraum
Durch die Festlegung des Layouts wird zum Einen eine (gewollte) Einheitlichkeit der Interseite erreicht,
zum Anderen aber wiederum ein sehr starres, möglicherweise unflexibles Gerüst angelegt. Freiräume in der individuellen Gestaltung sind oft nur wenig vorhanden.

Datenbank notwendig bspw: PHP und MySQL .net(asp) und MS SQL
Für viele Systeme ist der Betrieb von Webspace ASP/PHP und MS SQL /MySQL zwingend notwendig. Ohne diese Unterstützung kann kein solches CMS betrieben werden. Mittlerweile gibt es aber auch CMSe, die auf anderer technischer Grundlage arbeiten (siehe untenstehenden Kommentar vom 24.04.21).

Oft für Laien trotzdem noch zu kompliziert
Bei vielen der verbreiteten CMS ist der Funktionsumfang mittlerweile derart groß, dass schon wieder Schulungen für die letztendlichen Administratoren erfolgen müssen.

quelle: vor/nachteile cms -> http://www.christian-pansch.de

Wann ist es sinnvoll eine CMS zu verwenden?

Es gibt verschiedene Aspekte, die für die Verwendung eines CMS sprechen

Gibt es schnell und häufig wechselnden Content?
Gibt es mehrere Autoren, die unabhängig von einander und zeitgleich Content erstellen?
Menschen, die Inhalte einpflegen müssen keine HTML, CSS oder PHP-Kennntisse haben. Grundkenntnisse der Internetnutzungs und die grobe Kenntnis von Office-Programmen reicht aus
Da nur der Content bearbeitet wird, gibt es keine Veränderungen am Design und damit wird eine ästehtische Konsistenz gewährleistet.
Verschiedene Autoren können unterschiedliche Rechte zu gewiesen bekommen, zum Beispiel, dass Autor X nur für Thema X schreiben darf.

Server und Client (Zusammenfassung Wikipedia)

Serverseitige CMS

benötigt serverseitige Programmiersprache, die in Verbindung mit einer Datenbank steht
Datenbank ist entweder auf dem selben Server oder mit einem oder mehreren im lokalen Netzwerk installiert
Daten können weltweit verwaltet werden
benutzerspezifische Berechtigungen
der für die Endbenutzer sichtbare Bereich wird als Frontend bezeichnet
das Backend ist der durch einen Login geschützte Bereich, in dem die Administration der Seite erfolgt
für Webseiten jeglicher Größe geeignet
Abhängigkeit von der serverseitig bereitstehenden Rechenkapazität und bei hoher Frequentierung nur bedingt geeignet

Clientseitige CMS

Programm wird auf dem Rechner installiert und steuert das CMS
Daten werden auf den Server hochgeladen
serverseitige Programmiersprache ist nicht notwendig
bieten oft Layoutfunktionen, mit denen einige Seitentypen (Templates erstellt werden können)

Dynamik & Statik (Zusammenfassung Wikipedia)
--> Art der Anlieferung an den Nutzer

Volldynamische Systeme
-->erzeugen angeforderte Seiten bei jedem Aufruf dynamisch neu

Vorteile:

Seite immer aktuell
Personalisierung für den Nutzer sehr einfach oder bereits vorhanden

Nachteile:

Berechnung kann unter Last zu einer verzögerten Auslieferung der Seiten oder bei mangelhafter Ausstattung an Rechenkapazität im Verhältnis zur Anzahl gleichzeitig bedienter Nutzer zur Serverüberlastung und zum Systemstillstand führen.

Statische Systeme

legen jede Webseite statisch in einer Datenbank oder im Dateisystem ab
Inhalte werden fertig generiert z.B. als HTML-Dateien abgespeichert und können bei einem Aufruf unmittelbar übertragen werden. Das spart Serverzeit bei der Ausgabe aber nicht bei der Pflege.

Hybride Systeme

Kombination von volldynamischer und statischer Seitenerzeugung
nur Inhalte, die dynamisch aus einer Datenbank generiert werden müssen (News, Suchabfragen, Shopdaten) werden zur Laufzeit aus der Datenbank ausgelesen
Seitengerüst, Navigation, bestimmte Texte und Bilder liegen statisch vor

Halbstatische Systeme

generieren den Inhalt so, dass dieser statisch und dynamisch ist, d.h. es werden alle Daten direkt in statisch generierten Daten gespeichert, die dann bei Abruf sofort ausgegeben werden
die dynamischen Inhalte werden dann generiert, wenn ein Code in die Datei eingebunden wird oder einzelne Datensätze geändert/ neu angelegt werden

Weitere Stichworte zu dem Thema:

Datenbank, Typo 3, PHP, Drupal (das nutzt die Mediencommunity), Joomla

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

CMS

Contentmanagementsysteme

Bewertung:

Durchschnitt: 3 (2 Stimmen)

Cookies

1. Cookie

Ein Cookie [ˈkʊki], auch Magic Cookie (vom englischen Wort für Plätzchen bzw. magisch. Deutsche Entsprechung: Profildatei) ist ein kurzer Eintrag in einer meist kleinen Datenbank bzw. in einem speziellen Dateiverzeichnis auf einem Computer und dient dem Austausch von Informationen zwischen Computerprogrammen oder der zeitlich beschränkten Archivierung von Informationen. Ein Cookie besteht aus mindestens zwei Bestandteilen, seinem Namen und dem Inhalt oder Wert des Cookie. Außerdem können Angaben über den zweckmäßigen Gebrauch vorhanden sein. Die Datenbank kann oft vom Benutzer des Computers ohne besondere Hilfsmittel nicht eingesehen oder verändert werden.

Von Anwendungsprogrammen oder Teilen oder Erweiterungen des Betriebssystems eines Computers, die einen Dienst zur Verfügung stellen, kann ein Cookie zum Beispiel beim Start des Programms gesetzt werden. Anderen Programmen wird so bekannt, dass sie diesen Dienst in Anspruch nehmen können, wenn sie in der Datenbank den vorher vereinbarten Namen des Cookie finden. Der Wert des Cookie enthält dabei typischerweise eine Speicheradresse, über die Funktionen des Dienstes zugänglich sind. Datenbanken dieses Typs heißen Cookie Jar.

Webbrowser stellen eine Cookie-Datenbank zur Verfügung, die Cookie Cache genannt wird; dort kann der Webserver einer besuchten Webseite Informationen in Form von HTTP-Cookies hinterlegen und bei einem Wiederbesuch der Seite auslesen.
Viele Webseiten hinterlegen ein solches Cookie, um die Nutzer bei erneuten Einloggen wiedererkennen zu können (und z.B. dann andere Werbung einzublenden oder dem Besucher Funktionalitäten bereitzustellen, die dieser nutzen möchte).
Cookies sind eine nachträgliche Erfindung; ursprünglich war das Internet zum Austausch von Daten unter Wissenschaftlern gedacht. Es war also nicht nötig, sich gegenüber dem Server zu identifizieren. Später wurden Anwendungen erfunden, die dies erforderlich machten. Da das ursprüngliche Protokoll so etwas nicht vorsah, hat das Team von Netscape, deren Browser und Server seinerzeit den Markt dominierten, kurzerhand diese Funktionalität erfunden, die dann von anderen Browsern übernommen wurde, weil sie auf elegante Weise das Problem löste. In der Öffentlichkeit wurden Cookies lange Zeit kontrovers diskutiert. In der heutigen Wahrnehmung sind Cookies neutrale "Werkzeuge" im Datenverkehr.

Ein häufiges Beispiel für notwendige Cookies sind Foren. Jeder (angemeldete) Benutzer muss die Möglichkeit haben, Beiträge abzuliefern und nachträglich zu redigieren. Dies ist nur möglich mit Cookies. Dort findet sich oft die Möglichkeit, „eingeloggt zu bleiben“. Dabei wird ein Cookie abgelegt, das eine entsprechende Laufzeit hat und bei erneutem Besuch der Seite immer noch gültig ist, daher ausgelesen und ausgewertet werden kann. Auch Shops basieren häufig auf Cookies, die den Warenkorb steuern. Sollte eine solche "Sitzung" ausgelaufen sein, muss sich der Benutzer erneut einloggen, sich also gegenüber dem Server identifizieren. Das Ergebnis der Prüfung wird im Cookie abgelegt.

1.1. Herkunft der Bezeichnung
Eine mögliche Erklärung für die Bezeichnung "(Magic) Cookie" ist der Comic "Odd Bodkins" von Dan O'Neill, der in den 1960'ern in der Zeitung San Francisco Chronicle erschien: Einige der Charaktere aßen "Magic Cookies" von dem "Magic Cookie Bush" (vermutlich ein Euphemismus für LSD), unter deren Einfluss sie in das "Magic Cookie Land" gelangten. Somit sind Cookies analog zu den verzehrten Plätzchen eine Art Wertmarke für einen ganzen Sinnzusammenhang oder ein Erlebnis.

2. HTTP-Cookie
Ein HTTP-Cookie, auch Browser-Cookie genannt ([ˈkʊki]; engl., „Plätzchen“, „Keks“), bezeichnet Informationen, die ein Webserver zu einem Browser sendet oder die clientseitig durch JavaScript erzeugt werden. Der Client sendet die Informationen in der Regel bei späteren Zugriffen an denselben Webserver im Hypertext-Transfer-Protocol-Header an den Server. Cookies sind clientseitig persistente/gespeicherte Daten.
HTTP-Cookies sind eine spezielle Form der allgemeinen Magic Cookies. Sie ermöglichen das clientseitige Speichern von Information, die auch vom Server stammen können und die bei weiteren Aufrufen für den Benutzer transparent an den Server übertragen werden. Dadurch erleichtern Cookies die Benutzung von Webseiten, die auf Benutzereinstellungen reagieren oder den Aufbau von Sitzungen. Dieses Konzept wurde ursprünglich von Netscape entwickelt und in RFC 2109 spezifiziert.

2.1. Funktionsweise
Cookies werden in den Kopfzeilen (Header) von Anfragen und -Antworten via HTTP übertragen. Cookies entstehen, wenn bei einem Zugriff auf einen Webserver neben anderen HTTP-Kopfzeilen in der Antwort zusätzlich eine Cookie-Zeile übertragen wird (siehe Aufbau). Diese Cookie-Informationen werden dann lokal auf dem Endgerät gespeichert, üblicherweise in einer Cookie-Textdatei. Bei nachfolgenden weiteren Zugriffen auf den Webserver wird der eigene Browser alle Cookies in dieser Datei heraussuchen, die zum Webserver und Verzeichnispfad des aktuellen Aufrufs passen, und schickt diese Cookie-Daten im Header des HTTP-Zugriffs mit zurück, womit die Cookies jeweils an jenen Webserver zurückgehen, von dem sie einst stammten.
Ein Cookie kann beliebigen Text enthalten, kann also neben einer reinen Identifikation auch beliebige Einstellungen lokal speichern, jedoch sollte seine Länge 4 KB nicht überschreiten, um mit allen Browsern kompatibel zu bleiben. Die Cookies werden mit jeder übermittelten Datei übertragen, also auch mit Bilddateien oder jedem anderen Dateityp; dieses gilt insbesondere für eingebettete Elemente wie Werbebanner, die von anderen Servern eingebunden werden als dem Ursprung einer angezeigten HTML-Datei. So kann eine einzelne Webseite zu mehreren Cookies führen, die von verschiedenen Servern kommen und an diese jeweils wieder zurückgeschickt werden; mit einer Anfrage des Browsers werden alle den Server betreffenden Cookies gesendet.
Cookies werden ausschließlich vom Client verwaltet. Somit entscheidet der Client, ob z. B. ein Cookie gespeichert wird oder die vom Webserver gewünschte eingeschränkte Lebensdauer des Cookies durch Löschung ausgeführt wird.

Gängige Browser erlauben dem Nutzer meist einschränkende Einstellungen zum Umgang des Client mit Cookies, z. B.:

Keine Cookies annehmen.
Nur Cookies des Servers der aufgerufenen Seite annehmen (keine Cookies von Drittservern wie bei Werbebannern).
Benutzer bei jedem Cookie fragen.

hier kann dann meist zwischen „erlauben“ (bleibt), „für diese Sitzung erlauben“ (wird immer angenommen, aber nach dem Schließen des Browsers gelöscht) und „ablehnen“ (nicht akzeptieren) gewählt werden, wobei die gewählte Option gespeichert wird

Alle Cookies bei Beendigung des Client löschen („Sitzungs-Cookie“).

Dazu erlauben einige Browser verwaltende Aktionen wie:

Daten im Cookie ansehen.

Einzelne oder alle Cookies löschen.

Ob ein Cookie angenommen (clientseitig gespeichert) wurde, muss die serverseitige Anwendung in weiteren HTTP-Anfragen erkennen, da vom Client keine Rückmeldung erfolgt.
Der Server kann ein Cookie durch Überschreiben mit leeren Daten löschen.

2.2. Verwendung
Eine typische Anwendung von Cookies ist das Speichern persönlicher Einstellungen auf Websites, zum Beispiel in Foren. Damit ist es möglich, diese Website zu besuchen, ohne jedes Mal die Einstellungen erneut vornehmen zu müssen.
Mit Cookies können auch Sitzungen realisiert werden. Das HTTP ist per Definition ein zustandsloses Protokoll, daher ist für den Webserver jeder Zugriff völlig unabhängig von allen anderen. Eine Webanwendung, die sich über einen längeren Zeitraum hinzieht, muss mit Zusätzen auf der Anwendungsschicht (im Browser) arbeiten, um den Teilnehmer über mehrere Zugriffe hinweg identifizieren zu können. Dazu wird in einem Cookie vom Server eine eindeutige Session-ID gespeichert, um genau diesen Client bei weiteren Aufrufe wieder zu erkennen und damit nicht bei jedem Aufruf einer Unterseite das Passwort erneut eingegeben werden muss.

Auch Online-Shops können Cookies verwenden, um sitzungslose virtuelle Einkaufskörbe zu ermöglichen. Der Kunde kann damit Artikel in den Einkaufskorb legen und sich weiter auf der Website umschauen, um danach die Artikel zusammen online zu kaufen. Die Artikel-Kennungen werden in einem Cookie gespeichert und erst beim Bestellvorgang serverseitig ausgewertet.

Damit bei Webanwendungen Benutzeraktionen und -eingaben, die für den Server bestimmt sind, bei Abbrüchen der Verbindung zum Server zum Beispiel in Mobilfunknetzen nicht verloren gehen, können Cookies zur Zwischenspeicherung eingesetzt werden. Sie werden dann bei Wiedererrichtung der Verbindung automatisch zum Server geschickt. Die Webanwendung erkennt dabei die Reihenfolge, in der die Cookies erzeugt wurden, und markiert bereits verarbeitete Cookies oder löscht deren Inhalt. Weil bei dieser Verwendung unter Umständen viele Cookies erzeugt werden, die frühestens beim Schließen des Browsers gelöscht werden, der Speicherplatz des Browsers für Cookies aber beschränkt ist, muss die Webanwendung Vorkehrungen gegen einen Cookie-Überlauf treffen.[1]

2.3. Gefahren
Die eindeutige Erkennung kann für Zwecke eingesetzt werden, die von vielen Benutzern als missbräuchlich angesehen werden. Cookies werden z. B. dafür verwendet, Benutzerprofile über das Surfverhalten eines Benutzers zu erstellen. Ein Online-Shop kann z. B. diese Daten mit dem Namen des Kunden verknüpfen und zielgruppenorientierte Werbemails schicken. Jedoch kann der Online-Shop nur das Surfverhalten innerhalb seiner eigenen Webseite verfolgen.

Server, die nicht identisch mit dem Server der aufgerufenen Webpage sind, können z. B. mit Bilddateien (Werbebanner oder auch Zählpixel) auch so genannte „serverfremde“ Cookies setzen. Diese werden aufgrund ihrer Verwendung auch als „tracking cookies“ bezeichnet (englisch für Verfolgen). Gegebenenfalls kann so der Besuch unterschiedlicher Websites einem Benutzer zugeordnet werden. Es entsteht eine „serverübergreifende“ Sitzung. Daraus kann auf die Interessen des Besuchers geschlossen und Websites entsprechend angepasst („personalisiert“) werden. Bei einer Bestellung in einem Webshop etwa werden die angefallenen Daten naturgemäß einer konkreten Person zugeordnet.

Denkbar wäre ein potentieller Missbrauch bei einer möglichen Kooperation zwischen dem Webshop und dem Werbeunternehmen; diese kann verhindert werden durch eine entsprechende Browser-Einstellung, die nur Cookies des Servers der aufgerufenen Seite (Webshop) annimmt, nicht die der fremden Server, die die Werbung einblenden. Wirbt der Webshop allerdings selber, könnte diese zielgerichtete Werbung so nicht verhindert werden, aber sogar nützlich sein. Amazon wertet bekanntlich die Bestellhistorien der Käufer systematisch aus, um auch unbekannten Besuchern konkrete Vorschläge zu machen.

Noch nicht zu übersehen sind die Gefahren, die dadurch entstehen, dass Großunternehmen wie Google, deren Dienste praktisch jedermann ständig nutzt, sich vorbehalten, die dadurch entstehenden Daten auf unbegrenzte Zeit zu bevorraten und auszuwerten. Um Daten über das Nutzerverhalten zu sammeln, ist man nicht auf Cookies angewiesen. Das Problem ist also wesentlich allgemeinerer Natur.
In Umgebungen, in denen sich mehrere Nutzer denselben Rechner teilen, etwa in Schulen oder Internet Cafés, besteht allerdings die ganz konkrete und offensichtliche Gefahr, dass ein noch gültiger Sitzungs-Cookie vom nächsten Nutzer des Rechners verwendet wird, um diese Sitzung fortzusetzen. Dieses Risiko kann verhindert werden, indem man grundsätzlich alle Cookies vor dem Beenden des Browsers löscht oder eine entsprechende Browser-Einstellung nutzt. Das wäre die Aufgabe des Administrators. Infolgedessen kann man an öffentlichen Plätzen, etwa Bibliotheken oder Universitäten, üblicherweise keine permanenten Cookies hinterlassen.

2.4. Erlauben oder Sperren?
Ein Kompromiss zwischen den Vor- und Nachteilen von Cookies kann erzielt werden, indem man seinen Browser so konfiguriert, dass persistente Cookies nicht oder nur gegen Rückfrage zugelassen werden, was z. B. die Erstellung von Benutzerprofilen erschwert, und Sitzungs-Cookies automatisch zugelassen werden, z. B. für Webeinkäufe, Passwörter. Außerdem bieten die meisten Browser die Möglichkeit, Cookies selektiv für bestimmte Domänen zu erlauben bzw. zu sperren oder nach dem Surfen automatisch zu löschen, wie es automatisch bei Sitzungs-Cookies geschieht. Auch ist es möglich, serverfremde Cookies automatisch abzuweisen, über die ein Dritter, etwa ein Werbepartner der Internet-Seite, das eigene Verhalten über mehrere Server hinweg aufzeichnen könnte.

Es ist auch möglich, Cookies automatisch beim Schließen des Browsers durch diesen löschen zu lassen. Damit werden Probleme mit Mehrbenutzersystemen weitgehend vermieden und die Überwachung des Benutzers durch Cookies wird zumindest eingeschränkt. Zugleich verzichtet der Benutzer damit auf alle Vorteile, die Cookies gewähren; er muss sich also zwangsweise bei der nächsten Sitzung überall wieder neu einloggen. Das führt aber zu neuen Sicherheitsproblemen, denn die Benutzer neigen dazu, überall dasselbe Passwort zu verwenden, da sich niemand eine Vielzahl von Passworten merken kann. Selbst die Benutzung von mehreren Passworten führt dazu, dass der Benutzer gegebenenfalls alle ausprobiert und sie damit gegenüber der betreffenden Webseite preisgibt.

Des Weiteren bieten moderne Browser die Möglichkeit, Funktionen über kleine Zusatzprogramme (Add-Ons) nachzurüsten. So ist es beispielsweise bei Firefox nach Installation eines auf diese Funktion ausgelegten Add-Ons per Klick auf eine Schaltfläche möglich, Internetseiten die Erlaubnis zu geben, Cookies zu speichern[2][3][4] bzw. sogar selbst den Inhalt der Cookies zu manipulieren[5]. Das ermöglicht es, dass man die Cookies generell deaktiviert lassen kann und sie nur dann zu erlauben, wenn die Internetseite nicht richtig funktioniert oder man sich bei einem Onlinedienst anmelden will.

2.5. Aufbau
Ein Cookie besteht aus einem Namen und einem Wert sowie mehreren erforderlichen oder optionalen Attributen mit oder ohne Wert. Einige Attribute sowie deren Einschließen in Hochkommas werden empfohlen.

Name - erforderlich –Beliebiger Name und Wert aus ASCII-Zeichen die vom Server übergeben werden
Version - erforderlich – Gibt die Cookie-Management-Spezifikation in einer Dezimalzahl an (derzeit immer 1).
Expires - optional – Ablaufdatum, Zeitpunkt der automatischen Löschung in UTC für HTTP/1.0
Max-age - optional – Ablaufzeit in Sekunden – 0 für sofortige Löschung. Der Client darf den Cookie auch nach dieser Zeit benutzen, der Server kann sich also nicht darauf verlassen, dass der Cookie nach dieser Ablaufzeit gelöscht wird.
Domain - optional – Domain oder Bestandteil des Domainnamens, für den der Cookie gilt
Path - optional – Gültigkeits-Pfad (Teil der Anfrage-URI), um die Gültigkeit des Cookies auf einen bestimmten Pfad zu beschränken
Port - optional – Beschränkung des Ports auf den aktuell verwendeten oder auf eine Liste von Ports
Comment - optional – Kommentar zur näheren Beschreibung des Cookies
CommentURL- optional – URL unter welcher eine Beschreibung zur Funktionsweise zu finden ist
Secure - optional – Rücksendung des Cookie nur „geschützt“ (wie ist nicht weiter spezifiziert). Die meisten HTTP-Clients senden einen „sicheren“ Cookie nur über eine HTTPS-Verbindung. Das Attribut hat keinen Wert.
Discard - optional – Unbedingt Löschung des Cookies bei Beendigung des Webbrowsers.

2.5.1. Funktionsweise – ein Beispiel
Szenario: Eine Webseite bietet eine Suchfunktion an, die sich an den zuletzt eingegebenen Suchbegriff erinnern kann, selbst wenn der Benutzer zwischenzeitlich den Browser beendet. Dieser Suchbegriff kann nicht auf dem Server gespeichert werden, da der Server dazu den Besucher eindeutig identifizieren müsste, und das geht mit reinem HTTP nicht. Deshalb soll der zuletzt eingegebene Suchbegriff vom Browser des Besuchers (in einem Cookie) gespeichert werden.
Wenn der Besucher die Suchfunktion zum ersten Mal aufruft (hier mit dem Suchbegriff „cookie aufbau“), schickt er folgende Anfrage an den Server:
GET /cgi/suche.py?q=cookie+aufbau HTTP/1.0
Der Server antwortet mit dem Suchergebnis und bittet den Browser mit der „Set-Cookie“-Zeile, sich den letzten Suchbegriff zu merken:

HTTP/1.0 200 OK
Set-Cookie: letzteSuche="cookie aufbau";
            expires=Tue, 29-Mar-2005 19:30:42 GMT;
            Max-Age=2592000;
            Path=/cgi/suche.py;
            Version="1"

(Normalerweise stehen alle Eigenschaften des Cookies in einer einzigen Zeile. Zur besseren Lesbarkeit steht hier jedoch nur ein Attribut pro Zeile.) Der Cookie hat die folgenden Eigenschaften:

Nutzdaten (letzteSuche): Der letzte Suchbegriff

Ablaufdatum (expires): Der Cookie wird nur in Anfragen mitgeschickt, die vor dem 29. März 2005 passieren.

Maximalalter (Max-Age): Der Cookie wird nur in den folgenden 30 Tagen mitgeschickt, später nicht mehr.

Teilbereich der Webseite (Path): Der Cookie wird nur an die Suchmaschine (/cgi/suche.py) geschickt, da alle anderen Teile der Webseite die Information nicht brauchen.

Zusätzlich zu der Pfad-Einschränkung wird der Cookie auch nur an den Server zurückgeschickt, von dem er gekommen ist. Dies wird durch die fehlende „Domain“-Variable erreicht.

Bei jeder weiteren Suchanfrage schickt der Browser nun, wenn er den Cookie akzeptiert, diesen an den Server zurück. Das sieht dann so aus:

GET /cgi/suche.py?q=12345 HTTP/1.0
Cookie: letzteSuche="cookie aufbau"; $Path=/cgi/suche.py; $Version="1";

Allen Eigenschaften des Cookies ist ein „$“ vorangestellt, mit Ausnahme der Nutzdaten (hier: letzteSuche). Der Server hat jetzt also die Information über den aktuellen Suchbegriff (12345) und den letzten (cookie aufbau). Zwischen diesen beiden Suchanfragen kann eine Zeit von bis zu 30 Tagen (Ablaufdatum) liegen.

2.5.2. Browseranforderungen
Nach RFC 2965 soll ein Browser Folgendes unterstützen:

Es sollen insgesamt mindestens 300 Cookies gespeichert werden können.

Es sollen pro Domain mindestens 20 Cookies gespeichert werden können.

Ein Cookie soll mindestens 4096 Bytes enthalten können.

Manche Browser können mehr Cookies und/oder auch Cookies mit längeren Zeichenketteninhalten verarbeiten, garantiert ist dies aber nicht. Umgekehrt halten sich aber auch nicht alle Browser an alle Anforderungen.

3. Flash-Cookie
Flash-Cookies oder Local Shared Objects (LSO) stellen eine neue Art der Speicherung von Benutzerdaten auf dem surfenden PC durch Nutzung des Adobe Flash Players dar.
Im Gegensatz zu Browser-Cookies (HTTP-Cookies) ermöglicht diese Technik den Webseiten, Inhalte browserunabhängig und ohne Verfallsdatum auf dem Rechner des Webseitenbetrachters zu speichern. So werden Inhalte, die beim Betrachten eines Flash-Films mit einem Browser (z. B. Firefox) geschrieben wurden, auch beim Betrachten der Internetseite mit einem anderen Browser (z. B. Windows Internet Explorer) an den Server gesendet.
Problematisch ist der Umstand, dass diese LSOs nicht von der Cookieverwaltung des Browsers administriert werden und bei Bedarf manuell oder per Software (Flash-Cookie-Killer, Flash-Cookie-Manager, CCleaner) gelöscht werden müssen. Für den Browser Firefox gibt es u. a. dazu inzwischen eine Browsererweiterung[1]. Die Speicherung von LSOs lässt sich auch mit dem Einstellungsmanager des Flash-Players konfigurieren, der allerdings nur online über die Adobe-Website zugänglich ist.[2]
Der Speicherort der LSOs unter Microsoft Windows ist
%AppData%\Macromedia\Flash Player\#SharedObjects

Dieser Ordner ist in den Einstellungen des persönlichen Profils zu finden. Unter Windows XP normalerweise:
C:\Dokumente und Einstellungen\Username\

Bei Windows Vista finden sich die Flash-Cookies unter:
C:\Benutzer\USERNAME\%AppData%\Roaming\Macromedia\Flash Player\#SharedObjects

Der Ordner %AppData% ist standardmäßig unter Windows XP und Vista nicht sichtbar. Die Sichtbarkeit des Ordners kann über die Ordnereinstellungen geändert werden.

Der Speicherort der LSOs unter Mac OS X ist
~/Library/Preferences/Macromedia/Flash Player/#SharedObjects

Unter anderen unixartigen Betriebssystemen wie Linux und Solaris befinden sich die Dateien unter
~/.macromedia/Flash_Player/#SharedObjects

4. Ohne Cookies kein korrektes Tracking
Ein sauberes Tracking ist die Grundlage jeder Web-Analyse. Je genauer sich die einzelnen Nutzer und Ihr Verhalten abbilden läßt, umso paßgenauer kann die Web-Site optimiert werden. Mit Hilfe von Cookies lassen sich Nutzer klar identifizieren und die erhobenen Daten lassen sich einer konkreten Sitzung zuordnen

4.1. Tracking-Szenarios
Um einen Nutzer/Besucher Ihrer Web-Site klar identifizieren und verfolgen zu können, brauchen Sie eine besucherspezifische Kennung, die sich über den gesamten Besuchszeitraum nicht verändert.
Es gibt mehrere Methoden dies technisch zu bewerkstelligen; die am häufigsten genutzten Möglichkeiten sind: IP-Adresse, IP-Adresse und Browser-Kennung (user agent), Login-Name, Sitzungs-Cookies und Permanent-Cookies.
Wir wollen zwei Tracking-Methoden herausgreifen:

4.1.1. Die einfachste Methode
Das Tracking mittels IP-Adresse sowie mittels IP-Adresse und Browser-Kennung. Da jeder Nutzer, der auf Ihre Web-Site zugreift, über eine IP-Adresse und einen Browser verfügt, läßt sich dieses Verfahren standardmäßig anwenden.

4.1.2. Die genaueste Methode
Tacking mittels Cookies liefert sicherlich mit Abstand die genauesten und detailliertesten Daten in Bezug auf Nutzer und ihr Verhalten auf der Web-Site. Allerdings erfordert ein sinnvolles Cookie-Management einiges an Aufwand und Vorarbeit.
Diese beiden Arten der Nutzer-Verfolgung werden in der Praxis von fast allen Web-Site-Betreibern eingesetzt.

4.2. IP-Tracking im Detail
"Immer noch besser als gar nichts" - dies beschreibt die Qualität des IP-Adressen-Trackings recht gut. Dieses Verfahren ist nicht geeignet, Nutzer eindeutig zu identifizieren und ihnen Sitzungen zuzuordnen. Warum? Weil viele Nutzer mit dynamischen, d.h. ständig wechselnden IP-Adressen surfen. Ein Nutzer, den Sie heute unter 197.45.34.67 tracken, kommt morgen mit der IP-Adresse 201.1.56.135 zu Ihnen. Sie haben keine Chance jemals herauszufinden, dass es sich hier um ein und denselben Nutzer handelt. Da es nicht unbegrenzt viele IP-Adressen gibt, verfügen ISPs wie T-Online, AOL oder Freenet über einen festen Pool an IP-Adressen - jedem Surfer wird beim Online-gehen eine zufällige IP-Adresse zugewiesen. Wenn die Verbindung zum Internet dann beendet ist, fällt die IP-Adresse wieder zurück an den ISP, der sie dann an einen anderen Surfer vergeben kann und wird.
Das Resultat: Es sieht so aus, als ob Sie viele Stammkunden haben, dabei handelt es sich um ganz unterschiedliche Besucher, die sich nur eine IP-Adresse teilen. Da jeder Besucher bei jedem Besuch eine neue IP-Adresse nutzt, sind die Statistiken in Bezug auf Mehrfachnutzer nicht aussagekräftig.
Ein weiteres Problem sind Nutzer, die einen Proxy-Server nutzen, um ins Internet zu gelangen. Große Firmen und ISPs wie AOL oder Akamai nutzen diese Technik. Nutzer, die über einen Proxy-Server ins Internet gehen teilen sich eine IP-Adresse. In der Analyse läßt sich dann nicht feststellen, ob ein oder mehrere Nutzer Ihre Web-Site besucht haben.
Diese Probleme verschärfen sich mit steigenden Nutzerzahlen.

Fazit: Zwar sind die absoluten Zahlen beim Tracking via IP-Adressen wenig aussagekräftig, doch lassen sich Trends im Allgemeinen mit dieser Methode recht gut analysieren.

4.3. Cookie-Tracking im Detail
Cookies sind kleine Text-Dateien, die vom Browser auf der Festplatte des Nutzers abgelegt werden. Zwar sind Cookies nicht unumstritten - so schlecht für den Nutzer, wie sie in der einschlägigen Fachpresse dargestellt werden sind Cookies nicht. Web-Mail oder Online-Shopping beispielsweise sind ohne Cookies schwer vorstellbar.
Cookie ist nicht gleich Cookie - die "besten" Cookies stammen von der besuchten Web-Site, sind permanent und P3P-konform. P3P steht für Platform for Privacy Preferences (PPP, oder eben P3P) - einem internationalen Datenschutz-Standard. Die meisten Nutzer akzeptieren diese Art von Cookies. Da die meisten Nutzer Ihre Cookies nicht sehr oft löschen - und praktisch nie während einer Sitzung - sind Cookies sehr verlässlich, wenn es darum geht Nutzer zu indentifizieren und ihre Aktionen zu verfolgen.
Cookies lassen sich wie folgt klassifizieren:

Permanent-Cookies (leben ewig) vs. Sitzungs-Cookies (überleben das Ende der Sitzung nicht)
First party (werden von der besuchten Web-Site gesetzt) vs. Third Party (werden von anderen Sites als der besuchten gesetzt)
anonym vs. personengebunden
P3P-konform vs. nicht P3P-konform

4.3.1. Permant vs. Sitzung
Ein Permanent-Cookie wird für eine bestimmte Zeit auf der Festplatte des Nutzers gespeichert, beispielsweise bis zum 31.1.2035. Ein Sitzungs-Cookie dagegen wird gelöscht, sobald der Nutzer die Web-Site verlässt. Mit beiden Typen lassen sich Sitzungen verfolgen, aber nur mit Hilfe eines Permanent-Cookies lassen sich wiederkehrende Besucher identifizieren.

4.3.2. First party vs. Third party
Ein First-party-Cookie wird von der besuchten Web-Site ausgeliefert. Ein Third-party-Cookie stammt dagegen von einer Site, die nur mittelbar mit der besuchten Site etwas zu tun hat. Third-party-Cookies werden of von Ad-Servern oder Anbietern von Web-Analytics-Services eingesetzt.

4.3.3. Anonym vs. personengebunden
Verzichten Sie darauf personengebundene Daten zu erheben. Für ein sauberes Tracking sind anonyme Cookies vollkommen ausreichend. Zum einen sind Sie dazu durch den Datensparsamkeits-Paragraphen des Bundesdatenschutzgesetzes (BDSG §3a) verpflichtet, zum andern werden die wenigsten Nutzer personenbezogene Daten herausgeben. Wenn Sie aus anderen Gründen personenbezogene Daten erheben, beispielsweise während eines Bestellvorgangs, sollten Sie diese in einem separaten Cookie speichern und so die einzelnen Funktionalitäten sauber von einander trennen.

4.3.4. P3P-konform
Wenn Ihre Cookies P3P-konform sind, sollten Sie dies vermerken, denn damit erhöhen Sie die Akzeptanz Ihres Cookies. Allzu viel Aufmerksamkeit müssen Sie dem Punkt P3P aber nicht widmen, denn wenn Sie anonyme First-party-Cookies ausliefern werden über 95% aller Nutzer diese Cookies akzeptieren.

4.4.    Fazit
Optimieren lässt sich eine Web-Site nur auf Basis eines verlässlichen Nutzer-Trackings. Mit Hilfe permanenter, anonymer First-party-Cookies lässt sich dieses Ziel erreichen.

5.    Welche Möglichkeiten der Datenerhebung gibt es?
Drei Arten der Datenerfassung sind im Rennen: Log-Dateien, Cookies und JavaScripten. Im folgenden werden wir die Vor- und Nachteile der einzelnen Arten näher beleuchten.

5.1.    Log-Dateien
Log-Dateien sind keine Marketing-Tools, sondern dienen der technischen Diganose des Web-Servers. Marketing-Fragen lassen sich deshalb durch Log-File-Analyse nur bedingt beantworten.

Pro:

Die Daten fallen sowieso an

Enthalten technische Daten (Browser-Daten, Beriebssystem) und Verhaltens-Daten (Referrer, woher kamen die Nutzer).

Es gibt viele Software-Pakete, mit denen man Log-Dateien bearbeiten und statistisch zugänglich machen kann.

Kontra:

Daten nicht in Echtzeit auswertbar.

Zählweise unsicher, mal werden zu viele, dann wieder zu wenige Nutzer gezählt.

Mehre Nutzer, die hinter einer Firewall sind, werden als ein Nutzer gezählt

Caching verzerrt die Ergebnisse, es kommen nicht alle Anfragen auch wirklich beim Server an und werden deshalb auch nicht gezählt.

Nutzer, die im Browser die Schaltflächen "Vorwärts" und "Zurück" klicken, werden nicht korrekt erfasst.

Wechselnde IP-Adressen erschweren die Zuordnung von Sitzungen zu einzelnen Nutzern.´

Nicht menschlicher Datenverkehr von Robots und Spidern wird mitgezählt. Wenn sich die Robots nicht korrekt beim Server identifizieren, ist dieser Datenverkehr fast nicht auszufiltern.

Ihre eigenen Aufrufe werden ebenfalls mitgezählt. Wenn sie auf Ihr Angebot mit einer statischen IP-Adresse zugreifen, lässt sich dieser Datenverkahr relativ leicht ausfiltern.

Wenn Ihre Site erfolgreich ist, werden die Log-Dateien riesig. Sie brauchen dann eine ausgefeilte Logistik und leistungsstarke Rechner, um die Dateien halbwegs zügig auszuwerten.

Komplexe dynamische Web-Sites mit verschiedenen Servern, die sich über diverse Domains und Sub-Domains verteilen sind so praktisch nicht in den Griff zu kriegen.

5.2. Cookies
Ohne Cookies geht es nicht. Nur über Cookies lassen sich Browser eindeutig identifizieren. Mit Hilfe von Cookies lassen sich Sitzungen nachvollziehen, Nutzer eindeutig identifizieren (Erstbesuch vs. Erneuter Besuch). Ein ganz wichtiger Punkt beim Thema Cookies sind die Datenschutzrichtlinien. Sie sammeln Nutzerdaten und sollten deshalb über klar formulierte Datenschutzrichtlinien verfügen, die auch einer rechtlichen Überprüfung standhalten. Nutzer sind mittlerweile recht aufgeklärt, was Cookies angeht, viele Browser erlauben das Cookie-Management und weisen den Nutzer daraufhin, wenn eine Site einen Cookie speichern will. Es gilt die Balance zu finden zwischen Datensammeln und Nutzer verärgern, denn ein Nutzer, der es Ihrer Site nicht gestattet irgendwelche Cookies zu setzen, ist weniger wert, als wenn Sie durch Selbstbeschränkung vielleicht weniger Informationen pro Besucher erhalten, dafür aber prozentual mehr Nutzer das Cookie-Setzen gestatten.

5.3. Tracking via JavaScript
Mit Web-Beans - von Kritikern auch Web-Bugs genannt - gespickte Seiten sind der neueste Trend im Web-Anlytics-Sektor. Vorteile hier: Sie als Site-Betreiber müssen nur einige kleine JavaScript-Schnipsel in Ihre Site implementieren, den Rest übernimmt ein spezialisierter Dienstleister. Sie müssen sich nicht mit zusätzlichen Kosten für Hard- und Software aufbürden, sondern mieten einfach was sie brauchen. Die Statistiken werden rufen Sie mit dem Browser ab, bzw. laden sie im Excel-freundlichen Format auf die heimische Festplatte. Außerdem sind diese JavaScripten sehr robust gegenüber Zählfehlern, die auf Cashing beruhen.

Vorteile:

Daten liegen in Echtzeit vor.

Komplexe Sites, mit mehreren Domains/Sub-Domains und dynamischen URLs lassen sich so gut tracken.

HTML-E-Mails sind ebenfalls zählbar.

Zusätzliche technische Informationen wie Bildschirmauflösung lassen sich ebenfalls erfassen.

Nachteile:

Funktioniert nur, wenn die Nutzer JavaScript aktiviert haben, über 97% aller Nutzer haben das aber.

Datenschutz: Der Nutzer besucht Ihre Site, seine Daten werden aber - ohne sein Wissen - von einem Dritten erfasst, gespeichert und ausgewertet.

Outsourcing-Kosten fallen an. Die JavaScripten müssen auf allen Seiten einer Web-Site, die getrackt werden sollen eingebaut werden. Bei großen Sites kann das sehr arbeitsintensiv werden.

Performance-Probleme beim Dienstleister schlagen auf die eigene Site durch.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Programmierung von Medienprodukten

Bewertung:

Bisher keine Bewertung

Cookies mit PHP

Was sind Cookies?
Cookies sind Datensätze, die von einem Webserver auf dem Computer des Nutzers abgelegt werden.

Funktionsweise von Cookies:
Sie werden bei einer erneuten Verbindung an den Cookie-setzende Webserver mit dem Ziel zurückgesendet, den Nutzer und seine Einstellungen wiederzuerkennen.

Arten von Cookies
Sessions Cookies (zeitlich begrenzt) und dauerhafte Cookies (persistente Cookies).

Cookies von Drittanbietern
Einige Cookies werden möglicherweise von einem anderen Anbieter auf Nutzers Gerät platziert. Diese Cookies werden als Drittanbieter-Cookies bezeichnet. Dies können auch Session- und Persistent-Cookies sein.

z.B. soziale Netzwerke, Werbe-Partner, eingebette Inhalte.

Diese konnten allerdings problematisch sein, da Werbefirmen ein großes Interesse daran haben, Nutzer so gut wie möglich zu kennen, um beispielsweise gezielt Werbung oder Produkttipps einblenden zu können. Hierfür werden detaillierte Nutzerprofile erstellt, bei denen im Laufe der Zeit eine Menge Daten zusammen getragen werden und die Vorlieben von Nutzerinnen und Nutzern sehr genau bekannt sind.

Schnipsel - Cookies mit PHP
Gesetzt wird das Cookie über setcookie. Benötigte Angaben sind der Cookiename, sowie ein Wert des Cookies. Ebenfalls ratsam ist eine Gültigkeitsdauer (ansonsten wird es nach dem Schließen des Browsers gelöscht).

<?php setcookie("beispiel_cookie", "Werte",time()+3600); ?>

Damit wird ein Cookie mit dem Namen beispiel_cookie gesetzt, dass als Wert das Wort "Werte" enthält und eine Stunde gültig ist. Wichtig ist, dass vor dem Setzen des Cookies kein anderer Code ausgegeben werden darf, der in der Datei angezeigt wird. Also keine Leerzeile, kein Leerzeichen oder sonst nichts. Möglich sind hingegen reine Code-Zeilen ohne Ausgabe (also z. B. eine Abfrage, um den gewünschten Wert festzulegen).

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Datenbankzugriff mit PHP

siehe http://code.arnoldbodeschule.de/ und http://www.selfphp.de/

Anleitung für das Wiki

Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (https://mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2018) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Digitale Veröffentlichung

Als Online-Publikationen oder Netzpublikationen bezeichnet man elektronische Publikationen, die nicht auf einem physischen Datenträger, sondern über das Internet oder ein lokales Netzwerk (z. B. in Unternehmen) angeboten werden.

Erscheinungsformen
Beispiele für Netzpublikationen sind Internet-Zeitungen, E-Mail-Newsletter, Elektronische Zeitschriften, Wikis, Weblogs, E-Books, Information Retrievals oder auch Datenbanken und allgemein Webseiten. Es darf sich jedoch nicht um reine Ansammlungen von Dateien, sondern muss sich um logische und konsistente Einheiten handeln, die sich mit Metadaten (Autor, Titel, Veröffentlichungsdatum etc.) beschreiben lassen. Unabhängig davon lassen sich auch andere im Internet verfügbare Daten als publiziert bezeichnen.

Unterschieden wird dabei zwischen webspezifischen Netzpublikationen mit typischen Eigenschaften von Webseiten wie Suchfeldern, Links oder auch Datenbanken einerseits und druckbildähnlichen Publikationen andererseits, die dem „look and feel“ eines gedruckten Artikels entsprechen. Letztere werden im Internet meist in Form einer Datei im Portable Document Format (PDF) veröffentlicht.

Archivierung
Aufgrund der Flüchtigkeit des Mediums und des schnellen technischen Wandels ist das Problem der Langzeitarchivierung ungelöst. Grundsätzlich lassen sich zwei Kategorien von Lösungsansätzen unterscheiden. Zum einen wird das Netz bzw. Teile davon mit Hilfe von Software automatisiert archiviert (z. B. Internet Archive), zum anderen werden die Netzpublikationen von den Verlegern aktiv in einem Archiv abgelegt. Beispielsweise trat in Deutschland am 29. Juni 2006 das „Gesetz über die Deutsche Nationalbibliothek“ in Kraft, durch das der Aufgabenbereich der Deutschen Nationalbibliothek auf das Archivieren von Netzpublikationen ausgedehnt wurde. Da mit den URIs (URI: Uniform Resource Identifier) die Ressource der Netzpublikationen identifiziert wird, nicht aber die Netzpublikation selbst, und der langfristige Bestand einer URI im Allgemeinen nicht sichergestellt werden kann, stellt sich die Herausforderung, die Netzpublikation selbst (eindeutig und dauerhaft) zu identifizieren. Aufbauend auf dem ISBN-System der klassischen Buchpublikationen haben sich dabei der vornehmlich kommerziell genutzte Digital Object Identifier (DOI) sowie der nichtkommerzielle Society Reference Catalogue (SRef) etabliert, desgleichen der Persistent Uniform Resource Locator (PURL) und der Uniform Resource Name (URN) als weitere persistent identifier.

Impressumspflicht
Ein weiteres Problem, das sich bei Netzpublikationen stärker als bei herkömmlichen Publikationen stellt, ist, dass sich ihre Herausgeber und Urheber nicht immer einfach feststellen lassen. In Deutschland müssen Websites deshalb analog zum Impressum gemäß Telemediengesetz eine verantwortliche Person benennen und weitere Angaben machen.

Personalisierter Zugang
Für die Nutzung kommerzieller Netzpublikationen, wie beispielsweise Elektronische Zeitschriften und Datenbanken, wird in der Regel ein Benutzerkonto (Account) benötigt, über das anfallende Kosten abgerechnet werden. Die Zugangskontrolle kann über ein Kennwort und eine Beschränkung von IP-Adressen erreicht werden.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Dynamische Website

STATISCHE SEITE:

Wird z.B. ein Währungsumrechner mit Javascript so realisiert, dass die Kurse im HTML-Dokument (statisch) abgelegt sind, dann braucht der Server lediglich die Seite zu liefern, so wie sie als Datei auf dem Server liegt.

Der User kann nun unterschiedliche Beträge in unterschiedliche Währngen umrechnen lassen. Es findet also clientseitig eine Interaktion statt. Der User sieht wechselde Zahlen, vielleicht auch wechselnde Bildchen (Flaggen, Münzen ..) - aber es bleibt eine STATISCHE Seite.

DYNAMISCHE SEITE:

Wird der Währungsrechner so realisiert, daß er (z.B. mit PHP) die aktuellen Tageskurse ermittelt (z.B. mit einer Datenbankabfrage) und daraus die Seite generiert, dann ist die Währungsumrechner-Seite eine dynamische Seite.

BTW: Der Browser bekommt immer HTML geliefert. Er "weiss nicht", ob die Seite fertig (statisch) auf dem Server herumlag und nur weitergereicht wurde, oder ob sie für die aktuelle Anfrage (dynamisch) erzeugt wurde.

Weiterführende Links

http://cms.greatstuff.at/webdesign_vergleich_dynamische_statische.html

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 3.5 (2 Stimmen)

Dynamische Websites

Anleitung für das Wiki

In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungs-Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (https://mediencommunity.de/lerngruppe-mediengestalter-winter-2020) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Um mal einen Anfang zu machen...

Hier mal vollkommen unsortiert zusammenkopiert, dass, was ich bisher dazu im weltweiten Web und älteren Versionen von Lernseiten der Mediencommunity gefunden hab. Ich übernehme keinen Anspruch auf Vollstuandigkeit oder Richtigkeit. Etwas, das defintiv noch fehlt, ist noch genauer darauf einzugehen, inweit sich serverseitig und clientseitiges CMS genau unterscheiden. Das werd ich jetzt nochmal recherchieren.

Was sind die Vor- und Nachteile?

Vorteile

Trennung von Inhalt und Layout
Dadurch ist es möglich, dass jemand der selbst weder gut gestalten noch programmieren kann, dennoch die Inhalte eines Web-Auftritts verwaltet. Somit kann sich eine Person, die sich mit dem jeweiligen Inhalt auskennt direkt darum kümmern anstatt einen Umweg über eine Agentur gehen zu müssen oder eine unprofessionelle Gestaltung abzuliefern.

Keine Vorkenntnisse nötig
Auf Seiten des Enduser sind keine speziellen Vorkenntnisse von bspw. Programmierung, HTML oder XML notwendig. Die Bedienung läuft für ihn vollkommen ohne Hintergrundwissen über diese Technologien.

Gleichzeitiges Arbeiten mehrerer Personen
Ein gemeinsames Arbeiten an einem Online-Projekt ist theorethisch von jedem Ort mit einem Internetzugang aus möglich.

Rechteverwaltung
In einem CMS können verschiedenen Nutzern verschiedene Rechte zugeteilt werden und quasi eine Rollenvergabe durchgeführt werden. Der Administrator hat somit Zugriffsrecht auf alle Bereiche, wogegen eine Redakteur, der sich um die Aktualität der News kümmern soll, nur für diesen Abschnitt Schreibrechte erhält.

Medienneutrale Datenhaltung möglich
In vielen CMS können die Inhalte in andere Dateiformate wie z.B. PDF sehr leicht überführt werden, da die Formate zur Laufzeit „live“ aus der Datenbank heraus generiert werden.

Nachteile

Zu wenig Freiraum
Durch die Festlegung des Layouts wird zum Einen eine (gewollte) Einheitlichkeit der Interseite erreicht, zum Anderen aber wiederum ein sehr starres, möglicherweise unflexibles Gerüst angelegt. Freiräume in der individuellen Gestaltung sind oft nur wenig vorhanden. Je nach Komplexität des Systems sind Änderungen am Layout nur mit unverhältnismäßig hohem Aufwand möglich.

Hohe technische Anforderungen an den Webspace
Für den Betrieb eines serverseitigen CMS sind Skriptsprachen wie ASP/PHP auf dem Webspace zwingend erforderlich um einen dynamischen Seitenaufbau zu ermöglichen. Die meisten gängigen CMS benötigen auch eine Datenbankschnittstelle. Dadurch entstehen höhere Kosten als durch einen statischen Webspace.

Oft für Laien trotzdem noch zu kompliziert
Bei vielen der verbreiteten CMS ist der Funktionsumfang mittlerweile derart groß, dass schon wieder Schulungen für die letztendlichen Administratoren erfolgen müssen.

quelle: vor/nachteile cms -> http://www.christian-pansch.de

Wann ist es sinnvoll eine CMS zu verwenden?

Es gibt verschiedene Aspekte, die für die Verwendung eines CMS sprechen

Gibt es schnell und häufig wechselnden Content?
Gibt es mehrere Autoren, die unabhängig von einander und zeitgleich Content erstellen?
Menschen, die Inhalte einpflegen müssen keine HTML, CSS oder PHP-Kennntisse haben. Grundkenntnisse der Internetnutzungs und die grobe Kenntnis von Office-Programmen reicht aus
Da nur der Content bearbeitet wird, gibt es keine Veränderungen am Design und damit wird eine ästehtische Konsistenz gewährleistet.
Verschiedene Autoren können unterschiedliche Rechte zu gewiesen bekommen, zum Beispiel, dass Autor X nur für Thema X schreiben darf.

Server und Client (Zusammenfassung Wikipedia)

Serverseitige CMS

benötigt serverseitige Programmiersprache, die in Verbindung mit einer Datenbank steht
Datenbank ist entweder auf dem selben Server oder mit einem oder mehreren im lokalen Netzwerk installiert
Daten können weltweit verwaltet werden
benutzerspezifische Berechtigungen
der für die Endbenutzer sichtbare Bereich wird als Frontend bezeichnet
das Backend ist der durch einen Login geschützte Bereich, in dem die Administration der Seite erfolgt
für Webseiten jeglicher Größe geeignet
Abhängigkeit von der serverseitig bereitstehenden Rechenkapazität und bei hoher Frequentierung nur bedingt geeignet

Clientseitige CMS

Programm wird auf dem Rechner installiert und steuert das CMS
Daten werden auf den Server hochgeladen
serverseitige Programmiersprache ist nicht notwendig
bieten oft Layoutfunktionen, mit denen einige Seitentypen (Templates erstellt werden können)

Dynamik & Statik (Zusammenfassung Wikipedia)
--> Art der Anlieferung an den Nutzer

Volldynamische Systeme
-->erzeugen angeforderte Seiten bei jedem Aufruf dynamisch neu

Vorteile:

Seite immer aktuell
Personalisierung für den Nutzer sehr einfach oder bereits vorhanden

Nachteile:

Berechnung kann unter Last zu einer verzögerten Auslieferung der Seiten oder bei mangelhafter Ausstattung an Rechenkapazität im Verhältnis zur Anzahl gleichzeitig bedienter Nutzer zur Serverüberlastung und zum Systemstillstand führen.

Statische Systeme

legen jede Webseite statisch in einer Datenbank oder im Dateisystem ab
Inhalte werden fertig generiert z.B. als HTML-Dateien abgespeichert und können bei einem Aufruf unmittelbar übertragen werden. Das spart Serverzeit bei der Ausgabe aber nicht bei der Pflege.

Hybride Systeme

Kombination von volldynamischer und statischer Seitenerzeugung
nur Inhalte, die dynamisch aus einer Datenbank generiert werden müssen (News, Suchabfragen, Shopdaten) werden zur Laufzeit aus der Datenbank ausgelesen
Seitengerüst, Navigation, bestimmte Texte und Bilder liegen statisch vor

Halbstatische Systeme

generieren den Inhalt so, dass dieser statisch und dynamisch ist, d.h. es werden alle Daten direkt in statisch generierten Daten gespeichert, die dann bei Abruf sofort ausgegeben werden
die dynamischen Inhalte werden dann generiert, wenn ein Code in die Datei eingebunden wird oder einzelne Datensätze geändert/ neu angelegt werden

In der Regel basieren dynamische Websites auf dem Datenbanksystem MySQL und den Programmiersprachen Perl, PHP oder Ruby. Eine Untergattung von dynamischen Webseiten sind JavaScript-basierte Websites, wo die Dynamik der Webseite nicht auf dem Server (wie bei üblichen dynamischen Websites), sondern auf dem Client-Rechner statfindet. Der technische Unterschied findet sich hierbei in der Tatsache, dass die gesamte statische Website samt statischem JavaScript-Code auf dem Client-Rechner geladen wird und dort erst zur dynamischen Ausführung gelangt. Somit ist die Dynamik hierbei im Prinzip nur optischer Natur, da ja die Technik statisch ist.

Was sind dynamische Inhalte?

Dynamische Inhalte sind Texte, Bilder, Grafiken aber auch Videos, welche in eine bestehende Struktur eingebunden werden können. Dazu werden Sie aus einer Datenbank oder anderen externen Quelle abgerufen. Auf diese Weise können auch Inhalte externer Dienste eingebunden werden. Zum Beispiel kann man Wetterberichte, Börsenkurse und Sportergebnisse auf diese Weise aktuell präsentieren.

Unabhängig von Programmierkenntnissen können sich dynamische Seiten selbst aktualisieren, da Sie in eine vorgegebene Struktur die Inhalte einfügen. Dieser Vorgang findet automatisch statt. Hat der Betreiber der Website im Backend ein Modul, also Text oder Bild geändert wird dieses einfach neu eingebunden. Tiefergehende Kenntnisse in HTML oder Programmiersprachen sind nicht nötig.

Außerdem können technische Strukturen und Daten der Website und Inhalte getrennt voneinander gespeichert werden.

Zuerst wurden dynamische Webseiten direkt mit Programmiersprachen wie Perl, PHP oder ASP geschrieben. Insbesondere PHP und ASP, verwenden einen „Vorlagen“-Ansatz, bei dem eine serverseitige Seite der Struktur der fertiggestellten clientseitigen Seite ähnelte und Daten an Stellen eingefügt wurden, die vordefiniert waren. Dies war ein schnelleres Mittel der Entwicklung als das Codieren in einer rein prozeduralen Codiersprache wie Perl.

Vorteile statischer Seiten:

Die Vorteile einer statischen Website bestehen darin, dass sie einfacher zu hosten sind. Die Server stellen nur statische Inhalte bereit und müssen keine serverseitigen Skripts ausführen. Dies erfordert weniger Serveradministration und dadurch ist die Chance das Sicherheitslücken entstehen kleiner. Ein weiterer Vorteil sind schnellere Ladezeiten und Serverhardware muss nicht so fortschrittlich und teuer sein, wie bei dynamischen Websites. Günstiges Web-Hosting ist mit der Zeit immer mehr erweitert wurden, um auch dynamische Funktionen anzubieten. Dadurch ist dieser Vorteil von statischen Websites immer weniger von Bedeutung. Virtuelle Server bieten hohe Leistung für kurze Intervalle bei geringen Kosten.
Fast alle Websites haben einige statische Inhalte. Unterstützende Elemente wie Bilder und Stylesheets sind immer statisch, selbst bei Websites mit hoch dynamischen Seiten.

Die Vorteile statischer Webseiten

schnell zu entwickeln
schnell zu ändern
preiswert zu hosten

Die Nachteile statischer Webseiten

eine Seite zu aktualisieren erfordert spezielle Kenntnisse
für Benutzer kann die Seite weniger nützlich sein
der Inhalt kann überholt sein

Die Vorteile dynamischer Webseiten

bieten eine hohe Funktionalität
einfach zu aktualisieren
neue Inhalte bringen Besucher zurück
dynamische Seiten helfen den Suchmaschinen
Zusammenarbeit mir anderen Benutzern oder Seiten möglich

Die Nachteile dynamischer Webseiten

schwieriger und teurer in der Entwicklung
Hosting ist etwas teurer

dynamische Webseiten-Funktionen können sein:

Content-Management-Systeme
E-Commerce-Systeme
Blogs- und Diskussionsforen
Intranet- oder Extranet-Funktionen
die Möglichkeit für Kunden oder Benutzer Dokumente hochzuladen
die Möglichkeit für Administratoren oder Benutzer Inhalte zu erstellen
Informationen hinzuzufügen (dynamisches Publizieren).

Statische Webseiten verwenden nur Client-seitigen HTML- und CSS-Code, während dynamische Websites sowohl Client-seitige als auch Server-seitige Skriptsprachen wie JavaScript, PHP oder ASP benutzen. Wenn ein Benutzer auf eine dynamische Website zugreift, kann die Website durch Code geändert werden, der im Browser oder auf dem Server ausgeführt wird. Als Ergebnis wird die neue Seite im Webbrowser angezeigt. Auch dynamische Webseiten basieren auf HTML und CSS. Damit diese Seiten funktionieren ist Server-seitiges Scripting erforderlich. Die HTML-Codierung wird zum Erstellen der grundlegenden Designelemente verwendet, während Server-seitige Sprachen zum Verwalten von Ereignissen und Steuern von Aktionen verwendet werden, die auf der dynamischen Seite auftreten können. Um dynamische Webseiten zu generieren, verwenden diese Webseiten eine Kombination aus Server-seitigem und Client-seitigem Scripting. Client-seitiges Scripting bezieht sich auf Code, der vom Browser ausgeführt wird, normalerweise mit HTML und JavaScript. Bei dieser Art Scripting können Webseiten für den Betrachter geändert werden ohne dass die Seite neu übertragen und geladen werden muss. Im Gegensatz dazu bezieht sich Server-seitiges Scripting auf Code, der vom Server ausgeführt wird, bevor der neue Inhalt an den Browser des Benutzers gesendet wird. Die Entwicklung dynamischer Seiten kann anfangs teurer sein, aber die Vorteile sind zahlreich. Grundsätzlich kann eine dynamische Webseite dem Besitzer die Möglichkeit geben, die gesamte Website einfach zu aktualisieren und neue Inhalte hinzuzufügen. So könne zum Beispiel Nachrichten und Ereignisse über eine einfache Browser-Oberfläche auf der Website veröffentlicht werden. Die Merkmale einer dynamischen Webseite ist nur durch die Vorstellungskraft der Entwickler begrenzt.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

CMS

dynamische Webseiten

Bewertung:

Bisher keine Bewertung

Zurück zum Fachpraktiker-Wiki

E-Book

Einführung E-Books im PDF-Format

Bücher nicht in gedruckter Form, sondern als PDF-Datei zu nutzen, bietet dem Leser und dem Autoren viele Vorteile:

Zusatzfunktionen wie z.B. Lesezeichen und Kommentarfunktion
Größe der Seite kann angepasst werden
Interaktive Inhalte (z.B. Video, Sound oder Links)
Suchfunktion

Das PDF-Format wird häufig für Fachliteratur verwendet.

Formate

PDF: Insbesondere als Fachbuchformat für die Betrachtung am PC, da komplexe Grafiken und Bilder gut dargstellt werden können.

ePUB: Überwiegend bei textlastigen Werken für mobile Endgeräte (Tablets, Kindl und andere eBook-Reader). Wurde 2007 entwickelt und wird von den meisten Verlagen und Lesegeräten unterstützt. Es basiert auf XML.

Kindle: Amazon isoliert sich mit seinem proprietären Format, da dieses nicht von anderen Lesegeräten dargestellt werden kann. Außerdem verbietet Amazon anderen Marktanbietern Werke im Kindle-Format zu veröffentlichen.

E-Book-Markt

Google Books
Sony
Amazon
Libreka

Adobe Digital Edition

Adobe Digital Editions ist eine intuitive und leicht nutzbare Anwendung für den Erwerb, die Verwaltung und die Anzeige von eBooks und weiteren digitalen Publikationen.

Adobe Digital Editions, Adobe Reader und Adobe Acrobat

Adobe Reader ist der Standard für die Anzeige und den Druck von PDF-Dokumenten. Er unterstützt aber auch viele zusätzliche Workflows, die über die Nutzung von eBooks und anderen kommerziell veröffentlichten Inhalten hinausgehen, wie etwa interaktive Formulare und digitale Signaturen. Aufgrund der umfassenden Funktionalität, Komplexität und Größe von Adobe Reader ist dieses Programm für das einfache Lesen von eBooks wenig geeignet.

Adobe Acrobat ist eine kostenpflichtige Weiterführung des Adobe Readers und dient vorallem zum Erstellen und Bearbeiten von PDF-Dokumenten. Das Programm ist nicht für das Lesen von eBooks geeignet und dafür auch viel zu teuer.

Adobe Digital Editions ist ein schlankes Anzeigeprogramm für Mac und Windows, das für einen ganz bestimmten Zweck entwickelt wurde: Es erweitert die eBook-Funktionalität der früheren Versionen von Reader und Acrobat und stellt Anwendern eine übersichtliche und intuitive Leseumgebung zur Verfügung.

Calibre

Das Exportieren von ePUB-Dateien aus InDesign funktioniert zur Zeit nur sehr eingestränkt. Eine bessere Lösung bietet das kostenlose Programm „Calibre“.

Es handelt sich um eine eBook-Management-Lösung, die Bibliotheks-, Konvertierungs- und Darstellungsfunktionen übernehmen kann.

Die Verwaltung der Titel ermöglicht eine umfangreiche Sortierung nach unterschiedlichen Kriterien:
Titel, Autor, Erscheinungstermin, Verlag, Bewertung, Format, Buchreihe und Etiketten.

Konvertierung

Die Hauptfunktion von Calibre ist die Konvertierung von einem eBook-Format in ein anderes.

Eingabeformate: CBZ, CBR, CBC, ePUB, FB2, HTML, LIT, LRF, MOBI, ODT, PDF, PRC, PDB, PML, RB, RTF, TCR und TXT.

Ausgabeformate: ePUB, FB2, OEB, LIT, LRF, MOBI, PDB, PML, RB, PDF, TCR und TXT.

Der sicherste Weg der Konvertierung ist das Erstellen einer PDF-Datei im Quellprogramm (z.B. InDesign). Diese Eingabedatei dient dann als Grunddatei für die weiteren Konvertierungen.

Wichtig ist die Eingabe der Metadaten, da nach diesen Informationen das eBook später gesucht und gefunden wird. Wenn hier keine oder zu wenig Informationen zur Verfügung gestellt werden, ist das Buch nicht oder nur schwer auffindbar.

Übertragung an den Reader

Ist ein eBook fertig erstellt, muss dieses auf den Reader übertragen werden. Hierzu sind prinzipiell zwei Übertragungsvarianten möglich:

Übertragung an den Hauptspeicher
Übertragung an eine Speicherkarte

Gestaltungsgrundsätze

Zur Zeit werde viele eBooks im PDF-Format als reales Abbild eines gedruckten Werkes vertrieben. Die Seitengestaltung dieser eBooks orientiert sich an der klassischen Buchgestaltung. Bilder, Grafiken und Texte sind nach buchtypografischen Regeln angeordnet und dienen im gedruckten Buch der Unterstützung einer guten Lesbarkeit. Derartige Gestaltungsansätze unterstützen nicht die gute Lesbarkeit auf dem kleinen Monitor eines eBooks.

Wichtige Kriterien

Wahl einer geeigneten Monitorschrift (Serifenlos)
Heller Schriftuntergrund (guter Kontrast zur Schriftfarbe)
Klare und logische Strukturierung des eBooks (Lesezeichen, Suchfunktion, interne und externe
Verlinkungen, ...)
Die Satzbreite muss auf gängige Monitorgrößen angepasst werden

Quelle: Kompendium

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
Zusammenfassung E-Book	191.03 KB

Bewertung:

Durchschnitt: 4.4 (9 Stimmen)

Formularauswertung Javascript-Funktion

Formulare kann man grundsätzlich auf dreierlei Art auswerten, nämlich clientseitig, serverseitig und mit einer Kombination beider Möglichkeiten. Bei der clientseitigen Auswertung kommt in der Regel Javascript zum Einsatz, auf der Serverseite beispielsweise PHP, ASP oder Perl.

Wir wollen uns hier mit der JavaScript Auswertung befassen.

Ich denke, dass es sch bei diesem Themenfeld um JavaScript- Validierung von Formularen handelt, da Auswertung keinen Sinn macht. Man hat nur EINEN JavaScript-Datensatz und wie will man einen einzelnen Datensatz auswerten?

Formulare werden auf Webseiten meist mit HTML gecoded. (Formulare sind Eingabefelder wie bei Kontaktaufnahme etc. auf Webseiten.)

JavaScript hilft nun bei der Validierung, d.h. Prüfung. In dem Fall von Formularen kann JavaScript prüfen, ob alle Felder generell richtig ausgefüllt sind. Das heißt, Javascript checkt, ob im "Telefonnummer"-Feld tatsächlich nur Zahlen stehen, ob die Mailadresse nur im Format XX@XX.XX eingegeben ist, ob ein Pflichtfeld vielleciht leer gelassen wurde usw.

Ist das nicht der Fall, wird je nach dem ein Error ausgegeben. (z.B. das Feld wird rot und oben drüber steht "bitte geben Sie ihre Telefonnummer korrekt an")

Die Vorteile der JS- Validierung von Formularen:

Die Validierung ist sehr angenehm für den Benutzer, da dieser sofort Fehler sieht und es so bei der weiteren Verarbeitung keine unvorhergesehenen Fehler gibt
Dank der Überprüfung der Daten vor dem Abschicken wird dafür gesorgt, dass der Server nur anfragen erhält, die erstmal korrekt sind. Somit wird die Serverbelastung minimiert.

Die Nachteile der JS-Validierung von Formularen:

Die Validierung durch JS ist sehr einfach durch den Nutzer zu umgehen. Er kann einfach die JS-Funktion seines Browsers ausstellen und die Eingaben werden nicht mehr überprüft. Somit muss dann der Server die Überprüfung übernehmen (wir erinnern uns: JS= Clientseitig), womit dieser wieder belastet wird und sich doppelte Arbeit gemacht wird.
Es könnte sein, dass bestimmte Browser JavaScript nicht interpretieren können und es dadurch zu Fehlern kommt. (Eigentlich kann mitlerweile jeder Browser JS)

Modulare Validierung mit JavaScript

Man kann das Script, dass für die Validierung verantwortlich ist, in verschiedene Module einteilen, was für Flexibilität sorgt. Man kann beispielsweise einzelne Module ändern, und muss nicht jedesmal ein neues Script schreiben.

Was leistet das Script?

Ich bin hier mal so frei und Kopiere eine Tabelle aus SelfHtml.org (mehr im Quellenverzeichnis)

"Neben den Standardtests beherrscht das Script auch einige außergewöhnliche Aufgaben. Im Einzelnen kann es

überprüfen, ob ein Feld leer ist,
einen Wert daraufhin überprüfen, ob er eine Zahl ist, auch Dezimalzahlen mit Punkt oder Komma,
eine Emailadresse auf die korrekte Syntax überprüfen,
anhand eines regulären Ausdrucks feststellen, ob ein Wert auf ein bestimmtes Muster passt,
feststellen, ob ein Wert, der einen Preis darstellen soll, in der Form € 10,00 angelegt ist und ihn ggf. korrigieren,
bei Namen auf die korrekte Klein-/Großschreibung achten und diese ggf. korrigieren."

Wie bereits oben schon einmal kurz erwähnt.

Konfiguration

(auch wieder Copy&Paste, besser könnte ich es nicht ausdrücken) Ich weiß nicht, ob die Prüfung tatsächlich so tief in das Thema eingehen könnte, allerdings denke ich, es kann nciht schaden mehr zu wissen)

Die Funktion erwartet drei Parameter:

die Form, die validiert werden soll (sender), thisist in der Regel die richtige Wahl,
ein Array mit den Elementen, die validiert werden sollen (myarray), sowie Informationen darüber, was jeweils geprüft werden soll und die entsprechende Fehlermeldung,
optional eine Überschrift für die Fehlermeldung (err_hd).

Wird der Parameter err_hdnicht gesetzt, lautet die Standardüberschrift "Folgende Fehler sind aufgetreten:".

Quellen:

http://aktuell.de.selfhtml.org/artikel/javascript/formkontrolle/
Der Kopf meines Ausbilders

Wenn jemand Korrekturen oder Ergänzungen hat, bitte ich darum, diese hier zu ergänzen.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Bewertung:

Bisher keine Bewertung

Greenscreen

Warum Greenscreen:

grün als Farbe hebt sich deutlich von Hauttönen ab
special effects können mehr oder weniger kostengünstig eingesetzt werden (je nach Aufwand)
Szenenwechsel/Ortswechsel kostengünstig möglich

Alternative zum Greenscreen = Bluescreen

jedoch oft zu dunkel und mit Bildrauschen verbunden
Umsetzung schwieriger

Arten von Greenscreen

grüne Papierrolle

suboptimal da reflektierend
zerknittert schnell (zerstört den Effekt)

grüner Stoff

besser geeignet
lichtdurchsichtigen Stoff verwenden
Falten beseitigen (Wasser, Bügeleisen)

Ausleuchtung

softes Licht
flächendeckend ausleuchten
Führungslicht, Spitzlicht, optional: Füll-Licht (3-Punkt-Ausleuchtung)
Licht muss der Szene angepasst werden, welche sich im Hintergrund abspielen soll
Darsteller*in entsprechend ausleuchten (kein Schatten auf Greenscreen werden, der Szene angepasst)

Kleidung

glänzende/spiegelnde Oberflächen vermeiden
nichts grünes anziehen

Filmische Einstellung

kein Motion-Blur (sonst wird Freistellung schwierig)
auf schärfe der Bilder achten
kurze Belichtungszeit ( ergo viel Licht im Studio)

Software

Adobe After Effects ("Chroma Keying")

Sonstiges

Räumlichkeit betonen (Licht/Schatten)
Person mit ausreichend Abstand vor dem Hintergrund platzieren

Chroma Keying

visueller Effekt für postproduction
Hintergründe werden ausgetauscht
bestimmte Farbbereiche werden freigestellt (hier: grün)
"live-keying" = visuelle Effekte in Echtzeit (z.B. Wetterbericht, Nachrichtensendungen)

Quelle: https://www.youtube.com/watch?v=quuUF-FgCtc

______________________

last edited 12/22

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

HTML

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Bildformate im Web

JPG / JPEG (Joint Photographic Experts Group)

Geeignet für: Fotos, Verläufe

Das JPG-Format kann bis zu 16,7 Millionen Farben darstellen und arbeitet mit einer verlustbehafteten (lossy) Kompression. Da die Kompression zu Kantenunschärfe führt, ist diese Format nicht für Bilder mit harten Kanten – wie zum Beispiel Vektorgrafiken – geeignet.
JPGs können in unterschiedlicher Qualität abgepeichert werden. 100% gibt dabei die maximale Qualität an, was aber nicht bedeutet, dass das Bild verlustfrei gespeichert wird.
Ein JPG kann auch als Progressives JPG gespeichert werden. Progressive JPGs setzten sich beim Ladevorgang anders als das normale JPG nicht zeilenweise zusammen, sondern erscheinen von Beginn an als ganzes, aber sehr unscharfes Bild, welches sich nach und nach scharf stellt.

PNG-24 (Portable Network Graphics, 24 Bit)

Geeignet für: transparente Grafiken, Verläufe

Das PNG-24-Format kann bis zu 16,7 Millionen Farben darstellen und unterstützt Transparenz einzelner Farben und Alphakanäle. Man unterscheidet 24-Bit PNGs und 8-Bit PNGs, wobei PNG-8 dem GIF-Format sehr nahe kommt und auch nur 256 Farben unterstützt. Des weiteren unterstützt PNG-8 genauso wie GIF lediglich eine 1bit-Transparenz, wohin gegen PNG-24 auch problemlos Halbtransparenzen darstellen kann. Zu beachten ist, dass der Internet Explorer bis zur Version 6 nicht in der Lage ist Halbtransparenzen zu vearbeiten und darzustellen. Die Kompression bei PNG ist verlustfrei (lossless). Wie beim Progressivem JPG ist ein schneller Aufbau eines Vorschaubildes in niedriger Auflösung möglich, indem man beim Speichern die Option Interlaced wählt.

GIF (Graphics Interchange Format)

Geeignet für: animierte Grafiken, transparente Grafiken, Logos, Bilder mit scharfen Kanten

Das GIF-Format unterstützt 256 Farben, mehrere Einzelbilder pro Datei und 1Bit-Transparenz. Die Kompression ist verlustfrei (lossless).
GIFs können als Interlaced gespeichert werden und unterstützen das sogenannte Dithering. Wie beim PNG-8 können hier weitere Einstellungen vorgenommen werden, wie zum Beispiel die Anzahl der Farben und die Kompressionsrate (Lossy).

Das GIF Format bietet heutzutage nur noch wenige Vorteile und wird immer mehr von PNG-8 und SWF abgelöst.

www.zfamedien.de/ausbildung/mediengestalter/tutorials/dictionary.php

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Bewertung:

Bisher keine Bewertung

Bilder in HTML

Dieses Wiki ist unterteilt in zwei kleine Bereiche. Den Bereich der Formataufbereitung und den Coding-Bereich.

Das richtige Format:
Einer der wesentlichen Aspekte bei einer Website ist die Ladegeschwindigkeit. Braucht eine Website besonders lange beim Laden der Inhalte, springen Nutzer:innen regelmäßig wieder ab. Läd eine Website besonders langsam, dann hat das negative Auswirkungen auf die Bounce Rate. Einer der Gründe warum eine Website langsam lädt, können Bilder sein. Deshalb versucht man beim befüllen einer Website Bilder zu verwenden, die zwar ansprechend in ihrer Qualität sind, aber gleichzeitig eine möglichst geringe Datengröße haben um die Ladegeschwindigkeit nicht negativ zu beeinflussen.

Deshalb sind die häufigsten Datenformate im Internet:
.jpg
.png
.svg
.gif
.WebP

Wann .jpg?
jpg ist ein Bildformat, welches besonders klein in der Größe ist, aber auch besonders Verlustbehaftet in der Qualität. Es wird peu a peu ersetzt durch das .WebP, hat aber noch besonders häufige Verwendung für statische Bilder ohne Transparenzen.

Wann .png?
.png ist ein Bildformat, welches Transparenzen speichern kann. Zusätzlich ist es in der Datenmenge kleiner bei wenigen, verschiedenen Farben als .jpg. Das ändert sich bei komplexeren Pixelwerten wie bspw. Fotos.

Wann .svg?
.svg ist der Industriestandart für Vektordarstellungen im Web. Also bei Logos. Die Datenmengen sind bei einem sauberen svg enorm gering.

Wann .gif?
.gif wird nur noch verwendet für Bewegtbilder mit enorm geringer Datenmenge. Bewegte Memes sind der häufigste Einsatzbereich.

Wann .WebP?
Quasi immer mittlerweile. WebP ist der neue Industriestandard geworden. Spätestens seit Safari 14 oder seit 2013, seit Mozilla Firefox das Format gängigerweise mit lesen kann. .WebP ist in seiner Kompression zwischen 25-34% stärker als das vergleichbare jpg, bei gleicher Qualität. Der Nachteil ist die Verabeitung auf dem Rechner außerhalb von Browsern oder Photoshop. Programme wie InDesign, XD oder Illustrator können das Format beispielsweise nicht lesen.

Die Einbettung des Bildes in html

Der html Code für die Einbettung eines Bildes ist recht simpel. Dazu soll uns folgendes Beispiel dienen:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Wie jeden Part eines html Codes müssen wir einen Befehl einschließen in unsere "größer als"-, "kleiner als"-Zeichen:
<>

Danach kommt unser Befehl:
img
das steht für image und sagt uns, dass gleich ein Bild folgen wird

Danach unsere Quelle:
src="img_girl.jpg"
das src steht für source, also Quelle. In Anführungszeichen steht die Benennung unserer Datei. Diese können wir quasi selbst wählen. Oftmals wird auch eine eigene Website referenziert. An der Endung .jpg erkennen wir das Datenformat.

Danach kommt unser alt Text:
alt="Girl in a jacket"
Das ist eine Beschreibung was auf dem Bild zu sehen ist. Diese Beschreibung brauchen wir für zwei Dinge. Zunächst schafft sie Barrierefreiheit und Personen mit einer Sehbehinderung können sich vorlesen lassen, was auf dem Bild zu sehen ist. Andererseits helfen wir mit einer alt-Beschreibung Suchmaschinen bei der Kategorisierung unserer Website. Eine Website die sauber mit alt Texten gefüllt ist, schneidet besser im Google Ranking ab.

Zuguterletzt beschreiben width="500" height="600" die Abmaßungen unseres implementierten Bildes, also 500x600px.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 3.8 (5 Stimmen)

Grafiken und HTML

Was vielleicht für den einen oder anderen hilfreich sein könnte (auch im Hinblick auf die praktische Prüfung):

Dateigrößen:

Man kann Grafiken zwar auch mittels css skalieren (vergrößern o. verkleinern), jedoch ist das der denkbar schlechteste Weg. Lieber die Grafiken in der gerade gebrauchten Größe ablegen und dafür, sollte man mehrere Größen benötigen, öfter als einmal.

Vergrößert man die Grafik via css, geht Qualität verloren. Ungünstig!

Nimmt man eine große Grafik und verkleinert sie via css, wird mehr Ladezeit gebraucht. Ebenso ungünstig!

Dateiformat:

Wie ja auch vorher schon erklärt wurde, muss man immer gut auswählen, welches Format jetzt grade sinnvoll ist. Man darf hierbei jedoch nicht nur die Qualität beachten, auch die Ladezeiten sind ein wichtiger Punkt. Webseiten nur mit JPEGs zu erstellen ist also im Hinblick auf die Qualität vielleicht eine naheliegende Idee, auf Grund der immensen Größe der Datei jedoch wieder ganz und gar nicht.

Theoretisch ist es ja immer ganz klar, welches Format man nun nehmen sollte. Und praktisch?

Die praktische Variante lässt sich am Besten mit Photoshop umsetzen. Ich habe mein Bild nun fertig und möchte es gerne für Web abspeichern. Welches Format eignet sich nun am Besten?

Einfachste Methode ist hier ein schlichter Vergleich. Über "Für Web speichern" sieht man links die Originaldatei und Rechts eine Vorschau für das gewählte Format. Praktischerweise kann man reinzoomen, um einen sehr guten Qualitätsvergleich machen zu können. Außerdem wird zugleich die Dateigröße sowohl vom Original als auch von der gewünschten Datei angezeigt. So kann man schrittweise ausloten, welches Dateiformat an dieser Stelle das sinnvollste ist.

Achtung: 20-fache Vergrößerung lohnt sich hierbei nicht wirklich, das menschliche Auge nimmt Veränderungen und Qualitätsverluste nur bis zu einem gewissen Grad wahr ;)

gif oder jpg?

Auch vom Motiv her kann man schon eine Vorentscheidung treffen. Gif eignet sich vor allem für flächige und technische Motive (Grafiken, Logos, etc.) und JPEGs sich für fotografische Motive oder Darstellung von Verläufen eignen.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Bewertung:

Bisher keine Bewertung

HTML-5-Struktur

header
umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.

nav
für Hauptnavigationsblöcke gedacht.

article
ist der Ort für die eigentlichen Inhalte der Seite. Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten. article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.

aside
beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.

footer
beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise. footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.

section
Entsprechend der Spezifikation des <article> Elements steht für eine weitere Untergliederung der textuellen Inhalte innerhalb des <article> Elements das <section> Element zur Verfügung. Die einzelnen Abschnitte eines Artikels lassen sich somit semantisch korrekt strukturieren.

Das wäre das Grundgerüst:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
...
</body>
</html>

Das wäre die Struktur:

<div id="doc">
  <header id="header">
    <h1>HTML5 Layout</h1>
    <nav>
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
  </header>
  <section id="content">
    <article>
      <h2>Artikel Überschrift</h2>
      <p>Lorum ipsum...</p>
    </article>
  </section>
  <aside>
    <h2>Sidebar</h2>
    <p>Lorum ipsum...</p>
  </aside>
  <footer>
    <a href="#">Impressum</a>
  </footer>
</div>

Weiterführende Links

http://www.html-seminar.de/html-5-strukturierende-elemente.htm

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (3 Stimmen)

HTML-DOM

Das Document Object Model (DOM) ordnet die Ansammlung von Objekten einer HTML-Seite in einer Objekthierarchie und legt darüber fest, wie die einzelnen Elemente z.B. über JavaScript angesprochen werde können.

Das DOM ist ein durch das W3C festgelegter Standard, der festlegt, wie Objekte durch Scriptsprachen angesprochen werden können. (Interface)

Objekte zeichnen sich durch Eigenschaften (durch Elemente und Attribute) und Fähigkeiten (Methoden: Funktionen, die im Bezug zu einem bestimmten Objekt stehen) aus.

Diese DOM eignet sich nun wohl optimal, um die Ziele eines "dynamischen HTMLs" umzusetzen:

Ziel ist, dass die Elemente einer Seite in ihrer Position und in ihrem Aussehen verändert werden können, ohne dass die Seite neu geladen werden muss.

W3C-Definition "Dynamisches HTML": Kombination aus einer Scriptsprache zur dynamischen Veränderung von Elemente sowie HTML und CSS.

Hierarchische DOM-Baumstruktur:

Diese besteht aus Knoten (folgend die wichtigsten):

Elementknoten (Element in HTML oder XML)
Attributknoten (Attribut in XML oder HTML)
Textknoten (Inhalt des Elements oder Attributs)
Kindknoten
assoziierte Knoten

Ein HTML-Dokument wird in eine hierarchische Knoten-Struktur gegliedert, so dass ein eingesetztes Script diesen "Baum" als Schnittpunkt erkennt und weiß, wie es die Elemente (Objekte) der Seite ansprechen soll...

siehe auch SelfHTML (http://de.selfhtml.org/dhtml/modelle/dom.htm)

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

HTML-Tabellen

Man kann in HTML Tabellen definieren, um tabellarische Daten darzustellen. Obwohl teilweise dafür genutzt, sollte man unbedingt auf die Layoutgestaltung mit Tabellen verzichten (siehe barrierefreies Webdesign).

Beispiel:

<table>
<tr>
<td>Print</td>
<td>Digital</td>
</tr>
</table>

Erläuterung

Wie in HTML üblich gibt es bei dem Tabellenaufbau einen Start- und einen End-Tag mit dem der Beginn und das Ende beim Auslesen der Datei beschrieben werden.

<table> Start-Tag
</table> End-Tag

Diese Tabelle hat normalerweise einen Rahmen (border), will man diesen unsichtbar machen muss man border="0" angeben. Möchte man einen dickeren Rahmen kann man natürlich auch Werte eingeben (1= normaler Rahmen, 2, 3, ...) Ohne Rahmen sähe es eingebunden dann folgendermaßen aus:

tr-Tag

<tr> leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Im Anschluss daran werden die Zellen (Spalten) der betreffenden Reihe definiert <td>Print</td> (td = table data = Tabellendaten). Am Ende einer Tabellenzeile wird ein abschließendes Tag notiert </tr> .

td-Tag oder/und th-Tag

Eine Tabelle kann Kopfzellen und gewöhnliche Datenzellen enthalten.
Text in Kopfzellen wird hervorgehoben (meist fett und zentriert ausgerichtet).

<th> leitet eine Kopfzelle ein (th = table header = Tabellenkopf)
<td> leitet eine normale Datenzelle (td = table data = Tabellendaten)

Der Inhalt einer Zelle wird jeweils hinter dem Tag notiert (in diesem Beispiel "Print" und "Digital")

Obwohl die zugehörigen End-Tags </th> bzw. </td> offiziell optional sind, ist dringend zu empfehlen, sie immer und in jedem Fall zu notieren (in XHTML beispielsweise sind Schluss-Tags generell vorgeschrieben).

Aufbaubeispiel (s.o. nur diesmal mit zwei Zeilen)

Das unten stehende Beispiel sieht wie folgt aus:
Eine Tabelle mit einem normalen Rahmen, in der ersten Zeile stünden Print & Digital in fett (als Überschrift/Header <th>) und darunter in normaler Schrift (<td>) CMYK und RGB:

Print Digital
CMYK RGB

<table border="1">

<tr>
<th>Print</th>
<th>Digital</th>
</tr>

</table>

Desweiteren lassen sich natürlich auch Größe der Tabelle sowie Textanordnung in der Tabelle definieren siehe Quelle: http://de.selfhtml.org/html/tabellen/aufbau.htm

Colspan & Rowspan

Durch Colspan (Anzahl der Spalten) lässt sich erreichen, dass sich eine Zelle über mehrere Spalten hinweg erstreckt (colspan = column span = Spalten spannen).

In unserem Beispiel sähe das so aus, wenn die Überschrift "Farbräume" über beiden Spalten ("CMYK" und "RGB") stehen soll.

<tr>
<th colspan="2">Farbräume</th>
</tr>

</table>

Durch colspan="2" geben wir an über wieviele Spalten sich die Zeile "Farbräume" erstrecken soll. Da wir 2 Spalten haben, also die 2.

Durch Rowspan (Anzahl der Zeilen) lässt sich erreichen, dass eine Zelle in einer Spalte sich über mehrere Zeilen erstreckt (rowspan = Zeilen spannen).

Zurück zu unserem Beispiel:

<tr>
<th rowspan="2">Farbräume</th>
<td>CMYK</td>
</tr>

</table>

Wie man sieht, wird immer der Zelle, die sich über andere Spalten oder Zeilen erstrecken soll, das jeweilige Attribut zugeschrieben.

Quelle: http://de.selfhtml.org/html/tabellen/zellen_verbinden.htm

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Bewertung:

Bisher keine Bewertung

HTML-Validierung

Validierung = Überprüfung eines HTML-Dokuments auf Fehler (z.B. in Syntax und Grammatik). Dazu bietet sich der W3C Markup Validation Service an. Nach der Validierung gibt der Validator Auskunft über die Art der Fehler und wo (Zeile) sie im Quellcode zu finden sind.

Für die Validierung ist es wichtig, dass im HTML-Dokument der Doctype richtig bzw. überhaupt gesetzt ist, damit die entsprechenden Validierungsregeln angewandt werden können.

Im Sinne der Validierung fehlerfreie Websites, erhöhen die Wahrscheinlichkeit, dass die Site in jedem Browser korrekt geparsed und fehlerfrei angezeigt wird.

DOCTYPE:
Es gibt 6, dennoch sind nur 4 Zeitgemäß:

XHTML: transitional, strict. Um XML/Beschreibungssprache in der man eigene Tags machen kann/ oder anderen Beschreibungen und Sprachen erweiterbar, das HTML muss strenger geschrieben werden. Hier die Regeln:

XHTML-Doctype(strict oder transitional),
alles klein geschrieben,
jeder <tag> muss geschlossen sein (muss ein End-Tag haben) <p> bb </p>, Stand Alone Tags: <img /> <hr /> in sich geschlossen.
Jedes HTML Attribut muss eine Wertzuweisung haben:
<input checked=“checked“ />
muss korrekt verschachtelt werden :
<div><div><p><em></em></p></div></div>
alle inline Tags müssen innerhalb vom Block-Tag sein

BlockTag: zur Strukturierung von Texten und Daten wie h1, p und div erzeugen einen Zeilenumbruch und werden auch als „Blockelemente“ bezeichnet, da sie einen visuellen Block aufziehen. Einige Blockelemente können selber wieder Blockelemente enthalten, so z.B. das div-Element.

Inline : Inlineelemente wie a und em erzeugen keinen Zeilenumbruch und dürfen keine Blockelemente enthalten. Insbesondere dürfen Inlineelemente nicht direkt innerhalb eines body- oder form-Elements liegen, sondern müssen immer innerhalb eines Blockelements liegen.

WIRD WAS FALSCH GEMACHT, WIRD ES BEI DER VALIDIERUNG ANGEZEIGT

HTML: strict, transitional
nicht mit XML erweiterbar,
Tags müssen kein Endtag haben: <p>,
<hr> <br> ---> simuliert ein Endtag,
Attribute gibt es auch ohne Wertzuweisung,:<input checked>,
inline tags können auch im body sein
und

frameset:strict,transitional
Hat einen eigenen Doctype,
Nachteile:Framesets sind nicht Barrierefrei,Mindeststandards sind somit nicht erfüllt,
werden heute nicht mehr benutzt: Suchmaschinen können diese nicht richtig durchsuchen
Vorteile: Ladegeschwindigkeit: besser, muss nur Teil der Seite laden

Strict:keine gestaltenden HTML- Tags und HTML Attribute,
keine gestaltenden Elemente wie z.B. Schriften und Farben.
<a href=“ tatatata.htm.>
<img src=“xy.jpg“ alt=“text“>
<img src=“xy.jpg“ alt=“text“ width=“20“ height=“50“ />
<p style=“color:red“>---->inline css style sind erlaubt
in HTML soll nur strukturiert werden

Transitional: im HTML gestaltende Attribute.
<h1 align=“left“>
<body bgcolor=“red“>
<a href=xy.htm“ target=“_blank“..../>

W3.org: Validator Consortium nachprüfen.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Doctype

Webseitenherstellung

Bewertung:

Bisher keine Bewertung

HTML5-Neuerungen

Das oben erklärte Transition-Verfahren kann auch für Animationen verwendet werden. In folgendem Beispiel lösen wir eine Animation eines HTML-Elements beim Überfahren mit der Maus eines anderen Elementes aus.

Aufgabe: Quadrat animieren
· Setzen Sie zwei div-Container nebeneinander und versehen beide mit einer id (z.B. div1, div2).
· Setzen Sie bei beiden divs über CSS position:absolute, Breite, Höhe und Hintergrundfarbe.
· Definieren Sie zusätzlich bei der zweiten Box:
Transition: 1s all;
für alle Browser. Damit legen wir fest, dass alle CSS Eigenschaften bei einer Änderung einen Übergang von
einer Sekunde erfahren.
Zusätlzich legen wir einen Hover-Effekt fest:
#box1:hover+#box2
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
left:627px;
background:#ff0;
color:#000
}
Beachten Sie, dass durch den Operator + die zweite Box angesprochen wird, wenn bei der ersten ein Hover-
Ereignis ausgelöst wird.
· Testen Sie das Ergebnis im Firefox!

Eine Neuigkeit in CSS3 sind die vielfältigen Möglichkeiten, Texte ein unterschiedliches Aussehen zu geben und sogar zu
animieren. Wurde man beispielsweise bei senkrechten Texten (die insbesondere in schmalen Tabellenspalten sinnvoll
erschienen) schnell versucht, wieder Bilder als Texte in die Webseite zu integrieren, reicht in CSS3 eine Zeile, um den
Text um einen gewünschten Winkel rotieren zu lassen:
transform:rotate(360deg);
Aufgrund von Abwärtkompatibilitätsgründen müssen wir aber für jeden Browsertyp ein entsprechendes Präfix setzen,
also:
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
Ein weiteres echtes Plus ist die neue Angabe transitions, die einen fließenden Übergang zweier Zustände eines HTMLObjekts
beschreiben. Dabei müssen wir die CSS-Eigenschaft und nach bedarf einige andere Eigenschaften bestimmen:
transition:color ease-in 0.3s,font-size ease-in 0.3s;
Diese Angabe bewirkt, dass sich der Wert des Attributs color bei einer Änderung innerhalb von 0,3 Sekunden von der
Ursprungsfarbe zur neuen Farbe ändert. Sollen weitere Änderungen vorgenommen werden, können diese mit Komma
getrennt dahintergeschrieben werden (hier: die Schriftgröße). Die Angabe ease-in beschreibt, welche Art der
Transformation angewendet werden soll. Auch hier gilt: die Präfixe sollten gesetzt werden
Aufgabe Texte beim Überfahren mit der Maus verändern:
· Erstellen Sie in einem HTML5-Dokument einen Text und versehen ihn über CSS mit einer Schriftgröße und
einer Farbe.
· Setzen Sie für die Farbe und die Schriftgrösse die Angabe transition.
· Lassen Sie den Text um 45 Grad gegen den Uhrzeigersinn rotieren.
· Setzen Sie beim hovern im CSS andere Werte für Farbe und Schriftgrösse.

Viele Neuerungen in HTML5 finden tatsächlich nicht im „normalen“ HTML statt, sondern beziehen sich auf
JavaScript-APIs. Momentan sind Sie meist relativ komplex, noch unvollständig implementiert und daher nicht
einfach zu benutzen. Die Ausnahme bietet die eher einfache und gut unterstützte Geolocation-API an, mit
der sich relativ verlässliche Informationen über den Standort eines Surfers gewinnen. In allen aktuellen
Versionen der Browser ist diese API bereits integriert.
Position auslesen
Die Geolocation-API erweitert das window-navigator-Objekt um ein Objekt geolocation. Zur Bestimmung der
aktuellen Position dient die Methode getCurrentPosition().Diese Methode kann drei Parameter
entgegennehmen. Der erste ist der Erfolgcallback, dem automatisch als Parameter ein Objekt mitgegeben
wird, das wiederum zwei Eigenschaften besteht: coords und timestamp. Der zweite Parameter ist der
Fehlercallback und mit dem dritten Parameter kann man ein Array mit Optionen übergeben. Dabei stehen
enableHighAccurace, timeout und maximumAge zur Verfügung. enableHighAccurace wird mit einem
booleschen Wert (true/false) befüllt und erzwingt eine möglichst exakte Positionierung ohne Rücksicht auf
die Ortungsdauer. Mit timeout kann man die Ortungsdauer einschränken. Und maximumAge bestimmt, wie
lange die Position in Sekunden gecachet werden soll. Der Wert 0 besagt, dass bei jedem Anfordern der
Position diese neu bestimmt wird.
Bsp. Geolocation-Abfrage:
if (navigator.geolocation) // existiert das geolocation-Objekt überhaupt?
{
var opt = {enableHighAccuracy:true}; //jawoll, wir wollen es genau haben.
navigator.geolocation.getCurrentPosition(success, error, opt);
//Aufruf der getCurrentPosition-Methode und den Callback-Funktionen
}
Desweiteren wird der Erfolgscallback als Funktion benötigt, der über das übergebene Objekt position den
Längen- und Breitengrad abrufen kann:
function success(position)
{
var long = position.coords.longitude //Längengrad
var lat = position.coords.latitude //Breitengrad
var timestamp = position.coords.timestamp //Zeitangabe
var accurancy= position.coords.accuracy // Genauigkeit der Lokalisierung
}
Dem Fehlercallback wird automatisch ein Fehlercode im Parameter error übermittelt:
function error(error)
{
switch (error.code)
{
case 0 : alert ('UNKNOWN_ERROR');
break;
case 1 : alert ('PERMISSION_DENIED');
break;
case 2 : alert ('POSITION_UNAVAILABLE');
break;
case 3 : alert ('TIMEOUT');
break;
}
}

Aufgabe1: Ermitteln Sie Ihren momentanen Standpunkt als Längen- und Breitengrad.
· Erstellen Sie ein HTML5-Dokument.
· Erstellen Sie ein p-Tag mit der ID 'location'.
· Erstellen Sie eine Geolocation-Abfrage nach obigem Beispiel.
· Definieren Sie die Callbackfunktionen für den Erfolgs- bzw. Fehlerfall. Schreiben Sie im Erfolgsfall die
Koordinaten, im Fehlerfall eine sinnvolle Fehlerbeschreibung in das p-Tag mit der ID 'location'.
· Testen Sie das Script im Firefox oder im Internet Explorer.
Aufgabe 2: Google maps anbinden.
Mit den geografischen Angaben als Dezimalwinkel können wir wenig anfangen. Zum Glück stellt Google maps eine
eigene Online-API zur Verfügung, über die wir Standpunkte auf einer Landkarte sichtbar machen können.
· Binden Sie die mitgelieferte Datei googlemap.js und die google-api (online) wie folgt im head-Bereich ein:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="googlemap.js"></script>
· Setzen Sie in der Erfolgs-Callback-Funktion den Funktionsaufruf
showPositionOnGoogleMap(latitude,longitude,accuracy)
mit der Übergabe von Längen-,Breitengrad sowie Genauigkeit.
· Die Google API liefert aufgrund dieser Angaben eine Karte mit dem aktuellen Aufenthaltsort zurück. Im
Browser sollte ein Seitenaufbau wie folgt erfolgen:

Spätestens seit über jedes Handy auf das Internet zugegriffen werden kann, steigt die Möglichkeit wieder, das zeitweise
die Internetverbindung ausfällt. Webapps funktionieren dann nicht mehr – ein Grund, warum Online-Anwendungen, in
denen WWW-Applikationen nicht der zentrale Punkt der Applikation sind, noch keine relevante Verbreitung erfahren
haben. Mit HTML5 hat man zumindest die Chance, eine gewisse Funktionalität offline-tauglich zu machen.
HTML5 bietet mit DOM Storage eine Form der clientseitigen Datenbank und mit dem Application Cache einen
Speicherberich zum Vorladen von statischen Ressourcen – nicht zu verwechseln mit dem herkömmlichen
Browsercache. Im folgenden verwenden wir den Application Cache, um Seiten vorzuladen, die wir eventuell später
aufrufen wollen.
Der Application Cache
Da beim Internet Explorer die Integration des Application Cache auf die Version 10 verschoben wurde und der Firefox in
der Version 13 noch eklatante Fehler beinhaltet, müssen wir unsere Application Cache-Funktion im Chrome testen.
Welche Dateien im einzelnen im Application Cache speichert werden, legt eine separate Textdatei fest, z.B. aus zwei
verschiedenen Abschnitten besteht. Die Datei muss UTF-8-codiert sein. Die Pfade zu den Dateien können entweder
absolute oder relativ angegeben werden:
CACHE MANIFEST
# Folgende Dateien cachen:
about.html
NETWORK:
#Folgende Dateien nicht cachen:
blog.html
Diese Datei könnten wir cache-manifest.manifest nennen. Damit der Webserver die Datei mit dem richtigen MIME-Type
ausliefert, müssen wir in die Datei .htaccess folgende Zeile hinzufügen:
Addtype text/cache-manifest manifest
Wichtig dabei ist, dass wir das Manifest mit der Dateinamenerweiterung .manifest versehen haben.
Die Einbindung des Cache Manifests ist simpel. Die URL des Manifests wird dem manifest-Attribut im html-Element
zugewiesen.
<html manifest= "cache-manifest.manifest">
Besonders beim Entwickeln und testen für verschiedene Browser ist es sinnvoll, die verschiedenen Cache-event
abzufragen. Das realieren wir einfach mit per javascript-AddEventListener. Im folgenden wird das Event 'checking'
abgefragt.
applicationCache.addEventListener('checking',function()
{
alert('Suche Manifest...')
},false);
Weitere selbsterklärende Manifest-Events: noupdate, downloading,progress,cached,updateready, error.
Aufgabe 1:
· Erstellen Sie drei HTML5-Dateien mit je einem Text-Inhalt. Eine Datei (start.htm) muss Links auf die anderen
zwei Dateien enthalten. Legen Sie alle Dateien in das htdocs-Verzeichnis unterhalb Ihres xampp-Verzeichnisses
ab.
· Legen Sie ein manifest an, in dem eine verlinkte Datei gecached wird und die andere nicht.
· Ergänzen oder erstellen Sie die Datei .htaccess in Ihrem htdocs-Ordner.
· Setzen Sie in der start.htm das manifest im head-Tag ein.
· Starten den Apache und öffnen Sie Google Chrome. Öffnen Sie über localhost/IhrPfad/start.htm die Startseite
mit den beiden Links.

· Stoppen Sie Ihren Apache wieder und klicken Sie auf den Link zu der Datei, die laut Manifest gecached wurde.
Die Seite sollte erscheinen.
· Probieren Sie das gleiche für die Seite, die nicht gecached ist.
· Schreiben Sie eine Javascript-Funktion, die alle Manifest-Events ausliest und in einem HTML-Element über
innerHTML ausgibt.
· Leeren Sie den normalen Browser-Cache (Strg+H bei Chrome), wenn Sie die Aktion wiederholen, um
sicherzustellen, dass die zu cachende Datei tatsächlich aus dem Application Cache stammt.

Das war überfällig: ein natives Browserobjekt, das ohne Plugin-Krücken Videodateien abspielen kann und über CSS
gestalten und mit javascript angesprochen werden kann. Ein Schönheitfehler ist, dass sich die Browserhersteller
aufgrund lizenzrechtlicher Schwierigkeiten nicht auf ein gemeinsames Videoformat einigen konnten. Aber es ist
möglich, als Source mehrere Formate zu hinterlegen; der Browser sucht sich dann das passende aus und stellt es dar. Es
gibt momentan drei wichtige Videoformate: mp4 (H264), webM(webM), ogg (Theora/Vorbis).
Browser Ogg Theora (.ogg) h.264 (.mp4)
Firefox Ja
Internetexplorer
Opera Ja
Chrome Ja Ja
Safari Ja
iPhone Ja
Android Ja
Die Einbindung eines Videos ist denkbar einfach:
<video id="video" width="480" height="270" controls
poster="img/platzhalter.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
Dein Browser ist leider nicht mit HTML5 kompatibel.
</video>
Die Media-API
Über das controls-Attribut lässt sich der Player steuern. Die Media API ist jedoch ein gutes Beispiel dafür, wie in HTML5
APIs umgesetzt sind, um auf Objekte zuzugreifen. Deswegen – und weil wir komplette Kontrolle über unser Layout und
unsere Funktionen haben wollen, denn jeder Browser hat seine eigene Darstellung der playereigenen Interface – bauen
wir uns im Folgenden unser eigenes MediaPlayer-Interface. Zum Testen verwenden wir wieder Google Chrome, da im
FF und IE jeweils eine Funktionalität nicht zur Verfügung steht.
Aufgabe: MedienInterface erstellen
· Binden Sie die mitgelieferten Videos wie oben beschrieben in eine HTML5-Webseite ein. Lassen Sie das
controls-Attribut dabei weg.
· Wir brauchen 6 Buttons mit folgenden Beschriftungen: Start/Pause, Stummschalten, Lauter, Leiser, Schneller,
Langsamer
· Wir brauchen eine Fortschrittsanzeige, für das wir ein neues HTML5-Element verwenden: das <progress>-Tag.
Z.B:
<progress id="fortschritt" min="0" value="0" style="width:427px"></progress>
Achtung: Dieses Element ist im Internet Explorer 9 noch nicht implementiert.
Damit wäre der HTML-Teil abgeschlossen.
· Zunächst programmieren wir eine Funktion, die das Video abspielt: Über eine einfache Statusabfrage lässt sich
über den paused-Wert bestimmen, ob per click die pause() oder play()-Methode angewandt wird:
var video=document.getElementById('video');
function start()
{
if (video.paused)
{
video.play();
}
Johannes-Gutenberg-Schule Stuttgart, Zentrum für Druck und Kommunikation Lehrgang HTML5
Göhlich
else
{
video.pause();
}
}
Diese Funktion setzen wir mit einem Onclick-Event auf den Play/Pause-Button.
· Ähnlich verfahren wir mit den Funktionen für die anderen Buttons. Hier müssen wir keine Methode anwenden,
sondern nur entsprechende Werte setzen.
Funktion Werteabfrage, -setzen
Stummschalten video.muted
video.muted = true|false
Lauter/Leiser
Hinweis: Wert darf nicht <0 oder >1
sein!
video.volume
video.volume=0-1
Abspielgeschwindigkeit ändern
Hinweis: Funktioniert nicht im FIrefox
video.playbackRate
video.playbackRate=0-100
Wert 1 ist normale Geschwindigkeit
· Für den Fortschrittsbalken benötigen wir die Gesamtlaufzeit des Videos. Diese können wir über
element.duration auslesen, doch dazu muss der Browser das Video soweit geladen haben, dass er die
Gesamtspielzeit kennt. Woher kennen wir den Zeitpunkt? Praktischerweise gibt es ein Event, das genau dann
feuert, wenn der Browser die Metadaten (u.a. die Laufzeit) geladen hat: loadedmetadata. Disen Wert setzen
wir dann auf das Max-Attribut des Fortschrittbalkens:
var fortschritt = document.getElementById('fortschritt');
video.addEventListener('loadedmetadata',function(){
fortschritt.setAttribute('max',video.duration);
});
Jetzt müssen wir noch den Wert des Fortschrittsbalkens analog zur aktuellen Spielzeit des Videos setzen. Dafür
rufen wir die currentTime des Videos regelmässig ab:
setInterval(function(){
fortschritt.setAttribute('value',video.currentTime);
},500);

HTML5 Neuerung - Webfonts :

@font-face war zwar schon Teil von CSS2, aber wurde von 2.1 auf CSS3 verschoben, da die Probleme mit der Lizensierung erst gelöst werden mussten.

WOFF (Web Open Font Format) ist ein vom W3C standardisiertes Format für Web-Schriften, das die Formatvielfalt und Unsicherheit der frühen Webfonts beendet. WOFF ist ein komprimiertes TTF mit zusätzlichen Informationen, das von den Mainstream-Browsern und Font-Designern unterstützt wird.

WOFF wird von allen Aktuellen Browsern unterstüzt. (IE ab v.9)

per CSS einbinden:

         Dateiname der Schrift im Webordner  +
                                             |
@font-face { font-family: Route; src: url(coolerFont.woff); } 
    ^             ^         ^     ^
    |             |         |     |
    |             |         |     +- Link zur Schriftdatei
    |             |         |
    |             |         +- Frei wählbarer Name für die Schrift
    |             |
    |             +- Schriftart
    |            
    +- @font-face-Regel zum Einbinden einer Schriftdatei

Mit allen Prefixes beste art der Einbindung mit Fallback:

@font-face {

font-family: 'coolerFont';

src: url('../../fonts/coolerFont-webfont.eot');

src: url('../../fonts/coolerFont-webfont.eot?#iefix') format('embedded-opentype'),

url('../../fonts/coolerFont-webfont.woff') format('woff'),

url('../../fonts/coolerFont-webfont.ttf') format('truetype'),

url('../../fonts/coolerFont-webfont.svg#webfontj1CI1MAi') format('svg');

}

Mit CSS nutzen:

font-family: 'coolerFont', arial, sans-serif;

+- Fallback

per HTML einbinden:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 4.4 (5 Stimmen)

Meta-Elemente

Meta-Elemente im HTML Head Zusammenfassung.

Wir haben diese Woche eine Zusammenfassung der wesentlichen Meta-Elemente gemacht und ein Video dazu erstellt. Wir denken es ist ein guter Einstieg, da die Meta Elemente sonst etwas abstrakt wirken können.

https://www.youtube.com/watch?v=m89yo_LRwyQ&index=6&list=PLPjKx80JC4CBL2dyNaRj1TvQhiDXB-7A_

CHARSET für den Zeichensatz
HTML 5 Standard Attribute
HTTP-Equiv Beispiele wie Weiterleitung
Robots Beispiele für die Suchmaschinen
Meta Viewport Beispiel
Open Graph Meta für Social Media Dienste.
Beispiel für den Einsatz von Meta Elementen um die Navigation für ein CMS umzusetzen

Anleitung für das Wiki

In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.

Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (http://www.mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2016) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Internetadresse

Grundaufbau einer URL (Uniform Resource Locator)

Beispiel: http://www.mediencommunity.de/Internetadresse

http:// -> ist das Protokoll

www. -> ist in diesem Beispiel Third-Level-Domain und steht für den Dienst/Server/Rechnernamen

mediencommunity -> ist Second-Level-Domain

.de -> ist Top-Level-Domain

/Internetadresse -> ist der Pfad (Verzeichnispfad)

Alle Domains vor der Top-Level-Domain werden als Subdomain oder Sub-Level-Domain bezeichnet.

DNS (Domain Name System)

Das DNS ist ein Internetdienst. Er dient zur Umsetzung von IP-Adressen in Domainnamen und umgekehrt.

Damit das möglich ist braucht es den "Fully Qualified Domain Name". (de.wikipedia.org/wiki/Fully_Qualified_Domain_Name)

Netzwerkprotokolle

Bei Netzwerkprotokollen handelt es sich um Vereinbarungen, wie Daten zwischen Rechnern übertragen werden.

Die Internetprotokollfamilie umfasst verschiedenen Protokolle, die die Kommunikation/die Datenübertragung im Internet regeln. Diese sind in 4 Schichten sortiert. Dieses Schichtmodell wird als TCP-IP-Referenzmodell bezeichnet.

Die IP

Die IP ist für das Routing zuständig (Routing bezeichnet das Weiterleiten von Daten über Netze). Sie kümmert sich um die Identifizierung von Rechnern und Adressierung von Daten. Außerdem sorgt dieses Protokoll für Paketbildung (Datenpakete sind geschlossene Dateneinheiten).

Und wie funktioniert das Internet?

www.youtube.com/watch?v=8PNRrOGJqUI

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
<p>URL_Aufbau.xls</p>	27.5 KB

Bewertung:

Bisher keine Bewertung

KOMMUNIKATIONSMEDIEN

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Chat

Als Chat bezeichnet man internetbasierte Echtzeit-Unterhaltung zwischen mehreren Usern

Man unterscheidet drei Chat-Varianten:

1. Internet Relay Chat (IRC)
Hierzu benötigt der Betreiber einen eigenen Chat-Server und die User spezielle Software.

2. Web-Chat
Die user chatten über ein online angebotenes Interface und benötigen dazu nur ihren Browser und Internetzugang.

3. Instant Messaging
Dies beschreibt einen Chat zwischen eingeladenen Usern, wie man es von iChat und msn-Messanger kennt.

Weitere Information finden Sie auf der Website Chat-Kommunikation.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Echtzeit-Unterhaltung

Bewertung:

Bisher keine Bewertung

Podcast

Podcast ist ein Kunstwort, das sich aus dem englischen Begriff für Sendung (Broadcast) und "iPod" (MP3-Player), zusammensetzt. Podcasts sind selbst produzierte Radiosendungen, die man im Internet herunterladen oder als RSS-Feed abonnieren und auf dem PC oder einem MP3-Player anhören kann.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Audio

Podcast

Bewertung:

Bisher keine Bewertung

Spam

Spam (Junk) = engl. für Abfall oder Plunder
= unerwünschte elektronische Nachrichten
= unverlangt versendet
= meist werbender Inhalt
= Vorgang nennt sich „Spamming“ oder „Spammen“
= Verursacher heißt „Spammer“

Arten von Spam:

· Email-Spam

o Unverlangte Massen-Email

(Meiste Email-Marketing, missionierende und/oder volksverhetzende Emails. Kettenbriefe gehören auch zu dieser Kategorie)

o Unverlangte Kommerzielle Mail

(=UCE (Unsolicited Commercial E-Mail), kommerzielle Inhalte, in Deutschland bedingt legal (s. Rechtslage weiter unten), meist dubiose oder besonders günstig erscheinende Angebote für Sex, Potenzmittel, Pornografie, illegales Glücksspiel, Medikamente usw.)

o Kollateraler Spam, Backscatter

(E-Mails werden aufgrund Malware od. Spammails unwissend an 3. Gesendet. Spam-Absender nimmt den Namen unwissender Dritter an. Das Empfängersystem nimmt die Mail zunächst an, schickt aber automatisch im Nachhinein eine Unzustellbarkeitsnachricht zurück, wobei die Welle ihren Lauf nimmt. Auch auslösbar durch Menschen, die sich bei der vermeintlich echten Absender-Adresse beschweren wollen.)

· Usenet-Spam

Vereinzelte „Spammer“, die ihre Werbung in vielen Newsgroups positionierten. Allererster Spam war die Werbekampagne des Rechtsanwaltbüros Canter & Siegel aus dem Jahre 1994 (Werbung von Greencards). Daraus resultierend eskalierte die Situation, bis zu 1Mio Spam-Artikel wurden pro Tag eingestellt.

·Index-, Link-, Blog-, Social-Bookmark- und Wikispam

o Suchmaschinen- oder Index-Spamming

(Verursacher manipuliert Suchmaschinen-Ergebnisse damit auf den ersten Seiten Spam-Seiten auftauchen)

o Link- oder Blogspam

(Manipulierung des Rankings mithilfe der Blogeigenen Trackback/Kommentarfunktion)

o Social-Bookmark Spam

(Manipulierung mithilfe des Speicherns der eigenen Seiten auf Website wie Mister Wong oder del.icio.us. Betreiber haben daraufhin mit dem Blocken von Trackbacks mit dem Attribut „rel=“nofollow““ reagiert.)

o Wikispam

(Gezieltes Posting eigener Websites auf Wiki’s um das eigene Ranking zu erhöhen. Suchmaschinen beziehen meist in ihre Wertungen die sogenannte Linkpopularität in ihr Bewertungssystem ein. Ebenfalls wird hier durch das Attribut „rel=“nofollow““ verhindert, das solche Menschen damit Erfolg haben.)

· Spam over Mobile Phone (SPOM)

Unerwünschte Anrufe oder Mitteilungen. Spam oder Pinganrufe die nur Sekundenbruchteile dauern rufen unwissende an und verleiten dazu, eine meist teure Hotline zurückzurufen.

· Sonstige

SPIM (Spam over Instand Messaging) benutzt Programme wie IRC, ICQ, Windows Live etc.

SPIT (Spam over Internet Telephony) sind unerwünschte VoIP-Anrufe.

Schutz vor Spam / Gegenmaßnahmen:

· Spamfilter

· Korrekturen im SMTP-Protokoll / DNS

· Erschweren des Sammelns von Email-Adressen im Internet

· Verschleiern von Email-Adressen (als Bilddatei oder ohne „@“-Zeichen)

· Verschleierte „From“-Adressen

· Captcha-Abfragen (Nicht barrierefrei)

· Kontakformulare (CGI oder PHP) sind vor Datendiebstahl relativ sicher

· Nutzung des BCC Adressfelds (Mail wird als Kopie versendet, Empfänger sieht andere Emailadressen nicht)

· RBL-Server speichern in Echtzeit Spamversender und erstellen Blacklists, welche genutzt werden können, z.B. von Mailserverbetreibern wie live.de oder gmx.de

· Graue Listen: Empfänger werden darauf gespeichert (+ erhält eine gefälschte Fehlermeldung) und nur wenn dieser erneut eine Mail versendet wird die Nachricht zugestellt und er wird von der Liste entfernt.

Der rechtliche Aspekt des Spammings:

Allgemein: Das Versenden von schädlicher Software (wie z.B Würmern und Trojanern) ist in Deutschland immer noch umstritten. Unternehmen werden als haftbar angesehen, Privatpersonen eher nicht.

Aus unerwünschter Email-Werbung kann sowohl ein wettbewerbsrechtlicher als auch ein privatrechtlicher Unterlassungsanspruch des Empfängers an den Versender entstehen. Es ist egal ob der Spammer einmal oder mehrmals sendet, bereits ab der ersten Mail kann ein Unterlassungsanspruch entstehen.

Wettbewerbsrecht

Eine Zusendung von Werbung ist wettbewerbswidrig, wenn der Empfänger bereits per Telefax, Telex und Telefon beworben wurde. Seit dem UWG (Gesetz gegen unlauteren Wettbewerb) von 2004, müssen die Empfänger ausdrücklich der Zusendung von Werbung zustimmen (Opt-In).

Haftungsrecht

Weniger umfassend als das UWG, jedoch kann ein Privatanwender auch hier einen Unterlassungsanspruch mithilfe des allgemeinen Persönlichkeitsrechts bewirken.

Strafrecht

Staatsanwaltschaften sehen hier noch keinen Handlungsbedarf, da eine Rechtsprechung ohne Gesetzesgrundlage nicht erlaubt ist.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Rechtsverordnung

Spam

Spammaßnahmen

Bewertung:

Bisher keine Bewertung

Zusammenfassung Digitale Präsentation

So, nun auch zu diesem Thema meine eigene Zusammenfassung,
Quellen waren das Kompendium und Unterrichtsmaterial.
Ich denke, dass es sich wirklich auf das digitale (Foliengestaltung etc.) spezialisiert, trotzdem hab ich etwas Allgemeines auch dazu genommen, kann ja nicht schaden ;-)

Wenn jemand noch Ergänzungen hat, immer her damit :)

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
Konzeption_U1_Digitale Präsentation.pdf	180.84 KB

Bewertung:

Durchschnitt: 5 (2 Stimmen)

Landing-Page

Weiterführende Links:
http://www.landingpage-ebook.de

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Lokaler Testserver

Ein lokaler Testserver simuliert einen Webserver auf dem Clientserver. Er wird verwendet um dynamische Webseiten mittels serverseitiger Programmiersprachen (PHP, PERL) lokal zu entwickeln.

Ein lokaler Testserver findet sich im XAMPP-Paket.

X= Betriebssystem

A= Apache (Lokaler Server)

M= MySQL (Datenbank)

P= PHP

P= Perl

Neben dem lokalen Apache-Server gibt es zahlreiche andere lokal anwendbare Server.

Man kann jeden Webserver auch als lokalen Testserver verwenden.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Media Queries

Eine Website wird immer mit CSS(Cascading Style Sheets) gestylt bzw. im Aussehen optimiert. Bis zur Version CSS2 konnte man nur stumpf Regeln definieren. Dies war auch der Grund, warum Desktop und Mobile Websites immer getrennt voneinander entwickelt wurden. Doch mit der Einführung von CSS3 änderte sich das rapide. Denn mit Version CSS3 kam die wichtigste Neuerung Media Queries. Durch Media Queries wurde es möglich Eigenschaften des aktuellen Gerätes direkt abzufragen. Verfügbare Geräteeigenschaften sind: Breite und Höhe des Browserfensters, Format (Quer- oder Hochformat), Bildschirmauflösung. Daher eine für responsives Webdesign wesentliche Voraussetzung.

Beispiel 1:

body {
    background-color: red;
}

Beispiel 2:

@media screen and (max-width: 960px) {
    body {
        background-color: lime;
   }
}

Erklärung:

In Beispiel 1 geben wir dem element body eine Hintergrundfarbe Rot. Im zweiten Beispiel setzen wir durch einen Media Querie die Hintergrundfarbe auf Hellgrün. Falls wir uns das Ergebnis auf einem Smartphone anschauen würden, würden die Farbe Hellgrün sehen. Da die Browser Breite des Smartphones nicht über die 960px Breite kommt. Ansonsten sehen alle mit Desktop Rechnern die Farbe Rot. Da sich die Bildschirm Auflösung bei über 960px befindet. Schieben wir den Browser auf dem Desktop zusammen sollten wir bei exakt 960px die Farbe Hellgrün wieder sehen können.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Mobile Endgeräte (Webdesign)

Mobile Endgeräte (Design)

Im mobilen Webbereich ist der nutzerorientierte Ansatz am vielversprechendsten.

Wie und wo werden die Nutzer mit dem mobilen Inhalt interagieren?
Welche Zielen/Inhalte wollen sie dadurch erreichen?

Aber auch der anbieterorientierte Ansatz sollte nicht unbeachtet gelassen werden:

Welche Ziele verfolgt die Institution/Firma?
Inwieweit können diese durch die Erstellung einer mobilen Webpräsenz erreicht werden?
Welche neuen Geschäftsfelder bzw. -chancen ergeben sich dadurch?
Gibt es Innovationsmöglichkeiten?

Als letzter Ansatz darf die Technik nicht außer Acht gelassen werden. Durch die Vielzahl der mobilen Endgeräte und deren unterschiedliche Internetunterstützung sind Ressourcen und Technologien zur Umsetzung eingeschränkt.

1. Webdesign

Die verfügbare Bildschirmgröße bei Handys ist sehr unterschiedlich, aber generell gilt, dass v.a. die Screen-Breite limitiert ist. Design für mobile Endgeräte bedeutet Design im Hochformat (empfohlene Max-Größe: 200x250px).

Da eine Seite nur so gut ist, wie der Browser, der sie darstellt, ist zu berücksichtigen, dass Handybrowser

lange Antwort- bzw. Ladezeiten
unterschiedliche und verringerte Kompatibilität zu den diversen Handymodellen
uneinheitliche Stylesheet-Unterstützung

haben.

Das führt zu den folgenden Regeln und „Best Practice“.

Regeln und „Best Practice“

nur „well formed“ Code (bevorzugt XHTML) benutzen
Character Encoding auf explicit auf UTF-8 setzen
Seitentitel:
- kurz halten (wird potentiell abgeschnitten)
- ein hilfreicher Seitentitel besteht aus dem eigentlichen Seitentitel evtl. gefolgt durch den Seitennamen, Bsp. <title AGB | Hans Müller GmbH</title>
Navigation:
- „Keep it Simple“:
  - Wahlmöglichkeiten beschränken. Nur den Inhalt anbieten, der für den Handynutzer relevant/von Interesse ist. Das reduziert Wahlmöglichkeiten und verringert die Gefahr, dass der Nutzer sich verirrt.
  - nur für die aktuelle Seite und den aktuellen Inhalt relevante Navigation zeigen, um die Datenmenge der Seite und damit die Ladezeit der Seite zu verringern
  - bei Drill-Down-Navigation den Inhalt in gut benannte Kategorien schachteln und die Kategorien sowohl in Breite und Tiefe auf ein Minimum reduzieren
  - Links auf maximal 10 pro Seite beschränken
  - Acesskeys für die Haupnavigation, um einen schnelleren Zugriff auf die Links via Handytastatur zur ermöglichen

Priorisierung der Links nach Aktivität oder Popularität

geordnete Listen (ol) zur Darstellung der Navigation nutzen, kurze Erklärungen zu den einzelnen Unterpunkten können via span-Attribute eingefügt und damit stilistisch von der eigentlichen Navigation abgehoben werden
Navigationsmöglichkeiten am Seitenende einfügen (Home, Back, etc.), um dem Nutzer das Weitersurfen zu erleichtern

Nutzung von externen Stylesheets, um die Seiten konsistent zu halten und die Seitengröße zu verringern
Verzicht auf Skripte und eingebettete Objekte
Deklaration von Stylesheets und Logo als zu cachendem Inhalt reduziert die zu transportierende Datenmenge
Strukturierung des Seitencodes entsprechend der Leserichtung von oben nach unten
Tabellen:
- nicht für Layoutzwecke
- so klein wie möglich halten
- keine in sich verschachtelte Tabellen
- nach Möglichkeit durch Definitionslisten (dl) ersetzen
keine Frames
Telefonnummern verlinken, dabei sollte als Linktext die Telefonnummer angezeigt werden
Formulare:
- nur sparsam benutzen
- Anzahl der Eingabefelder reduzieren
- Texteingabefelder nach Möglichkeit durch Checkboxen oder Radiobuttons ersetzen
Bilder:
- die meisten Handys verfügen nur über eine Bildschirmbreite von ca. 120px, daher sollte die Bildgröße sich diesem anpassen, es sei denn man nutzt „device detection techniques“ (hier fehlt mir grad ein deutscher Begriff für)
- Breite und Höhe bei Bildern angeben, um Ladezeiten zu verringern
- Verzichte auf Imagemaps, es sei denn Du weisst, dass das anfragende Gerät diese unterstützt
- Alt-Tag bei Bildern immer angeben. Es kann sein, dass die Darstellung von Bildern zur Verringerung von Ladezeit und Datentransfer ausgeschaltet wurde
keine Popups (werden eh nicht unterstützt)
externe Resourcen reduzieren, um die Datenmenge und Ladezeiten zu senken
Daumenregel: Seitengröße sollte unter 10 KB bleiben (incl. Markup, CSS und externen Resourcen)

2. Technik-Glossar

WAP = Wireless Application Protocol = Sammlung von Techniken und Protokollen, deren Zielsetzung es ist, Internetinhalte für die langsamere Übertragungsrate und die längeren Antwortzeiten im Mobilfunk sowie für die kleinen Displays der Mobiltelefone verfügbar zu machen . Die meisten aktuellen Handys unterstützen WAP 2.0.

WAP 1.0

Ursprünglicher Standard zu Beginn der 90er Jahre. Quasi alle webfähigen Handys unterstützen zumindest diesen Standard. WAP 1.0 nutzt WML als Auszeichnungssprache.

WAP 2.0

Aktuelle Version des Standards mit dem Ziel die Darstellung auf dem Handy dem PC ähnlicher zu machen. Wichtigste Neuerungen:

Unterstützung der wichtigsten Internetprotokolle wie z.B. TCP/IP und HTTP statt der bisherigen proprietären Protokolle von WAP 1.0
Nutzung von XHTML-MP als vorrangige Auszeichnungssprache

WML = Wireless Markup Language auf XML basierend. Wird oft fälschlich als WAP 1.0 bezeichnet. Mit der Entwicklung von XHTML-MP ist WML inzwischen veraltet und nicht mehr empfohlen, dient aber weiterhin als Rückversicherungs-Auszeichnungssprache, da es eine breite Unterstützung und ziemlich konsistente Darstellung quer durch alle Browser bietet.

XHTML Mobile Profile / Basic

XHTML-MP = Extensible Hypertext Markup Language – Mobile Profile ist eine spezielle XHTML-Variante entwickelt durch die OMA (Open Mobile Alliance) und basierend auf XHTML Basic 1.0 des W3C. Wird oft fälschlich als WAP 2.0 bezeichnet. XHTML-MP ist aktuell der am weitesten unterstützte XHTML-Dialekt. XHTML-MP wird im allgemeinen zusammen mit WCSS genutzt.

WCSS = Wireless Cascading Stylesheets = Untergruppe von CSS 2.0 mit handyspezifischen Erweiterungen. WCSS unterstützt viele aber nicht alle CSS-Attribute. Deshalb sollte das CSS so einfach wie möglich gehalten werden. WCSS kann nicht in Verbindung mit WML genutzt werden.

3. Unterstützung verschiedener mobiler Endgeräte

abhängig von der anvisierten Zielgruppe
mittels Anpassung der Darstellung entsprechend der Fähigkeiten des Gerätes kann das Nutzererlebnis verbessert werden
Nutzer mit schlechter Webunterstützung surfen wenig bis gar nicht im mobile Web, die Berücksichtigung solcher Geräte kann daher in den meisten Fällen wegfallen
die explizite Unterstützung verschiedener mobiler Endgeräte kann auf ca. 5 der hauptsächlich genutzten beschränkt werden. Ggf. kann ein Serverlog mit Device Detection angelegt werden, um auf Änderungen reagieren zu können.

4. Mobile Web

Um dem Handynutzer das Surfen im mobile Web zu erleichtern und ihm zu signalisieren, dass es sich um eine auf mobile Endgeräte zugeschnittene Seite handelt, gibt es mehre Ansätze:

Nutzung der spezifischen .mobi Topleveldomain statt z.B. .net, .org, .com oder .de
alternativ Nutzung einer Subdomain mobile.design-maier.de oder eines Unterverzeichnisses design-maier.de/mobile
automatische Erkennung mobiler Endgeräte und Weiterleitung auf handyfreundliche Seite, so dass der Nutzer nach Eingabe von design-maier.de z.B. automatisch auf design-maier.de/mobile weitergeleitet wird

Quelle: Mobile Web Developers Guide von DotMobi

Stichworte: WAP, iPad, iPhone, XHTML, WML

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Mobile Endgeräte

Hier könnt ihr eure Zusammenfassung veröffentlichen.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Multimediale Inhalte

(Digitale) Inhalte wie z.B. Text, Pixelbilder, Grafiken, Video, Animation oder Ton

Merkmale multimedialer Inhalte

Möglichkeit der Interaktion (z.B. durch Navigation, Manipulation, Steuerung)
Multikodalität: die Inhalte sind auf verschiedene Art und Weise verschlüsselt – symbolisch (z.B. verbal), abbildhaft (z.B. realgetreu oder schematisch)
Multimodalität: Entschlüsselung (Wahrnehmung) der Inhalte mithilfe unterschiedlicher Kanäle (Sinne) – meist auditiv, visuell (weitere Wahrnehmungsformen: z.B. taktil, gustatorisch, olfaktorisch)

Beispiele

Text = monokodal (symbolisch) / monomodal (visuell)
Text mit Sounds = multikodal (abbildhaft + symbolisch) / multimodal (visuell + auditiv)
Video = meistens multikodal (abbildhaft + symbolisch) / multimodal (visuell + auditiv)
…

Einsatz von multimedialen Inhalten – Vorteile

Bessere Merkbarkeit der Inhalte, wenn unterschiedliche Sinne angesprochen werden
Unterschiedliche Lerntypen (z.B. eher visuell oder auditiv geprägter Typ) können mithilfe von Interaktion die Aufnahme von Inhalten individuell steuern
Stichwort Barrierefreiheit: Inhalte können Menschen mit Wahrnehmungsbehinderung (z.B. Sehbehinderte, Gehörlose) zugänglich gemacht werden
…

Optimale Gestaltung multimedialer Inhalte

….

Grenzen multimedialer Inhalte

Weiterführende Links

http://de.wikipedia.org/wiki/Multimedia

http://www.medien.ifi.lmu.de/lehre/ws0809/mll/mll7b.pdf

http://de.wikipedia.org/wiki/Multimedia#Multimedia-Kommunikation_in_der_Kommunikationspolitik_des_Marketing

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Multimediale Inhalte

Allgemein
- Die richtigen Formate auswählen. Was wird wirklich benötigt um den wesentlichen Inhalt zu vermittel? (Kann kosten und Datenmenge sparen)
- Möglichst hohe Datenkompression mit möglichst kleinem Qualitätsverlust
- Realisierungsmöglichkeit ohne großen Programmieraufwand
- Festlegen der räumlichen und zeitlichen Beziehungen der Informationsobjekte
- Inhalte sollten spannend, informativ und ggf. emotional unterstützend sein (Hintergrundmusik)
- Wissenbereicherung und Erlebnis zugleich
- Angepasst an die Zielgruppe
Visuell
- Die Grafisch-Interaktive Benutzeroberfläche sollte auf den ersten Blick verständlich sein
- Die Bedienung sollte intuitiv und ohne große Anleitung möglich sein. (Ich sehe hier parallelen zumm Thema Screendesign)
Audio
- Klar verständliche und angenehme Sprecherspuren
- Sprecherspuren und Hintergrundmusik passend zum Inhalt. (Ein Heavy Metal Song in einem Erklärvideo könnte etwas vom Inhalt ablenken xD)

Merkmale multimedialer Inhalte
• Möglichkeit der Interaktion (z.B. durch Navigation, Manipulation, Steuerung)

• Multikodalität: die Inhalte sind auf verschiedene Art und Weise verschlüsselt – symbolisch (z.B. verbal), abbildhaft (z.B. realgetreu oder schematisch)

• Multimodalität: Entschlüsselung (Wahrnehmung) der Inhalte mithilfe unterschiedlicher Kanäle (Sinne) – meist auditiv, visuell (weitere Wahrnehmungsformen: z.B. taktil, gustatorisch, olfaktorisch)

Beispiele

Text = monokodal (symbolisch) / monomodal (visuell)

Text mit Sounds = multikodal (abbildhaft + symbolisch) / multimodal (visuell + auditiv)

Video = meistens multikodal (abbildhaft + symbolisch) / multimodal (visuell + auditiv)

Einsatz von multimedialen Inhalten – Vorteile
• Bessere Merkbarkeit der Inhalte, wenn unterschiedliche Sinne angesprochen werden
• Unterschiedliche Lerntypen (z.B. eher visuell oder auditiv geprägter Typ) können mithilfe von Interaktion die Aufnahme von Inhalten individuell steuern
• Stichwort Barrierefreiheit: Inhalte können Menschen mit Wahrnehmungsbehinderung (z.B. Sehbehinderte, Gehörlose) zugänglich gemacht werden

Einsatz von multimedialen Inhalten – Grenzen
• Besonders für Menschen mit Sehbehinderungen ist es schwierig bis unmöglich, visuelle Inhalte zu erfassen.
• Optimale Zugänglichkeit von Film oder Video für diesen Nutzerkreis wird durch Audio-Beschreibungen gewährleistet.
• Bei Filmen mit langen Dialogen und viel Aktion auf der Handlungsebene gelangt diese Technik schnell an ihre Grenzen, da die Pausen auf der auditiven Ebene zu kurz sind, um einen ausreichenden Eindruck der visuellen Gegebenheiten vermitteln zu können.

Eine mögliche Lösung ist es, in diesen Fällen die Inhalte über Text-Transkriptionen zugänglich zu machen. Dabei handelt es sich um eine Textdatei, in der sowohl die Handlungen als auch die Sprachdialoge beschrieben sind. Sehbehinderte Menschen können sich durch Screenreader und Braille-Zeilen diese Texte vorlesen lassen.

Gänzlich gelöst wird dieses Problem durch den Einsatz von SMIL 2.0 (Synchronized Multimedia Integration Language). Diese Technologie erlaubt es, unterschiedlichste multimediale Inhalte zu kombinieren, zu synchronisieren und zu steuern. Unter anderem ist es möglich, eine multimediale Präsentation (also beispielsweise ein Video mit separierter Tonspur) zu unterbrechen, eine akustische Beschreibung der visuellen Ebene einzuspielen, und danach die ursprüngliche Präsentation an exakt der Stelle fortzusetzen, an der sie angehalten wurde.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Audiobearbeitung

Diese

Site

gibt einen netten und auch für Laien verständlichen Ansatz für die Bearbeitung von Audiodaten.

Das Tutorial geht dabei auf die Grundeinstellungen / Qualität ein:

Abtastfrequenz (Samplingrate z..B: 96kHz)
Abtasttiefe (z.B: 24 Bit)
Anzahl der Kanäle (Mono, Stereo)

Kriterien für eine gute Aufnahme mit dem Mikrofon:

Richtiges Auspegeln der Geräuschspitzen (Aussteuern des Inputsignals)
Normalisieren der Aufnahme für eine ausbalancierte und gleichstarke Klangkulisse

Verschiedene Optione um Tracks nach zu bearbeiten:

Schneiden (Stellen rausschneiden, hinzufügen oder versetzen)
mixen (Samples auf mehreren Ebenen mischen)
faden (Langsames Einspielen oder Ausklingen eines Samples)
loopen (Schleife zum mehrfachen/endlosen Abspielen)

Weiterführende Links:

http://mg2012.bestweb.cc/?audiodatenbearbeitung

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

OptIn-Verfahren
Um einem Benutzer Werbung in Form eines Newsletters zukommen zu lassen muss sich der Benutzer eintragen. Das ist wichtig den in Deutschland ist es zwingend notwendig das der Benutzer durch eine aktive Handlung (das Eintragen) sein Einverständniss signalisiert.

Die Werbewirtschaft hat dieses Verfahren aber verfeinert um an valide Kontaktdaten zu kommen. DoubleOptIn Verfahren. Damit soll verhindert werden das die Benutzer sich mit einer falschen Mailadresse eintragen. Im DoubleOptIn Verfahren erhält der Benutzer nach seinem Eintrag eine weitere Bestätigungsmail in dieser findet er einen Authorisierungslink . Im Grunde ähnlich einer Foren Anmeldung. Erst danach ist das Abo aktiv und der Benutzer eingetragen.

Bestandteile eines Newsletters
http://www.kundennutzen.ch/newsletterbestandteile.php

http://www.dialogue1.de/blog/index.php?/archives/253-Alle-wichtigen-Newsletter-Bestandteile-im-UEberblick.html

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Online-Formular

Ein Online-Formular kann auf zwei Arten verschickt werden:

Einmal mit der „GET“ Methode dort werden die Daten in Form von Parametern an die URL angehängt und mit dieser sichtbar verschickt. Auf dem Server bzw. auch später im Browser kann auf diese Parameter zurückgegriffen werden. Nachteil: Die Daten sind im Browser sichtbar und es kann keinerlei Sicherheit gewährt werden, zudem können auch maximal nur 1000 Zeichen verschickt werde.

Zweite Methode wäre die „POST“ -Variante, dort werden die Daten mit Hilfe des http-Protokolls im Header der Daten übertragen. Dadurch sind diese für den User unsichtbar. Daten, die mit dem Post verschickt werden, können auch verschlüsselt werden. Neben Textdaten können auch binäre Informationen (z.B. Bilder) verschickt werden. Die Datenmenge ist nicht begrenzt.

Aufgaben eines Formulars

Mit Hilfe von Formularen können Informationen des Benutzers zum Webserver
übertragen und dort ausgewertet werden. Dieses zentrale Element interaktiver Webseiten ermöglicht beispielsweise:
• Suchmaschinen
• Übertragen von Benutzerdaten z. B. Anschrift, Bankverbindung,
• Auswählen und Bestellen von Waren im Webshop,
• Kommunizieren über Gästebücher, Foren, Chats.

Während die Elemente eines Formulars in HTML geschrieben werden, ist
zur Verarbeitung der eingegebenen Formulardaten eine Skriptsprache wie JavaScript bzw. PHP erforderlich.

Für ein Online-Formular gibt es unterschiedliche Formular-Felder / Boxen:

Versteckte Felder sind für den Nutzer unsichtbar und dienen der Übertragung
von Informationen, ohne dass der Benutzer etwas eingeben muss.
Dies könnte beispielsweise die Bestellnummer oder der Preis eines bestellten
Artikels sein.

Gestaltung von Formularen

Pflichtfelder

Durchgesetzt hat sich die Methode, Pflichtfelder mit einem Stern (*) zu markieren.

Der Hinweis, dass es sich hierbei um ein Pflichtfeld handelt (Legende), sollte über den Textfeldern stehen. Sollte also vor der Eingabe seiner Daten zu lesen sein, da es sich bei dem Stern auch um optionale Eingabefelder handeln könnte.

Weniger ist mehr. Mit Pflichtfeldern ist natürlich gewissenhaft umzugehen. Datenpreisgabe ist für die Meisten nachwievor ein sensibles Thema.

Fehlermeldung

Das wichtigste: Gut sichbar unterbringen!

Der User muss sofort sehen, dass etwas nicht geklappt hat. Eine verständlicher Einzeiler sollte den User auf das Problem hinweisen.

Optimalerweise wird das fehlerhafte Eingabefeld markiert um den User schnell zum korrekten Abschicken des Formulares zu führen.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Pflichtfelder

Bewertung:

Durchschnitt: 3 (3 Stimmen)

PDF für Online-Medien gestalten

Prüfungsgebiet 7: Daten für verschiedene Ausgabeprozesse aufbereiten

Erste Ideensammlung: Dateigröße, Joboptions für Weboptimierung, Verlinkungen in PDF-Dokumenten, Sicherheitseinstellung (z.B. Sperren des PDF für Veränderungen), Auflösung (72-dpi-Mythos)

TIPP:

www.pdf4web.de (Kommentar von Poergen)

Bitte den Beitrag direkt ergänzen bzw. erweitern und nicht nur kommentieren, so dass die Beiträge nach und nach wachsen und alle besser lernen können.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

PHP-Formularauswertung

HTML-Formulare können ein HTTP-Request unter der im method-Attribut des Formulars festgelegten Methode erzeugen. Dies kann zum Beispiel ein GET-Request oder ein POST-Request sein. Der Endpunkt des Request wird über das action-Attribut des Formulars bestimmt und gibt an wohin der Request gesendet wird.

Ablauf

Nehmen wir beispielsweise ein Projektverzeichnis mit folgender HTML-Datei an.

<form method=post action=form.php>
    <input type=email name=email>
    <input type=submit value=Senden>
</form>

Bei der Absendung werden die Inhalte des Formulars, hier die Texteingabe der E-Mail, als HTTP-POST-Request an die festgelegte Datei form.php übermittelt.

<?php
if (
    $_SERVER['REQUEST_METHOD'] === 'POST' &&
    isset($_POST['email'])
) {
    // …
} else {
    die('Ungültige Anfrage');
}

Die PHP-Datei wird aufgerufen und ausgeführt, hierbei wird zunächst überprüft, ob es sich tatsächlich um eine POST-Anfrage handelt und ob das Feld der E-Mail überhaupt in dem Anfrage-Körper enthalten ist. Ist das der Fall, kann das Script fortgesetzt werden, ist das hingegen nicht der Fall und mindestens eine der beiden Konditionen ist nicht wahr, so wird die Ausführung des Scripts sofort beendet und eine entsprechende Meldung wird als Antwort zurückgesendet.

Validierung

Sind die richtigen Inhalte mit der richtigen Übertragungsmethode eingegangen müssen aus Sicherheitsgründegen unbedingt auch die Inhalte der übertragenen Werte validiert werden.

Hierbei geht es darum zu prüfen, ob ein übertragenes Feld auch tatsächlich den Vorgaben seines Inhaltes entspricht. Das heißt, dass geprüft werden muss, ob ein Feld, dessen Inhalt eine Zahl sein soll, auch tatsächlich eine Zahl ist oder ob ein Eingabefeld für eine E-Mail-Adresse auch tatsächlich eine E-Mail-Adresse beinhaltet.

PHP bietet für diesen Zweck eine Reihe von Funktionen, die genau das tun: https://www.php.net/manual/en/ref.filter.php

$email = filter_input(
    INPUT_POST,
    'email',
    FILTER_VALIDATE_EMAIL
);

if ($email === false) {
    die('Ungültige E-Mail-Angabe');
}

Sanitization

Sind alle Werte geprüft und haben sich als valide herausgestellt müssen die Inhalte nun noch der sogenannten Sanitization unterzogen werden, um die Werte auch gefahrlos in der Weiterverarbeitung darstellen zu können. Hierbei werden alle potenziell gefährlichen Inhalte in den Werten entfernt oder so umgewandelt, dass diese bedenkenlos ausgegeben werden können. Das ist wichtig, da sichergestellt werden muss, dass zum Beispiel von Außen kein Fremdcode eingeschleust werden kann.

$email_sanitized = filter_var(
    $email,
    FILTER_SANITIZE_EMAIL
);

echo <<<HTML
    Deine E-Mail ist $email_sanitized
HTML;

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Formularverarbeitung mit PHP

Ganz simpel!

Auf der HTML-Seite hat man irgendein Formular.

    <form method="POST" action="formularverarbeitung.php" >

        <input type="text" name="betreff">

        <textarea name="kommentar"></textarea>

        <input type="submit" value="Speichern">

    </form>

Welche Art von Feldern in dem Formular stehen, ist egal. Was man braucht ist der "name". In der PHP-Datei, an die es geschickt wird, kann man den Inhalt nämlich unter diesem Namen abrufen und in Variablen speichern.

    <?php

        $betreff = $_POST['betreff'];

        $kommentar = $_POST['kommentar'];

    ?>

Wenn das Formular mit method="GET" funktioniert, dann muss da anstelle $_POST['...'] allerdings $_GET['...'] stehen. Man kann auch einfach $_REQUEST['...'] schreiben, denn das geht für beide.

Nachfolgend kann man mit den Variablen anstellen, wonach einem der Sinn steht... In eine Datei schreiben, in die Datenbank schreiben oder auch einfach nur ausgeben.

    <div class="beitragstitel">

        <h2><?php echo $betreff; ?></h2>

    </div>


    <div class="beitrag">

        <?php echo $kommentar; ?>

    </div>

Nicht schlecht, aber für Newbies ein bisschen viel auf einmal ;)
Tutorial auf Quakenet: http://tut.php-q.net/de/post.html

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

HTML

Webseitenherstellung

Programmierung von Medienprodukten

interaktive Formulare

Bewertung:

Durchschnitt: 5 (1 Stimme)

PHP-Kontrollstrukturen

If-Anweisung (mit else):
Formel:
if (Bedingung) {
Anweisungsblock;
} else

Beispiel:

<?php
$zahl=0;
if ($zahl=0) {
echo "Die Zahl ist $zahl."
} else {
echo "Die Zahl beträgt über 0."
}
?>

Erklärung: Wir erstellen die Variable $zahl und geben dieser den Wert 0. Strings mit Anführungsstrichen oben, Integer ohne. Per If-Abfrage prüfen wir nun in Klammern, ob die Variable den Wert 0 hat. Ist dies der Fall wird der Text "Die Zahl ist $zahl." ausgegeben. $zahl wird durch ihren Wert 0 ersetzt.
Ist der Wert ein anderer als 0, wird der Else-Befehle ausgegeben, dieser beinhaltet keine spezielle Bedingung, sondern lediglich den Echobefehl "Die Zahl beträgt über 0".

While-Schleife:
Formel:
$kontostand=0;
while ($kontostand < 100) {
echo "Dein Kontostand beträgt $kontostand Euro<br>";
$kontostand = $kontostand + 5;
}

Erklärung: Solange (while) die Variable $kontostand den Wert 0 hat, wird die Schleife ausgeführt. Die Schleife gibt jedes Mal den aktuellen Betrag aus und erhöht die Variable dann um 5 (+5). Danach wird erneut geprüft, ob die Bedingung true (Kontostand unter 100) ist und die Anweisung wird erneut ausgeführt. So lange, bis diese nicht mehr true ist.

For-Schleife:
Beispiel:
$kontostand=0;
for ($kontostand = 100; $kontostand >0; $kontostand -=5) {
echo "Dein Kontostand beträgt $kontostand Euro<br>";
}

Erklärung: Die For-Schleife kennt bereits das Zielergebnis und gibt an wie dieses erreicht werden soll. Es ist ebenfalls möglich die For-Schleife durch eine Break-Anweisung zu unterbrechen. In der For-Schleife wird definiert, dass der Startwert 100 beträgt und diese so lange laufen soll wie die Variable einen Wert über 0 hat (>0) hat. Durch die dritte Angabe ($kontostand -=5) werden die Schritte definiert. Mit jedem Durchgang, in dem die Variable einen Wert über 0 hat, werden 5 abgezogen. 100, 95, 90, 85, 80 ... 5
(Startwert, Bedingung, Schleifenschritt).

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

#php #kontrollstrukturen

Bewertung:

Bisher keine Bewertung

PHP-Variablen-Deklaration

PHP = serverseitige Programmiersprache
Variable = Speicherplatz für Daten, Daten können neu zugewiesen werden, eine Variable wird "deklariert"

PHP-Variablen

eine PHP-Variable beginnt mit dem $-Zeichen, danach kommt der Name der Variable
der Name der Variable beginnt mit einem Buchstaben oder einem Unterstrich ( _ )
PHP-Variablen sind case sensitve, d.h. es wird zwischen Groß- und Kleinschreibung unterschieden
es dürfen keine Umlaute, Leerzeichen oder Sonderzeichen für den Namen verwendet werden
ein PHP-Variablen-Name darf nicht mit einer Nummer beginnen

Beispiel:

<?php $txt = "Hello world!"; $x = 5; $y = 10.5; ?>

Datentypen

PHP-Variablen können die gleichen Datentypen haben wie z.B. JavaScript:

Dezimalzahlen (mit . und nicht , getrennt)
ganze Zahlen
Text (string)
Wahrheitswerte (bolean)

PHP-Variablen können stets neu deklariert werden und somit auch ihren Datentyp ändern.

Seit PHP 7 ist es jedoch möglich, einer Variable bei Deklaration einen Datentyp zu zu weisen. Wird der Datentyp im laufe des Codes einmal falsch deklariert, gibt das Programm einen Error zurück.

___________

Quelle: https://www.w3schools.com/php/php_variables.asp , Stand 12/22

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Passwortverschlüsselung

Hier könnt ihr eure Zusammenfassung veröffentlichen.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Proxy-Server

Was ist ein Proxy-Server?

Wenn Sie mit Ihrem Computer eine Internetverbindung aufbauen, zum Beispiel um eine Webseite aufzurufen, senden Sie als Client Ihre IP-Adresse, die zu Ihrem PC gehört, vergleichbar mit einem digitalen Fingerabdruck.

Wenn Sie als Client eine Webseite abrufen, schicken Sie eine Anfrage an den Server, auf dem die Inhalte der Webseite liegen, und der Server sendet die Inhalte an Sie zurück.

Ein Proxy-Server ist ein Server, der zwischen Ihren PC und den Ziel-Server geschaltet wird. Er fungiert sozusagen als Mittelsmann.

Wenn Sie mit aktiviertem Proxy-Server eine Anfrage senden, kommt diese zunächst beim Proxy-Server an. Dieser sendet die Anfrage dann mit seiner eigenen IP-Adresse weiter. Die Inhalte vom Zielserver werden an den Proxy-Server zurückgeschickt und dann zu Ihnen weitergeleitet.

Wozu dient ein Proxy-Server?

Ein Proxy-Server kann verschiedenen Zwecken dienen:

Offensichtlich ist, dass Sie mit einem Proxy-Server Ihre Identität verschleiern können. Es wird nicht Ihre eigene IP-Adresse gesendet, sondern die des Proxys.

Proxy-Server können aber auch als [Cache] dienen. Webseiten oder Inhalte, die oft benötigt werden, können auf dem Proxy-Server zwischengespeichert werden. So muss nicht jede Anfrage, die beim Proxy ankommt, weiter zum Ziel-Server geleitet werden. Wenn der angefragte Inhalt im Proxy-Cache liegt, wird er direkt zu Ihnen zurückgesendet.

Wenn Sie einen Proxy-Server verwenden, der im Ausland steht, können Sie dem Ziel-Server vorgaukeln, die Anfrage käme nicht aus Deutschland. So können Sie zum Beispiel [GEMA-Sperren bei YouTube umgehen].

https://praxistipps.chip.de/was-ist-ein-proxy-server-einfach-erklaert_41082

Definition 6.Auflage Informationen verbreiten ( Medien gestalten und herstellen)

Proxyserver ermöglichen schnelleres Surfen, indem sie als Cache für den Internetzugriff fungieren
- gleiche Anfragen werden aus dem schnelleren Cache geladen, statt aus dem langsameren Internet

Arten von Proxyservern

Cache-Webproxies

speichert Kopie der besuchten Internetseiten
findet Proxyserver Seite im lokalen Cache, werden Daten direkt an Nutzer gesendet
dadurch können Seiten schneller und zufälliger aufgerufen werden

Filternde Webproxies

Filtern und Blockieren von Teilen des Netztes (z.B. in Unternehmensnetzwerken eingesetzt, um bestimmte Webseiten zu blockieren)
somit auch Möglichkeit vor Viren und bösartigen Inhalten zu schützen

Reverse Proxies

Anfragen aus dem Internet werden an internen Webserver weitergeleitet;
dieser wird aber nur kontaktiert, wenn der Reverse-Proxy die Anfrage nicht aus seinem eigenen Cache beantworten (und somit selbst abarbeiten) kann
Webserver sind also nicht direkt erreichbar
einfache Lastverteilung möglich (Verteilung von Anfragen auf verschiedene Server)
Verhinderung von unberechtigten Zugriffen
Zugriffsberechtigung für Server kann zentral von einem Proxy abgewickelt werden

CGI-Proxies

Nutzer meldet sich über spezielle Webseite an, um via Proxy Zugang zu Server zu erhalten (z.B. zum Umgehen von Blockaden in Schul- und Unternehmensnetzwerken)

Einteilung nach Sichtbarkeit:

Transparent

verbirgt IP-Adresse des Nutzers nicht; identifizieren sich bei Webseiten als Proxyserver und geben ursprüngliche IP-Adresse der Anfrage weiter

Anonym

identifizieren sich bei Webservern als Proxy, geben aber IP-Adresse des Nutzers nicht weiter
mäßige Anonymität; Webseiten können erkennen, dass es sich um Proxy handelt und Zugang blockieren

Hoch-Anonym (Elite-Proxy)

identifizieren sich selbst nicht als Proxy und geben IP-Adresse des Nutzers nicht weiter
vergleichbar mit VPN, aber nicht so sicher (VPN verschlüsselt Daten zusätzlich)

https://vpnoverview.com/de/privatsphaere/anonym-surfen/was-ist-ein-proxyserver/

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Cache

Proxy

Abschlussprüfung

Bewertung:

Durchschnitt: 5 (2 Stimmen)

Zurück zum Fachpraktiker-Wiki

QR-Codes in Druckprodukten

EINLEITUNG

Vielleicht haltet ihr gerade meine Visitenkarte in der Hand oder blättert in einer Ausgabe der WELT-KOMPAKT. Vielleicht habt ihr QR-Codes auch an anderer Stelle gesehen und fragt euch, was man mit ihnen machen kann. QR steht für englisch: quick response = schnelle Antwort. Die Idee dahinter ist, dass Menschen im Alltag mit einem Klick mit ihrem Fotohandy Informationen aufrufen, abspeichern und weiterverarbeiten können.
QR-Codes gehören zur Familie der 2D-Barcodes die im Gegensatz zum herkömmlichen Barcodes sowohl horizontal als auch vertikal Informationen enthalten.

SCANNEN

Ein Beispiel: 2006 schaffte der Weltmeister im SMS-Tippen 160 Zeichen in ca. 42 Sekunden. Eine URL (Internetadresse) kann schnell 250 Zeichen lang sein. Um eine solche Internetadresse in den Handybrowser zu tippen, würde selbst der damalige Weltmeister über eine Minute brauchen. Genau hier liegt einer der Vorteile der QR-Codes: Sie ersetzen das Abtippen von Informationen und sparen dadurch Zeit und Nerven. Statt die Informationen einzutippen scannt man den QR-Code. Man benötigt dafür lediglich ein Java-fähiges Handy oder Smartphone mit Kamera. Mit der Kamera wird der Code fotografiert. Ein Programm im Handy analysiert den Code und decodiert die Informationen.

INHALTE VON QR-CODES

Für die Umwandlung in einen QR-Code sind folgende Informationsformen möglich:

Telefonnummer
SMS
Link (URL)
Text
vCard (Name, Telefonnummer, Email-Adresse)

READER UND GENERATOREN

Um aus einem Kamera-Handy einen QR-Code-Scanner zu machen benötigt man eine so genannte Reader-Software. Reader sind teilweise kostenlos. Es gibt sie von verschiedenen Herstellern und für unterschiedliche Handymodelle. Die Liste der unterstützten Handys ist von Reader zu Reader unterschiedlich. Bei dem N82, N93, N93i, N95, E66, E71 oder E90 von Nokia ist ein Barcode-Reader bereits bei Kauf vorinstalliert. Ob für das eigene Handymodell ein Reader verfügbar ist, und wie der Reader auf dem Handy installiert wird, erfährt man auf den Herstellerseiten.

Viele Reader-Anbieter geben auch die Möglichkeit online Codes zu erstellen. Die durch die Generatoren erstellten Codes können als Bild abgespeichert und beliebig weiterverarbeitet werden. Auf diese Weise kann man einfach eigene QR-Codes für beliebige Zwecke erstellen.
Außerdem gibt es eine Firefox-Exstension die per Klick die aktuelle URL im Browser in einen QR-Code umwandelt, und einen Webservice, der aus einem RSS Feed einen QR-Code generiert.

EINSATZMÖGLICHKEITEN FÜR ANALOGE QR-CODES

Beispiele analoger QR-Codes:
(Externe Links auf Fotos mit Beispielen)

Druckerzeugnisse (Zeitschriften, Poster, Visitenkarten, Aufkleber, Stempel, ...)
Textilien (T-Shirts, Schale, ...)
Bauwerke (Häuser, Mauern, ...)
Schmuck (Anhänger, Ketten, ...)
Haut (Tattoos, Stempel, ...)
Verpackungen (Kartons, Tüten, ...)
Lebensmittel (Schokolade, Chips, ...)
Dokumente (Ausweise, Tickets, ...)

DIGITALE WEITERVERARBEITUNG

Neben dem Aufruf einer Internetadresse im Handy-Browser gibt es noch andere Weiterverarbeitungsmöglichkeiten, abhängig vom codierten Informationstyp.

Aufruf mit Browser oder Telefon
Speicherung in Lesezeichen/Bookmarks, Kontakte/Telefonbuch, Notizen (indirekt, mittels copy & paste) und Verlauf/Historie
Weitergabe via SMS, MMS, E-Mail, Infrarot und Bluetooth

MOBILE-TAGGING

Mobile-Tagging kommt von englisch: tag = Kennzeichen und beschreibt das Hinterlassen von Informationen, die mobil genutzt werden können. Mobile-Tagging beschreibt somit die Verbreitung von QR-Codes im Allgemeinen.
Es werden drei wesentliche Verbreitungsarten unterschieden:

Commercial-Tagging
Public-Tagging
Private-Tagging

Während beim Commercial-Tagging kommerzielle Interessen im Vordergrund stehen, bedient Private-Tagging persönliche Motive. Public-Tagging hingegen dient gemeinnützigen Zwecken. Eine Ausführliche Beschreibung der verschiedenen Verbreitungsarten findet man unter der Mobile-Tagging Wikipedia-Seite.

SCHNITTSTELLE ZW. ANALOGEM UND DIGITALEM MEDIUM

Vergleich zwischen herkömmlicher und 2D-Codebasierter Informationsübergabe bei Mediumwechsel und damit verbundenem Workflow (Aufwand hoch, niedrig)

TECHNISCHE INFORMATIONEN

Jedes Bildformat denkbar
Geringe Dateigröße, da s/w
Trotz Rastergrafik ohne Qualitäts- oder Informationsverlust skalierbar (durch Pixelwiederholung)
Speicherkapazität QR-Codes:
- Numerisch: maximal 7.089 Zeichen
- Alphanumerisch: maximal 4.296 Zeichen
- Binär: maximal 2.953 Bytes
Individuelle Designmöglichkeiten

2D-CODES UND VERSCHLÜSSLUNG (CHIFFRE/KRYPTOGRAPHIE)

QR-Codes dienen hauptsächlich zur Übergabe von Information und nicht zur Verschlüssung im kryptographischen Sinne. Eine Verschlüsslung der Daten findet daher vor der Codierung statt. 2D-Codes, die verschlüsselte Daten enthalten, findet man auf den Online-Tickets der Deutschen Bahn, oder auf den mit Stampit (Deutsche Post) frankierten, Briefumschlägen.

Weiterführende Links

MOBILE TICKETING

Durch Mobile Ticketing ist es möglich jederzeit, und an jedem Ort, ein gültiges Ticket zu erwerben. Momentane Einsatzgebiete sind Eintrittskarten für kulturelle oder geschäftliche Veranstaltungen sowie Fahrkarten für den Nah- und Fernverkehr. Über den Handybrowser kann das gewünschte Ticket gekauft werden (mobile e-commerce). Danach erhält man eine MMS mit einem 2D-Code. Dieser wird vom Veranstalter gescannt und somit das Ticket auf Gültigkeit kontrolliert.

Quelle:http://qrcode.wilkohartz.de/

Weiterführende Links
http://www.copy-druck.net/cdwww/local/qr/

http://www.mediencommunity.de/content/mobile-tagging-leitfaden-zum-einsatz-von-qr-codes

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Responsive Webdesign

Was ist Responsive Webdesign

Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries das einheitliche Anzeigen von Inhalten auf einer Website zu gewährleisten. Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet und der Inhalt gänzlich und schnell vom Besucher aufgenommen werden kann.

Bedeutung von "Responsive Webdesign"

"Form follows function" - beim Responsive Webdesign folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone.

Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an – es reagiert auf und korrespondiert mit der Auflösung des mobilen Endgeräts. Responsive Webdesign folgt dem Nutzer, und nicht wie gegenwärtig, der Nutzer den meist starr konstruierten Layouts konventioneller Websites und Online-Shops.

Vorteile der "Mobile Website Optimierung"

Die Vorteile von Responsive Webdesign zeigen sich in Statistiken und Trends zur Nutzung mobiler Endgeräte. Der steigende Marktanteil von Smartphones und Tablets wie iPhone und iPad erzwingen auch das Umdenken beim Gestalten von Webseiten. Wurde bis dato für eine Bildschirmauflösung von maximal 1000px Breite auf dem Computer- Desktop optimiert, muss heutzutage auf eine Vielzahl verschiedener Endgeräte Rücksicht genommen werden:

Standard Auflösungen von Smartphones und Tablets:

Smartphones:

320px bis 480px

Tablets:

768px bis 1024px

Computer-Desktop:

1024px+

Bei einer strikten Trennung von Mobil- und Desktop-Version der Website, also einer nicht responsive fähigen Website, entsteht ein erhöhter Pflegeaufwand von redaktionellem Content und Bildmaterial. Dazu kommt, dass die Website unter Umständen für zukünftige Tablet- oder Smartphone-Formate eine dritte oder vierte Version des Layouts benötigt.

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
U5 Responsive Webdesign.pdf	1.43 MB

Bewertung:

Bisher keine Bewertung

Responsive Webdesign

Beim Responsive Webdesign wird eine Internetseite je nach Bildschirmgröße und/oder Device anders dargestellt, um die Besucherfreundlichkeit zu gewährleisten.
Webdesigner wählen diese Form, damit User eine Website unabhängig vom verwendeten Endgerät (Computer, Tablet, Smartphone....) problemlos nutzen können.

„Form follows function.“
– Funktion, Design und Inhalt folgen der jeweiligen Bildschirmauflösung

Zu berücksichtigende Besonderheiten

Größe des Geräts; Breite und Höhe des Browserfensters
Orientierung (Hoch-/Querformat)
unterschiedliche Eingabemöglichkeiten (Tastatur, Sprache, Touch)
eventuell unterwegs geringere Datenrate
direkter Zugriff auf Apps (z.B. Karten-App, Telefon)

Vorgehensweise

„Mobile first!“ – Optimierung für mobile Endgeräte hat die höchste Priorität
immer mehr Nutzer surfen mit Smartphone und Tablet im Internet
keine starre Gestaltung der Website mehr
Responsive Websites berücksichtigen unterschiedliche Anforderungen des Endgeräts
idealerweise nicht mehrere Versionen der Website, sondern gleicher Inhalt und Aufbau (Content und HTML) und Unterscheidung der Darstellung nur anhand unterschiedlicher Formatierungsbefehle (CSS)
hierzu verwendet man CSS Media Queries („Abfragen der Medien, welche die Website anzeigen“)

Empfehlungen

Haupthindernis herkömmlicher Seiten: Versuch eines pixelgenauen Designs
guter Ausgangspunkt für responsive Design: aktuelle Schriftgröße als Basisgröße
Schriftgrößen (und Maße) in relativen Größen wie „em“, damit eine größere Schriftgröße nicht das Design zerschießt
1em: vom Browser berechnete Schriftgröße des Elements
Schriftgröße kann (und sollte) als Basis für Breitenangaben von Elementen verwendet werden, daher prozentuale Breiten oder relative Angaben in em oder rem (root em = Wurzel-em), keine festen Pixelwerte
keine Höhenangaben für Elemente

Media Queries

um für unterschiedliche Endgeräte unterschiedliche Layouts zu generieren
zentrales technisches Feature, das Responsive Webdesign so quasi erst ermöglichte
CSS Media Query wird innerhalb eines CSS-Codeblocks über eine spezielle @media-Regel festgelegt;
darin enthaltene CSS-Selektoren und -Regeln werden nur unter der angegebenen Bedingung aktiviert

all: jegliches Ausgabemedium
screen: Darstellung der Inhalte einer Webseite/
auf einem scrollenden Bildschirm
print: Darstellung der Inhalte einer Webseite auf mehreren Seiten mit festen Dimensionen
speech: Vorlesen der Inhalte einer Webseite durch einen Sprach-Synthesizer

Einige am häufigsten genutzte Media Features:

width: Breite des Bildschirms in Pixeln abfragen
height:Höhe des Bildschirms in Pixeln abfragen
orientation: Bildschirm-Orientierung Hochformat/Querformat detektieren
resolution: Verfügbare Bildschirmauflösung erkennen

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Zurück zum Fachpraktiker-Wiki

Rich Media Technologie

Was ist mit Rich Media gemeint?

Eine Rich Media Anzeige beinhaltet Bilder oder ein Video und eine Art von Nutzerinteraktion. Die Anfängliche Last einer Rich Media Anzeige beinhaltet mindestens 40KB. Während die Werbebotschaft von Textanzeigen auf Worten und die von Displayanzeigen auf Bildern beruht, bieten Rich Media Anzeigen mehr Möglichkeiten, die Zielgruppe anzusprechen und einzubinden. Es gibt unter anderem Expanding-, Floating- und Peel Down-Anzeigen. Diese können auf gesammelte Messwerte zum Verhalten Ihrer Zielgruppe zugreifen, einschließlich der Anzahl an Expansionen, mehrerer Exits und Videowiedergaben.

Rich Media ermöglicht Agenturen die Erstellung komplexer Anzeigen, die eine starke Reaktion der Nutzer nach sich ziehen können. Die Anzeigen können dank Flash- oder HTML5 Technologie mehrere Content Ebenen in einem Placement erhalten: z.B. Videos, Spiele oder Tweets. Wenn man nur das einzige Ziel der Klickgenerierung oder ein ambitionierteres Ziel wie z.B. die Markenbekanntheit zu steigern haben, ist Rich Media das passende Werbeformat.

Quelle: https://support.google.com/richmedia/answer/2417545?hl=de

Rich Media ist ein Begriff aus dem Umfeld des Internets und bezeichnet Inhalte, die optisch und akustisch durch beispielsweise Video, Audio und Animation angereichert werden.

Eine verbreitete Technologie, die das Erzeugen von Rich-Media-Inhalten ermöglicht, ist Adobe Flash.

Quelle: http://de.wikipedia.org/wiki/Rich_Media

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Schrift im Internet

Wenn man sich mit Schrift im Internet beschäftigt ist es gut zunächst zu verstehen, wie die Darstellung durch den Browser funktioniert. Zumindest bei HTML-basierten Websites ist nur eine eingeschränkte Darstellung möglich. Browser können ohne Zusatz-Applikationen nur die sogenannten Systemschriften darstellen, denn sie können Schriftinformationen, die in HTML und CSS beschrieben werden, nur dann umsetzen, wenn die Schrift ebenfalls auf dem Rechner des Users vorhanden ist. Da die einzelnen Plattformen (MAC und PC) nicht immer identische Systemschriften haben ist es sinnvoll in der CSS-Beschreibung auch Alternativen anzugeben.

Als Alternative für Butons, Headlines oder Logos können Schriften in Grafiken umgewandelt werden oder über Angebote wie Typekit können auch – immer mehr – Nicht-Systemschriften eingebettet und dem Betrachter dargestellt werden.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Webseitenherstellung

Bewertung:

Bisher keine Bewertung

Screenlayout Optimierung

Siehe hier: http://www.mediencommunity.de/system/files/U12-Screenlayout-optimieren.pdf

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Prüfung

Mediengestalter

2012

Screenlayout Optimierung

Bewertung:

Bisher keine Bewertung

Seubert, Freddy (2010): Augmented Reality in der Werbung

Augmented Reality und der Einsatz dieser Technologie in der Werbung

Von Freddy Seubert, Beuth Hochschule für Technik Berlin, Studiengang Druck- und Medientechnik Master

Dieser Artikel behandelt eine neuartige Möglichkeit der Produkt- und Markenbewerbung durch die Verwendung innovativer Technologien aus dem Bereich der Augmented Reality.

Mit der steigenden Verbreitung von internetfähigen PCs und Smartphones hat auch die Erweiterung der Realität durch computergenerierte Informationen Einzug gehalten. Im weiteren Verlauf dieses Artikels sollen neben der Erklärung der Technologie die bereits existierenden Möglichkeiten aufgezeigt, sowie deren bereits umgesetzte bzw. zukünftig mögliche Verwendung durch Werbetreibende untersucht und beschrieben werden.

Inhalt

1 Relevanz des Themas

2 Entwicklung der Werbung

3 Erweiterte Realität

3.1 Geschichte der Erweiterten Realität

3.2 Funktionsweise der visuellen Erweiterung

1 Relevanz des Themas

Grundsätzlich kann man sagen, dass die Bewerbung von Produkten und/oder Dienstleistungen branchenübergreifend von hoher Bedeutung ist. Alleine aus diesem Grund lohnt es sich oftmals, über die neuesten Möglichkeiten der Werbung im Bilde zu sein.

Doch gerade in der Medienbranche spielen neue webbasierte Technologien eine große Rolle, da sich ein großer Teil dieser Branche auf dem Gebiet der Entwicklung von Internetanwendungen bzw. ganzheitlicher Werbekampagnen (also unter Berücksichtigung der Onlinewerbung) abspielt.

Meine persönliche Motivation hinter der Bearbeitung dieses Themas ist, dass ich freiberuflich neben dem Studium als Webentwickler und -designer arbeite und die Augmented Reality auch hier, v.a. im Bereich der User Interfaces und der Navigation, zahlreiche neue Möglichkeiten mit sich bringt.

2 Entwicklung der Werbung

Die Schaltung von Werbeanzeigen in Zeitungen und Magazinen nahm 1850 seinen Anfang. Seit diesem Zeitpunkt stiegen die Werbeausgaben und damit auch die Masse an Werbekampagnen beträchtlich. Heute gibt es kaum einen werbefreien Ort im öffentlichen Raum.

Doch Werbung muss in erster Linie die Aufmerksamkeit des Betrachters erregen, um Erfolg zu haben. Dies wird allerdings auf Grund der Reizüberflutung der Rezipienten immer schwieriger.

Schon seit Beginn der kommerziellen Werbung werden immer neue, frische Werbemöglichkeiten gesucht, über welche man sich die Aufmerksamkeit des Betrachters noch sichern kann. Dies sind zum einen neue Kanäle, zum anderen aber auch die Art der Aufmachung. Letzteres sieht man gut bei der Gegenüberstellung einer Anzeige aus vergangenen Tagen und einer etwas zeitnaheren:

Nachdem nun selbst die Online-Werbung, selbst mit animierten Flash-Bannern, immer weniger Aufmerksamkeit erzeugt, ist es vielleicht wieder Zeit für eine neue Form der Werbung?

3 Erweiterte Realität

Unter Erweiterte Realität (von engl. Augmented Reality, AR) versteht man die Erweiterung der Realitätswahrnehmung durch computergenerierte Elemente. Meist beschränkt sich diese Erweiterung auf die visuelle Darstellung von Informationen. Im Spektrum zwischen der Virtuellen Realität (von engl. Virtual Reality, VR), welche immersive, computergenerierte Umgebungen schafft, und der realen Welt, ist die Erweiterte Realität näher an der realen Welt. Sie schafft durch die Leistungsfähigkeit moderner Computerchips eine Verbindung aus natürlicher Umgebung und zusätzlichen Informationen.

3.1 Geschichte der Erweiterten Realität

Schon seit den 90er Jahren wird AR in seinen Varianten in Science Fiction Filmen verwendet. Der Begriff Augmented Reality sowie die erste real funktionierende Applikation dieser Art wurden sehr wahrscheinlich bei Boeing erfunden, da die Mitarbeiter bei der Verkabelung von Flugzeugen keine Fehler machen durften und sie aus diesem Grund mit einem mobilen Gerät ausgestattet wurden, welches computergenerierte Zusatzinformationen zur Verfügung stellte und diese mit der visuellen Realität verband. Natürlich erkannte auch das Militär schnell die Möglichkeiten dieser Technologie und trieb die Entwicklung stark voran.

3.2 Funktionsweise der visuellen Erweiterung

Ein AR-System besteht in der Regel aus 3 Komponenten:

Tracking System: Dient der Bestimmung der Position der Kamera bzw. des Benutzers im Raum.
Szenengenerator: Dieser Teil errechnet die zusätzlichen Informationen sowie deren Positionierung und ist ebenfalls ggf. für das Compositing der realen und virtuellen Teile zuständig.
Anzeigegerät: Dies ist das Display oder der Projektor mit dessen Hilfe die Informationen dargestellt werden.

Dabei wird im Allgemeinen zwischen zwei verschiedenen Arten von AR-Systemen unterschieden:

Optische Systeme: Die zusätzlichen Informationen werden, zum Beispiel über halbdurchlässige Spiegel in die reale Umgebung eingebunden.
Videobasierte Systeme: Die zusätzlichen Informationen werden erst mit einem Abbild der Realität verrechnet und dann über ein Display angezeigt.

In Bezug auf das Anzeigegerät lassen sich weiterhin verschiedene Kategorien von AR-Anwendungen spezifizieren:

Head-Mounted-Display: Die Informationen werden entweder über einen halbdurchsichtigen Spiegel auf die Netzhaut des Benutzers gesendet (optisches System) oder aber über eine Display-Brille angezeigt (videobasiertes System).
Projektionsdisplay: Die zusätzlichen Informationen werden direkt auf die Umgebung projiziert.
Handheld Display: Die zusätzlichen Informationen werden im Display eines mobilen Geräts (z.B. Mobiltelefon, Multimedia-Gerät) angezeigt.
Computer Display: Die zusätzlichen Informationen werden auf dem Computermonitor angezeigt.

Die letzten beiden Kategorien sind die bisher am weitesten verbreiteten und werden auch heute schon für professionelle Applikationen verwendet. Die Geräte, welche im Mittelpunkt der AR-Entwicklung stehen, sind:

Mobiltelefone (Kamera muss vorhanden sein, oftmals werden auch Lagesensoren und GPS-Sensor vorausgesetzt und von der Applikation verwendet)
Internetfähige PCs (eine Kamera muss vorhanden sein, oft wird auf Grund der Masse von anfallenden Daten eine Breitbandverbindung vorausgesetzt)

Gerade den AR-Anwendungen für Smartphones, also Mobiltelefonen mit einer weitreichenden Multimedia- und Sensorenausstattung wird hier eine große Zukunft prophezeit. Durch das Zusammenspiel verschiedener Technologien wie Kompass, Accelerometer und GPS entsteht „Das magische Auge“ (DE:BUG.138).

Die eigentliche Aufgabe von AR-Programmen ist die Analyse des Sichtfelds über die Kamera des Endgeräts, die Erkennung von Flächen, auf welchen Informationen dargestellt werden können bzw. von vorhandenen Informationen wie Gesichtern etc. sowie die Bereitstellung der zusätzlichen Informationen und deren Integration ins Bild. Hierzu existieren zwei technische Ansätze:

Markerbasiertes optisches Tracking

Für den Einsatz videobasierter Augmented Reality existieren einige markerbasierte optische Tracker Systeme. Die verwendeten visuellen Marker sind meist abstrakte, eckige Zeichen.

Der Tracker sucht den eingehenden Videostrom nach solchen Markern ab und berechnet anhand der gefundenen Markern die äußere Orientierung der Kamera in Bezug zu diesen.

Markerloses optisches Tracking

Das markerlose optische Tracking funktioniert durch zwei Prinzipien: Einerseits werden vom Trackersystem starke Kontrastunterschiede im sichtbaren oder infraroten Bild erkannt (bspw. der Kontrast zwischen der Pupile und dem Weißen eines Menschen zum Tracking der Augen), andererseits werden aufeinanderfolgende Bilder verglichen, um eine mögliche Bewegung der Kamera festzustellen (hierbei verschieben sich die markanten Punkte). Mit dem markerlosen Tracking ist zum Beispiel die Gesichtserkennung möglich.

3.3 Beispiele

Viele AR-basierte Anwendungen haben sich schon fest im öffentlichen Raum etabliert. Aufgrund der größten Reichweite ist das beste Beispiel dafür die Erweiterung durch computergenerierte Informationen im Bereich der Sportübertragung: So wird schon seit einigen Jahren bei der Übertragung von Fußballspielen eine virtuelle Abseits-Linie in fragwürdigen Zeitlupen eingeblendet.

Aber diese Systeme blenden die entsprechenden Grafiken nur für eine Position mit dem zugehörigem Blickwinkel ein. Die AR-Systeme der nächsten Generation sind jedoch in der Lage, die Darstellung auf die Position und Ausrichtung des zu überlagernden Objekts anzupassen.

Es folgen beispielhaft zwei aktuelle AR-Anwendungen mit einer kleinen Beschreibung:

Wikitude

(http://www.wikitude.org/)

Dieses Programm verknüpft die per Gerätekamera und Sensoren gesammelten Informationen mit aus dem Internet abgerufenen Daten zur jeweiligen Umgebung. Letztere umfassen beispielsweise die Bereiche Sehenswürdigkeiten, Restaurants, Banken, und viele weitere.

GE ecomagination

(http://ge.ecomagination.com/smartgrid/#/augmented_reality)

Beispielhaft für eine Vielzahl solcher Anwendungen im Internet sei die Applikation ecomagination der Firma GE aufgeführt. Diese vermittelt zwar keine zusätzlichen Informationen, sorgt aber durch die Verwendung der Augmented Reality für eine hohe Awareness bei den Nutzern.

Hat man den auf der Seite verfügbaren Marker ausgedruckt, kann dieser von der Applikation über eine angeschlossene Webcam erkannt werden. Nach der Bestimmung der Lage des Markers im Raum wird dann ein 3D-Objekt in die Szene gerendert.

3.4 Probleme

Wie schon im vorigen Abschnitt beschrieben, existieren bereits zahlreiche AR-Anwendungen, sowohl zur Nutzung durch Mobiltelefone (Beispiel: Wikitude) als auch durch PCs (Beispiel: GE ecomagination). Doch nicht alle auf dem Markt verfügbaren Anwendungen sind so ausgereift wie die vorgestellten Beispiele.

Oft haben die Anwendungen mit einem oder mehreren der folgenden Punkte ihr Schwierigkeiten:

Nachführung der Bilder bei Bewegung der Kamera
Ausreichende Energieversorgung mobiler AR-Systeme auf Grund hoher Speicherlast und Rechenintensität
Ausreichende Sensorgenauigkeit bei der Erkennung von Markern (visuell) und Positionen (GPS, Kompass, Neigungs- und Bewegungssensoren)
Ausreichende Verfügbarkeit und Übertragung der Daten. (vor allem komplexe, texturierte Modelle benötigen zur Übertragung oft eine extrem große Bandbreite)
Realitätsnahes Compositing (oft werden die zusätzlichen Informationen nicht ausreichend gut in die reale Umgebung eingebunden und wirken fehl am Platz)
Optimales User Interface (gerade die Eingabe von Informationen für AR-Anwendungen auf mobilen Endgeräten gestaltet sich auf Grund kleiner Hardware-Tasten oft schwierig)

3.5 Einsatzgebiete

Die Erweiterte Realität ist ein bereits vereinzelt eingesetztes Werkzeug der Werbeindustrie. Zumindest in der Form der virtuellen Erweiterung von real existierender Werbung. Im Folgenden zwei Beispiele:

Die Erweiterung von Printprodukten

Sollen zusätzliche Informationen wie z.B. 3D-Modelle auf einem Printmedium dargestellt werden, so bietet Augmented Reality hierfür eine Möglichkeit. Durch den Druck von Markern bzw. leicht von der Software analysierbaren Bilddaten in das entsprechende Magazin können durch eine ebenfalls im Magazin abgedruckte Webadresse, auf welcher eine Applikation zur Erkennung des Markers über die Webcam und zum Einbinden der Zusatzinformationen läuft, animierte 3D-Modelle, Videos, Spiele und sonstiges integriert werden. In einigen AR-Blogs im Netz wird diese Technologie gar schon als Print 2.0 bezeichnet.

Ein Beispielvideo (hier zur Vorstellung des neuen Mini) hierzu befindet sich beispielsweise unter: http://memebox.com/futureblogger/show/1419-mini-brings-augmented-reality-into-print-ads

Die Erweiterung von Kameradaten

Das Fastfood-Restaurant Burger King nutzt beispielsweise die AR-Technologie für das Werbemittel Onlinebanner. In diesem Fall kann der Betrachter nach der Aktivierung seiner Webcam einen 1$ Schein in die Kamera halten und bekommt von der Applikation verschiedene Burger angezeigt, welche für einen Dollar erhältlich sind. Hier sieht man auch gut, dass die Software inzwischen auch in der Lage ist, Gesichter zu erkennen – ist kein Dollar-Schein im Bild, so bekommt der Betrachter eine virtuelle Burger King Maske aufgesetzt.

Der Link zu einem Beispielvideo: http://creativity-online.com/work/burger-king-bk-value-menu-banner/17743

Beide Beispiele sorgen für eine hohe Awareness beim Nutzer und, zumindest im ersten Fall, für die Einbindung von Informationen, welche in dieser Art und Weise im verwendeten Medium nicht hätten gezeigt werden können.

4 Fazit & Ausblick

Bisher beschäftigen sich vor allem große Firmen (deutsche Autohersteller, weltweit aufgestellte Energieversorger, usw.) mit den Möglichkeiten der Werbung durch AR. War es in den Anfängen noch erforderlich, eigene Systeme zu programmieren, so existieren inzwischen mehrere, kostenlose wie proprietäre Software-Frameworks, auf welchen eigene Applikationen kostengünstiger als bisher entwickelt werden können. Über das letzte Jahr hinweg wurde die Erweiterung der Realität vor allem auch kommerziell immer häufiger benutzt. Dies wurde auch ermöglicht durch die, wie bereits erwähnt, gestiegene Verbreitung von Smartphones und Webcams.

Mit Sicherheit kann man sagen, dass die Zukunft neue Werbeformen mit sich bringt. Bei einer weiterhin so schnellen Entwicklung der erforderlichen Technologien und einer weiterhin so schnellen Verbreitung von Smartphones bzw. zukünftigen Devices wie AR-Brillen oder ähnlichem, ist es fast schon logisch, dass die Werbeindustrie auf diesen Zug aufspringen und die Präsenz virtueller Werbung durch Applikationen auf zukünftige Generationen nicht mehr befremdlich wirken wird. „Wir wollen eine Welt mit Untertiteln.“ (DE:BUG.138) Mittelfristig wird wohl kaum ein Unternehmen an der Bewerbung durch AR vorbeikommen.

Mittelfristig wird wohl nicht nur die Erweiterung real existierender Werbung, sondern auch die Projektion bzw. Anzeige von rein virtueller Werbung möglich sein.

5 Quellen

Bilder:

Werbeplakate Apple via http://www.apple.com

Foto eines Markers: http://campar.in.tum.de/Chair/TischFeuerWerk (Stand: 09.02.2010)

Foto Gesichtserkennung: http://www.research.ibm.com/ecvg/biom/facereco.html (Stand: 09.02.2010)

Beispielfoto GE ecomaginagion via http://ge.ecomagination.com

Screenshot Wikitude via http://www.wikitude.org/

Informationen:

INTERNET: http://de.wikipedia.org/wiki/Erweiterte_Realität (Stand: 09.02.2010)

INTERNET: http://de.wikipedia.org/wiki/Werbepsychologie (Stand: 09.02.2010)

INTERNET: http://blog.12snap.com/2009/06/realitat-mal-anders-–-augmented-reality-und-ihre-rolle-in-der-werbung/ (Stand: 09.02.2010)

INTERNET: http://www.spiegel.de/netzwelt/web/0,1518,665776,00.html (Stand: 09.02.2010)

MAGAZIN: c‘t 2009, Heft 20

MAGAZIN: DE:BUG.138

DIPLOMARBEIT: Virtualisierung realer Objekte mit Hilfe von Augmented Reality (Autor: Lars Quentmeier)

Dieses Werk bzw. dieser Inhalt ist unter einer Creative Commons-Lizenz lizensiert.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Startseite

Welchen Status hat die Startseite? Was sollte der User direkt darüber finden?

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Suchmaschinenoptimierung

Suchmaschine = Google? Mit einem Marktanteil von knapp 90% (Quelle: www.webhits.de)

Wenn Sie sich also fragen, wie Sie einer Website einen möglichst vorderen Platz im Ranking von Suchmaschinen verschaffen, müssen Sie sich hauptsächlich damit beschäftigen, wie dieses Ranking bei Google funktioniert.

Nun ist diese Frage nicht leicht zu beantworten, weil die Algorithmen zur Indizierung und Ermittlung des Rankings bei Google geheim sind.

An dieser Stelle können wir Ihnen deshalb nur einige allgemeine Hinweise geben:

Suchbegriffe (Keywords)
Im ersten Schritt müssen Sie überlegen, welche Suchbegriffe (Keywords) potenzielle Interessenten eingeben würden, um nach Ihrer Website zu suchen.

Unter www.ranking-check.de kann man testen, wie oft ein Suchbegriff tatsächlich benutzt wird.

Damit diese Begriffe durch Suchprogramme auch gefunden und in die Datenbank aufgenommen werden,

sollten sie auf den Webseiten möglichst oft vorkommen, v. a.

im Titel (<title>),

in Überschriften (<h1>, <h2>,...)

und im Text.

Suchprogramme prüfen nicht nur, ob die Begriffe irgendwo vorkommen, sondern auch, welche Priorität diese besitzen. So hat eine <h1>-Überschrift eine höhere Priorität als eine <h2>-Überschrift.

Titel
Einen besonderen Stellenwert besitzt der Titel (<title>) der Website, da dieser in der Ergebnisliste angezeigt wird und den Link zur Webseite beinhaltet.

PageRank
Entscheidend für die Platzierung bei Google ist der PageRank-Algorithmus, der von den Google-Gründern Larry Page und Sergey Brin entwickelt wurde.

Demnach besitzt eine Webseite einen hohen Stellenwert (PageRank), wenn

viele andere Seiten einen Link auf diese Website besitzen und

diese Seiten selbst einen hohen PageRank besitzen und

die Webseite viele Seiten verlinkt.

Das Motto lautet also:

Wichtig ist, was andere wichtig finden. Noch wichtiger ist dies, wenn die anderen selbst wichtig sind.

Meta-Tags
Metainformationen spielen für Suchmaschinen keine große Rolle mehr. Frames Seiten mit Frames sind problematisch, weil die wichtige Startseite keinen Inhalt besitzt, sondern das Frameset definiert.

Flash
Flash-Intros oder komplette Flash-Seiten sind in puncto Suchmaschinen ebenfalls problematisch, weil sie in kompakter Form (als SWF-Datei) in HTML eingebettet werden und damit durch Suchprogramme nicht ausgewertet werden können.

Bilder, Buttons
Grafische Inhalte werden durch Suchprogramme nicht analysiert. Bei der Verwendung von Bilder oder Buttons ist es daher notwendig, einen aussagekräftigen alt-Text mit anzugeben.

Quelle: Kompedium II S 774

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Tag-Cloud

Eine Schlagwortwolke, ist eine Methode zur Informationsvisualisierung, bei der eine Liste aus Schlagworten, oft alphabetisch sortiert, flächig angezeigt wird, wobei einzelne unterschiedlich gewichtete Wörter größer oder auf andere Weise hervorgehoben dargestellt werden. Sie kann so zwei Ordnungsdimensionen (die alphabetische Sortierung und die Gewichtung) gleichzeitig darstellen und auf einen Blick erfassbar machen.

Wortwolken werden zunehmend beim gemeinschaftlichen Indexieren und in Weblogs eingesetzt. Bekannte Anwendungen sind die Darstellung populärer Stichwörter bei Flickr, Technorati und Del.icio.us.

Schlagwortwolken wurden vermutlich zuerst 2002 von Jim Flanagan eingesetzt und zunächst als gewichtete Liste (engl. weighted list) bezeichnet. Um einige Zeit früher im Jahr 1992 kam allerdings schon das Buch „Tausend Plateaus. Kapitalismus und Schizophrenie“ von Gilles Deleuze und Felix Guattari heraus, auf dessen Einband bereits eine „Begriffswolke“ abgebildet ist.

Quelle wikipedia:

http://de.wikipedia.org/wiki/Schlagwortwolke

Weiterführende Links:

http://www.drweb.de/magazin/tagcloud-design-tagwolken-gestaltung/

Vorteile

Alle wichtigen Begriffe/Themen auf einen Blick
Fällt auf (eye-catcher)
Link zu gefilterten Archiven mit allen Beiträgen zum Thema
am häufigsten verwendete Tag sind auf den ersten Blick zu erkennen
Bereicherung des Nutzererlebnisses

Nachteile

Trend geht wieder zurück
kann schnell chaotisch/ungeordnet wirken
Stylingmöglichkeiten sind begrenzt
erschließen sich oftmal nicht intuitiv

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Timecode

Timecode, wozu?

Um die Synchronisation bei Video oder Audio zu ermöglichen, ist eine genau Steuerung der Zeitlichen Abläufe notwendig.

Das ermöglich der Standard SMPTE -TIMECODE

Die Bilder werden in Einzelbilder (Frame) unterteilt (VIDEO) und jedem Bild wird eine exakte Zeit zugeordnet.

Beispiel.
Stunde: Minute: Sekunde: Frame:

Kleinste Einheit eines Videos ist ein Frame – ein Einzelbild. Für ein genaues synchronisieren muss ein Codec verwendet werden, der famesgenaus Schneiden ermöglicht.

Dann scheinen folgende Informationen wichtig zu sein.

Rohmaterial (Video, Bild, Sounddatein)

Grobschnitt Festlegung der Szenenfolgen

Feinschnitt (framegenaues schneiden)

Überblendungen / Effekte (harter, weicher Schnitt, Bluescreen)

Texte (Titel, Untertitel, Vor und Abspann)

Vertonung (On-Ton, Off-Ton, Musik, Effekte )

Rendernung (Berechnung des Endproduktes)

Wichtig könnten die Framerates sein:

24 FPS (Kino)

25 FPS PAL (europäischen TV-Videostandards)

30 FPS USA

Alle Angaben ohne Gewähr, bitte mich korregieren, wenn was nicht richtig ist.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

U6: Webgerechte Bilder

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungs-Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2019) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
u6_webgerechte_bilder.pdf	1.59 MB
U6 Webgerechte Bilder.pdf	1.43 MB

Bewertung:

Durchschnitt: 5 (1 Stimme)

U7: Audiosignale

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
U7_Audiosignale_Script.pdf	192.28 KB
U7 Audiosignale.pdf	1.81 MB

Bewertung:

Durchschnitt: 4.2 (5 Stimmen)

URL

Meine Vorstellung zum Thema URL:

URL (Uniform Resource Locator)
• Ist die Adresse einer einzelnen Webseite
• kann direkt in die Adressleiste im Browser eingegeben werden (ersetzt lange IP-Adressen)
• URL nicht mit der Domain gleichzusetzen, denn die Domain ist nur ein Bestandteil der URL

Beispiel einer URL: http://www.youtube.com/watch?v=QhcwLyyEjOA

Der Aufbau und die Bestandteile einer URL
Eine URL setzt sich meist aus mehreren Komponenten zusammen.
Um den Aufbau einer URL und die jeweiligen Komponenten zu verstehen, zerlegen wir die Be-
spiel-URL in ihre Bestandteile:

1. Das verwendete Protokoll/Schema – hier: HTTP (Hypertext Transfer Protocol)
2. Einer Subdomain, wie z.B. auch www.
Teilweise sind diese aus Gewohnheit vordefiniert:
- Webserver: www.
- Mailserver: mail. / smtp. / pop3. / imap.
- FTP-Server: ftp.
Hinter diesen Subdomains steckt meist ein eigener Server der ausschließlich die entsprechende Funktion erfüllt. Subdomains sind Third-Level-Domains.
3. Der Host oder Hostname: youtube
4. Die Top-Level-Domain (TLD) ist die Endung von Webadressen: z.b.: .com
Man unterscheidet zwischen:
• Themenbezogene TLD: com (commercial), net (network) , org (organization), ...
• Länderspezifische TLD: de (Deutschland), us (USA), it (Italien), ...
6. Second-Level-Domain (SLD): youtube.com
• befindet sich vor dem Punkt: & TDL
8. Der Pfad: /watch
• Ein Pfad verweist meist auf eine Datei oder ein Ordner (Verzeichnis) auf dem
Webserver (z.B. “/ordner/datei.html”)
7. Parameter und Wert: v (Parameter), QhcwLyyEjOA (Parameterwert)

SLD (Second-Level-Domain/Hostname):
Die Second-Level-Domain kann selbst ausgesucht werden, hier gelten folgende Einschränkungen:
• Der Domain-Name darf noch nicht registriert sein.
• Die Verwendung von geschützten (Marken-)Namen ist unzulässig.
• Umlaute (ä, ö, ü) sind zulässig, werden aber durch ältere Browser nicht unterstützt.
• Einige Sonderzeichen wie Leerzeichen, Backslash (\) oder Slash (/) sind verboten.

TLD (Top-Level-Domain):
Die in Deutschland wichtigste TLD ist die länderspezifische Kennung „de“. Aller
dings sind bereits sehr viele Domain-Namen mit „de“ reserviert, so dass Sie möglicherweise auf eine Alternative ausweichen müssen. Weitere bekannte Top-Level-Domains sind:
• com - Company/Commercial
• org - nicht-kommerzielle Organisation
• net - Netzwerk
• biz - Business

Domain Registrierung

1. Domainname prüfen:
Jede Domain darf weltweit nur einmal verwendet werden und ist bei der Organisation NIC (Network
Information Center) registriert. Mittels einer Who-Is-Abfrage kann überprüft werden, ob der Name
bereits registriert ist.
•Für die TLD „de“ werden die Domains bei der DENIC registriert.
• Für die weltweite Adressvergabe ist die Organisation ICANN zuständig.

2. Domain registrieren:
Domains können nicht gekauft werden, sie werden lediglich registriert und man zahlt eine jährliche
„Nutzungsgebühr“. Es gibt zwei verschiedene Möglichkeiten, eine Domain zu registrieren:
• Direkt bei der Organisation (z. B. DENIC oder ICANN)
Privatpersonen, Vereine etc. registrieren die Domain oftmals über Ihren Internet-Service-
Provider, der die Webseite auch „Hostet“ z. B. 1&1

______________________________________________________________________

Die URL (Uniform Resource Locator) bezeichnet die Adresse eines jeden Dokuments im Internet eindeutig.

Sie besteht aus: Protokoll://Server.Domain/Ordner/Dokument

Beispiel 1: http://www.google.de/

Beispiel 2: ftp://my.downloads.com/Download/unknown.htm

Suchmaschinenoptimierung:

Was benötigen Suchmaschinen, damit die URL möglichst auf den ersten Seiten angezeigt wird:

http://www.seo-mit-keyworddomains.de/seo/analyse/140-url-analyse

--> Wikipedia = http://de.wikipedia.org/wiki/Uniform_Resource_Locator

Mögliche URL-Elemente sind z. B. bei http:

     scheme-specific-part →                        →                       → |
     |
http://hans:geheim@example.org:80/demo/example.cgi?land=de&stadt=aa#geschichte
|      |    |      |           | |                 |                |
|      |    |      host        | url-path          query            fragment
|      |    password           port
|      user
scheme (hier gleich Netzwerkprotokoll)

______________________________________________________________________

Zwei Typen der Top-Level-Domain (TLD)

ccTLD – Country Code TLD

für allgemeine Ländercodes z.B.: .de; .gb; .fr; .it

gTLD – Genereic TLD

für organisatorisches und sonstiges z.B.: .org; .com; .info; .edu; .ninja; .food

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Usabilty-Test

Der Usability Test ist ein Produkttest mit relevanten Nutzern aus den unterschiedlichen Nutzergruppen. Überprüft wird jede Interaktion zwischen Nutzer und Produkt.

Das können Webseiten, Software und interaktive Anwendungen aber auch anfassbare Produkte sein. Die Testperson wird bedie beobachtet, wie sie versucht zuvor definierte Aufgaben auf einer Webseite zu lösen. Hierbei ist die Person angehalten so viel wie möglich “laut zu denken” (Think Aloud Protocol ).

Dadurch bekommen die Tester Einblick in die Gedanken der Testperson und können so Rückschlüsse auf mögliche Usability-Probleme ziehen. Während dem Test werden der Bildschirm und die Stimme der Person aufgezeichnet. Ein typischer Usability-Test dauert zwischen 15 und 30 Minuten.

Große Anzahl Testpersonen ist nicht notwendig - 5 reichen.

Was kann ein Usability-Test herausfinden?

- Können die Nutzer Kernaufgaben ohne Probleme lösen?

- Sind wichtige Informationen auch tatsächlich auffindbar?

- Sind Texte verständlich und übersichtlich aufbereitet?

- Wird der Nutzer gut durch die jeweiligen Prozesse geführt?

- Gibt es Stellen, an dennen der Nutzer nicht ohne Hilfe weiter kommt?

Typen & Methoden

Interaktionsaufzeichnung: Bei der Interaktionsaufzeichnung wird nicht der Versuchsteilnehmer, sondern nur dessen Eingaben über Tastatur und Maus und die entsprechende Interfaceansicht, aufgezeichnet. Als Ergebnis der Aufzeichnung erhält man ein Video, das die Oberfläche während der Bearbeitung der Arbeitsaufgabe durch den Versuchsteilnehmer zeigt.

Videobeobachtung: Die Videobeobachtung ist eine aufwändige Methode, die am besten in einem Usability-Labor, in dem mehrere Kameras aufgestellt sind, durchgeführt wird. Neben dem Bildschirmgeschehen wird zumeist auch das Verhalten des Versuchsteilnehmers aufgezeichnet. Bei der Auswertung kann der Versuchsteilnehmer zusammen mit dem entsprechenden Geschehen am Computerbildschirm beobachtet werden.

Mouse- & Eye-Tracking: Beim Mouse- und Eye-Tracking werden die Maus- bzw. Augenbewegungen der Versuchspersonen aufgezeichnet. Die Farben geben die Verweildauer der Augen auf einer bestimmten Stelle wieder:
Grün bedeutet kurze, gelb und rot lange Verweildauer. Hieraus lassen sich Rückschlüsse auf die Platzierung, Größe, Form und Farben der Seitenelemente ziehen. Möglicherweise müssen auch unverständliche Begriffe ausgetauscht oder Bilder ersetzt werden.

Cognitive Walkthrough: Bei diesem Test stellen sich die Usability-Experten konkrete Aufgaben. Beispiele hierfür sind: „Ich will Produkt X bestellen“, „Ich will Tickets für ein Konzert Y reservieren“ oder „Ich brauche eine Information Z“. Sie versetzen sich damit gedanklich in die Lage der späteren Nutzer des Produkts. Aus der benötigten Zeit sowie der eigenen Vorgehensweise lassen sich Rückschlüsse auf die Verbesserung der Benutzerführung ziehen.

Lautes Denken: Thinking Aloud ist die meist verbreitete Usability Testmethode. Die Testpersonen geben ihre Eindrücke während der Benutzung der Seite lautsprachlich wieder. Aus den spontanen Äußerungen kann nachvollzogen werden, wie die Nutzer mit der Webseite interagieren. Eine Beobachtung kann unter Laborbedingungen, unterstützt durch Ton- und Videoaufzeichnung erfolgen. Es kann aber häufig schon genügen, wenn sich ein Testleiter Notizen macht und diese hinterher ausgewertet werden.

_______________________________________

http://www.berlin-usability.de/usability/methoden-zur-evaluierung.html

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

VIDEO

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Datenmenge berechnen bei digitalen Videodaten

Formel

(Pixel Breite * Pixel Höhe) * Datentiefe * Frames = X MB

Klingt einfach, ist es auch

Man bekommt gewöhnlich in einer Aufgabe für die Berechnung von digitalen Videodaten die Höhe und die Breite des Videoformats gegeben, dazu die Dauer des Videos und die Anzahl der Frames pro Sekunde. Wie die Farbtiefe an einem Monitor (RGB) ist muss ich glaube ich nicht weiter erwähnen.

Ein Beispiel, bitte!

Ein digitales Video von 720 Pixeln Höhe und 576 Pixeln Breite und einer Dauer von 3 Minuten und 10 Sekunden liegt unkomprimiert vor. Die Framerate ist 25 f/s. Wie hoch ist die Datenmenge?

Bildschirme sind im RGB-Modus = 24 bit oder 3 byte

3 Minuten und 10 Sekunden entsprechen 190s.

Pro Sekunde haben wir 25 Frames, ergo 25 * 190 = 4750 Frames

Ein Frame hat 720 * 576 Pixel. Das sind 414720 Pixel.

Zusammengesetzt wäre also die Rechnung nun:

(414720 * 24 * 4750) : 8 * 1024 * 1024 = X MB

47.278.080.000 : 8388608 = ca. 5635,99 MB : 1024 = ca. 5,5 GB

Was sein kann, muss aber nicht

Es könnte sein, dass die ZFA davon ausgeht, dass unsereins weiß, was die PAL Norm ist, was HDV ist und was Full-HD ist (Immerhin wollen die uns ja auch über Videosignale ausquetschen.).

PAL (Phase Alternating Lines): 720 * 576 Pixel (4 : 3)

HDV (High Definition Video): 1280 * 720 Pixel oder 1440 * 1080 Pixel

Full-HD (Full High Definition Video): 1920 * 1080 Pixel

Wie gesagt kann das sein, zu erwarten ist es allerdings nicht. Wäre natürlich trotzdem nicht schlecht, wenn man es weiß, denn im zweiten Prüfungsteil kommt das Thema sowieso dran. =)

Wie immer möge man mir Fehler mitteilen und/oder korrigieren oder Fehlendes einfach ergänzen. =)

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Mediengestalter

Datenmengenberechnung

Digital Video

Videonormen

Bewertung:

Durchschnitt: 2.5 (2 Stimmen)

HD-Video

Video-Formate:

AVCHD
HDV
4K2K
UHDV
Full-HD

Technisches:

Ab wann ist ein Video HD?
Die verschiedenen Auflösungen wie 720p, 1080i (interlaced) und 1080p (progressive)
Was bedeutet HD-Ready?
PAL
NTSC

Formel zur Berechnung der Bilddatenmenge:

Bilddatenmenge (bit) = Breite (px) * Höhe (px) * Farbtiefe (bit) * Bildrate (Hz oder fps) * Zeit (s)
Audiodaten (bit) = Abtastrate (Hz) * Bit-Auflösung (bit) * Kanalzahl * Dauer (s)

Da ein Video meist immer auch Ton besitzt, muss auch die Größe der Audiodaten berechnet werden. Am Ende rechnet man die Bilddatenmenge + Audiodaten und wandelt sie entsprechend in MB oder GB um.

Kanalzahl:

Stereo = 2 Kanäle
Mono = 1 Kanal
5:1 = 6 Kanäle

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

HD-Video

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
HD-Video.pdf	175.58 KB

Bewertung:

Bisher keine Bewertung

Zurück zum Fachpraktiker-Wiki

Video-Daten

Videodaten

Datenmenge eines Videos hängt von mehreren Faktoren ab:
- Bildformat und -auflösung sowie der Fernsehnorm(4:3-PAL = 720x576px; 16:9-HDTV z.B. 1440x1880px; Internet z.B. 360x288px)
- Farbtiefe in Bit
- Bildwiederholfrequenz(Framerate) wird ebenfalls durch gewählte Fernsehnorm vorgegeben – bei PAL und HDTV 25 Vollbilder pro Sekunde (Hz)
- Gesamtlänge des Videos in s
- Codec zur Reduktion der Datenmenge
- Audioanteil
- Berechnung der Datenmenge:

            B x H x fv x F x t
D =   ---------------------- [MB]
            8 x 1024 x 1024

B=Breite in px, H=Höhe in px, fv=Bildwiederholfrequenz in Hz, F=Farbtiefe in Bit, T=Gesamtlänge in s
- mit unkrompimierten Videos kann in der Praxis nicht gearbeitet werden
- absolute Datenmenge spielt eine untergeordnete Rolle
- für Wiedergabe des Videosignals von CD, DVD, oder Blue-ray oder Streaming im Internet ist die Angabe des Datenstroms von größerer Bedeutung(Datenmenge, die jede Sekunde des unkomprimierten Videos liefert)
- Berechnung des Datenstroms:

            B x H x fv x F
d =   ------------------ [Mbps]
           1000 x 1000*) Datenraten werden mit k=1000 und M=1.000.000 gerechnet

- Videos auf DVDs werden mit 4-8MBit/s abgespeichert
- Bei Video Streaming muss die Datenrate deutlich reduziert sein z.B. 500kBit/s

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Berechnung von Datenmengen

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 1 (1 Stimme)

Audiodaten-Berechnung

Ich habe eine Zusammenfassung zu diesem Thema geschrieben. Vielleicht ist es für Euch interessant.

http://mg2012.bestweb.cc/?audiodatenberechnung

http://mg2012.bestweb.cc

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 3 (1 Stimme)

Datenmenge berechnen - Aufgaben

Hallo,

ich hoffe, dass ich hier mit meinem Anliegen richtig bin...

Momentan lerne ich mit dem Kompendium der Mediengestaltung (4. Auflage) Produktion und Technik.
Zum Themenbereich "Datenmenge berechnen" finde ich aber jedoch weder im Stichwortverzeichnis
noch in den Kapiteln eine aussagekräftige Zusammenfassung.

Ich habe mit diesem Bereich schon in der Schule Probleme gehabt, weshalb ich das alles nochmal durchlernen und eben mit besagter Zusammenfassung beginnen möchte.

Habe ich das Themengebiet nur übersehen oder ist es wirklich nicht im Kompendium vorhanden? Wenn letzteres zutreffen sollte, kann mir jemand gute Links (oder Literatur) dazu empfehlen? Sollte es doch vorhanden sein, wäre ich über die Nennung der betreffenden Seiten sehr dankbar.

Grüße,
fresh_44

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Datenmenge

Kompendium

Bewertung:

Bisher keine Bewertung

Datenmengen berechnen

Ich habe hier mal eine PDF da habe ich die Sachen die ich zu Datenmenge gefunden habe zusammengefasst mit Beispielen. Meint ihr das reicht? Oder gehört da noch mehr zu?

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
U1 Datenmengen berechnen.pdf	423.01 KB

Bewertung:

Durchschnitt: 5 (1 Stimme)

Datenmengenberechnung Digitalkamera

Sehr häufig wird im Rahmen von Datenmengenberechnungen gefordert an Hand der Pixelangaben einer Digitalkamera die Datengröße eines Bildes zu berechnen.

Datenmenge (in MB) = b x h x d bits

8(bits / Byte)x1024(Bytes / KB)x1024(KB /MB)

b = Breite des Bildes in pixel
h = Höhe des Bildes in pixel
d = Datentiefe

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Datenmenge

Digitalfotografie

Bewertung:

Durchschnitt: 3 (3 Stimmen)

Sounddatenberechnung

Die Berechnung setzt sich aus folgenden Teilen zusammen:

t(Minuten) x 60s(Umrechnung in Sekunden) x 8 Bit oder 16 Bit x Mono(1-Kanal) oder Stereo(2-Kanäle) x Hz = Datenmenge

Zur Erklärung:

t = Zeit, wird meistens in Minuten angegeben, darum brauchen wir die 60 zur Umrechnung in Sekunden
8 Bit oder 16 Bit am besten gleich mit 1 Byte oder 2 Byte rechnen, dann fällt das umrechnen weg
Mono oder Stereo d.h. mit 1 oder mit 2 rechnen
und dann mit wieviel Hertz, es gibt folgende Qualitäten:

11,025 KiloHertz (schlechte Quali)

22,5 kHz (Kassettenradio)

44,1 kHz (CD)

48 kHz (DVD)

96 kHz (Studioqualität)

Hier noch eine Beispielrechnung:

Welche Datenmenge ergibt sich bei 15 Minuten Sprachaufnahme mit folgenden Parametern: 16 Bit, Stereo, 22,05 kHz?

Lösung:

15 x 60s x 2 Byte x 2 x 22050 Hz = 79380000 Byte = 75,70 MB

Es gibt auch Rechnungen mit vorgegebenem Datenspeicherplatz und man muss eine bestimmte Zeit unterbringen.

Beispiel: Auf einer CD stehen für die Sounds 70 MB zur Verfügung. Schlagen Sie geeignete Aufnahmeparameter vor, wenn Sie 15 Min. Musik zu verarbeiten haben.

Nun probiert man mit verschiedenen Parameter rum, bis man unter oder bis zur vorhandenen Grenze an Datenmenge kommt.

Lösung:

15 x 60s x 2Byte(16 Bit) x 2(Stereo) x 44100 Hz = 151,41 MB > 70 MB --> zu groß

15 x 60s x 2Byte(16 Bit) x 2(Stereo) x 22500 Hz = 77,25 MB > 70 MB --> zu groß

15 x 60s x 2Byte(16 Bit) x 1(Mono) x 22500 Hz = 38,62 MB <70 MB --> passt

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Datenkonvertierung (Video)

Der Begriff Konvertierung bezeichnet die Überführung einer Datei von einem Dateiformat in ein anderes. Prinzipiell gibt es dabei drei Möglichkeiten:

1.Die verlustfreie Konvertierung,
während der keine Daten verloren gehen. Dies ist der Fall, wenn zwei kompatible Formate ineinander überführt werden. Zum Beispiel eine Konvertierung eines Rasterbildes von TIFF nach PNG

2.Die verlustbehaftete Konvertierung.
Datenverlust kann aus folgenden Gründen entstehen:
Verlustbehaftete Datenkompression, also die Reduzierung der Daten, indem (aus Sicht des Endergebnisses) nicht notwendige Daten weggelassen werden. Ein Beispiel ist die Konvertierung einer Audiodatei von WAV nach MP3. Dem Zielformat fehlt die Möglichkeit, alle Informationen des Quellformates darzustellen. Ein Beispiel ist die Konvertierung von HTML in eine Textdatei, bei der sämtliche Formatierungen verloren gehen.

3.Die sinnhafte Konvertierung.
Bei dieser Konvertierungsart werden Daten „dem Sinne nach“ konvertiert, also unter Beibehaltung des als wesentlich betrachteten Inhaltes. Dies kann mit oder ohne Informationsverlust geschehen, oder es können auch Informationen aus zusätzlichen Quellen durch die Konvertierung angereichert werden. Konvertierung einer Tabelle von Microsoft Excel XLS nach CSV oder umgekehrt.

Die Videokomprimierung
Das wichtigste bei der Digitalen Videoaufnahme und Speicherung ist die Komprimierung ohne die wären
Videodateien sogar zu groß um auf eine DVD zu passen. Eine Stunde unkomprimiertes Video wären über
75 Gigabyte groß. Und um das zu verhindern benutzt man Video Decoder die Videos verkleinern z.B.
mpeg 1 bis 4 hier werden Bewegungen nicht in Aufnahmequalität dargestellt sondern stärker gepixelt und
dadurch wird die Datei kleiner. Ein Videostandart "Phase Alternation Line" kurz PAL ist 25 Bilder pro
Sekunde und einer Auflösung von 768*576 das entspricht einer Datenübertragung von 21 MB pro
Sekunde. Da sich aber nicht auf jedem dieser Bilder alles bewegt, sondern Stellen im Film gleich bleiben,
wir bei der Komprimierung der Unterschied der Pixel vom vorigen Bild genommen und nur die
unterschiede abgespeichert so werden ganze 97 Prozent überflüssige Daten gelöscht. Würde man einen 1
Stündigen Film nicht so Komprimieren hätte man 90000 Einzelbilder die fast alle den gleichen
Speicherplatz verbrauchen. Im durchschnitt wäre dann ein Bild 900 KB groß und die Anzahl der
Einzelbilder mal die Große von einem Bild ergibt die ungefähre große eines unkomprimiertem Video, hier
wären das 81000000 KB oder 80 GB. Zu diesen angaben kommen jeweils noch 500 MB Tondaten hinzu.

Neben der Norm PAL mit 768*576 Bildpunkten gibt es auch noch die Norm "Nation Television Systems
Committee" kurz NTSC die in Amerika benutzt wird, hier sind es nur 640 mal 480 Bildpunkte aber 29,97
Bilder pro Sekunde und somit liegt die Datenübertragung nur bei 17,6 MB pro Sekunde.
Um nun einen solchen Film auf eine DVD oder CD zu bekommen muss man in komprimieren. Dafür gibt
es zwei Möglichkeiten:

1. der MPEG Standard der für die DVDs benutzt wird, mit der Dateiendung ....mpeg.
2. DivX mit der Dateiendung ....avi, den Privat Benutzer für eigene Videos benutzen und diese dann auf
CDs brennen.

Auf einer DVD mit dem NTSC Format wird der Ton in dem Format AC-3 komprimiert, das ist ein Dolby
Digital Surround Sound System. Bei PAL Formaten wird der MPEG-2 Audio Komprimierungsstandard
benutzt.

Um eine eigene Video-CD zu erstellen muss man den MPEG Standard benutzen, damit ein DVD-Spieler
diese auch abspielen kann. Man kann zwischen Video-CD (VCD) mit einer maximalen Auflösung von
320*200 oder Super Video CD (SVCD) mit einer Auflösung über 640*480 wählen, bei VCD kann man
nur den MPEG-1 Standard benutzen und bei SVCD nur den MPEG-2 Standard.

Bei der Videokomprimierung ist die Datenrate wichtig, mit einer hohen Datenrate muss das Video nicht
start Komprimiert werden, die Videodatei fällt größer aus. Bei einer kleineren Datenrate Muss das Video
stärker komprimiert werden, die Videodatei wird kleiner. Bei Videos die man selber aufnimmt kann man
diese Datenrate bestimmen. Bei einer Datenrate von 3000 Kilobit pro Sekunde und einer mp3
Audiokomprimierung kann man eine Stunde Video mit einer Auflösung von 640*460 auf eine CD
brennen.

In der Videokomprimierung ist der MPEG ein Guter Standart Decoder der am meisten benutzt wird, trotz
das er noch einige Mängel hat, MPEG steht für "Moving Picture Experts Group". Das ist eine
Internationale Gruppe von Experten, die sich mit der Speicherung von Videos- und Audiodaten
beschäftigt, die Gruppe wurde 1988 gegründet. Die entwickelten Standards für die Verschlüsselung von
audio-visuellen Informationen als digital komprimierte Daten werden ebenfalls MPEG-Standart genannt.
Die Vorteile von MPEG ist das es durch sehr gute Kompressionsverfahren sehr viele kleine Dateien
erzeugt, ohne dabei die Qualität zu beeinflussen.
Es gibt verschiedene MPEG-Standards MPEG-1,MPEG-2 und MPEG-4. Ein MPEG-3 Standard wurde
ursprünglich angestrebt, es stellte sich aber heraus das die Bilder eben so gut waren wie mit dem MPEG-2
Standart.

MPEG-1
Der MPEG-1 Standart besteht aus 5 Abschnitten: System, Video, Audio, Conference Testing und
Software Simulation.

System:
Hier wird das Problem beseitigt das Bild und Ton zusammen passen. Erreicht wird es dadurch, dass die
verschiedenen Datenströme (Video und Audio) Zeitmarken erhalten, die es ermöglichen, sie zu
synchronisieren.

Video:
Verschiedene Techniken sorgen für eine hohe Kompressionsrate. Als erstes wird eine angemessene
räumliche Aufteilung des Bildes vorgenommen. Es werden in aufeinanderfolgenden Bildern die Blöcke
ausgewählt, die sich verändern. Diese Veränderungen werden kodiert und komprimiert gespeichert. So
muss nicht das gesamte Bild jeweils neu übertragen werden, sondern nur die Informationen über die
Veränderungen.

Audio:
In dem Teil der Spezifikation ist die Darstellung von Audio-Informationen festgelegt. Daher kommt auch
die Bezeichnung "MP3" für MPEG-Dateien, die nur Audiodaten enthalten. Sowohl Mono- als auch
Stereoaufnahmen können dadurch effizient gespeichert werden. Eins der Verfahren, wodurch die
Audiodaten stark komprimiert werden können, nimmt die Frequenzen, die außerhalb des für den
Menschen hörbaren Bereiches liegen, heraus und berücksichtigt beim Kodieren nur den Rest.

Conformance Testing:
Dieser Bereich ist nur für die Herausgeber von MPEG-1kodierten Videosequenzen und für Hersteller von
Software und Hardware für die Verschlüsselung interessant. Hier wird z.B. festgelegt das der Datenstrom
eine bestimmte vorgegebene Größe nicht überschreitet.

Software Simulation:
Beinhaltet einen Enkoder und einen Dekoder. Die Simulation war lediglich für interne Testzwecke des
MPEG-Komitees vorgesehen.

MPEG-2
Der MPEG-2 Standart ist eine Erweiterung und Anpassung des MPEG-1 Standards. Eine Erweiterung
deshalb, weil neue Eigenschaften und Fähigkeiten hinzugefügt wurden. Ziel der Entwicklung war den
MPEG-2 Standart mit dem Vorgänger so kompatibel zu machen, dass Abspielgeräte, die MPEG-2
unterstützen, auch MPEG-1 kodierte Daten abspielen können.
Der MPEG-2 Standart wurde 1994 anerkannt.
Auch der MPEG-2 Standart hat mehrere Abschnitte die sich aber vom MPEG-1 Standart nicht groß
unterscheiden.

System:
Der MPEG-2 Standart bietet wesentlich mehr Möglichkeiten als der MPEG-1 Standart. Dabei gibt es im
MPEG-2 Standart zwei Formen.

1-Der Program Stream
und
2-Der Transport Stream

Jeder dieser beiden formen ist für ihren jeweiligen Bestimmungszweck optimiert. Er ist die Kombination
eines oder mehrerer "Packetised Elementary Streams" kurz PES, die eine gemeinsamen Zeitbasis haben in
einem einzelenen Datenstrom. Diese Methode ist besonders gut geeignet für Umgebungen, in denen kaum
Übertragungsfehler auftreten.

Die zweite Form. Der "transport Stream" kombiniert mehrere PES mit einem oder verschiedenen
Zeitbasen. Einzelne Ströme mit gemeinsamen Zeitbasis formen ein Programm. Diese Methode ist gut
geeignt für die Speicherung oder Übertragung, wenn man mit einigen Datenverlusten rechen muss. Jedes
"Transport Stream" -Paket ist 188 Bytes lang.

Video:
Dieser Abschnitt stützt sich auf die starken Video-Komprimierungs-Fähigkeiten des MPEG-1 Standards.
Das "Multiview profil" kurz MVP wurde 1996 anerkannt und dem Standard nachträglich hinzugefügt.
MVP erlaubt es, mehrere Bilder in dem Datenstrom zu integrieren und, je nach Bedarf, übereinander zu
legen, oder dem Betrachter die Möglichkeit zu geben, zwischen verschiedenen Ansichten zu wählen. Es
ist auch damit möglich stereoskopische Bilder zu erzeugen.

Audio:
Die Audiokomprimierung verläuft genauso wie im MPEG-1 Standard.

MPEG-4
Der MPEG-4 Standart ist die neuste Entwicklung des MPEG-Komitees. MPEG-4 ermöglicht es dem
Anwender, mit der Szene zu interagieren, z.B. Objekte darin zu bewegen.

Videodateien mit der Endung AVI
AVI steht für "Audio Video Interleave" Audio/Videoformat von WINDOWS (Video für WINDOWS ).
"Audio Video Interleave" heißt nichts anderes, als dass Audio- und Videodaten ineinander verzahnt, also
"interleaved" abgespeichert werden. Die erste Definition von AVI ist so alt wie die Multimedia-PCs. Das
Format wurde von Microsoft als einheitliche Lösung für die Wiedergabe von kurzen Videoclips
geschaffen. Die ursprünglichen Festlegungen aus den Jahren 1992/93 lesen sich dabei fast vorsintflutlich:
15 Bilder pro Sekunde bei einer maximalen Auflösung von 160 x 120 Pixeln stellten damals die Obergrenze von AVI dar.
Im Gegensatz zu anderen damals üblichen Animationsformaten wurde bei AVI die sogenannte
Keyframe-Technik eingesetzt. Dabei wird lediglich jedes 12. bis 17. Bild (abhängig vom Bildinhalt) als
Vollbild gespeichert. Für die dazwischen liegenden Fames werden nur die Unterschiede zum jeweils
vorhergehenden Bild angegeben. Auch wenn diese ersten Definitionen alles andere als zukunftsträchtig
klingen, gelang dem AVI-Format doch sehr schnell ein beachtlicher Siegeszug. Ein Grund dafür ist
sicherlich die Tatsache, dass AVI als Bestandteil von "Video für Windows" bald fest mit Windows
verknüpft war. Die entsprechenden Treiber standen und stehen für Endbenutzer kostenlos zur Verfügung.

DivX
Mittels dieser Technologie lassen sich nämlich Videodateien so stark komprimieren, dass sie - auch
unautorisiert - relativ bequem über das Internet verschickt werden können. DivX basiert strukturell auf
dem MPEG-4 Video Standard und entsprechend kodierte Filme (in der Regel AVI-Dateien) können mit
Hilfe eines passenden Codes in gängigen Video-Bearbeitungs- und Wiedergabe-Programmen editiert und
angezeigt werden. Es gibt Codes für alle wichtigen Betriebssysteme wie Windows, Linux, MacOS und BEOS.
Mit DivX ist vermutlich die größte Hürde für die Videobearbeitung am PC genommen worden, denn mit
DivX steht ein ausreichend gutes Kompressionsverfahren zur Verfügung, um einen kompletten
MPEG-2-DVD-Film auf eine CD-R zu brennen, um einen Zwei-Stunden-Kinofilm in passabler Qualität
über normale CDs zu betrachten. Durch DivX kann die Dateigröße eines DVD-Films um das Zehn- bis
Zwölffache reduziert werden, so dass sich ein sechs Gigabyte großer Film auf relativ schlanke 700
Megabyte (und weniger) schrumpfen läßt. Die Qualität bleibt dabei deutlich über den VHS-Standard.
Die Erfinder von DivX behaupten, einen Microsoft-Codec für MPEG-4 geknackt zu haben. Darum ist der
DivX-Code auch Illegal. Microsofts erste Implementierung von MPEG-4 ist seit Windows 98 auf jedem
Windows-PC installiert und beschränkt die maximale Datenrate auf 256 Kilobit pro Sekunde. Für ein
ruckelfreies Video in ansprechender Qualität ist das zu wenig. Durch den Hack wurde die Erhöhung der
Bitrate auf bis zu 6000 Kilobit pro Sekunde möglich. Doch eine so hohe Bitrate ist gar nicht notwendig:
600 Kilobits pro Sekunde sind völlig ausreichend. Zudem wird vor der eigentlichen Frame-Codierung ein
Weichzeichner eingeschaltet. Dieser ist nötig, da MPEG-Verfahren bei hohen Kontrastsprüngen für ein
scharfes Bild mehr hochfrequente Signale und damit hohe Datenraten benötigen. Stehen diese nicht zur

Verfügung, entstehen im Bild unansehnliche Artefakte, denen der Weichzeichner entgegen wirkt.
Für die Weiterentwicklung von DivX will der französische Hacker Jérome Rota (alias Gej) verantwortlich
sein. Der nächste DivX-Nachfolger - "DivX Deux" - soll noch leistungsfähiger sein.
Dazu gesellen sich Entwickler, die an weiteren Video-Komprimierungsverfahren arbeiten. Besonders
erwähnenswert ist (Anfang 2001) z.B. "3ivX": Diese DivX-Weiterentwicklung soll bei bis zu 60%
höherer Kompression eine noch bessere Bildqualität zu erzielen.

Allerdings müssen DivX-Dateien immer mit der Version abgespielt werden, mit der sie komprimiert
wurden, da auch die neueren DivX-Codecs nicht mit ihren älteren Versionen kompatibel sind.

Mit DivX lassen sich übrigens nur die Bilder einer Videos bearbeiten - nicht jedoch der Ton. Dafür wird
meist das bewährte MP3-Format hinzugezogen. Es gibt bereits (Anfang 2001) einige Programme, die sich
DivX bedienen, um DVD-Filme in DivX-Dateien umzuwandeln. Ein weit verbreitetes heißt FlaskMPEG.
Der Grund für die Benutzung von DivX, bei den Meisten Anwendern, ist das dieser Decoder
Benutzerfreundlicher ist fast jedes Videobearbeitungsprogramm unterstützt DivX. Diese Möglichkeiten
bietet auch MPEG-1, was sich aber durch die schwächere Komprimierung nicht lohnt.

Bei der Codierung und Dekodierung Benötigt man noch sehr leistungsfähige PCs. Um sich ein DivX Codiertes Video anzugucken sollte man mindestens 20 Mhz haben. Um Videos zu codieren brauch man schon etwas Leistungsfähigeres, mit einer CPU von 800 Mhz kann man schon eigene Videos gestalten und aufnehmen. Der Nachteil ist das man bei 800 Mhz sehr lange warten muss bis es Gerändert ist (in ein anderes Format umgewandelt oder stärker komprimiert wird). Videoaufnahmen sind sehr abhängig von der Mhz Zahl, darum sollte man sich beim kauf eines neuen PC, um Videos vernünftig zu bearbeiten mindestens einen 1,6 Ghz getakteten PC kaufen. Da der PC sonst bei zu hohen Auflösungen Bilder in der Sekunde verliert oder Bild und Ton bei der fertigen Aufnahme Asinkron laufen.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Videodatenmenge

2. Dateiformate

2.1. QuickTime
QuickTime ist eine Systemsoftware-Erweiterung und ermöglicht das Abspielen und Bearbeiten von digitalen Videofilmen und virtuellen Räumen (QTVR > Quick Time Virtuell Reality).
QuickTime arbeitet mit folgenden Softwarekomponenten:

Movie Toolbox
zuständig für Zeitmanagement eines Films
Image Compression Manager (ICM)
zuständig für die Komprimierung und Dekomprimierung des Videos
Component Manager
Verwaltungsmanagement zur Unterstützung der Hard- und Software

3. Aufbau eines Digitalen Films
Filme haben zwei verschiedene Spuren oder Tracks: eine Videospur und eine Audiospur. QuickTime – Filme sind im Prinzip genauso aufgebaut, jedoch nicht auf zwei Spuren beschränkt. Sie können mehrere Spuren im Audio- und Videobereich haben.

Hinzu kommt eine Spur mit einer Zeitskala. Der Film wird über eine numerische Zeitskala gesteuert. Positive Zahlen bewirken einen normalen Vorlauf, negative Zahlen lassen den Film rückwärts laufen.
QuickTime – Filme haben ein eigenes Zeitkoordinatensystem.
Es beinhaltet eine Zeitskala und eine -dauer.

Der Component Manager steuert den Zeitablauf derart, dass die Filme auf verschiedenen Rechnersystemen immer in der richtigen Geschwindigkeit ablaufen.

4. Vorschau
Die Vorschau wird als Kontrolle des Schneidergebnisses genutzt. Eignet sich nicht zur Kontrolle komplexer Übergänge oder Animationen, da hier mit reduzierten Videospuren und einer veränderten Timebase gearbeitet wird.

5. Digitalisieren von Videomaterial
Hardwarevoraussetzungen: eine S-VHS-Videoquelle sowie eine Video Capture Card (Digitalisierungskarte)

Die Bildgröße, die Farbtiefe und die Framerate bestimmen die anfallende Datenmenge. Da es sich um sehr hohe Datenmengen handelt, ist es notwendig, die benötigten Datenmengen zu reduzieren.
Es gibt drei Möglichkeiten der Datenreduzierung:

Komprimieren der Videodaten
Verringern der Bildmaße des aufgenommenen Videos
Verringern der Framerate des aufgenommenen Videos

6. Komprimierung

Originaldaten bleiben erhalten
in den meisten Fällen wird eine Lauflängen-Kodierung verwendet (hier werden fortlaufende Bereiche gleicher Farbe entfernt)
eignet sich für Bilder, bei denen z.B. Hintergründe oft aus einer Farbe gebildet werden
oft kein großer Einspareffekt

6.2. Verlustreiche Komprimierungsmethoden

Bildinformationen gehen verloren
es wird versucht, Bildinformationen zu entfernen, die dem Betrachter nicht auffallen
viele dieser Methoden bewirken einen zusätzlichen Datenverlust, wenn diese Bilder erneut komprimiert werden
es gibt jedoch Codecs, die eine frühere Komprimierung registrieren und somit eine zweite Komprimierung zu einem sehr geringen Datenverlust führt

6.3. Räumliche Komprimierung
Hierbei werden die Daten jedes einzelnen Frames komprimiert (immer verlustreich)

6.4. Zeitliche Komprimierung:
Hier werden die Daten durch Vergleich der einzelnen Bilder über einen Zeitraum komprimiert (weitäsgehend verlustfrei). Häufige Nebeneffekte: Verschwimmen, Streifen und Konturbildung im Film Beispiel: Framedifferenzierung
Es werden die Daten der Frames gespeichert, die Änderungen zum vorherigen Frame enthalten. Gut geeignet für Filme mit wenig Bewegung und hohen Anteilen n Wiederholungen von einem Frame zum nächsten.

6.5. JPEG-Bilddatenkompression
Wenn längere digitale Videosequenzen übertragen und gespeichert werden müssen, ist dies ohne Bilddatenkompression nicht möglich. Ohne eine Video-Digitalisierungskarte erfolgt die Kompression über Software-Codecs, welche die Komprimierung bzw. die Dekomprimierung mit Hilfe der CPU durchführen. Das Aufzeichnen von Videosequenzen in voller Bildgröße und -anzahl auf eine Festplatte ist mit einem Codec-Verfahren nicht machbar.

Mit einer Digitalisierungskarte ist dies möglich, da diese einen Komprimierungsprozessor für die Bilddatenkomprimierung zur Verfügung stellt.

Komprimierungsabfolge
Die JPEG-Kompression besteht aus den folgenden fünf Schritten:
1. Farbraumtransformation in YUV
2. Color-Subsampling 4:2:2
3. Einteilung in 8*8 Pixelblöcke und DCT
4. verlustbehaftete Quantisierung
5. Huffmancodierung (Lauflängencodierung)

Bei der Filmwiedergabe erfolgen die Schritte in umgekehrter Reihenfolge.

7. MPEG-Standards
MPEG steht für Motion Picture Expert Group. Dies ist der Ausschuss, welcher die Standards für die Komprimierung und Dekomprimierung von Digitalvideos festlegt.

Es gibt folgende Normen:
MPEG 1, -2, -4 und –7.

8. Datenmengenberechnung

(Formel nach Kompendium der Mediengestaltung, 4. Auflage)

B = Breite in Pixel
H = Höhe in Pixel
fv = Bildwiederholfrequenz in Hz
F = Farbtiefe in Bit
t = Gesamtlänge in Sekunden

Beispiel:
720 px * 576 px * 25 Hz * 24 bit * 60 s = 14929920000 bit |:8*1024*1024 = 1779,78 MB

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

QuickTime

Bewertung:

Durchschnitt: 5 (4 Stimmen)

Videoschnitt

Filmmontage bezeichnet das Zusammenfügen von Einstellungen, Szenen und Sequenzen zu einer erzählerischen Einheit.

Im Schnitt oder der Montage entsteht der eigentlich Flim. Die verschiedenen Bausteine eines Flims werden in der endgültigen Abfolge aneinder montiert.

Schnittformen

Schnitt:

Die Bezeichnung Schnitt betrifft die eher handwerkliche Tätigkeit im Schneideraum, sie hat sich aus dem Arbeitsprozess des Auseinanderschneidens und Kürzen einzelner Einstellungen entwickelt.

Montage:

Spricht man von Montage, so geht es in erster Linie um den Inhalt und die Gestaltung. Während Schnitt eher das Aussondern und Kürzen des Materials betont, verweist die Bezeichnung Montage auf das Zusammenfügen der Einstellungen. Es ist das Konzept gemeint, nach dem dies geschieht.

Kriterien:

Wie jede Gestaltung muss auch jeder Schnitt, jede Überblendung und jeder von Ihnen eingesetzte Effekt motiviert und begründet sein. Die Schnittfolge muss die Handlung des Films weiterbringen und das Interesse des Zuschauers erhalten oder noch besser: steigern. Einstellungsgrößen und -längen sollten variiert werden. Allgemein erzeugen schnelle Schnittfolgen Spannung und Emotionen, lange Schnittfolgen wirken ruhig und sachlich

Im Schnitt sollen die Einstellungen so miteinander kombiniert werden, dass sie inhaltlich und optisch als zusammengehörig wahrgenommen werden.

vorhandene Bildmaterial sollte im Schnitt möglichst logisch und folgerichtig geordnet werden

jeder Schnitt sollte motiviert sein z.B. Anlässe für einen Schnitt können Bildimpulse sein, Tonimpulse im Text oder auf Geräuschebene)

ähnliche Bilder, die man aneinander schneidet, irritieren den Betrachter (kann aber auch als Stilmittel verwendet werden siehe Jump Cut)

ein Schnitt sollte ein eindeutig neues Bildangebot schaffen

unterschiedliche Kamerabewegungen sollte man im Schnitt nicht direkt aneinander setzen

durch einen Tempowechsel beim Schnitt kann die Aufmerksamkeit des Publikums gesteigert werden

bei erzählenden Darstellungen signalisiert die Blende Zeit- und Ortswechsel

mit Effektblenden sollte man äußerst sparsam und bewusst umgehen

Arbeitsablauf beim Schnitt:

- Material sichten

- unbrauchbare Aufnahmen ausmustern/ entfernen z.B. unscharfe, ablenkende oder verwirrende Aufnahmen

- gelungene und für das Projekt in Frage kommende Aufnahmen kennzeichnen

- digitalisieren des Materials in das Schnittsystem

- Rohschnitt *

- Feinschnitt**

- einfügen von Blenden

* Beim Rohschnitt wird die erste Auswahl und Anordnung des gedrehten Filmmaterials bezeichnet und festgelegt.

** Beim Feinschnitt werden die in ihrer Reihenfolge bereits festgelegten Einstellungen auf ihre endgültige Länge gebracht.

Motivierter Schnitt = Jeder Schnitt sollte einen Grund haben. Die Motivation kann durch die Bild- und Tonebene begründet sein. Man spricht hier auch von Bildimpulsen und Tonimpulsen.

Beispiel: Ein Mann zeigt auf etwas und es ist nur ein klingelndes Telefon zu hören. Hier sollte idealerweise der nächste Schnitt zu dem Telefon führen.

Irritierende Schnitte = Schnitte irritieren, wenn die Kontinuität der Darstellung nicht gewahrt wird. Wenn 2 aufeinander folgende Einstellungen keinen logischen oder optischen Zusammenhang aufweisen, spricht man auch von einem Anschlussfehler

Beispiel: Aufgabe ist 6 kurze Statements einer Straßenumfrage aneinander zu schneiden, dann sollte das Bildmaterial in Bezug auf den Abbildungsmaßstand der Person auf ihre Positionierung innerhalb des Bildrahmens und ihre Blickrichtung möglichst abwechselnd gestaltet sein.

Jump Cut = Schnitte, die einen Sprung des Motivs innerhalb des Bildrahmens erzeugen

Match Cut = bezeichnet eine Schnittfolge, bei der 2 auffällig ähnliche Bildinhalte aufeinander folgen, die zeitlich oder räumlich auseinanderliegen

Insert Schnitt = zeigen erläuternde Groß-oder Dateilaufnahmen

Diffuser Schnitt = immer dann, wenn eine Einstellung kein konkretes Blickzentrum (mehr) aufweist

Inhaltliche Montageformen

Erzählende Montage: Die einzelnen Stadien eines längeren Prozesses werden exemplarisch gezeigt.

Analysierende Montage: Darstellung von Ursache und Wirkung.

Intellektuelle Montage: Ideen und Begriffe werden visuell übersetzt.

Kontrast-Montage: z.B. Hunger - Essen

Analogie-Montage: z.B. Schafherde und Fabrikeinheiten in modernen Zeiten.

Parallel-Montage: Zwei Handlungsstränge laufen parallel nebeneinander her und werden ständig wechselnd geschnitten, z.B. eine Verfolgungsjagd. Die Stränge werden am Ende zusammengeführt, beide Stränge wissen meist von Anfang an voneinander.

Parallelisierende Montage: Die beiden Handlungsstränge sind wie bei der Parallel-Montage zeitgleich, sie wissen aber nichts voneinander und müssen sich nicht treffen.

Metaphorische Montage: Im Bereich der Handlung angesiedelte oder fremde Metapher.

Wahrnehmungsästhetische Schnittform

Harte Montage/harte Schnitte: Krass aufeinander folgend, Brüche, wechselnde Bewegungsrichtung.

Weiche Montage/weiche Schnitte: Harmonisch, kaum wahrnehmbare Übergänge.

Rhythmische Montage: Der Schnittrhythmus wird durch die Filmmusik bestimmt - die Filmmusik orientiert sich am Bilderrhythmus.

Springende Montage: Nicht harmonisch, zerfällt in einzelne Einstellungen, Aufzählung, harte Brüche.

Schockmontage: Zwei aufeinander folgende Einstellungen haben scheinbar keine Verbindung, bewusste Desorientierung des Zuschauers.

Schnitttechniken

Überblende

Filmschnitttechnik, die im Gegensatz zum harten Schnitt steht. Hierbei wird das alte Bild langsam ausgeblendet und das neue Bild gleichzeitig eingeblendet. Dadurch entsteht ein fließender Übergang zwischen beiden, was häufig verwendet wird, um zwei zeitlich oder räumlich weit voneinander entfernte Szenen zu suggerieren.

Wischblende

Filmschnitttechnik, bei der das alte Bild vom neuen Bild kontinuierlich überblendet bzw. ersetzt wird. Dies kann in vielfacher Art geschehen, z.B. auch horizontal, vertikal, diagonal, sternförmig oder im Uhrzeigersinn. Diese Schnitttechnik wird verwendet, um eine gleichzeitige Handlung an verschiedenen Orten darzustellen. Diese Technik wird in modernen Filmen nur noch selten verwendet, am bekanntesten dürfte die Verwendung von Wischblenden in den Filmen der Star-Wars-Reihe sein.

Akustische Klammer

Einstellungen oder Szenen werden durch filmischen Ton unterstützt. In den meisten Fällen wird dies durch den Soundtrack oder andere musikalische Beiträge bewerkstelligt. Oft wird aber auf das Stilmittel der vorgezogenen Soundeffekte und Dialoge verwendet. Das heißt, man hört z.B. schon eine Person reden, obwohl sich erst im Szenenwechsel klärt, dass dies zu einem späteren Zeitpunkt oder an einem anderen Ort geschieht.

Gängig ist auch der umgekehrte Weg, um beispielsweise von der Planung einer Aktion zu deren Durchführung zu schneiden, während die Tonspur mit der Erläuterung des Plans fortfährt.

Einstellungsgrößen

Unter Einstellungsgrößen bezeichnet man das Größenverhältnis des abgebildeten Objekts zum Bildfeld. Es handelt sich um verschiedene zueinander in Beziehung stehende Bildausschnitte. Sie sind ein wichtiges Mittel des bildlichen Erzählens und können psychologische Akzente setzen. Sie werden in der Regel in einem Storyboard definiert.

Jede Einstellungsform eignet sich für bestimmte Zwecke besonders gut. Eine wichtige Informationsquelle ist aber der Wechsel der Einstellungen. An ihr lassen sich stilistische Merkmale und auch die Handschrift des Regisseurs erkennen. Auch verschiedene Filmtraditionen und -kulturen verwenden traditionell sehr unterschiedliche Wechsel in den Einstellungen.

Actionfilme oder Dokumentarfilme weisen oft einen hohen Anteil an long shots auf, weil für diese Filme Mimik und nonverbale Ausdrucksformen weniger wichtig sind, sondern gesamte Vorgänge eingefangen werden. Die erforderlichen schauspielerischen Leistungen sind bei diesen Filmtypen vergleichsweise gering. Auch quasidokumentarische Filme enthalten oft viele totale Einstellungen und verraten hiermit ihre Herkunft aus dem Dokumentarfilm. Filme, die Beziehungen der Figuren und das Gefühl in den Vordergrund stellen, enthalten viele close-ups.

Die wichtigsten Einstellungen sind:

Totale (long shot)

Halbtotale (medium long shot)

Amerikanische Einstellung (american shot)

Halbnahaufnahme (medium close- up)

Nahaufnahme (close-up)

Großaufnahme (very close-up)

Detailaufnahme (extreme close-up)

Totale - long shot

Mit der Totalen wird dem Betrachter ein Überblick/Orientierung geboten. Er wird in die Thematik der Szene eingeführt.

Halbtotale - medium long shot

Es wird ein beschränkter Ausschnitt der Totalen gezeigt. So wird der Blick des Betrachters auf das bildwichtige Motiv gelenkt.

Amerikanische Einstellung - american shot

Es handelt sich um eine in Western häufig eingesetzte Einstellungsgröße. Beim Duell sehen wir einen Revolverhelden mit seinem Colt vom Knie an aufwärts im Vordergrund, sein Gegner steht leicht seitlich versetzt im Bildmittelgrund.

Halbaufnahme - medium close-up

Es werden erste Details gezeigt, z.B. die obere Körperhälfte einer Person.

Nahaufnahme - close-up

Es werden weitere Details des Motivs gezeigt. Für den Betrachter gehen der Überblick und die Möglichkeit zur Einordnung in die Umgebung verloren.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Videodatenberechnung

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen. Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe.
https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2023

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Datenmenge berechnen bei digitalen Audiodaten

Formel:

( ( Auflösung * Samplefrequenz * Kanäle) * Zeit ) : (8 * 1024 * 1024) = X Mebibyte

Joar, nu, wat is Auflösung?

Die Auflösung bei digital vorliegenden Audiodaten ist entweder 8 bit oder 16 bit. (CD-Qualität = 16 bit) 8bit nimmt übrigens keiner, da die Qualität zu stark leidet bei der Audiodatei!

Samplefrequenz? Nie gehört!

Die Samplefrequenz ist die Anzahl der gemessenen Signale pro Zeiteinheit. Gut, hilft jetzt auch nicht weiter. Diese Anzahl wird in Hertz (kHz = Kilohertz; 1 Hz = 1 Messung pro Sekunde) angegeben und liegt zwischen 12000 und 44100 hz (44kHz). Warum 44100 kHz? Weil zu dem doppelten Wert des oberen Endes des hörbaren Bereichs (22000 hz bzw. 22kHz * 2 = 44kHz) noch 10% hinzugerechnet werden.

Kanäle (nicht in die Venedig)

Bei Audiodaten gibt es entweder Mono-, Stereo- oder verschiedene Versionen von Surroundsound. Entsprechend gibt es eine bestimmte Anzahl an Kanälen für jede Audiodatei. Mono = 1 Kanal, Stereo = 2, Surround 5+1 = 6 Kanäle. (CD-Qualität = Stereo)

Und das ergibt nun?

Daraus errechnet sich der Datenstrom pro Zeiteinheit. Bei einer popligen CD, wie sie fast jeder wohl zuhause irgendwo rumfliegen haben wird, wäre das dann: 44.100 hz * 16 bit * 2 (Stereo) = ca. 1411kbit/s

Zeit

Das Lieder eine gewisse Länge vorweisen sollte jedem klar sein. Die Länge der Audiodatei berechnet man in Sekunden (s).

Ach so!

Genau. Und wenn man nun hingeht und den Datenstrom mit der Zeit multipliziert hat man die komplette Datenmenge einer Audiodatei errechnet. Kann man nun noch in die entsprechende Datenmengenangabe umrechnen. Im Normalfall wird die Datenmenge für Audiodaten in MB (Megabyte) angegeben, aber es soll auch schon Fälle gegeben haben (bei wav Dateien, denn die sind unkomprimiert) wo die Datenmenge so groß war, dass GB (Gigabyte) gefragt waren.

Ein Beispiel bitte!

Bedienen wir uns dem beliebten ZFA Beispiel (angeblich, mein Lehrer meinte dem wäre so) der CD-Qualität.

Aufgabe:

Eine Audiodatei von 3 Minuten und 15 Sekunden liegt in CD-Qualität vor. Errechnen Sie die entstehende Datenmenge (in MB).

Dauer des Liedes: 3 Minuten + 15 Sekunden = 3 * 60s + 15s = 195s

Datenstrom: 44.100 * 16 * 2 = ~1411000

1411000 bit * 195s = 275145000 bit

275145000 : (8 * 1024 * 1024) = ca. 32,8 Mebibyte

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Datenmenge

Digital Audio

Datenmengenberechnung

Audiodaten

Formel

Bewertung:

Durchschnitt: 4 (2 Stimmen)

Videodatenberechnung

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Videofilm Codecs

Als Codec wird allgemeine das technische Verfahren, welches Daten oder Signale digital kodiert und wieder dekodiert, bezeichnet.

Weitere Infos dazu gibt es auch auf Wikipedia

Hier noch ein Beitrag auf IT-Wissen zum Thema Codierung/Decodierung

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 4 (1 Stimme)

Videos in Websites einbinden

Es gibt viele Wege Videos in Webseiten einzubinden. Die zwei wichtigsten werden Flash-Videos mit HTML einbinden und die neue HTML5-Videotechnik sein.

HTML5 Video:

Beim Einbinden eines Videos mit HTML5 muss man darauf achten, dass nicht alle HTML5 fähigen Browser die gleichen Videoformate wiedergeben können.

Das heißt, man muss das Ausgangsvideo in die drei gängigsten Formate konvertieren (Ogg Theora, Mpeg4 und WebM).Optimalerweise werden alle drei Formate dann mit dem HTML5 Tag <Video …> gleichzeitig eingebunden (siehe unten).

Die Konvertierung des Ausgangsvideos kann mit einem Konverter, den es kostenlos gibt, konvertiert werden. http://www.freemake.com/de/free_video_converter/

Dazu ließt man das Quellvideo ein und der Konverter gibt es in drei Formaten wieder aus.

So wird ein Video beispielsweise eingebunden:

<video controls width=640 height=426>
   <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
   <source src="video.webm" type='video/webm' >
   <source src="video.mp4" type='video/mp4'>
<p>Ihr Browser unterstützt kein HTML5 (Alternativtext für alte Browser)</p>
</video>

HTML-embed:

Bzgl. der Bereitstellung von Filmen (betrifft auch Audio-Dateien), ist es vielleicht zum Vorteil die Unterschiede von "Download, Progressiver Download und Streaming" zu kennen.

Streaming: Hier wir keine Datei lokal auf der Festplatte gespeichert, sondern direkt im Browser abgespielt. Beim nächsten Besuch der Seite muss die Datei aber neu geladen werden.
Download: Eine Datei muss komplett lokal auf die Festplatte geladen werden um ihn sich angucken zu können. Danach kann man aber direkt vorspulen, etc. Ein neues Laden ist nicht notwendig da man alle nötigen Dateiinformation hat.
Progressiver Download: Hier wird ebenfalls eine Datei progressiv lokal auf die Festplatte heruntergeladen. Man kann Sie bereits abspielen auch wenn sie noch nicht vollständig geladen ist. Ein Vor-Spulen ist allerdings nur soweit möglich wie der Download bereits fortgeschritten ist.

Vorteile von Videos via YouTube

kein verbrauch von Speicherplatz auf dem eigenen Webserver
wenn man bereits auf dem Chanel ist, kann man alle weiteren Videos direkt ansehen
Einbindung sehr leicht und komfortabel
relativ viele Einstellungs- und Anpassungsmöglichkeiten

Weiterführende Links:

http://blog.sybit.de/2012/02/video-tag-vs-flash-der-ring-ist-eroffnet/

http://www.html-seminar.de/html-5-video.htm

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Zeilensprungverfahren (Interlacing/Interlaced Scanning)

a. Grundlagen

• Das Zeilensprungverfahren stammt aus der Fernsehtechnik und wurde 1920 zur Verringerung des Bildschirmflimmerns entwickelt

• Die damalige Übertragungsfrequenz (UHF) konnte nur eine begrenzte Menge an Informationen übertragen (25 Pics./s), was ein starkes Flimmern und keinen sonderlichen Sehgenuss mit sich bringen würde.

• Beim Zeilensprungverfahren (Interlacing) wird jedes Bild in 2 Halbbilder aufgeteilt, die nacheinander gesendet und jew. Um eine Zeile versetzt auf den Bildschirm geschrieben werden.

==> Im ersten Halbbild (Upper-Field) werden alle ungeraden Zeilen angezeigt ( 1, 3, 5, 7...)

==> Im zweiten Halbbild (Lower-Field) werden alle geraden Zeilen angezeigt ( 2, 4, 6, 8 ...)

• Das menschliche Auge nimmt die einzelnen Zeilen nicht als flimmernd, sondern als wandernd wahr. Es integriert die Zeilensprünge im Idealfall zu einem Gesamtbild.

b. Standard-Daten des deutschen PAL

• ein Vollbild (Frame) hat 625 Zeilen, davon sind 587 (bzw. 575) sichtbar

• 25 Vollbilder pro Sekunde (= 40 ms für jedes Vollbild, davon 2,4 ms (= 32 Zeilen) unsichtbar für den Bildrücklauf)

• 833 Bildpunkte pro Zeile (= 520 625 Pixel pro Vollbild)

• Zeilendauer ist 64 μs, was einer Zeilenfrequenz von 15625 Hz entspricht (1 s / 625 Zeilen x 25 Vollbilder), davon sind ca. 52 μs sichtbar und 12 μs nicht sichtbar für den Zeilenrücklauf

• unter Berücksichtigung der Augenträgheit, der Rücklaufzeiten für Zeile und Bild und der Nachleuchtzeit des Bildschirms wird eine Videobandbreite von mindestens 5 MHz benötigt.

c. Vorteile

• Reduktion des Bildflimmerns

• Verringerter Bandbreitenbedarf

• Hohe vertikale (zeitliche Auflösung) → Voraussetzung: Das Quellmaterial ist im Filmmodus aufgezeichnet worden.

d. Nachteile

• Zeilenflimmern, besonders bei Fernsehern mit „modernen“ Bildröhren (erhöhte Auflösung)

==> Die Displays haben eine kürzere Nachleuchtzeit, die jedoch ein schärferes Bild liefert.

==> Durch die kürzere Nachleuchtzeit ist das zuerst geschriebene Halbbild ein wenig dunkler als das darauf folgende Halbbild. Dieser, wenn auch geringe, Helligkeitsunterschied bewirkt eine störende, besonders an detailreichen Teilen des Bildes wahrzunehmende Helligkeitsmodulation.

==> Der Effekt kann durch Erhöhung der Bildfolgefrequenz (100Hz) oder durch Konvertierung ("De-Interlacen") in progressive Abtastung vermieden werden. Letzteres erfordert dann allerdings auch die Wiedergabe auf progressiven Displays.

e. De-Interlacing „klassisch“

• Das Zeilensprungverfahren hat nur Sinn bei der Betrachtung am Fernseher, da PC-Monitore mit einer flimmerfreien, höheren Frequenz arbeiten.

• Das Zusammenführen von Halbbildern zu Vollbildern (De-Interlacing) hat verschiedene Gründe

==> Bestimmte Videoformate lassen keine Halbbilder zu (z.B. MPEG-1)

==> Oder um aus einem Video ein Standbild zu exportieren

• De-Interlacing Verfahren:

==> Zusammenlegen

i. Beim einfachen Zusammenlegen von Halbbildern entsteht eine Kammstruktur bzw. eine Sägezahneffekt.

==> Interpolieren

i. Hierbei werden bei den Teilen beider Halbbilder, die sich unterscheiden (Kämme) interpoliert und Mittelwerte gebildet.

==> Halbieren

i. Die Hälfte der Halbbilder wird einfach weggelassen. Da dadurch die Anzahl der Zeilen halbiert wird. Das hat allerdings auch die Halbierung der Bildhöhe, oder um das Seitenverhältnis zu erhalten, auch der Bildgröße zur Folge.

ii. Die Methode empfiehlt sich wenn die Bildgröße ohnehin reduziert werden sollte.

• Nachteile des De-Interlacing Verfahrens

==> Es ist nur unter Verlust durchzuführen

==> Schmale Strukturen können leicht verschwinden

==> Schräge Kanten werden ggf. stufig dargestellt

==> Bei der Interpolation können Bereiche „matschig“ aussehen

==> Das Video hat dann nur 25 Bilder/s, was nur akzeptabel ist, wenn Dateigröße wichtiger ist als Bildqualität

f. Von Interlaced (analog) zu Progressiv (digital)

• Aufnahmegeräte die ein Band oder DVD als Medium verwenden zeichnen → Interlaced auf

• Aufnahmegeräte die SD-Karten o.ä. als Medium verwenden zeichnen → Progressiv auf

• Da digitales Video komprimiert ist, steht wesentlich mehr Bandbreite zur Verfügung und Bilder können mit höherer horizontaler und vertikaler Auflösung (= Vertikalfrequenz) dargestellt werden. Ein Zerlegen von Vollbilder in Halbbilder und das Verschachteln sind nicht mehr notwendig. Es können Vollbilder vollständig ohne Zeilensprung (progressiv oder non-interlaced) flimmerfrei dargestellt werden.

==> Ein Nachteil der progressiven Abtastung ist die im Vergleich zum Interlaced Video bei gleicher Vertikalfrequenz deutlich verringerte zeitliche (vertikale) Auflösung. Bei schnellen Bewegungen im Bild können diese dann ruckelig wirken.

• Bei der Umwandlung von Interlaced Videos zu Progressiv MUSS! Die Funktion De-Interlacing genutzt werden, da es sonst zu schweren Interlaced-Artefakten kommen kann.

g. De-Interlacing bei der Umwandlung

• Weave

==> Im Weaver-Modus wird kein Deinterlacing vorgenommen. Beide Halbbilder werden ineinander verwoben. Bei im Kamera-Mode aufgezeichneten Videos können starke Interlace-Artefakte auftreten. Weave eignet sich nur für im Film-Mode aufgenommene Videos.

• Angleichen/Blending

==> Beide Halbbilder werden durch Zeilenverdopplung zu Vollbildern gewandelt. Jede Zeile des Bildes wird aus dem Mittelwert einer Zeile aus dem ersten Halbbild und einer Zeile aus dem zweiten Halbbild berechnet. Da der zeitliche Zusammenhang zwischen den Halbbildern durch das Mischen verloren geht, eignet sich Blending nur für Videos im Kamera-Modus. Videos im Film-Mode ruckeln stark.

• Wippen/Bobbing

==> Beide Halbbilder werden durch Zeilenverdopplung (per Interpolation zwei benachbarter Zeilen eines Halbbildes) zu Vollbildern gewandelt. Beide Vollbilder werden nacheinander gezeigt. Das Bild wird beim Bobbing zwar etwas weichgezeichnet, der temporale Zusammenhang zwischen den Halbbildern bleibt aber erhalten, was zu flüssigen Bewegungen führt.

• Verwerfen/Skip/Discard

==> Ein Halbbild wird mittels Interpolation zwei benachbarter Zeilen des Halbbildes zu einem Vollbild gewandelt. Das zweite Halbbild wird verworfen. Das deinterlacete Bild ist recht stark weichgezeichnet.

• Linear

==> Das Prinzip ist ähnlich wie beim Bobbing. Nur werden die Zeilen des zweiten Halbbildes aus den benachbarten Zeilen des ersten Halbbilds linear interpoliert. Zeile 2 wird also aus Zeile 1 und Zeile 3 berechnet.

• Adaptive Verfahren

==> Ein adaptives Deinterlacing kann nur mit erheblichen Hardwareaufwand und Prozessorleistung durchgeführt werden. Zur Berechnung eines bestimmten Vollbildes werden mehrere weitere vorangegangene und nachfolgende Vollbilder in einem Bildspeicher gehalten und miteinander verglichen. Sich bewegende Bildanteile werden mittels Mustererkennung detektiert und aus den Änderungen werden Bewegungsvektoren berechnet. Diese werden dann auf das zu bearbeitende Bild angewendet.

==> Die meisten Signalprozessoren in Flachbildschirmen verwenden adaptives Interlacing.

h. Exportieren von Videos aus Schnittprogrammen

• Interlaced ist immer dann zu wählen, wenn die Quelle analoges Video im Zeilensprungverfahren von VCR, Camcoder, TV oder in den digitalen Formaten DV, MiniDV, DVCAM, Digital8, HDV, DVCPro ist.

• Progressiv ist nur bei progressiv abgetasteten Quellen wie progressives digitales Video von Camcordern (z.B. MPEG-4 AVC/AVCHD, H.265 HEVC) oder DVD und Blu-ray einzustellen. MPEG-1 (CDi, VCD) ist übrigens immer progressiv!

• Videos von der DVD können sowohl interlaced oder als auch progressiv sein (je nachdem wie sie gedreht worden sind: Chemischer Film / Analog-Videokamera / Digitalkamera).

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 5 (1 Stimme)

Vendor-Präfix

aus:www.mediaevent.de

Die Browser-Hersteller implementieren nicht nur die CSS-Eigenschaften, die zum aktuellen CSS-Standard gehören. Browser greifen schon mal vor und implementieren neue CSS-Regeln als »private« Eigenschaften. Für die Browser-eigenen Eingenschaften hat das W3C in der CSS-Spezifikation den Browser-Präfix zum Standard gemacht.

Der Browser-Präfix erlaubt Tests und Experimente mit neuen CSS-Eigenschaften schon in einem Draft- oder Beta-Zustand.

aus wiki.selfhtml.org/wiki/Browserpräfix:

Bei der Einführung neuer CSS3-Eigenschaften wurden diese oft von einzelnen Browsern schon vor der Übernahme in den Standard implementiert. Damit diese jedoch keine Probleme verursachen, wenn ein Entwurf geändert oder verworfen wird, waren die Hersteller dazu angehalten, Eigenschaften und Werte als herstellerspezifisch mit einem vendor-prefix zu kennzeichnen.

-moz-: Gecko Rendering Engine (Mozilla Firefox)
-ms-: Trident Rendering Engine (Microsoft Windows Internet Explorer)
-o-: Presto Rendering Engine (Opera bis Version 12)
-webkit-: WebKit Rendering Engine (Apple Safari, Google Chrome Opera 15+)
-khtml-: KHTML Rendering Engine (Konqueror); einige ältere -khtml-Eigenschaften werden auch von WebKit verstanden.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Video auf Webseiten

Formate

Es gibt drei essentielle Formate für Videos im Web.
MP4, OGG und WEBM.

80% der Videos im Web sind inzwischen MP4-Videos.

Bei der Verwendung von Videos gibt es zu beachten, dass MP4 ein obligatorisches Element ist. OGG oder WebM sind ergänzende Video-Formate. Für eine maximal mögliche Broswerkompatibilität in HTML5 sind allerdings all diese drei Formate beim Anlegen empfehelenswert.

Codecs

Codecs sind am Rande erwähnt, denn sie stellen nru selten eine Fehlerquelle dar und müssen dann geändert werden. Viel wichtiger sind die Standard-Codecs der Videoformate in HTML5-fähigen Browsern. Man unterscheided dabei zwischen video und audio codec.

Die Codecs der einzelnen Formate sind:

MP4
video codec = h.264
audio codec = AAC

OGG
video codec = Theora
audio codec = Vorbis

WebM
video codec = VP8
audio codec = Vorbis

Anwendung

Eingebunden werden Videos mit dem entsprechenden video-tag <video>

<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Ihr Browser unterstützt kein Video
</video>

Fallback

Falls der Browser das Video-element nicht unterstützt oder ein entsprechendes Format nicht angegeben ist. Gibt es neben der Möglichkeit einfach das richtige Format zusätzlich anzubieten noch den Veteranen Flash-Player. Für Browser wie IE8 oder IE7, die kein Video-Tag unterstützen ist es obligatorisch, dass ein FlashVideo zusätzlich eingebunden wird.

</object>

</video>

Wie werden Videos manipuliert?

HTML5 Videos lassen sich über Javascript manipulieren. So zum Beispiel das Pausieren, stoppen oder auch das Abfangen, wenn das video einen bestimmten Punkt im Video erreicht

Grundlegende Dinge

Auch bei Videos im Web gibts paar Regeln bzw. Empfehlungen für Usability und Co.

1. Videos, die nicht sofort lokalisierbar sind, soltten nicht automatisch starten. (z. B. Video am Ende einer Sidebar)
2. Videos, die sich wiederholen ('loopen'), sollten initial auf stumm sein.
3. Videos sollten generell eine Abspielleiste besitzen, es sei denn das Video ist ein Stilmittel
4. Die Abspielleiste sollte wenigstens diese Elemente anbieten: Play, Pause, Full Screen, Lautstärkenregelung.

Weiterführende Links: http://www.html-seminar.de/html-5-video.htm

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Video

HTML5

Bewertung:

Bisher keine Bewertung

Videokomprimierung

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen. Konkrete Aufgaben gemeinsam lösen oder besprechen könnt ihr zudem in der Lerngruppe.
https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2023

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Video-Komprimierung

Komprimierung kann grob in zwei Arten - klassifiziert werden

Verlustfreie
In der verlustfreie Komprimierung ist keine Daten während der Komprimierung verloren. Wenn die komprimierte Datei dekomprimiert wird, ist das Ergebnis identisch mit den Daten vor der Komprimierung. Computerprogrammen, Software-Anwendungen, Datenbanken etc.. werden komprimiert mit verlustfreie Techniken, da eine Änderung noch ein Bit an Daten nutzlos machen oder falsche Ergebnisse produzieren kann. Bei den meisten Dateien verringern verlustfreie Methoden der Größe von nur 50-60 %. Bekannte verlustfreie Kompressionsmethoden gehören Zip- und RAR.

Verlustbehaftete
- verringert die Dateigröße so dass nur ein Teil der ursprünglichen Daten beibehalten wird
- Korrekt komprimierte Video- und audio-Dateien sind fast nicht zu unterscheiden von der
ursprünglichen zu den menschlichen Augen oder Ohren
- in audio-Kompression werden nicht-akustische Komponenten des Audiosignals entfernt
- unkomprimierte AVI-Dateien sind sehr groß

- AVI-Codecs (Kompressor-DECompressor) reduzieren Dateigrößen erheblich und gleichzeitig eine
optimale Qualität.
- AVI's Popularität und Erweiterbarkeit hängen die Tatsache, dass Sie verschiedene Video- und
audio- Codecs frei wählen können
(In der Regel eine Codec ist ein Programm, komprimiert oder dekomprimiert, audio oder video.)

MPEG
MPEG ( Motion Pictures Experts Group) ist das derzeit wichtigste zeitliche Kompressionsverfahren. Es wird in der Spezifikation MPEG-2 bei der DVD-Produktion sowie beim digitalen Fernsehen verwendet.
MPEG beruht auf der Tatsache, dass sich bei einem Videoclip von Bild zu Bild nicht sämtliche Bildinformationen, sondern nur Teile des Bildes verändern. Die Idee ist naheliegend nur die Teile eines Bildes abzuspeichern , die sich auch tatsächlich ändern.
Der Nachteil eines MPEG komprimierten Videos besteht darin, dass es nur an den I-Frames geschnitten werden kann. Für alle anderen Frames liegen die Bildinformationen nicht komplett vor.
(I-Frame Intraframe): Bei I-Frame werden alle Informationen eines Bildes gespeichert. Als Kompressionsverfahren kommt die Cosinus-Transformation wie bei JPEG zum Einsatz. Typischerweise werden zwei I-Frames pro Sekunde abgespeichert.
(MPEG-Formate: MPEG-1, MPEG-2, MPEG-4, MPEG-7)

CINEPAK
Dies ist ein beliebtes Codec von Super Mac Inc und Radius. Es behandelt Videos, die eine Menge Bewegung sehr gut enthalten. Es ist eine gute Wahl für die Verteilung von AVI-Dateien, weil es in Microsoft Windows enthalten ist.

MICROSOFT VIDEO 1
Dies ist ein beliebtes Codec zusammen mit allen Versionen von Windows. Microsoft Video 1 bietet ausgezeichnete Videoqualität und angemessenen Kompressionsrate.

DivX
Diese kompatible MPEG-4-Codec bietet hohe Qualität Komprimierung. Der Codec bietet Unterstützung für mehrere Sprachen, gute visuelle Qualität und Geschwindigkeit. Benutzer haben auch
Kompatibilitätsprobleme zwischen Dateien mit verschiedene Versionen von DivX.

XviD
XviD ist ein MPEG-4 kompatibler video-Codec zum Komprimieren und Dekomprimieren digitalen Videos entwickelt. Es dient als Open-Source-Alternative zu DivX.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Videotechnik Grundlagen

Videofilme setzen sich aus einer Reihe einzelner Bilder zusammen. Ein einzelnes Bild des Films wird als Frame bezeichnet. Durch das Projizieren mehrerer Frames pro Sekunde wird der Eindruck bewegter Bilder erzeugt.

Videonormen
NTSC
Einführung: 1953 vom National Television System Comitee
Länder: USA und Kanada
Anmerkung: Führt bei Hauttönen zu Übertragungsfehlern

PAL (Phase Alternation Line)
Modifikation der NTSC-Norm
Einführung: 1962
Länder: Westeuropa (außer Frankreich)

SECAM
Einführung: 1957
Länder: Frankreich
Anmerkung: Dieses Verfahren weist bei extremen und schnellen Farbwechseln Flimmereffekte auf

QuickTime
QuickTime ist eine Systemsoftware-Erweiterung und ermöglicht das Abspielen und Bearbeiten von digitalen Videofilmen und virtuellen Räumen (QTVR > Quick Time Virtuell Reality).
QuickTime arbeitet mit folgenden Softwarekomponenten:

– Movie Toolbox
zuständig für Zeitmanagement eines Films

– Image Compression Manager (ICM)
zuständig für die Komprimierung und Dekomprimierung des Videos

– Component Manager
Verwaltungsmanagement zur Unterstützung der Hard- und Software

Aufbau eines Digitalen Films
Filme haben zwei verschiedene Spuren oder Tracks: eine Videospur und eine Audiospur. QuickTime-Filme sind im Prinzip genauso aufgebaut, jedoch nicht auf zwei Spuren beschränkt. Sie können mehrere Spuren im Audio- und Videobereich haben.

Hinzu kommt eine Spur mit einer Zeitskala. Der Film wird über eine numerische Zeitskala gesteuert. Positive Zahlen bewirken einen normalen Vorlauf, negative Zahlen lassen den Film rückwärts laufen.
QuickTime-Filme haben ein eigenes Zeitkoordinatensystem.
Es beinhaltet eine Zeitskala und eine -dauer.

Der Component Manager steuert den Zeitablauf derart, dass die Filme auf verschiedenen Rechnersystemen immer in der richtigen Geschwindigkeit ablaufen.

Vorschau
Die Vorschau wird als Kontrolle des Schneidergebnisses genutzt. Eignet sich nicht zur Kontrolle komplexer Übergänge oder Animationen, da hier mit reduzierten Videospuren und einer veränderten Timebase gearbeitet wird.

Poster oder Plakat
Ein Plakat ist eine statische optische Darstellung eines Films und befindet sich an einem bestimmten Zeitwert im Zeitkoordinatensystem eines Films. Es wird als optische Anzeige für den Inhalt des Films und als Markierung für die Position des Films auf dem Bildschirm genutzt.

Digitalisieren von Videomaterial
Hardwarevoraussetzungen: eine S-VHS-Videoquelle sowie eine Video Capture Card (Digitalisierungskarte)

Die Bildgröße, die Farbtiefe und die Framerate bestimmen die anfallende Datenmenge. Da es sich um sehr hohe Datenmengen handelt, ist es notwendig, die benötigten Datenmengen zu reduzieren.
Es gibt drei Möglichkeiten der Datenreduzierung:
-Komprimieren der Videodaten
-Verringern der Bildmaße des aufgenommenen Videos
-Verringern der Framerate des aufgenommenen Videos

Komprimierung

Unter Komprimierung versteht man den Vorgang des Entfernens oder Umstrukturierens von Daten mit dem Ziel, die Datei zu verkleinern.
Für das Komprimieren und Dekomprimieren von Videos werden Komprimierungsalgorithmen – oder auch Codecs genannt – benötigt. Codecs sind mit Plug-ins vergleichbar. Sie vergrößern den Funktionsumfang der Videoschnittsoftware.
Verschiedene Codecs:
Animation, Cinepak, Grafik, Video, MPEG

Diese Codecs verwenden verschiedene Methoden des Entfernens und Umstrukturierens der Daten.

Verlustfreie Komprimierungsmethoden
-Originaldaten bleiben erhalten
-in den meisten Fällen wird eine Lauflängen-Kodierung verwendet (hier werden fortlaufende Bereiche gleicher Farbe entfernt)
-eignet sich für Bilder, bei denen z.B. Hintergründe oft aus einer Farbe gebildet werden
-oft kein großer Einspareffekt

Verlustreiche Komprimierungsmethoden
-Bildinformationen gehen verloren
-es wird versucht, Bildinformationen zu entfernen, die dem Betrachter nicht auffallen
-viele dieser Methoden bewirken einen zusätzlichen Datenverlust, wenn diese Bilder erneut komprimiert werden
-es gibt jedoch Codecs, die eine frühere Komprimierung registrieren und somit eine zweite Komprimierung zu einem sehr geringen Datenverlust führt

Räumliche Komprimierung
Hierbei werden die Daten jedes einzelnen Frames komprimiert (immer verlustreich)

Zeitliche Komprimierung:
Hier werden die Daten durch Vergleich der einzelnen Bilder über einen Zeitraum komprimiert (weitestgehend verlustfrei). Häufige Nebeneffekte: Verschwimmen, Streifen und Konturbildung im Film Beispiel: Framedifferenzierung
Es werden die Daten der Frames gespeichert, die Änderungen zum vorherigen Frame enthalten. Gut geeignet für Filme mit wenig Bewegung und hohen Anteilen n Wiederholungen von einem Frame zum nächsten.

JPEG-Bilddatenkompression
Wenn längere digitale Videosequenzen übertragen und gespeichert werden müssen, ist dies ohne Bilddatenkompression nicht möglich. Ohne eine Video-Digitalisierungskarte erfolgt die Kompression über Software-Codecs, welche die Komprimierung bzw. die Dekomprimierung mit Hilfe der CPU durchführen. Das Aufzeichnen von Videosequenzen in voller Bildgröße und -anzahl auf eine Festplatte ist mit einem Codec-Verfahren nicht machbar.

Mit einer Digitalisierungskarte ist dies möglich, da diese einen Komprimierungsprozessor für die Bilddatenkomprimierung zur Verfügung stellt.

Komprimierungsabfolge
1. Wandlung von RGB in YUV-Format
(Y = Helligkeit/Luminanz, U und V liefern die Farbinformation/Chrominanz)
2. Chrominance-Subsampling CSS
Dabei wird berücksichtigt, dass das menschliche Auge Helligkeitsunterschiede besser wahrnehmen kann als Farbunterschiede. Das bedeutet, dass die Farbanteile zugunsten von Helligkeitswerten im Verhältnis 4:2:2 reduziert werden. Auf vier Helligkeitsinformationen kommen nur zwei Farbinformationen U und V.
3. DCT-Transformation
Die Bildinformationen werden mit der sogenannten Diskreten Cosinus Transformation in eine leichter komprimierbare Form gebracht.
4. Lauflängencodierung
Diese Art der Kodierung reduziert Bereiche gleicher Farbe und gibt nur deren Häufigkeit im Film an.
5. JPEG-Kodierung

Bei der Filmwiedergabe erfolgen die Schritte in umgekehrter Reihenfolge.

MPEG-Standards
MPEG steht für Motion Picture Expert Group. Dies ist der Ausschuss, welcher die Standards für die Komprimierung und Dekomprimierung von Digitalvideos festlegt.
Es gibt folgende Normen:
MPEG 1, -2, -4 und –7.

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

QuickTime

Videokomprimierung

Bewertung:

Bisher keine Bewertung

Web 2.0-Publishing

Unter Web 2.0 versteht man meistens die Kombination von frei zugänglichen und in der Regel kostenfreien Online-Medien und Tools sowie deren Verknüpfung, die es faktisch jedem ermöglichen Inhalte ins Netz zu stellen, ohne eigene Server etc. Auch der Aspekt der sozialen Netzwerke spielt eine große Rolle.

I. Verschiedene Definitionen sind dazu im Umlauf:

1. Wikipedia
»Web 2.0 ist ein Schlagwort, das für eine Reihe interaktiver und kollaborativer Elemente des Internets, speziell des WWW steht und damit in Anlehnung an die Versionsnummern von Softwareprodukten eine Abgrenzung von früheren Nutzungsarten postuliert.«

2. Tim O’Reilly
»Web 2.0 is the network as platform, spanning all connected devices; Web 2.0 applications are those that make the most of the intrinsic advantages of that platform: delivering software as a continually-updated service that gets better the more people use it, consuming and remixing data from multiple sources, including individual users, while providing their own data and services in a form that allows remixing by others, creating network effects through an “architecture of participation,” and going beyond the page metaphor of Web 1.0 to deliver rich user experiences.«

3.
Aus technischer Sicht bezeichnet »Web 2.0« auch eine Anzahl von bereits in der zweiten Hälfte der 1990er Jahre entwickelten Methoden, von denen viele erst mit dem Aufkommen einer großen Zahl breitbandiger Internetzugänge weltweit und allgemein verfügbar wurden. Typische Techniken, Internet-Anwendungen bzw. Leistungen sind folgende:

Abonnementdienste mit RSS/Atom oder ähnlichem, bei denen Informationen zwischen Websites ausgetauscht werden
Techniken, die es ermöglichen, Web-Anwendungen wie herkömmliche Desktop-Anwendungen zu bedienen (z. B. Ajax)
Weblogs (persönliche „Tagebücher“ im Netz)
Anwendungen für soziale Netzwerke
Webservices
Bürgerjournalismus-Internetseiten

II. Anwendungen aus der Web 2.0-Welt:
YouTube, Twitter, myspace, facebook, Blogs, Wikipedia

III. Weiferführende Links:
What is Web 2.0 von Tim O’Reilly, deutsche Übersetzung

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

Bewertung:

Bisher keine Bewertung

Webfonts

Hintergrund: Beim Interpretieren von HTML-Code kann der Browser im Regelfall nur die Schriften, die im Computersystem des Besuchers aktuell installiert sind, nutzen, um HTML-Text anzuzeigen.
Sobald der Browser die Anweisung erhält (z.B. per CSS), eine Schrift zu verwenden, die nicht installiert ist, muss er wohl oder übel auf eine der installierten Schriften ausweichen, also die Anweisung zur Schriftart ignorieren.
Das hat dazu geführt, dass Webdesigner sich in der Vergangenheit auf Schriftarten beschränkt hatten, die auf möglichst vielen Computersystemen installiert waren, wie z.B. die ARIAL-Schriftart. Zudem gab man stets mehrere Schriftarten an, um in etwa steuern zu können, welche Schriftart der Browser nutzen sollte, falls die zuerst angegebene Schrift nicht auf dem Computersystem installiert war.

Das alles war sehr unbefriedigend, konnte man doch z.B. keine Hausschrift einer Firma für ihren Webauftritt verwenden.

Nun kommen die Webfonts ins Spiel. Schon seit Jahren können Browser Fonts in Form von Dateien nachladen und diese wie die installierten Schriftarten nutzen.
Das erlaubte endlich die Nutzung von nahezu jeder Schrift im Browser, egal ob sie auf dem Computer installiert waren oder nicht.

Weiterführende Links:

http://de.wikipedia.org/wiki/Webtypografie

https://www.fontshop.com/webfonts

http://www.typolexikon.de/w/webfonts.html

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Webformulare

PDF zum Einstieg in die Thematik:
https://mediencommunity.de/system/files/u11-digital-webformulare.pdf

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Webseitenlayout

Das Screendesign wird gewöhnlich in PhotoShop, InDesign oder Illustrator umgesetzt. Beim Screendesign ist es wichtig von Anfang an die Usability im Auge zu haben das das Design dementsoprechend zu erstellen. Bei der Usabilty ist die Größe, das Raster, die gewählte Typo, die zuverwendenden Farben, Bildformate und Navigationsstrukturen und -hilfen zu beachten!

Im ScreenDesign bietet es sich an, mit den Größenangaben der mobile Devices zu arbeiten und anschließen auf 33% Anischtsgröße zu reduzieren (wie groß wird was dargestellt, wichtig für
Buttons und Text, da Touchscreen) . Cross-Media (PC und mobile Devices): PC, Tablet-PC, Smartphone verschiedene Seiten oder CSS-Weichen und „Responsive Webdesign“ (flexible Webseiten: die Seite muss auf einem flexiblen Grid basieren; eingebettete Grafiken müssen flexible sein;für verschiedene Screens werden verschiedene Ansichten der Website angesteuert ), siehe:
http://www.elmastudio.de/inspiration/webdesign-trends-funf-responsive-webseiten-layout-analysiert

Layout – Usability für mobile Devices – welche Richtlinien

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» spezielle Bedienungsfreundlichkeit (Usability)

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Inhalt reduzieren (gegenüber Webseite für PC) – schnelle Informationswiedergabe

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» einspaltiges Layout

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Navigation oben und unten bzw. immer ein Back-Button

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Texteingabe minimalisieren

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Design für Touchscreen (Achtung Schriftgröße! Für das I Phone wird 20px empfohlen und Buttons in der Größe von 40x40px) Die Mobile Devices (Smartphones) haben eine enorme Pixeldichte. Hat ein Desktop Monitor 100 -136ppi (dpi) kommen die mobilen Endgeräte auf bis zu 336ppi (Tendenz steigend). Das bedeutet, dass UI-Elemente teilweise nur 1/4 so groß erscheinen wie auf einem Monitor.

Umsetzung mit HTML und CSS
Media Queries
Nach dem WC3-Standart CSS Weichen – Media Queries (für responsive Webdesign). Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch Media Types geregelt. Media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zuzuordnen. Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit Media Queries die Eigenschaften und
Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Breite und Höhe (des Browser-Fensters)

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Breite und Höhe des Geräts

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?

{C}{C}{C}{C}{C}• {C}{C}{C}{C}{C}» Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der Media Queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern.

Nach Monitorauflösung

Nach Browserfenstergröße

Die komplexere Lösung

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 2.5 (2 Stimmen)

Website-Konzeption

Ziele einer Webseite

Werbung, Marketing, Verkaufsförderung
Direktvertrieb
Präsentation eines Produkts/einer Dienstleistung
Service
Optimierte Kundenkommunikation
B2B-Vertrieb
Betriebsinterne Kommunikattion verbessern

5 Dinge, die man bei Websites vermeiden sollte

Konfusion, unklare Strukturen
Baustellen, unfertige Webpages
falscher Ausdruck (politisch korrekte Formulierungen)
Schlechtes Grafik-Design
Wenig Liebe zum Detail, langweiliges Erscheinungsbild

Vorüberlegungen bei der Konzeption für eine Webseite

Welche Zielgruppe soll erreicht werden?
Wie präsentieren wir uns?
Welches Modell für die Navigation soll verwendet werden?
Was wollen wir erreichen? (Neues Produkt/Dienstleistungen)
Auf welchen Ausgabegeräten wird die Website abgerufen? (Anspruch an das Format bei festen Seitengrößen)

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

Werbebanner

Bannern sind die Flyer und Plakate des Internets, entweder als Grafik auf einer Website implementiert oder als gesonderte Pop-up-Fenster. Neben den rein grafischen und statischen Banner gibt es immer mehr animierte Banner oder auch Varianten, die Musik und Videos oder gar interaktive Elemente verwenden.

Einige übliche Bannerformate
468 x 060 Pixel – Full Banner
234 x 060 Pixel – Half Banner
120 x 240 Pixel – Vertical Banner
125 x 125 Pixel – Square Button
120 x 90 Pixel – Button 1
120 x 60 Pixel – Button 2
88 x 31 Pixel – Micro Bar
120 x 600 Pixel – Skyscraper

Die Bannerformate in den USA finden Sie hier.

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

XML-Datenbank

Anleitung für das Wiki

In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungen Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.

Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (http://www.mediencommunity.de/lerngruppe-mediengestalter-ap-winter-2016) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Bisher keine Bewertung

XML_ Zusammenfassung

Zum Verfassen von Kommentaren bitte anmelden.

Anhang	Größe
XML_Zusammenfassung.pdf	1.71 MB

Bewertung:

Durchschnitt: 5 (1 Stimme)

Zurück zum Fachpraktiker-Wiki

XSLT

Mit XSLT (Extensible Stylesheet Language Transformation) kann man eigene Tags angeben und mit XSLT kann man unter anderem XML zu HTML transformieren.

https://wiki.selfhtml.org/wiki/XML/XSL/XSLT

https://www.heise.de/ix/artikel/Mutabor-505896.html

Zum Verfassen von Kommentaren bitte anmelden.

Bewertung:

Durchschnitt: 1 (2 Stimmen)

Übertragungsraten - Berechnung

Hier ein umfangreicher Artikel zum Thema ADSL http://www.elektronik-kompendium.de/sites/kom/0305235.htm

Übungsaufgaben und Hinweis von cuya:

Informationen von www.mathemedien.de

Internetanschluss

Medienproduktion, alle Fachrichtungen

Hier können Übertragungsraten und -zeiten von Bedeutung sein.

20 Wie lange (in Minuten und Sekunden) dauert voraussichtlich der Upload von 16 Mebibyte Daten, wenn die nominelle Datenübertragungsrate 192 Kilobit pro Sekunde beträgt und die reale Übertragungsgeschwindigkeit auf 80 % dieses Werts geschätzt wird?

21 Wie hoch (in Kilobit pro Sekunde) war die effektive Datenübertragungsrate, wenn der Download eines 240 MiB großen Software-Updates sieben Minuten dauerte?

22 Wie lange (in Minuten und Sekunden) dauert der Download eines 240 MiB großen Software-Updates, wenn die effektive Übertragungsgeschwindigkeit um 25 % geringer ist als die nominelle Übertragungsrate von 6 Mbit/s.

23 Wie lange (in Minuten und Sekunden) dauert der Upload eines 25 MiB großen E-Mail-Anhangs, wenn die angegebene Übertragungsrate von 768 kbit/s zu 80 % erreicht wird? Berücksichtigen Sie bei der Berechnung, dass die Daten für die Übertragungg umcodiert werden, sodass sich die Datenmenge im Verhältnis 8 : 6 erhöht.

24 a) Das Hochladen von 50 Mebibyte dauerte 15 Minuten. Welche durchschnittliche Übertragungsrate in Kilobit pro Sekunde wurde erreicht?
b) Um wie viel Prozent wurde die nominelle Übertragungsrate von 512 kbit/s unterschritten?
c) Wie hoch müsste die effektiv erreichte Übertragungsrate sein, wenn die Übertragung von 100 MiB nicht länger als 5 Minuten dauern soll?

Lösung: www.mathemedien.de

Zum Verfassen von Kommentaren bitte anmelden.

Tags:

ADSL

Bewertung:

Bisher keine Bewertung