Staticmatic, Haml et
Compass
Ou comment prototyper un site sans douleur, tout en
respectant le principe DRY
Bonjour,
Je m’appelle Mathias Standaert.
Bonjour,
Je m’appelle Mathias Standaert.
Je suis le gérant de l’agence Organic Web, depuis 2007.
Bonjour,
Je m’appelle Mathias Standaert.
Je suis le gérant de l’agence Organic Web, depuis 2007.
Je suis aussi développeur.
Donc
On va parler d’usabilité, de prototypage et de bonnes
pratiques.
L’usabilité Quesaquo ?
Atteindre le but !
L’usabilité Quesaquo ?
Atteindre le but !
Permettre à l’internaute de faire ce pourquoi il s’est
connecté à notre site web.
Test utilisateurs
Nous savons tous que tester notre site internet dans la vraie
vie est essentiel !
Test utilisateurs
Nous savons tous que tester notre site internet dans la vraie
vie est essentiel !
Il faut donc réaliser ...
DIY vs Pro
- Un ergonome professionnel (si j’en ai les moyens).
- Un panel d’utilisateurs (de mon entourage par exemple).
...
DRY
Oui, mais quid du respect du principe DRY ?
DRY
Oui, mais quid du respect du principe DRY ?
Là, je vais tout refaire lors du développement non ?
Staticmatic
C’est là que Staticmatic fait son entrée en scène.
Staticmatic c’est quoi ?
Un générateur de site statique en ruby.
Staticmatic c’est quoi ?
Je code en Haml
Staticmatic comment ?
Je lance le serveur
Staticmatic c’est bien ?
Cela génère du code html
Staticmatic installation
gem install staticmatic
Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Respect du principe DRY
Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Respect du principe DRY
Le code doit bien être inden...
Haml huh !?!
Remplacer ton horrible code html par des presque Haïkus.
Respect du principe DRY
Le code doit bien être inden...
Et mes CSS ?
Comme annoncé, nous utiliserons Compass que Kaelig nous
a présenté le 04/10/2011.
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...
Staticmatic, c’est partit ?
Des questions ?
Création d’un projet
cd ~/Desktop
Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
cd staticmatic-demo
Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
cd staticmatic-demo
mate .
Création d’un projet
cd ~/Desktop
staticmatic setup ./staticmatic-demo
cd staticmatic-demo
mate .
staticmatic preview .
Arborescence de base
2 dossiers à la racine
Arborescence de base
2 dossiers à la racine
- config
Arborescence de base
2 dossiers à la racine
- config
- src
Le dossier config
well...
Le dossier src
3 dossiers
Le dossier src
3 dossiers
- Layouts
Le dossier src
3 dossiers
- Layouts
- Pages
Le dossier src
3 dossiers
- Layouts
- Pages
- Stylesheets
Quelques liens
https://github.com/staticmatic/staticmatic
http://haml-lang.com/
http://staticmatic.rubyforge.org
https://g...
Prochain SlideShare
Chargement dans…5
×

Staticmatic, Haml et Compass

635 vues

Publié le

Présentation à la cantine numérique de Rennes, dans le cadre des Rails Bar.

Auteur : Agence Organic Web

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
635
Sur SlideShare
0
Issues des intégrations
0
Intégrations
97
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Staticmatic, Haml et Compass

  1. 1. Staticmatic, Haml et Compass Ou comment prototyper un site sans douleur, tout en respectant le principe DRY
  2. 2. Bonjour, Je m’appelle Mathias Standaert.
  3. 3. Bonjour, Je m’appelle Mathias Standaert. Je suis le gérant de l’agence Organic Web, depuis 2007.
  4. 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. 5. Donc On va parler d’usabilité, de prototypage et de bonnes pratiques.
  6. 6. L’usabilité Quesaquo ? Atteindre le but !
  7. 7. L’usabilité Quesaquo ? Atteindre le but ! Permettre à l’internaute de faire ce pourquoi il s’est connecté à notre site web.
  8. 8. Test utilisateurs Nous savons tous que tester notre site internet dans la vraie vie est essentiel !
  9. 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. 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. 11. DRY Oui, mais quid du respect du principe DRY ?
  12. 12. DRY Oui, mais quid du respect du principe DRY ? Là, je vais tout refaire lors du développement non ?
  13. 13. Staticmatic C’est là que Staticmatic fait son entrée en scène.
  14. 14. Staticmatic c’est quoi ? Un générateur de site statique en ruby.
  15. 15. Staticmatic c’est quoi ? Je code en Haml
  16. 16. Staticmatic comment ? Je lance le serveur
  17. 17. Staticmatic c’est bien ? Cela génère du code html
  18. 18. Staticmatic installation gem install staticmatic
  19. 19. Haml huh !?! Remplacer ton horrible code html par des presque Haïkus.
  20. 20. Haml huh !?! Remplacer ton horrible code html par des presque Haïkus. Respect du principe DRY
  21. 21. Haml huh !?! Remplacer ton horrible code html par des presque Haïkus. Respect du principe DRY Le code doit bien être indenté
  22. 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. 23. Et mes CSS ? Comme annoncé, nous utiliserons Compass que Kaelig nous a présenté le 04/10/2011.
  24. 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. 25. Staticmatic, c’est partit ? Des questions ?
  26. 26. Création d’un projet cd ~/Desktop
  27. 27. Création d’un projet cd ~/Desktop staticmatic setup ./staticmatic-demo
  28. 28. Création d’un projet cd ~/Desktop staticmatic setup ./staticmatic-demo cd staticmatic-demo
  29. 29. Création d’un projet cd ~/Desktop staticmatic setup ./staticmatic-demo cd staticmatic-demo mate .
  30. 30. Création d’un projet cd ~/Desktop staticmatic setup ./staticmatic-demo cd staticmatic-demo mate . staticmatic preview .
  31. 31. Arborescence de base 2 dossiers à la racine
  32. 32. Arborescence de base 2 dossiers à la racine - config
  33. 33. Arborescence de base 2 dossiers à la racine - config - src
  34. 34. Le dossier config well...
  35. 35. Le dossier src 3 dossiers
  36. 36. Le dossier src 3 dossiers - Layouts
  37. 37. Le dossier src 3 dossiers - Layouts - Pages
  38. 38. Le dossier src 3 dossiers - Layouts - Pages - Stylesheets
  39. 39. Quelques liens https://github.com/staticmatic/staticmatic http://haml-lang.com/ http://staticmatic.rubyforge.org https://github.com/adamstac/staticmatic-bootstrap

×