Frische Webtechniken: Praktische HTML5- und CSS3-Beispiele

Frische Webtechniken Praktische HTML5- und CSS3-Beispiele Eric Eggert aka. @yatil — A-Tag 2010 — Wien

Ich bin Eric Eggert , @yatil. ericeggert.de yatil.de

HTML5?

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

Designprinzipien

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

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

HTML5 ist ein Verbund vieler unterschiedlicher Techniken: HTML5 ! HTML + JS APIs

CSS3?

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

HTML5 und CSS3 sind keine abgeschlossenen Spezifikationen .

Die Implementation in Browsern ist noch lückenhaft.

HTML5 + CSS3 + More = NEWT

HTML5 + CSS3 + More = NEWT SVG, XHR2, Geolocation, Web Sockets, WOFF, Web DB, IndexedDB, WebGL

HTML5 Praxisbeispiele

Markup article • section • aside • nav • header • footer • details • figure

Internet Explorer < 9: html5shiv

Ist HTML5 barrierefrei?

HTML5accessibility.com

HTML5 ist mindestens so barrierefrei wie HTML 4.01.

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

Struktur-Algorithmus

<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>

<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

HTML5 <audio>

<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

Browser OGG MP3 WAV Firefox 3.6+ Safari 5+ Chrome 6+ Opera 10.5+ Internet Explorer 9+ ! ! ! ! ! ! ! ! ! !

Browserunterstützung ! Für den IE < 9 (und andere): Flash-Fallback mit HTML-Kontrollelementen

HTML5 <video>

<source src=" " type="video/mp4" /> <source src=" " type="video/ogg" /> <a class="source" href=" "> Download MP4 </a> </video> video.mp4 video.ogv video.mp4

jMediaelement http://www.protofunc.com/jme/ demos/player-captions.html

Untertitelung

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 :-)

Canvas

Canvas ist ein schwarzes Loch in Sachen Barrierefreiheit.

Shadow DOM

IE: exCanvas & CanvasText

Neue Formularelemente

Siehe Vortrag von Peter Minarik

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' }

CSS-Demos

@font-face Einbindung von Schriftarten, die nicht auf dem Computer des Besuchers installiert sind.

Rounded Corners Gradients Box Shadow

Animationen: Transforms Transitions Animation

Danke für Ihre Aufmerksamkeit Twitter: @yatil