Bonnes pratiques intégration robuste
-
Upload
romy-duhem-verdiere -
Category
Technology
-
view
1.295 -
download
0
description
Transcript of Bonnes pratiques intégration robuste
![Page 1: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/1.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/6.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/8.jpg)
Faire simple !
![Page 9: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/10.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 10
Problèmes
![Page 11: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/12.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/16.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/18.jpg)
Au fait, qui saccage l'intégration ?
![Page 19: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/20.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/22.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/23.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/24.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/25.jpg)
Anticiper
![Page 26: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/26.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 26
Quel CSS pour styler ces listes ?
![Page 27: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/27.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 27
Ce qu'à codé l'intégrateur
![Page 28: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/28.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 28
Problème
![Page 29: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/30.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 30
Correction
![Page 31: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/31.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 31
Listes hétérogènes
![Page 32: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/32.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/33.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/34.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/35.jpg)
Laisser la main
![Page 36: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/36.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/37.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/38.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/39.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/40.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/41.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/42.jpg)
Mettre des .classà disposition
![Page 43: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/43.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/44.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/45.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/46.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/47.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/48.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/49.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/50.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 50
![Page 51: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/51.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/52.jpg)
Habillerle code généré
![Page 53: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/53.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/54.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 54
Ce qu'à codé l'intégrateur
![Page 55: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/55.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/56.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/57.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/58.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/59.jpg)
Atelier technique CSS — Romy Duhem-Verdière — Paris Web 2011 59
Penser modulaire
![Page 60: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/60.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/61.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/62.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/63.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/64.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/65.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/66.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/67.jpg)
Souplesur les pattes arrières !
![Page 68: Bonnes pratiques intégration robuste](https://reader033.fdocuments.net/reader033/viewer/2022052906/558de1d21a28ab601a8b45bb/html5/thumbnails/68.jpg)
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