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.

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