Agenda
• Stand der Standardisierung, Überblick,
Browserkompabilität
• JS: Lokale Speicherung, IndexedDB
• JS: Geolocation,...
Ü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
Languag...
HTML in a nutshell
- Spezifikation durch W3C und (WHATWG)
- HTML ist eine textbasierte Auszeichnungsprache (Markup Languag...
HTML in a nutshell
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head...
Versionshistorie
Version Festlegung
HTML 3. November 1992 Textorientierte "Urversion"
HTML 30. April 1993 mehr Attribute u...
Ü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...
Web Hypertext Application Technology Working Group
"[...] focuses primarily on the development of HTML and
APIs needed for...
vs
- Browserhersteller sollten
alleinige Adressaten der
Spezifikation sein
- versionsloser HTML-Standard
"HTML Living Stan...
HTML5-Scope
Quelle: http://cdn2.peterkroener.de/uploads/2010/05/HTML5-Technologien3.png
Webstandards
- festgelegt durch W3C / "WHATWG"
- technische Spezifikationen
- browserübergreifende / einheitliche
Implemen...
Ziele der Spezifikation / html-design-
principles
1. Compatibility
1. Degrade Gracefully
1. Utility
4. Interoperability
5....
Semantics
"semantic web", OWL, RDF
gliedern des Dokuments in semantische Abschnitte
<div id="header"> -> <header>, <footer...
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-
/Lage...
Connectivity
bidirektionale full-duplex Kommunikation durch
WebSocket API via HTTP/TCP
effizientere und sichere Kommunikat...
Multimedia
Verzicht auf Browserplugins
zB.: Flash, Quicktime, DivX
Einführung der Tags <audio>, <video>
WebRTC API für Ech...
3D, GRAPHICS & EFFECTS
Canvas
zeichnen von z.B. Grafiken, Gradienten via Javascript
SVG
XML basiertes beschreiben zweidime...
Performance & Integration
bessere Performance und Auslagerung von CPU Tasks an GPU
durch Verwendung folgender Techniken:
o...
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">
<...
<canvas>
Kreisbögen
Bezierkurven
Farbverläufe
Grafiken
Transparenzen
Text
<canvas id="myCanvas" width="200"height="100"></...
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...
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>
<isindex>
<noframes>
<s>
<strike>
<t...
Browserkompatibilität
HTML
Browser Marktanteile
Quelle: http://de.statista.com/statistik/daten/studie/157944/umfrage/marktanteile-der-browser-bei-der...
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, 2...
Browserkompatibilität von HTML5 input types
Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 2...
new Html5 features and browser compatibility, Stand der Standardisierung, Überblick, Browserkompabilität
Nächste SlideShare
Wird geladen in …5
×

new Html5 features and browser compatibility, Stand der Standardisierung, Überblick, Browserkompabilität

422 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
422
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Quellen:

    http://www.w3.org/History.html
    http://www.w3.org/People/Berners-Lee/
    http://www.w3.org/TR/REC-html40/intro/intro.html#h-2.2.1
    http://resources3.news.com.au/images/2013/01/30/1226564/845955-tim-berners-lee.jpg

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

    http://www.w3.org/Consortium/
    http://www.w3.org/Consortium/mission#principles
  • Quellen:

    http://www.whatwg.org/specs/
    http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#history-1
    http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?
  • 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
  • Quellen:

    http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?
    http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#background
    http://www.w3.org/standards/
  • 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.
  • new Html5 features and browser compatibility, Stand der Standardisierung, Überblick, Browserkompabilität

    1. 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
    2. 2. Überblick, Spezifikation, Browserkompatibilität HTML
    3. 3. HTML in a nutshell Hyper Text Markup Language
    4. 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. 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. 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. 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
    8. 8. Überblick der Spezifikation HTML
    9. 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. 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. 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
    12. 12. HTML5-Scope Quelle: http://cdn2.peterkroener.de/uploads/2010/05/HTML5-Technologien3.png
    13. 13. Webstandards - festgelegt durch W3C / "WHATWG" - technische Spezifikationen - browserübergreifende / einheitliche Implementierung
    14. 14. Ziele der Spezifikation / html-design- principles 1. Compatibility 1. Degrade Gracefully 1. Utility 4. Interoperability 5. Universal Access
    15. 15. 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
    16. 16. Offline & Storage "Super-Cookies" offline Nutzung von Browseranwendungen lokale Speicherung von Anwenderdaten
    17. 17. 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
    18. 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
    19. 19. Multimedia Verzicht auf Browserplugins zB.: Flash, Quicktime, DivX Einführung der Tags <audio>, <video> WebRTC API für Echtzeit-Audio- /Videokommunikation
    20. 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. 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
    22. 22. CSS3 Responsive Webdesign mittels Media Queries Benutzerfreundliche Webformulare semantische Markups
    23. 23. 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>
    24. 24. <canvas> Kreisbögen Bezierkurven Farbverläufe Grafiken Transparenzen Text <canvas id="myCanvas" width="200"height="100"></canvas>
    25. 25. Mediaelemente <audio> <video> <source> <embed> <track>
    26. 26. semantische und strukturelle Elemente <header> <footer> <article> <hgroup> <nav> <progress> <section> <time>
    27. 27. 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>
    28. 28. Drag & Drop <img dragable="true"> <p dragable="true"></p> <div dragable="true"></div>
    29. 29. Geolocation 1. GPS-Sender 2. WLAN-Netzwerke 3. Funk-Signale (Handynetz) 4. IP-Adresse 5. vom Benutzer definierter Standort
    30. 30. Input Types
    31. 31. Input Validation
    32. 32. entfernte Elemente <acronym> <applet> <basefont> <big> <center> <dir> <font> <iframe> <isindex> <noframes> <s> <strike> <tt> <u>
    33. 33. Browserkompatibilität HTML
    34. 34. Browser Marktanteile Quelle: http://de.statista.com/statistik/daten/studie/157944/umfrage/marktanteile-der-browser-bei-der-internetnutzung-weltweit-seit-2009/
    35. 35. Browser HTML5 Kompatibilität Quelle: http://caniuse.com/#agents=desktop&cats=HTML5; Stand: 20.05.2013
    36. 36. Browserkompatibilität von HTML5 Audio&Video Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 20.05.2013.
    37. 37. Browserkompatibilität von HTML5 input types Quelle: http://html5test.com/compare/browser/chrome26/ff10/ie10.html; Stand, 20.05.2013.

    ×