68
Intégrateur : entre le marteau et l'enclume Bonnes pratiques d'intégration robuste Atelier technique CSS — Paris Web 2011 par Romy Duhem-Verdière http://romy.tetue.net/857

Bonnes pratiques intégration robuste

Embed Size (px)

DESCRIPTION

Cet atelier partage des bonnes pratiques pour réaliser des intégrations robustes, qui résisteront au développement. À partir d’exemples concrets nous essayerons de décortiquer ensemble ce qui coince, entre le code idéal produit par l’intégrateur et le code effectivement développé, afin d’en tirer la leçon et lister les concessions prévisibles de part et d’autre pour un mariage réussi. Souple sur les pattes arrières !

Citation preview

Page 1: Bonnes pratiques intégration robuste

Intégrateur : entre le marteau et l'enclume

Bonnes pratiquesd'intégration robusteAtelier technique CSS — Paris Web 2011par Romy Duhem-Verdièrehttp://romy.tetue.net/857

Page 2: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 2

Intégrateur de STPo - Robot de Gordon Bennett

Page 3: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 3

L'intégrateur

Cf.: http://www.nota-bene.org/Integrateurs-montez-au-front-Paris

XHML, CSS, jQuery,

media queries, microformats,

RGAA, Accessiweb, WCAG,

BluePrint, 960 Grid, ooCSS,

LESS, Framework Z, sprites,

PSD, Gimp

Page 4: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 4

Vous réalisez vos intégrationsavec soin et amour :

P validesP sémantiquesP accessibles

Page 5: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 5

Mais pourquoi faut-ilque le dev'saccage tout ça ?

Page 6: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 6

.toto p a p { … }

Le développeur

Page 7: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 7

PHP, ASP, Java, SQL,

Perl, Ruby, Python, Klingon,

Zend, Symphony,

eZ publish, Drupal, SPIP, TypoScript,

cahier des charges

Page 8: Bonnes pratiques intégration robuste

Faire simple !

Page 9: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 9

h1 { font-size : 2em; }h2 { font-size : 1.33em; }h3 { font-size : 1.17em; }h4 { font-size : 1.1em; }p { font-size: .688em; }li { font-size: .688em; }blockquote { font-size: .688em; }small { font-size: .52em; }

Ce qu'à codé l'intégrateur

Page 10: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 10

Problèmes

Page 11: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 11

Trop de font-size !

Résultats de recherchedes occurrences de « font-size » dans un projet...

Page 12: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 12

Em Calculator : http://riddle.pl/emcalc/

Ressortir la calculette ?

Page 13: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 13

html { font-size: 100%; }body { font-size: .75em; }

h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }

small { font-size: 90%; }

Définir une taille relative

Page 14: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 14

html { font-size: 100%; }body { font-size: .75em; }

h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }

small { font-size: 90%; }

Définir une taille relative

Page 15: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 15

html { font-size: 100%; }body { font-size: .75em; }

h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }

small { font-size: 90%; }

Définir une taille relative

Page 16: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 16

html { font-size: 100%; }body { font-size: .75em; }

h1 { font-size: 150%; }h2 { font-size: 130%; }h3 { font-size: 110%; }

small { font-size: 90%; }

Cf. : http://www.pompage.net/definir-des-tailles-de-polices-en-css

Définir une taille relative

Page 17: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 17

Définir une taille relative

1) Ne pas définir la taille de chaque élément !

2) Définir une font-size de base, sur le <body>

(dont chaque élément hérite)

3) Puis définir quelques exceptions :

● titres plus gros

● mentions plus petites

Page 18: Bonnes pratiques intégration robuste

Au fait, qui saccage l'intégration ?

Page 19: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 19

Au fait, qui saccage ?

1) Le développement

Page 20: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 20

Au fait, qui saccage ?

1) Le développement

2) Le code généré

(framework, CMS, plugins)

Page 21: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 21

Au fait, qui saccage ?

1) Le développement

2) Le code généré

(framework, CMS, plugins)

3) Les rédacteurs

Page 22: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 22

Comment améliorer ?

1) Discuter avec les

développeurs

2) Apprendre à coder souple

et modulaire

1) Le développement

2) Le code généré

(framework, CMS, plugins)

3) Les rédacteurs

Page 23: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 23

Comment améliorer ?

1) Discuter avec les

développeurs

2) Apprendre à coder souple

et modulaire

3) Travailler sur un échantillon

de code généré

1) Le développement

2) Le code généré

(framework, CMS, plugins)

3) Les rédacteurs

Page 24: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 24

Comment améliorer ?

1) Discuter avec les

développeurs

2) Apprendre à coder souple

et modulaire

3) Travailler sur un échantillon

de code généré

4) Anticiper les

expérimentations

des rédacteurs

1) Le développement

2) Le code généré

(framework, CMS, plugins)

3) Les rédacteurs

Page 25: Bonnes pratiques intégration robuste

Anticiper

Page 26: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 26

Quel CSS pour styler ces listes ?

Page 27: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 27

Ce qu'à codé l'intégrateur

Page 28: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 28

Problème

Page 29: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 29

/* Lists--------------------------------------------- */

li ul,li ol { margin: 0; }ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul { list-style-type: disc; }ol { list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }dl dt { font-weight: bold; }dd { margin-left: 1.5em;}

Source : http://www.blueprintcss.org

Un bon exemple

Page 30: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 30

Correction

Page 31: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 31

Listes hétérogènes

Page 32: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 32

Comment anticiper ?

1) Styler tout le HTML

● y compris les balises rarement utilisées

● utiliser une page de démo exhaustive

2) Se constituer une page de test

● récolter des exemples vicieux

● des extraits générés via WYSIWYG

Page 33: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 33

Stylertout le HTML

Source : framework CSS Blueprint

Page 34: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 34

Exemple de charte typo

Source : charte typo SPIP

Page 35: Bonnes pratiques intégration robuste

Laisser la main

Page 36: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 36

Qui l'emporte ?

De quelle couleur sera le titre du chapo ?

#content h2 { color: red; }

.chapo h2 { color: purple; }

Page 37: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 37

Spécificité des sélecteurs

Source : http://www.alsacreations.com/quiz/lire/7-css-difficile.html

En supposant que tous les sélecteurs suivants sont justes et désignent le même élément, lequel sera appliqué en priorité ?

a) #page ul li a { }

b) #page .menu a { }

c) div.menu ul li a { }

d) div#page ul a { }

Page 38: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 38

Spécificité des sélecteurs

Cascade CSS et priorité des sélecteurs : http://openweb.eu.org/articles/cascade_css/

En supposant que tous les sélecteurs suivants sont justes et désignent le même élément, lequel sera appliqué en priorité ?

a) #page ul li a { }0103 : le sélecteur contient 1 identifiant, 0 classe et 3 éléments

b) #page .menu a { }0111 : le sélecteur contient 1 identifiant, 1 classe et 1 élément

c) div.menu ul li a { }0014 : le sélecteur contient 1 classe et 4 éléments

d) div#page ul a { }0103 : le sélecteur contient 1 identifiant et 3 éléments

Page 39: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 39

Soyez .class plutôt qu'#ID

Voir : http://oli.jp/2011/ids/

Page 40: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 40

Exemple : http://romy.tetue.net/structure-html-de-base

Soyez .class plutôt qu'#ID

Page 41: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 41

Laissez les IDs au dev !

1) Les ID sont uniques :

laissez la liberté de réemployer

à ceux qui suivent

2) Réservez les IDs à :● JavaScript● formulaires● N° identifiants (BDD)● etc.

Page 42: Bonnes pratiques intégration robuste

Mettre des .classà disposition

Page 43: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 43

small, .small { font-size: 90%; }big, .big { font-size: 130%;}

Mettre des .class à disposition

Page 44: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 44

h1, .h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }h2, .h2 { font-size: 2em; margin-bottom: 0.75em; }h3, .h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }h4, .h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }h5, .h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }h6, .h6 { font-size: 1em; font-weight: bold; }

Mettre des .class à disposition

D'après : Object Oriented CSS

Page 45: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 45

body, .font1 { font-family: Helvetica, Arial, sans-serif; }h1,h2, .font2 { font-family: 'Arial Black', Gadget, sans-serif; }code,pre, .font3 { font-family: Courier, monospace; }

.font4 { font-family: Palatino, Georgia, serif; }

Mettre des .class à disposition

Page 46: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 46

Exceptionsdéfinies. via sélecteur parent. via classes distinctives

Définitiondes titres+ classesréemployables

Familles typo+ classesréemployables

Page 47: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 47

Mettre des .class à disposition

Voir : http://romy.tetue.net/styler-les-messages-du-systeme

Page 48: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 48

Sélecteurs multiples

pinkredorangeyellowgreenblueblackgraywhite

<input class=”button ”>addeditcanceldeletelikenextprevstartsavesubmit

superbigsmall

Page 49: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 49

Séparer sémantique et déco

pinkredorangeyellowgreenblueblackgraywhite

<input class=”button ”>addeditcanceldeletelikenextprevstartsavesubmit

superbigsmall

Classes sémantiques déco

Page 50: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 50

Page 51: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 51

Bref, livrez un framework !

Source : framework interne de la Netscouade

Avec du code facilement ré-utilisable pour les suivants

Page 52: Bonnes pratiques intégration robuste

Habillerle code généré

Page 53: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 53

Quelle structure HTML ?En plus de celles propres aux formulaires (form, fieldset, label, input)

quelles balises HTML utiliser pour structurer ce formulaire de contact ?

Page 54: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 54

Ce qu'à codé l'intégrateur

Page 55: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 55

Code généré

Exemple de code généré par Joomla

Page 56: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 56

Code généré

Exemple de code généré par SPIP

Page 57: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 57

Code généré

Exemple de code généré par Zend Framework

Page 58: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 58

Conclusion ?

1) Ne pas présupposer

de la structure HTML

2)Demander un échantillon

de code généré

(voire adopter le framework

de l'outil, du dev, de l'équipe)

3) Appliquer le style

à cet échantillon

Page 59: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 59

Penser modulaire

Page 60: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 60

Bloc modulaire

Quel code pour ce bloc d'actus ?

Page 61: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 61

Bloc modulaire<div class="bloc" id="news">

<h2>L'info en continu</h2><ul>

<li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li>

</ul><a href="#" class="more">Toutes les infos</a>

</div><!--#news-->

#news { width: 300px; }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; }#news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width: 1px 0; }#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png) no-repeat; }

Page 62: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 62

Bloc modulaire

Quel code pour ce bloc d'actus ailleurs dans la page ?

Page 63: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 63

Bloc modulaire<div class="bloc" id="news">

<h2>L'info en continu</h2><ul>

<li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li>

</ul><a href="#" class="more">Toutes les infos</a>

</div><!--#news-->

#news { padding: 5px; background: #e5e4d3; }#news h2 { float: left; padding-left: 20px; background: url(img/puce.png) no-repeat; }#news ul { }#news li { float: left; display: block; width: 660px; padding: 10px; background: #fff; }#news .more { float: right; display: block; color: red; background: url(img/more.png) no-repeat; border: 2px solid #fff; }

Page 64: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 64

<div class="bloc" id="news"><h2>L'info en continu</h2><ul>

<li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li>

</ul><a href="#" class="more">Toutes les infos</a>

</div><!--#news-->

#news { padding: 5px; background: #e5e4d3; }#news h2 { float: left; padding-left: 20px; background: url(img/puce.png) no-repeat; }#news ul {}#news li { float: left; display: block; width: 660px; padding: 10px; background: #fff; }#news .more { float: right; display: block; color: red; background: url(img/more.png) no-repeat; border: 2px solid #fff; }

#news { width: 300px; }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; }#news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width: 1px 0; }#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png) no-repeat; }

Comment disposer des deux ?

Page 65: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 65

<div class="bloc" id="news"><h2>L'info en continu</h2><ul>

<li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li>

</ul><a href="#" class="more">Toutes les infos</a>

</div><!--#news-->

#news { width: 300px; }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; }#news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width: 1px 0; }#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png) no-repeat; }

.toto #news { width: auto; padding: 5px; background: #e5e4d3; }

.toto #news h2 { float: left; }

.toto #news ul { background: none; border: 0; }

.toto #news li { float: left; width: 660px; background: #fff; }

.toto #news .more { float: right; border: 2px solid #fff; }

Comment disposer des deux ?

Méthode 1 : surcharge

Page 66: Bonnes pratiques intégration robuste

Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 66

<div class="bloc" id="news"><h2>L'info en continu</h2><ul>

<li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li><li><a href="#">...</a></li>

</ul><a href="#" class="more">Toutes les infos</a>

</div><!--#news-->

Comment disposer des deux ?

#news { }#news h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; }#news ul { }#news li { display: block; padding: 10px; }#news .more { display: block; color: red; background: url(img/more.png) no-repeat; }

.aside #news { width: 300px; }

.aside #news ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width: 1px 0; }

.toto #news { padding: 5px; background: #e5e4d3; }

.toto #news ul {}

.toto #news li { float: left; width: 660px; background: #fff; }

.toto #news .more { float: right; border: 2px solid #fff; }

Méthode 2 : bloc modulaire

Page 67: Bonnes pratiques intégration robuste

Souplesur les pattes arrières !

Page 68: Bonnes pratiques intégration robuste

Merci !

Merci à Bertrand Keller de la Netscouade, à Martin Supiot de Clever Age, à Cyril Marion des Ateliers CYM,à Hugues Moreno, Frédéric Xavier et à tous vos retours d'expérience en intégration. Merci à vous et #sharetheloveRetrouvez-moi ici : http://romy.tetue.net/857