Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille...

17
Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 1 Méthode Daisy par Romy Duhem-Verdière Paris Web 2010 (marguerite)

Transcript of Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille...

Page 1: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 1

Méthode Daisy

par Romy Duhem-VerdièreParis Web 2010

(marguerite)

Page 2: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2

C'est le

Super

Souk !

Page 3: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 3

Continuerà coderchaqueprojetde zéro...

Page 4: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 4

Adopter unframeworkCSS ?

Page 5: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 5

Adopter unframeworkCSS ?

✔ Trousse de

feuilles de style

✔ Socle multi navigateurs

✔ Classes prêtes à l'emploi

✔ Harmonie graphique

✔ Temps gagné

Page 6: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 6

Adopter unframeworkCSS ?

✔ Temps d'apprentissage

✔ Code externe, inconnu

✔ Non sémantique

✔ Carcan contraignant

Page 7: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 7

Page 8: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 8

au particulier

Du général

Page 9: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 9

reset

charte typographique

formulaires

positionnement des

blocs principaux

rythme, grille

variantespar gabarits

styles génériques

Page 10: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 10

forms.css

layout.css

grid.css

reset.css

typo.css

pages.css

skin.css

reset

formulaires

positionnement des

blocs principaux

rythme, grille

variantespar gabarits

styles génériques

charte typographique

Page 11: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 11

Page 12: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 12

Page 13: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 13

Page 14: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 14

Page 15: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 15

Page 16: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 16

en développement en production

styles.css

Page 17: Méthode Daisy - romy.tetue.netromy.tetue.net/IMG/pdf/daisy.pdf · Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 2 C 'est le S uper S ouk

Méthode Daisy : les CSS feuille à feuille — Romy Duhem-Verdière — Paris Web 2010 17

Merci !

Crédits photo : diapo 2 CC by-nc confidence, comely ; diapo 3 CC by-nc-nd bleu celt ; diapo 4 CC by-sa ARBRE ÉVOLUTION.

Merci à Sébastien Bloc de Modddjo, à Coopaname, à Cyril Marion des Ateliers CYM, à Fil et Anne des troglos, à SPIP, à Hugues Moreno, à Marie Ototoï, aux W3Cafés, à Sophie fONfEk, aux Crocs de Swan, à Paris Web et à tous vos retours d'expérience en intégration.

http://romy.tetue.net/methode-daisy