SlideShare ist ein Scribd-Unternehmen logo
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
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
Organisation und Übersichtlichkeit Werden Grafiken oder Includes nicht mehr benötigt? UI²-Tool
Organisation und Übersichtlichkeit Gibt es veraltete oder falsch konfigurierte Seiten? Page Configuration Matrix
Organisation und Übersichtlichkeit Beispiel einer 404-Fehlerseite (Telesales)
Organisation und Übersichtlichkeit Beachtung dieser Regeln als ständiger Prozeß der Qualitätssicherung Project-Mess-Tool zur übersichtlichen Visualisierung der genannten Kriterien
Workshop
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…
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.

Weitere ähnliche Inhalte

Andere mochten auch

Last- und Performancetesting
Last- und PerformancetestingLast- und Performancetesting
Last- und Performancetesting
Jürg Stuker
 
Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...
Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...
Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...
Deutsche Börse AG
 
Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...
Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...
Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...
co2online gem. GmbH
 
The Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellen
The Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellenThe Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellen
The Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellen
Kerstin Reichert
 
Packende AdWords-Anzeigentexte erstellen, testen und optimieren
Packende AdWords-Anzeigentexte erstellen, testen und optimierenPackende AdWords-Anzeigentexte erstellen, testen und optimieren
Packende AdWords-Anzeigentexte erstellen, testen und optimieren
Crealytics
 
Die Macht der internen Verlinkung - Seokomm2014 Vortrag
Die Macht der internen Verlinkung - Seokomm2014 VortragDie Macht der internen Verlinkung - Seokomm2014 Vortrag
Die Macht der internen Verlinkung - Seokomm2014 Vortrag
Thomas Zeithaml
 
BRAND MANAGEMENT – Bausteine für eine strukturgerechte Markenstrategie
BRAND MANAGEMENT – Bausteine für eine strukturgerechte MarkenstrategieBRAND MANAGEMENT – Bausteine für eine strukturgerechte Markenstrategie
BRAND MANAGEMENT – Bausteine für eine strukturgerechte Markenstrategie
sform – brain | vision | design
 
Oracle Advanced Pricing (Creating a discount modifier using qualifiers)
Oracle Advanced Pricing (Creating a discount modifier using qualifiers)Oracle Advanced Pricing (Creating a discount modifier using qualifiers)
Oracle Advanced Pricing (Creating a discount modifier using qualifiers)
Ahmed Elshayeb
 
The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017
LinkedIn
 

Andere mochten auch (9)

Last- und Performancetesting
Last- und PerformancetestingLast- und Performancetesting
Last- und Performancetesting
 
Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...
Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...
Konservative Anlageideen – Zehn Prozent in zwei Monaten, ist das möglich? Vol...
 
Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...
Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...
Gleichzeitiges Kühlen, Heizen und Klimatisieren (Günter Gamst, Daikin Aircond...
 
The Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellen
The Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellenThe Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellen
The Perfect Site Structure: Inhalte für Besucher und Bot optimal bereitstellen
 
Packende AdWords-Anzeigentexte erstellen, testen und optimieren
Packende AdWords-Anzeigentexte erstellen, testen und optimierenPackende AdWords-Anzeigentexte erstellen, testen und optimieren
Packende AdWords-Anzeigentexte erstellen, testen und optimieren
 
Die Macht der internen Verlinkung - Seokomm2014 Vortrag
Die Macht der internen Verlinkung - Seokomm2014 VortragDie Macht der internen Verlinkung - Seokomm2014 Vortrag
Die Macht der internen Verlinkung - Seokomm2014 Vortrag
 
BRAND MANAGEMENT – Bausteine für eine strukturgerechte Markenstrategie
BRAND MANAGEMENT – Bausteine für eine strukturgerechte MarkenstrategieBRAND MANAGEMENT – Bausteine für eine strukturgerechte Markenstrategie
BRAND MANAGEMENT – Bausteine für eine strukturgerechte Markenstrategie
 
Oracle Advanced Pricing (Creating a discount modifier using qualifiers)
Oracle Advanced Pricing (Creating a discount modifier using qualifiers)Oracle Advanced Pricing (Creating a discount modifier using qualifiers)
Oracle Advanced Pricing (Creating a discount modifier using qualifiers)
 
The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017The Top Skills That Can Get You Hired in 2017
The Top Skills That Can Get You Hired in 2017
 

Ähnlich wie 1&1 Frontend Workshop

Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
Jens Grochtdreis
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
Luka Peters
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
Jonathan Weiß
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
Peter Rozek
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
John Muñoz
 
Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from Scratch
NokiaAppForum
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Martin Leyrer
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
Die 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketingDie 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketing
Angelika Röck
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 
#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg
#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg
#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg
Digicomp Academy AG
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
Martin Leyrer
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 

Ähnlich wie 1&1 Frontend Workshop (20)

Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
Mobile Web Development from Scratch
Mobile Web Development from ScratchMobile Web Development from Scratch
Mobile Web Development from Scratch
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Die 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketingDie 10 groeßten Fehler im eMarketing
Die 10 groeßten Fehler im eMarketing
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg
#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg
#onedigicomp: Qualität entscheidet über Ihren Website-Erfolg
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 

Mehr von Nico Steiner

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
Nico Steiner
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
Nico Steiner
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
Nico Steiner
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
Nico Steiner
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 

Mehr von Nico Steiner (7)

WatchPug sneak preview
WatchPug sneak previewWatchPug sneak preview
WatchPug sneak preview
 
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-PerformancePHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
 
SenSEO Firefox Extension
SenSEO Firefox ExtensionSenSEO Firefox Extension
SenSEO Firefox Extension
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 

1&1 Frontend Workshop

  • 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
  • 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
  • 7. Performance YSlow Ohne Jasmin Mit Jasmin
  • 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
  • 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…
  • 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:
  • 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.
  • 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!“
  • 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.