Comment j'ai réalisé le site http://www.anticuisine.fr avec Templer, Boottstrap et Git

1. Site statique avec Templer, Bootstrap
et Git
Clément OUDOT
coudot@linagora.com

2. 2
Qui suis-je ?
Logiciel libre
LDAP
LINAGORA
SSO
Web

3. 3
Anticuisine
● L'anticuisine n'est ni un courant, ni
un dogme encore moins un choix.
● Elle est une forme élaborée de
déchéance moderne dans laquelle
beaucoup se reconnaîtront.
● Elle est une imposture d'esprit
reliant toute une somme de
performances périphériques.
● Elle est au final un pavé dans la
soupe, une vaste blague bien
décalée.

4. 4
Encore un site à faire !
● Cahier des charges :
– Quelques pages avec photos, pour commencer
– J'ai pas trop le temps
– Mon copain a une tablette Pomme
– Mise en ligne sur un serveur perso
– Mon IDE c'est vi
– C'est pas moi qui m'occupe du contenu

5. 5
Un site en HTML pur ?Un site en HTML pur ?

6. 6
Sécurité
● Pas de script coté serveur
● Pas d'injection de
formulaire
● Pas de mot de passe ni
de données bancaires

7. 7
Performances
● Pas de calcul côté serveur
● Big data / cluster
● No SQL, et rien d'autre
non plus
● Utilisation optimale du
cache HTTP

8. 8
Accessibilité
● Utilisation des dernières
normes du Web
● Framework CSS et JS
● Référencement naturel

9. 9
Hébergement
● « Host everywhere »
● Fichiers dans un
répertoire
● Serveur web basique
● Fonctionne même sur des
systèmes d'exploitation
propriétaires !

10. 10
TemplerTempler

11. 11
Présentation
● Logiciel libre de génération
de sites statiques
● Écrit en Perl, utilisation de
HTML::Template
● https://github.com/skx/tem
pler
● Support de Markdown,
Redis, Flux RSS, ...

12. 12
Structure du site
● Génération de la
structure :
$ templer-generate mon-site
mon-site/
├── include
├── input
│ ├── about.wgn
│ ├── index.wgn
│ └── robots.txt
├── layouts
│ └── default.layout
├── output
└── templer.cfg

13. 13
Création d'un menu de navigation
● Créer le fichier
input/menu.inc
● Charger ce fichier dans
une variable de page
« menu » :
menu: read_file('menu.inc')
● Inclure dans les pages :
<!-- tmpl_var name="menu"-->

14. 14
Mais aussi
● Gestion de plusieurs
modèles (layouts)
● Boucle d'inclusion
d'autres fichiers
● Système de greffons
● Exécution de commande
Shell

15. 15
BootstrapBootstrap

16. 16
Présentation
● Le framework tendance pour
faire une interface Web
● Système de grille pour le
« responsive design »
● Bibliothèque JS basée sur
Jquery
● Gestion des différents
navigateurs (même les
moisis)

17. 17
Des composants
● Carrousel
● Icônes
● Boutons
● Éléments de formulaire
● Menu de navigation
● Badges

18. 18
Grille
<div class="row">
<div class="col-md-4">
<img src="images/anticuisine.fr_boutique1.jpg" class="img-thumbnail img-
responsive" />
</div>
<div class="col-md-4">
<img src="images/anticuisine.fr_boutique2.jpg" class="img-thumbnail img-
responsive" />
</div>
<div class="col-md-4">
<img src="images/anticuisine.fr_boutique3.jpg" class="img-thumbnail img-
responsive" />
</div>
</div>

19. 19
Grille

20. 20
GitGit

21. 21
Présentation
● Si tu connais pas Git à 50 ans, tu as raté ta vie de
développeur
● Si tu es nul comme moi, il y a Github
● Dépôt du site Anticuisine :
https://github.com/coudot/anticuisine

22. 22
Utilisation
● Travail individuel
– Sauvegarde régulière des
travaux
– Historisation des
changements
– Des carrés verts dans
mon profil
● Travail collectif
– Soumission de nouveaux
contenus

23. 23
ConclusionConclusion

24. 24
Pas besoin de matérielPas besoin de matériel
compliqué pour fairecompliqué pour faire
une bonne recetteune bonne recette

25. 25
Crédits
Auteur
Guilhem
http://guilhem0.free.fr/
Images et photos appartiennent au projet Anticuisine
Les sources du site sont libres de droit

26. Merci de votre attention
http://www.anticuisine.fr