RMLL 2014 - Site statique avec Templer, Bootstrap et Git

880 views
726 views

Published on

Comment j'ai réalisé le site http://www.anticuisine.fr avec Templer, Boottstrap et Git

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
880
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

RMLL 2014 - Site statique avec Templer, Bootstrap et Git

  1. 1. Site statique avec Templer, Bootstrap et Git Clément OUDOT coudot@linagora.com
  2. 2. 2 Qui suis-je ? Logiciel libre LDAP LINAGORA SSO Web
  3. 3. 3 Anticuisine ● L'anticuisine n'est ni un courant, ni un dogme encore moins un choix. ● Elle est une forme élaborée de déchéance moderne dans laquelle beaucoup se reconnaîtront. ● Elle est une imposture d'esprit reliant toute une somme de performances périphériques. ● Elle est au final un pavé dans la soupe, une vaste blague bien décalée.
  4. 4. 4 Encore un site à faire ! ● Cahier des charges : – Quelques pages avec photos, pour commencer – J'ai pas trop le temps – Mon copain a une tablette Pomme – Mise en ligne sur un serveur perso – Mon IDE c'est vi – C'est pas moi qui m'occupe du contenu
  5. 5. 5 Un site en HTML pur ?Un site en HTML pur ?
  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 ● Fonctionne même sur des systèmes d'exploitation propriétaires !
  10. 10. 10 TemplerTempler
  11. 11. 11 Présentation ● Logiciel libre de génération de sites statiques ● Écrit en Perl, utilisation de HTML::Template ● https://github.com/skx/tem pler ● Support de Markdown, Redis, Flux RSS, ...
  12. 12. 12 Structure du site ● Génération de la structure : $ templer-generate mon-site mon-site/ ├── include ├── input │ ├── about.wgn │ ├── index.wgn │ └── robots.txt ├── layouts │ └── default.layout ├── output └── templer.cfg
  13. 13. 13 Création d'un menu de navigation ● Créer le fichier input/menu.inc ● Charger ce fichier dans une variable de page « menu » : menu: read_file('menu.inc') ● Inclure dans les pages : <!-- tmpl_var name="menu"-->
  14. 14. 14 Mais aussi ● Gestion de plusieurs modèles (layouts) ● Boucle d'inclusion d'autres fichiers ● Système de greffons ● Exécution de commande Shell
  15. 15. 15 BootstrapBootstrap
  16. 16. 16 Présentation ● Le framework tendance pour faire une interface Web ● Système de grille pour le « responsive design » ● Bibliothèque JS basée sur Jquery ● Gestion des différents navigateurs (même les moisis)
  17. 17. 17 Des composants ● Carrousel ● Icônes ● Boutons ● Éléments de formulaire ● Menu de navigation ● Badges
  18. 18. 18 Grille <div class="row"> <div class="col-md-4"> <img src="images/anticuisine.fr_boutique1.jpg" class="img-thumbnail img- responsive" /> </div> <div class="col-md-4"> <img src="images/anticuisine.fr_boutique2.jpg" class="img-thumbnail img- responsive" /> </div> <div class="col-md-4"> <img src="images/anticuisine.fr_boutique3.jpg" class="img-thumbnail img- responsive" /> </div> </div>
  19. 19. 19 Grille
  20. 20. 20 GitGit
  21. 21. 21 Présentation ● Si tu connais pas Git à 50 ans, tu as raté ta vie de développeur ● Si tu es nul comme moi, il y a Github ● Dépôt du site Anticuisine : https://github.com/coudot/anticuisine
  22. 22. 22 Utilisation ● Travail individuel – Sauvegarde régulière des travaux – Historisation des changements – Des carrés verts dans mon profil ● Travail collectif – Soumission de nouveaux contenus
  23. 23. 23 ConclusionConclusion
  24. 24. 24 Pas besoin de matérielPas besoin de matériel compliqué pour fairecompliqué pour faire une bonne recetteune bonne recette
  25. 25. 25 Crédits Auteur Guilhem http://guilhem0.free.fr/ Images et photos appartiennent au projet Anticuisine Les sources du site sont libres de droit
  26. 26. Merci de votre attention http://www.anticuisine.fr

×