new html5 features and browser compatibility, stand der standardisierung, Überblick,...
Post on 02-Jul-2015
160 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>
<!-- 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>
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.
top related