Am Ende ist doch alles HTML (Jax 2010)

61
Am Ende ist doch alles HTML Aspekte der Frontendentwicklung Jens Grochtdreis

description

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

Transcript of Am Ende ist doch alles HTML (Jax 2010)

Page 1: Am Ende ist doch alles HTML (Jax 2010)

Am Ende ist doch alles HTML

Aspekte der Frontendentwicklung

Jens Grochtdreis

Page 2: Am Ende ist doch alles HTML (Jax 2010)

‣ 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

Jens Grochtdreis

Page 3: Am Ende ist doch alles HTML (Jax 2010)

Ebenen einer Webseite

Datenbanken

PHP, Java, Perl usw.

(X)HTML

CSS

Javascript

Page 4: Am Ende ist doch alles HTML (Jax 2010)

http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg

Meta-Thema: Qualität

Page 5: Am Ende ist doch alles HTML (Jax 2010)

Schlechte Qualität sieht man

http://snipurl.com/vtoow

Page 7: Am Ende ist doch alles HTML (Jax 2010)

Schlechte Qualität sieht man

http://failblog.files.wordpress.com/2009/10/epic-fail-door-fail.jpg

Page 8: Am Ende ist doch alles HTML (Jax 2010)

Auch im Internet

Page 9: Am Ende ist doch alles HTML (Jax 2010)

Auch im Internet

http://stern.de

Page 10: Am Ende ist doch alles HTML (Jax 2010)

Auch im Internet

http://stern.de

Page 11: Am Ende ist doch alles HTML (Jax 2010)

http://snurl.com/t58ch

Page 12: Am Ende ist doch alles HTML (Jax 2010)

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

Problemfeld: Entwickler

Page 13: Am Ende ist doch alles HTML (Jax 2010)

‣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

‣ ...

Das Internet ist komplex

Page 14: Am Ende ist doch alles HTML (Jax 2010)

‣Das Internet ist ein neues Medium!

‣ junges Medium

‣rasante Entwicklung

‣ spannend

‣atemberaubend

‣umwälzend

‣ in ständigem Wandel begriffen

Nicht vergessen!

Page 15: Am Ende ist doch alles HTML (Jax 2010)

‣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

Nicht vergessen!

Page 16: Am Ende ist doch alles HTML (Jax 2010)

‣Wie können wir heute ins Internet gehen?

‣PC, Notebook

‣viele Betriebssysteme, Browser, Monitore

‣Handy, PDA

‣Spielkonsole

‣TV

‣Assistive Technologien

Kontrollverlust - formal

Page 17: Am Ende ist doch alles HTML (Jax 2010)

Unsicherheiten

‣ Betriebssysteme

‣ Browser

‣ Browserversionen

‣ Monitorauflösungen

‣ Individuelle Einrichtungen des Browsers

‣ Umgebungslicht

‣ mobiler Zugriff

‣ Zugriffsgeschwindigkeit

‣ Plugins

‣ Javascript

Page 18: Am Ende ist doch alles HTML (Jax 2010)

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

Page 19: Am Ende ist doch alles HTML (Jax 2010)

http://snipurl.com/2c1yl

Flexibilität ist Stärke

Die Flexibilität des Internet ist seine Stärke.Akzeptiert es! Macht Euch locker!

Page 20: Am Ende ist doch alles HTML (Jax 2010)

Screenshot von einem EeePC, 800x480px

Page 21: Am Ende ist doch alles HTML (Jax 2010)

http://snurl.com/t58fj

Page 22: Am Ende ist doch alles HTML (Jax 2010)

HTML zeichnet Bedeutung aus: Semantik

Page 23: Am Ende ist doch alles HTML (Jax 2010)

http://snipurl.com/vzwv8

Page 24: Am Ende ist doch alles HTML (Jax 2010)

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

Semantik

Page 25: Am Ende ist doch alles HTML (Jax 2010)

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

Page 26: Am Ende ist doch alles HTML (Jax 2010)
Page 27: Am Ende ist doch alles HTML (Jax 2010)
Page 28: Am Ende ist doch alles HTML (Jax 2010)

Fehlende Bedienelemente

Page 29: Am Ende ist doch alles HTML (Jax 2010)

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

Page 30: Am Ende ist doch alles HTML (Jax 2010)

Neue HTML5-Elemente

Page 31: Am Ende ist doch alles HTML (Jax 2010)

Kenne Dein (X)HTML!

‣ Wie sehen ungeordnete Listen aus?

‣ Wie sieht eine Überschrift dritten Grades aus?

‣ Wie sieht ein Zitat aus?

Page 32: Am Ende ist doch alles HTML (Jax 2010)

HTML ohne eigenes CSS

Page 33: Am Ende ist doch alles HTML (Jax 2010)

HTML ungestylt

Page 34: Am Ende ist doch alles HTML (Jax 2010)

browser.css

Safari4 (Mac) Firefox 3.5 (Mac)

Page 35: Am Ende ist doch alles HTML (Jax 2010)

http://www.iecss.com/

Page 36: Am Ende ist doch alles HTML (Jax 2010)

Simpler Browser-Reset

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

Page 37: Am Ende ist doch alles HTML (Jax 2010)

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/

Page 38: Am Ende ist doch alles HTML (Jax 2010)

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

Page 39: Am Ende ist doch alles HTML (Jax 2010)

Diverse Stylesheets

‣ HTML sieht nicht aus, sondern transportiert Bedeutung und Struktur!

‣ Browser haben eigene Stylesheets

‣ Nutzer können eigene Stylesheets haben

Page 40: Am Ende ist doch alles HTML (Jax 2010)

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>

Page 41: Am Ende ist doch alles HTML (Jax 2010)

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>

Page 42: Am Ende ist doch alles HTML (Jax 2010)

Sinn von Tabellen ...

http://bundesliga.de

Page 43: Am Ende ist doch alles HTML (Jax 2010)

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Wen interessieren Browser?

Page 44: Am Ende ist doch alles HTML (Jax 2010)

Nur Entwickler!

Page 45: Am Ende ist doch alles HTML (Jax 2010)

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

Wen interessieren Browser?

Page 46: Am Ende ist doch alles HTML (Jax 2010)

Feindliche Umgebung

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

Page 48: Am Ende ist doch alles HTML (Jax 2010)

Bremsfaktor IE

Page 49: Am Ende ist doch alles HTML (Jax 2010)

IE ≠ modern

http://css3generator.com/

Page 50: Am Ende ist doch alles HTML (Jax 2010)

Der IE6 stirbt nicht!

http://snipurl.com/vzokk

Page 51: Am Ende ist doch alles HTML (Jax 2010)

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%

Page 52: Am Ende ist doch alles HTML (Jax 2010)

Der Fortschritt richtet sich nach dem Langsamsten

wegen dessen Verbreitung.

Page 53: Am Ende ist doch alles HTML (Jax 2010)

http://snurl.com/t58bi

Page 54: Am Ende ist doch alles HTML (Jax 2010)
Page 55: Am Ende ist doch alles HTML (Jax 2010)

http://snipurl.com/vtmpw

Page 56: Am Ende ist doch alles HTML (Jax 2010)

Gut: in Alternativen denken!

Page 57: Am Ende ist doch alles HTML (Jax 2010)
Page 58: Am Ende ist doch alles HTML (Jax 2010)
Page 59: Am Ende ist doch alles HTML (Jax 2010)
Page 60: Am Ende ist doch alles HTML (Jax 2010)
Page 61: Am Ende ist doch alles HTML (Jax 2010)

Jens Grochtdreishttp://grochtdreis.de

http://twitter.com/Flockehttp://webkrauts.de

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/