Am Ende ist doch alles HTML (Jax 2010)

Am Ende ist doch alles HTML Aspekte der Frontendentwicklung Jens Grochtdreis

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

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

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

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

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

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

Auch im Internet

Auch im Internet http://stern.de

http://snurl.com/t58ch

Problemfeld: Entwickler ‣ Erschreckende Codedeﬁzite 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/

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 ‣ ...

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

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 Deﬁnitives über das Zielsystem

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

Unsicherheiten ‣ Betriebssysteme ‣ Umgebungslicht ‣ Browser ‣ mobiler Zugriff ‣ Browserversionen ‣ Zugriffsgeschwindigkeit ‣ Monitorauﬂösungen ‣ Plugins ‣ Individuelle ‣ Javascript Einrichtungen des Browsers

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!

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

Screenshot von einem EeePC, 800x480px

http://snurl.com/t58fj

HTML zeichnet Bedeutung aus: Semantik

http://snipurl.com/vzwv8

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.

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

Fehlende Bedienelemente

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

Neue HTML5-Elemente

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

HTML ohne eigenes CSS

HTML ungestylt

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

http://www.iecss.com/

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

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/

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

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

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>

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>

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

Wen interessieren Browser? http://www.ﬂickr.com/photos/fmg2001/679774853/sizes/o/

Nur Entwickler!

Wen interessieren Browser? http://www.ﬂickr.com/photos/fmg2001/679774853/sizes/o/

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

http://www.ﬁndmebyip.com/litmus/#target-selector

Bremsfaktor IE

IE ≠ modern http://css3generator.com/

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

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%

Der Fortschritt richtet sich nach dem Langsamsten wegen dessen Verbreitung.

http://snurl.com/t58bi

http://snipurl.com/vtmpw

Gut: in Alternativen denken!

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/

http://grochtdreis.de	163
http://www.slideshare.net	45
http://intranet.minol.org	16
http://static.slidesharecdn.com	3
resource://brief-content	1
http://rss.bebl.eu	1

Am Ende ist doch alles HTML (Jax 2010)

by Jens Grochtdreis on May 06, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 229

Statistics

Am Ende ist doch alles HTML (Jax 2010) — Presentation Transcript