Am Ende ist doch alles HTML (Jax 2010)
3 gefällt mir•943 aufrufe
Das Dokument behandelt die Herausforderungen und Aspekte der Frontendentwicklung, insbesondere hinsichtlich der Verwendung von HTML, CSS und JavaScript. Es hebt die Bedeutung von Semantik in der Webentwicklung hervor und kritisiert häufige Fehler, wie fehlende Alt-Attribute in Bildern und logische Reihenfolgen bei Überschriften. Darüber hinaus wird die Notwendigkeit betont, flexible und zugängliche Webseiten zu gestalten, um den vielen unterschiedlichen Nutzungsszenarien gerecht zu werden.
Am Ende ist doch alles HTML (Jax 2010)
- 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
- 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
- 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
- 22. HTML zeichnet Bedeutung aus: Semantik
- 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
- 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">
- 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)
- 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
- 44. Nur Entwickler!
- 47. http://www.findmebyip.com/litmus/#target-selector
- 48. Bremsfaktor IE
- 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.
- 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/