Site statique avec Templer, Bootstrap
et Git
Clément OUDOT
coudot@linagora.com
2
Qui suis-je ?
Logiciel libre
LDAP
LINAGORA
SSO
Web
3
Anticuisine
● L'anticuisine n'est ni un courant, ni
un dogme encore moins un choix.
● Elle est une forme élaborée de
déc...
4
Encore un site à faire !
● Cahier des charges :
– Quelques pages avec photos, pour commencer
– J'ai pas trop le temps
– ...
5
Un site en HTML pur ?Un site en HTML pur ?
6
Sécurité
● Pas de script coté serveur
● Pas d'injection de
formulaire
● Pas de mot de passe ni
de données bancaires
7
Performances
● Pas de calcul côté serveur
● Big data / cluster
● No SQL, et rien d'autre
non plus
● Utilisation optimale...
8
Accessibilité
● Utilisation des dernières
normes du Web
● Framework CSS et JS
● Référencement naturel
9
Hébergement
● « Host everywhere »
● Fichiers dans un
répertoire
● Serveur web basique
● Fonctionne même sur des
systèmes...
10
TemplerTempler
11
Présentation
● Logiciel libre de génération
de sites statiques
● Écrit en Perl, utilisation de
HTML::Template
● https:/...
12
Structure du site
● Génération de la
structure :
$ templer-generate mon-site
mon-site/
├── include
├── input
│ ├── abou...
13
Création d'un menu de navigation
● Créer le fichier
input/menu.inc
● Charger ce fichier dans
une variable de page
« men...
14
Mais aussi
● Gestion de plusieurs
modèles (layouts)
● Boucle d'inclusion
d'autres fichiers
● Système de greffons
● Exéc...
15
BootstrapBootstrap
16
Présentation
● Le framework tendance pour
faire une interface Web
● Système de grille pour le
« responsive design »
● B...
17
Des composants
● Carrousel
● Icônes
● Boutons
● Éléments de formulaire
● Menu de navigation
● Badges
18
Grille
<div class="row">
<div class="col-md-4">
<img src="images/anticuisine.fr_boutique1.jpg" class="img-thumbnail img...
19
Grille
20
GitGit
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...
22
Utilisation
● Travail individuel
– Sauvegarde régulière des
travaux
– Historisation des
changements
– Des carrés verts ...
23
ConclusionConclusion
24
Pas besoin de matérielPas besoin de matériel
compliqué pour fairecompliqué pour faire
une bonne recetteune bonne recette
25
Crédits
Auteur
Guilhem
http://guilhem0.free.fr/
Images et photos appartiennent au projet Anticuisine
Les sources du sit...
Merci de votre attention
http://www.anticuisine.fr
Prochain SlideShare
Chargement dans…5
×

RMLL 2014 - Site statique avec Templer, Bootstrap et Git

1 081 vues

Publié le

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

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

RMLL 2014 - Site statique avec Templer, Bootstrap et Git

  1. 1. Site statique avec Templer, Bootstrap et Git Clément OUDOT coudot@linagora.com
  2. 2. 2 Qui suis-je ? Logiciel libre LDAP LINAGORA SSO Web
  3. 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. 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. 5 Un site en HTML pur ?Un site en HTML pur ?
  6. 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. 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. 8 Accessibilité ● Utilisation des dernières normes du Web ● Framework CSS et JS ● Référencement naturel
  9. 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. 10 TemplerTempler
  11. 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. 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. 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. 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. 15 BootstrapBootstrap
  16. 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. 17 Des composants ● Carrousel ● Icônes ● Boutons ● Éléments de formulaire ● Menu de navigation ● Badges
  18. 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. 19 Grille
  20. 20. 20 GitGit
  21. 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. 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. 23 ConclusionConclusion
  24. 24. 24 Pas besoin de matérielPas besoin de matériel compliqué pour fairecompliqué pour faire une bonne recetteune bonne recette
  25. 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. 26. Merci de votre attention http://www.anticuisine.fr

×