Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Am Ende ist doch alles HTML

Am Ende ist doch alles HTML

Vortrag auf dem PHPSummit 2012. Die Komplexität des Frontends wird mit vielen Beispielen belegt und eine bessere Kommunikation in Teams gefordert.

Jens Grochtdreis

March 19, 2012
Tweet

More Decks by Jens Grochtdreis

Other Decks in Programming

Transcript

  1. • Selbständiger Frontendentwickler • Fachgutachter für Qualitätssicherung • 10 Jahre

    Agenturerfahrung • 13 Jahre Arbeit im und fürs Web • Gründer der Webkrauts • Blogger (http://grochtdreis.de/weblog) • Autor u.a. PHPMagazin, Webstandards-Magazin, Screenguide • Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT Jens Grochtdreis
  2. „Typische“ Zeitverteilung • Design und Abstimmung mit dem Kunden •

    3 Monate • Umsetzung des Designs in HTML/CSS/JavaScript • 3 Tage • Backendprogrammierung und Implementierung des Frontends • 3 Wochen
  3. Frontend ist wichtig • Beim Endkunden kommen HTML, CSS und

    Javascript an, nicht PHP, Java oder Ruby. • Das Frontend beeinflusst die Performance sehr stark, stärker als das Backend.
  4. Typische Frontendaufgaben • source-order für SEO optimieren • Theming •

    auf mobile Geräte anpassen • responsive Webdesign • Performance • leichte Wartbarkeit
  5. Ein Slider - Grobskizze   IMAGE Kategorie Überschrift Hier

    steht ein kurzer erklärender Text. Infos Zusatzinfo1 Zusatzinfo2 IMAGE Kategorie Überschrift Hier steht ein kurzer erklärender Text. Infos Zusatzinfo1 Zusatzinfo2 IMAGE Kategorie Überschrift Hier steht ein kurzer erklärender Text. Infos Zusatzinfo1 Zusatzinfo2
  6. Gutes Fallback http://jsfiddle.net/Flocke/VzSHG/ IE8 moderne Browser Diese Demo arbeitet mit

    einem CSS3-Selektor. oldIE kann man in diesem Falle mit JavaScript weiterhelfen.
  7. Mögliche Strategie • Genauer definieren, welche Zusatzaufwände eine möglichst gute

    Simulation moderner Techniken für den IE bedeutet. • runde Ecken und Schatten für die gesamte Site • mit CSS3: 30 Minuten, 1 Frontendentwickler • für oldIE: ca. 4 bis 5 Stunden für den Frontendentwickler, mindestens die gleiche Zeit für Grafik und Backend
  8. Graceful Degredation • Fokus ist auf den modernsten Browsern •

    ältere Browser bekommen eine abgespeckte Version http://stuffandnonsense.co.uk/ - alte version
  9. • runde Ecken • linear-gradient • transform • box-shadow •

    text-shadow • content-Generierung mit :after und :before
  10. Wartungshölle • Für jede Farbe eine eigene Grafik (auch für

    hover bei Links!) • Runde Ecken auf Verläufen oder Transparenzen sind ganz übel als Grafik • Jede Änderung und Anpassung geschieht in Photoshop/Fireworks • Viele Requests • Keine Skalierung
  11. Einfacher Test • Folgendes in unterschiedlichen Browsern auf Windows XP,

    Windows 7 und Mac OSX anschauen: • beliebige Webfonts • alle Formularelemente - ungestylt • Checkbox & Radiobutton padding geben
  12. Der IE macht viel Arbeit • Je älter der IE

    wird, umso mehr muss man sich Zeit für seine Fehler nehmen. • Erst ab Version 9 werden moderne Techniken unterstützt. Für ältere Versionen brauchen wir Tricks oder Polyfills. Da kostet nicht nur das Testen Zeit.
  13. An die Konsequenzen denken http://code.google.com/p/html5shim/ http://www.modernizr.com/ • HTML5-Seiten funktionieren in

    alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.
  14. HTML5 Video-Testcase • Über ein HTML5-Video einen Layer mit einem

    oder mehreren Links legen. • Die Links sind auf dem iPad nur anklickbar, wenn man das Attribut „controls“ entfernt. • Dann muss man aber die Bedienelemente mit JavaScript und CSS nachempfinden. • Alle anderen OS sind okay. http://jsfiddle.net/Flocke/durge/
  15. Barrierefreiheit ≠ Webseiten für Blinde • Blinde und Sehbedinderte •

    körperlich Behinderte (bspw. Contergangeschädigte) • Gehörlose • Lernbehinderte • Farbfehlsichtige http://snipurl.com/11s6vd
  16. Barrierefreiheit hat viele Zielgruppen • Durch temporäre Schäden wie einen

    Armbruch ist man auch in seiner Motorik stark beeinträchtigt. • Ältere Menschen sind weniger aufnahmefähig und sehen schlechter. Diese Zielgruppe wächst stetig und hat die größten Zuwachsraten. • Designing for our future selves!
  17. Keine vermeidbaren Barrieren • Das Netz ermöglicht es erstmals, dass

    JEDER auf Informationen zugreifen kann und in Interaktion treten kann. • Warum also sich selber und die Reichweite des eigenen Angebotes beschränken? http://failblog.org/2010/04/08/epic-fail-photos-hand-rail-fail/
  18. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de Diese Präsentation steht unter der

    Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/