Frontend-Workshop Informationen, Workshop, Know-How
Frontend-Workshop <ul><li>Informationen </li></ul><ul><ul><li>Performance </li></ul></ul><ul><ul><li>Qualität </li></ul></...
<ul><li>Informationen </li></ul>
Performance <ul><li>Yahoo! „Rules for high performance web sites„ </li></ul><ul><li>YSlow und Firebug als Werkzeuge zum Me...
Performance <ul><li>Firebug </li></ul>
Performance <ul><li>YSlow </li></ul>
Performance <ul><li>YSlow </li></ul>Ohne Jasmin Mit Jasmin
Performance <ul><li>YSlow </li></ul>
Performance <ul><li>Jasmin ( Ja va S cript  Min ifier) verwaltet CSS- und JavaScript-Ressourcen in Modulen </li></ul><ul><...
Performance <ul><li>CDS (Content Delivery Server) zur zentralen Bereitstellung von Grafiken und Flash </li></ul><ul><li>ET...
Performance <ul><li>Project-Mess-Tool </li></ul><ul><li>„ Wie steht es insgesamt um mein Projekt?“ </li></ul><ul><li>Perfo...
Performance <ul><li>CSS Sprites </li></ul><ul><li>Statt 6 Requests nur 1 Request </li></ul>
Performance <ul><li>Weitere Informationen </li></ul><ul><li>http ://developer.yahoo.com/performance/ </li></ul><ul><li>htt...
Qualität <ul><li>Einhaltung von Webstandards </li></ul><ul><li>Qualität des Codes </li></ul><ul><li>Grad der Trennung von ...
Qualität <ul><li>»A web standards checklist«  (Russ Weakley,  Max Design )  </li></ul><ul><li>„Eine den Webstandards entsp...
Qualität des Codes <ul><li>Hat die Seite einen korrekten Doctype? </li></ul><ul><li>Hat die Seite eine Zeichensatzcodierun...
Trennung von Inhalt und Layout <ul><li>Verwendet die Seite für die Gestaltung überall CSS (Schriftart, Farbe, Abstände, Rä...
Zugänglichkeit für Nutzer <ul><li>Ist das ALT-Attribut für alle beschreibenden Bilder sinnvoll gesetzt? </li></ul><ul><li>...
Zugänglichkeit für Maschinen <ul><li>Funktioniert die Seite in neuen und alten Browsern vernünftig? </li></ul><ul><li>Ist ...
Benutzbarkeit (Usability) <ul><li>Gibt es eine klare visuelle Gliederung? </li></ul><ul><li>Sind die Überschriften untersc...
Organisation und Übersichtlichkeit <ul><li>Hat die Seite eine aussagefähige und hilfreiche 404-Fehlerseite, die überall fu...
Organisation und Übersichtlichkeit <ul><li>Werden Grafiken oder Includes nicht mehr benötigt? </li></ul><ul><li>UI²-Tool <...
Organisation und Übersichtlichkeit <ul><li>Gibt es veraltete oder falsch konfigurierte Seiten? </li></ul><ul><li>Page Conf...
Organisation und Übersichtlichkeit <ul><li>Beispiel einer 404-Fehlerseite (Telesales) </li></ul>
Organisation und Übersichtlichkeit <ul><li>Beachtung dieser Regeln als ständiger Prozeß der Qualitätssicherung </li></ul><...
<ul><li>Workshop </li></ul>
CSS Sprites <ul><li><ul id=&quot;skyline&quot;> </li></ul><ul><li><li id=&quot;panel1b&quot;><a href=&quot;#1&quot;></a></...
CSS Sprites
Image Replacement <ul><li>Ersetzen von HTML-Elementen durch Bilder, wobei die Elemente selbst nicht mehr angezeigt werden ...
Image Replacement <h1> </h1> Das Unternehmen text-indent: -999em; background-image: url(…); <ul><li>HTML </li></ul><ul><ul...
Semantik PERFEKT! Web Developer Toolbar: Information > View Document Outline
Semantik <h3> </h3> <ul> </ul> <li> </li> </li> <li> <li> </li> </li> <li>
Semantik Ungeordnete Liste <ul><li></li></ul> Geordnete Liste <ol><li></li></ol>
Semantik Hier ist wohl das Element  th  gemeint! <strong> <small> „ Einachsiger Dreiseitenkipper“ = Schubkarre
Semantik Warum nicht  h2 ? Warum keine Liste? <div id=„ cartChecklist “> <h2> Ihre Auswahl </h2> <h3> Basis-Ausstattung </...
Semantik
Semantik <div class=„handyHardwareBox“> <h3>... mit dem Business-Handy HTC S710 nutzen</h3> <div class=„info clearfix“> <p...
Firebug <ul><li>Auswahl des Elements über das Dokument </li></ul><ul><li>Anzeige des HTML-Quellcode </li></ul><ul><li>Anze...
Firebug Styles „live“ ausblenden. Styles „live“ verändern. Zusatzinfos.
Firebug <ul><li>http ://www.getfirebug.com/ </li></ul>
Validierung <ul><li>„ Die 1&1 Internet AG ist mit rund 7,07 Millionen Kundenverträgen ein führender Internet-Provider und ...
Validierung <ul><li>Valide Seiten werden schneller gerendert </li></ul><ul><li>Browser werden immer standardkonformer </li...
Validierung
Quirks Mode <ul><li>Quirks-Mode simuliert das Verhalten, die Bugs und sonstige Unarten anderer Browser oder älterer Versio...
Standard Compliance Mode <ul><li>Wird bei korrektem Doctype aktiviert </li></ul><ul><li>„ Wenn Doctype korrekt ist, wird d...
HTML Validator <ul><li>Plugin für Firefox </li></ul><ul><li>Prüft auf Validität in Abhängigkeit vom Doctype </li></ul><ul>...
HTML Validator Auflistung der Fehler, Infos und Warnungen der aktuellen Seite Hilfe bei der Behebung des  gewählten Fehler...
HTML Validator <ul><li>https ://addons.mozilla.org/de/firefox/addon/249 </li></ul><ul><li>Optional Aufruf des W3C-Validato...
CSS Validator <ul><li>Eingebaut in die Fehler-Konsole des Firefox </li></ul>
JavaScript-Fehler <ul><li>Debugging über Firebug möglich </li></ul><ul><li>Logging aller Online-JavaScript-Fehler </li></u...
Workshop Teil 2 <ul><li>In den nächsten Wochen </li></ul><ul><li>YUILoader vs. Jasmin </li></ul><ul><li>shop:ingrid </li><...
Nächste SlideShare
Wird geladen in …5
×

1&1 Frontend Workshop

2.860 Aufrufe

Veröffentlicht am

1. Teil des Frontend Workshop 2008 für das 1&1 Website-Management

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.860
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
30
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

1&1 Frontend Workshop

  1. 1. Frontend-Workshop Informationen, Workshop, Know-How
  2. 2. Frontend-Workshop <ul><li>Informationen </li></ul><ul><ul><li>Performance </li></ul></ul><ul><ul><li>Qualität </li></ul></ul><ul><ul><li>Organisation und Übersichtlichkeit </li></ul></ul><ul><li>Workshop </li></ul><ul><ul><li>CSS Sprites </li></ul></ul><ul><ul><li>Image Replacement </li></ul></ul><ul><ul><li>Semantik </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Know-How (kommt in einem 2. Vortrag) </li></ul><ul><ul><li>YUILoader vs. Jasmin </li></ul></ul><ul><ul><li>shop:ingrid </li></ul></ul><ul><ul><li>Conditional Comments </li></ul></ul><ul><ul><li>Variant-, Shop-, Sales-Channel-Templates </li></ul></ul>
  3. 3. <ul><li>Informationen </li></ul>
  4. 4. Performance <ul><li>Yahoo! „Rules for high performance web sites„ </li></ul><ul><li>YSlow und Firebug als Werkzeuge zum Messen der Performance </li></ul><ul><li>Zukünftig automatische Reports bei Verletzung/Überschreitung gewisser Parameter </li></ul>
  5. 5. Performance <ul><li>Firebug </li></ul>
  6. 6. Performance <ul><li>YSlow </li></ul>
  7. 7. Performance <ul><li>YSlow </li></ul>Ohne Jasmin Mit Jasmin
  8. 8. Performance <ul><li>YSlow </li></ul>
  9. 9. Performance <ul><li>Jasmin ( Ja va S cript Min ifier) verwaltet CSS- und JavaScript-Ressourcen in Modulen </li></ul><ul><li>Diese Module beziehen Ressourcen über Maven, HTTP und dem Filesystem </li></ul><ul><li>Module können untereinander Abhängigkeiten haben </li></ul><ul><li>Einbindung aller CSS und JavaScripte einer Seite geschieht über je einen Request </li></ul><ul><li>Komprimierung (Code- und Gzip-Komprimierung) </li></ul><ul><li>Zuweisung von ETags </li></ul><ul><li>Zuweisung eines Expires-Header </li></ul>
  10. 10. Performance <ul><li>CDS (Content Delivery Server) zur zentralen Bereitstellung von Grafiken und Flash </li></ul><ul><li>ETags, Expires-Header </li></ul><ul><li>Statistiken über angeforderte Grafiken (Durchschnittswerte, Maximalwerte, Werte pro Seite, Werte pro Projekt) </li></ul><ul><li>Warnung bei Überschreitung eines Grenzwerts: „Seite A im Projekt X fordert mehr als 300KB Grafiken an. Bitte prüfen.“ </li></ul>
  11. 11. Performance <ul><li>Project-Mess-Tool </li></ul><ul><li>„ Wie steht es insgesamt um mein Projekt?“ </li></ul><ul><li>Performance-Faktoren </li></ul><ul><li>Fehlende/Ungenutzte Grafiken </li></ul><ul><li>Fehlende/Ungenutzte Includes </li></ul><ul><li>Überflüssige Seiten </li></ul><ul><li>Falsche Konfigurationen </li></ul><ul><li>Nicht validierende Dokumente und CSS </li></ul><ul><li>JavaScript-Fehler </li></ul>
  12. 12. Performance <ul><li>CSS Sprites </li></ul><ul><li>Statt 6 Requests nur 1 Request </li></ul>
  13. 13. Performance <ul><li>Weitere Informationen </li></ul><ul><li>http ://developer.yahoo.com/performance/ </li></ul><ul><li>http://developer.yahoo.com/yslow/ </li></ul><ul><li>http ://www.getfirebug.com/ </li></ul><ul><li>http://wiki.intranet.1and1.com/bin/view/Puste </li></ul><ul><li>fix/JasminServlet </li></ul><ul><li>http://www.alistapart.com/articles/sprites </li></ul>
  14. 14. Qualität <ul><li>Einhaltung von Webstandards </li></ul><ul><li>Qualität des Codes </li></ul><ul><li>Grad der Trennung von Inhalt und Layout </li></ul><ul><li>Zugänglichkeit (Accessibility) für Nutzer und Maschinen </li></ul><ul><li>Grundlegende Benutzbarkeit (Usability) </li></ul><ul><li>Seitenverwaltung (Organisation) </li></ul>
  15. 15. Qualität <ul><li>»A web standards checklist« (Russ Weakley, Max Design ) </li></ul><ul><li>„Eine den Webstandards entsprechende Seite sollte im Idealfall schlank, aufgeräumt, CSS-basierend, zugänglich, nutzer- und suchmaschinenfreundlich gestaltet sein.“ </li></ul>
  16. 16. Qualität des Codes <ul><li>Hat die Seite einen korrekten Doctype? </li></ul><ul><li>Hat die Seite eine Zeichensatzcodierung? </li></ul><ul><li>Verwendet die Seite valides (X)HTML? </li></ul><ul><li>Verwendet die Seite valides CSS? </li></ul><ul><li>Nutzt die Seite CSS-Hacks? </li></ul><ul><li>Hat die Seite unnötige Klassen oder IDs? </li></ul><ul><li>Ist der Code gut strukturiert? </li></ul><ul><li>Gibt es tote Links auf der Seite? </li></ul><ul><li>Wie sieht es mit der Größe/Geschwindigkeit der Seite aus? </li></ul><ul><li>Treten JavaScript-Fehler auf? </li></ul><ul><li>http ://www.lingo4u.de/article/checklist#quality </li></ul>
  17. 17. Trennung von Inhalt und Layout <ul><li>Verwendet die Seite für die Gestaltung überall CSS (Schriftart, Farbe, Abstände, Ränder etc.)? </li></ul><ul><li>Sind alle dekorativen Bilder mit CSS realisiert oder erscheinen sie im (X)HTML? </li></ul><ul><li>http ://www.lingo4u.de/article/checklist#degree </li></ul>
  18. 18. Zugänglichkeit für Nutzer <ul><li>Ist das ALT-Attribut für alle beschreibenden Bilder sinnvoll gesetzt? </li></ul><ul><li>Verwendet die Seite relative Einheiten für die Schriftgröße (statt absoluter Einheiten)? </li></ul><ul><li>Wird das Layout beim Vergrößern der Schrift gestört? </li></ul><ul><li>Verwendet die Seite »visible skip menus«? </li></ul><ul><li>Nutzt die Seite zugängliche Formulare? </li></ul><ul><li>Nutzt die Seite zugängliche Tabellen? </li></ul><ul><li>Haben die Farben ausreichend Helligkeit/Kontrast? </li></ul><ul><li>Werden wichtige Informationen nur mit Farben gekennzeichnet? </li></ul><ul><li>Gibt es verzögerte DropDown-Menüs (für Nutzer, mit eingeschränkten motorischen Fähigkeiten)? </li></ul><ul><li>Sind alle Linktexte beschreibend (für blinde Nutzer)? </li></ul><ul><li>http ://www.lingo4u.de/article/checklist#users </li></ul>
  19. 19. Zugänglichkeit für Maschinen <ul><li>Funktioniert die Seite in neuen und alten Browsern vernünftig? </li></ul><ul><li>Ist der Inhalt der Seite auch ohne CSS zugänglich? </li></ul><ul><li>Ist der Inhalt der Seite auch ohne Bilder zugänglich? </li></ul><ul><li>Funktioniert die Seite auch in Textbrowsern wie Lynx? </li></ul><ul><li>Lässt sich die Seite vernünftig ausdrucken? </li></ul><ul><li>Funktioniert die Seite auf Handhelds? </li></ul><ul><li>Besitzt die Seite ausführliche Meta-Informationen? </li></ul><ul><li>Funktioniert die Seite in verschiedenen Fenstergrößen des Browsers? </li></ul><ul><li>http ://www.lingo4u.de/article/checklist#devices </li></ul>
  20. 20. Benutzbarkeit (Usability) <ul><li>Gibt es eine klare visuelle Gliederung? </li></ul><ul><li>Sind die Überschriften unterschiedlicher Ordnung leicht unterscheidbar? </li></ul><ul><li>Besitzt die Seite eine leicht verständliche Navigation? </li></ul><ul><li>Ist die Navigation auf allen Seiten durchgängig? </li></ul><ul><li>Wird eine konsistente und passende Sprache/Formulierung verwendet? </li></ul><ul><li>Gibt es eine Sitemap und ist diese leicht zu finden? </li></ul><ul><li>Ist bei größeren Seiten eine Suchfunktion vorhanden? </li></ul><ul><li>Gibt es auf jeder Seite einen Link zur Startseite? </li></ul><ul><li>Sind alle Links unterstrichen? </li></ul><ul><li>Sind schon besuchte Links entsprechend farblich gekennzeichnet? </li></ul><ul><li>http ://www.lingo4u.de/article/checklist#usability </li></ul>
  21. 21. Organisation und Übersichtlichkeit <ul><li>Hat die Seite eine aussagefähige und hilfreiche 404-Fehlerseite, die überall funktioniert? </li></ul><ul><li>Hat die Seite lesbare URLs? </li></ul><ul><li>Ist die Seite auch ohne »www« erreichbar? </li></ul><ul><li>Hat die Seite ein Favicon? </li></ul><ul><li>http://www.lingo4u.de/article/checklist#site </li></ul>
  22. 22. Organisation und Übersichtlichkeit <ul><li>Werden Grafiken oder Includes nicht mehr benötigt? </li></ul><ul><li>UI²-Tool </li></ul>
  23. 23. Organisation und Übersichtlichkeit <ul><li>Gibt es veraltete oder falsch konfigurierte Seiten? </li></ul><ul><li>Page Configuration Matrix </li></ul>
  24. 24. Organisation und Übersichtlichkeit <ul><li>Beispiel einer 404-Fehlerseite (Telesales) </li></ul>
  25. 25. Organisation und Übersichtlichkeit <ul><li>Beachtung dieser Regeln als ständiger Prozeß der Qualitätssicherung </li></ul><ul><li>Project-Mess-Tool zur übersichtlichen Visualisierung der genannten Kriterien </li></ul>
  26. 26. <ul><li>Workshop </li></ul>
  27. 27. CSS Sprites <ul><li><ul id=&quot;skyline&quot;> </li></ul><ul><li><li id=&quot;panel1b&quot;><a href=&quot;#1&quot;></a></li> </li></ul><ul><li><li id=&quot;panel2b&quot;><a href=&quot;#2&quot;></a></li> </li></ul><ul><li><li id=&quot;panel3b&quot;><a href=&quot;#3&quot;></a></li> </li></ul><ul><li><li id=&quot;panel4b&quot;><a href=&quot;#4&quot;></a></li> </li></ul><ul><li></ul> </li></ul><ul><li>#panel1b a { </li></ul><ul><li>background: transparent url(test-3.jpg) 0 -200px no-repeat; </li></ul><ul><li>} </li></ul><ul><li>#panel2b a { </li></ul><ul><li>background: transparent url(test-3.jpg) -96px -200px no-repeat; </li></ul><ul><li>} </li></ul><ul><li>... </li></ul><ul><li>http://www.alistapart.com/articles/sprites </li></ul>Some text about small bugs…
  28. 28. CSS Sprites
  29. 29. Image Replacement <ul><li>Ersetzen von HTML-Elementen durch Bilder, wobei die Elemente selbst nicht mehr angezeigt werden </li></ul><ul><li>Kommt bei Headlines zum Einsatz </li></ul><ul><li>http://meiert.com/de/publications/articles/20050513/ </li></ul><ul><li>Bevorzugt: Phark-Methode </li></ul>
  30. 30. Image Replacement <h1> </h1> Das Unternehmen text-indent: -999em; background-image: url(…); <ul><li>HTML </li></ul><ul><ul><li><h1>Das Unternehmen</h1> </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>h1 { background: url(company.gif); height: 25px; text-indent: -999em; width: 250px; } </li></ul></ul>
  31. 31. Semantik PERFEKT! Web Developer Toolbar: Information > View Document Outline
  32. 32. Semantik <h3> </h3> <ul> </ul> <li> </li> </li> <li> <li> </li> </li> <li>
  33. 33. Semantik Ungeordnete Liste <ul><li></li></ul> Geordnete Liste <ol><li></li></ol>
  34. 34. Semantik Hier ist wohl das Element th gemeint! <strong> <small> „ Einachsiger Dreiseitenkipper“ = Schubkarre
  35. 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. 36. Semantik
  37. 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. 38. Firebug <ul><li>Auswahl des Elements über das Dokument </li></ul><ul><li>Anzeige des HTML-Quellcode </li></ul><ul><li>Anzeige der Inline-Styles </li></ul><ul><li>Anzeige der externen Styles </li></ul>
  39. 39. Firebug Styles „live“ ausblenden. Styles „live“ verändern. Zusatzinfos.
  40. 40. Firebug <ul><li>http ://www.getfirebug.com/ </li></ul>
  41. 41. Validierung <ul><li>„ 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.“ </li></ul><ul><li>[ http://1und1.de/index.php?&page=company ] </li></ul>
  42. 42. Validierung <ul><li>Valide Seiten werden schneller gerendert </li></ul><ul><li>Browser werden immer standardkonformer </li></ul><ul><li>Valider Code bekommt dadurch immer größeren Stellenwert </li></ul><ul><li>„Wir sind zukunftssicher!“ </li></ul><ul><li>„Wir arbeiten professionell!“ </li></ul>
  43. 43. Validierung
  44. 44. Quirks Mode <ul><li>Quirks-Mode simuliert das Verhalten, die Bugs und sonstige Unarten anderer Browser oder älterer Versionen </li></ul><ul><li>War als „Fallback“ für ältere Seiten gedacht, welche für veraltete Browser-Versionen optimiert wurden </li></ul>http ://www.quirksmode.org/css/quirksmode.html
  45. 45. Standard Compliance Mode <ul><li>Wird bei korrektem Doctype aktiviert </li></ul><ul><li>„ Wenn Doctype korrekt ist, wird der Entwickler wissen, was er da tut.“ </li></ul><ul><li>Microsoft bekommt mit dem IE8 Angst vor der eigenen Courage und will spezielles Meta-Tag etablieren </li></ul>http ://www.quirksmode.org/css/quirksmode.html
  46. 46. HTML Validator <ul><li>Plugin für Firefox </li></ul><ul><li>Prüft auf Validität in Abhängigkeit vom Doctype </li></ul><ul><li>Bei unseren Seiten im Allgemeinen HTML4 im Transitional Mode </li></ul><ul><li>Eventuell zukünftige Umstellung auf HTML5 oder XHTML im Strict Mode </li></ul>
  47. 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. 48. HTML Validator <ul><li>https ://addons.mozilla.org/de/firefox/addon/249 </li></ul><ul><li>Optional Aufruf des W3C-Validators (funktioniert nicht mit Stages) </li></ul><ul><li>http:// validator.w3.org/ </li></ul>
  49. 49. CSS Validator <ul><li>Eingebaut in die Fehler-Konsole des Firefox </li></ul>
  50. 50. JavaScript-Fehler <ul><li>Debugging über Firebug möglich </li></ul><ul><li>Logging aller Online-JavaScript-Fehler </li></ul><ul><li>In Zukunft über Tool einsehbar </li></ul>
  51. 51. Workshop Teil 2 <ul><li>In den nächsten Wochen </li></ul><ul><li>YUILoader vs. Jasmin </li></ul><ul><li>shop:ingrid </li></ul><ul><li>Conditional Comments </li></ul><ul><li>Variant-, Shop-, Sales-Channel-Templates </li></ul><ul><li>Dateiorganisation </li></ul><ul><li>etc. </li></ul>

×