Digitale Medien

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

 

Bewertung: 
0
Bisher keine Bewertung

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.

AnhangGröße
PDF icon U5 Responsive Webdesign.pdf1.43 MB
Bewertung: 
0
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)
Bewertung: 
0
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/

Bewertung: 
3.5
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

 

 

Bewertung: 
4.25
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 dif­fe­ren­zierte 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 even­tu­ell 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.

 

 

 

Bewertung: 
0
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 den Betrieb eines serverseitigen CMS ist Webspace ASP/PHP und MS SQL /MySQL zwingend notwendig. Ohne diese Unterstützung kann kein solches CMS betrieben werden.

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

Bewertung: 
3
Durchschnitt: 3 (2 Stimmen)

Cascading Style Sheets (CSS)

CSS ist eine Ergänzung zu HTML und erlaubt es Formatierungen von Text bis hin zu Seitenlayouts zu beschreiben. Professionell arbeitet man mit einer externen CSS-Datei, deren Informationen mit den einzelnen HTML-Seiten verknüpft werden. Damit wird die Trennung von Inhalt und Layout und somit die bessere Strukturierung ermöglicht. CSS wird von den Browser interpretiert und wird als Client-Seitiges Format bezeichnet. Standardisiert und entwickelt wird CSS durch das W3C-Gremium.

Vorteile für das Verwenden von CSS:

  • Ermöglicht barrierefreie Gestaltung
  • Gestaltung für unterschiedliche Endgeräte durch Media Queries
  • Suchmaschinenfreundlich
  • Aktualisierungen und Designänderungen sind leichter und schneller, da man CSS global anlegen kann

Nachteile für das Verwenden von CSS:

  • Nur bedingt cross-browser-tauglich: Nicht alle Browser interpretieren CSS-Befehle standardgemäß oder überhaupt
  • User können Stylesheets abschalten oder verändern

 

Weiterführende Links
Self HTML

Bewertung: 
3
Durchschnitt: 3 (1 Stimme)

Bildpositionierung im CSS & HTML

Damit ist entweder die allgemeine Positionierung von Elementen mit CSS gemeint oder die Hintergrundbildpositionierungen mit CSS.

Positionierung von Elementen mit CSS

de.selfhtml.org/css/eigenschaften/positionierung.htm

Hier einige kurze Beispiele dafür:

1. Beweglich (Thumbnails, etc.)
img#Galeriebild{
float:left;
display:inline;
margin:11px;
border:0px;
}

2. Fest ( z.B. Buttons über irgendwas drüber )
img#Logo{
position:absolute;
left:33px;
top:55px;
border:0px;
}

3) Fest, nicht wegscrollen ( erst ab IE7 )
img#Logo{
position:fixed;
left:33px;
top:55px;
border:0px;
}

Wenn man was absolut positionieren will, dann muss die Box drumherum ebenfalls absolut oder - falls diese beweglich sein soll - relativ positionieren.

Beispiel: Man will etwas irgendwo über den Seiteninhalt positionieren, eine wunderschöne Layer-Werbung zum Beispiel. Wenn man da jetzt einfach absolut hinschreibt, dann klebt es am body fest. Wenn man aber den Seiten-div der mit "margin: 0px auto;" zentriert ist relativ setzt, dann orientiert sich das Element an der Seite.

Was im Code weiter unten steht, wird immer obendrübergeschoben (NICHT über Flash!!!)

 

Hintergrundbildpositionierungen mit CSS

de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image

Beispiel:

body{
background-image:url(../bilder/body-Hintergrund.jpg);
background-repeat: no-repeat; //(repeat-x, repeat-y, repeat)
background-position: left top;
//oder
background-position: center top;
//oder
background-position: 10px 30px;  //(10 von links, 30 von oben)
}

ALLGEMEINE POSITIONIERUNG IM CSS

  • body{
  • background-image: url(grafi k.gif);     = Hintergrundbild liegt im selben Ordner wie CSS-Datei
  • background-position: right bottom;     = position des Hintergrundbildes.
  • background-repeat: no-repeat oder repeat;    = (keine) Wiederholung des Hintergrundes
  • background-size: cover;     = Anzeigegröße des Hintergrundbildes.
  • background-size:
  • cover = Fläckendeckendes Bild, füllt ganzen Bildschirm aus, Bild wird hierbei "abgeschnitten", wenn Größe nicht passt.
  • auto = Skaliert originalformat auf gesamte Breite des Bildschirms
  • contain = Bild wird auf Inhalts"größe" des Webseitencontents skaliert.

 

In HTML einbinden (index.htm)

index = startseite

  • Verknüpfung durch <img> Tag
  • width, height = Breite und Höhe, Maße des Bildes, können in px "100" oder in Prozent "30%" angegeben werden
  • alt = “...“ Beschreibung des Bildes, zur Orientierung für Blinde. Suchmaschinen erkennen so
  • den Bildinhalt. Berschreibung wird angezeigt, wenn Bild nicht darstellbar ist.
  • src = “button.png“ Dateiname und Verlinkung des Bildes
  • href="link" Verlinkt das Bild mit einer Webseite

<img src=“button.png“ width=“200“ height=“200“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im selben Ordner wie der HTML-Code <img src=“Bilder/button.png“ width=“20%“ height=“30%“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im Unterordner „Bilder“ !ACHTUNG!alt ist sehr wichtig beim Einfügen eines Bildes. Gründen siehe oben.

 

Videos zum Thema

Grundlagen für den Gebrauch von Bilder auf einer der Webseite in HTML mit dem IMG Element. Wichtige Attribute bei Bildern sind sicherlich CLASS, TITLE und ALT.

https://www.youtube.com/watch?v=_BArhD7NubE

Auch hier grundlegende Informationen wie man Bilder Bilder in HMTL einfügt. 
https://www.youtube.com/watch?v=XvKT3FWSLfo

Möchte man Hintergrundbilder im HTML verwenden, dann werden diese über CSS zugewiesen.
https://www.youtube.com/watch?v=u5Chq_GF_8k

Bilder werden mittlerweile nicht mehr nur über IMG eingebunden. Für responsives Webdesign können Bilder an bestimmte Bildschirmanforderungen geknüpft werden. Z.B. Handy im Hochformat hat andere Anforderungen als ein 5K iMac. Dann kommt das PICTURE Element hinzu.
https://www.youtube.com/watch?v=uLLqafzVIlw&list=PLPjKx80JC4CAWBNOp8z_LJqYIekU8MzKi&index=4

Bilder für das Web optimieren ist ein ergänzender Teilbereich. Natürlich sollte man sich Gedanken über Auflösung und Qualität sowie Speicherplatz machen.
https://www.youtube.com/watch?v=udaLENwDyXY

 

Bewertung: 
0
Bisher keine Bewertung

CSS (Cascading Style Sheets)

CSS (cascading style sheets) ermöglicht das Formatieren von HTML/XML Tags und ist somit also für das Design einer Website verantwortlich. Größter Vorteil ist natürlich das strikte Trennen von Inhalt und Layout/Design (.html und .css). Das ermöglicht schnelles (und vor allem einheitliches) Ändern von Formatierungen.

Weitere Vorteile sind zum Beispiel:
1.Datenreduzierung (<h1> muss nur einmal formatiert werden und nicht in jedem HTML-Dokument)
2.Ermöglicht eine bessere Übersicht in den Dokumenten (Jeder der schon einmal einen Newsletter gemacht hat (dort wird das CSS nicht ausgelagert) weiß was ich meine).
3.Einbinden mehrerer CSS-Dateien (media, print, style-switcher, …)

Schreibweise
Selektor {Eigenschaft: Wert;}
h1 {font-size:18px;}
Die Überschrift h1 soll 18 Pixel groß sein.
Das kann auch kompliziert werden.

body#home .content_hide_all > h1:hover,
body#webdesign .content_hide_all > h1:hover {cursor: help;}

Wir lesen den Selektor von hinten:
Wenn ein h1 Element mit der Maus überstrichen (:hover) wird und es sich nur in der Verschachtelungsebene (>) (hier wird also die Vererbung eingeschränkt) von der Klasse  content_hide_all befindet und auf der Seite mit der ID (Individualformat) vom Body home oder webdesign ist, dann ist der Mauszeiger ein Fragezeichen.

Ziel einer solchen langen Anweisung ist es, das HTML-Markup so simpel und kurz zu halten wie es möglich ist.

Einbinden von CSS in das HTML:
1.im <head> als <style type=“text/css“>Hier kommt das CSS rein!</style> (wird beim Newsletter gemacht)
2.im <head> als Link <link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> (das CSS wird hier ausgelagert)
3.als inline-style <li style="display:block">Text</li> (wird beim Newsletter gemacht)
4.als Import innerhalb einer CSS-Datei: @import url(screen/fancy/jquery.fancybox-1.3.1.css);

Links zu CSS:

Quizsammlung zum Thema CSS http://www.thestyleworks.de/quiz/index.shtml

 

Bewertung: 
0
Bisher keine Bewertung

CSS-Selektoren

Hier könnt ihr eure Notizen, Sammlungen von hilfreichen Links etc. zum Thema sammeln. Einige Beiträge gibt es bereits aus vorhergehenden Prüfungsvorbereitungen.

Weiterführende Links

http://css-selektoren.mozork.de/

http://jendryschik.de/wsdev/einfuehrung/css/selektoren

Tags: 
Bewertung: 
0
Bisher keine Bewertung

Boxmodell (CSS)

Bewertung: 
2
Durchschnitt: 2 (1 Stimme)

CSS-Selektoren Tutorial

Wozu sind Selektoren da?

Selektoren innerhalb einer CSS-Datei sprechen HTML-Tags an und weisen diesen Attribute (Farbe, Hintergrundfarbe, Textformatierung uswusf.) zu und geben dazu die entsprechenden Werte an.

Klingt gut, aber wie sieht so ein Selektor aus?

Die Syntax (Schreibweise) einer CSS-Regel ist wie folgt:

Selektor { Attribut: Wert; }

wobei man jedem Selektor auch mehrere Attribute zuweisen kann. Will man dies denn nun tun, so trennt man die einzelnen Attribute immer mit einem Semikolon voneinander ab.

Bsp.: Selektor { Attribut, Wert; Attribut: Wert; Attribut: Wert; … }

Welche Selektoren gibts denn so?

Der Universalselektor

Wie man ihn auch aus den SQL-Befehlen kennt, das *. Mit dem Sternchen (Asterisk) spricht man alle Elemente einer HTML-Datei an, das heißt, dass allen Elementen die Attribute zugewiesen werden, die man in so einer CSS-Regel notiert.

Bsp.: * { color: #fff; background-color: #000; }

Mit dieser CSS-Regel wird allen Elementen weiße Schriftfarbe und schwarze Hintergrundfarbe zugewiesen. Sinn macht das sicherlich keinen, es dient lediglich dem Zweck.

Der Tag- bzw Typ-Selektor

Will ich nun genauer vorgehen und nur bestimmte Elemente meiner HTML-Datei ansprechen, so kann ich dies indem ich zum Beispiel nur einer bestimmten Sorte von Tags Attribute zuweise. Das ist einfacher als einem Kind nen Lolli zu klauen, glaubt es mir:

Bsp.: h1 { color: #f00; font-size: 36px; font-weight: bold; }

So, damit haben wir jeder Überschrift höchster Ordnung (jedem Tag h1) die Werte "rote Farbe", "Schriftgröße 36 Pixel" und "Schriftschnitt fett" zugewiesen.

Der Klassen-Selektor

Jetzt wird es langsam spannender. Wir wollen jetzt eine Klasse definieren. Klassenselektoren kann man beliebig vielen Tags auf einer HTML-Seite zuweisen. Nehmen wir an, wir haben Überschriften zweiter Ordnung (h2) einmal in der linken Spalte einer Webseite auf weißem Hintergrund und einmal in der rechten Spalte auf schwarzem Hintergrund. Dumme Geschichte, denn wir haben ja vorher notiert:

h2 { color: #000; }

wodurch alle Überschriften der zweiten Ordnung nun schwarz sind und somit rechts nicht mehr lesbar.

Das Problem lösen wir einfach indem wir allen h2-Tags auf der rechten Seite folgenden Zusatz geben:

<h2 class="name">Überschrift</h2>

Jetzt können wir diese Überschriften gesondert ansprechen mit einem Klassenselektor:

.name { color: #fff; }

Die Notierung ist also ein Punkt und der Name, den man dem Tag als Wert zuweist. Der Name ist hierbei frei wählbar. Ob man also sinnvoll ausschreibt "rechts" bei unserem Beispiel oder "name" wie ich oder sowas schönes wie "mistmistmist" bleibt euch überlassen. Wichtig ist folgende Schreibweise:

.klassenname { Attribut: Wert; }

Der ID-Selektor

Wie der Klassenselektor kann man auch mit dem ID-Selektor einzelne Tags verändern, auch wenn man diese vorher schon mit einem Tag-Selektor verändert hat. Man sollte nur in das Tag des Elements das Attribut id notieren und sich wieder einen lustigen Namen einfallen lassen.

<h2 id="name">Noch eine Überschrift</h2>

Unterschiede zum Klassenselektor gibt es allerdings nicht nur in der Schreibweise! Oh ja, denn eine ID vergibt man nur ein einziges Mal in einer HTML-Datei. Wie auch in Datenbanken werden IDs nur einmal vergeben und damit hat sichs.

Merke: Klassen so oft man lustig ist, IDs nur ein einziges Mal vergeben.

Wie notiert man ID Selektoren nun in einer CSS-Datei? Ganz einfach:

#idname { Attribut: Wert; }

Also eine Raute mit dem ID-Namen, geschwungene Klammer und so weiter und so fort wie bisher.

Hier sind wir dann am Ende mit dem oberflächlichen Selektorengedönse angelangt. Ich werde auf Wunsch gerne noch erklären was Attributselektoren sind, wie man Kindselektoren notiert, welche Sonderzeichen es noch gibt neben Raute und Punkt und was diese dann so bewirken und was Pseudoselektoren sind (Letztere sind übrigens m.E. nicht zu verachten und sicherlich Prüfungsrelevant, bzw. kann ich mir nicht vorstellen, dass man die weglässt. Aber das weiß ja nur die zfa -__- ).

Pseudo-Selektoren

Wer da den Namen gewählt hat weiß ich nicht, aber er klingt sehr seltsam beim ersten Mal. Ein Pseudoselektor wird hinter einem Selektor angefügt und beschreibt bestimmte Zustände des Elements, welches man mit dem Selektor angesprochen hat.

Zum Beispiel haben Links vier verschiedene Zustände. Da wäre der "Normalzustand", wo der liebe Link einsam und allein auf der Website rumhängt und keiner mit ihm interagiert. Dies wäre der :link Zustand. Will man also diesem Zustand eines Links Eigenschaften zuweisen, macht man das so:

a:link { Attribut: Wert; }

Dann hätten wir noch die Links, welche schonmal besucht wurden. Sprich sie wurden bereits einmal vom Benutzer der Seite angeklickt und wechseln somit in den benutzten Zustand (klingt etwas schmutzig).

a:visited { Attribut: Wert; }

Der dritte Zustand ist der beliebte "Mouseover-Effekt" oder "Rollover-Effekt". Früher hat man sowas mit Javascript gelöst, heute geht das mit CSS viel einfacher:

a:hover { Attribut: Wert; }

Hierzu muss man sagen, dass es noch den zusätzlichen Zustand a:focus gibt, der für Barrierefreiheit und Menschen, die mit der Tastatur navigieren gedacht ist. Sprich, a:hover ist für Mausinteraktion und a:focus ist für Tastaturinteraktion (ganz grob formuliert).

a:focus { Attribut: Wert; }

Der vierte Zustand ist der aktive Zustand eines Links. Das wäre dann der Moment in dem der User ihn anklickt und direkt mit dem Link interagiert. Auch für diesen Zustand kann man Eigenschaften dem Link zuweisen, was über folgende CSS-Regel passiert:

a:active { Attribut: Wert; }

WICHTIG! Wenn man alle vier Zustände in einer CSS-Datei beschreibt, dann muss dies auch genau in der Reihenfolge passieren, die ich soeben verwendet habe. Warum das so ist? Wegen der Vererbung von Eigenschaften; Und glaubt mir, da wollt ihr nicht, dass ich zu detailiert werde, es ist einfach wichtig, dass die Reihenfolge eingehalten wird:

a:link,
a:visited,
a:hover,
a:focus,
a:active { Attribut: Wert; }
 
Es gibt noch weitere Pseudoselektoren, aber die werden die ZFA im allgemeinen Teil sicherlich nicht interessieren, vor allem da man diese erst "kürzlich" eingeführt hat in die Sprache CSS.

Kombinierte Selektoren

Wie ihr oben seht, habe ich die verschiedenen Selektoren durch Kommas getrennt und dann allen { Attribut: Wert; } zugewiesen und ja, das funktioniert auch. Zum Beispiel kann es ja sein, dass ich nicht will, dass all meine Überschriften fett geschrieben werden. Ich hab ne h1, ne h2 und ne h3 und alle drei sind se fett. Also notiere ich folgende CSS-Regeln:

h1 { font-weight: normal; }
h2 { font-weight: normal; }
h3 { font-weight: normal; }

Rischdisch? Ja, richtig, aber es geht viel einfacher mit einem "Kombiselektor":

h1, h2, h3 { font-weight: normal; }

Alle drei Überschriften sind nun nicht mehr fett, sondern normal ausgezeichnet und wir haben Platz, Zeit und Datenmenge bei der CSS-Datei gespart.

Kindselektoren (Sonderzeichen die Erste: ">")

Gerade haben wir etwas über die kombinierten Selektoren gelernt, nun kommen wir zu den Kindselektoren. Wie der Name bereits sagt, geht es darum Kinder von Elementen anzusprechen mit einer CSS-Regel um genau diese Kinder zu stylen.

Warum? Weil es ja sein kann, dass man für die komplette Seite festgelegt hat, dass alle Links rot und fett sein sollen, da man rot + fett = super findet. Jetzt haben wir aber auch eine super Navigationsleiste, welche rot hinterlegt ist und somit sieht man unsere Superlinks darauf nicht.

Was tun? Wir sprechen die Links in der Navigation gesondert an, indem wir einen Kindselektor schreiben. 

Bsp.: Vorausgesetzt wir haben einen Container (div) mit einer ID "nav" und haben darin die Navigation untergebracht in Form einer unsortierten Liste "ul", welche die Listenpunkte "li" enthält, welche wiederum die Links "a" enthalten, dann können wir diese Kindeskindeskindeskinder mit einer CSS-Regel direkt ansprechen:

#nav ul li > a:link { color: #000; }

Jetzt sind alle Links im Container "nav" mit der "ul" und den "li"s darin schwarz.

Ein einfacher Kindselektor wäre zum Beispiel:

body > p { Attribut: Wert; }

In diesem Fall stylen wir nicht den Body sondern alle Paragraphen, die Kindelemente des body-Tags sind. Andere Paragraphen auf der Seite, welche Kinder anderer Elemente sind, sind davon nicht betroffen! Klar soweit?

Elternselektor

Wäre sinnvoll, ne. Gibts aber nicht. Es gibt keine CSS-Regel mit einem "kleiner als" Klämmerchen und deswegen gibts da auch nix zu wissen. Weitergehen, es gibt hier nichts zu sehen!

Nachbarselektor (Sonderzeichen die Zweite: "+")

Ach, aber den gibts? Ja, den gibt es. Folgendes Beispiel macht das relativ eindeutig.

Bsp.:

<h2>Überschrift</h2>
<p>Erster Paragraph</p>
<p>Zweiter Paragraph</p>

Welch Dilemma, wir wollen nur den ersten Paragraphen verändern und den zweiten unberührt lassen. Wir machen wir das nun? Indem wir einen Nachbarselektor notieren:

h2 + p { Attribut: Wert; }

Damit sagen wir, dass nur Paragraphen, welche auf der gleichen Ebene wie das vorhergehende Element liegen angesprochen werden und diesem unmittelbar folgen.

 

Indirekter Nachbarselektor (Sonderzeichen zum Dritten: "~")

Einen hab ich noch! Und der inrekte Nachbarselektor funktioniert ähnlich dem Vorhergehenden.

Der Unterschied ist, dass nicht nur der erste Nachbar eines Elements angesprochen wird, sondern alle nachfolgenden Elemente gleichen Typs, welche Nachbarn auf gleicher Ebene zu dem Element sind.

Bsp.: Da nehmen wir das Beispiel von oben mit der Überschrift und den beiden Paragraphen nochmal. Nur das wir diesmal ein anderes Sonderzeichen in die CSS-Regel reinschreiben.

h2 ~ p { Attribut: Wert; }

Damit sind nun alle Paragraphen, welche dem h2-Element folgen angesprochen.

Attributselektoren (noch mehr Sonderzeichen: "[" und "]" und "=" und ")

Ja Himmel, hörts denn nicht bald auf? Nein, denn man kann Elemente eines HTML-Dokuments auch nach ihren Attributen ansprechen und umgestalten.

Wozu brauch ich das, wo ich doch IDs und Klassen und all die anderen Optionen habe? Dazu ziehen wir ein Beispiel zur Hand:

Wir haben eine Seite mit einem Formular für unsere Benutzer, mit dem sie uns mit ihren Adressdaten versorgen können, damit wir sie daheim besuchen und persönlich kennenlernen können. Wozu sonst benötigt man wohl Benutzerdaten? In diesem Formular haben wir Texteingabefelder für Vorname, Nachname und all die anderen Adressdaten, außerdem haben wir Checkboxen, wo sich unser Benutzer entscheiden kann, ob er vom Admin persönlich oder dem Designer der Seite besucht werden möchte. Schlussendlich dann natürlich noch den Absende-Button.

Jetzt findet der Designer die Standardoptik der Formularfelder und des Buttons endlangweilig. Ergo will er sie umgestalten. Das tut er über Attributselektoren. Jedes input-Feld hat sein persönliches Attribut. Zum Beispiel haben Absendebuttons immer das Attribut type="submit" und Texteingabefelder immer das Attribut type="text".

Man könnte natürlich hingehen und alle Inputfelder mit einem Typselektor ansprechen:

input { Attribut: Wert; }

aber viel mehr Sinn macht es doch, wenn wir die Textfelder vom Absendebutton trennen:

input[type="text"] { Attribut: Wert; }
input[type="submit"] { Attribut: Wert; }

Natürlich kann man jedwedes Element eines HTML-Dokuments auf diese Weise ansprechen. Zum Beispiel über das title-Attribut oder das alt-Attribut oder was einem sonst so einfällt. Ein letztes Beispiel, welches aber nur ganz eventuell vielleicht Sinn machen könnte:

Wir haben Bilder auf der Seite, denn Bilder sind hübsch. Einige haben eine Weite von 300 Pixeln (300px) andere dagegen sind breiter (600px). Jetzt wollen wir aber nur den schmaleren Bildern eine Eigenschaft zuweisen und nicht allen Bildern. Ergo folgende CSS-Regel mit einem Attributselektor:

img[width="300px"] { Attribut: Wert; }

Natürlich sind dies Beispiele, die ich nun zur Hand genommen habe, weil sie Sinn machen, es gibt auch einen simplen, standard, normalo Attributselektor, womit man Elemente anspricht, die ein bestimmtes Attribut beinhalten unabhängig vom Wert desselben:

img[width] { Attribut: Wert; }

Somit sind alle Bilder einer Seite, welche das Attribut width im Element notiert haben, angesprochen. Wichtig sind hierbei die eckigen Klammern, welche das Attribut beinhalten.

Fehler bitte melden/korrigieren und Fehlendes ergänzen. =)

Bewertung: 
4.75
Durchschnitt: 4.8 (4 Stimmen)

CSS-Box-Model

CSS-Box-Modell
eine CSS-Box definiert sich durch:
- Breite(width), Höhe(height), Rahmenlinie(border), Außenabstand(margin) zum umgebenden Kasten oder Browserfenster, Innenabstand(padding) zum Inhalt des Elements, farbigem Hintergrund(background-color)

Der Innenabstand: padding (Polsterung)
Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand. Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. Padding kann für alle vier Seiten einer Box einzeln definiert werden. Die Eigenschaften sollte jeder kennen, dennoch hier nochmal:
padding-top für oben
padding-right für rechts
padding-left für links
padding bottom für unten
Padding funktioniert übrigens bei Block und Inline Elementen absolut identisch

Der Rahmen drum herum: border (Rahmenlinien)
Um das padding legt sich der Rahmen (border), der Rand der Kiste, der eine eigene Breite, Linienart und Farbe annehmen kann (width, style, color).Die Eigenschaften hier heißen:
border-top
border-right
border-bottom
border-left
Der border ist sehr flexibel und kann für jede dieser vier Seiten eine gesonderte Breite, Linienart und Farbe erhalten. Die Regeln zur Erstellung von Rahmenlinien mit border gelten ohne Einschränkungen auch für Inline Elemente

Der Außenabstand: margin (Rand)
Jede Box kann einen Außenabstand (margin) haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann:
margin-top
margin-right
margin-bottom
margin-left
Der Außenabstand liegt außerhalb der Box und übernimmt die Hintergrundfarbe des umgebenen Elements. margin darf im Gegensatz zu border und padding übrigens auch negative Werte haben.

 

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

CSS-Kaskadierung

Einführung in CSS-Kaskadierung: http://jendryschik.de/wsdev/einfuehrung/css/kaskade

Bewertung: 
0
Bisher keine Bewertung

Kaskade

Die CSS-Kaskade

Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.

Ebene 1: Browser-Stylesheets

  • Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben
  • Diese werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben
  • Lehnen sich zum größten Teil an den Initialwerten der CSS-Empfehlung an
  • Unterscheiden sich leicht von Browser zu browser
  • Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.

Ebene 2: User-Stylesheets

  • Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen
  • Beispiel: die Definition einer bestimmten Schriftgröße.

Ebene 3: Autoren-Stylesheets

Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.

Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.

Die Reihenfolge (in ihrer Priorität aufsteigend):

  1. externe CSS-Anweisungen
  2. interne CSS-Anweisungen
  3. style-Anweisungen direkt im Tag

Ebene 4: !important

Ist eine CSS-Deklaration mit dem Schlüsselwort “!important” versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit “!important” versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.

Gewichtung der Selektoren durch die Spezifität

Doch auch unter den Selektoren gibt es bestimmte Prioritäten.
Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wert lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.

  • A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
  • B ist die Anzahl der id-Attribute eines Selektors (“X#name”)
  • C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudoklassen innerhalb des Selektors.
  • ist die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet.

 

Beispiele:

Selektor                 A               B               C               D

a:link                       0               0               1                1

.xyz                         0               0               1                0

#nav a.xyz              0               1               1                1

li a                           0               0               0                2

#nav li a                  0               1               0                2

Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.

Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:

<div id="nav">

<ul>

<li><a class="xyz" href="URL">Link</a></li>

</ul>

</div>

Die Deklarationen von “#nav a.xyz” treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.

Sortierung nach Vorkommen

Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.

 

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

CSS-Positionierung

Allgemeines:
Die Positionierung eines Elements bietet gestalterisch einen gewissen Spielraum.
So kann man mit einer gewissen Positionierung eines Elements andere Überlagern, per JavaScript bewegen lassen, oder einfach eine bestimmte Anordnung der Elemente festlegen.

Diese Angabe im CSS kann auf alle Elemente angewendet werden, ist nicht vererbbar und zeigt sich optisch im Browser.


Die vier Arten:
- static
- relative
- absolute
- fixed

 

static
Initialwert eines Elements.
Die Positionierung durch top,right,bottom und left ist hier unwirksam.
Elemente mit diesem Wert werden von links nach rechts und oben nach unten positioniert, also im Textfluß.

relative
Relative Positionierung im Textfluß.
Die Angaben top,right,bottom und left, verschieben dieses Element aus deren relativen Position und hat keinen Einfluss auf die nachfolgenden Elemente.

absolute
Absolute Positionierung eines Elements zum Eltern-Element, welches ebenfalls positioniert sein muss.
Diese Elemente liegen über alle anderen und haben keinen Einfluss auf die Positionierung der anderen.
Die Angaben top,right,bottom und left, positionieren dieses Element ausgehend vom Eltern-Element... dies kann z.B. ein anderes DIV oder der BODY Tag sein.

fixed
Wie absolute. Bis auf, dass sich das Element am Browserfenster orientiert und nicht mit gescrollt wird.
Man kennt diese Positionierung von fest positionierten Navigationen oder Werbebannern.

 

im CSS wird die Positionsart wie folgt bestimmt:

#beispiel {
   position: fixed;     <<< Art der Positionierung
   top: 10px;     <<< Abstand von oben
   left: 20px;     <<< Abstand von links
}

 

Positionierung durch "float":
Durch das Floaten von Elementen werden diese aus dem Textfluss genommen und verdrängen so nachfolgende Elemente mit ihrer Breite und Höhe und nicht in der gesamten Breite.
So können zum Beispiel Bilder von Texten umgeben werden.

Arten von float:
- left
- right

 Left positioniert das Element links im Eltern-Element und right tut dieses rechts im Eltern-Element.

#beispiel {
   float: left;
}

 

Weiterführende Links

http://little-boxes.de/lb1/IV-css-positionierung.html

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

http://www.css4you.de/position.html

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

CSS-Sprites

Wie sehen Sprites eigentlich aus?
Auf der Startseite von www.spiegel.de seht ihr im großen Footer weitere Serviceangebote. Vor jedem dieser Service-Links steht ein kleines Icon. Alle Grafiken in einer einzigen  Datei zusammengefasst ergeben ein Sprite. Im Falle vom Spiegel-Footer sieht das dann so aus: http://www.spiegel.de/static/sys/v10/bg/bg_footer-partner-sprite.png

Wie wird das Sprite dann positioniert?
Gehen wir davon aus, wir haben eine DIV-Box mit der Abmessung von 30px x 30px. Wenn wir nochmal einen Blick auf das Spiegel-Sprite werfen sehen wir, dass diese Grafik wesentlich größer ist 30x30 px. Die "überstehenden Teile" der Grafik sind also nicht sichtbar da die DIV-Box zu klein ist. Und genau darin liegt die Idee: Ich verschiebe über die CSS-Eigenschaft "background-position" meinen Hintergrund so, dass nur der Ausschnitt sichtbar ist den ich sehen möchte und der Rest "abgeschnitten" wird.

Kann ich die einzelnen Icons kreuz und quer auf der Grafik platzieren?
Mit Sprites zu arbeiten bedeutet, dass ihr ein wenig rechnen müsst. Wollt ihr z.B. das 3. Icon von oben sehen, und jedes Icon ist 30px hoch, dann muss die Hintergrundgrafik 60px nach unten verschoben werden.

Und wie sieht der Quellcode dazu aus?
<div style="width:25px; height:30px; background-image:url(bg_footer-partner-sprite.png); background-position:0 -60px; background-repeat:no-repeat "></div>

OK, was bringt das Ganze?
Der Haupt-Sinn liegt darin, eine geringere Anzahl an requests zu erzeugen. Jedes mal wenn euer Browser eine Datei abruft (ein Bild, eine html-Datei, ein PDF, ...) stellt er eine Anfrage (request) an den Webserver. Z.B.: "Gib mir bitte die Datei logo.jpg"
Der Server antwortet (response): Hier ist die Datei logo.jpg.
Das "Frage-und-Antwort-Spiel" benötigt Zeit. Jedes Bild, jede CSS-Datei, jede JavaScript-Datei - alles wird beim Laden einer Seite separat angefragt. Durch das Zusammenfassen von Grafiken (Sprite) verringert man die Anzahl der Anfragen. Dadurch wird ein Geschwindigkeitsvorteilt erzielt.

Ist die Dateigröße eine Sprites größer oder kleiner als die Summe aus den Einzelgrafiken?
Das Ganze ist halt die Summe seiner Teile. Demnach macht es erstmal keinen Unterschied.
Trotzdem kann man etwas an Größe einsparen, in dem man Sprites farblich zusammenfast und z.B. als gif abspeichert.
Die Idee dahinter ist, beispielsweise alle roten Piktogramme zusammen zu fassen, das Rot anzugleichen und einschließend ein .gif mit 2 Farben zu speichern, da ein gif mit wenigen Farben kleiner ist als eins mit mehr Farben. Das selbe wiederholt man mit Grau, Blau, etc.

Sollte ich Sprites auf jeder Webseite einsetzen?
Tja, das hängt sehr mit der Projekt-Art und -Größe ab. Muss wirklich beim ersten Laden der Seite das E-Mail-Symbol in der Sprite-Grafik geladen werden, obwohl die Mailadresse nur im Impressum auftaucht? Auf den restlichen 600 Unterseiten erscheint diese Grafik nirgendwo. Habe ich sowieso nur spärlich hier und da mal ein Icon auf der Seite, lohnt sich der Mehraufwand dann wirklich?

Wann empfiehlt sich der Einsatz unbedingt?
Beim Hovern. Früher sah man häufig, dass eine Grafik, die beim Mousover wechseln sollte, nachladen musste. Das war unschön. Durch den Einsatz eines Sprites wird die Grafik direkt geladen und beim Hovern per CSS nur verschoben. Dies geschieht sofort, ohne dass irgend etwas nachgeladen werden muss.

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

CSS-Timing-Functions

Siehe dazu PDF:

AnhangGröße
PDF icon AP19_KiraHesmer_timing.pdf55.15 KB
Bewertung: 
0
Bisher keine Bewertung

CSS3 – Farbe

CSS3

Attribute

In CSS werden Elementen über mehrere Befehle bzw. Eigenschaften Farben zugewiesen. Dabei sind die folgenden die wichtigsten und am meisten genutzten:

  • color /* Legt die Vordergrundfarbe (z.B. von Text) fest */
  • background-color /* Legt explizit die Hintergrundfarbe fest */
  • background /* Ist ein Abkürzungsbefehl, in dem u. a. auch die Farbe definiert werden kann - */
  • "background" beinhaltet die Befehle: …color, …image, …repeat, …attachement, …position
  • "background" Beispiel: body {background:#ffffff url('img_tree.png') no-repeat right top;}
  • "background" Info: http://www.w3schools.com/css/css_background.asp

 

Farbnotationen

Hexadezimal

Die Notation in CSS für Farben lässt sich derweil auf unterschiedliche Art und Weise realisieren. Zum Einen wird hier mit einem Hexadezimalwert gearbeitet, dem eine Raute vorangestellt wird. Dabei gilt es zu beachten, dass am Bildschirm mit RGB-Werten gearbeitet wird und daher je ein Byte (mit einer Wertigkeit von 0 bis 255) für jeden Farbkanal (Rot, Grün, Blau) zur Verfügung steht.

Gültige Farben wäre demnach #8800FF oder auch #42C69F. Im ersteren Beispiel ließe sich die Schreibweise auf #80F vereinfachen. Doppelte Zeichen können hier weggelassen werden, sofern jede dieser drei Zweiergruppen jeweils den gleichen Stellenwert hat. Einige Beispiele dazu:

  • #44FF22 ließe sich zu #4F2 vereinfachen
  • #3C1A89 ließe sich nicht vereinfachen
  • #133CCA ließe sich ebenfalls nicht vereinfachen, da die Bytes wie folgt aussehen würden: 13/3C/CA
  • #22FF3A ließe sich auch nicht vereinfachen, da nur zwei der drei Zweiergruppen eine Verkürzung der Schreibweise ermöglichen
  • #8383FF ließe sich nicht vereinfachen, da 8 und 3 nicht gleich sind

 

Schlüsselwort-Farbnamen

Außerdem gibt es die weniger verbreitete Möglichkeit, Farben mit ihren Namen anzusprechen. Dazu gibt es folgende Begrifflichkeiten:black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal und aqua. Diese 16 Farben sind in HTML 4.0 definiert. Mit CSS 2.1 kam die Farbe orange hinzu.   

Dezimalangaben

  • rgb(R, G, B)

Jeder Farbkanal (Rot, Grün, Blau) besitzt 256 Darstellungswerte. 0 ist der dunkelste Wert, während 255 der hellste Farbton bzw. der Farbwert in gesättigtem Zustand ist.

So wird zum Beispiel aus #ff00ff dann rgb(255, 0, 255) 

Prozentualangaben

  • rgb(R%, G%, B%)

Diese Schreibweise ähnelt der mit den Dezimalangaben, nur dass man stattdessen mit den Prozentwerten arbeitet.

So wird aus rgb(255, 0, 255) zum Beispiel rgb(100%, 0%, 100%)

 

CSS3 - RGBA und HSL

In CSS3 sind weitere Schreibweisen hinzugekommen, die nicht nur im RGB-Modell arbeiten, sondern Farben auch im RGBA- und HSB- bzw. HSL-Format erkennen. Diese werden mit den folgenden Befehlen aktiviert:

  • rgba(R, G, B, A) /* ähnlich rgb(R, G, B) */

Hier kann mit einem Alpha-Wert eine Transparenz angegeben werden. A liegt hier zwischen 0 für transparent bis 1 für opak.

  • hsl(H, S, L) /* Hue, Saturation, Lightness */

Hierbei wird ein Farbkreis zugrunde gelegt, der mit 360 Grad alle Farben abdecken kann. 0° bzw. 360° entsprechen hierbei Rot, 120° Grün und 240° Blau. Dieser Wert wird als Ganzzahl für das H angegeben. S steht für die Sättigung, 0% bedeuten daher, dass es sich um einen neutralen Grauton handelt, 100% lassen die Farbe strahlen. Das L für Lightness steht für die Helligkeit und sollte dementsprechend selbsterklärend sein. 0% bedeuten auch hier, dass kein Licht hinzugefügt wird, 100% bedeutet, dass die maximale Helligkeit erreicht ist.

 

Sonderfall Schlagschatten

Box-Elemente

Bei Schlagschatten gibt es eine gesonderte Notation:

box-shadow: <horizontaler Versatz> <Vertikaler Versatz> <Weichzeichnung> <Farbe>; /* für Block-Elemente wie DIVs etc. */

Dabei wird ausgehend von der Positionierung des betroffenen Containers der horizontale und vertikale Versatz angegeben, danach die Weichzeichnungsstärke und zu guter Letzt die Farbe in den angegebenen Formaten wie oben.

Wahlweise kann vor den horizontalen Versatz noch ein "inset" mit anschließendem Leerzeichen geschrieben werden, das weist den Browser dazu an, den Schatten "in" das Element zu verlagern und somit den Schattenwurf auf den Hintergrund anzuwenden.

Die Schwierigkeit, die hier hinzukommt ist die, dass es für verschiedene Browser auch mehrere Notationsmöglichkeiten gibt, wie eine solche Anweisung aussehen kann. Dabei werden die sogenannten browserspezifischen Präfixe verwendet. Hier eine Übersicht:

Mozilla Firefox: -moz-
Google Chrome, Safari: -webkit-
Opera: -o-
Internet Explorer: -ms-

Damit würde sich eine Definition, die für alle Browser gültig ist, wie folgt aussehen:

-moz-box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
-o-box-shadow: 5px 5px 10px #000;
-ms-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;

Die letzte Zeile deckt das Restrisiko ab, dass ein Browser keine der verwendeten Präfixe, dafür aber den Schlagschatten beherrscht.

Text

Bei Text werden keine Präfixe verwendet. Statt box-shadow schreibt man text-shadow:

text-shadow: <horizontaler Versatz> <Vertikaler Versatz> <Weichzeichnung> <Farbe>; /* für Texte */

Die Notation ist hier die selbe.

---

Weiterführende Links

Weitere Informationen zu den einzelnen Angaben der jeweiligen Farben sind unter
http://www.w3.org/TR/2003/CR-css3-color-20030514/#colorunits zu finden.

Noch ein interessanter und übersichtlicher Link:
http://www.webmasterpro.de/coding/article/css-referenz-farben.html#goto-definition-ueber-farbschluesselwoerter-css-3

http://www.braekling.de/web-design/3311-css3-color-farben-mit-farbtabellen.html

http://www.peterkroener.de/aenderungen-in-der-neuen-css3-farbverlauf-syntax-ohne-vendor-prefix/

Bewertung: 
5
Durchschnitt: 5 (2 Stimmen)

Media Query

Media Query gehört zum Themenbereich CSS und es geht dabei darum geräteabhängige darstellung von Website zu realisieren. Dass also der Gerätetyp erkannt wird und dann das passende CSS dazu angesteuert wird.

Weiterführende Links:

http://www.heise.de/ix/artikel/Allen-recht-1058764.html
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
http://webmasterparadies.de/webdesign/246-responsive-webdesign-teil-2-media-queries-einrichten.html

Bewertung: 
0
Bisher keine Bewertung

U5: CSS-Vererbung

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

Bewertung: 
0
Bisher keine Bewertung

CSS-Vererbung: Beispiel

Wir haben folgende HTML-Struktur:

Und passen das CSS nun an:

Wie wir sehen können, sind, obwohl wir dem DIV-Element mit der Klasse "gross" die font-size von 20pt gegeben haben, auch die darinliegenden Elemente davon betroffen.
Und obwohl das DIV-Element mit der Klasse "blau" die color (gemeint ist damit immer die Schriftfarbe) blau hat, sind auch hier die darinliegenden Elemente betroffen.

Wenn wir nun einen Schritt weiter gehen:

Und dem H1-Element (Überschrift 1. Rangordnung) die Farbe "red" und die font-size "30pt", wird damit der vererbte Wert überschrieben; Wir sprechen nun das Element direkt an, somit muss es nicht mehr die Eigenschaften seines Eltern-Elementes übernehmen.

AnhangGröße
PDF icon U5 CSS-Vererbung.pdf1.48 MB
Bewertung: 
3
Durchschnitt: 3 (1 Stimme)

Computersicherheit

Thema: Computerarbeitsplatz und Netzwerke nutzen, pflegen und konfigurieren: Computersicherheit

 

Datenschutz

Der Schutz vor unbefugten Zugriffen durch "Hacker" kann nur über Pass- und Codewörter erfolgen. Das ist keine vollkommene Sicherung, denn Passwörter können evtl. rekonstruiert oder ausspioniert werden.

Für den Umgang mit Passwörtern gelten folgende Regeln:

1. Passwörter in bestimmten, unregelmäßigen, nicht zu großen Abständen wechseln.

2. Passwörter dürfen nicht zu leicht zu rekonstruieren sein – Geburtsdaten und Namen sind ungeeignet, geeignet: sinnfreie Kombinationen, wie z. B. aPhJ68!kZ

3. Passwörter müssen trotzdem gut merkbar sein, denn sie sollten aus Sicherheitsgründen nicht aufgeschrieben werden (zumindest nicht digital)!

Sicherer als softwaremäßige Sicherung ist die Hardwaresicherung durch "Dongles". Diese elektronischen Hardwareschlüssel in Form von Steckern, die auf eine Schnittstelle des Computers gesteckt werden, eraluben den Zugriff auf bestimmte Programme und Daten.

 

Angriffe aus dem Internet

Während es noch vor einigen Jahren die lokalen Datenträger waren, die zur Verbeitung vono Computerviren geführt haben, ist es mittlerweile vorwiegend das Internet, über das sich Viren, Würmer, Trojaner und andere Schädlinge in oft rasender Geschwindigkeit verbreiten. Die Hauptgefahr geht hierbei von Email-Anhängen und von Sicherheitslücken der Webbrowser aus.

Schädlingsarten

Der Begriff "Viren" wird oft nicht ganz richtig als Oberbegriff für Schädlinge aller Art bezeichnet. Besser sollte hierbei von "Malware" (= Malicious Software, also bösartige Software) gesprochen werden. Ihre wichtigsten Vertreter sind:

  • Virus: Name kommt von den Viren aus der Biologie • kleine Programme, die sich zur Verbreitung an ein Wirtsprogramm hängen müssen • werden aktiv, wenn das Wirtsporgramm gestartet wird • Funktionsweise: Durch die Ausführung der infizierten Datei wird der Virus aktiv und führt seine vordefinierte Aufgabe aus, erst dann wird die eigentliche Anwendung gestartet • verschiedene Arten: gefährliche, die Daten von der Festplatte löschen und ungefährliche, die den Nutzer nur verärgern sollen • Lösung: Originalzustand der infizierten Dateien wieder herstellen • Beispiele: OneHalf, Tenga, Yankee Doodle
  • Wurm: Im Unterschied zum Virus kein Wirtsprogramm nötig • können sich selbständig vermehren und durch Emails verbreiten, weil sie Dateien als Anhang enthalten können • Funktionsweise: Wird der als Dateianhang getarnte Wurm durch Doppelklick gestartet, kann er sich z. B. an alle m Adressbuch gespeicherten Email-Adressen versenden -> Schneeballsystem: geht man pro Adressbuch von 20 Email-Adressen aus, dann werden im ersten Schritt 20, dann 400, 8.000, 160.000 usw neue Computer infiziert • Gefahren: Würmer können Dateien löschen, die Systemleistung beeinflussen oder Programme deaktivieren • Lösung: Alle betroffenen Dateien löschen, da sie sehr wahrscheinlich den Schadcode enthalten • Beispiele: Lovsan/Blaster, Bagle, Netsky
  • Trojaner: Name kommt vom "trojanischen Pferd": ein Programm, das nach außen sichtbar eine nützliche Funktion besitzt, z. B. ein kostenloses Update, während im Hintergrund seine schädlichen Funktionen gestartet werden • Aufgabe: sich leicht Zugang zum System verschaffen, um dort Schaden anzurichten • Verschiedene Arten: Downloader: ein bösartiges Programm zum Herunterladen von Schadsoftware, Dropper: Trojaner, der auf dem angegriffenen Computer Schadsoftware absetzt ("droppt"), Backdoor: Anwendung, die Angreifern Zugriff auf ein System verschafft um es zu kontrollieren, Keylogger: Program, das die Tastenanschläge eines Benutzers aufzeichnet und die Infos an den Angreifer sendet • Beispiele: NetBus, Trojandownloader, Slapper
  • Adware: Abkürzung für durch Werbung unterstützte Software und meint Programme, in denen Werbung gezeigt wird • öffnen häufig in Internetbrowsern neue Popup-Fenster mit Werbung oder ändern die Startseite des Browsers • nicht gefährlich, aber lästig • kann auch dazu dienen, Daten zu sammeln • wird oft mit Freeware installiert, kann aber abgewählt werden
  • Spyware: Fast alle Anwendungen zusammen, die vertrauliche Infos ohne das Wissen/Einverständnis des Benutzers versenden • Aufgabe: ähnlich wie Trojaner, den befallenen Rechner bzw das Nutzerverhalten auszuspionieren • Entwickler geben vor, mit diesen Programmen die Interessen/Bedürfnisse der Benutzer erkunden zu wollen • Ziel: möglichst viele Infos über das Nutzerverhalten sammeln • gesammelte Daten enthalten evtl. Sicherheitscodes, PINs, Kontonummern usw • Beispiele: Spyfalcon, Spy-Sherrif (getarnt als Spyware-Schutzprogramm, übt selbst Spyware-Funktionen aus) • Lösung: Spyware löschen, da diese evtl den Schadcode enthält

 

Sicherheit im Internet

Welche Möglichkeiten (über die Verschlüsselung hinaus) gibt es, um ein Netzwerk vor fremden Zugriff zu schützen?

  • Keine Standartpasswörter verwenden
  • Konfiguration nur über Kabel ermöglichen
  • Netzwerk unsichtbar machen (WLAN)
  • Geräte im Netzwerk beschränken
  • Name des Gerätes ausblenden

 

Unterschied Antivirusprogramm und Firewall

Antivirusprogramm: Schützt den Computer vor Malware. Im Internet finden sich zahlreiche Anbieter von Antivren-Software, die ihre Programme teilweise kostenlos, teilweise gegen Gebühr anbieten, z. B. AntiVir, Avast, Norton Antivirus, Kaspersky Antivirus. Problematisch bei der Verwendung aller Virenscanner ist, dass diese immer nur die ihnen bekannten Viren erkennen und entfernen können. Insofern ist er unerlässlcih, in regelmäßigen Abständen die aktuellste Version oder Virenliste runterzuladen

Firewall: Alle Schutzmaßnahmen, die einen unerlaubten Zugriff von außen auf ein privates Netzwerk verhindern.Sie überprüft die eintreffenden Datenpakete, z. B. hinsichtlich Quell- und Zieladresse, Eine Firewall sollte auch die den Rechner verlassenden Daten prüfen, da sich bereits schädliche Software im System befinden könnte. So kann eine Firewall auch Spyware entdecken. Angreifer aus dem Netz (Hacker) werden damit abgewehrt. Durch Freigaben kann man vertrauenswürdige und bekannte Anwendungen zulassen.

 

Gefahrenquelle E-Mail

Emails sind die größte Gefahr für die Infektion eines Rechners mit einem Virus, Wurm, Trojaner oder ähnlichem. Der grund für die große Gefahr sind nicht die Textdateien selbst, sondern potenzielle Dateianhänge, da diese Dateien ausführbare Programme enthalten können. Da sich Dateiendungen unter Windows ausblenden lassen, sind die Endungen unter Umständen gar nicht sichtbar. Ein Trick besteht darin, dass eine Datei eine falsche Dateiendung vorgibt: Hinter der Datei "Brief.txt.vbs" verbirgt sich scheinbar eine Textdatei, tatsächlich aber eine VisualBasic-Script-Datei)

Anti-Spyware: Durchsucht den Rechner nach Programmen, die zum Ausspionieren des Systems dienen. Aus der Absenderadresse der Email kann längst nicht mehr gefolgert werden, ob diese Mail vertrauenswürdig ist, oder nicht, Grund ist die bereits erwähnte Verbindung von Würmern unter Zuhilfename des Adressverzeichnisses. Die Email eines Freundes ist mit einem durchaus plausibel klingenden Betreff kann also eine Falle sein und nach dem Doppelklick auf den Anhang ist es schon zu spät...

Spam: Spam-Mails machen ca. 70 % des gesamten Email-Verkehrs aus und verursachen damit einen enormen wirtschaftlichen Schaden. Dennoch sind Spam-Mails, wenn es sich um reine Textdateien handelt, zwar lästig, aber ungefährlich. Gefährlich sind sogenannte "Backdoor"-Programme, die einen extrenen Zugriff auf den Rechner erlauben.Tückisch sind auch "Keylogger", die als PC-Wanzen sämliche Tastatureingaben protokollieren und somit zur Entschlüsselung von Benutzernamen und Passwörtern dienen. Die wichtigste Regel im Umgang mit Emails: Keine Dateianhänge öffnen, wenn es sich um ausführbare Dateien handelt, z. B. .exe, .com, .vbs oder oder oder

Wichtigste Maßnahme zur Vermeidung von Infektionen ist eine gesunde Skepsis gegenüber alle eingehenden Mails. Rufen Sie ggf. den Absender an, bevor Sie einen vermeintlich unsicheren Anhang öffnen. Maßnahme zur Spam-Vermeidung: Ist die Angabe einer Kontaktadresse erforderlich, kann sie verschlüsselt erfolgen, z. B. durch Ersetzen des @-Zeichens: name(at)firma.de oder indem sie als GIF-Grafik gespeichert wird

Phishing-Mails: Emails mit dem Ziel, Zugangsdaten zu eBay, Homebanking o. ä. auszuspionieren. Vorgehensweise: Durch eine plausibel klingende Mail wird der Nutzer dazu veranlasst, einen Textlink anzuklicken, der auf eine vermeintlich seriöse Seite führt. Dort wird er aufgefordert, sich beim jeweiligen Dienst anzumelden – Schon sind die Zugangsdaten erfasst. Wichtigste Regel: Niemals auf Textlinks klicken, auch wenn es sich um scheinbar seriöse Links handelt.

 

Sicherheit unter Mac OS X

Auch unter Mac OS X gibt es Schädlinge, allerdings in wesentlich geringerer Zahl als bei den Windows-Betriebssystemen. Gründe: relativ geringe Verbreitung des Macs -> keine lohnenswerte Zielgruppe, gute Schutzmechanismen, die den Zugriff auf bestimmte Bereiche verhindern. Doch auch hier: Vorsicht ist besser als Nachsicht, deshalb sollte die hauseigene Firewall in jedem Fall aktiviert und Antivirensoftware eingesetzt sein!

 

Sicherheit unter Windows XP

Benutzerverwaltung: Hauptproblem in Punkto Sicherheit: die Nutzer besitzen nach der Installation Administratorenrechte und können sämtliche Änderungen am Betriebssystem vornehmen.Wer sich jedoch als Admin im Internet bewegt, öffnet damit einfallenden Schädlingen Tür und Tor, denn ein schädliches Programm kann nun ebenfalls an beliebiger Stelle ins Betriebssystem eingreifen.Um diese Sicherheitslücke zu schließen, muss man sich als Benutzer und damit auch potenziellen Schädlingen die Zugriffsrechte einschränken.

Service Pack 2: Eine weitere Forderung ist die Installation des "Service Pack 2", da Microsoft hiermit den Schutz des Betriebssystems deutlich verbessert hat: Neben dem Schließen vieler Sicherheitslücken, stellt Win XP ein Sicherheitscenter zur Verügung: beeinhaltet eine Firewall, integriert eine installierte Antiviren-Software, automatische Updates -> Sicherheitsupdates, ohne dass sich der Nutzer darum kümmern muss.

Internet Explorer und Outlook: Wegen der hohen Verbreitung des Webbrowsers Internet Explorer und der Email-Software Outlook haben sich viele Virenschreiber auf die Sicherheitslücken der beiden Produkte spezialisiert. Am besten auf diese beiden Produkte verzichten, oder mit den diversen Sicherheitseinstell-ungen beschäftigen um eine Infektion unwahrscheinlicher werden zu lassen -> Kontrollmöglichket von ActiveX (zur Einbindung interaktiver und multimedialer Komponenten auf Webseiten, wie die Steuerung eines Videos).

 

Sicherheit ab Windows Vista

Vista besitzt ein völlig neues Sicherheitskonzept. Eine wesentliche Neuerung: die Zugriffsrechte von Nutzern sind von Anfang an deutlich eingeschränkt, sogar Admins. Nach dem Motto: Wenn die Nutzer selbst keine rechte haben, gilt dies auch für Angreifer von außen. Eine zweite Maßnahme: vor dem Zugriff auf wichtige Systemdateien wird zunächst eine Kopie erstellt und nur in dieser Kopie werden Änderungen vorgenommen, die Originaldateien bleiben erhalten und unverändert. Der neue Internet Explorer 7 hat einen Phishing-Filter und auch beim Nachfolger von Outlook sollen frühere Sicherheitsmängel beseitigt worden sein und Spam- oder Phishing-Mails erkannt werden.

 

 

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

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

  1. Keine Cookies annehmen.
  2. Nur Cookies des Servers der aufgerufenen Seite annehmen (keine Cookies von Drittservern wie bei Werbebannern).
  3. 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.

  1. Name - erforderlich –Beliebiger Name und Wert aus ASCII-Zeichen die vom Server übergeben werden
  2. Version - erforderlich – Gibt die Cookie-Management-Spezifikation in einer Dezimalzahl an (derzeit immer 1).
  3. Expires - optional – Ablaufdatum, Zeitpunkt der automatischen Löschung in UTC für HTTP/1.0
  4. 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.
  5. Domain - optional – Domain oder Bestandteil des Domainnamens, für den der Cookie gilt
  6. Path - optional – Gültigkeits-Pfad (Teil der Anfrage-URI), um die Gültigkeit des Cookies auf einen bestimmten Pfad zu beschränken
  7. Port - optional – Beschränkung des Ports auf den aktuell verwendeten oder auf eine Liste von Ports
  8. Comment - optional – Kommentar zur näheren Beschreibung des Cookies
  9. CommentURL- optional – URL unter welcher eine Beschreibung zur Funktionsweise zu finden ist
  10. 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.
  11. 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:

  1. Permanent-Cookies (leben ewig) vs. Sitzungs-Cookies (überleben das Ende der Sitzung nicht)
  2. First party (werden von der besuchten Web-Site gesetzt) vs. Third Party (werden von anderen Sites als der besuchten gesetzt)
  3. anonym vs. personengebunden
  4. 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.

 

Bewertung: 
0
Bisher keine Bewertung

Datenbanken (Normalisierung)

Spricht man von einer Datenbank, meint man in der Regel ein Datenbanksystem (DBS). Dieses besteht aus zwei Teilen: Die eigentliche Datenbank (DB) ist eine programmunabhängige strukturierte Sammlung von Daten, die miteinander in Beziehung stehen. Um diese Daten sinnvoll und komfortabel nutzen zu können, wird eine Datenbanksoftware benötigt, das Datenbankmanagementsystem (DBMS).

Ziele einer Datenbank:

- Vereinheitlichung: Daten werden nur einmal erfasst und zentral gespeichert, sodass allen Benutzern eine einheitliche und aktuelle Datenbasis zur Verfügung steht.

- Flexibilität: Die erfassten Daten lassen sich mehrfach und unterschiedlich nutzen und auswerten.

- Programmunabhängigkeit der Daten: Wird durch die Trennung von DB und DBMS erreicht.

- Fehlerfreiheit: Datenbankfehler, die z.B. durch einen Programm- oder Computerabsturz entstehen, sollen automatisch korrigiert werden.

-Redundanz-Vermeidung: Unter Redundanz versteht man eine doppelte oder mehrfache Speicherung gleicher Daten. Dies führt zu Speicherplatzverschwendung, erhöht die Verarbeitungszeiten und kann zu widersprüchlichen Daten führen.

Folgende Kriterien für eine funktionierende Datenbank müssen erfüllt sein:

Datenkonsistenz: Jeder Datensatz muss eindeutig identifizierbar, also konsistent sein, z.B. werden Kundennummern nur ein einziges Mal vergeben. Wenn der Kunde nicht mehr existiert,  wird die Nummer nicht erneut verwendet. Somit sind konsistente Datensätze eindeutig unterscheidbar.
Beispiel: Selbst bei dem unwahrscheinlichen Fall, dass zwei Kunden dieselbe Adresse haben, kann mindestens durch die einmalig vergebene Kundennummer zwischen ihnen unterschieden werden.

Redundanzfreiheit: Sämtliche Daten werden nur einmal erfasst und gespeichert (=sie sind redundanzfrei). So treten bei Änderungen keine Probleme auf, da sie zentral abgelegt sind und nur ein Mal geändert werden müssen.
Beispiel: Ändert sich bei einem Kunden die Adresse, muss diese nicht für jede seiner Bestellungen erfasst und geändert werden, sondern nur ein Mal zentral in der Kundendatenbank, da den Bestellungen die eindeutige Kundennummer zugeordnet ist. Somit dient diese Nummer als Schlüssel.

Normalformen
1. Normalform: Jedes Datenfeld einer Tabelle enthält genau einen Eintrag, diese sind spaltenweise sortiert, z.B. nach Nachname, Straße, PLZ, Ort, Produkt und Datum. In der Tabelle der 1. NF sind alle Informationen gelistet, daher ist sie nicht konsistent und nicht redundanzfrei.
Beispiel: Der Kunde Winkler hat Visitenkarten und eine Website in Auftrag gegeben. Da ja jedes Datenfeld nur einen Eintrag enthält, ist der Kunde zwei Mal in der Auftragstabelle aufgeführt, ein Mal mit dem Produkt Website mit der Auftragsnummer 1 und ein Mal mit dem Produkt Visitenkarten mit der Auftragsnummer 5. Diese Nummern verweisen auf den Kunden und auf das Produkt.

2. Normalform: Nun wird die Tabelle in mehrere Tabellen zerlegt und zwar so, dass jeder Eintrag der entstandenen Tabellen einen eigenen Schlüssel erhält. Dieser Schlüssel wird dann anstatt des Produktes in der Tabelle der 1. NF aufgeführt. So befindet sich die Auftragstabelle in der 2. NF, da sie sich zum einen in der 1. NF befindet und zum anderen alle Datenfelder von einem Schlüssel funktional abhängig sind.
Beispiel: Die Produkte werden in einer eigenen Tabelle aufgeführt und jedes Produkt erhält eine Produktnummer (Schlüssel). So wird in der Auftragstabelle nun nicht das Produkt mit Namen angegeben, sondern der Schlüssel. Somit ist der Kunde Winkler zwar immernoch zwei Mal in der Auftragstabelle aufgeführt, jedoch ein Mal mit der Produktnummer 1 für die Website und ein Mal mit der Produktnummer 2 für Visitenkarten. Die Produktnummer 2 kann in der Tabelle natürlich ebenfalls für den Kunden Mayer vorkommen, der ebenfalls Visitenkarten in Auftrag gegeben hat.

3. Normalform: In dieser letzten Stufe werden die verbliebenen Redundanzen beseitigt. Die endgültige Tabelle befindet sich dann in der 3. NF, wenn sie sich zum einen in der 2. NF befindet und zum anderen alle Datenfelder, die keine Schlüssel sind (im Bsp. das Auftragsdatum), nicht funktional abhängig sind.
Beispiel: Nun sind die Kundenangaben in der Auftragstabelle funktional abhängig, also zum Kunden Winkler gehört genau eine Straße, eine PLZ und ein Ort. Das muss nun behoben werden, da ein weiterer Kunde namens Winkler hinzukommen kann und sich dadurch die Adresse anhand des Namens nicht mehr eindeutig ermitteln ließe. Deshalb wird eine weitere Tabelle mit neuem Schlüssel erstellt. Hier befinden sich die Daten der Kunden, die spaltenweise nach Name, Straße, PLZ und Ort aufgeführt sind. Das Wichtigste ist nun, dass jeder Kunde eine Kundennummer (Schlüssel) erhält, der in der Auftragstabelle angegeben werden kann. Diese Tabelle wird kann nun in die 3. NF gebracht werden: Eine Spalte gibt die Auftragsnummer an, eine die zugehörige Produktnummer, eine Spalte führt die Nummer des zugehörigen Kunden auf und eine weitere Spalte kann nun das Datum des Auftrags enthalten.

Nun ist die Normalisierung in die 3. NF abgeschlossen, alle Daten der 3 Tabellen sind redundanzfrei und konsistent.

 

Weiterführende Links

http://www.tinohempel.de/info/info/datenbank/normalisierung.htm

Bewertung: 
3
Durchschnitt: 3 (3 Stimmen)

Datenbanken

Allgemeines:
Eine Datenbank (DB) besteht aus beliebig vielen Tabellen, in denen logisch zusammenhängende Objekte (Daten) gespeichert sind.
Diese Objekte können reine Texte, Verknüpfungen oder Anweisungen sein.
Datenbanken findet man häufig im Bereich der dynamischen Webseiten, um Inhalte zu speichern.

 1. Grundbegriffe

 

Datenbank = DB (Data Base)

  • systematische, strukturierte Ansammlung von Daten

  • diese Daten stehen in einem sachlogischen Zusammenhang

 

Datenbankmanagementsystem = DBMS

  • Verwaltung und Nutzung der in der DB gespeicherten Daten

 

Datenbanksystem = DBS

  • Erstellung, Pflege und Verwaltung von einer oder mehreren Datenbanken (z.B. MySQL)

  • DB + DBMS

 

Datenbanksoftware

  • bezahlbar: Microsoft Access als Teil des Office-Pakets

  • kostenlos: OpenOfficeBase; XAMPP (webbasier, besteht u.a. aus Weboberfläche phpMyAdmin, Apache-Webserver und MySQL-Datenbankserver)

 

Relationale Datenbank

  • wichtigste Untergruppe der Datenbanken

  • besteht aus mindestens einer, meistens aus mehreren Tabellen (Relationen)

  • andere Datenbanken: hierarchische oder objektorientierte

 

Tabelle = Relation

  • Baustein der Relationalen Datenbank

  • besteht aus Datensätzen

  • kompakte Darstellung großer Datenmengen

  • sortierbar nach beliebigen Attributen

  • können nach vorgegebenen Kriterien gefiltert werden

  • können miteinander in Beziehung gesetzt werden

 

Datensatz = Tupel

  • Zeile einer Tabelle

  • ein Datensatz besteht aus mehreren Datenfeldern (z.B. Nname, Vname, E-Mail-Adresse)

  • Jeder Datensatz muss über einen Schlüssel eindeutig identifizierbar sein (z.B. Kundennummer)

 

Attribute

  • einzelne Zellen werden als Datenfelder bezeichnet

  • gleichartige Datenfelder sind spaltenweise angeordnet und als Attribute bezeichnet

  • jedes Attribut erhält einen Feldnamen (z.B. Nname)

 

Datentyp

  • jedem Attribut wird ein bestimmter Datentyp zugewiesen

    • INT (integer = ganze Zahlen) [TINYINT, SMALLINT, MEDIUMINT, BIGINT]

    • FLOAT, DOUBLE (Fließkommazahl)

    • DECIMAL (Dezimalzahlen)

    • CHAR (feste Speicherung z.B. CHAR(25) Reservierung für GENAU 25 Zeichen) [2^8 Zeichen]

    • VARCHAR (z.B. VARCHAR(25) speichert BIS ZU 25 Zeichen) [2^8 Zeichen]

    • BOOLEAN (Ja/Nein)

    • DATE (Datum)

    • TIME (Uhrzeit)

    • DATETIME (Kombination aus Datum und Uhrzeit YYYY-MM-DD HH:MM:SS)

    • TIMESTAMP (speichert die Zeit, zu der die Zeile begonnen wurde (falls nicht anders angegeben))

    • YEAR

    • BINARY (Binäre Daten z.B. Bilder)

    • TEXT (Zeichenketten) [BLOB, LONGTEXT, LONGBLOB]

  • Festlegung des Datentyps ist erforderlich zur weiteren Verarbeitung (z.B. Rechnen mit Zahlen, generieren von E-Mails mit Text, etc.)

 

Schlüssel

  • Jeder Datensatz muss eindeutig identifizierbar sein, daher wird in jeder Tabelle mindestens ein Schlüssel benötigt

  • über den Schlüssel wird der Zugriff beschleunigt

  • auto_increment = automatische Vergabe des Schlüsselwertes; d.h. doppelte Werte können nicht vorkommen

  • Verknüpfung von Tabellen miteinander erfolgt über Schlüssel

    • Primärschlüssel = Schlüssel zur Identifikation der Tupel der eigenen Tabelle; jede Tabelle kann nur einen Primärschlüssel enthalten

    • Fremdschlüssel = Verwendung eines Primärschlüssels in einer Tabelle, die selbst einen eigenen Primärschlüssel hat [Feldname in einer Tabelle, welcher eine Beziehung herstellt zu einem Schlüsselfeld einer anderen Tabelle]; die Verwendung mehrerer Fremdschlüssel ist möglich

 

Datenkategorien

  • Stammdaten = verändern sich nicht oder kaum (z.B. Name, Adresse, Produktbeschreibungen)

  • Bewegungsdaten = Daten, die sich häufig ändern (z.B. Inhalt des Warenkorbs)

  • Prozessdaten = Daten, die nicht in der Datenbank gespeichert werden (z.B. Alter einer Person; wird errechnet aus Systemzeit und Geburtsdatum)

 

2. Anforderungen

Datenkonsistenz

  • jeder Datensatz muss eindeutig identifizierbar sein (konsistent lat. con = "zusammen" + sistere = "halten") [vgl. Fingerabdruck]

  • Primärschlüssel werden einmalig vergeben und auch nach löschen des Datensatzes nicht neu vergeben

 

Redundanzfreiheit

  • Redundanz = überflüssige oder mehrfach vorkommende, gleiche Informationen innerhalb verschiedener Datensätze (lat. redundare = "überlaufen, im Überfluss vorhanden sein")

  • Redundanzfreiheit = alle Daten werden nur ein einziges Mal erfasst und gespeichert

  • spart Speicherplatz und verhindert Probleme (Anomalien) bei späteren Änderungen

 

Sonstiges

  • Datensicherheit; um Datenverlust zu vermeiden, müssen Backups getätigt werden

  • Datenschutz

  • Multiuser-DB; Zugriffsmöglichkeit für mehrere Nutzer gleichzeitig

  • Reihenfolge der Datenerfassung ist unerheblich, die Daten organisieren und verwalten sich selbst

 3. Beispiele für Datenbanken in der Medienbranche

  • Aufbau digitaler Bild-, Text- oder Medienarchive

  • digitale Projektbearbeitung von der Datenerfassung bis zum fertigen Produkt

  • Print-Worflow

  • Personalisierung von Medienprodukten

  • E-Commerce-Lösungen, Webshops, CMS, Suchmaschinen, Foren

  • Lern-Management-Systeme (z.B. Moodle)

  • Soziale Netzwerke (z.B. Facebook)

  • Web-Enzyklopädien (z.B. Wikipedia)

 4. Datenerfassung

  • Daten werden erfasst und gepflegt über Formulare

  • keine Kenntnisse über die Struktur der Daten nötig

  • bei der Datenerfassung erfolgen Überprüfungen auf Vollständigkeit und Korrektheit

    • fehlende Eingaben, leer gelassene Felder

    • falsche Eingaben (Buchstaben statt Ziffern, fehlendes @-Zeichen in der Mail-Adresse)

    • Rechtschreibprobleme (z.B. fehlende Großschreibung, Beginn eines Eintrags mit Leerzeichen)

  • der Datensatz wird erst akzeptiert, wenn er vollständig und fehlerfrei ist

  • Nicht kontrollierbar: wissentliche oder versehentliche Falscheingaben, Schreibfehler

 5. Normalisierung

= um Konsistenz und Redundanzfreiheit zu erreichen, werden Datensätze auf mehrere Tabellen verteilt; hierbei werden Normalformen unterschieden (bekannt: 5, relevant: 3)

 

Normalformen finden Anwendung bei Stamm- und Bewegungsdaten, NICHT bei Prozessdaten.

1. Normalform

Jedes Datenfeld enthält nur einen Eintrag (atomar = kleinster Wert, nicht weiter teilbar).

  • Achtung: Hausnummer und Straße gehören zusammen, PLZ und Ort gehören NICHT zusammen

  • keine Redundanzfreiheit

  • keine Datenkonsistenz

 

2. Normalform

Die Tabelle befindet sich in der 1. Normalform und alle Datenfelder sind von einem Schlüssel funktional abhängig.

  • die Tabelle wird zur Reduktion von Redundanzen in mehrere Tabellen zerlegt

  • z.B. wird jeder Produktnummer genau ein Produkt zugeordnet

  • keine Redundanzfreiheit

 

3. Normalform

Die Tabelle befindet sich in der 2. Normalform und alle Datenfelder, die keine Schlüssel sind, sind nicht funktional abhängig.

  • Beseitigung der letzten Redundanzen

  • Nachteil: Verschlechterung der Lesbarkeit mit jeder hinzugekommenen Tabelle, daher wird eine DBMS benötigt, die sich um die Organisation und Verwaltung kümmert

 

6. Entity-Relationship-Modell = ER-Modell

= Entwurfsverfahren, um bereits beim Datenbankentwurf dafür zu sorgen, dass sich eine konsistente und redundanzfreie Datenbank ergibt.

 

Die Chen-Notation verwendet drei grafische Elemente: Rechteck (= Entitätstyp), Raute (= Beziehung) und Ellipse (= Attribut)

  • Entitätstyp: Objekte, denen Informationen zugeordnet werden können (z.B. Produkt, Kunde)

  • Beziehung: Beziehungen, die zwischen Entitäten hergestellt werden (z.B. Kunde kauft Produkt)

  • Attribut: jede Entität hat bestimmte Eigenschaften (z.B. ein Kunde hat einen Namen)

 

Arten von Beziehungen

1:1-Beziehung

  • einer Entität ist höchstens eine andere Entität zugeordnet

  • Kunde kauft Produkt

 

1:n-Beziehung

  • einer Entität stehen keine, eine oder mehrere Entitäten gegenüber

  • Kunde kauft mehrere Produkte; der Kunde kann aber auch nur ein Produkt kaufen oder gar keins, aber es ist trotzdem eine mögliche 1:n-Beziehung

 

m:n-Beziehung

  • auf beiden Seiten stehen mehrere Entitäten in Beziehung zueinander

  • mehrere Kunden können mehrere Produkte kaufen

 

Problem bei einer m:n-Beziehung:

  • keine eindeutige Beziehung zwischen zwei Tabellen herstellbar

  • müssen durch Ergänzen weiterer Tabellen aufgelöst werden (z.B. Kunde-Produkt-Tabelle, die auflistet, welcher Kunde welches Produkt kauft)

 

Anwendung des ER-Modells

  • aus jedem Entitätstyp entsteht eine Tabelle (Tabelle Kunde)

  • aus den Attributen werden die Tabellenspalten; evtl. werden weitere Spalten ergänzt (Kundendaten)

  • für die Beziehungen werden Primärschlüssel (Entität Kunde) und Fremdschlüssel (Entität Produkt) miteinander verbunden

  • Beispiel: ein Kunde kann mehrere Produkte kaufen, er erteilt mehrere Aufträge mit den dazugehörigen Auftragsnummern, jedes Produkt mit den dazugehörigen Produktnummern kann von mehreren Kunden gekauft werden --> Eindeutigkeit ergibt sich erst aus einer Kombination von Auftrags- und Produktnummer = zusammengesetzter Schlüssel

 7. Referenzielle Integrität

  • das DBS muss sicherstellen, dass Beziehungen zwischen Tabellen nicht zu Fehlern führen

  • Verhinderung von widersprüchlichen oder fehlerhaften Daten

  • Beispiel: ein Kunde ist zwar mit Kundendaten angelegt, hat aber bisher nichts bestellt; dieser Kunde kann gelöscht werden; ein Kunde, der bereits bestellt hat, darf nicht gelöscht werden (Fehler in der Auftragstabelle)

 8. SQL

  • Structured Query Language

  • Erstellen von Datenbanken und Tabellen

  • Eingeben, Ändern und Löschen von Datensätzen

  • Abfragen (engl. Query) von Daten nach gewünschten Kriterien

  • ISO-standardisiert und plattformunabhängig

  • heutige DB-Software ermöglicht Zugriffe auf DB auch ohne SQL-Kenntnisse

 

SQL-Befehle

  • not null → nicht leer; hier muss immer ein Eintrag erfolgen

  • auto_increment → der Wert wird automatisch vergeben und hochgezählt; eine doppelte Vergabe ist dadurch nicht möglich

  • CREATE DATABASE Tabelle → erstellt eine neue Datenbank

  • ALTER TABLE Tabelle → Verändern einer Tabelle

  • DROP TABLE Tabelle → Löschen einer Tabelle

  • CREATE DATABASE name → erstellt eine neue Datenbank

INSERT INTO Tabelle → Datensatz eingeben

INSERT INTO Tabelle

[(Spalte1 [, Spalte2, …])]

VALUES (Ausdruck | Default)[,(...),(...)];

 

INSERT INTO Kunden

(Firma, Straße)

VALUES („Winkler“, „Hauptstraße 23“);

 

DELETE FROM Tabelle → Datensatz Löschen

DELETE FROM Tabelle

WHERE Bedingungen

 

DELETE FROM Kunden

WHERE Knr = 5;

 

SELECT Spalten → Abfrage eines bestimmten Datensatzes

SELECT Spalten

FROM Tabelle

[WHERE Bedingungen]

[ORDER BY Sortierspalten]

[LIMIT Limits];

 

SELECT Firma, Straße

FROM Kunden

WHERE Firma

= „Mayer“;

 

SELECT *

FROM Kunden

ORDER BY Plz;

 

UPDATE Tabelle → Ändert Datensätze

UPDATE Tabelle

SET Spalte1 = Ausdruck1 [, Spalte2 = Ausdruck2]

[WHERE Bedingung];

 

UPDATE Kunden

SET Straße = „Gartenstraße 5“,

Plz = „77933“

Ort = „Lahr“

WHERE Knr = 5;

 

 

9. Datenbankmanagement

 

Fileserver-System

  • Zugriffe auf eine Datenbankdatei erfolgen direkt

  • clientseitig

  • Nachteil: die Performance der Datenbank sinkt ab einer hohen Benutzerzahl

  • daher sind die Fileserver-Systeme nur für kleinere und mittlere Datenbanksysteme empfehlenswert und ausreichend

 

Client-Server-System

  • ODBC = Open Database Connectivity

  • Verbindung zwischen Datenbank-Client und Datenbank-Server

  • Client --> ODBC-Schnittstelle --> Server/Datenbank

  • nutzt die Abfragesprache SQL

  • Datenbankanwendungsschnittstelle (API) der Datenbankabfragesprache SQL

  • serverseitige Auswertung

  • bessere Performance und geringe Netzbelastung, daher für sehr große Datenbanken mit hoher Benutzeranzahl geeignet

  • Zugriff auch über Skriptsprache möglich

 

Aufgaben von Datenbanksystemen DBS

  • Datenbankabfragen bearbeiten

  • Datensicherheit

  • Datenschutz

  • Multiuser-DB (Synchonisation von mehreren gleichzeitigen Zugriffen)

  • Werkzeuge für Datenbankentwürfe

  • "Assistenten" für Berichte, Formulare und Abfragen

  • Datenexport

  • drei große Systeme: DB2 von IBM, Microsoft SQL-Server und Oracle-Database

 

 

10. Anomalien

  • treten in relationalen Datenbanken auf

  • können durch nicht normalisierte bzw. denormalisierte Datenstrukturen entstehen

  • führen zu Inkonsistenzen

 

Änderungs-Anomalien

Änderungen führen häufig zu Fehlern, wenn nicht alle Datensätze gleichzeitig geändert werden

 

Lösch-Anomalien

entstehen, wenn durch das Löschen eines Datensatzes mehr Informationen als erwünscht verloren gehen

 

Einfüge-Anomalien

Teile des Datensatzes gehen verloren, da z.B. der Datentyp nicht übereinstimmt

 

 

11. Kartesisches Produkt

  • repräsentiert sätmliche möglichen Kombinationen aller Zeilen zweier oder mehrerer Tabellen

  • erzeugt aus gegebenen Mengen eine neue Menge

  • jede Relation ist eine Teilmenge eines kartesischen Produktes

  • besteht aus der Menge aller Tupel, die Reihenfolge der Mengen und der entsprechenden Elemente ist fest vorgegeben

 12. Entwicklungsverfahren

In der Datenbankentwicklung gibt es zwei grundsätzliche Verfahren.

 

Top-down "von oben nach unten"

  • vom Abstrakten, Allgemeinen, Übergeordneten hin zum Konkreten, Speziellen, Untergeordneten

  • erst steht das System, dann werden Daten eingepflegt

  • Nachteil: kann nur schwer in bereits laufende Prozesse integriert werden

 

Bottom-up "von unten nach oben"

  • aus vorhandenen Daten und Informationen wird ein DBS entwickelt

  • von Detail-Aufgaben zur Erledigung übergeordneter Prozesse

  • Nachteil: führt bei großen Datenmengen schnell zu Anomalien

 

 

(Quellen: Komp. 5. Aufl. Band II ab S. 154 + Spickzettel 2. Aufl. + eigener Kram)

Bewertung: 
4.666665
Durchschnitt: 4.7 (3 Stimmen)

Relationale Datenbanken

relationale Datenbanken

sind DB, die mit Tabellen (sogenannten Relationen) arbeiten. Diese haben den Vorteil, dass eine Sortierung und Filterung der Daten möglich wird. Auch können mehrere Tabellen zueinander in Beziehung gesetzt werden. (Bsp. Tabelle "Kunden" mit Tabelle "Aufträge")

die Eingabe erfolgt meist über Formulare.

Grundbegriffe

Datenbanksystem: System welches Datenbanken verwaltet

Tabellen (Relationen): Grundelemente einer relationalen Datenbank. Diese sind ggf. mit Hilfe von sogenannten Schlüsseln miteinander verbunden.

Datensatz: Zeile einer Tabelle, praktisch alle Inhalte einer getätigten Eingabe. Ein weiterer Fachbegriff ist Tupel. Jeder Datensatz muss eindeutig identifizierbar sein.

Attribute: Spalten einer Tabelle.

Datenfeld: jedes einzelne Feld in einer Tabelle, die eine Information beinhaltet.

 

Unterschied objektorientierte und relationale Datenbanken

- objektorientiert ist eine Datenbank, die statt streng strukturierter Datensätze Objekte speichert

- sehr flexibeles Speichermodell für Daten

- diesem Modell wird eine gewisse Änderungsfreundlichkeit nachgesagt

- Begriff RELATION (Beziehung, Verwandschaft) steht allgemein für alle Formen von Beziehungen und Abhängigkeiten von Objekten und Daten untereinander

- die einzelnen Daten werden in Datenfeldern gespeichert, die zu Datensätzen zusammengefasst sind

- mehrere gleichartige Datensätze bilden eine Relation oder Tabelle -> die relationale Datenbank

AnhangGröße
PDF icon Beziehungen in Datenbanken.pdf416.33 KB
Bewertung: 
0
Bisher keine Bewertung

Datenbankzugriff mit PHP

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

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-winter-2018) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

 

Viel Erfolg beim Lernen.

Das Team der mediencommunity

Bewertung: 
0
Bisher keine Bewertung

Digitale und gedruckte Veröffentlichung

Cross-Media Publishing:

 

  • schnell & einfach Inhalte von Medien zu vervielfältigen​
  • erstellen von medienneutraler Daten
  • publizieren von Daten für verschiedenen Ausgabemedien (digital, print, ...)

eine Datenbank -> alle relevanten Infos und Daten gespeichert

 

   *höchste Qualität hinterlegen (Bilder)

   *Daten medienneutral, unverfälscht, unformatiert abspeichern

   *Text -> XML

 

Medienneutrale Daten:

 

  • Grundlage für viele verschiedene Ausgabesituationen

    ->Daten digital und print (unterschiedliche Bedrucksstoffe) ausgeben
      -Mehrfachnutzung
      -Flexibel im Druck

    ->Fotos im großen RGB-Farbraum abspeichern
     
     -CMYK- Bilder nur wenn Schwarzaufbau
     -RGB-Bilder erst kurz vor Druck konvertieren

3 Konzepte:
Early Binding: gleich CMYK konvertierne -> keine medienneutrale Daten

Intermediate: Bindung: bei PDF-Erstellung in CMYK konvertieren

Late Binding: PDF in RGB; konvertiert Druckerei in Ausgabeworkflow/RIP

 

Vorteile:

  • flexibel bei Druck und Papier
  • Druckerei kann entscheiden welches Profil
  • keine Zerstörung von Daten
  • alle Bilder mit gleicher Einstellung
  • Sparen von Speicherplatz

Nachteile:

  • Farbeinfluss vom Erzeiger geht verlohren
  • ungewohnt für Anwender

technische Anfordeungen:

  • fehlerfreier Datenbestand
  • plattformneutral -> auf alle Computersysteme verwendbar
  • Herstellerunabhängigkeit
  • auf Format mus mit beliebiger Programmiersprache zugreifen können

 

Database-Publishing:

 

  • Erstellung von Preislisten, komplexen Dokumenten, umfangreichen Katalogen
  • Datenbankinhalte an offen gestaltetes Layoutdokument (Änderungen automatisch aktualisiert)
  • bietet Schablonen von Seiten für Datenbankinhalte (Seiten enthalten Markierungen und werden durch Daten ersetzt)
  • Alternative: regelbasierter Layout-satz (anselle von Schablonen -> Layout-Regeln beschrieben)

Template-basierter Publishing-Ansatz:

 

  • mithilfe Layoutprogramm werden Schablonen (Templates) für gewünschte Seiten entworfen, welche Platzhalter für die aus der Datenbank zu bestückenden Elemente beinhalten

Vorteile:

  • mit üblichen Werkzeugen sehr einfach Vorlagen erstellen

Nachteile:

  • Nachbearbeitung erforderlich

Content-Management-Sytem:

  • Datenbankinhalte für Print- und Digitalmedien nutzen
  • Einpflegen der Daten in Datenbanken, Bereitstellung der Inhalte erfolgt medienneutral
  • Printmedienproduktion: Database-Publishing
      -> Inhalt während Produktion aus Datenbank in Workflow eingespielt und integriert
       -> Inhalte in konventionellen Druckverfahren ab Produktionsschritt der Druckformherstellung bzw. im Digitaldruck ab Bebilderung nicht mehr veränderbar
  • Publikation von Internetseiten: Inhalte erst zum Zeitpunkt des Aufrufs durch Nutzer auf Webserver generiert und an Client geschickt

Templates:

  • bestimmt Darstellung der Website im Browser und Verknüpfung verschiedener Komponenten
  • setzen sich aus mehreren CSS-, HTML-, PHP-Dateien zusammen (CSS – Abbildung des Designs; HTML und PHP zur Umsetzung der Funktionalität)
  • es können auch mehrere Templates durch „Default“ genutzt werden (Template bei Aufruf der Website im Browser geladen)
Bewertung: 
2
Durchschnitt: 2 (1 Stimme)

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

 

Bewertung: 
3.5
Durchschnitt: 3.5 (2 Stimmen)

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 Darstellungs­funktionen ü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

AnhangGröße
PDF icon Zusammenfassung E-Book191.03 KB
Bewertung: 
4.444445
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:

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

Bewertung: 
0
Bisher keine Bewertung

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

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

Grafiken einbinden bei SelfHTML

Hier der direkte Link zum Thema bei SelfHTML:

http://de.selfhtml.org/html/grafiken/einbinden.htm

Bewertung: 
1
Durchschnitt: 1 (1 Stimme)

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.

 

Bewertung: 
0
Bisher keine Bewertung

HTML

Bewertung: 
0
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

 

Bewertung: 
0
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">

 

<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

Bewertung: 
5
Durchschnitt: 5 (2 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)

Bewertung: 
0
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:

<table border="0">

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>

<tr>
<td>CMYK</td>
<td>RGB</td>
</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.

<table border="1">

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

<tr>
<td>CMYK</td>
<td>RGB</td>
</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:

<table border="1">

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

<tr>
<td>RGB</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

Bewertung: 
0
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.

Bewertung: 
0
Bisher keine Bewertung

HTML5-Neuerungen

Inhaltsverzeichnis:
 

Haupt-Ziele für HTML5

 

  • Neue Funktionen/Features, basierend auf HTML, CSS und Javascript
  • Reduzieren der Notwendigkeit externer Plugins (wie Flash)
  • Bessere Fehler-Behandlung
  • Geräte-Unabhängigkeit
  • Mehr Markup-Elemente sollen Skripte ersetzen
  • Der Entwicklungsprozess sollte für die Öffentlichkeit einsehbar sein

Wichtigste Neuerungen in HTML5

  • Das Video- und Audio-Element welche endlich einen standardisierten, einfachen Weg zur multimedialen Website bieten sollen.
  • Bessere Methoden Daten offline zu speichern
  • Das Canvas-Element
  • Die Content-spezifischen Elemente (section, article, nav, etc.)
  • Die Formular-Elemente, welche unnötige Programmierarbeit ersparen und bessere Benutzerfreundlichkeit herstellen sollen.
  • Geolocation soll es ermöglichen den Standpunkt des Benutzers auf Anfrage zu ermitteln.

    (Quelle: http://www.compufreak.info/wp-content/uploads/downloads/2011/01/Einstieg-in-den-Umstieg-auf-HTML5.pdf)

Weiterführende Links:

http://www.drweb.de/magazin/html5-ueberblick/
http://www.compufreak.info/wp-content/uploads/downloads/2011/01/Einstieg-in-den-Umstieg-auf-HTML5.pdf

 

Die folgenden Inhalte wurden verfasst von Fr.Hase

Das Video-Element

Das war überfällig: ein natives Browserobjekt, das ohne Plugin-Krücken Videodateien abspielen kann und ü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 dafür, wie in HTML5 APIs umgesetzt sind, um auf Objekte zuzugreifen. Deswegen – und weil wir komplette Kontrolle ü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 Verfü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, fü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 ü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 fü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 für die anderen Buttons. Hier mü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
Für den Fortschrittsbalken benötigen wir die Gesamtlaufzeit des Videos. Diese können wir ü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. Diesen 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 müssen wir noch den Wert des Fortschrittsbalkens analog zur aktuellen Spielzeit des Videos setzen. Dafür rufen wir die currentTime des Videos regelmässig ab:
setInterval(function(){
fortschritt.setAttribute('value',video.currentTime);
},500);

 

Zum Inhaltsverzeichnis

CSS3 - Animationen

 

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!

 

Zum Inhaltsverzeichnis

Offline-Anwendungen

 

Spätestens seit ü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, mü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, müssen wir in die Datei .htaccess folgende Zeile hinzufü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 fü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:

  • 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 ü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 für die Seite, die nicht gecached ist.
  • Schreiben Sie eine Javascript-Funktion, die alle Manifest-Events ausliest und in einem HTML-Element ü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.

Zum Inhaltsverzeichnis

Texteffekte

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 gewünschten Winkel rotieren zu lassen:

transform:rotate(360deg);
Aufgrund von Abwärtkompatibilitätsgründen müssen wir aber fü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 mü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 über CSS mit einer Schriftgröße und einer Farbe.
  • Setzen Sie fü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 für Farbe und Schriftgrösse.

Zum Inhaltsverzeichnis

Geolocation-API

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 unterstützte Geolocation-API an, mit der sich relativ verlässliche Informationen ü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 übergeben. Dabei stehen enableHighAccurace, timeout und maximumAge zur Verfügung. enableHighAccurace wird mit einem booleschen Wert (true/false) befüllt und erzwingt eine möglichst exakte Positionierung ohne Rü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 ü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 über das ü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 ü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;
}
}

Aufgabe 1: 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 fü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 Glück stellt Google maps eine eigene Online-API zur Verfügung, ü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 zurück. Im
Browser sollte ein Seitenaufbau wie folgt erfolgen:

 

Zum Inhaltsverzeichnis

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

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 gewünschten Winkel rotieren zu lassen:
transform:rotate(360deg);
Aufgrund von Abwärtkompatibilitätsgründen müssen wir aber fü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 mü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 über CSS mit einer Schriftgröße und
einer Farbe.
· Setzen Sie fü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 fü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 unterstützte Geolocation-API an, mit
der sich relativ verlässliche Informationen ü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 übergeben. Dabei stehen
enableHighAccurace, timeout und maximumAge zur Verfügung. enableHighAccurace wird mit einem
booleschen Wert (true/false) befüllt und erzwingt eine möglichst exakte Positionierung ohne Rü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 ü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 über das ü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 ü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 fü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 Glück stellt Google maps eine
eigene Online-API zur Verfügung, ü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 zurück. Im
Browser sollte ein Seitenaufbau wie folgt erfolgen: