Upload
jens-grochtdreis
View
3.231
Download
0
Embed Size (px)
DESCRIPTION
Ihm Rahmen der Java-Konferenz "Jax 2010" führte ich in die Problemfelder und Denkweisen eines Frontendentwicklers ein.
Citation preview
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
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
HTML zeichnet Bedeutung aus: 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.
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)
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>
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
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.
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/