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.
4. Les standards du Web
Ils sont ouvert et libre,
tous les navigateurs essayent de les mettres en oeuvre.
il s'agit de HTML, CSS, JavaScript
Mais aussi : HTTP, SVG, ARIA, etc.
7. Les standards du Web
— JavaScript —
Attention terrain miné !
C'est un agrégat de technologies différement supportées :
ECMAScript, DOM, et plein d'autres API
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 qu'ils savent faire
A voir : Les User Agents, c'est le mal
13. Modernizr
modernizr.com
1. Detection de fonctionnalité
2. Chargement de fichiers conditionnel
3. Requêtes de média multi-navigateur
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)
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 à retenir
Les outils et les méthodes évoluent très vite
Les vieux navigateurs mettent du temps à mourrir
La plateforme Web se stabilise vite et bien
Les moyen d'accès au web se diversifient comme jamais