RMLL 2014 - Site statique avec Templer, Bootstrap et Git
-
Upload
oudot-clement -
Category
Documents
-
view
471 -
download
3
description
Transcript of RMLL 2014 - Site statique avec Templer, Bootstrap et Git
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