Développer pour tous les navigateurs
Upcoming SlideShare
Loading in...5
×
 

Développer pour tous les navigateurs

on

  • 686 vues

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 ...

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.

Statistiques

Vues

Total des vues
686
Vues sur SlideShare
573
Vues externes
113

Actions

J'aime
0
Téléchargements
11
Commentaires
0

2 Ajouts 113

http://www.scoop.it 112
http://webcache.googleusercontent.com 1

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

© Tous droits réservés

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

Développer pour tous les navigateurs Développer pour tous les navigateurs Presentation Transcript

  • Développer pour tous les navigateurs MS Tech Days 2013 Jérémie Patonnier @JeremiePat http://jpat.fr/MSTD2013
  • 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. il sagit de HTML, CSS, JavaScript Mais aussi : HTTP, SVG, ARIA, etc.
  • 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 différement supportées : ECMAScript, DOM, et plein dautres API
  • Degradation harmonieuse &  Amélioration progressive Oublier le "pixel perfect" Trouver les plus petits dénominateurs communs Connaitre les technologies et leurs limites
  • 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 média de diffusion du contenu.” mediaqueri.es
  • 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"
  • 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
  • Modernizr modernizr.com1. Detection de fonctionnalité2. Chargement de fichiers conditionnel3. Requêtes de média multi-navigateur
  • 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
  • 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]; )
  • 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"}
  • 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.)}
  • Augmenter votre productivité — Les dangers à éviter — lier CSS à JavaScript lier HTML à Javascript Oublier les alternatives à JavaScript
  • Augmenter votre productivité — CSS — Les préprocesseurs CSS : LESS , SASS , etc. Les méthodologies : OOCSS , BEM Les framework CSS : 960gs , 1140, Bootstrap, etc.
  • 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)
  • 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 } }
  • 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 }
  • 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.
  • 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
  • Merci Questions ?Jérémie Patonnier / @JeremiePat