Das Dokument behandelt die Bedeutung und die Herausforderungen der HTML/CSS-Validierung in HTML5, einschließlich gängiger Validierungsfehler und der Notwendigkeit von Abschlusstests für erfolgreiche Webprojekte. Es werden spezifische HTML5-Elemente und deren Verwendung vorgestellt sowie Anweisungen zur Deaktivierung von Inline-Styles in WordPress gegeben. Zusätzlich wird die Wichtigkeit des Lernens aus Fehlern und der Nutzung moderner Funktionen in der Webentwicklung betont.

1. Die HTML/CSS-Validierung in den
Zeiten von HTML5
WP Camp Berlin am 9.11.2013

2. WP Camp Berlin
Torsten Landsiedel
➔
Moderator de.forums.wordpress.org/.com
➔
Validator der Übersetzungsdatei
➔
Co-Orga: WP Meetup Hamburg
➔
WordPress Freelancer
➔
@zodiac1978

3. WP Camp Berlin

4. WP Camp Berlin

5. WP Camp Berlin

6. Gute alte Zeiten ...
WP Camp Berlin

7. … die Zukunft!
WP Camp Berlin

8. WP Camp Berlin
<section>, <article>, <nav>, <header>,
<footer>, <aside> und <main>
<audio> und <video>
<input type“url/email/search“>
...

9. WP Camp Berlin
<canvas>,<mark>, <figure>, <figcaption>,
<data>, <time>, <output>, <progress>
oder <meter>
...

10. WP Camp Berlin

11. WP Camp Berlin
Validierung ist unsinnig!

12. WP Camp Berlin
<span style="cursor: pointer;" onclick="
javascript:window.open('http://www.google.de',
'Externer_Link','')">Link zu Google</span>

13. WP Camp Berlin
Markup
<span class=“red“>Roter Text</span>
CSS
.red { color: red; }

14. WP Camp Berlin
Warum überhaupt Validierung?

15. WP Camp Berlin
Caniuse.com

16. WP Camp Berlin
https://developer.mozilla.org/de/

17. WP Camp Berlin
http://www.webplatform.org/

18. WP Camp Berlin
Das Problem

19. WP Camp Berlin
Wie aussagekräftig ist eine Validierung?

20. WP Camp Berlin

21. WP Camp Berlin
90% der Fehler ...
XHTML / HTML- Mix
HTML4 / HTML5 – Mix
Nicht maskierte „&“ (→ „&amp;“)
ALT-Attribut nicht gesetzt

22. WP Camp Berlin

23. WP Camp Berlin
Hersteller-Präfixe sind Warnings:
-moz-webkit-ms-o-

24. WP Camp Berlin
Browser-Hacks oder proprietäre
Anweisungen:
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF);
zoom: 1;

25. WP Camp Berlin
Validierung ist wichtig!

26. WP Camp Berlin

27. WP Camp Berlin

28. WP Camp Berlin

29. WP Camp Berlin

30. WP Camp Berlin

31. WP Camp Berlin
Scheitern als Chance!

32. WP Camp Berlin
Linkcheck, SEO-Check, Struktur-Check, HTML-Check, CSS-Check, …
zu jedem erfolgreichen Projekt gehören Abschlusstests!
Aus Fehlern lernen ...

33. WP Camp Berlin
Beispiele
für Validierungsfehler

34. WP Camp Berlin
<meta http­equiv="X­UA­Compatible" content="IE=edge;chrome=1">

35. WP Camp Berlin
Beim Apache füge diese Zeile zu deiner .htaccess hinzu:
Header set X­UA­Compatible "IE=edge"
Google Frame wird ab Januar 2014 nicht mehr fortgeführt.

36. WP Camp Berlin
<hgroup>
Wurde aus der HTML5-Spezifikation gestrichen.

37. WP Camp Berlin
<hgroup> kann einfach durch <header> oder <div>
ersetzt werden.

38. WP Camp Berlin
CSS lost in HTML
Beim Einbinden einer Galerie oder eines Videos (mit
dem neuen MediaElement.js-Player) baut WordPress
Inline-Styles mitten im HTML-Dokument ein.

39. WP Camp Berlin
Deaktivieren!
In der functions.php von Twenty Thirteen, Twenty Ten,
aber nicht Twenty Twelve und Twenty Eleven:
add_filter( 'use_default_gallery_style', '__return_false' );

40. WP Camp Berlin
Video!?
<link rel='stylesheet' id='mediaelement­css' href='http://example.de/wp­
includes/js/mediaelement/mediaelementplayer.min.css' type='text/css'
media='all' />
<link rel='stylesheet' id='wp­mediaelement­css' href='http://example.de/wp­
includes/js/mediaelement/wp­mediaelement.css' type='text/css' media='all' />

41. WP Camp Berlin
Inline-Style ist im HTML-Body nicht erlaubt, außer mit HTML5
und dem scoped Attribut!
http://html5doctor.com/the-scoped-attribute/
Aber nur in Firefox seit Version 23:
http://caniuse.com/#feat=style-scoped

42. WP Camp Berlin
iFrames
<iframe seamless="seamless">
Wird leider nicht von Firefox unterstützt …
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

43. WP Camp Berlin

44. WP Camp Berlin
WordPress HTML5 beibringen!

45. WP Camp Berlin
add_theme_support('html5',array('search­
form','comment­form','comment­list'));

46. WP Camp Berlin
Was passiert bei der Suche?
input type="search"
placeholder="Suche &hellip;"
class="search­submit"
class="search­field"

47. WP Camp Berlin
Was passiert beim Kommentarformular?
novalidate
input type="email"
input type="url"

48. WP Camp Berlin
Was passiert bei den Kommentarlisten?
<article> (comment­body)
<footer> (comment­meta)

49. WP Camp Berlin
Achtung beim Ausprobieren! CSS-Anpassungen beachten!
input[type=text]
→
input[type=email],input[type=url],
input[type=search], etc.

50. WP Camp Berlin
Mache Abschlusstests deiner Webseiten!
Lerne die Validatoren zu interpretieren!
Nutze da HTML5, wo es breiten Browsersupport gibt!

51. WP Camp Berlin
Fragen?
© Spiderman-Bild by Jordan Sim
http://creativecommons.org/licenses/by-nd/2.0/