Pro Yearly is on sale from $80 to $50! »

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

January 19, 2015
Tweet

Transcript

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

    ist wichtig Jens Grochtdreis
  2. None
  3. Ebenen einer Webseite Datenbanken PHP, Java, Perl usw. (X)HTML CSS

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

  5. HTML ist simpel!

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

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

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

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

  10. The browser is a really hostile programming environment. Douglas Crockford

    https://www.flickr.com/photos/clement127/15348079616
  11. Oft wird das Frontend nebenher gemacht

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

  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.
  14. Typische Frontendaufgaben ‣ source-order für SEO optimieren ‣ Theming ‣

    auf mobile Geräte anpassen ‣ responsive Webdesign ‣ Performance ‣ leichte Wartbarkeit
  15. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

  16. Das Endprodukt eines Frontendentwicklers ist nur ein Zwischenprodukt.

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

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

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

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

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

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

  23. Im Frontend läuft alles zusammen.

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

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

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

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

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

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

  30. Auch im Internet

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

  32. http://stern.de

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

  34. http://goo.gl/FSzIa

  35. Semantik

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

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

  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
  39. https://twitter.com/ddprrt/status/489014859032694784

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

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

  42. Neue Formularelemente

  43. Typische Fehler

  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
  45. Mal ohne Semantik

  46. Mal mit Semantik

  47. Das falsche Element!

  48. Moderne Techniken helfen Kosten zu sparen!

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

  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
  51. Graceful Degredation ‣ Fokus ist auf den modernsten Browsern ‣

    ältere Browser bekommen eine abgespeckte Version http://stuffandnonsense.co.uk/ - alte version
  52. http://www.flickr.com/photos/jdn/3365996669/ Eine Rolltreppe wird zur Treppe, wenn sie nicht läuft.

    Die Nutzung ist so prinzipiell gesichert!
  53. Progressive Enhancement http://www.alistapart.com/articles/understandingprogressiveenhancement/ ‣ Fokus ist auf den Content, denn

    um den geht es am Ende (fast) immer
  54. Brutal Degredation bis einschließlich IE8 moderne Browser http://www.fillerati.com/

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

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

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

  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.
  59. Recherche ist wichtig. Und am Ball bleiben!

  60. http://css3test.com/

  61. http://html5please.com/

  62. http://caniuse.com/

  63. Zeitersparnis, weil alles in einer Hand ist!

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

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

  66. ‣ runde Ecken ‣ linear-gradient ‣ transform ‣ box-shadow ‣

    text-shadow ‣ content-Generierung mit :after und :before
  67. Buttons mit CSS3

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

  69. Webseiten sehen nicht überall gleich aus!

  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!
  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.
  72. neue semantische Elemente

  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.
  74. Mit JavaScript

  75. Ohne JavaScript

  76. Gut: in Alternativen denken!

  77. Flash-Element

  78. Alternative zu Flash

  79. None
  80. None
  81. None
  82. None
  83. Hilfe holen

  84. Frameworks & Tools nutzen!

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

  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/