1&1 Frontend Workshop

Frontend-Workshop Informationen, Workshop, Know-How

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

Informationen

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

Performance
Firebug

Performance
YSlow

Performance
YSlow
Ohne Jasmin Mit Jasmin

Performance
YSlow

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

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.“

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

Performance
CSS Sprites
Statt 6 Requests nur 1 Request

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

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)

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.“

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

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

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

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

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

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

Werden Grafiken oder Includes nicht mehr benötigt?
UI²-Tool

Gibt es veraltete oder falsch konfigurierte Seiten?
Page Configuration Matrix

Beispiel einer 404-Fehlerseite (Telesales)

Beachtung dieser Regeln als ständiger Prozeß der Qualitätssicherung
Project-Mess-Tool zur übersichtlichen Visualisierung der genannten Kriterien

Workshop

CSS Sprites
<ul id="skyline">
<li id="panel1b"><a href="#1"></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…

CSS Sprites

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

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; }

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 </h3> <ul class=„ items “> <li>…</li> <li>…</li> </ul> <h3> Optional: </h3> <ul class=„ items “> <li>…</li> </ul> </div> Besser:

Semantik

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>

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

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

Firebug
http ://www.getfirebug.com/

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 ]

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

Validierung

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

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

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

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

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

CSS Validator
Eingebaut in die Fehler-Konsole des Firefox

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

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

http://webdev.blog.tennessee.schlund.de	11
http://www.nicosteiner.de	11
http://nicosteiner.com	6
http://nicosteiner.de	2
http://www.slideshare.net	2
http://192.168.10.100	1

1&1 Frontend Workshop

by Nico Steiner

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 33

Statistics

1&1 Frontend Workshop Presentation Transcript