1. Templer, Git, Bootstrap, PHP : des outilsTempler, Git, Bootstrap, PHP : des outils
libres pour concevoir le site d’une Websérielibres pour concevoir le site d’une Websérie

2. 2
Casting
Clément OUDOT
Webmaster du site
DonJon Legacy
Libriste
Premier site web en 1997

3. 3
La série : DonJon Legacy
Bande annonce : https://www.youtube.com/watch?v=1CxIoWWrUnY

4. 4
Chapitres
●
Pourquoi faire un site statique HTML ?
●
Présentation de Templer
●
Mise en page avec Bootstrap et CSS
●
Envoi d’un mail par script PHP
●
Gestion du code dans Git

5. 5
Pourquoi faire
un site
statique ?

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
●
Environnement de développement local simple
●
Fonctionne même sur des systèmes d'exploitation
propriétaires !

10. 10
PrésentationPrésentation
de Templerde Templer

11. 11
Templer
●
Logiciel libre de génération de sites statiques
●
Écrit en Perl
●
Utilisation de HTML::Template
●
Support de Markdown, Redis, Flux RSS, …
●
https://github.com/skx/templer

12. 12
mon-site/
├── include
├── input
│ ├── about.wgn
│ ├── index.wgn
│ └── robots.txt
├── layouts
│ └── default.layout
├── output
└── templer.cfg
Structure du site
●
Génération d’une
structure de base :
– Include : fchiers
communs
– Input : les fchiers qui
seront convertis
– Layout : les modèles
– Output : site généré

13. 13
Gestion multilingue
●
Création de dossiers fr/ et en/
●
Utilisation des variables de page
●
Corps de la page dans des documents inclus
●
Variables « fr-link » et « en-link » pour changer de
langue
●
Confguration Apache pour redirection selon la langue
du navigateur

14. 14
title: Accueil
en-link: /en/index.html
text_menu_hall: Hall
text_menu_dungeon: Donjon
----
<!-- tmpl_include name="head.inc"-->
<!-- tmpl_include name="menu.inc"-->
<!-- tmpl_include name="home.inc"-->
<!-- tmpl_include name="menu_foot.inc"--
>
<!-- tmpl_include name="banner_fr.inc"-->
<!-- tmpl_include name="foot.inc"-->
Code Templer
<ul class="nav navbar-nav navbar-right">
<!-- tmpl_if name="fr-link" -->
<li><a href="<!-- tmpl_var name="fr-link" -->"><img
src="/images/fr.png" alt="fr" /></a></li>
<!-- /tmpl_if -->
<!-- tmpl_if name="en-link" -->
<li><a href="<!-- tmpl_var name="en-link" -->"><img
src="/images/en.png" alt="en" /></a></li>
<!-- /tmpl_if -->
</ul>

15. 15
Redirection Apache
RewriteEngine On
RewriteCond %{HTTP:Accept-Language} ^en [NC]
RewriteRule ^/$ /en/ [L,R=301]
RewriteCond %{HTTP:Accept-Language} ^fr [NC]
RewriteRule ^/$ /fr/ [L,R=301]

16. 16
Mise en page avecMise en page avec
Bootstrap et CSSBootstrap et CSS

17. 17
Bootstrap
●
Framework CSS et JS (base sur JQuery)
●
Système de grille (grid) avec gestion des media
queries (responsive design)
●
Composants graphiques (boutons, tableaux,
panneaux)
●
Modifcation du thème possible (Less)
●
Voir http://getbootstrap.com et
https://bootswatch.com/

18. 18
Exemple
<div class="text-center">
<div class="alert alert-djl">
<tmpl_var name="text_watch_channels" />
<a class="btn btn-default" href="https://www.youtube.com/channel/UCVO3scwrW2QEyxiVcBbEbtw"><i
class="fa fa-youtube"></i></a>
<a class="btn btn-default" href="http://www.dailymotion.com/donjonlegacy"><i class="fa fa-video-
camera"></i></a>
</div>
</div>

19. 19
Autres frameworks
●
Font Awesome :
– Galerie d’icônes
– http://fontawesome.io/
●
Hover :
– Animations
– http://ianlunn.github.io/Hover/

20. 20
Animations personnalisées
h1 {
animation: djl-text 1s;
}
@keyframes djl-text {
0% {
text-shadow: 0px 0px 10px #000;
margin-left: 100px;
color: #32728a;
}
100% {
text-shadow: 0px 0px 5px #32728a;
}
}

21. 21
EnvoiEnvoi
d’un maild’un mail
en PHPen PHP

22. 22
Du code PHP ?
●
Pour certaines fonctionnalités, comme formulaire de
contact avec envoi de mail, un script est nécessaire
●
PHP est un langage simple et présent sur la plupart des
serveurs Web
●
Formulaire HTML dans une page statique
●
Réception du POST dans le script PHP, qui renvoie vers
une page statique après traitement

23. 23
Formulaire
<form action="/mail.php" method="post">
<select name="subject" class="form-control">
<option value="<!-- tmpl_var name="text_contact_team" -->"><!-- tmpl_var
name="text_contact_team" --></option>
<option value="<!-- tmpl_var name="text_contact_help" -->"><!-- tmpl_var
name="text_contact_help" --></option>
</select>
<input type="text" name="mail" placeholder="<!-- tmpl_var name="text_contact_mailinput" -->"
class="form-control" />
<textarea name="message" class="form-control" rows="5"></textarea>
<input type="hidden" name="returnlink" value="<!-- tmpl_var name="returnlink" -->" />
<input type="submit" class="form-control" />
</form>

24. 24
Code PHP
$subject = $_POST["subject"];
$message = $_POST["message"];
$mail = $_POST["mail"];
$returnlink = $_POST["returnlink"];
if (!$returnlink) {
$returnlink = "http://www.donjonlegacy.com";
}
if (!$subject or !$message) {
header("Location: " . $returnlink);
exit;
}

25. 25
GestionGestion
du codedu code
dans Gitdans Git

26. 26
Utilisation de Git
●
Gestion des versions et visualisation des modifcations
●
Sauvegardes
●
Branches pour tests
●
Collaboration

27. 27
Du développement à la mise en ligne
●
Sur le poste de travail :
– git commit
– git push
●
Sur le serveur :
– git pull
– templer -f

28. 28
GitHub
●
Service Git en ligne le plus populaire
●
Mais des alternatives existent :
– https://about.gitlab.com/
– https://framagit.org/
●
Code du site Donjon Legacy disponible sur
https://github.com/coudot/donjonlegacy

29. 29
Questions ?

30. 30
http://www.donjonlegacy.comhttp://www.donjonlegacy.com
https://github.com/coudot/donjonlegacyhttps://github.com/coudot/donjonlegacy