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

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

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

"Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen. Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können in einer mit Kommata getrennten Selektor-Liste notiert werden." - Quelle: selfhtml.org

Außerdem: Terminologie von CSS-Selektoren

link zu w3schools CSS selectors

 

Bewertung: 
0
Bisher keine Bewertung

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)

Content Management System

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

Was sind die Vor- und Nachteile?

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

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

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

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

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

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

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

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

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

 

Wann ist es sinnvoll eine CMS zu verwenden?

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

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

 

Server und Client (Zusammenfassung Wikipedia)

Serverseitige CMS

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

Clientseitige CMS

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

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

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

Vorteile:

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

Nachteile:

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

Statische Systeme

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

Hybride Systeme

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

Halbstatische Systeme

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

Weitere Stichworte zu dem Thema:

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

Bewertung: 
3
Durchschnitt: 3 (2 Stimmen)

Cookies mit PHP

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

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

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

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

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

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

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

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

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

 

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

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 Veröffentlichung

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

 

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

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

 

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

 

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

 

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

Bewertung: 
0
Bisher keine Bewertung

Dynamische Website

STATISCHE SEITE:

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

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

 

DYNAMISCHE SEITE:

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

 

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

 

Weiterführende Links

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

 

Bewertung: 
3.5
Durchschnitt: 3.5 (2 Stimmen)

Dynamische Websites

Anleitung für das Wiki

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

Viel Erfolg beim Lernen.
Das Team der mediencommunity

Um mal einen Anfang zu machen...

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

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

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

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

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

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

 

 

Nachteile

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

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

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

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

 

Wann ist es sinnvoll eine CMS zu verwenden?

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

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

 

Server und Client (Zusammenfassung Wikipedia)

Serverseitige CMS

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

Clientseitige CMS

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

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

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

Vorteile:

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

Nachteile:

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

Statische Systeme

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

Hybride Systeme

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

Halbstatische Systeme

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

 

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

 

Was sind dynamische Inhalte?  

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

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

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

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

 

 

Vorteile statischer Seiten:

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

Die Vorteile statischer Webseiten

  • schnell zu entwickeln
  • schnell zu ändern
  • preiswert zu hosten

Die Nachteile statischer Webseiten

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

Die Vorteile dynamischer Webseiten

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

Die Nachteile dynamischer Webseiten

  • schwieriger und teurer in der Entwicklung
  • Hosting ist etwas teurer

dynamische Webseiten-Funktionen können sein:

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

 

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

Bewertung: 
0
Bisher keine Bewertung

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

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