Post on 07-Nov-2014
description
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
‣ 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
‣4,13% der Testseiten validierten
http://www.einfach-fuer-alle.de/blog/id/2505/
Problemfeld: Entwickler
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>
Manchmal nur Kleinigkeiten
‣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
http://snipurl.com/2c1yl
Flexibilität ist Stärke
Die Flexibilität des Internet ist seine Stärke.Akzeptiert es! Macht Euch locker!
‣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
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/
‣ 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">
_ Überschriften sind eine Navigationsmöglichkeit für Screenreader.
_Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.
Überschriften
Ü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?
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)
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>
http://www.flickr.com/photos/fmg2001/679774853/sizes/o/
Wen interessieren Browser?
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“ fließen in das Frontend mit ein.
‣ Hilfe zur Verständigung zwischen Grafik, Beratung und Backend aus Eigeninteresse.
http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/
Agenturalltag
Beliebte Problemfälle
‣ 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
Layoutwünsche
Lösung: anders denken!
Mit einer Tabelle kein Problem!
Ohne Layouttabellen
‣ Die Elemente einer Seite haben keine Beziehung zueinander, es sei denn, es sind Kindelemente!
Gleich hohe Boxen
<!-- start: 3*33% Subcolumns --><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"> <!-- wie oben --> </div> </div> <div class="c33r"> <div class="subcr equalise drei"> <!-- wie oben --> </div> </div></div><!-- end: 3*33% Subcolumns -->
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
http://www.positioniseverything.net/articles/onetruelayout/equalheight
moderne Browser
IE6 und 7
Gleich hohe Boxen
http://yaml.de
.equalize > div { display:table-cell; float:none; margin:0; overflow:hidden; vertical-align:top;}
.equalize, .equalize .subcolumns { overflow:visible; display:table; table-layout:fixed; }
moderne Browser
IE6 und 7
Gleich hohe Boxen
/* 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, .equalize .c25l,.equalize .c33l,.equalize .c38l,.equalize .c50l, .equalize .c62l,.equalize .c66l,.equalize .c75l { 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://www.positioniseverything.net/articles/onetruelayout/equalheighthttp://yaml.de
http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html
Gleich hohe Boxen
Formularfelder
Passwort
‣ 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!
‣ Gerne sehr klein und schwer bedienbar
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 Grafik (auch für hover bei Links!)
‣ Runde Ecken auf Verläufen oder Transparenzen sind ganz übel als Grafik
‣ 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
Reiter (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> <div class="tabbody"> <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p> </div> <h2>alles andere</h2> <div class="tabbody"> <p>Hier könnte Ihr Inhalt stehen</p> </div></div>
$(document).ready(function(){ $('.tabs').accessibleTabs();});
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/