Ihm Rahmen der Java-Konferenz "Jax 2010" führte ich in die Problemfelder und Denkweisen eines Frontendentwicklers ein.

1. Am Ende ist doch alles
HTML
Aspekte der Frontendentwicklung
Jens Grochtdreis

2. Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 11 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor des PHPMagazins, PHPUser,
Webstandards-Magazins, T3N
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

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

4. Meta-Thema: Qualität
http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg

5. Schlechte Qualität sieht man
http://snipurl.com/vtoow

6. Schlechte Qualität sieht man
http://failblog.files.wordpress.com/2009/07/fail-owned-window-placement-fail.jpg

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

8. Auch im Internet

9. Auch im Internet
http://stern.de

10. Auch im Internet
http://stern.de

11. http://snurl.com/t58ch

12. Problemfeld: Entwickler
‣ Erschreckende Codedefizite laut Opera-Studie:
‣ 58,5% Webseiten ohne Überschriften-Elemente
‣ 7,1% mit Überschriften ohne logische
Reihenfolge
‣ 24,9% mit Bildern ohne alt-Attribute
http://www.einfach-fuer-alle.de/blog/id/2505/

13. Das Internet ist komplex
‣ Wir nutzen sehr viele verschiedene Standards und
Technologien, um eine Website zu betreiben.
‣ (X)HTML, CSS, Javascript, DOM 1-3
‣ Flash, Flex, SWF
‣ PHP, ASP, Perl, Java
‣ MySQL, PostgreSQL
‣ XML, XSLT
‣ ...

14. Nicht vergessen!
‣ Das Internet ist ein neues Medium!
‣ junges Medium
‣ rasante Entwicklung
‣ spannend
‣ atemberaubend
‣ umwälzend
‣ in ständigem Wandel begriffen

15. Nicht vergessen!
‣ Das Internet bietet viele unterschiedliche Zugänge
zu Informationen
‣ Am Monitor lesen
‣ Ausdrucken
‣ Vorlesen lassen
‣ Formate sind anpassbar
‣ Inhalte lassen sich leicht rudimentär übersetzen
‣ Wir wissen nichts Definitives über das Zielsystem

16. Kontrollverlust - formal
‣ Wie können wir heute ins Internet gehen?
‣ PC, Notebook
‣ viele Betriebssysteme, Browser, Monitore
‣ Handy, PDA
‣ Spielkonsole
‣ TV
‣ Assistive Technologien

17. Unsicherheiten
‣ Betriebssysteme ‣ Umgebungslicht
‣ Browser ‣ mobiler Zugriff
‣ Browserversionen ‣ Zugriffsgeschwindigkeit
‣ Monitorauflösungen ‣ Plugins
‣ Individuelle ‣ Javascript
Einrichtungen des
Browsers

18. Flexibilität ist wichtig
‣ Wir können nicht mehr sicher vorhersagen, wie
jemand unsere Seite sieht/liest.
‣ Deshalb: einen für möglichst viele gangbaren Weg
beschreiten
‣ Erst der Inhalt, dann das Layout!
‣ Der Inhalt ist das Wichtigste!

19. Flexibilität ist Stärke
Die Flexibilität des Internet ist seine Stärke.
Akzeptiert es! Macht Euch locker!
http://snipurl.com/2c1yl

20. Screenshot von einem EeePC, 800x480px

21. http://snurl.com/t58fj

22. HTML zeichnet Bedeutung
aus: Semantik

23. http://snipurl.com/vzwv8

24. Semantik
‣ Mit der Bedeutung der Inhalte beschäftigen
‣ Die Struktur erfassen und aufschreiben
‣ richtig:
<h2>Überschrift</h2>
‣ falsch:
<div class="headline">Überschrift</div>
‣ Eine semantisch ausgezeichnete Seite zeigt,
daß man sich Gedanken über seine Arbeit
gemacht hat.

25. Webseiten: mehr als nur
Dokumente
‣ Die Dokumentenanalogie ist alt.
‣ Ziel waren wissenschaftliche Texte.
‣ HTML5 ist der Versuch, der Realität gerecht
zu werden. Der erste Schritt!
‣ Es gibt immer mehr Applikationen.
‣ Es fehlen Bedienelemente
‣ Webseiten sind immer seltener
Dokumente

28. Fehlende Bedienelemente

29. HTML5-Formularelemente
Search: <input type="search">
URL: <input type="url">
Telephone: <input type="telephone">
Number: <input type="number">
Range: <input type="range">
Color: <input type="color">
Datetime Local: <input type="datetime-local">
Datetime: <input type="datetime">
Date: <input type="date">
Month: <input type="month">
Week: <input type="week">
Time: <input type="time">

30. Neue HTML5-Elemente

31. Kenne Dein (X)HTML!
‣ Wie sehen ungeordnete Listen aus?
‣ Wie sieht eine Überschrift dritten Grades
aus?
‣ Wie sieht ein Zitat aus?

32. HTML ohne eigenes CSS

33. HTML ungestylt

34. browser.css
Safari4 (Mac) Firefox 3.5 (Mac)

35. http://www.iecss.com/

36. Simpler Browser-Reset
<style type="text/css" media="screen">
* {margin: 0; padding: 0; font-size: 100.01%; font-weight: normal;}
</style>

37. Yahoo-Reset
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before, q:after{content:'';}
abbr, acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
http://developer.yahoo.com/yui/3/cssreset/

38. Eric Meyers Reset
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
vertical-align: baseline;background: transparent; }
body { line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
/* remember to define focus styles! */
:focus { outline: 0;}
/* remember to highlight inserts somehow! */
ins { text-decoration: none;}
del { text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0;}
http://meyerweb.com/eric/tools/css/reset/index.html

39. Diverse Stylesheets
‣ HTML sieht nicht aus, sondern transportiert
Bedeutung und Struktur!
‣ Browser haben eigene Stylesheets
‣ Nutzer können eigene Stylesheets haben

40. Keine Tabellen? Doch!
‣ Tabellen sind für tabellarische Daten da!
‣ Für Layoutzwecke gibt es CSS!
‣ Eine Tabelle kann komplex werden und ist
mehr als nur <table>, <tr> und <td>

41. Keine Tabellen? Doch!
<table summary="Table summary">
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

42. Sinn von Tabellen ...
http://bundesliga.de

43. Wen interessieren Browser?
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

44. Nur Entwickler!

45. Wen interessieren Browser?
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

46. Feindliche Umgebung
http://www.gtalbot.org/BrowserBugsSection/

47. http://www.findmebyip.com/litmus/#target-selector

48. Bremsfaktor IE

49. IE ≠ modern
http://css3generator.com/

50. Der IE6 stirbt nicht!
http://snipurl.com/vzokk

51. Der IE6 stirbt nicht!
‣ Webhits.de, 4. Mai 2010
‣ IE insges.: 63%
‣ IE6: 38,8%
‣ Firefox: 30,5%
‣ Safari: 3,4%
‣ Opera: 1,1%
‣ Chrome: 0,5%

52. Der Fortschritt richtet sich
nach dem Langsamsten
wegen dessen Verbreitung.

53. http://snurl.com/t58bi

55. http://snipurl.com/vtmpw

56. Gut: in Alternativen denken!

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