Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 30 Publicité

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

Télécharger pour lire hors ligne

Prendre un moteur de blog pour faire son site web n'est pas forcément le meilleur choix ! On peut aussi générer quelques pages statiques et travailler sur l'apparence du site avec du CSS.

Prendre un moteur de blog pour faire son site web n'est pas forcément le meilleur choix ! On peut aussi générer quelques pages statiques et travailler sur l'apparence du site avec du CSS.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

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

Publicité

Plus par Clément OUDOT (20)

Plus récents (20)

Publicité

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

  1. 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. 2 Casting Clément OUDOT Webmaster du site DonJon Legacy Libriste Premier site web en 1997
  3. 3. 3 La série : DonJon Legacy Bande annonce : https://www.youtube.com/watch?v=1CxIoWWrUnY
  4. 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. 5 Pourquoi faire un site statique ?
  6. 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. 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. 8 Accessibilité ● Utilisation des dernières normes du Web ● Framework CSS et JS ● Référencement naturel
  9. 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. 10 PrésentationPrésentation de Templerde Templer
  11. 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. 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. 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. 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. 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. 16 Mise en page avecMise en page avec Bootstrap et CSSBootstrap et CSS
  17. 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. 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. 19 Autres frameworks ● Font Awesome : – Galerie d’icônes – http://fontawesome.io/ ● Hover : – Animations – http://ianlunn.github.io/Hover/
  20. 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. 21 EnvoiEnvoi d’un maild’un mail en PHPen PHP
  22. 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. 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. 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. 25 GestionGestion du codedu code dans Gitdans Git
  26. 26. 26 Utilisation de Git ● Gestion des versions et visualisation des modifcations ● Sauvegardes ● Branches pour tests ● Collaboration
  27. 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. 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. 29 Questions ?
  30. 30. 30 http://www.donjonlegacy.comhttp://www.donjonlegacy.com https://github.com/coudot/donjonlegacyhttps://github.com/coudot/donjonlegacy

×