HTML/CSS-Validierung in Zeiten von HTML5

1,098 views
911 views

Published on

Warum Validieren nicht vorm eigenen Denken schützt und wieso wir unseren Kunden erklären müssen, dass ein Validator nur ein Werkzeug ist, dessen Ausgabe zu interpretieren ist. Mit ein bisschen HTML5 und WordPress-Infos anbei ...

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,098
On SlideShare
0
From Embeds
0
Number of Embeds
271
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML/CSS-Validierung in Zeiten von HTML5

  1. 1. Die HTML/CSS-Validierung in den Zeiten von HTML5 WP Camp Berlin am 9.11.2013
  2. 2. WP Camp Berlin Torsten Landsiedel ➔ Moderator de.forums.wordpress.org/.com ➔ Validator der Übersetzungsdatei ➔ Co-Orga: WP Meetup Hamburg ➔ WordPress Freelancer ➔ @zodiac1978
  3. 3. WP Camp Berlin
  4. 4. WP Camp Berlin
  5. 5. WP Camp Berlin
  6. 6. Gute alte Zeiten ... WP Camp Berlin
  7. 7. … die Zukunft! WP Camp Berlin
  8. 8. WP Camp Berlin <section>, <article>, <nav>, <header>, <footer>, <aside> und <main> <audio> und <video> <input type“url/email/search“> ...
  9. 9. WP Camp Berlin <canvas>,<mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> oder <meter> ...
  10. 10. WP Camp Berlin
  11. 11. WP Camp Berlin Validierung ist unsinnig!
  12. 12. WP Camp Berlin <span style="cursor: pointer;" onclick=" javascript:window.open('http://www.google.de', 'Externer_Link','')">Link zu Google</span>
  13. 13. WP Camp Berlin Markup <span class=“red“>Roter Text</span> CSS .red { color: red; }
  14. 14. WP Camp Berlin Warum überhaupt Validierung?
  15. 15. WP Camp Berlin Caniuse.com
  16. 16. WP Camp Berlin https://developer.mozilla.org/de/
  17. 17. WP Camp Berlin http://www.webplatform.org/
  18. 18. WP Camp Berlin Das Problem
  19. 19. WP Camp Berlin Wie aussagekräftig ist eine Validierung?
  20. 20. WP Camp Berlin
  21. 21. WP Camp Berlin 90% der Fehler ... XHTML / HTML- Mix HTML4 / HTML5 – Mix Nicht maskierte „&“ (→ „&amp;“) ALT-Attribut nicht gesetzt
  22. 22. WP Camp Berlin
  23. 23. WP Camp Berlin Hersteller-Präfixe sind Warnings: -moz-webkit-ms-o-
  24. 24. WP Camp Berlin Browser-Hacks oder proprietäre Anweisungen: filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF);  zoom: 1;
  25. 25. WP Camp Berlin Validierung ist wichtig!
  26. 26. WP Camp Berlin
  27. 27. WP Camp Berlin
  28. 28. WP Camp Berlin
  29. 29. WP Camp Berlin
  30. 30. WP Camp Berlin
  31. 31. WP Camp Berlin Scheitern als Chance!
  32. 32. WP Camp Berlin Linkcheck, SEO-Check, Struktur-Check, HTML-Check, CSS-Check, … zu jedem erfolgreichen Projekt gehören Abschlusstests! Aus Fehlern lernen ...
  33. 33. WP Camp Berlin Beispiele für Validierungsfehler
  34. 34. WP Camp Berlin <meta http­equiv="X­UA­Compatible" content="IE=edge;chrome=1">
  35. 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. 36. WP Camp Berlin <hgroup> Wurde aus der HTML5-Spezifikation gestrichen.
  37. 37. WP Camp Berlin <hgroup> kann einfach durch <header> oder <div> ersetzt werden.
  38. 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. 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. 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. 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. 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. 43. WP Camp Berlin
  44. 44. WP Camp Berlin WordPress HTML5 beibringen!
  45. 45. WP Camp Berlin add_theme_support('html5',array('search­ form','comment­form','comment­list'));
  46. 46. WP Camp Berlin Was passiert bei der Suche? input type="search" placeholder="Suche &hellip;" class="search­submit" class="search­field"
  47. 47. WP Camp Berlin Was passiert beim Kommentarformular? novalidate input type="email" input type="url"
  48. 48. WP Camp Berlin Was passiert bei den Kommentarlisten? <article> (comment­body) <footer> (comment­meta)
  49. 49. WP Camp Berlin Achtung beim Ausprobieren! CSS-Anpassungen beachten! input[type=text] → input[type=email],input[type=url],  input[type=search], etc.
  50. 50. WP Camp Berlin Mache Abschlusstests deiner Webseiten! Lerne die Validatoren zu interpretieren! Nutze da HTML5, wo es breiten Browsersupport gibt!
  51. 51. WP Camp Berlin Fragen? © Spiderman-Bild by Jordan Sim http://creativecommons.org/licenses/by-nd/2.0/

×