• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Best practices im Frontend -Barcamp Mainz 2011
 

Best practices im Frontend -Barcamp Mainz 2011

on

  • 1,081 views

Kompakte

Kompakte

Statistics

Views

Total Views
1,081
Views on SlideShare
1,081
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Best practices im Frontend -Barcamp Mainz 2011 Best practices im Frontend -Barcamp Mainz 2011 Presentation Transcript

    • Frontend Best Practices
    • Die drei wichtigsten Best PracticesNachdenken Recherchieren Experimentieren http://goo.gl/NYGeI http://goo.gl/HbFx0 http://goo.gl/LohPq
    • Semantik
    • Mangelnde Professionalität erzeugt in anderen Bereichen Spott
    • http://blog.zdf.de/zdfdasblog/2011/10/31/55-milliarden-zu-viele-nullen/
    • In unserer Profession wirddas kritiklos hingenommen
    • Warum keine Überschrift?http://www.faz.net/
    • Warum keine Überschrift?http://www.sueddeutsche.de/
    • Warum keine Überschrift?http://www.stern.de/
    • Ein Slider - Grobskizze IMAGE IMAGE IMAGE  Kategorie Infos Kategorie Infos Kategorie Infos Überschrift Zusatzinfo1 Überschrift Zusatzinfo1 Überschrift Zusatzinfo1 Hier steht ein kurzer Zusatzinfo2 Hier steht ein kurzer Zusatzinfo2 Hier steht ein kurzer Zusatzinfo2 erklärender Text. erklärender Text. erklärender Text.
    • Mal ohne Semantik
    • Mal mit Semantik
    • Das falsche Element!
    • Versteckspielhttp://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
    • http://images.oddlyspecific.com/oddlyspecific/2009/11/fpthedevilyouknow.jpg
    • Über Barrieren nachdenken
    • Keine vermeidbaren Barrieren ‣ Das Netz ermöglicht es erstmals, dass JEDER auf Informationen zugreifen kann und in Interaktion treten kann. ‣ Warum also sich selber und die Reichweite des eigenen Angebotes beschränken?http://failblog.org/2010/04/08/epic-fail-photos-hand-rail-fail/
    • mehr ... mehr ... mehr ... mehr ...
    • Konkretes Beispiel
    • Lösung dafür: WAI-ARIA
    •  Kleiner Bildschirm Keine Maus Keine Popups
    • Paradigmenwandel: Barrierefreiheit als nachträglicher Einfall, drangedübelthttp://www.flickr.com/photos/beelzebozo/1503756/
    • Barrierefreiheit als integrales Elementhttp://www.flickr.com/photos/pixeldiva/2109688648/
    • http://www.flickr.com/photos/johnmcbride1109/2875819859/
    • Farbkontraste
    • http://www.ctrl-verlust.net/
    • https://skitch.com/jensgrochtdreis/rh1g6/das-ist-mal-schlau-originalgrose
    • http://snurl.com/t58gj
    • Fokus
    • So nicht!
    • Den Fokus nicht vergessen!
    • Nicht in Tools und Techniken zu sehr verlieben
    • ‣ Nach sinnvollen Einsatzzwecken von Techniken suchen.‣ Nicht alles machen, weil es gerade möglich ist.‣ Immer an die Semantik denken.
    • http://benthebodyguard.com/
    • http://jsfiddle.net/Flocke/e6KDU/
    • moderne Selektoren
    • ‣ Können ältere IE (bis einschließlich Version 8) nicht.‣ Ihnen kann mittels Javascript geholfen werden.‣ Wenn es sich um keine „lebensnotwendigen“ Operationen handelt, ist eine Nachhilfe via Javascript okay.
    • http://jsfiddle.net/Flocke/VCSEB/
    • neue semantische Elemente
    • An die Konsequenzen denken ‣ HTML5-Seiten funktionieren in alten Browsern nur mittels Javascript. Das betrifft im Wesentlichen IE bis einschließlich Version 8.http://code.google.com/p/html5shim/ http://www.modernizr.com/
    • Mit Javascript
    • Ohne Javascript
    • Was konnten wir bisher mit CSS machen?
    • ‣ Texte formatieren‣ Farben für Vorder- und Hintergründe‣ Positionierungen‣ Floats‣ Bilder werden für viele Lösungen benötigt‣ Manchmal wird Extra-Markup für Bilder- Lösungen benötigt‣ Transparenz mit Nebenwirkungen
    • Welche Lücke füllt CSS3?
    • neue Layoutmodellemehr Möglichkeiten mit Rahmen und Hintergründen Verringerung des Grafikeinsatzes Animationen neue Selektoren
    • Transparenz mit rgba() runde Ecken Verläufe (gradient)Transitions media-queries calc() mehrere Spalten
    • Die Vorteile‣ Weniger Schmuckbilder werden benötigt.‣ Weniger Javascript wird benötigt.‣ Animationen und Transitionen sind mittels CSS schneller, als mittels Javascript.‣ Es wird seltener Code nur für Optik benötigt, der Quellcode schmaler und lesbarer.
    • Die NachteileEs gibt keine!
    • Oder doch einen kleinen
    • Realistische Dummy-Inhalte
    • Navigation
    • Vorsicht bei horizontaler Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
    • Dummybilderhttp://dummyimage.com/ http://lorempixel.com/
    • Dummybilderhttp://placekitten.com/
    • http://www.blindtextgenerator.de/
    • http://bueltge.de/html-ipsum/
    • http://geekandpoke.typepad.com/geekandpoke/2009/07/geeks.html
    • Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke http://webkrauts.de http://slideshare.net/Flocke669Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/