Développer pour tous les navigateurs      MS Tech Days 2013         Jérémie Patonnier            @JeremiePat    http://jpa...
Le problèmeLimage quon en a
Le problèmeEn fait cest pire
Les standards du Web                Ils sont ouvert et libre,tous les navigateurs essayent de les mettres en oeuvre.      ...
Les standards du Web          — HTML —        De HTML4 à HTML5   Attention aux vieux navigateurs
Les standards du Web        — CSS —      De CSS2.1 à CSS3      Lenfer des préfix
Les standards du Web                — JavaScript —                 Attention terrain miné !Cest un agrégat de technologies...
Degradation harmonieuse &  Amélioration progressive   Oublier le "pixel perfect"   Trouver les plus petits dénominateurs c...
Responsive Web Design “Faire en sorte quun site soit visible et utilisable     quelque soit le contexte de consultation.”
Les requêtes de média“Méchanisme CSS permettant de selectionner unefeuille de style en fonction des caractéristiques du   ...
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 ...
Détection de fonctionalité       Les navigateurs mentent sur qui ils sont,  il vaut mieux leur demander ce quils savent fa...
Modernizr           modernizr.com1. Detection de fonctionnalité2. Chargement de fichiers conditionnel3. Requêtes de média ...
Modernizr   Detection de fonctionnalité<DCYEhm> !OTP tl<tlcas"oj" hm ls=n-s><il>asmdrir/il> tteSn oenz<tte<DCYEhm> !OTP tl...
ModernizrChargement de fichiers conditionnelMdrirla( oenz.od[  {    ts :Mdrirwbokt & wno.SN     et   oenz.esces & idwJO,  ...
ModernizrRequêtes de média multi-navigateuri(oenz.q"cenad(i-eiewdh 12p)){ fMdrirm(sre n mndvc-it: 04x"  dcmn.oysyefnSz ="2...
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{  c...
Augmenter votre productivité     — Les dangers à éviter —       lier CSS à JavaScript       lier HTML à Javascript       O...
Augmenter votre productivité                     — CSS —    Les préprocesseurs CSS : LESS , SASS , etc.    Les méthodologi...
Augmenter votre productivité      — Les pré-processeurs CSS —  Idéal pour produire du code plus facilement maintenable,   ...
Augmenter votre productivité       — Les pré-processeurs CSS —              Un exemple avec LESS @olu:#0  cuer 00 @oluHvr ...
Augmenter votre productivité    — Les pré-processeurs CSS —             Un exemple avec LESS a{   clr #0;    oo: 00   -ekt...
Augmenter votre productivité         Les frameworks JS      Se simplifier la vie: jQuery , UnderscorJS      Répondre à des...
Quelques points à retenirLes outils et les méthodes évoluent très viteLes vieux navigateurs mettent du temps à mourrirLa p...
Merci        Questions ?Jérémie Patonnier / @JeremiePat
Prochain SlideShare
Chargement dans... 5
×

Développer pour tous les navigateurs

513

Published on

Développer pour une version d'un navigateur c'est facile. Développer pour plusieurs navigateurs aux capacités parfois franchement différentes, c'est une autre histoire. Plutôt que de pester toute la journée nous verrons comment il est possible de minimiser les effets de bords, voir de trouver ça plaisant. Mobile, Desktop, site web, applications web, bonne pratiques, outils d'aides à la production, bibliothèques JavaScript indispensables, stratégie de test... nous passerons en revu tout tout ce qu'il faut savoir et ce qui permet de coder pour tous les navigateurs (presque) sans douleurs.

0 commentaires
0 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Be the first to like this

Aucun téléchargement
Vues
Total des vues
513
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
2
Actions
Partages
0
Téléchargements
12
Commentaires
0
J'aime
0
Ajouts 0
No embeds

No notes for slide

Développer pour tous les navigateurs

  1. 1. Développer pour tous les navigateurs MS Tech Days 2013 Jérémie Patonnier @JeremiePat http://jpat.fr/MSTD2013
  2. 2. Le problèmeLimage quon en a
  3. 3. Le problèmeEn fait cest pire
  4. 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. 5. Les standards du Web — HTML — De HTML4 à HTML5 Attention aux vieux navigateurs
  6. 6. Les standards du Web — CSS — De CSS2.1 à CSS3 Lenfer des préfix
  7. 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. 8. Degradation harmonieuse &  Amélioration progressive Oublier le "pixel perfect" Trouver les plus petits dénominateurs communs Connaitre les technologies et leurs limites
  9. 9. Responsive Web Design “Faire en sorte quun site soit visible et utilisable quelque soit le contexte de consultation.”
  10. 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. 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. 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. 13. Modernizr modernizr.com1. Detection de fonctionnalité2. Chargement de fichiers conditionnel3. Requêtes de média multi-navigateur
  14. 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. 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. 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. 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. 18. Augmenter votre productivité — Les dangers à éviter — lier CSS à JavaScript lier HTML à Javascript Oublier les alternatives à JavaScript
  19. 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. 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. 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. 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. 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. 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. 25. Merci Questions ?Jérémie Patonnier / @JeremiePat
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×