[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le site d'une Websérie

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
Casting
Clément OUDOT
Webmaster du site
DonJon Legacy
Libriste
Premier site web en 1997

3
Épisode précédent
RMLL 2014 : conférence sur le site Anticuisine

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

5
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

6
Pourquoi faire
un site
statique ?

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

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

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

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

11
PrésentationPrésentation
de Templerde Templer

12
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

13
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 : fichiers
communs
– Input : les fichiers qui
seront convertis
– Layout : les modèles
– Output : site généré

14
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
● Configuration Apache pour redirection selon la langue
du navigateur

15
title: Accueil
en-link: /en/index.html
text_menu_hall: Hall
text_menu_dungeon: Donjon
----





Code Templer
<ul class="nav navbar-nav navbar-right">

<li><a href=""><img
src="/images/fr.png" alt="fr" /></a></li>


<li><a href=""><img
src="/images/en.png" alt="en" /></a></li>

</ul>

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

17
Mise en page avecMise en page avec
Bootstrap et CSSBootstrap et CSS

18
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)
● Modification du thème possible (Less)
● Voir http://getbootstrap.com et
https://bootswatch.com/

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

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

21
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;
}
}

22
EnvoiEnvoi
d’un maild’un mail
en PHPen PHP

23
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

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

25
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;
   }

26
GestionGestion
du codedu code
dans Gitdans Git

27
Utilisation de Git
● Gestion des versions et visualisation des modifications
● Sauvegardes
● Branches pour tests
● Collaboration

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

29
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

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

[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le site d'une Websérie

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à [RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le site d'une Websérie

Similaire à [RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le site d'une Websérie (20)

Plus de Clément OUDOT

Plus de Clément OUDOT (20)

[RMLL2017] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir le site d'une Websérie