SlideShare ist ein Scribd-Unternehmen logo
HTML5
http://www.flickr.com/photos/oslointhesummertime/99833154/


             Geschichte
HTML-Spezifikationen


• HTML 1, 2, 3(.2), 4(.01)
• XHTML 1 und 1.1
• XHTML2 Working Draft
  …Unruhe
http://www.flickr.com/photos/57185407@N00/2248435167/




XHTML2 = Elfenbeinturm?
WHATWG
Web Hypertext Application Technology Working Group
WHATWG

• gegründet 2004 von Mitarbeitern von Apple,
  Mozilla, Opera
• Bedenken wegen einseitiger Ausrichtung des
  W3C auf XHTML
• Vernachlässigung von HTML
• …und sonstigen Problemen die „normale“
  Webentwickler so haben
http://yatil.posterous.com/1092829
Probleme mit XHTML2
MAMA

• "Metadata Analysis and Mining Application" von Opera




      http://dev.opera.com/articles/view/mama-w3c-validator-research-2/#validated
„Only 4.13% of Webpages
        validate“
Tagsoup


<p><b>a<i>b</b>c</i><p>
XHTML als XML
XHTML als HTML
XHTML2 = Revolution




   http://www.flickr.com/photos/publicdomainphotos/3484107668/
HTML5 = Evolution




  http://www.flickr.com/photos/cpurrin1/2262636867/
(c) istockphoto.com/skodonnell




HTML5 – Design-Prinzipien
Design-Prinzipien

• Kompatibilität
• Fehlertoleranz
• Lösen von „echten“ Problemen
• „Universal Access“
• „Evolution – not Revolution“
HTML5 in der Praxis
HTML oder XHTML?


• HTML5 kann sowohl als HTML als auch als
  XHTML gesendet werden
• HTML/XHTML ist nur die Serialisierung
• DOM ist die Basis
Senden als XHTML

• Kein Doctype – nur XML-Prolog
• Namespace notwendig
  <html xmlns="http://www.w3.org/1999/xhtml">


• Muss als application/xhtml+xml oder
  application/xml    gesendet werden

• kein <noscript>-Element
Doctype - alt


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



<!DOCTYPE html>
Syntax

<DIV>Tags groß</DIV>
<div>Tags klein</div>

<input type=text>
<input type="text">
<input type="text" />


Freiheit…oder Chaos?
Zeichensatzangabe – alt


<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
Zeichensatzangabe – neu


<meta charset="utf-8">
Probleme mit HTML5

• IE (bis V8) produzieren DOM-Müll bei
  unbekannten Elementen
• führt u.a. dazu, dass CSS-Regeln mit
  unbekannten Elementen nicht greifen
• es gibt aber Hacks, um den IEs auf die
  „Sprünge zu helfen“
Keine Probleme


• …bei den neuen Attributen
• …bei den neuen Input-Elementen
• …mit dem neuen Doctype
…noch was nettes:

<a href="meinlink.html">
     <h1>Überschrift</h1>
     <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis ...
     </p>
</a>




          Links um Blockelemente
http://www.flickr.com/photos/brian-fitzgerald/418686654/




  Neue Features
Neue Strukturelemente




   http://html5doctor.com/designing-a-blog-with-html5/
Neue Strukturelemente




   http://html5doctor.com/designing-a-blog-with-html5/
<audio>


<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>
<audio>

<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>
<video>

<video src="video.ogv" controls poster="poster.jpg"
       width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>
<video>

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp"
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
Neue Input-Elemente




    http://shwetankdixit.com/testpages/webforms2demo.htm
SVG (integriert)
SVG


<svg xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"
    width="200px" height="100px">
    <circle cx="50" cy="50" r="30" style="stroke:none; fill:#ff0000;"/>
    <g transform="translate(100, 20) scale(1.65)">
         <polygon points="36 25, 25 36, 11 36, 0 25,
             0 11, 11 0, 25 0, 36 11"
             style="stroke:none; fill:#0000ff;" />
    </g>
    <rect x="60" y="20" height="60" width="60"
         style="stroke:none; fill:#00ff00; fill-opacity: 0.5;" />
</svg>
http://www.flickr.com/photos/snugglepup/4091786974/




         Canvas
einfache 2D-Elemente
einfache 2D-Elemente



<canvas width="200" height="100" id="simpleCanvas"
         style="border: 1px solid black">
    <p>
         Sorry, but your browser does not support
         <code>&lt;canvas&gt;</code> :(
    </p>
</canvas>
einfache 2D-Elemente
function drawSimpleCanvas() {
  var canvas = document.getElementById("simpleCanvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.beginPath(); // the circle
    ctx.fillStyle = "#ff0000";
    ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.save();

    // move and resize the octagon
    ctx.translate(100, 20);
    ctx.scale(1.65, 1.65);
Canvas kann was




     http://www.benjoffe.com/code/demos/canvascape/textures
Webstorage/Webdatabase
http://webkit.org/demos/sticky-notes/index.html
Offline-
 Applikationen
1. SQL-basierte
   Datenbank („Web
   Databases“)
2. Offline HTTP-Cache
   („Cache-Manifest“)
GeoLocation




http://merged.ca/iphone/html5-geolocation
Fragen? Fragen!
Danke für die Aufmerksamkeit




                                     Stefan Walter
Diese Präsentation steht unter der   stefan@hessendscher.de
Attribution-Share Alike 3.0          twitter.com/hessendscher

Weitere ähnliche Inhalte

Ähnlich wie HTML5

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.2010Patrick Lauke
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
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
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
kkramhoeft
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
SEARCH ONE
 
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im ProjektalltagFür Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
djesse
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
felixnagel
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Tomas Caspers
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
Francesco Schwarz
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
Mario Heiderich
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 

Ähnlich wie HTML5 (20)

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
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
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, ...
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im ProjektalltagFür Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
 
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen UmfeldBarrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
I thought you were my friend!
I thought you were my friend!I thought you were my friend!
I thought you were my friend!
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 

HTML5