Wichtige Ziele der Spezifikation:
Kompatibilität -> „backwards“ und „forward“ compability, unterstützung von alten elementen, elemente sollen nicht durch Versionierung beeinflusst werden
Interoperabilität -> vereinfachung und geringe komplexität
Universal Access -> unabhängigkeit des Mediums (Mobil, Desktop), Support Unicode World Language
Utility -> „These principles call for a design that makes sure HTML can be used effectively for its many intended purposes.“
Für Anwender und Entwickler neuer Webanwendungen/Webtechnologien ist die Anpassungsfähigkeit/Interpretation der Browser an neue Webtechnologien (HTML5) entscheidend. Der Marktanteil der verwendeten Browserfamilien spielt hierbei eine große Rolle und ist ein Indikator für die Anwendbarkeit bestimmter Technologien.
Stand: Juli 2013
Chrome: 43,1 %
Internet Explorer: 24,53 %
Firefox 20,09 %
Safari 8,59 %
Seit Einführung des Browsers Chrome, gewinnt dieser immer mehr Marktanteile, die der Internet Explorer in den letzten Jahren einbüßen musste. Grund dafür sind u. A. langsamere Anpassung an neue Webstandards und die damit einhergehende Unzufriedenheit seitens der Anwender und Entwickler.
Die steigende Zahl an Internetnutzern auf Mobilgeräten verlangt nach entsprechenden Schnittstellen und Techniken zur Integration von funktionierenden Browsern
in mobilen Endgeräten. HTML5 versucht dem mit dem Device API Access zu entsprechen.
new Html5 features and browser compatibility, Stand der Standardisierung, Überblick, Browserkompabilität
1. 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
4. 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
5. 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
6. 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>
<!-- Werden die Umlaute korrekt dargestellt? -->
<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>
7. 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
9. 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)
10. 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"
11. 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
18. Connectivity
bidirektionale full-duplex Kommunikation durch
WebSocket API via HTTP/TCP
effizientere und sichere Kommunikation zwischen Client
und Server
Anwendungsbeispiele: Chats, Screensharing, schnellere Browsergames, Real-Time
Updates
var Socket = new WebSocket(url, [protocal]);
instanzieren eines WebSocket Objekts
20. 3D, GRAPHICS & EFFECTS
Canvas
zeichnen von z.B. Grafiken, Gradienten via Javascript
SVG
XML basiertes beschreiben zweidimensionaler Grafiken
CSS3 3D Transforms
rotating, spinning
SMIL
XML basierte Sprache zur Synchronisation von Multimediaanwendungen
WebGL
hardwarebeschleunigte 3D-Grafiken/Animationen in Webbrowsern ohne zusätzliche Plugins etc.
21. 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
- beispiel eines HTML 4.01 Dokuments
Baumstruktur, Kinder-/Schwester-Elemente
Aufteilung in head body „Bereiche“ durch Verwendung von Tags
Einbinden von Metainformationen etc.
Quelle:
http://www.w3.org/TR/REC-html40/struct/global.html
Einstellen des XHTML 2.0 zugunsten von HTML5, Probleme mit der Rückwärtskompatibilität
Quelle:
http://www.w3.org/community/webed/wiki/HTML/Specifications
W3C HTML5 ist Teilmenge von WHATWG HTML5 spezifikation. Es folgen die spezifikationen und beispiele
Quellen:
http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#background
http://cdn2.peterkroener.de/uploads/2010/05/HTML5-Technologien3.png
Wichtige Ziele der Spezifikation:
Kompatibilität -> „backwards“ und „forward“ compability, unterstützung von alten elementen, elemente sollen nicht durch Versionierung beeinflusst werden
Interoperabilität -> vereinfachung und geringe komplexität
Universal Access -> unabhängigkeit des Mediums (Mobil, Desktop), Support Unicode World Language
Utility -> „These principles call for a design that makes sure HTML can be used effectively for its many intended purposes.“
Quellen
http://www.w3.org/TR/html-design-principles/
Die ansteigender Zahl an Internetnutzern auf Mobilgeräten verlangt nach entsprechenden Schnittstellen und Techniken zur Integration von funktionierenden Browsern
in mobilen Endgeräten. HTML5 versucht dem mit dem Device API Access zu entsprechen.
Quelle:
http://static1.businessinsider.com/image/4fda47c569beddef0b000003-960/comscore-mobile-users-desktop-users-2014.jpg
Vergleich zur Doctype Version 4.01
Beispiel eines HTMLl 5 Dokuments. -> doctype etc.
-> umsetzung der design principles
Siehe Teilvortrag
Siehe Teilvortrag
Siehe Teilvortrag
HTML5 bietet eine Anzahl neuer „input types“ und entsprechender Attribute. Die Spezifkation lässt auch eine Validierung im Browserclient zu.
Quellen:
http://www.w3.org/TR/html-markup/input.html
http://www.w3schools.com/html/html5_form_input_types.asp
Browsersansicht und Beispiel einer Validierung des Cients vom vorigen Beispiel.
Für Anwender und Entwickler neuer Webanwendungen/Webtechnologien ist die Anpassungsfähigkeit/Interpretation der Browser an neue Webtechnologien (HTML5) entscheidend. Der Marktanteil
der verwendeten Browserfamilien spielt hierbei eine große Rolle und ist ein Indikator für die Anwendbarkeit bestimmter Technologien.
Stand: Juli 2013
Chrome: 43,1 %
Internet Explorer: 24,53 %
Firefox 20,09 %
Safari 8,59 %
Seit Einführung des Browsers Chrome, gewinnt dieser immer mehr Marktanteile, die der Internet Explorer in den letzten Jahren einbüßen musste. Grund dafür sind u. A. langsamere Anpassung an neue Webstandards und die damit einhergehende Unzufriedenheit seitens der Anwender und Entwickler.
Quelle:
http://de.statista.com/statistik/daten/studie/157944/umfrage/marktanteile-der-browser-bei-der-internetnutzung-weltweit-seit-2009/
Abbildung zeigt deutlich die wesentlich ausgeprägtere HTML5 Kompatibilität bei Chrome im Gegensatz zum Internet Explorer, was u. A. den größeren Marktanteil von Chrome begründet.
Quelle:
http://caniuse.com/#agents=desktop&cats=HTML5; Stand: 20.05.2013
Kompatibilität einiger ausgewählten HTML5 Elementen in den drei größten Browsern (IE, Chrome, Firefox).
Auffallend höhere Unterstützung durch Chrome.
Quelle:
Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 20.05.2013.
Kompatibilität einiger ausgewählten HTML5 Elementen in den drei größten Browsern (IE, Chrome, Firefox).
Auffallend höhere Unterstützung durch Chrome.
Quelle:
Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 20.05.2013.