Site statique avec Templer, Bootstrap et Git

Clément OUDOTcoudot@linagora.com

2

Qui suis-je ?

Logiciel libre

LDAP

LINAGORA

SSOWeb

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

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

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 du

cache HTTP

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 d'exploitation propriétaires !

10

TemplerTempler

11

Présentation

● Logiciel libre de génération de sites statiques

● Écrit en Perl, utilisation de HTML::Template

● https://github.com/skx/templer

● Support de Markdown, Redis, Flux RSS, ...

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

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

Mais aussi

● Gestion de plusieurs modèles (layouts)

● Boucle d'inclusion d'autres fichiers

● Système de greffons● Exécution de commande

Shell

15

BootstrapBootstrap

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

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-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

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● Dépôt du site Anticuisine :

https://github.com/coudot/anticuisine

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

ConclusionConclusion

24

Pas besoin de matériel Pas besoin de matériel compliqué pour faire compliqué pour faire

une bonne recetteune bonne recette

25

Crédits

AuteurGuilhem

http://guilhem0.free.fr/

Images et photos appartiennent au projet Anticuisine

Les sources du site sont libres de droit

Merci de votre attention

http://www.anticuisine.fr