Présentation à la cantine numérique de Rennes, dans le cadre des Rails Bar. Auteur : Agence Organic Web

1. Staticmatic, Haml et
Compass
Ou comment prototyper un site sans douleur, tout en
respectant le principe DRY

2. Bonjour,
Je m’appelle Mathias Standaert.

3. Bonjour,
Je m’appelle Mathias Standaert.
Je suis le gérant de l’agence Organic Web, depuis 2007.

4. Bonjour,
Je m’appelle Mathias Standaert.
Je suis le gérant de l’agence Organic Web, depuis 2007.
Je suis aussi développeur.

5. Donc
On va parler d’usabilité, de prototypage et de bonnes
pratiques.

6. L’usabilité Quesaquo ?
Atteindre le but !

7. L’usabilité Quesaquo ?
Atteindre le but !
Permettre à l’internaute de faire ce pourquoi il s’est
connecté à notre site web.

8. Test utilisateurs
Nous savons tous que tester notre site internet dans la vraie
vie est essentiel !

9. Test utilisateurs
Nous savons tous que tester notre site internet dans la vraie
vie est essentiel !
Il faut donc réaliser une version statique du site internet, et
la faire tester par :

10. DIY vs Pro
- Un ergonome professionnel (si j’en ai les moyens).
- Un panel d’utilisateurs (de mon entourage par exemple).
Ref. bibliographique : Don’t make me think & Rocket Surgery Made Easy (Steve Krug)

11. DRY
Oui, mais quid du respect du principe DRY ?

12. DRY
Oui, mais quid du respect du principe DRY ?
Là, je vais tout refaire lors du développement non ?

13. Staticmatic
C’est là que Staticmatic fait son entrée en scène.

14. Staticmatic c’est quoi ?
Un générateur de site statique en ruby.

15. Staticmatic c’est quoi ?
Je code en Haml

16. Staticmatic comment ?
Je lance le serveur

17. Staticmatic c’est bien ?
Cela génère du code html

18. Staticmatic installation
gem install staticmatic

19. Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.

20. Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Respect du principe DRY

21. Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Respect du principe DRY
Le code doit bien être indenté

22. Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Respect du principe DRY
Le code doit bien être indenté
La structure du code doit être claire

23. Et mes CSS ?
Comme annoncé, nous utiliserons Compass que Kaelig nous
a présenté le 04/10/2011.

24. Et mes CSS ?
Comme annoncé, nous utiliserons Compass que Kaelig nous
a présenté le 04/10/2011.
Mais le tout avec un peu de sauce Haml à l’intérieur dedans.

25. Staticmatic, c’est partit ?
Des questions ?

26. Création d’un projet
cd ~/Desktop

27. Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo

28. Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
cd staticmatic-demo

29. Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
cd staticmatic-demo
mate .

30. Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
cd staticmatic-demo
mate .
staticmatic preview .

31. Arborescence de base
2 dossiers à la racine

32. Arborescence de base
2 dossiers à la racine
- config

33. Arborescence de base
2 dossiers à la racine
- config
- src

34. Le dossier config
well...

35. Le dossier src
3 dossiers

36. Le dossier src
3 dossiers
- Layouts

37. Le dossier src
3 dossiers
- Layouts
- Pages

38. Le dossier src
3 dossiers
- Layouts
- Pages
- Stylesheets

39. Quelques liens
https://github.com/staticmatic/staticmatic
http://haml-lang.com/
http://staticmatic.rubyforge.org
https://github.com/adamstac/staticmatic-bootstrap