new html5 features and browser compatibility, stand der standardisierung, Überblick,...

Agenda

• Stand der Standardisierung, Überblick,

Browserkompabilität

• JS: Lokale Speicherung, IndexedDB

• JS: Geolocation, Drag and Drop / FilesystemAPI

• html5: Semantische Elemente

• html5: CANVAS + Audio und Video

Überblick, Spezifikation,

Browserkompatibilität

HTML

HTML in a nutshell

Hyper Text Markup Language

HTML in a nutshell

Sir Timothy John Berners-Lee

"Erfinder" des WWW ( 1990 )

- Spezifikation einer Hypertext Markup

Language

- URI als Adressierung im WWW

- Web Client Server CERN httpd

- HTTP als Transferprotokoll

HTML - "Urversion" am 3. November 1992

Direktor des W3C und WWW Foundation

Quelle:

http://resources3.news.com.au/images/2013/01/30/122656

4/845955-tim-berners-lee.jpg

HTML in a nutshell

- Spezifikation durch W3C und (WHATWG)

- HTML ist eine textbasierte Auszeichnungsprache (Markup Language)

- Verknüpfen von HTML-Dokumenten durch Hyperlinks

- Dokument wird durch semantische <tag>-Elemente hierarchisch

strukturiert

HTML in a nutshell

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta name="author" content="Sinan Akalin">

<link rel="stylesheet" href="styles/layout.css" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js" ></script>

<title>HTML-Beispielseite</title>

</head>

<body>



<h1>Das ist eine Überschrift</h1>

<p style="color:#EE7621">Das ist ein Paragraph!</p>

<img src="../realtiver-pfad.jpg" title="Attribute sind klasse!" />

</body>

</html>

Versionshistorie

Version Festlegung

HTML 3. November 1992 Textorientierte "Urversion"

HTML 30. April 1993 mehr Attribute und u.a. Bildintegration

HTML+ November 1993

HTML 2.0 November 1995 erstmalig als RFC 1866 definiert

HTML 3.0 schon vor Veröffentlichung veraltet

HTML 3.2 14. Januar 1997

HTML 4.0 18. Dezember 1997 u.a. Einführung von Stylesheets,

Frames

HTML 4.1 24. Dezember 1999 Korrektur von 4.0

XHTML 1.0 26. Januar 2000 Neuformulierungin in XML (SGML-

Teilmrnenge)

XHTML 1.1 31. Mai 2001 u.a. "strengerer" Sprachumfang auf

1.0 strict

XHTML 2.0 26. Juli 2006, closed zugunsten von HTML5 eingestellt

HTML5 23. April 2009, Working Draft Spezifikation vermutlich 2014

Überblick der Spezifikation

HTML

World Wide Web Consortium

"The W3C mission is to lead the World Wide Web to its full potential by

developing protocols and guidelines that ensure the long-term

growth of the Web."

Gründung: Oktober 1994, MIT Laboratory for Computer Science

Gremium für die Standardisierung von Internettechnologien

~ 71 Working Groups

ca. 100 veröffentlichte "empfohlene" Standards (u.a. HTML, XHTML,

RDF, OWL, CSS, SVG)

Web Hypertext Application Technology Working Group

"[...] focuses primarily on the development of HTML and

APIs needed for Web applications."

Gründung: 2004 durch Apple, Mozilla Foundation, Opera

Software ASA "losgelöst" von W3C

Gremium für die Standardisierung der HTML5-Spezifikation

und assoziierter Api's

Spezifikation des "HTML Living Standards"

vs

- Browserhersteller sollten

alleinige Adressaten der

Spezifikation sein

- versionsloser HTML-Standard

"HTML Living Standard"

- ständige Korrektur und

Erweiterung

- stabile Version der

Spezifikation als HTML5

Standard

- komplexerer

Standardisierungsprozess

- Auslagerung von Canvas und

Drag&Drop Api

HTML5-Scope

Quelle: http://cdn2.peterkroener.de/uploads/2010/05/HTML5-Technologien3.png

Webstandards

- festgelegt durch W3C / "WHATWG"

- technische Spezifikationen

- browserübergreifende / einheitliche

Implementierung

Ziele der Spezifikation / html-design-

principles

1. Compatibility

1. Degrade Gracefully

1. Utility

4. Interoperability

5. Universal Access

Semantics

"semantic web", OWL, RDF

gliedern des Dokuments in semantische Abschnitte<div id="header"> -> <header>, <footer>, <hgroup>, <article>, <nav>, <time> etc.

semantisches verknüpfen und durchsuchen von

textbasierten Dokumenten erleichtern

Offline & Storage

"Super-Cookies"

offline Nutzung von Browseranwendungen

lokale Speicherung von Anwenderdaten

Device Access

Schnittstellen zwischen

Browser und Mobilgerät

Kamera, Mikrophon, GPS,

Kompass, Filesystem,

Bewegungs-

/Lagensensorik

DeviceOrientation Event

Specification

Quelle: http://static1.businessinsider.com/image/4fda47c569beddef0b000003-

960/comscore-mobile-users-desktop-users-2014.jpg

Connectivity

bidirektionale full-duplex Kommunikation durch

WebSocket API via HTTP/TCP

effizientere und sichere Kommunikation zwischen Client

und ServerAnwendungsbeispiele: Chats, Screensharing, schnellere Browsergames, Real-Time

Updates

var Socket = new WebSocket(url, [protocal]);instanzieren eines WebSocket Objekts

Multimedia

Verzicht auf BrowserpluginszB.: Flash, Quicktime, DivX

Einführung der Tags <audio>, <video>

WebRTC API für Echtzeit-Audio-

/Videokommunikation

3D, GRAPHICS & EFFECTS

Canvaszeichnen von z.B. Grafiken, Gradienten via Javascript

SVGXML basiertes beschreiben zweidimensionaler Grafiken

CSS3 3D Transformsrotating, spinning

SMILXML basierte Sprache zur Synchronisation von Multimediaanwendungen

WebGLhardwarebeschleunigte 3D-Grafiken/Animationen in Webbrowsern ohne zusätzliche Plugins etc.

Performance & Integration

bessere Performance und Auslagerung von CPU Tasks an GPU

durch Verwendung folgender Techniken:

o CSS3-Transition

o CSS3 3D Transformationen

o Grafik-Rendering durch canvas Elemente

o Grafik-Rendering durch WebGL

CSS3

Responsive Webdesign mittels Media

Queries

Benutzerfreundliche Webformulare

semantische Markups

Doctype

Doctype Version 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

<html>

<head>

<title>HTML5 DOCTYPE</title>

</head>

<body>

</body>

</html>

<canvas>

Kreisbögen

Bezierkurven

Farbverläufe

Grafiken

Transparenzen

Text

<canvas id="myCanvas" width="200"height="100"></canvas>

Mediaelemente

<audio>

<video>

<source>

<embed>

<track>

semantische und strukturelle Elemente

<header>

<footer>

<article>

<hgroup>

<nav>

<progress>

<section>

<time>

Scalable Vector Graphics

<!DOCTYPE html>

<html>

<head>

<title>Canvas Kreise</title>

</head>

<body>

<svg id="kreise" height="200" xmlns="http://www.e3.org/200/svg">

<circle id="orangeCircle" cx="30" cy="30" r="30" fill="orange" />

<circle id="greenCircle" cx="20" cy="20" r="20" fill="green" />

<circle id="blueCircle" cx="10" cy="10" r="10" fill="blue" />

</svg>

</body>

</html>

Drag & Drop

<img dragable="true">

<p dragable="true"></p>

<div dragable="true"></div>

Geolocation

1. GPS-Sender

2. WLAN-Netzwerke

3. Funk-Signale (Handynetz)

4. IP-Adresse

5. vom Benutzer definierter Standort

Input Types

Input Validation

entfernte Elemente

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<iframe>

<frame>

<isindex>

<noframes>

<s>

<strike>

<tt>

<u>

Browserkompatibilität

HTML

Browser Marktanteile

Quelle: http://de.statista.com/statistik/daten/studie/157944/umfrage/marktanteile-der-browser-bei-der-internetnutzung-weltweit-seit-2009/

Browser HTML5 Kompatibilität

Quelle: http://caniuse.com/#agents=desktop&cats=HTML5;

Stand: 20.05.2013

Browserkompatibilität von HTML5 Audio&Video

Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 20.05.2013.

Browserkompatibilität von HTML5 input types

Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 20.05.2013.