developper pour tous les navigateurs
Post on 07-Oct-2015
11 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
Dvelopperpourtouslesnavigateurs
MS Tech Days 2013
Jrmie Patonnier@JeremiePat
http://jpat.fr/MSTD2013
-
LeproblmeL'imagequ'onena
-
LeproblmeEnfaitc'estpire
-
LesstandardsduWebIls sont ouvert et libre,
tous les navigateurs essayent de les mettres en oeuvre.
il s'agit de HTML, CSS, JavaScriptMais aussi : HTTP, SVG, ARIA, etc.
-
LesstandardsduWebHTML
De HTML4 HTML5
Attention aux vieux navigateurs
-
LesstandardsduWebCSS
De CSS2.1 CSS3L'enfer des prfix
-
LesstandardsduWebJavaScript
Attention terrain min !
C'est un agrgat de technologies diffrement supportes : ECMAScript, DOM, et plein d'autres API
-
Degradationharmonieuse&Amliorationprogressive
Oublier le "pixel perfect"Trouver les plus petits dnominateurs communsConnaitre les technologies et leurs limites
-
ResponsiveWebDesignFaire en sorte qu'un site soit visible et utilisable
quelque soit le contexte de consultation.
-
LesrequtesdemdiaMchanisme CSS permettant de selectionner unefeuille de style en fonction des caractristiques du
mdia de diffusion du contenu.mediaqueri.es
-
Lesrequtesdemdia@media screen and (min-device-width: 1024px) { /* Vos styles pour les grands crans ici */ body { font-size: 120%; }}
-
Dtectiondefonctionalit
Les navigateurs mentent sur qui ils sont, il vaut mieux leur demander ce qu'ils savent faire
A voir : Les User Agents, c'est le mal
-
Modernizr
1. Detection de fonctionnalit2. Chargement de fichiers conditionnel3. Requtes de mdia multi-navigateur
modernizr.com
-
ModernizrDetectiondefonctionnalit
Sans modernizr
Avec modernizr
console.log(Modernizr.canvas);console.log(Modernizr.webgl);
-
ModernizrChargementdefichiersconditionnelModernizr.load([ { test : Modernizr.websockets && window.JSON, // yep : 'debug.js' nope : 'functional-polyfills.js', both : [ 'app.js', 'app.css' ], complete : function () { myApp.init(); } },
'post-analytics.js']);
-
ModernizrRequtesdemdiamulti-navigateur
if(Modernizr.mq("screen and (min-device-width: 1024px)") { document.body.style.fontSize = "120%";}
-
ModernizrUneerreurnepascommettre
.rgba p { color: rgba(255,255,255,.5);}
.no-rgba p { color: #CCCCCC;}
p { color: #CCCCCC;}
.rgba p { color: rgba(255,255,255,.5);}
-
AugmentervotreproductivitLesdangersviter
lier CSS JavaScriptlier HTML JavascriptOublier les alternatives JavaScript
-
AugmentervotreproductivitCSS
Les prprocesseurs CSS : , , etc.Les mthodologies : , Les framework CSS : , , , etc.
LESS SASSOOCSS BEM960gs 1140 Bootstrap
-
AugmentervotreproductivitLespr-processeursCSS
Idal pour produire du code plus facilement maintenable,
ils apportent :VariablesFonctions (mixin)Lisibilit (nesting)Maintenabili (Inclusions, Boucles, conditions)
-
AugmentervotreproductivitLespr-processeursCSS
Un exemple avec LESS@couleur: #000@couleurHover: #900
.transition(@property, @time: 500ms) { -webkit-transition: @property @time; -moz-transition: @property @time; -o-transition: @property @time; transition: @property @time;}
a { color: @couleur; .transition(color);
&:hover { color: @couleurHover }}
-
AugmentervotreproductivitLespr-processeursCSS
Un exemple avec LESSa { color: #000; -webkit-transition: color 500ms; -moz-transition: color 500ms; -o-transition: color 500ms; transition: color 500ms;}
a:hover { color: #900;}
-
AugmentervotreproductivitLesframeworksJS
Se simplifier la vie: , Rpondre des besoins prcis :
Industrialiser: , , etc.
jQuery UnderscorJS
Micro JSRaphaelJS
Backbone ExtJS
-
QuelquespointsretenirLes outils et les mthodes voluent trs viteLes vieux navigateurs mettent du temps mourrirLa plateforme Web se stabilise vite et bienLes moyen d'accs au web se diversifient comme jamais
-
MerciQuestions ?
/ Jrmie Patonnier @JeremiePat
top related