Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen lernen
1 like2,296 views
![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)
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen lernen
- 1. Frische Webtechniken Praktische HTML5- und CSS3-Beispiele Eric Eggert aka. @yatil — A-Tag 2010 — Wien
- 2. Ich bin Eric Eggert, @yatil. ericeggert.de yatil.de
- 3. HTML5?
- 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
- 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
- 7. HTML5 This document describes the 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 ein Verbund vieler unterschiedlicher Techniken: HTML5 ≈ HTML + JS APIs
- 9. CSS3?
- 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
- 11. HTML5 und CSS3 sind keine abgeschlossenen Spezifikationen.
- 12. Die Implementation in Browsern ist noch lückenhaft.
- 13. HTML5 + CSS3 + More = NEWT
- 14. HTML5 + CSS3 + More = NEWT SVG, XHR2, Geolocation, Web Sockets, WOFF, Web DB, IndexedDB, WebGL
- 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]-->
- 20. HTML5 ist mindestens so 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
- 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>
- 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
- 25. HTML5 <audio>
- 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
- 27. Browser OGG MP3 WAV 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. HTML5 <video>
- 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>
- 33. Untertitelung
- 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 :-)
- 35. Canvas
- 36. Canvas ist ein schwarzes Loch in Sachen Barrierefreiheit.
- 37. Shadow DOM
- 38. IE: exCanvas & CanvasText
- 40. Siehe Vortrag von Peter Minarik
- 41. Siehe Vortrag von Peter 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. CSS-Demos
- 46. @font-face Einbindung von Schriftarten, die nicht auf dem Computer des Besuchers installiert sind.
- 49. Dankefür Ihre Aufmerksamkeit Twitter: @yatil