2. Jens Grochtdreis
‣ Frontend developer
‣ 10 years work in agencies
‣ 12 years work in and for the web
‣ Founder of the Webkrauts
‣ Blogger
‣ Author for several developer-magazines
‣ technical book-editor for Galileo, O'Reilly, Pearson
12. ‣ text formats
‣ colours for fore- and background
‣ positioning
‣ floats
‣ images are needed for many solutions
‣ sometimes extra markup is needed for image-
based solutions
‣ transparence with side effects
18. New semantic elements
‣ On many occasions a replacement for DIV.
‣ Based on the actual practise on the web.
‣ No special functions in the browser. Just new
elements.
‣ WAI-ARIA inclusive!
19. New semantic
‣ fine structure of the content
‣ Browser takes on the headline hierarchy. On
complex pages this is great!
Outline-algorithm
24. ‣ Each content inside the <body>-element is
part of a "section". Sections can be nested.
‣ The <body>-element is the main section.
Further sections are implicitely (h1 - h6) or
explicitly defined.
‣ These elemens are defining explicitely a
section:
‣ <body>, <section>, <article>, <aside>,
<footer>, <header>, <nav>
25. Each section has its own
headings-hierarchy
https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document
26. the outline - uncertainty
from an MDN-article Online-Outliner-Tool
http://gsnedders.html5.org/outliner/process.py
27. Does this threaten us?
https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css#L426
29. ‣ HTML5-pages work in old browsers only via
javascript. This concerns mainly IE including
version 8.
http://code.google.com/p/html5shim/ http://www.modernizr.com/
38. What if a browser doesn‘t
know the new elements?
39. Then all new input-elements are
rendered as
<input type=“text“>
and attributes get ignored.
40. Built-in Validation
Opera 11.5 Mac
Firefox 5 Mac
Chrome 15
dev Mac
Chrome doesn‘t play well with scaled pages and validation.
41. What if a browser doesn‘t
know the validation?
‣ Ignore it! ( = Progressive enhancement)
‣ Load JS-alternatives with Modernizr
(http://modernizr.com)
‣ Use polyfills
‣ https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyfills
46. The pros
‣ Less decorative images are needed
‣ Less Javascript is needed.
‣ Animations and transitions via CSS are faster
than via Javascript.
‣ The sourcecode will be leaner and better
readable as HTML is rarely used for decorative
purpose.
51. ‣ Old IE (including version 8) don‘t understand
them!
‣ Those browser can be helped via Javascript.
‣ If those selections aren‘t „vital“ the use of
Javascript is okay.
80. ‣ Microsoft participates at the technical
improvement of the internet starting with IE9.
‣ For most techniques it doesn‘t matter if we
talk about IE6 or IE8.
‣ Some may be simulated by Javascript.
‣ Some may be simulated by IE-filters.
‣ Apart from that:
graceful degredation /
progressive enhancement
98. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
http://slideshare.net/Flocke669
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/