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 Slide

  2. View Slide

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

    View Slide

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

    View Slide

  5. HTML ist simpel!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. Oft wird das Frontend
    nebenher gemacht

    View Slide

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

    View Slide

  13. 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 Slide

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

    View Slide

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

    View Slide

  16. Das Endprodukt eines
    Frontendentwicklers ist nur
    ein Zwischenprodukt.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. Im Frontend läuft alles
    zusammen.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. Auch im Internet

    View Slide

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

    View Slide

  32. http://stern.de

    View Slide

  33. http://www.sueddeutsche.de/

    View Slide

  34. http://goo.gl/FSzIa

    View Slide

  35. Semantik

    View Slide

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

    View Slide

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

    View Slide

  38. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. Neue Formularelemente

    View Slide

  43. Typische Fehler

    View Slide

  44. 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 Slide

  45. Mal ohne Semantik

    View Slide

  46. Mal mit Semantik

    View Slide

  47. Das falsche Element!

    View Slide

  48. Moderne Techniken helfen
    Kosten zu sparen!

    View Slide

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

    View Slide

  50. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. 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 Slide

  59. Recherche ist wichtig. Und
    am Ball bleiben!

    View Slide

  60. http://css3test.com/

    View Slide

  61. http://html5please.com/

    View Slide

  62. http://caniuse.com/

    View Slide

  63. Zeitersparnis, weil alles in
    einer Hand ist!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. Buttons mit CSS3

    View Slide

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

    View Slide

  69. Webseiten sehen nicht
    überall gleich aus!

    View Slide

  70. 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 Slide

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

  72. neue semantische Elemente

    View Slide

  73. 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 Slide

  74. Mit JavaScript

    View Slide

  75. Ohne JavaScript

    View Slide

  76. Gut: in Alternativen denken!

    View Slide

  77. Flash-Element

    View Slide

  78. Alternative zu Flash

    View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  83. Hilfe holen

    View Slide

  84. Frameworks & Tools nutzen!

    View Slide

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

    View Slide

  86. 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 Slide