Am Ende ist doch alles HTML (Jax 2010)

2,557 views

Published on

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

Published in: Technology
  • Be the first to comment

Am Ende ist doch alles HTML (Jax 2010)

  1. 1. Am Ende ist doch alles HTML Aspekte der Frontendentwicklung Jens Grochtdreis
  2. 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. 3. Ebenen einer Webseite Javascript CSS (X)HTML PHP, Java, Perl usw. Datenbanken
  4. 4. Meta-Thema: Qualität http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg
  5. 5. Schlechte Qualität sieht man http://snipurl.com/vtoow
  6. 6. Schlechte Qualität sieht man http://failblog.files.wordpress.com/2009/07/fail-owned-window-placement-fail.jpg
  7. 7. Schlechte Qualität sieht man http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg
  8. 8. Auch im Internet
  9. 9. Auch im Internet http://stern.de
  10. 10. Auch im Internet http://stern.de
  11. 11. http://snurl.com/t58ch
  12. 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. 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. 14. Nicht vergessen! ‣ Das Internet ist ein neues Medium! ‣ junges Medium ‣ rasante Entwicklung ‣ spannend ‣ atemberaubend ‣ umwälzend ‣ in ständigem Wandel begriffen
  15. 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. 16. Kontrollverlust - formal ‣ Wie können wir heute ins Internet gehen? ‣ PC, Notebook ‣ viele Betriebssysteme, Browser, Monitore ‣ Handy, PDA ‣ Spielkonsole ‣ TV ‣ Assistive Technologien
  17. 17. Unsicherheiten ‣ Betriebssysteme ‣ Umgebungslicht ‣ Browser ‣ mobiler Zugriff ‣ Browserversionen ‣ Zugriffsgeschwindigkeit ‣ Monitorauflösungen ‣ Plugins ‣ Individuelle ‣ Javascript Einrichtungen des Browsers
  18. 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. 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. 20. Screenshot von einem EeePC, 800x480px
  21. 21. http://snurl.com/t58fj
  22. 22. HTML zeichnet Bedeutung aus: Semantik
  23. 23. http://snipurl.com/vzwv8
  24. 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. 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
  26. 26. Fehlende Bedienelemente
  27. 27. 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">
  28. 28. Neue HTML5-Elemente
  29. 29. Kenne Dein (X)HTML! ‣ Wie sehen ungeordnete Listen aus? ‣ Wie sieht eine Überschrift dritten Grades aus? ‣ Wie sieht ein Zitat aus?
  30. 30. HTML ohne eigenes CSS
  31. 31. HTML ungestylt
  32. 32. browser.css Safari4 (Mac) Firefox 3.5 (Mac)
  33. 33. http://www.iecss.com/
  34. 34. Simpler Browser-Reset <style type="text/css" media="screen"> * {margin: 0; padding: 0; font-size: 100.01%; font-weight: normal;} </style>
  35. 35. 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/
  36. 36. 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
  37. 37. Diverse Stylesheets ‣ HTML sieht nicht aus, sondern transportiert Bedeutung und Struktur! ‣ Browser haben eigene Stylesheets ‣ Nutzer können eigene Stylesheets haben
  38. 38. 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>
  39. 39. 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>
  40. 40. Sinn von Tabellen ... http://bundesliga.de
  41. 41. Wen interessieren Browser? http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
  42. 42. Nur Entwickler!
  43. 43. Wen interessieren Browser? http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
  44. 44. Feindliche Umgebung http://www.gtalbot.org/BrowserBugsSection/
  45. 45. http://www.findmebyip.com/litmus/#target-selector
  46. 46. Bremsfaktor IE
  47. 47. IE ≠ modern http://css3generator.com/
  48. 48. Der IE6 stirbt nicht! http://snipurl.com/vzokk
  49. 49. 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%
  50. 50. Der Fortschritt richtet sich nach dem Langsamsten wegen dessen Verbreitung.
  51. 51. http://snurl.com/t58bi
  52. 52. http://snipurl.com/vtmpw
  53. 53. Gut: in Alternativen denken!
  54. 54. 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/

×