conception de thèmes wordpress : construire et optimiser son espace de travail
TRANSCRIPT
![Page 1: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/1.jpg)
1WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
Conception de thèmes : construire et optimiser son espace de travail
@FrederiqueGame
![Page 2: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/2.jpg)
222WORDPRESS CAMP PARIS 2016
@frederiquegamewww.frederiquegame.fr
Bonjour je suis Frédérique Game,
Consultante en stratégie éditoriale, web et design + Designer
Mes passions ?
Typographie - Design - Art - Innovation - Expérience utilisateur
WordPress et le Web !
Mon aspiration ?
Contribuer à rendre le Web agréable, simple et efficace.
Mes réalisations ?
Conseil, audits de communication, conception de contenus,
identité graphique (logo, charte), réalisation de sites internet.
![Page 3: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/3.jpg)
3
« Le Web est un environnement de développement particulièrement hostile et il est impossible que l'intégrateur parvienne à faire face à l'intégralité des possibilités de contribution ni à l'intégralité des configurations côté client. Son rôle est justement de tenter de minimiser les problèmes, pour un maximum de cas réels. »
J.Patonnier et R.RigoProjet responsive design
3WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 4: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/4.jpg)
4
C’est quoi Grunt ? Script ?Bower, Foundation, Skelton...
![Page 5: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/5.jpg)
Configurations multiples,disparité des serveurs et des machines,
offre grandissante de devicescodes, languages, règles…
Dans ce contexte, concevoir un thème graphiquedemande de multiples ressources & compétences.
Mais comment fait-on ?
55WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 6: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/6.jpg)
…en remettantun peu d’ordre dans tout ça
66WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 7: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/7.jpg)
7
![Page 8: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/8.jpg)
L’objectif ?Savoir nager dans l’océan d’outils, d’astuces et ressources qui nous sont proposées sur le Web…
Optimiser son espace de production (front-end)
Conséquences...Gagner en productivité et laisser émerger plus de créativité pour concevoir le design de nos thèmes.
Jouer à Batman Arkham car plus de temps...
88WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 9: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/9.jpg)
à partir de :
Un thème from scratchUn framework
9WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
*from scratch : à partir de rien, depuis le début
![Page 10: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/10.jpg)
Identifier les éléments importantsOrganiser son espace de travail
Définir de bons outils
![Page 11: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/11.jpg)
11
SASS !
www.underscores.me
![Page 12: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/12.jpg)
12
www.studiopress.com
![Page 13: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/13.jpg)
13
![Page 14: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/14.jpg)
Présentationen quelques
lignes...
14WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 15: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/15.jpg)
15
www.underscores.me
C’est surtout :Tous les fichiers de base PHP
un fichier CSS (+ SASS) totalement vierge
fichierstyle.css
![Page 16: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/16.jpg)
16
AUCUN STYLE
www.underscores.me
![Page 17: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/17.jpg)
17
www.underscores.me
![Page 18: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/18.jpg)
18
Genesis
C’est surtout :la configuration d’un theme enfant,
un cadre de travail et des Hooks (PHP),une base simple CSS pré-stylisée
child_theme
![Page 19: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/19.jpg)
< header >LOGO
MENU PRINCIPAL Secondaire, RESEAUX SOCIAUX
< sidebar >
widgets< content >
CONTENU PRINCIPALLe coeur du site
ArticlesImagesVidéos
< footer >PIED DE PAGE : mentions, infos, zones répétitives
©frederiquegame - 2015
remove_action( 'genesis_after_header', 'genesis_do_nav' );add_action( 'genesis_before_header', 'genesis_do_nav' );
![Page 20: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/20.jpg)
« Un framework sert à simplifier un cadre de travail (traduction littérale).Une structure de base qui sert à installer ou concevoir des thèmes WordPress. Conséquences : le HTML et les classes sont toujours les mêmes; le framework est audité régulièrement; quand le coeur (le framework) se met à jour votre thème continue de fonctionner.
Genesis s’accorde toujours au plus près des fonctions par défaut de WordPress. Les fonctions ajoutées dans le back-office sont très minimalistes.
Tous les thèmes qui repose sur Genesis sont des thèmes enfants et ont besoin d’avoir le framework installé pour fonctionner. »
d’après GREGOIRE NOYELLE, Expert Genesis
20
https://www.gregoirenoyelle.com/genesis-introduction-framework-theme-wordpress/
20WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 21: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/21.jpg)
21
Genesis
![Page 22: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/22.jpg)
Identifierles éléments principaux,
les récurrences
22WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 23: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/23.jpg)
23
Constituer une MAPdes différentes classes (css)
23WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 24: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/24.jpg)
2424WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
Les zones se distinguent...
![Page 25: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/25.jpg)
252525WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 26: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/26.jpg)
262626WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 27: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/27.jpg)
ISOLER LES ZONES MAJEURES
HEADERCONTENU PRINCIPALFOOTERWIDGETS ET SIDEBAR
Granularité
27
27WORDPRESS CAMP PARIS 2016 @frederiquegame
www.frederiquegame.fr
![Page 28: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/28.jpg)
.site-container
<header> .site-header
<nav> .nav-primary, .nav-secondary
.site-inner .content-sidebar-wrap <main> .content
<aside> .sidebar-primary
.footer-widgets
<footer> .site-footer (.wrap)
genesis-before-footer
28
28WORDPRESS CAMP PARIS 2016 @frederiquegame
www.frederiquegame.fr
![Page 29: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/29.jpg)
HiérarchiserRegrouperStructuer
2929WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
CONSTATS : les deux solutions bénéficientd’une syntaxe sémantique cohérente,
certaines classes CSS sont communes.
![Page 30: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/30.jpg)
Flux et outils...
30WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 31: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/31.jpg)
31
Versioning...1
31WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 32: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/32.jpg)
323232WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 33: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/33.jpg)
33
Appliqué au webdesign, le versioning, c’est la mémoire de tous les changements de style, couleurs, apports effectués…
Qu’est-ce qu’un contrôle de version ?
C’est un processus permettant de conserver une trace des modifications successives apportées à un fichier numérique (documentation, code source, base de données), à travers un logiciel spécialisé. Il est ainsi possible de retrouver des données effacées, mais aussi d'effectuer de nombreuses manipulations, comme la comparaison de sous parties…
33WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 34: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/34.jpg)
343434WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 35: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/35.jpg)
35353535WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 36: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/36.jpg)
36363636WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
La possibilité de constuire ses librairies et de les partager/ stocker en tant que “gist”...
![Page 37: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/37.jpg)
373737WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 38: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/38.jpg)
383838WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 39: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/39.jpg)
39WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
Préprocesseurs...2Sass est une extension de CSS3 qui ajoute des règles
imbriquées, des variables, mixins, un sélecteur d'héritage…
Sass génère CSS bien formatéet rend vos feuilles de style plus facile
à organiser et à maintenir.
![Page 40: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/40.jpg)
40
http:/sass-lang.com/
4040WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 41: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/41.jpg)
41
Compass, Codekit, Koala...
4141WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 42: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/42.jpg)
42
Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems
4242WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 43: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/43.jpg)
43
Redistribution des fichierset des @imports - simplification
43WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 44: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/44.jpg)
44
$couleur-principale : #E64671
body {$couleur-principale;}
et/ou
.box : lighten ($couleur-principale, 10%)
h1 {font-family:$main-font,color:$couleur-principale;
}
![Page 45: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/45.jpg)
Et le responsive design ?Géré également grâce à Susy + Breakpoint (et…)
45WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 46: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/46.jpg)
464646WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
Éditeurs de texte...3
![Page 47: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/47.jpg)
47
Brackets : raccourci
traitement des couleurs
+ gestion HSL
47WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr
![Page 48: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/48.jpg)
48
Illustrator...5
484848WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 49: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/49.jpg)
SCRIPT GRILLEDANS
ILLUSTATOR
4949494949WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 50: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/50.jpg)
50
IllustratorPhotoshop
505050WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
45 calques…juste pour la maquette mobile :)
![Page 51: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/51.jpg)
51
Extensions...6
![Page 52: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/52.jpg)
52
Tri séléctif et rangement...
Before the end...7
525252WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 53: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/53.jpg)
53
Constituer ses dossiers
snippetslibrairies couleursdossiers de policces de caractère
snippets thématiques (menu, background…)
53535353WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 54: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/54.jpg)
54
… et ses propres frameworks
5454545454WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 55: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/55.jpg)
5555555555WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 56: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/56.jpg)
56
Un doute sur la validationHtml ou Css ?
Verifications finales…
The end...8
565656WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 57: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/57.jpg)
57575757WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 58: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/58.jpg)
585858WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 59: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/59.jpg)
59
en résumé…
Versionning > Git / Github DesktopPréprocesseur > SassCompiler > CodekitÉditeur > Brackets
*** Illustrator **** Photoshop *
![Page 60: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/60.jpg)
60
Concevoir pour les autres…
Afin de faciliter leur lecture,leur recherche, leur navigation.
Let’s do Quality
Enjoy :)
60WORDPRESS CAMP PARIS 2016@frederiquegame
www.frederiquegame.fr
![Page 61: Conception de thèmes WordPress : construire et optimiser son espace de travail](https://reader031.vdocuments.pub/reader031/viewer/2022020314/586fc61d1a28aba24c8b5c0d/html5/thumbnails/61.jpg)
Merci !
61WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr