1.
Développer pour tous les navigateurs MS Tech Days 2013 Jérémie Patonnier @JeremiePat http://jpat.fr/MSTD2013

2.
Le problèmeLimage quon en a

3.
Le problèmeEn fait cest pire

4.
Les standards du Web Ils sont ouvert et libre,tous les navigateurs essayent de les mettres en oeuvre. il sagit de HTML, CSS, JavaScript Mais aussi : HTTP, SVG, ARIA, etc.

5.
Les standards du Web — HTML — De HTML4 à HTML5 Attention aux vieux navigateurs

6.
Les standards du Web — CSS — De CSS2.1 à CSS3 Lenfer des préfix

7.
Les standards du Web — JavaScript — Attention terrain miné !Cest un agrégat de technologies différement supportées : ECMAScript, DOM, et plein dautres API

8.
Degradation harmonieuse & Amélioration progressive Oublier le "pixel perfect" Trouver les plus petits dénominateurs communs Connaitre les technologies et leurs limites

9.
Responsive Web Design “Faire en sorte quun site soit visible et utilisable quelque soit le contexte de consultation.”

10.
Les requêtes de média“Méchanisme CSS permettant de selectionner unefeuille de style en fonction des caractéristiques du média de diffusion du contenu.” mediaqueri.es

11.
Les requêtes de média@ei sre ad(i-eiewdh 12p){ mda cen n mndvc-it: 04x / Vssye pu lsgad érn ii* * o tls or e rns cas c / bd { oy fn-ie 10; otsz: 2% }}<ikrl"tlset he=syecs ln e=syehe" rf"tl.s" mda"cenad(i-eiewdh 12p)> ei=sre n mndvc-it: 04x"

12.
Détection de fonctionalité Les navigateurs mentent sur qui ils sont, il vaut mieux leur demander ce quils savent faire A voir : Les User Agents, cest le mal

13.
Modernizr modernizr.com1. Detection de fonctionnalité2. Chargement de fichiers conditionnel3. Requêtes de média multi-navigateur

14.
Modernizr Detection de fonctionnalité<DCYEhm> !OTP tl<tlcas"oj" hm ls=n-s><il>asmdrir/il> tteSn oenz<tte<DCYEhm> !OTP tl<tlcas"scna n-eg" hm ls=j avs owbl><il>vcmdrir/il> tteAe oenz<tte<citsc"smdrirj"<srp> srp r=j/oenz.s>/cit<cit srp>cnoelgMdrircna) osl.o(oenz.avs;cnoelgMdrirwbl; osl.o(oenz.eg)<srp> /cit

15.
ModernizrChargement de fichiers conditionnelMdrirla( oenz.od[ { ts :Mdrirwbokt & wno.SN et oenz.esces & idwJO, / yp :eu.s / e dbgj np :ucinlplflsj oe fntoa-oyil.s, bt :[p.s,p.s] oh apj apcs , cmlt :fnto ( { opee ucin ) mApii(; yp.nt) } }, otaayisj ps-nltc.s]; )

16.
ModernizrRequêtes de média multi-navigateuri(oenz.q"cenad(i-eiewdh 12p)){ fMdrirm(sre n mndvc-it: 04x" dcmn.oysyefnSz ="2%; ouetbd.tl.otie 10"}

17.
Modernizr Une erreur à ne pas commettre.gap{ rb clr rb(5,5,5,5; oo: ga252525.)}.orb p{ n-ga clr #CCC oo: CCC;}p{ clr #CCC oo: CCC;}.gap{ rb clr rb(5,5,5,5; oo: ga252525.)}

18.
Augmenter votre productivité — Les dangers à éviter — lier CSS à JavaScript lier HTML à Javascript Oublier les alternatives à JavaScript

19.
Augmenter votre productivité — CSS — Les préprocesseurs CSS : LESS , SASS , etc. Les méthodologies : OOCSS , BEM Les framework CSS : 960gs , 1140, Bootstrap, etc.

20.
Augmenter votre productivité — Les pré-processeurs CSS — Idéal pour produire du code plus facilement maintenable, ils apportent : Variables Fonctions (mixin) Lisibilité (nesting) Maintenabilié (Inclusions, Boucles, conditions)

21.
Augmenter votre productivité — Les pré-processeurs CSS — Un exemple avec LESS @olu:#0 cuer 00 @oluHvr #0 cueroe: 90 .rniin@rpry @ie 50s { tasto(poet, tm: 0m) -ekttasto:@rpry@ie wbi-rniin poet tm; -o-rniin @rpry@ie mztasto: poet tm; --rniin @rpry@ie otasto: poet tm; tasto:@rpry@ie rniin poet tm; } a{ clr @olu; oo: cuer .rniinclr; tasto(oo) &hvr{ :oe clr @oluHvr oo: cueroe } }

22.
Augmenter votre productivité — Les pré-processeurs CSS — Un exemple avec LESS a{ clr #0; oo: 00 -ekttasto:clr50s wbi-rniin oo 0m; -o-rniin clr50s mztasto: oo 0m; --rniin clr50s otasto: oo 0m; tasto:clr50s rniin oo 0m; } ahvr{ :oe clr #0; oo: 90 }

23.
Augmenter votre productivité Les frameworks JS Se simplifier la vie: jQuery , UnderscorJS Répondre à des besoins précis : Micro JS RaphaelJS Industrialiser: Backbone , ExtJS , etc.

24.
Quelques points à retenirLes outils et les méthodes évoluent très viteLes vieux navigateurs mettent du temps à mourrirLa plateforme Web se stabilise vite et bienLes moyen daccès au web se diversifient comme jamais

25.
Merci Questions ?Jérémie Patonnier / @JeremiePat