Download - Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Transcript
Page 1: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Am Ende ist doch alles HTML - ein gutes Frontend ist wichtig

Jens Grochtdreis

Page 2: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

‣ Selbständiger Frontendentwickler

‣ Fachgutachter für Qualitätssicherung

‣ 10 Jahre Agenturerfahrung

‣ 13 Jahre Arbeit im und fürs Web

‣ Gründer der Webkrauts

‣ Blogger (http://grochtdreis.de/weblog)

‣ Autor u.a. PHPMagazin, Webstandards-Magazin, Screenguide

‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

Jens Grochtdreis

Page 3: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

HTML ist simpel!

Page 4: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Im Vergleich zu PHP, Java, Perl, Javascript ... stimmt das

sicher!

Page 5: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Nicht die Sprache selbst ist das Problem. Es ist die

Umgebung!

Page 7: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

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

Page 8: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Das Endprodukt eines Frontendentwicklers ist nur

ein Zwischenprodukt.

Page 9: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Wir wissen nicht, in welcher Umgebung und in welcher Form

unser Endprodukt konsumiert wird.

Page 10: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Für Projektmanager und Designer ist das unvorstellbar.

Page 11: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

http://www.flickr.com/photos/wanhoff/356677564/

Photoshop und Word haben immer EIN Endprodukt.

Page 12: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Wir haben viele Endprodukte

http://www.flickr.com/photos/danm_cool/3163625498/

Page 14: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

http://www.flickr.com/photos/artrock2006/4177475479/

Alle Beteiligten sollten frühzeitig offen kommunizieren.

http://www.flickr.com/photos/artrock2006/4177475479/

Page 15: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Nicht einfach Befehle empfangen.

http://www.flickr.com/photos/soldiersmediacenter/3521607551/

Page 16: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Voneinander lernen!

Page 17: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Oft wird das Frontend nebenher gemacht

Page 18: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Frontend ist wichtig

‣ Beim Endkunden kommen HTML, CSS und Javascript an, nicht PHP, Java oder Ruby.

‣ Das Frontend beeinflusst die Performance sehr stark, stärker als das Backend.

Page 19: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Typische Frontendaufgaben

‣ source-order für SEO optimieren

‣ Theming

‣ auf mobile Geräte anpassen

‣ responsive Webdesign

‣ Performance

‣ leichte Wartbarkeit

Page 20: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Schlechte Qualität sieht man

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

Page 21: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Auch im Internet

Page 22: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Auch im Internet

http://stern.de

Page 23: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Wir sind in einer Übergangsphase

Page 24: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

http://thenewdesignguidelines.derekevanharms.com/

Opera

Chrome

Best viewed in ... (2012)

Page 25: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Problematische Strategie

Irgendwie bekommen wir das geregelt ...

http://blog.crusy.net/wp-content/uploads/2008/09/macgyver.jpg

Page 26: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

An ein Fallback denken!

moderne Browser

IE8

http://jsfiddle.net/Flocke/BEJRM/

Page 27: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Gutes Fallback

http://jsfiddle.net/Flocke/VzSHG/

IE8moderne Browser

Diese Demo arbeitet mit einem CSS3-Selektor. oldIE kann man in diesem Falle mit JavaScript weiterhelfen.

Page 28: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Gut: in Alternativen denken!

Page 31: Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Page 32: Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Page 33: Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Page 34: Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Page 35: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Zeitersparnis, weil alles in einer Hand ist!

Page 37: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

‣ runde Ecken

‣ linear-gradient

‣ transform

‣ box-shadow

‣ text-shadow

‣ content-Generierung mit :after und :before

http://jsfiddle.net/Flocke/azvGv/

Page 38: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

http://jsfiddle.net/Flocke/azvGv/

CSS3-fähiger Browser IE8

Page 39: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Buttons mit CSS3

Page 40: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Skalieren mit Inhalt und mit der Seite.

Page 42: Am Ende ist doch alles HTML - 2012 - Webmontag Edition

Jens Grochtdreishttp://grochtdreis.dehttp://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/