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.

1&1 Frontend Workshop

0 comments

Notes on slide 1

3 Favorites