Frische Webtechniken Praktische HTML5- und CSS3-Beispiele Eric Eggert aka. @yatil — A-Tag 2010 — Wien
Slide 1
Slide 2
Ich bin Eric Eggert , @yatil. ericeggert.de yatil.de
Slide 3
HTML5?
Slide 4
1991 1995 1997 1997 1999 2000 2001 ? 2009 HTML Tags HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 XHTML 1 XHTML 1.1 XHTML 2 HTML5
Slide 5
Designprinzipien
Slide 6
XHTML 2.0 As generic XML as possible: if a facility exists in XML, try to use that rather than duplicating it. More usability: within the constraints of XML, try to make the language easy to write, and make the resulting documents easy to use . XHTML 2 Design Aims
Slide 7
HTML5 This document describes the set of guiding principles used by the HTML Working Group for the development of HTML5. The principles o ! er guidance for the design of HTML in the areas of compatibility , utility and interoperability . In case of conflict, consider users over authors over implementors over specifiers over theoretical purity . HTML Design Principles
Slide 8
HTML5 ist ein Verbund vieler unterschiedlicher Techniken: HTML5 ! HTML + JS APIs
Slide 9
CSS3?
Slide 10
CSS3 ist eine Sammlung von vielen unterschiedlichen Modulen: CSS3 ! Selectors + Media Queries + Multi Column Layout + Backgrounds & Borders + Color + Fonts + 2D Transformations
- 3D Transformations + Transitions + Animations
Slide 11
HTML5 und CSS3 sind keine abgeschlossenen Spezifikationen .
Slide 12
Die Implementation in Browsern ist noch lückenhaft.
Slide 13
HTML5 + CSS3 + More = NEWT
Slide 14
HTML5 + CSS3 + More = NEWT SVG, XHR2, Geolocation, Web Sockets, WOFF, Web DB, IndexedDB, WebGL
Slide 15
HTML5 Praxisbeispiele
Slide 16
Markup article • section • aside • nav • header • footer • details • figure
Slide 17
Internet Explorer < 9: html5shiv
<!--[if lt IE 9]> <script src=" http://html5shiv.googlecode.com/ svn/trunk/html5.js "> </script> <![endif]-->Slide 18
Ist HTML5 barrierefrei?
Slide 19
HTML5accessibility.com
Slide 20
HTML5 ist mindestens so barrierefrei wie HTML 4.01.
Slide 21
accessifyhtml5.js $(document).ready(function() { var fixes = { 'header.site': { 'role' : 'banner' }, 'footer.site': { 'role' : 'contentinfo' }, 'article' : { 'role' : 'article' }, 'aside' : { 'aside': 'complementary' }, 'nav' : { 'role' : 'navigation' }, 'output' : { 'aria-live': 'polite' }, 'section' : { 'role' : 'region' } }; $.each(fixes, function(index, item) { $(index).attr(item); }); }); ya.tl/accessifyhtml5
Slide 22
Struktur-Algorithmus
Slide 23
<section>
<h1>News</h1>
<article>
<h1>Neuigkeit 1</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
<article>
<h1>Neuigkeit 2</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
</section>
Slide 24
<section>
<h1>News</h1>
<article>
<h1>Neuigkeit 1</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
<article>
<h1>Neuigkeit 2</h1>
<p>Lorem ipsum</p>
<footer>
<h1>Autor</h1>
<p>Max Mustermann</p>
</footer>
</article>
</section>
•
h1
News
•
h2
Neuigkeit 1
•
h3
Autor
•
h2
Neuigkeit 2
•
h3
Autor
Slide 25
HTML5 <audio>
Slide 26
<audio controls preload="auto">
<source src="audio.mp3" />
<source src="audio.oga" />
<a href="audio.mp3">MP3 herunterladen</a>
</audio>
•
controls
Kontrollelemente?
•
loop
Wiederholen?
•
autoplay
Losspielen?
•
preload
Vorladen?
Werte:
none
,
metadata
,
auto
Slide 27
Browser OGG MP3 WAV Firefox 3.6+ Safari 5+ Chrome 6+ Opera 10.5+ Internet Explorer 9+ ! ! ! ! ! ! ! ! ! !
Slide 28
Browserunterstützung ! Für den IE < 9 (und andere): Flash-Fallback mit HTML-Kontrollelementen
Slide 29
Slide 30
HTML5 <video>
Slide 31
<video poster="still.png" preload="none" controls>
<source src=" " type="video/mp4" /> <source src=" " type="video/ogg" /> <a class="source" href=" "> Download MP4 </a> </video> video.mp4 video.ogv video.mp4Slide 32
jMediaelement http://www.protofunc.com/jme/ demos/player-captions.html
Slide 33
Untertitelung
Slide 34
1 00:00:1,000 --> 00:00:5,951 This is a simple example for srt captions 2 00:00:7,166 --> 00:00:15,883 Simply use a srt-file and append: <a href="file.srt" class="track" data-enabled="true">My srt file</a> 3 00:00:16,000 --> 00:00:18,962 ... to your media element 4 00:00:21,999 --> 00:00:24,368 There are more options, we will explain soon. 5 00:00:24,999 --> 00:00:31,368 Try to be accessible and nice to your users :-)
Slide 35
Canvas
Slide 36
Canvas ist ein schwarzes Loch in Sachen Barrierefreiheit.
Slide 37
Shadow DOM
Slide 38
IE: exCanvas & CanvasText
Slide 39
Neue Formularelemente
Slide 40
Siehe Vortrag von Peter Minarik
Slide 41
Siehe Vortrag von Peter Minarik
Slide 42
accessifyhtml5.js $(document).ready(function() { var fixes = { 'header.site': { 'role' : 'banner' }, 'footer.site': { 'role' : 'contentinfo' }, 'article' : { 'role' : 'article' }, 'aside' : { 'aside': 'complementary' }, 'nav' : { 'role' : 'navigation' }, 'output' : { 'aria-live': 'polite' }, 'section' : { 'role' : 'region' } }; $.each(fixes, function(index, item) { $(index).attr(item); }); }); ya.tl/accessifyhtml5 , '[required]' : { 'aria-required': 'true' }
Slide 43
accessifyhtml5.js $(document).ready(function() { var fixes = { 'header.site': { 'role' : 'banner' }, 'footer.site': { 'role' : 'contentinfo' }, 'article' : { 'role' : 'article' }, 'aside' : { 'aside': 'complementary' }, 'nav' : { 'role' : 'navigation' }, 'output' : { 'aria-live': 'polite' }, 'section' : { 'role' : 'region' } }; $.each(fixes, function(index, item) { $(index).attr(item); }); }); ya.tl/accessifyhtml5 , '[required]' : { 'aria-required': 'true' }
Slide 44
accessifyhtml5.js $(document).ready(function() { var fixes = { 'header.site': { 'role' : 'banner' }, 'footer.site': { 'role' : 'contentinfo' }, 'article' : { 'role' : 'article' }, 'aside' : { 'aside': 'complementary' }, 'nav' : { 'role' : 'navigation' }, 'output' : { 'aria-live': 'polite' }, 'section' : { 'role' : 'region' } }; $.each(fixes, function(index, item) { $(index).attr(item); }); }); ya.tl/accessifyhtml5 , '[required]' : { 'aria-required': 'true' }
Slide 45
CSS-Demos
Slide 46
@font-face Einbindung von Schriftarten, die nicht auf dem Computer des Besuchers installiert sind.
Slide 47
Rounded Corners Gradients Box Shadow
Slide 48
Animationen: Transforms Transitions Animation
Slide 49
Danke für Ihre Aufmerksamkeit Twitter: @yatil
