Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Am Ende ist doch alles HTML (Jax 2010)

2,571 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/

×