[JDLL 2018] 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
La série : DonJon Legacy
Bande annonce : https://www.youtube.com/watch?v=1CxIoWWrUnY

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
Pourquoi faire
un site
statique ?

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

10
PrésentationPrésentation
de Templerde Templer

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

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
Mise en page avecMise en page avec
Bootstrap et CSSBootstrap et CSS

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
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
Autres frameworks
●
Font Awesome :
– Galerie d’icônes
– http://fontawesome.io/
●
Hover :
– Animations
– http://ianlunn.github.io/Hover/

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
EnvoiEnvoi
d’un maild’un mail
en PHPen PHP

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

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
GestionGestion
du codedu code
dans Gitdans Git

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

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

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

Similaire à [JDLL 2018] 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)

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