Der Workshop behandelt wesentliche Aspekte der Frontend-Entwicklung, insbesondere Performance, Qualität und Organisation von Webseiten. Es werden Techniken wie CSS Sprites und Bildersubstitution vorgestellt, sowie Werkzeuge wie YSlow und Firebug zur Leistungsbewertung eingesetzt. Die Konformität zu Webstandards und die Zugänglichkeit für Nutzer und Maschinen sind zentrale Themen, begleitet von zahlreichen Checklisten zur Qualitätssicherung.

1. Frontend-Workshop Informationen, Workshop, Know-How

2. Frontend-Workshop Informationen Performance Qualität Organisation und Übersichtlichkeit Workshop CSS Sprites Image Replacement Semantik … Know-How (kommt in einem 2. Vortrag) YUILoader vs. Jasmin shop:ingrid Conditional Comments Variant-, Shop-, Sales-Channel-Templates

3. Informationen

4. Performance Yahoo! „Rules for high performance web sites„ YSlow und Firebug als Werkzeuge zum Messen der Performance Zukünftig automatische Reports bei Verletzung/Überschreitung gewisser Parameter

5. Performance Firebug

6. Performance YSlow

7. Performance YSlow Ohne Jasmin Mit Jasmin

8. Performance YSlow

9. Performance Jasmin ( Ja va S cript Min ifier) verwaltet CSS- und JavaScript-Ressourcen in Modulen Diese Module beziehen Ressourcen über Maven, HTTP und dem Filesystem Module können untereinander Abhängigkeiten haben Einbindung aller CSS und JavaScripte einer Seite geschieht über je einen Request Komprimierung (Code- und Gzip-Komprimierung) Zuweisung von ETags Zuweisung eines Expires-Header

10. Performance CDS (Content Delivery Server) zur zentralen Bereitstellung von Grafiken und Flash ETags, Expires-Header Statistiken über angeforderte Grafiken (Durchschnittswerte, Maximalwerte, Werte pro Seite, Werte pro Projekt) Warnung bei Überschreitung eines Grenzwerts: „Seite A im Projekt X fordert mehr als 300KB Grafiken an. Bitte prüfen.“

11. Performance Project-Mess-Tool „ Wie steht es insgesamt um mein Projekt?“ Performance-Faktoren Fehlende/Ungenutzte Grafiken Fehlende/Ungenutzte Includes Überflüssige Seiten Falsche Konfigurationen Nicht validierende Dokumente und CSS JavaScript-Fehler

12. Performance CSS Sprites Statt 6 Requests nur 1 Request

13. Performance Weitere Informationen http ://developer.yahoo.com/performance/ http://developer.yahoo.com/yslow/ http ://www.getfirebug.com/ http://wiki.intranet.1and1.com/bin/view/Puste fix/JasminServlet http://www.alistapart.com/articles/sprites

14. Qualität Einhaltung von Webstandards Qualität des Codes Grad der Trennung von Inhalt und Layout Zugänglichkeit (Accessibility) für Nutzer und Maschinen Grundlegende Benutzbarkeit (Usability) Seitenverwaltung (Organisation)

15. Qualität »A web standards checklist« (Russ Weakley, Max Design ) „Eine den Webstandards entsprechende Seite sollte im Idealfall schlank, aufgeräumt, CSS-basierend, zugänglich, nutzer- und suchmaschinenfreundlich gestaltet sein.“

16. Qualität des Codes Hat die Seite einen korrekten Doctype? Hat die Seite eine Zeichensatzcodierung? Verwendet die Seite valides (X)HTML? Verwendet die Seite valides CSS? Nutzt die Seite CSS-Hacks? Hat die Seite unnötige Klassen oder IDs? Ist der Code gut strukturiert? Gibt es tote Links auf der Seite? Wie sieht es mit der Größe/Geschwindigkeit der Seite aus? Treten JavaScript-Fehler auf? http ://www.lingo4u.de/article/checklist#quality

17. Trennung von Inhalt und Layout Verwendet die Seite für die Gestaltung überall CSS (Schriftart, Farbe, Abstände, Ränder etc.)? Sind alle dekorativen Bilder mit CSS realisiert oder erscheinen sie im (X)HTML? http ://www.lingo4u.de/article/checklist#degree

18. Zugänglichkeit für Nutzer Ist das ALT-Attribut für alle beschreibenden Bilder sinnvoll gesetzt? Verwendet die Seite relative Einheiten für die Schriftgröße (statt absoluter Einheiten)? Wird das Layout beim Vergrößern der Schrift gestört? Verwendet die Seite »visible skip menus«? Nutzt die Seite zugängliche Formulare? Nutzt die Seite zugängliche Tabellen? Haben die Farben ausreichend Helligkeit/Kontrast? Werden wichtige Informationen nur mit Farben gekennzeichnet? Gibt es verzögerte DropDown-Menüs (für Nutzer, mit eingeschränkten motorischen Fähigkeiten)? Sind alle Linktexte beschreibend (für blinde Nutzer)? http ://www.lingo4u.de/article/checklist#users

19. Zugänglichkeit für Maschinen Funktioniert die Seite in neuen und alten Browsern vernünftig? Ist der Inhalt der Seite auch ohne CSS zugänglich? Ist der Inhalt der Seite auch ohne Bilder zugänglich? Funktioniert die Seite auch in Textbrowsern wie Lynx? Lässt sich die Seite vernünftig ausdrucken? Funktioniert die Seite auf Handhelds? Besitzt die Seite ausführliche Meta-Informationen? Funktioniert die Seite in verschiedenen Fenstergrößen des Browsers? http ://www.lingo4u.de/article/checklist#devices

20. Benutzbarkeit (Usability) Gibt es eine klare visuelle Gliederung? Sind die Überschriften unterschiedlicher Ordnung leicht unterscheidbar? Besitzt die Seite eine leicht verständliche Navigation? Ist die Navigation auf allen Seiten durchgängig? Wird eine konsistente und passende Sprache/Formulierung verwendet? Gibt es eine Sitemap und ist diese leicht zu finden? Ist bei größeren Seiten eine Suchfunktion vorhanden? Gibt es auf jeder Seite einen Link zur Startseite? Sind alle Links unterstrichen? Sind schon besuchte Links entsprechend farblich gekennzeichnet? http ://www.lingo4u.de/article/checklist#usability

21. Organisation und Übersichtlichkeit Hat die Seite eine aussagefähige und hilfreiche 404-Fehlerseite, die überall funktioniert? Hat die Seite lesbare URLs? Ist die Seite auch ohne »www« erreichbar? Hat die Seite ein Favicon? http://www.lingo4u.de/article/checklist#site

22. Organisation und Übersichtlichkeit Werden Grafiken oder Includes nicht mehr benötigt? UI²-Tool

23. Organisation und Übersichtlichkeit Gibt es veraltete oder falsch konfigurierte Seiten? Page Configuration Matrix

24. Organisation und Übersichtlichkeit Beispiel einer 404-Fehlerseite (Telesales)

25. Organisation und Übersichtlichkeit Beachtung dieser Regeln als ständiger Prozeß der Qualitätssicherung Project-Mess-Tool zur übersichtlichen Visualisierung der genannten Kriterien

26. Workshop

27. CSS Sprites <ul id=&quot;skyline&quot;> <li id=&quot;panel1b&quot;><a href=&quot;#1&quot;></a></li> <li id=&quot;panel2b&quot;><a href=&quot;#2&quot;></a></li> <li id=&quot;panel3b&quot;><a href=&quot;#3&quot;></a></li> <li id=&quot;panel4b&quot;><a href=&quot;#4&quot;></a></li> </ul> #panel1b a { background: transparent url(test-3.jpg) 0 -200px no-repeat; } #panel2b a { background: transparent url(test-3.jpg) -96px -200px no-repeat; } ... http://www.alistapart.com/articles/sprites Some text about small bugs…

28. CSS Sprites

29. Image Replacement Ersetzen von HTML-Elementen durch Bilder, wobei die Elemente selbst nicht mehr angezeigt werden Kommt bei Headlines zum Einsatz http://meiert.com/de/publications/articles/20050513/ Bevorzugt: Phark-Methode

30. Image Replacement <h1> </h1> Das Unternehmen text-indent: -999em; background-image: url(…); HTML <h1>Das Unternehmen</h1> CSS h1 { background: url(company.gif); height: 25px; text-indent: -999em; width: 250px; }

31. Semantik PERFEKT! Web Developer Toolbar: Information > View Document Outline

32. Semantik <h3> </h3> <ul> </ul> <li> </li> </li> <li> <li> </li> </li> <li>

33. Semantik Ungeordnete Liste <ul><li></li></ul> Geordnete Liste <ol><li></li></ol>

34. Semantik Hier ist wohl das Element th gemeint! <strong> <small> „ Einachsiger Dreiseitenkipper“ = Schubkarre

35. Semantik Warum nicht h2 ? Warum keine Liste? <div id=„ cartChecklist “> <h2> Ihre Auswahl </h2> <h3> Basis-Ausstattung </h3> <ul class=„ items “> <li>…</li> <li>…</li> </ul> <h3> Optional: </h3> <ul class=„ items “> <li>…</li> </ul> </div> Besser:

36. Semantik

37. Semantik <div class=„handyHardwareBox“> <h3>... mit dem Business-Handy HTC S710 nutzen</h3> <div class=„info clearfix“> <pfx:image src=„…“ class=„visual“ alt=„HTC S710“/> <h4>HTC S710</h4> <ul> <li>Quad-Band</li> <li>aufschiebbare Tastatur</li> ... </ul> <a href=„#“>Produktdetails</a> </div> <div class=„order“> <pfx:image src=„…“ class=„price“ alt=„199,99 €“/> <input name=„htcs710“ id=„htcs710“ type=„radio“/> <label for=„htc710“> Handy <strong>HTC S710</strong> mitbestellen <small>(bitte ankreuzen)</small> </label> </div> </div>

38. Firebug Auswahl des Elements über das Dokument Anzeige des HTML-Quellcode Anzeige der Inline-Styles Anzeige der externen Styles

39. Firebug Styles „live“ ausblenden. Styles „live“ verändern. Zusatzinfos.

40. Firebug http ://www.getfirebug.com/

41. Validierung „ Die 1&1 Internet AG ist mit rund 7,07 Millionen Kundenverträgen ein führender Internet-Provider und stellt Privatpersonen, Gewerbetreibenden und Freiberuflern ein umfassendes Spektrum ausgereifter Online-Anwendungen zur Verfügung.“ [ http://1und1.de/index.php?&page=company ]

42. Validierung Valide Seiten werden schneller gerendert Browser werden immer standardkonformer Valider Code bekommt dadurch immer größeren Stellenwert „Wir sind zukunftssicher!“ „Wir arbeiten professionell!“

43. Validierung

44. Quirks Mode Quirks-Mode simuliert das Verhalten, die Bugs und sonstige Unarten anderer Browser oder älterer Versionen War als „Fallback“ für ältere Seiten gedacht, welche für veraltete Browser-Versionen optimiert wurden http ://www.quirksmode.org/css/quirksmode.html

45. Standard Compliance Mode Wird bei korrektem Doctype aktiviert „ Wenn Doctype korrekt ist, wird der Entwickler wissen, was er da tut.“ Microsoft bekommt mit dem IE8 Angst vor der eigenen Courage und will spezielles Meta-Tag etablieren http ://www.quirksmode.org/css/quirksmode.html

46. HTML Validator Plugin für Firefox Prüft auf Validität in Abhängigkeit vom Doctype Bei unseren Seiten im Allgemeinen HTML4 im Transitional Mode Eventuell zukünftige Umstellung auf HTML5 oder XHTML im Strict Mode

47. HTML Validator Auflistung der Fehler, Infos und Warnungen der aktuellen Seite Hilfe bei der Behebung des gewählten Fehlers Prüft nicht auf Semantik!

48. HTML Validator https ://addons.mozilla.org/de/firefox/addon/249 Optional Aufruf des W3C-Validators (funktioniert nicht mit Stages) http:// validator.w3.org/

49. CSS Validator Eingebaut in die Fehler-Konsole des Firefox

50. JavaScript-Fehler Debugging über Firebug möglich Logging aller Online-JavaScript-Fehler In Zukunft über Tool einsehbar

51. Workshop Teil 2 In den nächsten Wochen YUILoader vs. Jasmin shop:ingrid Conditional Comments Variant-, Shop-, Sales-Channel-Templates Dateiorganisation etc.