Am Ende ist doch alles HTML

Aspekte der Frontendentwicklung

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

Jens Grochtdreis

Ebenen einer Webseite

Datenbanken

PHP, Java, Perl usw.

(X)HTML

CSS

Javascript

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

Meta-Thema: Qualität

Schlechte Qualität sieht man

http://snipurl.com/vtoow

Schlechte Qualität sieht man

http://failblog.files.wordpress.com/2009/07/fail-owned-window-placement-fail.jpg

Schlechte Qualität sieht man

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

Auch im Internet

Auch im Internet

http://stern.de

Auch im Internet

http://stern.de

http://snurl.com/t58ch

‣ 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

‣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

‣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 Definitives über das Zielsystem

Nicht vergessen!

‣Wie können wir heute ins Internet gehen?

‣PC, Notebook

‣viele Betriebssysteme, Browser, Monitore

‣Handy, PDA

‣Spielkonsole

‣TV

‣Assistive Technologien

Kontrollverlust - formal

Unsicherheiten

‣ Betriebssysteme

‣ Browser

‣ Browserversionen

‣ Monitorauflösungen

‣ Individuelle Einrichtungen des Browsers

‣ Umgebungslicht

‣ mobiler Zugriff

‣ Zugriffsgeschwindigkeit

‣ Plugins

‣ Javascript

‣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

http://snipurl.com/2c1yl

Flexibilität ist Stärke

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

Screenshot von einem EeePC, 800x480px

http://snurl.com/t58fj

HTML zeichnet Bedeutung aus: Semantik

http://snipurl.com/vzwv8

‣ 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

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

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

Wen interessieren Browser?

Nur Entwickler!

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

Wen interessieren Browser?

Feindliche Umgebung

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

http://www.findmebyip.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 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/