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