WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

96
EB RAUTS Größer. Schneller. Weiter. Best Practices in JavaScript und CSS | Dirk Jesse und Nicolai Schwarz

description

Professionelles Arbeiten bedeutet auch, effektiv zu arbeiten. Effektivität bedeutet für Webentwickler, nicht immer das Rad neu erfinden zu wollen oder müssen. Nicolai Schwarz und Dirk Jesse zeigen Best Practices, die bei der Entwicklung eigener Seiten helfen, schneller und besser mit der Aufgabe fertig zu werden. Vortrag auf der WebTech 2009 in Karlsruhe

Transcript of WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Page 1: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

EB RAUTS

Größer. Schneller. Weiter.Best Practices in JavaScript und CSS

| Dirk Jesse und Nicolai Schwarz

Page 2: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Kommentierte Fassung

Best Practices in JavaScript und CSSVortrag auf der WebTech 2009 in Karlruhe

In diesem Vortrag präsentieren wir ein paar kleine Tipps und Tricks, die vielleicht noch nicht alle Leute kennen. Oft geht es darum, die Inhalte für Screenreader oder Tastaturnutzer sinnvoll aufzubereiten. Viele der Kapitel lassen sich recht einfach bei allen Projekten umsetzen.

Alle Links sind gesammelt auf delicious zu finden: www.delicious.com/textformer/webtech09

Wer den Vortrag gehört hat, kann ihn gerne hier kommentieren:http://joind.in/talk/view/1120

Page 3: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

http://www.webkrauts.de

Page 4: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

CSS-Reset

Page 5: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }

table { border-collapse:collapse; border-spacing:0; }

fieldset,img { border:0; }

address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }

ol,ul { list-style:none; }

caption,th { text-align:left; }

h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }

q:before,q:after { content:’’; } abbr,acronym { border:0; }

http://developer.yahoo.com/yui/reset/

Page 6: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }ol, ul { list-style: none; }/* tables still need ‘cellspacing=”0”’ in the markup */table { border-collapse: separate; border-spacing: 0; }caption, th, td { text-align: left; font-weight: normal; }blockquote:before, blockquote:after, q:before, q:after { content: “”; }blockquote, q { quotes: “” “”; }

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Page 7: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }ol, ul { list-style: none; }/* tables still need ‘cellspacing=”0”’ in the markup */table { border-collapse: separate; border-spacing: 0; }caption, th, td { text-align: left; font-weight: normal; }blockquote:before, blockquote:after, q:before, q:after { content: “”; }blockquote, q { quotes: “” “”; }

Page 8: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

http://people.opera.com/patrickl/experiments/keyboard/test

Page 9: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 10: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

{ overflow: hidden; } verhindert den langen Rahmen links heraus.

Page 11: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Prüfen, ob die Reset-Anweisungen sinnvoll sind

:focus { outline: 0; }

unterdrückt die Outline für alle User; sowohl beim Draufklicken mit der Maus als auch bei Nutzung der Tastatur

:active { outline: 0; }

unterdrückt die Outline beim Draufklicken mit der MausNutzer mit Tastatur sehen nun aber den fokussierten Link mit Outline

Page 12: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

CSS-Reset

Worum geht‘s?

Reset-Style-Sheets sind ein guter Start für das eigene Design. Dabei sollten wir die Anweisungen aber nicht alle unreflektiert übernehmen. Das Style-Sheet von Eric Meyer setzt zum Beispiel die outline beim focus auf Null. Designer mögen es nicht unbedingt, wenn beim Klick auf einen grafischen Link diese Outline erscheint, die Anweisung verhindert das.Aber die Outline ist dann hilfreich, wenn Besucher die Webseite per Tastatur navigieren. Wenn ein Webworker vergisst, die Zustände für den :focus anzulegen und durch das Reset die outline auf Null steht, bekommt der Tastatur-Nutzer gar keine Rückmeldung auf welchem Link der Fokus gerade steht.

Statt den :focus auf Null zu setzen, ist es besser, nur :active auf Null zu setzen. Maus-Nutzer sehen dann keine Outline, aber Tastatur-Nutzer sehen die Outline.

Page 13: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Border für die Navigation

Page 14: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

http://www.webkrauts.de/2008/07/08/sonnenseiten-barrierefreiheit/

Page 15: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 16: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 17: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

/* Hauptnavigation 2. Level */

#hauptnavigation ul li ul li a {border-left: 5px solid #FFF;padding-left: 40px;}

#hauptnavigation ul li ul li a:hover,#hauptnavigation ul li ul li a:focus,#hauptnavigation ul li ul li a:active {border-left: 10px solid #FFF;padding-left: 35px;background: url(‘http://www.landtag.nrw.de/portal/CPMO/images/ icon_ebene2_pfeil.gif’) no-repeat 18px 2px #F4F8FB;}

Page 18: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Border für die Navigation

Worum geht‘s?

Es gibt einige Nutzer, die ihren Browser so einstellen, dass die Farbeinstellungen von Webseiten igno-riert werden. Es werden nur rudimentäre Farben, in diesem Beispiel schwarz, weiß und blau, genutzt. Normale Farbänderungen bei :hover und :focus werden hier nicht mehr angezeigt.

Ein einfacher Trick sorgt dafür, dass auch Nutzer mit diesen Einstellungen :hover und :focus nutzen können. Der Rand (border) ist hier zunächst 5px breit, bei :hover und :focus aber 10px breit. Da der Rand die Farbe des Links annimmt, kann der Nutzer auch bei diesen Einstellungen :hover und :focus wahrnehmen.

Page 19: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Inhalte verstecken

Page 20: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

CSS für versteckte Inhalte

position:absolute;left: -10000px;top: auto;width: 1px;height: 1px;overflow: hidden;

Für fokusierbare Elemente wie Links oder Formulare

http://webaim.org/blog/hiding-content-for-screen-readers/

Page 21: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Inhalte verstecken

Worum geht‘s?

Manchmal werden Inhalte für Screeneader auf der Webseite für sehende Nutzer versteckt. Sie werden einfach aus dem sichtbaren Feld verschoben. Wer die Seite per Tatstatur navigiert, kommt aber den-noch an diese Inhalte (wenn sie fokusierbar sind). Ist der Inhalt dabei nach oben verschoben, springt die Ansicht auch ganz nach oben. Besser ist es, solche Inhalte nur nach links zu verschieben. Der Bild-schirm bleibt dann auf derselben Höhe stehen – und springt nicht mehr wild nach oben und unten.

Page 22: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks einblenden

Page 23: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 24: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<body id=”top”> <div id=”skip”> <p class=”skiplink”><a href=”#textsprung”>Sprung zum Inhalt</a>.</p> </div>

Page 25: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 26: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

.skiplink a:link, .skiplink a:visited { position: absolute; width: 1px; height: 1px; left: -100px; top: -100px;}

.skiplink a:hover, .skiplink a:focus, .skiplink a:active { display: block; position: absolute; left: 290px; top: 3px; width: 200px; height: auto !important;}

Page 27: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 28: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks einblenden

Worum geht‘s?

Skiplinks für Screenreader sollten auch für Tastatur-Nutzer zumindest kurz eingeblendet werden.Nämlich dann, wenn die Skiplinks auch den Fokus haben. Dazu am besten eine geeignete Stelle im Design vorsehen, um die Skipinks einzublenden.

Page 29: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Bessere Skiplinks

Page 30: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks

Techniques for WCAG 2.0G1: Adding a link at the top of each page that goes directly to the main content area

Test Procedure• Check that a link is the first focusable control on the Web page.• Check that the description of the link communicates that it links to the

main content.• Check that the link is either always visible or visible when it has keyboard

focus.• Check that activating the link moves the focus to the main content.• Check that after activating the link, the keyboard focus has moved to the

main content.

Expected Results•All checks above are true.

http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G1

Page 31: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks – Integriert

Page 32: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks – Overlay

Page 33: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks – Overlay

<body><!--skiplink navigation--><ul id=”skiplinks”> <li><a class=”skip” href=”#nav”>Skip tonavigation(Press Enter).</a></li> <li><a class=”skip” href=”#content”>Skip tomaincontent(Press Enter).</a></li></ul>

...</body>

Page 34: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Skiplinks & Webkit-Browser

Problem: Tastaturfocus wird nicht verschoben.Lösung: Korrektur per JavaScript

var webkitFocusfix= { init: function() { var is_webkit = navigator.userAgent.toLowerCase().indexOf(‘webkit’) > -1; var i = 0; var skiplinks = [ ]; if (is_webkit) { if (document.getElementsByClassName!== undefined) { skiplinks = document.getElementsByClassName(‘skip’); for (i=0; i<skiplinks.length; i++) { var target= skiplinks[i].href.substr(skiplinks[i].href.indexOf(‘#’)+1); var targetElement= document.getElementById(target); targetElement.href= ‘#’+target; targetElement.setAttribute(“tabindex”, “0”); skiplinks[i].setAttribute(“onclick”,”document.getElementById(‘”+target+”’).focus();”);} } } } };

webkitFocusfix.init();

Page 35: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Bessere Skiplinks

Worum geht‘s?

Nicht immer lässt sich für die einzublendenden Skiplinks ein geeigneter Platz finden. Insbesondere bei grafisch anspruchsvollen Layouts kann daneben auch schwierig sein, Skiplinks gut sichtbar in Szene zu setzen.

Eine Alternative ist daher, die Skiplinks per Overlay über dem Layout einzublenden. Auf diese Weise kann man Größe, Form und Farbe relativ unabhängig festlegen und somit absichern, dass diese von Nutzern auch wahrgenommen werden.

Ein weiterer Punkt betrifft den Tabfocus. Dieser sollte beim Benutzen eines Skiplinks ebenfalls dem Ziel folgen (siehe WCAG 2.0 Testkriterien). In Webkit-Browsern (Safari, Chrome) passiert jedoch genau das nicht. Diesem Problem kann mit etwas JavaScript begegnet werden.

Page 36: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Margin Collapsing

Page 37: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Margin Collapsing

Beschreibung• Betrifft Elemente im normalen Elementfluss• Betrifft nur vertikale Randabstände• „Der größere gewinnt …“

Unterbrechung durch:• Containing Float Techniken: float, overflow:auto|hidden, display:table• CSS-Eigenschaft: border• Internet Explorer: hasLayout+ padding/border

Page 38: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<h1>HeadingContent</h1><p>Paragraph content</p>

h1 { margin: 0 0 20px 0; background: #0335;}

p { margin: 10px 0 0 0; background: #0335;}

Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no-numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

20px

Page 39: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<h1>HeadingContent</h1><div><p>Paragraph content</p></div>

h1 { margin: 0; background: #335; }

div { margin: 40px 0 25px 0; background: #335; }

p { margin: 10px 0 0 0; }

40pxHeading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no-numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

Page 40: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<h1>HeadingContent</h1><div><p>Paragraph content</p></div>

h1 { margin: 0; background: #335; }

div { margin: 40px 0 25px 0; background: #335; border-top: 1px solid #ccf; }

p { margin: 10px 0 0 0; }

40px

10px

Heading

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam no-numy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

Page 41: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Margin Collapsing

Worum geht‘s?

Das Margin Collapsing ist eine der Verhaltensweisen von CSS, mit denen insbesondere Anfänger zunächst so ihre Schwierigkeiten haben. Vertikale Margins aufeinander folgender Elemente werden nicht einfach addiert, sondern überlagern sich. Kurz gesagt, gilt die Regel: „Der Größere gewinnt!”.

Speziell bei verschachtelten Elementen ist der Überblick und die Ursache für ungewöhnliche Abstände im Layout nicht immer einfach zu erkennen. Hier werden deshalb kurz einige CSS-Methoden vorgestellt, mit denen das Margin-Collapsing unterbunden werden kann.

Page 42: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Alphatransparenz

Page 43: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Alphatranzparenz: Lösungen

Variante: rgba()

Eric Eggert - Cross-Browser rgba()http://yatil.de/Weblog/cross-browser-rgba

Variante: opacity

Transparente Hintergründe mit CSShttp://www.highresolution.info/web-log/entry/transparente_hintergruen-de_mit_css/

Page 44: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Alphatransparente Hintergründe

CSS 3: rgba()

• Moderne Browser (FF3+, Safari 4+, Opera 10+) background-color: rgb(255,255,255); /* Fallback */ background-color: rgba(255,255,255,.3);

• Internet Explorer 6+ background-color: transparent\9; /* Fallback Reset */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFFFFFF,end

Colorstr=#4CFFFFFF); zoom:1; /* activatehasLayout*/

Page 45: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Alphatransparenz

Worum geht‘s?

Alphatransparente Hintergründe sind immer öfter gefragt in modernen Layouts. Bisher waren diese Effekte crossbrowser nur über alphatransparente PNG-Grafiken oder verschachtelte Elemente und der CSS-Eigenschaft opacity möglich. Diese CSS-Lösung bedingt jedoch zusätzliche Elemente rein zu Präsentationszwecken.Mit der Ankunft von Opera 10 und dessen erweiterter CSS3-Unterstützung eröffnet sich mit der CSS3-Eigenschaft rgba() eine weitere, sehr einfach anzuwendende Methode, um diesen Transparenz-Effekt zu erzeugen. Und auch im Internet-Explorer kann mit einem kleinen Workaround ein identischer Effekt - rein auf CSS-Basis - erzeugt werden.

Die rgba() Methode funktioniert crossbrowser und ist eine echte Alternative zum Einsatz von PNG-Grafiken.

Page 46: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Bilder mit Unterzeilen

Page 47: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 48: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<dl class=”bildUnterschrift right-Float clear”>

<dt><a href=”http://ais.badische-zeitung.de/pi-ece/01/56/f5/d1/22476241.jpg” class=”nyroModal” target=”_blank” title=”&#8222;Er heißt Big Mac, ...”><img src=”http://ais.ba-dische-zeitung.de/piece/01/56/f5/d1/22476241-p-349_261.jpg” alt=”” /></a></dt>

<dd>&#8222;Er heißt Big Mac, ...</dd>

</dl>

Page 49: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 50: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<div class=”photo right”>

<img src=”http://pix.sueddeut-sche.de/politik/173/494508/spd80-1258300472.jpg” width=”180” height=”180” alt=”SPD Parteitag in Dresden” title=”SPD Parteitag in Dresden” border=”0”>

<p>Will seiner Partei das Den-ken in veralteten Kategorien ab-gewöhnen: Sigmar Gabriel, der ebenso sprachmächtige wie schil-lernde Vorsitzende. (<cite>Foto: AP</cite>)</p>

</div>

Page 51: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<div> <img /> <p>Untertitel</p></div>

Noch nicht ideal: Ein Screenreader würde Bild und Untertitel hier als zweiunterschiedliche Blöcke behandeln.

<div> <p> <img /> <span>Untertitel</span> </p></div>

Best Practice: Ein Screenreader sieht Bild und Untertitel nun als Einheit an.

Page 52: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 53: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

[caption id=”attachment_637” align=”alignnone” width=”307” caption=”WebTech-Logo”]<img src=”http://www.webkrauts.de/wp-con-tent/uploads/2009/10/webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307” height=”81” class=”size-full wp-image-637” />[/caption]

Page 54: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

[caption id=”attachment_637” align=”alignnone” width=”307” caption=”WebTech-Logo”]<img src=”http://www.webkrauts.de/wp-con-tent/uploads/2009/10/webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307” height=”81” class=”size-full wp-image-637” />[/caption]

<div id=”attachment_637” class=”wp-caption alignnone” style=”width: 317px”> <img src=”http://www.webkrauts.de/wp-content/uploads/2009/10/ webtech.png” alt=”WebTech-Logo” title=”webtech” width=”307” height=”81” class=”size-full wp-image-637” /> <p class=”wp-caption-text”>WebTech-Logo</p></div>

Page 55: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Bilder mit Unterzeilen

Worum geht‘s?

Die derzeit beste Lösung für Bilder mit Unterzeilen steht auf Seite 51. Die Frage ist, wie einfach der WYSIWYG-Editor eingerichtet werden kann, um diese Struktur zu erzeugen. Alternativ kann man statt des span auch <em> oder <strong> nutzen, wenn diese Elemente einfacher per Editor handhabbar sind.

Noch besser ist vielleicht ein Zwischen-Code wie er etwa bei WordPress erzeugt wird. Bei der Ausgabe kann dieser Code dann durch den gewünschten HTMl-Code ersetzt werden. Solch ein Filter hat Vor-teile, wenn sich irgendwann mal ein besserer Code für Bilder mit Unterzeile ergibt. Zum Beispiel falls in HTML5 ein eigenes Element (figure) dafür vorgesehen sein wollte. In diesem Fall müsste der Admin nur den Ausgabe-Filter umschreiben, schon werden alle Bilder mit Unterzeile im neuen Code darge-stellt.

Page 56: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

HTML Purifier

Page 57: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Zum Beispiel: Import aus Word

<h1 class=”MsoNormal” style=”text-align: center; line-height: normal;margin: 0cm 0cm 0pt;”><span style=”font-family:&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;mso-ansi-language: DE;”>PatientensymposiumNetzhautdegenerationen</span></h1><h1 class=”MsoNormal” style=”text-align:center; line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family:&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;mso-ansi-language: DE;”>&nbsp;</span><span style=”font-family:&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;mso-ansi-language: DE;”>Einblicke - Ausblicke</span></h1><pclass=”MsoNormal” style=”line-height: normal; margin: 0cm 0cm 0pt;”><spanstyle=”font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size:12pt; mso-ansi-language: DE;”>&nbsp;</span></p><h2 class=”MsoNormal”style=”line-height: normal; margin: 0cm 0cm 0pt;”><span style=”font-family:&quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;mso-ansi-language: DE;”>Moderation</span>...

Page 58: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

http://htmlpurifier.org

Page 59: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<h1 class=””MsoNormal””> <span>Patientensymposium Netzhautdegenerationen</span></h1><h1 class=””MsoNormal””> <span> </span> <span>Einblicke - Ausblicke</span></h1><p class=””MsoNormal””> <span> </span></p><h2 class=””MsoNormal””> <span>Moderation</span></h2>

Ergebnis ohne weitere Einstellungen. (die „doppelten“ Anführungszeichen sind nicht wirklich doppelt, das liegt an der gewählten Schrift)

Page 60: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

<h1> <span>Patientensymposium Netzhautdegenerationen</span></h1><h1> <span>Einblicke - Ausblicke</span></h1><h2> <span>Moderation</span></h2>

Page 61: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

HTML Purifier

• beseitigt bösartigen Code• fehlende End-Tags werden geschlossen• falsch verschachtelte Elemente werden repariert• veraltetete Tags werden konvertiert• CSS wird validiert• Leere Elemente können ausgefiltert werden• Es lässt sich konfigurieren, welche Elemente und Attribute erlaubt sind• Ebenso lassen sich etwa ids festlegen, die nicht erlaubt sind

Page 62: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

HTML Purifier

Worum geht‘s?

Einige CMS und WYSIWYG-Editoren bemühen sich bereits, den Quellcode, den die Redakteure ein-geben, beim Speichern oder bei der Ausgabe zu bereinigen. Nach meinen Tests stoßen beide recht schnell an ihre Grenzen und können auch nur in bestimmten Grenzen konfiguriert werden.

Der beste Filter, um HTML-Code sauber auszugeben, ist für mich bisher der HTML Purifier. Er kann auch nicht verhindern, dass Redaktere eine Zwischenüberschrift falsch auszeichnen oder eine Liste nicht als HTML-Liste eingeben. Aber der Purifier repariert fehlerhaften Code viel besser als WYSIWYG-Editoren oder CMS-eigene Filter.

Einfach mal testen.

Page 63: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Ein Suchformular

Page 64: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Die Basis

<form action=”/”> <div> <input type=”text” /> <input type=”submit” value=”Suchen” /> </div></form>

XMHTL 1.0 Code - Laut Spezifikation dürfen die input-Elemente keine direkten Kindelemente von form sein, daher das div.

http://www.webkrauts.de/2008/12/09/der-perfekte-suchschlitz/

Page 65: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Mehr Semantik

<form action=”/”> <fieldset> <legend>Volltextsuche</legend> <label for=”suchbegriff”>Suchbegriff</label> <input type=”text” id=”suchbegriff” /> <input type=”submit” value=”Suchen” /> </fieldset></form>

Mit etwas CSS auch:

Page 66: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Interaktiv mit Pseudoklassen

input[type=text]:focus { border-color: #000 #444 #444 #000; background-position: 0 0;}

input[type=submit]:hover { cursor: pointer;}

input[type=submit]:focus,input[type=submit]:active { background: #6c0000;}

Der Internet Explorer 6 versteht diese Anweisungen nicht!

Page 67: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Interaktiv mit JavaScript

<input type=”text” id=”suchbegriff” value=”Suchbegriff” />

myTextfeld = document.getElementById(‘suchbegriff’);if (document.addEventListener) { myTextfeld.addEventListener(‘focus’, textLeeren, false);}function textLeeren() { myTextfeld.value = “”;}

Leert das Suchfeld, wenn ein Nutzer reinklickt

Page 68: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Interaktiv mit JavaScript II

myTextfeld = document.getElementById(‘suchbegriff’);if (document.addEventListener) { myTextfeld.addEventListener(‘focus’, textLeeren, false); myTextfeld.addEventListener(‘blur’, textFuellen, false);}function textLeeren() { mySuchspeicher = myTextfeld.value; myTextfeld.value = “”;}function textFuellen() { if (myTextfeld.value == “”) { myTextfeld.value = mySuchspeicher; }}

Merkt sich das Wort im Eingabefeld.

Page 69: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Das finale Suchfeld

• Markup nach Standards• legend und label helfen in erster Linie Screenreadern, für sehende Nutzer werden die Elemente versteckt• Es gibt interaktive Pseudoklassen für :hover, :focus, :active• Das Wort „Suchbegriff“ hilft dem Nutzer statt eines sichtbaren labels, die Funktion des Feldes zu erklären• Per JavaScript wird das Wort „Suchbegriff“ beim Klick ins Feld ausgeblendet.• Schreibt der Nutzer ein neues Wort hinein, wird dieses beibehalten, andernfalls schreibt JavaScript wieder „Suchbegriff“ ins Feld.

Page 70: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Ein Suchformular

Worum geht‘s?

Das steht im Grunde alles schon gut erklärt in dem Artikel von Gerrit van Aaken:http://www.webkrauts.de/2008/12/09/der-perfekte-suchschlitz/(Dabei auch die Kommentare beachten)

Page 71: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Formulare effektiv gestalten

Page 72: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Page 73: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Standardmarkup für Formulare

Zielsetzung• Einheitliches Markup für alle Formularbausteine• Visuelle Gestaltungsfreiheit• Berücksichtigung von Feedback-Informationen• Unterstützung für fixe & flexible Breiten

GrundgedankeFormularelement und Labelbilden eine Einheit und werdenkontextabhängig formatiert.

Page 74: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Standardmarkup für Formulare

Zielsetzung• Einheitliches Markup für alle Formularbausteine• Visuelle Gestaltungsfreiheit• Berücksichtigung von Feedback-Informationen• Unterstützung für fixe & flexible Breiten

GrundgedankeFormularelement und Labelbilden eine Einheit und werdenkontextabhängig formatiert.

<div class=”type-text”> <label for=”your-id”>your label</label> <input type=”text” name=”your-id” id=”your-id” size=”20” /></div>

Textfeld

Page 75: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Standardmarkup für Formulare

Zielsetzung• Einheitliches Markup für alle Formularbausteine• Visuelle Gestaltungsfreiheit• Berücksichtigung von Feedback-Informationen• Unterstützung für fixe & flexible Breiten

GrundgedankeFormularelement und Labelbilden eine Einheit und werdenkontextabhängig formatiert.

<div class=”type-text”> <label for=”your-id”>your label</label> <input type=”text” name=”your-id” id=”your-id” size=”20” /></div>

Textfeld

<div class=”type-select”> <label for=”your-id”>More Options</label> <select name=”your-id” id=”your-id” size=”1”> <option value=”0” selected=”selected” disabled=”disabled”> Please choose</option> <optgrouplabel=”First options to choose from”> <option value=”value #1”>Option 1</option> <option value=”value #2”>Option 2</option> </optgroup> <optgrouplabel=”Yet more options to choose from”> <option value=”value #3”>Option 3</option> <option value=”value #4”>Option 4</option> <option value=”value #5”>Option 5</option> </optgroup> </select>

</div>

Selectfeld

Page 76: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Standardmarkup für Formulare

Zielsetzung• Einheitliches Markup für alle Formularbausteine• Visuelle Gestaltungsfreiheit• Berücksichtigung von Feedback-Informationen• Unterstützung für fixe & flexible Breiten

GrundgedankeFormularelement und Labelbilden eine Einheit und werdenkontextabhängig formatiert.

<div class=”type-text”> <label for=”your-id”>your label</label> <textareaname=”your-id” id=”your-id” cols=”30” rows=”7”></textarea></div>

Textarea

Page 77: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Standardmarkup für Formulare

Zielsetzung• Einheitliches Markup für alle Formularbausteine• Visuelle Gestaltungsfreiheit• Berücksichtigung von Feedback-Informationen• Unterstützung für fixe & flexible Breiten

GrundgedankeFormularelement und Labelbilden eine Einheit und werdenkontextabhängig formatiert.

<div class=”type-text”> <label for=”your-id”>your label</label> <textareaname=”your-id” id=”your-id” cols=”30” rows=”7”></textarea></div>

Textarea

<div class=”type-check”> <input type=”checkbox” name=”your-id” id=”your-id” /> <label for=”your-id”>Your checkbox label</label></div><div class=”type-check”> <input type=”radio” name=”your-id” value=”value #1” id=”your-id” /> <label for=”your-id”>Your radio-button label</label></div>

Checkboxen & Radiobuttons

Page 78: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Standardmarkup für Formulare

Zielsetzung• Einheitliches Markup für alle Formularbausteine• Visuelle Gestaltungsfreiheit• Berücksichtigung von Feedback-Informationen• Unterstützung für fixe & flexible Breiten

GrundgedankeFormularelement und Labelbilden eine Einheit und werdenkontextabhängig formatiert.

<div class=”type-text”> <label for=”your-id”>your label</label> <textareaname=”your-id” id=”your-id” cols=”30” rows=”7”></textarea></div>

Textarea

<div class=”type-check”> <input type=”checkbox” name=”your-id” id=”your-id” /> <label for=”your-id”>Your checkbox label</label></div><div class=”type-check”> <input type=”radio” name=”your-id” value=”value #1” id=”your-id” /> <label for=”your-id”>Your radio-button label</label></div>

Checkboxen & Radiobuttons

<divclass=”type-button”> <inputtype=”button” value=”button” id=”button1” name=”button1” /> <inputtype=”reset” value=”reset” id=”reset” name=”reset” /> <inputtype=”submit” value=”submit” id=”submit” name=”submit” /></div>

Buttons

Page 79: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Präsentationsmöglichkeiten

Lineare Abfolge Spalten links-/rechtsbündig

Page 80: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Präsentationsmöglichkeiten

Mehrspaltige Formulare Feedbackmöglichkeiten

<div class=”type-text error”> <strong >Field «Last name» not properly filled.</strong> …</div>

Page 81: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

„Formularbaukasten“

ImplementationCSS Framework YAML, Version 3.2

• Dokumentation http://www.yaml.de/de/dokumentation/css-bausteine/formularbaukasten.html• Beispiel: Grundelemente http://www.yaml.de/fileadmin/examples/01_layouts_basics/building_forms.html• Beispiel: Mehrspaltige Formulare http://www.yaml.de/fileadmin/examples/01_layouts_basics/multicolumnar_

forms.html

Page 82: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Formulare effektiv gestalten

Worum geht‘s?

Je nach Platzangebot im Layout oder der Komplexität der vom Nutzer erfragten Daten haben sich unterschiedliche Darstellungsformen als vorteilhaft erwiesen. Die Herausforderung besteht nun darin, ein möglichst sinnvolles Basismarkup für Formulare zu entwickeln, das all diese verschiedenen Anforderungen abdeckt. Gleichzeitig soll der Pflegeaufwand für das dazugehörige CSS möglichst gering gehalten werden.

Im Rahmen des Vortrages stelle ich die Lösung vor, die ich im Rahmen des CSS-Frameworks YAML als „Formularbaukasten” implementiert habe.

Page 83: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Inhalte in Tab-Reitern

Page 84: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Erwarten Sie das Unerwartete

Mit JavaScript Ohne JavaScript

Page 85: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Erwarten Sie das Unerwartete

Mit JavaScript Ohne JavaScript

Tabs ohne Funktion!

<a onfocus=”blur()” onclick=”spToggleMPC(‘topbox’,1)” href=”javascript:void(0);”>Gelesen</a>

Page 86: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Zugängliche Tabinhalte

Zielvorgaben

• Zugänglichkeit und ansprechende Präsentationder Inhalte mit und ohne JavaScript• Vollständige Tastatursteuerung• Feedback für Screenreaderbeim Tabwechsel• Synchronisation der Tabreiter(gleiche Höhen)

Page 87: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Ziel: Zugängliche Tabinhalte

Mit JavaScript Ohne JavaScript

Page 88: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Ausgangspunkt: Linearer Inhalt

Page 89: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Identifikation Tabreiter/InhaltH3 Heading

H3 Heading

H3 Heading

Page 90: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Identifikation Tabreiter/InhaltH3 Heading

H3 Heading

H3 Heading

DIV class=“content“

DIV class=“content“

DIV class=“content“

Page 91: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Aktives JavaScript: DOM-ScriptingH3 Heading

H3 Heading

H3 Heading

DIV class=“content“

DIV class=“content“

DIV class=“content“

Page 92: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

„AccessibleTabs“ für jQuery

Autor: Dirk GinaderAccessibleTabs (jQueryPlugin)• Projekthomepage• Dokumentation (deutsch/ englisch)

ImplementationCSS Framework YAML, Version 3.2• Optional mit Tab-Synchronisation http://www.yaml.de/fileadmin/examples/ 09_add-ons/accessible_tabs.html

Page 93: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Inhalte in Tab-Reitern

Worum geht‘s?

Wann sind Tabreiter wirklich zugänglich für Screenreader? Wie gestalte ich Tab-Inhalte sinnvoll, falls JavaScript beim Nutzer deaktiviert ist? Diese Fragen werden anhand des „Accessible Tabs” Plugins von Dirk Ginader beantwortet.

Page 94: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Danke. Und schönen Abend noch...

Page 95: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Oder hat etwa jemand eine Frage?

Page 96: WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)

Die Referenten

Dirk Jessetwitter.com/djesse

• Bauingenieur aus Dresden• Freiberuflicher Softwareentwickler: – CSS Framework „Yet Another

Multicolumn Layout“ (YAML) – JavaScript-Applikationen – CSSDOC• Autor – T3N Magazin,

Webstandards-Magazin – Fachbuch „CSS-Layouts,

Praxislösungen mit YAML 3.0“• Redaktion Webkrauts

Nicolai Schwarztwitter.com/textformer

• freier Designer und Webentwickler aus Dortmund

• Autor für t3n, PHP User, Create or Die• Redaktionelle Mitarbeit beim Webstandards-Magazin• Redaktion Webkrauts• Redaktion pisto-magazin.de