Analyse der Funktionen und Demonstrationen von HTML5 im Hinblick auf Fotografie

Aus Winfwiki

Fallstudienarbeit
Hochschule:	Hochschule für Oekonomie & Management
Standort:	Essen
Studiengang:	Bachelor Wirtschaftsinformatik
Veranstaltung:	Fallstudie / Wissenschaftliches Arbeiten
Betreuer:	Prof._Dr._Uwe_Kern
Typ:	Fallstudienarbeit
Themengebiet:	HTML 5
Autor(en):	Martin Ilga, Markus Westerdick, Andreas Gerlach
Studienzeitmodell:	Abendstudium
Semesterbezeichnung:	WS10
Studiensemester:	2
Bearbeitungsstatus:	begutachtet
Prüfungstermin:
Abgabetermin:

Namen der Autoren:	Martin Ilga, Markus Westerdick, Andreas Gerlach
Titel der Arbeit:	Analyse der Funktionen und Demonstrationen von HTML5 im Hinblick auf Fotografie
Hochschule und Studienort:	FOM Essen

Inhaltsverzeichnis 1 Abkürzungsverzeichnis 2 Abbildungsverzeichnis 3 Tabellenverzeichnis 4 Einleitung 5 Grundlagen HTML und Bedeutung für das Internet 5.1 Einführung 5.2 Entwicklung im Bezug auf Vorgängerversionen 5.3 Bedeutung für das Internet 5.3.1 Neue/erweiterte Benutzer-Interaktionsmöglichkeiten 5.3.2 Desktop Look&Feel 5.3.3 Multimediainhalte für Mobilgeräte 5.4 Voraussetzungen 5.4.1 Browserimplementierung 6 Aktuelle HTML4/HTML5-Anwendungen im Bereich Fotografie 6.1 Imagehoster 6.2 Foto Communities 6.3 Social Networks 7 Möglichkeiten im Bereich Fotografie mit HTML5 7.1 Fotopräsentation 7.2 Drag & Drop / Foto-Sharing 7.3 Offline Webanwendungen 7.4 Geolocation 7.5 Foto- / Bildbearbeitung 7.6 Frameworks 7.6.1 Sencha Touch 7.6.2 JQuery/ JQuery UI 7.7 Sicherheit / Datenschutz 8 Schluss 8.1 Fazit 8.2 Entwicklung und Zukunft von HTML 5 im Bezug auf Fotographie 9 Anhang 9.1 Fußnoten 9.2 Literatur- und Quellenverzeichnis

1 Abkürzungsverzeichnis

Abkürzung	Bedeutung
API	application programming interface (dt. Programmierschnittstelle)
App	application (dt. Anwendung)
CERN	Conseil Européen pour la Recherche Nucléaire (dt. Europäische Organisation für Kernforschung)
Ch	Google Chrome
COR	Cross-Origin Request
CORF	Cross-Origin Request Forgery
CSS	Cascading Style Sheets
FF	Mozilla Firefox
GPL	GNU General Public License (GNU)
GPS	Global Positioning System
HTML	Hypertext Markup Language
http	Hypertext Transfer Protokoll
IDE	Integrated Development Environment (dt. Integrierte Entwicklungsumgebung)
IE	Microsoft Internet Explorer
JS	JavaScript
Op	Opera
OS	operating system (dt. Betriebssystem)
PHP	Hypertext Preprocessor
Sa	Apple Safari
WHATWG	Web Hypertext Application Technology Working Group
www	World Wide Web
W3C	World Wide Web Consortium
XHTML	Extensible Hypertext Markup Language
XSRF	Cross-Site Request Forgery
XSS	Cross-Site Scripting

2 Abbildungsverzeichnis

Nr.	Abbildung
1	Startseite von html5image.com
2	Diashow im StudiVZ
3	Darstellung des <img>- und <object>-Tag im Internet Explorer 6&7
4	Darstellung des <img>- und <object>-Tag in anderen Browsern
5	Browserdarstellung des vorhergehenden HTML-Codes in Verbindung mit einem CSS-Layout (1)
6	Browserdarstellung des vorhergehenden HTML-Codes in Verbindung mit einem CSS-Layout (2)
7	Drag&Drop über verschiedene Webseiten hinweg (Cross-Website)
8	Drag&Drop von dem lokalen Filesystem in die Webseite, in die Fotogalerie
9	Drag&Drop-Beispielanwendung
10	Übertragung von Manifest-File, Daten, Javascript und CSS Elemente in den Application Cache
11	Speicherung aller Änderungen im DOM-Storage
12	Syncronisierung des Servers mit dem Inhalt des Dom Storage
13	Abfrage der Zugriffsberechtigung Geolocation
14	Darstellung von Fotos Canvas
15	Spiegeleffekt Canvas
16	Darstellung von Fotos verzerrt Canvas
17	Darstellung von Fotos verzerrt & invertiert Canvas
18	Oberfläche von Darkroom
19	Oberfläche von Feather
20	HTML5 "Photo Explorer" Sencha Framework
21	Ausschnitt aus einer JQuery UI Demo

3 Tabellenverzeichnis

Nr.	Tabelle
1	Neue Elemente in HTML5
2	Neue Attribute in HTML5
3	Geänderte Elemente in HTML5
4	Implementierung von HTML5 bei diversen Browsern
5	Implementierung von HTML5 bei diversen Browsern bezgl. Drag & Drop / Foto-Sharing
6	Implementierung von HTML5 bei diversen Browsern bezgl. Offline Webanwendungen (1)
7	Implementierung von HTML5 bei diversen Browsern bezgl. Offline Webanwendungen (2)
8	Implementierung von HTML5 bei diversen Browsern bezgl. Geolocation
9	Aufbau der Eigenschaft coords in der Geolocation-API in HTML5
10	Implementierung von HTML5 bei diversen Browsern bezgl. Foto- / Bildbearbeitung

4 Einleitung

Diese Untersuchung zum Thema "Analyse der Funktionen und Demonstrationen von HTML5 im Hinblick auf Fotografie" ist im Rahmen des Studiums der Wirschaftsinformatik an der Hochschule für Ökonomie & Management (FOM) am Standort Essen entstanden.

Die Fallstudie beschäftigt sich mit der Entwicklung des neuen Webstandard HTML5 und speziell mit den Entwicklungen und Möglichkeiten im Bereich Fotografie. Im Zuge dessen werden die technischen Voraussetzungen für den Einsatz von HTML5-gestützen Internetseiten oder Applikationen aufgezeigt und kritisch betrachtet.

Dieses Thema wurde von uns gewählt, da wir die Entwicklung im Bereich von HTML5 aufmerksam verfolgen und auch teilweise im eigenen Berufsfeld nutzen.

Ziel dieser Untersuchung ist es zu zeigen, ob HTML5 als neuer Webstandard eine erneute Strukturierung und Vereinheitlichung der aktuell im Internet genutzten, vielfältigen Technologien mit sich bringt. Weiterhin soll kritisch betrachtet werden, inwiefern HTML5 (teilweise auch im Zusammenhang mit anderen erweiternden Technologien wie CSS3 oder JavaScript) neue Möglichkeiten in der Darstellung von Online- und Offlineinhalten mit sich bringt.

Zunächst gibt es einen kurzen Überblick über die Entwicklung von HTML an sich, dessen Bedeutung für die Entwicklung des Internet und die Neuerungen, die HTML5 mit sich bringt. Danach wird die aktuelle Situation bezüglich der Anwendung von HTML5 im Internet gezeigt. Im Anschluss werden wir mit verschiedenen Beispielen zeigen, was durch die Neuerungen von HTML5 teilweise im Bereich der Anwendungsentwicklung möglich ist. Zum Schluss gibt es ein Fazit bezüglich der Entwicklungschancen von HTML5 und der Entwicklung im Internet generell.

5 Grundlagen HTML und Bedeutung für das Internet

5.1 Einführung

HTML (Hypertext Markup Language) ist eine textbasierte Sprache mit der Dokumente für das www (World Wide Web) erstellt werden. Mit HTML kann die Struktur eines www-Dokuments festgelegt werden (Textkopf, Textkörper etc.), aber auch die Formatierung des Inhalts (Schriftart, Schriftgröße, Schrift- und Hintergrundfarbe etc.). Weiterhin wird HTML zum Einbinden von Objekten (Bilder, Links, Videos etc.) in eine solche Struktur benutzt. Ein solches mit HTML erstelltes Dokument hat die Dateiendung .htm bzw. .html. HTML besteht als offener Standard für das Internet seit 1989 und hat eine wichtige Funktion in der Entwicklung des www eingenommen. Offener Stand heißt hier, dass HTML nie als offizieller Standard für u.a. die Gestaltung von Webseiten zertifiziert wurde, trotzdem aber so gut wie jeder Internetauftritt mit der Sprache bis heute geschrieben wurde.

Entwickelt wurde HTML vom britischen Informatiker Tim Berners-Lee am Genfer Hochenergieforschungszentrum CERN. Ziel war die Entwicklung einer einfachen Sprache, um wissenschaftliche Dokumente mit zusätzlichem multimedialem Material (Bilder, Videos etc.) auszustatten und mit Dokumenten in anderen Ablageverzeichnissen (z.B. auf einem anderen Server) verlinken zu können.

Parallel zur HTML wurde auch das http (Hypertext Transfer Protokoll) entwickelt, das den Transfer von Daten über das Internet ermöglicht. Nachdem HTML offiziell standardisiert wurde, entwickelte es sich zur meistgenutzten Sprache zur Erstellung und Präsentation von Internetseiten weltweit.

5.2 Entwicklung im Bezug auf Vorgängerversionen

Nachdem im Laufe der Jahre mehrere neue Standards für HTML entwickelt wurden und die Sprache immer weiter entwickelt wurde (HTML, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4, HTML 4.01), wurde am 22.01.2008 der erste Entwurf für HTML5 durch das W3C (World Wide Web Consortium) veröffentlicht. Es folgten daraufhin mehrere Arbeitsentwürfe. Im Einzelnen wird HTML5 eine Weiterentwicklung zur Vorgängerversion, vor allem durch neue Strukturen und Elemente bzw. durch die Modifikation von bestehenden Attributen und Elementen. Hier einige Beispiele:

I. Neue Elemente

Element	Bedeutung
article	Mit article kann eine Passage eines Textabschnittes als ein eigenes Element deklariert werden.
canvas	canvas kann genutzt werden, um dynamische Bildansichten zu realisieren.
date	Hiermit kann ein Datum oder eine Uhrzeit deklariert werden.
figure & figcaption	Mit den Elementen figure und figcaption kann gruppiert werden, z.B. kann einem Bild eine sperate Bildunterschrift hinzugefügt werden.
hgroup	Mit hgroup kann ein Header, heißt die Kopfdaten, einer einzelnen Sektion deklariert werden.

II. Neue Attribute

Attribut	Bedeutung
draggable	Mit diesem Attribut kann ein Teil als "draggable" deklarariert werden, das heißt dass es in einer Drag-and-Drop-API genutzt werden kann (mögliche Werte: true und false).
placeholder	Dieses Attribut kann bei input- und textarea-Feldern eingesetzt werden, um Platzhalter anzugeben (z.B. Eingabe einer E-Mail; Platzhalter „@test.de“).
sandbox, seamless & srcdoc	Mit diesen Attributen ist es in einem iframe-Element Sandbox-Inhalte und dergleichen darzustellen.
type & label	Mit type und label können Elemente in eine Menü-Struktur transformiert werden.

III. Geänderte Elemente

Element	Bedeutung
a	Wenn das Element a ohne den Zusatz href genutzt wird, stellt dieses einen Platzhalter für eine mögliche Stelle, an der ein Link eingebunden werden kann/soll, dar.
head	head erlaubt nicht mehr das Element object als Child-Klasse zu verwenden.
menu	menu wurde angepasst, um besser Elemente wie Kontextmenüs oder Toolbars zu strukturieren.

Generell kann man sagen, dass durch die Ergänzungen bzw. Änderungen von Elementen und Attributen HTML insgesamt „semantischer“ geworden ist. Die Struktur des HTML-Körpers kann klarer definiert werden, durch Optionen wie Platzhalter und dergleichen wird eine nachträgliche Bearbeitung des Quelltext erleichtert, so genannte „Pseudosemantik“ wird unterbunden.^[1]

5.3 Bedeutung für das Internet

Momentan geht, wenn man von der Weiterentwicklung des Internet und der IT-Technologie an sich spricht, kein Weg an dem Begriff Web 2.0 vorbei. Hier eine kurze Einleitung:

Der Begriff Web 2.0 ist ein Sammelbegriff für verschiedene Entwicklungen und Technologien, die eine neue „Form“ des Internet hervorbringen soll. Grundgedanke ist hierbei, dass die „Rollen“ im Internet nicht mehr starr verteilt sind. Wo vorher eine geringe Anzahl von „Autoren“ (heißt Nutzer des Internet, die Inhalte online stellen) einer immer größer werdenden Anzahl von Konsumenten gegenüber stand, soll in Zukunft jeder User in der Lage sein Inhalte im Internets zu platzieren.^[2] Die Nutzer des Internet sollen immer mehr Möglichkeiten zu erhalten, die Beschaffenheit des Internet im Ganzen zu beeinflussen. Social Networks und andere Plattformen bieten hierzu bereits weitreichende Angebote an, was teilweise auch negative Aspekte, wie z.B. nicht ausreichenden Datenschutz, mit sich bringt.

Ein weiterer Schlüsselbegriff dieser Entwicklung ist das Cloud Computing. Grundidee ist hier, dass es im Internet ein Angebot für Ressourcen gibt, die jederzeit abrufbar sind. Hier sind so wohl Ressourcen im Bereich Software, also Anwendungen, als auch im Bereich Hardware, also Speicher, Rechenzeit etc., gemeint. So soll man in Zukunft in der Lage sein, auch ohne vorhandene Hard- und Software, über das Internet arbeiten zu können oder aber bei fehlenden Ressourcen diese einfach anzumieten.

Im Allgemeinen kann man sagen, dass Web 2.0 eine viel stärkere Einbindung des einzelnen Internet-Users in die Entwicklung des World Wide Web bedeutet.

Weiterhin ist zu sagen, dass HTML, seit dem es die W3C gibt, ein wichtiger Webstandard geworden ist und die Entwicklung des Internet stark beeinflusst hat. Dementsprechend wird eine Entwicklung des neuen Standard HTML5 natürlich aufmerksam im Internet verfolgt.

5.3.1 Neue/erweiterte Benutzer-Interaktionsmöglichkeiten

HTML5 bietet, durch die neuen HTML5-Formulare, neue und erweiterte Möglichkeiten komplexe Eingabemasken für den einzelnen Benutzer zu erstellen. Durch eine große Anzahl neuer Input-Typen und Funktionen wird die Implementierung von Funktionalitäten wie Formularvalidierung oder Auto-Vervollständigung erheblich vereinfacht. Des Weiteren lassen sich durch die neuen clientseitigen Speicherfunktionalitäten, "Application Cache", "DOM Storage" und der "WEBKit-Datenbank", komplette Webapplikationen auf den Client abbilden und so gestalten, dass diese auch offline weiter genutzt werden können. Zusätzlich dazu lasssen sich nun Ressourcen und Dienste domänenübergreifend vernetzen. Webapplikationen ist es nunmehr möglich s.g. Cross-Origin Request abzusetzen, was diesen ermöglicht verschiedene Dienste oder Ressourcen, aus unterschiedlichen Quellen, in einer Webapplikation bereitzustellen

5.3.2 Desktop Look&Feel

Mittels des neuen canvas-Elements ist es nun möglich praktisch jede denkbar Oberfläche direkt im Browser zu zeichnen. Dadurch lässt sich praktisch jede Desktop-UI-Komponente im Browser nachbilden. Zusätzlich gibt es nun, durch die zum Standard gewordene Drag&Drop-API, eine einheitlichere Gestaltungsmöglichkeit für die Bedienung von Webseiten.

Ein gutes Beispiel für eine HTML5 Weboberfläche mit Desktop Look&Feel ist die online IDE Skywriter (ehemals Bespin) der Mozilla Foundation. Diese setzt sich vollständig aus in canvas gezeichneten UI-Komponenten zusammen.

5.3.3 Multimediainhalte für Mobilgeräte

Die verstärkte Nutzung von Mobilen Endgeräten, die mit einem eigens für den mobilen Gebrauch entwickelten Betriebssystem ausgestattet sind, wie z.B. Smartphones, brachte einige Probleme bezüglich der Wiedergabe von Multimediainhalten mit sich. So hatten viele mobile Browser zum Teil das Problem, dass Videos in Websites nicht abgespielt werden konnten. Ein Beispiel hierfür ist der Browser Opera Mobile, vor allem auf dem mobilen Betriebssystem Microsoft Windows Mobile 6.1. Grund für dieses Problem war eine fehlende speziell für mobile Browser zugeschnittene Version von Adobe Flash. Die Einbindung von proprietären Plugins musste für diese Browservarianten teilweise neu aufgesetzt werden, so dass die Wiedergabe der jeweiligen Inhalte nicht oder nur fehlerhaft möglich war. Erst nach und nach konnten die Hersteller mit Umgehungslösungen diese Probleme beheben, so wie z.B. Apple, die gratis eine extra hierfür entwickelte App anbieten, mit der die Nutzung von Adobe Flash auf z.B. einem iPhone ermöglicht wird.

HTLM5 ermöglicht es nun, Multimediainhalte direkt, also ohne die Nutzung von proprietären Plugins, im Browser wiederzugeben. So ist es nun möglich, Webseiten zu entwerfen, die unabhängig von dem Funktionsumfang oder der Implementierung spezieller Plugins in der Lage sind, Multimediainhalte auf mobilen Endgeräten wiederzugeben. Da hierdurch auch eine direkte Nutzung der nativen Ressourcen stattfindet, kann zusätzlich ein Performancegewinn des Systems erzielt werden. Des Weiteren wird durch den angestrebten Standard HTML5 die Enwicklung von Webapplikationen als Konkurenz zu nativen "Apps" ermöglicht.

5.4 Voraussetzungen

5.4.1 Browserimplementierung

Die Hauptvoraussetzung für den produktiven Einsatz von HTML5 ist abhängig von einer flächendenkenden Implementierung in allen gängigen Browsern. Hier ist der Fortschritt recht unübersichtlich, da die verschiedenen Browserhersteller mit den verschiedensten Implementierungen begonnen haben. Bisher hat noch kein Browser alle HTML5 Spezifikationen umgesetzt.
Mit einigen Einschränkungen ist HTML5 aber auch schon jetzt einsetzbar. Die folgende Tabelle beinhaltet eine Liste der gängigen Browser mit der jeweiligen "HTML5-Versionsnummer".

Browser	Implementierung ab Version
Firefox	3.0+
Safari	3.0+
Opera	10.0+
Chrome	3.0+
Internet Explorer	vorraussichtlich ab Version 9.0+

6 Aktuelle HTML4/HTML5-Anwendungen im Bereich Fotografie

6.1 Imagehoster

Imagehoster sind Dienstleister, welche zur Kategorie der Sharehoster zu zuordnen sind, die Speicherplatz für die Speicherung von Bilddaten aller Art zur Verfügung stellen. Die Hochgeladenen Bilder lassen sich anschließend über einen HTML Link mit anderen teilen. Leider ist der Markt durch die große Anzahl der Anbieter sehr unübersichtlich geworden. Dadurch ist es leider nicht möglich einen klaren vergleich aufzustellen. Allerdings haben wir auf unseren Recherchen lediglich den Anbieter www.html5image.com gefunden, der eine mit HTML5 entwickelte Internetpräsenz anbietet. Das besondere ist, dass Bilddateien mittels Drag & Drop hochgeladen werden können.

6.2 Foto Communities

Foto-Communitys konnten in den letzten Jahren ein Massieves Benutzerwachstum feststellen. Zurückführen ist dies auf die in den letzten Jahren stark gesunkenen Preisen für Digitalkameras und deren Verbreitung. Dies hat dazu geführt das immer mehr Hobyfotografen ihre Fotos anderen präsentieren möchten. Was wiederum die Entwicklung von Foto-Communitys stark beeinflusst hat. Wie bei den Imagehostern, ist auch bei den Fotocommunitys der Markt sehr breit gestreut. Eine Vielzahl von Anbietern ermöglicht ihren Benutzern das Speichern, Katalogisieren und Archiviren von Fotos. Aus Diesem Grund war die Betrachtung aller Anbieter nicht möglich. Von uns überprüft wurden lediglich mehrere der großen Anbieter. Beispielsweise der Anbieter www.fotocommunity.de der nach eigenen Angaben, Europas größte Community für Fotografen ist. Die Weltweit größte Community für Fotos, mit über 5 Millionen eingestellten Fotos, ist www.flickr.com. Bei keinem der von uns überprüften Anbieter, ließen sich umstiege auf HTML5 im Zusammenhang mit Fotografie feststellen. Lediglich Flickr verzichtet bei der Wiedergabe von Videos auf Flash und setzt nun auf HTML5.

6.3 Social Networks

Social Networks (zu deutsch: Soziale Netzwerke) sind in der heutigen Zeit zu den wichtigsten und extrem stark frequentierten Webseiten im Internet geworden. Die großen Plattformen wie Facebook, Myspace und StudiVZ haben Mitgliederzahlen, die weit in die Millionen gehen. Social Networks als Marken haben heutzutage einen immensen Wert, im April 2010 brachte es die Marke Facebook auf einen Wert von 5,5 Milliarden US-Dollar.^[3] Dementsprechend sind die Social Networks ein sehr interessanter und lukrativer Markt für Neuentwicklungen, auch für Anwendgungen und Webseiten mit HTML5 und speziell im Bereich Fotografie. Denn alle großen, bekannten Social Netwoks bieten Möglichkeiten an, einzelne Fotos oder ganze Alben hochzuladen und auf der eigenen Profilseite zu präsentieren. Weiterhin ist auch der Austausch von Bildern mit anderen Benutzern der Plattformen ein wichtiger Aspekt, da heuzutage die User dieser Netzwerke viel stärker andere Menschen an ihrem Leben teilhaben lassen wollen.

Das Social Network StudiVZ hat aktuell sein erstes HTML5 Element online gestellt. Es handelt sich um eine Diashow, basierend auf der HTML5 Technologie Canvas. Bevor der User die eigentliche Diashow startet, werden die Fotos als Polaroid, mit einer zusätzlichen Spiegelung unterhalb des Fotos, dargestellt. Entscheidet sich der User die Fotos als Diashow darstellen zu lassen, wird auf das erste bzw. zuerst angeklickte Foto aufgezoomt und die Diashow gestartet. Mithilfe der Steuerungstasten am unteren Bildschirmrand lässt sich die Diashow anhalten oder pausieren, auch das vor- und zurückspringen ist möglich. Wird nach 30 Sekunden keine Diashow gestartet, beginnt eine Animation aus der aktuellen Galerieübersicht. Diese Animation wird von den Verantwortlichen bei StudiVZ als „Bildschirmschoner-Animation“ beschrieben.

Das weltweit größte Social Network Facebook hat im April 2010 damit begonnen auf HTML5 umzustellen. Allerdings bezieht sich die erste verfügbare Änderung auf die Wiedergabe von Videoinhalten, als Alternative zu Flash. Für die Darstellung von Fotos wird weiterhin HTML4 und PHP verwendet.

Auch bei Myspace schreitet der Wechsel auf HTML5 recht langsam voran. Als eine der ersten Funktionen wurde ein Audioplayer und später ein Videoplayer auf HTML5 Basis veröffentlicht.

7 Möglichkeiten im Bereich Fotografie mit HTML5

7.1 Fotopräsentation

Für die Standard-Einbindung von Fotos bzw. Bildern auf Internetseiten wird in HTML5 weiterhin das alte <img>-Tag verwendet. Alternativ kann auch das "neue" <object>-Tag verwendet werden, allerdings führt dies teilweise zu unerwünschten Darstellungen innerhalb des Internet Explorers bis zur Version 6 und 7. Der Grund dafür ist, dass der IE 6 und der IE 7 jedes <object>-Element wie ein ActivX-Objekt behandelt und ActivX-Objekte versehen Bilder mit einem Innenabstand. Da dies nicht immer gewünscht ist, sich aber auch nicht umgehen lässt, sollte man für die Einbindung von Bildern weiterhin das <img>-Tag verwenden.
Zu Verdeutlichung einmal ein kurzes Darstellungsbeispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <title>object vs img</title>
    <link type="text/css" rel="stylesheet" href="css/object.css"/>
  </head>
  <body>
      <object data="images/Bild 117.jpg">Katze</object>
      <img src="images/Bild 117.jpg" alt="Katze"/>
  </body>
</html>

Das Bild "Bild 117.jpg" zeigt eine Katze und sollte mit dem vorhergehenden Code-Beispiel zweimal, identisch, untereinander im Browser angezeigt werden. Durch den anfangs angesprochenen Effekt in den älteren Internet Explorer Versionen erhält man allerdings folgendes Ergebniss:

Alle anderen gängigen Browser stellen das Bild, korrekt, zweimal untereinander da:

Als weitere Alternative zu dem <img>-Tag gibt es in HTML5 das in Punkt "7.5 Foto- / Bildbearbeitung" beschriebene <canvas>-Tag. Dieses ermöglicht nicht nur die einfache Darstellung, sondern auch die pixelgenaue Manipulation von Fotos. Auf die daraus resultierenden Möglichkeiten für den Bereich Fotografie wird im Punkt 7.5 näher eingegangen.

Als semantische Neuerung kann bei der Einbindung von Bildern das neue HTML5-Element <figure> mit seinem Kindelement <figcaption> genutzt werden. Kindelement beschreibt hier ein Element, dass innerhalb eines übergeordneten Elements steht.

Laut W3C repräsentiert das figure-Element inhaltlich für sich stehende Inhalte, welche als Ganzes von dem „main flow“ des Dokumentes referenziert werden.
Das figure-Element kann folgende Inhalte fassen:
1. Ein figcaption-Element gefolgt von dem HTML-„flow content“
2. Dem HTML-„flow content“ gefolgt von einem figcaption-Element
3. „flow content“
Das figcaption-Element repräsentiert die Über-/Unterschrift oder Legende des dazugehörenden figure Elternelementes. Es darf pro figure-Element genau einmal verwendet werden und muss, laut Spezifikation, entweder als erstes oder letztes Kindelement verwendet werden.
In dem Bereich Fotographie lassen sich damit Bilder oder Bildgruppen mit Bildüberschriften, Bildunterschriften oder Legenden versehen.
Hierzu zwei Darstellungsbeispiele:
1. In diesem Beispiel wird einem einzelnen Bild eine Bildunterschrift hinzugefügt:

<figure>
	<img src=”images/100_2597.JPG” alt=”Stabkirche”/>
	<figcaption>Eine Stabkirche aus Norwegen</figcaption>
</figure>

2. In diesem Beispiel werden drei inhaltlich zusammengehörende Bilder zu einer "figure"-Gruppe zusammengefasst und mit einer gemeinsamen Bildunterschrift versehen:

<figure>
	<img src=”images/100_2531.JPG” alt=”Fjorde1”/>
	<img src=”images/100_2532.JPG” alt=”Fjorde2”/>
	<img src=”images/100_2535.JPG” alt=”Fjorde3”/>
	<figcaption>Die Fjorde von Norwegen</figcaption>
</figure>

7.2 Drag & Drop / Foto-Sharing

Die Drag&Drop API in HTML5, die auf einer alten Internet Explorer 5 Drag&Drop API basiert, ermöglicht eine standardisierte Form des Drag&Drop ohne dabei auf Drittanbieter-Javascript-Bibliotheken wie zum Beispiel JQuery/JQuery UI zurückzugreifen.

Browser	Implementierung ab Version
Mozilla Firefox	3.5+
Opera	-
Google Chrome	3.0+
Apple Safari	4.0+
Mircosoft Internet Explorer	6.0+

Während es in der alten Version der API lediglich die Möglichkeit gab, Texte, Links und Bilder Drag & Drop-fähig zu machen, wurde der Funktionsumfang nun deutlich erweitert.

Das neue HTML5-Attribut „draggable“, welches bisher allerdings nur im Firefox und den Webkit-Browsern Chrome und Safari unterstützt wird, erlaubt es jedes Element drag-fähig zu machen.

<div id="element2drag" draggable="true"/>

<figure id="element2drag" draggable="true"/>

Für Bilder ist dieses Attribut allerdings nebensächlich, da diese laut Spezifikation automatisch "draggable" sind.

Die "neue" Drag&Drop-API erlaubt aber nicht nur das Verschieben von Elementen innerhalb einer Internetseite. Vielmehr ist es mit dieser Schnittstelle möglich Elemente von einer Internetseite auf einer andere Internetseite zu "ziehen", auch wenn diese in einem eigenständigen Fenster oder sogar in einem anderen Browser geöffnet sind. Diese Möglichkeit wird Cross-Website oder Cross-Browser Drag & Drop bezeichnet. Eine weitere Neuerung ist ebenfalls das Drag & Drop zwischen Desktop und Internetseite möglich ist.

Im Hinblick auf Fotografie ergeben sich dadurch ganz andere Möglichkeiten der Seitengestaltung. Hier dargestellt am Beispiel einer Fotogalerie und einer Demo-Profil Seite:

1. Fotogalerie
Bei einer Fotogalerie hat man durch die Drag&Drop-API die Möglichkeit seine Bilder aus nahezu beliebigen Quellen in die Galerie zu ziehen. Ein Anwender hat so z.B. die Möglichkeit seine Bilder aus verschiedenen Galerieen, über mehrere Webseiten hinweg zu sortieren:

Eine weitere Anwendungsmöglichkeit der Drag&Drop-API ist die Erstellung oder Ergänzung einer Gallerie mit Bildern aus dem jeweiligen Host-Dateisystem. Der Benutzer kann dadurch die Bilder direkt von seiner Festplatte in die Online-Galerie ziehen. Der manuelle Upload des jeweiligen Bildes entfällt somit.

2. Profilseiten
Auf Profilseiten wie z.B. den Seiten der Social Networks kann jeder ein Profilbild zu seinem Profil hinzufügen. Dieses könnte, wenn man die Drag&Drop API nutzt, direkt aus dem jeweiligen Host-Dateisystem in das Profil gezogen werden. Wie schon im vorhergehenden Beispiel erwähnt, entfällt durch die Nutzung der Drag&Drop API der typische manuelle Upload des Bildes. Der Benutzer kann einfach das gewünschte Bild auf den Platzhalter innerhalb seines Profils ziehen.

7.3 Offline Webanwendungen

Die Möglichkeiten der Offline Webanwedungen im Bereich Fotografie basieren auf der umfangreichen clientseitigen Speicherung von Daten, um diese im Fall eines Netzverlustes bereitstellen zu können. In HTML5 gibt es dafür zum einen den "Application Cache" und zum anderen den "DOM Storage".

1.Application Cache

Browser	Implementierung ab Version
Mozilla Firefox	3.5+
Opera	11.0
Google Chrome	5.0+
Apple Safari	5.0+
Mircosoft Internet Explorer	-

Der Application Cache ist im Prinzip wie der normale Browserchache, allerdings präzise durch die jeweilige Website steuerbar, versioniert und automatisch mit dem Netz synchronisiert. Die Steuerung was und was nicht gecached wird findet über das s.g. Manifest File statt.

Das Manifest wird unterteilt in:

• CACHE
  • Zeilenweise unterteilte Liste aller zu cachenden Elemente (relativ zum Manifestfile angegeben)
  • Alle hier aufgeführten Elemente werden als letzten Schritt der Ausführung der Website auf Aktualität geprüft, ggf. runtergeladen und neu versioniert oder ggf. gelöscht
• NETWORK
  • Zeilenweise unterteilte Liste aller NICHT zu cachenden Elemente (relativ zum Manifestfile angegeben)
  • Alle hier aufgeführten Elemente werden NICHT zwischengespeichert, sodass der Benutzer zur Nutzung dieser Elemente online sein MUSS
• FALLBACK
  • Gibt die Möglichkeit einer Fehlerbehandlung wenn bestimmte Elemente gewollt (s. NETWORK) oder ungewollt nicht geladen werden konnte
  • Bsp.: Ein Teil einer Webapplikation soll ausschließlich online genutzt werden. Wenn der User Offline gegangen ist und trotzdem versucht auf diesen Teil zu zugreifen, kann ihm in diesem Fall eine benutzerfreundliche, informativere Fehlerseite als die Standard 404-Seite präsentiert werden

2. DOM Storage

Browser	Implementierung ab Version
Mozilla Firefox	2.0+/ (3.5+ empfehlenswert)
Opera	10.5+
Google Chrome	4.0+
Apple Safari	4.0+
Mircosoft Internet Explorer	8.0+

Der DOM Storage speichert Daten in Name-Wert-Paaren ab und ist ähnlich wie ein HTTP-Cookie - nur “haltbarer” und mit mehr Kapazität.
Man unterscheidet in:
SessionSorage - gilt wie der Name schon sagt nur über die Dauer der Session und wird danach verworfen. LocalStorage - gilt über Sessiongrenzen hinaus. Selbst wenn der Browser geschlossen worden ist, bleiben die gespeicherten Daten noch auf dem System.

Der DOM Storage legt die Datenspeicher nach Websites getrennt an. Eine Website kann, ähnlich wie bei den HTTP-Cookies, nur auf den eigenen Speicher zugreifen.

• Achtung! Es wird nach Host UND Port unterschieden d.h. die gleiche Website per https aufgerufen, bekommt einen anderen Speicher als die selbe Seite per http aufgerufen

Anwendung im Bereich Fotografie:
Mit einer Kombination aus Application Cache, DOM Storage und der im vorherigen Punkt angesprochenen Möglichkeiten der Drag&Drop-API lässt sich beispielsweise eine Fotogalerie erstellen, die nicht nur online, sondern auch offline nutzbar ist, und sich bei Wiederaufnahme der Internetverbindung automatisch mit dem Server synchronisiert.

Erläuterung:

I. Der Benutzer ruft die Seite (im Folgenden „Gallerie“ genannt) mit der Fotogalerie auf und erhält die ihm zugeordneten Bilder. Zusätzlich wird dem Browser ein Manifest-File übermittelt, was festlegt, dass alle Bilder des Users sowie alle für die Nutzung notwendigen Javascript und CSS Elemente im Application Cache des Seitenkontextes gespeichert werden sollen. II. Der Benutzer geht offline. Da alle Javascript- und Layoutelemente, sowie seine Bilder im Application Cache gespeichert worden sind, kann er trotz allem die Galerie weiterhin nutzen. Im Hintergrund werden jetzt aber, ausgelöst durch das „Offline-Event“ des Browsers, alle Änderungen nicht mehr direkt an den Server übermittelt, sondern stattdessen in dem DOM Storage abgelegt. In diesem muss ab diesem Zeitpunkt eine Change History gepflegt werden. Das heißt, dass wenn der Benutzer beispielsweise ein Bild löscht, wird es erst einmal nur aus seiner aktuellen Ansicht entfernt. Im DOM Storage muss nun ein entsprechender Eintrag ausgewählt werden, der in der späteren Synchronisierung mit dem Server dafür sorgt, dass das jeweilige Bild auch wirklich (auf dem Server) gelöscht wird. Ein ähnlicher Ablauf ermöglicht auch das Hinzufügen eines Bildes om Offline-Modus. Dank der im Application Cache zwischen gespeicherten Javascript-Bibliotheken, können auch alle Funktionalitäten der unter Punkt 7.2 dargestellten Drag&Drop API, weiterhin durch den Anwender genutzt werden. Wenn der Benutzer nun ein Bild von seinem lokalen System in den Seitenkontext zieht, wird es für ihn ganz normal auf der Webseite angezeigt. Im Hintergrund wird es aber, anstatt direkt zu dem Server übermittelt zu werden, BASE64 kodiert im DOM Storage abgelegt. III. Der Benutzer hat wieder eine Verbindung mit dem Internet. Ausgelöst durch das sogenannte „Online-Event“ des Browsers wird per Javascript der Inhalt des DOM Storage an den Server gesendet. Wenn sich serverseitig das Manifest bzw. in dem Manifest eingebundene Elemente geändert haben werden diese erneut von dem Server in den Application Cache geladen. Zu diesem Zeitpunkt ist der Inhalt der ehemals Offline-Webapplikation wieder mit dem Server synchronisiert. //page reload?? // test auto reload appcach.swap()

Im Idealfall kann der Benutzer in diesem Beispiel die Galerie ohne Unterbrechung durch eine fehlende Internetverbindung nutzen. Er kann seine Bilder verwalten und das nächste Mal, wenn er online ist und wieder die Galerieseite besucht, wird seine persönliche Bildergalerie auf dem Server automatisch mit der lokal gespeicherten Version abgeglichen und synchronisiert.

7.4 Geolocation

Eine weitere wichtige Neuerung von HTML5 ist die JavaScript-API Geolocation. Mit dieser API kann man über der Browser Information über die Lokalisation eines Besuchers/Surfers aufnehmen. Die benötigten Daten zur Ermittlung des Standortes können auf verschiedene Arten ermittelt werden. Die Koordinaten können manuell eingegeben werden, aber auch automatisch übergeben werden. So hat der Mozilla Firefox die Möglichkeit entweder über das Betriebssystem oder über eine Anbindung an die Google Location Services die Daten zu erhalten.^[4]

Aktuell unterstützen folgende Browser die Anwendung von Geolocation:^[5]

Browser	Implementierung ab Version
Mozilla Firefox	3.5+
Opera	10.6+
Google Chrome	5.0+
Apple Safari	5.0+
Mircosoft Internet Explorer	9.0+

Zunächst wird eine Methode getCurrentPosition() ausgeführt. Dadurch können entweder Parameter über eine sogenannte Callback-Funktion (Erfolgsfall oder Fehlerfall) oder über ein Objekt mit Konfigurationsoptionen übergeben werden. Wichtig ist auch zu erwähnen, dass jedes Mal, wenn diese Methode ausgeführt wird, der Browser um die Autorisierung dieses Vorgangs fragen wird.

Diese Abfrage ist unerlässlich, da sonst ein Zugriff in die Privatsphäre des Besuchers ohne dessen Wissen und Einverständnis stattfinden könnte. Wenn der Zugriff durch den Nutzer erlaubt wurde, wird ein position-Objekt übergeben, das Koordinaten und Zeitangaben beinhaltet. Folgende Eigenschaften können übergeben werden

coords (Koordinaten)

Abkürzung	Bedeutung
latitude	Geografische Breite (Einheit: Dezimalwinkel)
longitude	Geografische Länge (Einheit: Dezimalwinkel)
altitude	Höhe (Einheit: Meter)
accuracy	Präzision von Breite und Länge (Einheit: Meter)
altitudeAccuracy	Präzision der Höhe (Einheit: Meter)
heading	Richtung (Einheit: Grad)
speed	Geschwindigkeit (Einheit: Meter/Sekunde)

timestamp
Informationen über Jahr, Monat, Tag, Stunde, Minuten und Sekunden.

Falls die Rückmeldung fehlerhaft war (Fehler-Callback), werden keine, wie zuvor beschriebenen Attribute übergeben, sondern einer von vier Fehlercodes:

- UNKNOWN_ERROR (0) Ein unbekannter Fehler.
- PERMISSION_UNAVAILABLE (1) Der Benutzer hat die Erlaubnis für die Positionsbestimmung verweigert.
- POSITION_ UNAVAILABLE (2) Die Position konnte nicht bestimmt werden.
- TIMEOUT (3) Die Position konnte nicht innerhalb der durch das Konfigurations-Objekt vorgegebenen Zeit bestimmt werden.

Des Weiteren gibt es noch andere Funktionen, die z.B. eine Überwachung von aktuellen Positionsänderungen ermöglichen, auf die wir hier nicht näher eingehen wollen, da diese nicht den erforderlichen Bezug zum hier bearbeiteten Thema Fotografie haben.

Mögliche Einsatzgebiete für diese API können in Zukunft so genannte Web-Geodienste sein, die sich in der letzten Zeit verstärkt im Netz finden lassen. So bieten Social Networks wie z.B. Facebook Dienste an, bei denen man seinen aktuellen Standort angeben kann. Auch beim Marktführer Google, mit seinen Diensten Google Maps und Google Street View, kann diese API Einsatzgebiete finden. So könnten in Zukunft Fotos, die mit Mobilgeräten (Smartphones) aufgenommen und direkt online zur Verfügung gestellt werden (z.B. über Social Networks oder Foto Communities), mit einer Standortmarkierung über die Geolocation-API versehen werden. Ebenfalls ist eine nachträgliche Aufnahme von geografischen Koordinaten z.B. aus den Metadaten einer Fotodatei über die Schnittstelle möglich.

Ebenfalls möglich ist die Übergabe der benötigten Parameter an die API mittels GPS. Voteil ist auch hier, dass die Eigenschaften automatisch übergeben werden. Da sich in vielen, aktuell verfügbaren mobilen Endgeräten bereits standardmäßig ein GPS-Empfänger befindet, können Applikationen oder Webseiten, die die Geolocation-API beinhalten, schnell großen Anklang finden. Ein Beispiel wäre eine App für das iPhone, die man sich für die Besichtigung eines Urlaubsziels oder einer Stadt herunterladen kann. Während der Benutzer Fotos mit dem iPhone macht, werden über die Geolocation-Anwendung Positionsangaben in die Metadaten der Fotografien übertragen. Diese werden zunächst offline vorgehalten. Sobald der Benutzer das Endgerät wieder mit seinem PC oder Laptop verbindet oder eine direkte Verbindung zu einer z.B. Fotocommunity herstellt, werden die Fotos mit den Standortangaben übertragen. Aus den Positionsangaben kann in Verbindung mit der timestamp-Eigenschaft dann eine Route, z.B. einer Stadtrundfahrt, erstellt und direkt online zur Verfügung gestellt werden.

7.5 Foto- / Bildbearbeitung