Am Ende ist doch alles HTML (Uni Mainz)

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


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


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

Auch im Internet

http://stern.de

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
‣ 4,13% der Testseiten validierten

http://www.einfach-fuer-alle.de/blog/id/2505/

Validität ist nicht alles
<form action="helpdesk.html" method="post" enctype="multipart/form-data" id="emailform">
<table class="webform_table">
<tr>
<td class="webform_label">Name des Meldenden / Ansprechpartners: *</td>
<td class="webform_field"><input type="text" name="InputField-1" value="" class="onlineform" /></td>
</tr>

<tr>
<td class="webform_label">Email:*</td>
<td class="webform_field"><input type="text" name="InputField-4" value="@khwe.de" class="onlineform" /></td>
</tr>
<tr>
<td class="webform_label_multi">Bitte geben Sie hier Ihre Meldung ein:*</td>
<td class="webform_field_multi"><textarea name="InputField-6" class="onlineform" rows="6" cols="20"></textarea></td>
</tr>
<tr>
<td> </td>
<td class="webform_button">Alle Eingabefelder, die mit einem Stern (*) versehen sind, sind Pflichtfelder.</td>
</tr>
<tr>
<td> </td>
<td class="webform_button"><input type="submit" value="Formular absenden" class="formbutton submitbutton" /></td>
</tr>
</table>
</form>

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 Stärke

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

http://snipurl.com/2c1yl

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!

Screenshot von einem EeePC, 800x480px

Wichtiger Hinweis
Zur Nutzung der Vodafone
Videothek benötigen Sie einen
Rechner mit Windows-
Betriebssystem in Verbindung
mit Internet Explorer ab Version
6 oder Firefox ab Version 3

http://videothek.vodafone.de/

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

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

Überschriften
_ Überschriften sind eine Navigationsmöglichkeit für
Screenreader.
_ Wikis generieren aus den Textüberschriften eine
seiteninterne Navigation, ein Inhaltsverzeichnis.

Überschriften
‣ Webseiten sind immer seltener Dokumente
‣ Kann eine Webseite mehr als eine h1
vertragen?
‣ Nur eine h1? Warum?
‣ Wir vermeiden sonst Analogien zur
Printwelt
‣ Struktur für Sehende und Blinde anders?
‣ Reichen sechs Überschriftsebenen?

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

browser.css

Safari4 (Mac) Firefox 3.5 (Mac)

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

_ Letztendliche Sicherheit über die Darstellung einer
Seite gibt es nicht. Man kann aber dafür sorgen, daß ein
Layout nicht allzu schnell "zerstört" wird.

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/

Bremsfaktor IE
‣ Der IE (bis Version 8) kann bedeutend
weniger als andere Browser.
‣ Der IE6 stirbt nicht!
‣ Der Fortschritt richtet sich nach dem
Langsamsten wegen dessen Verbreitung.

_Nur Entwickler interessieren sich
für Browser.

„Schweizer Messer“ für IE6
‣ position: relative
‣ zoom: 1
‣ height: 1%
‣ display: inline (bei Floats)

Der Frontendentwickler ist
ein Übersetzer!

Übersetzer
‣ Der Nutzer sieht nur das Frontend.
‣ Die Technik dahinter (bspw. CMS)
interessiert den Konsumenten nicht.
‣ Entscheidungen aller anderen „Gewerke“
ﬂießen in das Frontend mit ein.
‣ Hilfe zur Verständigung zwischen Graﬁk,
Beratung und Backend aus Eigeninteresse.

Agenturalltag

http://vikiworks.com/2007/08/27/ﬂat-panel-monitor-icon/

Layoutwünsche
‣ Nicht alle Layoutwünsche lassen sich einfach
lösen.
‣ Manche erkauft man sich mit
Einschränkungen
‣ Im Layout herrscht immernoch die
Printanalogie vor
‣ Die Möglichkeiten differieren zwischen
Browsern

Gleich hohe Boxen

http://grochtdreis.de/

Mit einer Tabelle kein
Problem!

Ohne Layouttabellen
‣ Die Elemente einer Seite haben keine
Beziehung zueinander, es sei denn, es sind
Kindelemente!

Gleich hohe Boxen

<h2>Aus meinem Weblog</h2>
<div id="teaser" class="subcolumns">
<div class="c33l">
<div class="subcl equalise eins">
<h3><a href="toller-link.html">Überschrift</a></h3>
<p>Kurzbeschreibung bzw. Anriss des Inhalts</p>
<p class="weiter"><a href="#">Den ganzen Artikel lesen.</a></p>
</div>
</div>
<div class="c33l">
<div class="subc equalise zwei">

</div>
</div>
<div class="c33r">
<div class="subcr equalise drei">

</div>
</div>
</div>

Das DOM

div#teaser.subcolumns

div.c33l div.c33l div.c33r

div.subcl div.subc div.subcr

h3 p p.weiter h3 p p.weiter h3 p p.weiter

Gleich hohe Boxen
moderne Browser
.equalize > div { .equalize, .equalize .subcolumns {
display:table-cell; overflow:visible;
float:none; display:table;
margin:0; table-layout:fixed;
overflow:hidden; }
vertical-align:top;
IE6 und 7 }

http://yaml.de http://www.positioniseverything.net/articles/onetruelayout/equalheight

Gleich hohe Boxen
moderne Browser
/* Fix for:"Linking to anchors in elements within the containing block" Problem in IE5.x & IE 6.0 */
* html .equalize, * html .equalize .subcolumns { overflow:visible; display:block; }
.equalize, .equalize .subcolumns { overflow:hidden; display:block; }

/* transform CSS tables back into floats */
.equalize .c20l,.equalize .c40l,.equalize .c60l,.equalize .c80l,

IE6 und 7
.equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize
.equalize .c62l,.equalize .c66l,.equalize .c75l {
.c50l,

float:left; display:inline;
padding-bottom:32767px;
margin-bottom:-32767px;
}
.equalize .c20r,.equalize .c40r,.equalize .c60r,.equalize .c80r,
.equalize .c25r,.equalize .c33r,.equalize .c38r,.equalize .c50r,
.equalize .c62r,.equalize .c66r,.equalize .c75r {
float:right; margin-left:-5px; display:inline;
padding-bottom:32767px;
margin-bottom:-32767px;
}

http://yaml.de http://www.positioniseverything.net/articles/onetruelayout/equalheight

Gleich hohe Boxen

http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html

Formularfelder
‣ Passworte werden NIE
angezeigt
‣ Runde Ecken kann man
mittels CSS3 hinzufügen
‣ Vorgegebener Text ist
Stolperfalle für Nutzer
und Entwickler
‣ Label haben ihren Sinn! Passwort

‣ Gerne sehr klein und
schwer bedienbar

Runde Ecken

http://grochtdreis.de/

Zwei Welten:
IE und moderne Browser

Runde Ecken

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

Runde Ecken - The ThrashBox

http://www.vertexwerks.com/tests/sidebox/

Wartungshölle
‣ Für jede Farbe eine eigene Graﬁk (auch für
hover bei Links!)
‣ Runde Ecken auf Verläufen oder
Transparenzen sind ganz übel als Graﬁk
‣ Jede Änderung und Anpassung geschieht in
Photoshop/Fireworks
‣ Viele Requests
‣ Keine Skalierung

Runde Ecken für moderne
Browser
#twitter {
border-radius: 0.6em;
-moz-border-radius: 0.6em;
-webkit-border-radius: 0.6em;
}

.box1, .box2, .adressbox {
border: 2px solid #eee;
border-radius: 0.6em;
-moz-border-radius: 0.6em;
-webkit-border-radius: 0.6em;
}

/* Ohne die folgende Zeile ragen die Ecken der Überschrift aus der Box raus.
Der gleiche Radius darf es auch nicht sein, sonst entsteht eine Lücke.
Es scheint immer die Hälfte sein zu müssen.
*/
.box1 h3, .box2 h3 {
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
-moz-border-radius-topleft: 0.3em;
-moz-border-radius-topright: 0.3em;
-webkit-border-top-left-radius: 0.3em;
-webkit-border-top-right-radius: 0.3em;
}

Reiter

http://github.com/ginader/Accessible-Tabs

Reiter (Tabs)
<div class="tabs">
<h2>eine Beispielüberschrift</h2>
<div class="tabbody">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h3>Lorem ipsum</h3>
<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>
</div>
<h2>noch eine Beispielüberschrift</h2>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>
</div>
<h2>alles andere</h2>
<p>Hier könnte Ihr Inhalt stehen</p>
</div>
</div>

$(document).ready(function(){
$('.tabs').accessibleTabs();
});

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/

Am Ende ist doch alles HTML (Uni Mainz)

Weitere ähnliche Inhalte

Was ist angesagt?

Ähnlich wie Am Ende ist doch alles HTML (Uni Mainz)

Mehr von Jens Grochtdreis

Am Ende ist doch alles HTML (Uni Mainz)