3. World Wide Web Consortium Web Hypertext Application
Technology Working Group
Richtlinien für HTML 4.01
und XHTML (1.0, 1.1 + 2) Zusammenschluss von
Mitarbeitern bei Apple,
der Mozilla Foundation
und Opera.
4. Was ist an HTML5 anders?
Semantische Struktur
Audio und Video ohne Plugin
Neue Formulartypen mit Eingabeunterstützung
Inline SVG und MathML (XML-Elemente)
12. Audio und Video
Native Unterstützung, d.h. Videos können ohne
Plugin im Browser abgespielt werden.
Unterstütztes Video-Format je nach Browser
unterschiedlich.
Für ältere Browser benötigt man weiterhin ein Flash
als Fallback.
13. Audio und Video
Das <video>-Tag kann
mehrere Quellen auf-
nehmen.
Das <audio>-Tag
ebenfalls.
14. Audio und Video
Implementierung in modernen Browsern
Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0
(Safari 5, (Firefox 3.6+) (Opera ~10+) (IE9+)
Chrome 17)
video
audio
source
(Safari >= 5.1)
15. Formulare
Neue Typen für das <input>-Tag,
Neue Attribute, z.B.
zur Validierung der Eingabe von Mail-Adresse oder URLs,
für Pflichtfelder,
oder als Hinweistext.
19. Grafik
Canvas
Umgebung für die User-Eingabe von Bitmap-Grafiken,
Aktionen nur mit Unterstützung durch z.B. Javascript möglich
SVG – Scalable Vector Grafic
ist ein XML-Konstrukt,
das bereits seit Jahren existiert,
wird in HTML5 nativ unterstützt und
bereits in modernen Browsern angezeigt.
20. Canvas + SVG
Implementierung in modernen Browsern
Typ Webkit 5.3 Gecko 1.9.1 Presto 2.5 Trident 5.0
(Safari 5, (Firefox 3.6+) (Opera 11.6+) (IE9+)
Chrome 17)
Canvas * (teilweise) (teilweise) (teilweise) (teilweise)
SVG (teilweise) (teilweise) (teilweise) (teilweise)
* z.B. wird WebGL (3D) nur in Chrome ab Version 18 vollständig unterstützt
21. Javascript mit HTML5
Fallback für ältere Browser das Javascript von
Remy Sharp:
<!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Muss im <head>-Bereich der Seite stehen!
24. Bisher:
ein oder mehrere Hintergrundbilder und verschachtelte Divs
Schlagschatten
(box-shadow)
25. Bisher:
Hintergrundverlauf als Kachel oder Vollbild
(belegte bereits 1 Container-Hintergrund)
Farbverläufe
(gradient)
26. Bisher:
Nur 1 Hintergrundbild pro Container möglich
Mehrfache
Hintergrundbilder
Merke:
Die Angabe “background-color”
muss am Ende stehen, um nicht
von “url” überschrieben zu
werden.
31. CSS3-Elemente
Implementierung in modernen Browsern
Typ Webkit (Safari ~5+, Gecko Presto Trident
Chrome ~4+) (Firefox 4+) (Opera ) (IE9+)
column
>= Safari 5 u. >= 3.6 teilweise >= 11.6 >= 10
Chrome 17 teilweise mit -moz
mit -webkit
transition
>= Safari 5 u. >= 9 mit -moz >= 11.6 mit -o >= 10
Chrome 17 mit - mit -ms
webkit
transform
>= Safari 5 u. >= 10 mit -moz Keine Angaben >= 10
Chrome 17 mit - mit -ms
webkit
32. CSS Media Queries
CSS-Angaben (Layout) gemäß Bildschirmbreite
anpassen:
Einbindung als externe CSS-Datei:
<link rel="stylesheet" media="screen and (max-width: 1024px)"
href="small.css">
oder inline per @media:
@media:@media screen and (max-width : 1024px)
{ hier stehen die CSS-Angaben}
33. CSS Media Queries
Skalierbarkeit beeinflussen:
(Angabe im <head>-Bereich)
Ohne Zoom beim Start:
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Mit Zoom beim Start:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
35. Einbindung ins CSS:
font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;
Webfonts als Link
Steht im <head>-Tag
der HTML-Datei.
Online-Fonts unter
http://www.google.com/webfonts
36. Einbindung ins CSS:
font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;
Webfonts mit
@import
Steht im <head>-Tag
der HTML-Datei.
37. Einbindung ins CSS:
font-family: Droid Sans, Verdana,Arial,Helvetica,sans-serif;
Webfonts mit
@font-face
Steht in der CSS-Datei
unbedingt am Anfang.
Webfont-Pakete unter
http://www.fontsquirrel.com/
39. Barrieren abbauen mit WAI-ARIA Rollen
ARIA = Accessible Rich Internet Applications
WAI = Web Accessibility Initiative
Ergänzung der HTML5-Semantik (auch in HTML4.01/XHTML)
um beschreibende Zusatzinformationen als Information für
Screenreader und assistive Techniken – auch für Suchmaschinen
Teilbereich => Landmark-Rollen
Deutsche Übersetzung der Richtlinie
http://www.hessendscher.de/wai-aria/