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

[RMLL2017] 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é

Consultez-les par la suite

1 sur 31 Publicité

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

Télécharger pour lire hors ligne

Comment faire un site statique HTML ? Voilà un retour d'expérience sur la création du site de la Websérie DonJon Legacy

Comment faire un site statique HTML ? Voilà un retour d'expérience sur la création du site de la Websérie DonJon Legacy

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à [RMLL2017] 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é

[RMLL2017] 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 Épisode précédent RMLL 2014 : conférence sur le site Anticuisine
  4. 4. 4 La série : DonJon Legacy Bande annonce : https://www.youtube.com/watch?v=1GtwdA92f6U
  5. 5. 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. 6. 6 Pourquoi faire un site statique ?
  7. 7. 7 Sécurité ● Pas de script coté serveur ● Pas d'injection de formulaire ● Pas de mot de passe ni de données bancaires
  8. 8. 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. 9. 9 Accessibilité ● Utilisation des dernières normes du Web ● Framework CSS et JS ● Référencement naturel
  10. 10. 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. 11. 11 PrésentationPrésentation de Templerde Templer
  12. 12. 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. 13. 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. 14. 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. 15. 15 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>
  16. 16. 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. 17. 17 Mise en page avecMise en page avec Bootstrap et CSSBootstrap et CSS
  18. 18. 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. 19. 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. 20. 20 Autres frameworks ● Font Awesome : – Galerie d’icônes – http://fontawesome.io/ ● Hover : – Animations – http://ianlunn.github.io/Hover/
  21. 21. 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. 22. 22 EnvoiEnvoi d’un maild’un mail en PHPen PHP
  23. 23. 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. 24. 24 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>
  25. 25. 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. 26. 26 GestionGestion du codedu code dans Gitdans Git
  27. 27. 27 Utilisation de Git ● Gestion des versions et visualisation des modifications ● Sauvegardes ● Branches pour tests ● Collaboration
  28. 28. 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. 29. 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
  30. 30. 30 Questions ?
  31. 31. 31 http://www.donjonlegacy.comhttp://www.donjonlegacy.com https://github.com/coudot/donjonlegacyhttps://github.com/coudot/donjonlegacy

×