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

Am Ende ist doch alles HTML

Am Ende ist doch alles HTML

Vor der JavaUG Hessen in Kassel sprach ich über die sehr speziellen Herausforderungen und Eigenheiten der Frontendentwicklung. Dieser Bereich wird allzu oft auf die leichte Schulter genommen und zu oft von wenig Kundigen betreut. Dabei darf man die Bedeutung eines guten Frontends nicht unterschätzen.

Jens Grochtdreis

January 19, 2015
Tweet

More Decks by Jens Grochtdreis

Other Decks in Technology

Transcript

  1. Am Ende ist doch alles HTML -
    ein gutes Frontend ist wichtig
    Jens Grochtdreis

    View full-size slide

  2. Ebenen einer Webseite
    Datenbanken
    PHP, Java, Perl usw.
    (X)HTML
    CSS
    Javascript

    View full-size slide

  3. Java steht zu JavaScript ...
    http://selfhtml.apsel-mv.de/java-javascript/

    View full-size slide

  4. HTML ist simpel!

    View full-size slide

  5. Im Vergleich zu PHP, Java,
    Perl, Javascript ... stimmt das
    sicher!

    View full-size slide

  6. Nicht die Sprache selbst ist
    das Problem. Es ist die
    Umgebung!

    View full-size slide

  7. http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

    View full-size slide

  8. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

    View full-size slide

  9. The browser is
    a really hostile
    programming
    environment.
    Douglas Crockford
    https://www.flickr.com/photos/clement127/15348079616

    View full-size slide

  10. Oft wird das Frontend
    nebenher gemacht

    View full-size slide

  11. http://www.commitstrip.com/en/2014/12/12/when-the-front-end-dev-is-on-vacation/

    View full-size slide

  12. Frontend ist wichtig
    ‣ Beim Endkunden kommen HTML, CSS und
    Javascript an, nicht PHP, Java oder Ruby.
    ‣ Das Frontend beeinflusst die erlebte
    Performance sehr stark, stärker als das
    Backend.

    View full-size slide

  13. Typische Frontendaufgaben
    ‣ source-order für SEO optimieren
    ‣ Theming
    ‣ auf mobile Geräte anpassen
    ‣ responsive Webdesign
    ‣ Performance
    ‣ leichte Wartbarkeit

    View full-size slide

  14. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

    View full-size slide

  15. Das Endprodukt eines
    Frontendentwicklers ist nur
    ein Zwischenprodukt.

    View full-size slide

  16. Wir wissen nicht, in welcher
    Umgebung und in welcher
    Form unser Endprodukt

    View full-size slide

  17. Für Projektmanager und
    Designer ist das
    unvorstellbar.

    View full-size slide

  18. http://www.flickr.com/photos/wanhoff/356677564/
    Photoshop und Word haben
    immer EIN Endprodukt.

    View full-size slide

  19. Wir haben viele
    Endprodukte
    http://www.flickr.com/photos/danm_cool/3163625498/

    View full-size slide

  20. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

    View full-size slide

  21. http://www.flickr.com/photos/artrock2006/4177475479/
    Alle Beteiligten sollten frühzeitig
    offen kommunizieren.
    http://www.flickr.com/photos/artrock2006/4177475479/

    View full-size slide

  22. Im Frontend läuft alles
    zusammen.

    View full-size slide

  23. Hier stellt sich heraus, ob
    das Design bedienbar und
    wartbar ist.

    View full-size slide

  24. Man erkennt, ob der
    Entwickler Ahnung und
    ausreichend Zeit hatte.

    View full-size slide

  25. https://twitter.com/tcaspers/status/543313650396983296

    View full-size slide

  26. https://twitter.com/tcaspers/status/543313650396983296

    View full-size slide

  27. https://twitter.com/tcaspers/status/543313650396983296

    View full-size slide

  28. Schlechte Qualität sieht man
    http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg

    View full-size slide

  29. Auch im Internet

    View full-size slide

  30. Warum keine Überschrift?
    http://stern.de

    View full-size slide

  31. http://stern.de

    View full-size slide

  32. http://www.sueddeutsche.de/

    View full-size slide

  33. http://goo.gl/FSzIa

    View full-size slide

  34. http://dabblet.com/gist/7b9990fae51783cabf56

    View full-size slide

  35. Alles sollte einen Sinn haben
    http://www.commitstrip.com/en/2014/12/12/when-the-front-end-dev-is-on-vacation/

    View full-size slide

  36. Alles sollte Sinn haben
    ‣ Ein Link wird mit einem DIV kombiniert.
    ‣ Der Link soll eine Checkbox imitieren, die
    nebenbei auch existiert, aber ausgeblendet ist.
    ‣ Das DIV soll ein Label imititieren.
    https://twitter.com/tcaspers/status/506036082295988224

    View full-size slide

  37. https://twitter.com/ddprrt/status/489014859032694784

    View full-size slide

  38. Viele Elemente
    http://html5doctor.com/

    View full-size slide

  39. Neue Formularelemente
    http://www.wufoo.com/html5/#types

    View full-size slide

  40. Neue Formularelemente

    View full-size slide

  41. Typische Fehler

    View full-size slide

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

    View full-size slide

  43. Mal ohne Semantik

    View full-size slide

  44. Mal mit Semantik

    View full-size slide

  45. Das falsche Element!

    View full-size slide

  46. Moderne Techniken helfen
    Kosten zu sparen!

    View full-size slide

  47. Umgekehrt sollten wir
    Aufschläge kalkulieren, wenn
    oldIE eine Extrawurst benötigt.

    View full-size slide

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

    View full-size slide

  49. Graceful Degredation
    ‣ Fokus ist auf den modernsten Browsern
    ‣ ältere Browser bekommen eine abgespeckte
    Version
    http://stuffandnonsense.co.uk/ - alte version

    View full-size slide

  50. http://www.flickr.com/photos/jdn/3365996669/
    Eine Rolltreppe wird zur Treppe, wenn sie nicht läuft.
    Die Nutzung ist so prinzipiell gesichert!

    View full-size slide

  51. Progressive Enhancement
    http://www.alistapart.com/articles/understandingprogressiveenhancement/
    ‣ Fokus ist auf den Content, denn um den geht
    es am Ende (fast) immer

    View full-size slide

  52. Brutal Degredation
    bis einschließlich IE8 moderne Browser
    http://www.fillerati.com/

    View full-size slide

  53. Problematische Strategie
    Irgendwie bekommen wir das geregelt ...
    http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg

    View full-size slide

  54. Die drei wichtigsten
    Best Practices
    Nachdenken Recherchieren
    http://goo.gl/HbFx0
    http://goo.gl/NYGeI
    Experimentieren
    http://goo.gl/LohPq

    View full-size slide

  55. An ein Fallback denken!
    moderne
    Browser
    IE8
    http://jsfiddle.net/Flocke/BEJRM/

    View full-size slide

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

    View full-size slide

  57. Recherche ist wichtig. Und
    am Ball bleiben!

    View full-size slide

  58. http://css3test.com/

    View full-size slide

  59. http://html5please.com/

    View full-size slide

  60. http://caniuse.com/

    View full-size slide

  61. Zeitersparnis, weil alles in
    einer Hand ist!

    View full-size slide

  62. http://maddesigns.de/teaserboxen-komplett-ohne-bilder-css3-adventskalender-tag-9-489.html

    View full-size slide

  63. http://jsfiddle.net/Flocke/azvGv/
    CSS3-fähiger Browser IE8

    View full-size slide

  64. ‣ runde Ecken
    ‣ linear-gradient
    ‣ transform
    ‣ box-shadow
    ‣ text-shadow
    ‣ content-Generierung
    mit :after und :before

    View full-size slide

  65. Buttons mit CSS3

    View full-size slide

  66. http://www.webdesignerwall.com/demo/css-buttons.html
    Skalieren mit Inhalt und Seite

    View full-size slide

  67. Webseiten sehen nicht
    überall gleich aus!

    View full-size slide

  68. Einfacher Test
    ‣ Folgendes in unterschiedlichen Browsern auf
    Windows und Mac OSX anschauen:
    ‣ beliebige Webfonts
    ‣ alle Formularelemente - ungestylt
    ‣ Checkbox & Radiobutton padding geben
    ‣ Windows mal eine andere Oberfläche geben!

    View full-size slide

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

    View full-size slide

  70. neue semantische Elemente

    View full-size slide

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

    View full-size slide

  72. Mit JavaScript

    View full-size slide

  73. Ohne JavaScript

    View full-size slide

  74. Gut: in Alternativen denken!

    View full-size slide

  75. Flash-Element

    View full-size slide

  76. Alternative zu Flash

    View full-size slide

  77. Frameworks & Tools nutzen!

    View full-size slide

  78. Frontendentwicklung ist
    nicht einfach!
    http://failblog.files.wordpress.com/2009/07/128932678618285916.jpg

    View full-size slide

  79. 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/

    View full-size slide