Downloaded 17 times
![Internet Explorer < 9: html5shiv
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/
svn/trunk/html5.js">
</script>
<![endif]-->](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/85/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-17-320.jpg)
![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' }](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/85/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-42-320.jpg)
![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' }](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/85/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-43-320.jpg)
![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' }](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/85/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-44-320.jpg)
![Internet Explorer < 9: html5shiv
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/
svn/trunk/html5.js">
</script>
<![endif]-->](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/75/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-17-2048.jpg)
![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' }](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/75/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-42-2048.jpg)
![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' }](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/75/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-43-2048.jpg)
![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' }](https://image.slidesharecdn.com/atag2010-101105114829-phpapp01/75/Neue-aufregende-Web-Technologien-HTML5-CSS3-anhand-von-Praxisbeispielen-lernen-44-2048.jpg)
Uploaded byEric Eggert
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen lernen
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen lernen
- 1. Frische Webtechniken Praktische HTML5- und CSS3-Beispiele EricEggert aka. @yatil — A-Tag 2010 — Wien
- 2. Ich bin EricEggert, @yatil. ericeggert.de yatil.de
- 3.
- 4. 1991 1995 1997 1997 1999 2000 2001 ? 2009 HTML Tags HTML 2.0 HTML3.2 HTML 4.0 HTML 4.01 XHTML 1 XHTML 1.1 XHTML 2 HTML5
- 5.
- 6. XHTML 2.0 As genericXML 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
- 7. HTML5 This document describesthe set of guiding principles used by the HTML Working Group for the development of HTML5. The principles offer 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
- 8. HTML5 ist einVerbund vieler unterschiedlicher Techniken: HTML5 ≈ HTML + JS APIs
- 9.
- 10. CSS3 ist eineSammlung von vielen unterschiedlichen Modulen: CSS3 ≈ Selectors + Media Queries + Multi Column Layout + Backgrounds & Borders + Color + Fonts + 2D Transformations + 3D Transformations + Transitions + Animations
- 11. HTML5 und CSS3sind keine abgeschlossenen Spezifikationen.
- 12. Die Implementation inBrowsern ist noch lückenhaft.
- 13. HTML5 + CSS3+ More = NEWT
- 14. HTML5 + CSS3+ More = NEWT SVG, XHR2, Geolocation, Web Sockets, WOFF, Web DB, IndexedDB, WebGL
- 15.
- 16. Markup article • section • aside •nav • header • footer • details • figure
- 17. Internet Explorer <9: html5shiv <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/ svn/trunk/html5.js"> </script> <![endif]-->
- 18.
- 19.
- 20. HTML5 ist mindestensso barrierefrei wie HTML 4.01.
- 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
- 22.
- 23. <section> <h1>News</h1> <article> <h1>Neuigkeit 1</h1> <p>Lorem ipsum</p> <footer> <h1>Autor</h1> <p>MaxMustermann</p> </footer> </article> <article> <h1>Neuigkeit 2</h1> <p>Lorem ipsum</p> <footer> <h1>Autor</h1> <p>Max Mustermann</p> </footer> </article> </section>
- 24. <section> <h1>News</h1> <article> <h1>Neuigkeit 1</h1> <p>Lorem ipsum</p> <footer> <h1>Autor</h1> <p>MaxMustermann</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
- 25.
- 26. <audio controls preload="auto"> <sourcesrc="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
- 27. Browser OGG MP3WAV Firefox 3.6+ Safari 5+ Chrome 6+ Opera 10.5+ Internet Explorer 9+
- 28. Browserunterstützung Für den IE< 9 (und andere): Flash-Fallback mit HTML-Kontrollelementen
- 30.
- 31. <video poster="still.png" preload="none"controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogv" type="video/ogg" /> <a class="source" href="video.mp4"> Download MP4 </a> </video>
- 32.
- 33.
- 34. 1 00:00:1,000 --> 00:00:5,951 Thisis 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 :-)
- 35.
- 36. Canvas ist einschwarzes Loch in Sachen Barrierefreiheit.
- 37.
- 38. IE: exCanvas &CanvasText
- 39.
- 40. Siehe Vortrag vonPeter Minarik
- 41. Siehe Vortrag vonPeter Minarik
- 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' }
- 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' }
- 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' }
- 45.
- 46. @font-face Einbindung von Schriftarten,die nicht auf dem Computer des Besuchers installiert sind.
- 47.
- 48.
- 49.