Comparatif de frameworks HTML/Javascript pour le développement ...
Développement efficace avec les frameworks CSS
-
Upload
thomas-parisot -
Category
Technology
-
view
5.469 -
download
0
Transcript of Développement efficace avec les frameworks CSS
- 1. Dveloppement efficace avec les frameworks CSS Paris-Web 2008 Paris-Web 2008 Thomas Parisot ( case.oncle-tom.net )
2. Plan
- Qu'est-ce qu'un framework CSS ?
- Modules et fonctionnalits
- Frameworks CSS majeurs
- Comment choisir un framework ?
- Cas pratique avec Blueprint
3. Qu'est-ce qu'un framework CSS ? 4. Qu'est-ce qu'un framework CSS ?
- Qu'est-ce qu'un framework ?
- Base de travail extensible
- Code rutilisable
- Rail de dveloppement
- Outil de productivit
5. Qu'est-ce qu'un framework CSS ?
- OK mais pour les CSS ?
- Fondations solidescross-browser
- Classes prtes l'usage T0
- Mise en page facilite
- Du rythme vertical
- Des modules indpendants
- Du temps de gagn dans vos projets
6. Modules et fonctionnalits 7. Modules et fonctionnalits
- Reset
- Bass et/ou inspirs du reset.css d'ric Meyer
- Harmonise l'affichage pour tous les navigateurs
8. Modules et fonctionnalits
- Typographie
- Rgle ... la typographie
- Complment idal au reset.css
- Trs variable d'un framework l'autre
9. Modules et fonctionnalits
- Grilles
- Prsentations en colonnes
- Libres ou assistes
- Largeur fixe, fluide ou lastique
10. Modules et fonctionnalits
- Impression
- Optimise pour l'impression
- Rvle l'URL des liens hypertextes
11. Modules et fonctionnalits
- Correctifs pour Internet Explorer
- Intgrs ou en feuille(s) spare(s)
- Marges de colonnes
- Annulation des flottants
- Attribution du hasLayout
12. Modules et fonctionnalits
- Plugins
- Feuilles additionnelles optionnelles
- Des exemples ?
- -> Right to left(RTL),
- ->Liens sortants
- ->Liens/boutons styls
- ->lightbox
- ->etc.
13. Frameworks CSS majeurs 14. Frameworks CSS majeurs
- Blueprint
- Complet
- Facile
- Largeur fixe (+ lastique viaplugin )
- Compressor+ configurateur
- Reset + Grille + Typographie + IE + Formulaires + Print
15. Frameworks CSS majeurs
- Yahoo! CSS Fundation
- Excellente documentation
- Fluide ou fixe ou les 2
- Configurateur de grille en ligne (+Autogrid )
- CDN ( Content Delivery Network )
- Nommage des classes difficilement mmorisable
- Reset + Grille + Fonts + IE
16. Frameworks CSS majeurs
- Tripoli
- Trs facile
- Purement ax typographie
- Mise en forme pragmatique
- Excellent compromis Blueprint Typography
- Reset + Typographie + Formulaires + IE
17. Frameworks CSS majeurs
- YAML ( Yet Another Multicolumn Layout )
- Relativement complet
- Modulenavigation
- Beaucoup d'exemples
- Pas de grille
- Reset + Navigation + Typographie + IE + Debug + Print
18. Frameworks CSS majeurs
- 960 Grid System
- Trs trs similaire Blueprint
- 12 ou 16 colonnes
- Intgration pour Fireforks, Omnigraffle, Photoshop et Visio
- Reset + Grille + Fonts
19. Comment choisir un framework ? 20. Comment choisir un framework CSS ?
- Quelques questions se poser
- Largeur fixe ou fluide ?
- Contexte graphique stable ou pas ?
- Facilit d'utilisation
- Exhaustivit de la documentation
- Prennit du projet
- Rapport contraintes / avantages
- Ressenti / Subjectivit
21. Comment choisir un framework CSS ?
- Situations risques
- Contexte graphique changeant
- Incomprhension du code utiliser
- Trop de comportements standards modifier
- Allergie la dnomination des classes
- Collisions d'ID avec votre CMS (#col1, #col2 etc.)
22. Cas pratique avec Blueprint 23. Cas pratique avec Blueprint 24. Cas pratique avec Blueprint 25. Cas pratique avec Blueprint 26. Cas pratique avec Blueprint 27. Cas pratique avec Blueprint 28. Cas pratique avec Blueprint 29. Cas pratique avec Blueprint 30. Cas pratique avec Blueprint 31. Merci ;-) http://www.slideshare.net/oncletom/dveloppement-efficace-avec-les-frameworks-css-presentation/