SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
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
----
<!-- 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
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="<!-- 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
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
29
Questions ?
30
http://www.donjonlegacy.comhttp://www.donjonlegacy.com
https://github.com/coudot/donjonlegacyhttps://github.com/coudot/donjonlegacy

Contenu connexe

Tendances

Mongodb introduction
Mongodb introductionMongodb introduction
Mongodb introductioneric German
 
Tout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasTout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasPierre-Alban DEWITTE
 
[RMLL2017] Des logiciels libres pour la gestion des identités !
[RMLL2017] Des logiciels libres pour la gestion des identités ![RMLL2017] Des logiciels libres pour la gestion des identités !
[RMLL2017] Des logiciels libres pour la gestion des identités !Clément OUDOT
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapBassem ABCHA
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirYves Van Goethem
 
Meetup CakePHP Amiens / 25 mars 2015
Meetup CakePHP Amiens / 25 mars 2015Meetup CakePHP Amiens / 25 mars 2015
Meetup CakePHP Amiens / 25 mars 2015Benjamin Lampérier
 
[#1] Qu’est ce que php?
[#1] Qu’est ce que php?[#1] Qu’est ce que php?
[#1] Qu’est ce que php?opentuto
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Alexandre Marie
 
PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005Eric D.
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB13p
 
Créer, Pousser et Lancer un serveur RESTful en 10 min.
Créer, Pousser et Lancer un serveur RESTful en 10 min.Créer, Pousser et Lancer un serveur RESTful en 10 min.
Créer, Pousser et Lancer un serveur RESTful en 10 min.Anthony Faucogney
 
10 Slides à lire avant de commencer le développement Android
10 Slides à lire avant de commencer le développement Android10 Slides à lire avant de commencer le développement Android
10 Slides à lire avant de commencer le développement AndroidAnthony Faucogney
 
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Laurent Tulpan
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptKhalid Jebbari
 
Introduction à CakePHP
Introduction à CakePHPIntroduction à CakePHP
Introduction à CakePHPPierre MARTIN
 

Tendances (20)

Mongodb introduction
Mongodb introductionMongodb introduction
Mongodb introduction
 
Tout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pasTout ce que le getting started mongo db ne vous dira pas
Tout ce que le getting started mongo db ne vous dira pas
 
[RMLL2017] Des logiciels libres pour la gestion des identités !
[RMLL2017] Des logiciels libres pour la gestion des identités ![RMLL2017] Des logiciels libres pour la gestion des identités !
[RMLL2017] Des logiciels libres pour la gestion des identités !
 
Application web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrapApplication web php5 html5 css3 bootstrap
Application web php5 html5 css3 bootstrap
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
Meetup CakePHP Amiens / 25 mars 2015
Meetup CakePHP Amiens / 25 mars 2015Meetup CakePHP Amiens / 25 mars 2015
Meetup CakePHP Amiens / 25 mars 2015
 
[#1] Qu’est ce que php?
[#1] Qu’est ce que php?[#1] Qu’est ce que php?
[#1] Qu’est ce que php?
 
Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
Php4 Mysql
Php4 MysqlPhp4 Mysql
Php4 Mysql
 
PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005
 
Utilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDBUtilisation de node.js avec mongoDB
Utilisation de node.js avec mongoDB
 
Créer, Pousser et Lancer un serveur RESTful en 10 min.
Créer, Pousser et Lancer un serveur RESTful en 10 min.Créer, Pousser et Lancer un serveur RESTful en 10 min.
Créer, Pousser et Lancer un serveur RESTful en 10 min.
 
10 Slides à lire avant de commencer le développement Android
10 Slides à lire avant de commencer le développement Android10 Slides à lire avant de commencer le développement Android
10 Slides à lire avant de commencer le développement Android
 
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
Donner un turbo seo pour joomla. Conférence au JoomlaDay 2019
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Le portage des WebExtensions
Le portage des WebExtensionsLe portage des WebExtensions
Le portage des WebExtensions
 
Mpdf 4
Mpdf 4Mpdf 4
Mpdf 4
 
iGraal et les webextensions
iGraal et les webextensionsiGraal et les webextensions
iGraal et les webextensions
 
Introduction à CakePHP
Introduction à CakePHPIntroduction à CakePHP
Introduction à CakePHP
 

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

ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSHoracio Gonzalez
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1Horacio Gonzalez
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebYoann Gotthilf
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSHoracio Gonzalez
 
Alteca - les bonnes pratiques du développement Web - avril 2014
Alteca - les bonnes pratiques du développement Web - avril 2014Alteca - les bonnes pratiques du développement Web - avril 2014
Alteca - les bonnes pratiques du développement Web - avril 2014François CRETON
 
Les bonnes pratiques du developpement web - Alteca - avril 2014
Les bonnes pratiques du developpement web - Alteca - avril 2014Les bonnes pratiques du developpement web - Alteca - avril 2014
Les bonnes pratiques du developpement web - Alteca - avril 2014François CRETON
 
Les bonnes pratiques du developpement Web - Alteca - avril 2014
Les bonnes pratiques du developpement Web - Alteca - avril 2014Les bonnes pratiques du developpement Web - Alteca - avril 2014
Les bonnes pratiques du developpement Web - Alteca - avril 2014François CRETON
 
Le seo et les redirections d urls
Le seo et les redirections d urlsLe seo et les redirections d urls
Le seo et les redirections d urlsAlexandre Filluzeau
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du FrontYannick Croissant
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3Horacio Gonzalez
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site webEmmanuel Gautier
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Kenny Dits
 
HTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsHTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsJean-Pierre Vincent
 

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

ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1Enib   cours c.a.i. web - séance #1 - html5 css3-js - 1
Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
Alteca - les bonnes pratiques du développement Web - avril 2014
Alteca - les bonnes pratiques du développement Web - avril 2014Alteca - les bonnes pratiques du développement Web - avril 2014
Alteca - les bonnes pratiques du développement Web - avril 2014
 
Les bonnes pratiques du developpement web - Alteca - avril 2014
Les bonnes pratiques du developpement web - Alteca - avril 2014Les bonnes pratiques du developpement web - Alteca - avril 2014
Les bonnes pratiques du developpement web - Alteca - avril 2014
 
Les bonnes pratiques du developpement Web - Alteca - avril 2014
Les bonnes pratiques du developpement Web - Alteca - avril 2014Les bonnes pratiques du developpement Web - Alteca - avril 2014
Les bonnes pratiques du developpement Web - Alteca - avril 2014
 
Le seo et les redirections d urls
Le seo et les redirections d urlsLe seo et les redirections d urls
Le seo et les redirections d urls
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
 
Améliorer la rapidité de son site web
Améliorer la rapidité de son site webAméliorer la rapidité de son site web
Améliorer la rapidité de son site web
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
HTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsHTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIs
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 

Plus de Clément OUDOT

[FOSDEM 2019] LemonLDAP::NG 2.0
[FOSDEM 2019] LemonLDAP::NG 2.0[FOSDEM 2019] LemonLDAP::NG 2.0
[FOSDEM 2019] LemonLDAP::NG 2.0Clément OUDOT
 
[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...
[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...
[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...Clément OUDOT
 
[OW2Con 2018] The FusionIAM project
[OW2Con 2018] The FusionIAM project[OW2Con 2018] The FusionIAM project
[OW2Con 2018] The FusionIAM projectClément OUDOT
 
[OSSPARIS17] Le guide du connard du logiciel libre
[OSSPARIS17] Le guide du connard du logiciel libre[OSSPARIS17] Le guide du connard du logiciel libre
[OSSPARIS17] Le guide du connard du logiciel libreClément OUDOT
 
[OSSPARIS17] Des logiciels libres pour la gestion des identités !
[OSSPARIS17] Des logiciels libres pour la gestion des identités ![OSSPARIS17] Des logiciels libres pour la gestion des identités !
[OSSPARIS17] Des logiciels libres pour la gestion des identités !Clément OUDOT
 
[RMLL2017] le guide du connard du logiciel libre
[RMLL2017] le guide du connard du logiciel libre[RMLL2017] le guide du connard du logiciel libre
[RMLL2017] le guide du connard du logiciel libreClément OUDOT
 
[RMLL2017] LDAPCon 2017
[RMLL2017] LDAPCon 2017[RMLL2017] LDAPCon 2017
[RMLL2017] LDAPCon 2017Clément OUDOT
 
[OW2Con 2017] News from LemonLDAP::NG
[OW2Con 2017] News from LemonLDAP::NG[OW2Con 2017] News from LemonLDAP::NG
[OW2Con 2017] News from LemonLDAP::NGClément OUDOT
 
[JDLL 2017] Le Guide du Connard du Logiciel Libre
[JDLL 2017] Le Guide du Connard du Logiciel Libre[JDLL 2017] Le Guide du Connard du Logiciel Libre
[JDLL 2017] Le Guide du Connard du Logiciel LibreClément OUDOT
 
KR2016 The Free Software Bastard Guide
KR2016 The Free Software Bastard GuideKR2016 The Free Software Bastard Guide
KR2016 The Free Software Bastard GuideClément OUDOT
 
S2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NG
S2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NGS2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NG
S2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NGClément OUDOT
 
The guide of Security Jerk
The guide of Security JerkThe guide of Security Jerk
The guide of Security JerkClément OUDOT
 
The wonderful story of Web Authentication and Single-Sign On
The wonderful story of Web Authentication and Single-Sign OnThe wonderful story of Web Authentication and Single-Sign On
The wonderful story of Web Authentication and Single-Sign OnClément OUDOT
 
Présentation de LemonLDAP::NG aux Journées Perl 2016
Présentation de LemonLDAP::NG aux Journées Perl 2016Présentation de LemonLDAP::NG aux Journées Perl 2016
Présentation de LemonLDAP::NG aux Journées Perl 2016Clément OUDOT
 
[JDLL 2016] OpenID Connect et FranceConnect
[JDLL 2016] OpenID Connect et FranceConnect[JDLL 2016] OpenID Connect et FranceConnect
[JDLL 2016] OpenID Connect et FranceConnectClément OUDOT
 
[OSSParis 2015] The OpenID Connect Protocol
[OSSParis 2015] The OpenID Connect Protocol[OSSParis 2015] The OpenID Connect Protocol
[OSSParis 2015] The OpenID Connect ProtocolClément OUDOT
 
[OW2Con 2015] LemonLDAP::NG 2.0 overview
[OW2Con 2015] LemonLDAP::NG 2.0 overview[OW2Con 2015] LemonLDAP::NG 2.0 overview
[OW2Con 2015] LemonLDAP::NG 2.0 overviewClément OUDOT
 
[LDAPCon 2015] The OpenID Connect Protocol
[LDAPCon 2015] The OpenID Connect Protocol[LDAPCon 2015] The OpenID Connect Protocol
[LDAPCon 2015] The OpenID Connect ProtocolClément OUDOT
 
Analyse OpenLDAP logs with ELK
Analyse OpenLDAP logs with ELKAnalyse OpenLDAP logs with ELK
Analyse OpenLDAP logs with ELKClément OUDOT
 
Le Guide du Connard du Logiciel Libre
Le Guide du Connard du Logiciel LibreLe Guide du Connard du Logiciel Libre
Le Guide du Connard du Logiciel LibreClément OUDOT
 

Plus de Clément OUDOT (20)

[FOSDEM 2019] LemonLDAP::NG 2.0
[FOSDEM 2019] LemonLDAP::NG 2.0[FOSDEM 2019] LemonLDAP::NG 2.0
[FOSDEM 2019] LemonLDAP::NG 2.0
 
[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...
[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...
[FLOSSCON 2019] Gestion des authentifications et des accès avec LemonLDAP::NG...
 
[OW2Con 2018] The FusionIAM project
[OW2Con 2018] The FusionIAM project[OW2Con 2018] The FusionIAM project
[OW2Con 2018] The FusionIAM project
 
[OSSPARIS17] Le guide du connard du logiciel libre
[OSSPARIS17] Le guide du connard du logiciel libre[OSSPARIS17] Le guide du connard du logiciel libre
[OSSPARIS17] Le guide du connard du logiciel libre
 
[OSSPARIS17] Des logiciels libres pour la gestion des identités !
[OSSPARIS17] Des logiciels libres pour la gestion des identités ![OSSPARIS17] Des logiciels libres pour la gestion des identités !
[OSSPARIS17] Des logiciels libres pour la gestion des identités !
 
[RMLL2017] le guide du connard du logiciel libre
[RMLL2017] le guide du connard du logiciel libre[RMLL2017] le guide du connard du logiciel libre
[RMLL2017] le guide du connard du logiciel libre
 
[RMLL2017] LDAPCon 2017
[RMLL2017] LDAPCon 2017[RMLL2017] LDAPCon 2017
[RMLL2017] LDAPCon 2017
 
[OW2Con 2017] News from LemonLDAP::NG
[OW2Con 2017] News from LemonLDAP::NG[OW2Con 2017] News from LemonLDAP::NG
[OW2Con 2017] News from LemonLDAP::NG
 
[JDLL 2017] Le Guide du Connard du Logiciel Libre
[JDLL 2017] Le Guide du Connard du Logiciel Libre[JDLL 2017] Le Guide du Connard du Logiciel Libre
[JDLL 2017] Le Guide du Connard du Logiciel Libre
 
KR2016 The Free Software Bastard Guide
KR2016 The Free Software Bastard GuideKR2016 The Free Software Bastard Guide
KR2016 The Free Software Bastard Guide
 
S2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NG
S2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NGS2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NG
S2LQ - Authentification unique sur le Web avec le logiciel libre LemonLDAP::NG
 
The guide of Security Jerk
The guide of Security JerkThe guide of Security Jerk
The guide of Security Jerk
 
The wonderful story of Web Authentication and Single-Sign On
The wonderful story of Web Authentication and Single-Sign OnThe wonderful story of Web Authentication and Single-Sign On
The wonderful story of Web Authentication and Single-Sign On
 
Présentation de LemonLDAP::NG aux Journées Perl 2016
Présentation de LemonLDAP::NG aux Journées Perl 2016Présentation de LemonLDAP::NG aux Journées Perl 2016
Présentation de LemonLDAP::NG aux Journées Perl 2016
 
[JDLL 2016] OpenID Connect et FranceConnect
[JDLL 2016] OpenID Connect et FranceConnect[JDLL 2016] OpenID Connect et FranceConnect
[JDLL 2016] OpenID Connect et FranceConnect
 
[OSSParis 2015] The OpenID Connect Protocol
[OSSParis 2015] The OpenID Connect Protocol[OSSParis 2015] The OpenID Connect Protocol
[OSSParis 2015] The OpenID Connect Protocol
 
[OW2Con 2015] LemonLDAP::NG 2.0 overview
[OW2Con 2015] LemonLDAP::NG 2.0 overview[OW2Con 2015] LemonLDAP::NG 2.0 overview
[OW2Con 2015] LemonLDAP::NG 2.0 overview
 
[LDAPCon 2015] The OpenID Connect Protocol
[LDAPCon 2015] The OpenID Connect Protocol[LDAPCon 2015] The OpenID Connect Protocol
[LDAPCon 2015] The OpenID Connect Protocol
 
Analyse OpenLDAP logs with ELK
Analyse OpenLDAP logs with ELKAnalyse OpenLDAP logs with ELK
Analyse OpenLDAP logs with ELK
 
Le Guide du Connard du Logiciel Libre
Le Guide du Connard du Logiciel LibreLe Guide du Connard du Logiciel Libre
Le Guide du Connard du Logiciel Libre
 

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

  • 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
  • 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 !
  • 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;  } }
  • 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;    }
  • 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