RMLL 2014 - Site statique avec Templer, Bootstrap et Git
Upcoming SlideShare
Loading in...5
×
 

RMLL 2014 - Site statique avec Templer, Bootstrap et Git

on

  • 325 views

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

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

Statistics

Views

Total Views
325
Views on SlideShare
324
Embed Views
1

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

RMLL 2014 - Site statique avec Templer, Bootstrap et Git RMLL 2014 - Site statique avec Templer, Bootstrap et Git Presentation Transcript

  • Site statique avec Templer, Bootstrap et Git Clément OUDOT coudot@linagora.com
  • 2 Qui suis-je ? Logiciel libre LDAP LINAGORA SSO Web
  • 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 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 Un site en HTML pur ?Un site en HTML pur ?
  • 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 ● Fonctionne même sur des systèmes d'exploitation propriétaires !
  • 10 TemplerTempler
  • 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 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 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 Mais aussi ● Gestion de plusieurs modèles (layouts) ● Boucle d'inclusion d'autres fichiers ● Système de greffons ● Exécution de commande Shell
  • 15 BootstrapBootstrap
  • 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 Des composants ● Carrousel ● Icônes ● Boutons ● Éléments de formulaire ● Menu de navigation ● Badges
  • 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 Grille
  • 20 GitGit
  • 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 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 ConclusionConclusion
  • 24 Pas besoin de matérielPas besoin de matériel compliqué pour fairecompliqué pour faire une bonne recetteune bonne recette
  • 25 Crédits Auteur Guilhem http://guilhem0.free.fr/ Images et photos appartiennent au projet Anticuisine Les sources du site sont libres de droit
  • Merci de votre attention http://www.anticuisine.fr