SlideShare ist ein Scribd-Unternehmen logo
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 Server
Anwendungsbeispiele: Chats, Screensharing, schnellere Browsergames, Real-Time
Updates
var Socket = new WebSocket(url, [protocal]);
instanzieren eines WebSocket Objekts
Multimedia
Verzicht auf Browserplugins
zB.: Flash, Quicktime, DivX
Einführung der Tags <audio>, <video>
WebRTC API für Echtzeit-Audio-
/Videokommunikation
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.
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>
<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.
new Html5 features and browser compatibility, Stand der Standardisierung, Überblick, Browserkompabilität

Weitere ähnliche Inhalte

Andere mochten auch

Ach... Och...
Ach... Och...Ach... Och...
Ach... Och...
Marjon van Wijk
 
Alex 1997-2012
Alex 1997-2012Alex 1997-2012
Alex 1997-2012
alex199729
 
Resumen ley de emprendedores
Resumen ley de emprendedoresResumen ley de emprendedores
Resumen ley de emprendedores
BufeteFFiscal
 
Articulo de manejo de conflictos
Articulo de manejo de conflictosArticulo de manejo de conflictos
Articulo de manejo de conflictos
Arturo Zevallos
 
Social Media - Das gelobte Land für den Mittelstand?
Social Media - Das gelobte Land für den Mittelstand?Social Media - Das gelobte Land für den Mittelstand?
Social Media - Das gelobte Land für den Mittelstand?
Christian Rätsch
 
Proyecto lectoescritura yudis alvarez
Proyecto lectoescritura yudis alvarezProyecto lectoescritura yudis alvarez
Proyecto lectoescritura yudis alvarez
yudisjudith
 
Practica 3
Practica  3Practica  3
Practica 3
Robertogarita
 
Informatica aplicada
Informatica aplicadaInformatica aplicada
Informatica aplicada
cristiangonsalez
 
Las reinas de las tartas
Las reinas de las tartasLas reinas de las tartas
Las reinas de las tartas
bubucela85
 
Thomas Brunner, agricultural company "Agro Plus 2006"
Thomas Brunner, agricultural company "Agro Plus 2006"Thomas Brunner, agricultural company "Agro Plus 2006"
Thomas Brunner, agricultural company "Agro Plus 2006"
Maksym Kryvonis
 
Qué es la polinización
Qué es la polinizaciónQué es la polinización
Qué es la polinización
maestra maiteog
 
PUNTUACIÓN EN LA LENGUA CASTELLANA
PUNTUACIÓN EN LA LENGUA CASTELLANAPUNTUACIÓN EN LA LENGUA CASTELLANA
PUNTUACIÓN EN LA LENGUA CASTELLANA
UNIVERSIDAD PARA EL DESARROLLO ANDINO
 
Práctica 9
Práctica 9Práctica 9
Práctica 9
Robertogarita
 
Big Data für Verlage
Big Data für VerlageBig Data für Verlage
Big Data für Verlage
Fabian Kern
 
Mecanica clasic
Mecanica clasicMecanica clasic
Mecanica clasic
Marielena Garcia
 
Práctica 7
Práctica 7Práctica 7
Práctica 7
Robertogarita
 
Personalpronomen und reflexivepronomen
Personalpronomen und reflexivepronomenPersonalpronomen und reflexivepronomen
Personalpronomen und reflexivepronomen
Vanessa Madeira
 
Trabajo
TrabajoTrabajo
Paso a paso dj informativa cuatrimestral monotributo
Paso a paso dj informativa cuatrimestral monotributoPaso a paso dj informativa cuatrimestral monotributo
Paso a paso dj informativa cuatrimestral monotributo
Ignacio Barrios
 

Andere mochten auch (20)

Ach... Och...
Ach... Och...Ach... Och...
Ach... Och...
 
Alex 1997-2012
Alex 1997-2012Alex 1997-2012
Alex 1997-2012
 
Resumen ley de emprendedores
Resumen ley de emprendedoresResumen ley de emprendedores
Resumen ley de emprendedores
 
Articulo de manejo de conflictos
Articulo de manejo de conflictosArticulo de manejo de conflictos
Articulo de manejo de conflictos
 
Social Media - Das gelobte Land für den Mittelstand?
Social Media - Das gelobte Land für den Mittelstand?Social Media - Das gelobte Land für den Mittelstand?
Social Media - Das gelobte Land für den Mittelstand?
 
Proyecto lectoescritura yudis alvarez
Proyecto lectoescritura yudis alvarezProyecto lectoescritura yudis alvarez
Proyecto lectoescritura yudis alvarez
 
Practica 3
Practica  3Practica  3
Practica 3
 
Informatica aplicada
Informatica aplicadaInformatica aplicada
Informatica aplicada
 
Las reinas de las tartas
Las reinas de las tartasLas reinas de las tartas
Las reinas de las tartas
 
Thomas Brunner, agricultural company "Agro Plus 2006"
Thomas Brunner, agricultural company "Agro Plus 2006"Thomas Brunner, agricultural company "Agro Plus 2006"
Thomas Brunner, agricultural company "Agro Plus 2006"
 
Qué es la polinización
Qué es la polinizaciónQué es la polinización
Qué es la polinización
 
PUNTUACIÓN EN LA LENGUA CASTELLANA
PUNTUACIÓN EN LA LENGUA CASTELLANAPUNTUACIÓN EN LA LENGUA CASTELLANA
PUNTUACIÓN EN LA LENGUA CASTELLANA
 
Práctica 9
Práctica 9Práctica 9
Práctica 9
 
Big Data für Verlage
Big Data für VerlageBig Data für Verlage
Big Data für Verlage
 
Elena1
Elena1Elena1
Elena1
 
Mecanica clasic
Mecanica clasicMecanica clasic
Mecanica clasic
 
Práctica 7
Práctica 7Práctica 7
Práctica 7
 
Personalpronomen und reflexivepronomen
Personalpronomen und reflexivepronomenPersonalpronomen und reflexivepronomen
Personalpronomen und reflexivepronomen
 
Trabajo
TrabajoTrabajo
Trabajo
 
Paso a paso dj informativa cuatrimestral monotributo
Paso a paso dj informativa cuatrimestral monotributoPaso a paso dj informativa cuatrimestral monotributo
Paso a paso dj informativa cuatrimestral monotributo
 

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

Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
Eric Eggert
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Eric Eggert
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
Nico Steiner
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
DACHNUG50 Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Domino REST API - Konzepte und Hintergruende.pdfDACHNUG50 Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Domino REST API - Konzepte und Hintergruende.pdf
DNUG e.V.
 
skilllocation Foliensatz zu Microsoft Azure
skilllocation Foliensatz zu Microsoft Azureskilllocation Foliensatz zu Microsoft Azure
skilllocation Foliensatz zu Microsoft Azure
Carola Pantenburg
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
Ulrich Krause
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Boost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerBoost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with Docker
Steven Grzbielok
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
Claus Brell
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
DNUG e.V.
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
DACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdfDACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdf
DNUG e.V.
 
Token statt Cookies dank JWT - #ETKA16
Token statt Cookies dank JWT - #ETKA16Token statt Cookies dank JWT - #ETKA16
Token statt Cookies dank JWT - #ETKA16
Markus Schlichting
 
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
DNUG e.V.
 
Nutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise WikisNutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise Wikis
punkt. netServices
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft AG
 

Ähnlich wie new Html5 features and browser compatibility, Stand der Standardisierung, Überblick, Browserkompabilität (20)

Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
DACHNUG50 Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Domino REST API - Konzepte und Hintergruende.pdfDACHNUG50 Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Domino REST API - Konzepte und Hintergruende.pdf
 
GWT
GWTGWT
GWT
 
skilllocation Foliensatz zu Microsoft Azure
skilllocation Foliensatz zu Microsoft Azureskilllocation Foliensatz zu Microsoft Azure
skilllocation Foliensatz zu Microsoft Azure
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Boost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with DockerBoost your APEX Deployment and Provisioning with Docker
Boost your APEX Deployment and Provisioning with Docker
 
Webtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer ÜberblickWebtechnologien - ein kurzer Überblick
Webtechnologien - ein kurzer Überblick
 
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 2 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
DACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdfDACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdf
DACHNUG50 Die Domino REST API - Konzepte und Hintergruende.pdf
 
Token statt Cookies dank JWT - #ETKA16
Token statt Cookies dank JWT - #ETKA16Token statt Cookies dank JWT - #ETKA16
Token statt Cookies dank JWT - #ETKA16
 
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
Slides (2) zu Teil 3 der Veranstaltungsreihe Anwendungsentwicklung mit Volt M...
 
Nutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise WikisNutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise Wikis
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 

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

Hinweis der Redaktion

  1. 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
  2. - 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
  3. 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
  4. Quellen: http://www.w3.org/Consortium/ http://www.w3.org/Consortium/mission#principles
  5. 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?
  6. 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
  7. 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/
  8. 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/
  9. 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
  10. Vergleich zur Doctype Version 4.01 Beispiel eines HTMLl 5 Dokuments. -> doctype etc. -> umsetzung der design principles
  11. Siehe Teilvortrag
  12. Siehe Teilvortrag
  13. Siehe Teilvortrag
  14. 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
  15. Browsersansicht und Beispiel einer Validierung des Cients vom vorigen Beispiel.
  16. 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/
  17. 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
  18. 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.
  19. 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.