Upload
mouradcool
View
12
Download
0
Embed Size (px)
DESCRIPTION
dev
Citation preview
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