-- Conférence WordPress Camp 2016 --
À partir d’un framework comme Genesis et d’un starter theme comme Underscores : apprendre à identifier les éléments importants et organiser ses outils, librairies afin de créer son propre flux de travail. Gagner en productivité pour se concentrer sur l'essentiel et offrir un design efficace et orienté utilisateurs.
Côté front-end : (re) découverte de SASS (et outils dédiés)
Côté développement : utilisation des snippets, mise-en-place de versionning comme Git.
Utiliser un maximum de ressources disponibles depuis WordPress : exemples, les body class, les librairies Jquery présentes etc...
Présentation qui navigue entre l’atelier et le partage d’expérience et d’astuces plutôt à destination des (web)graphistes ou personnes désireuses d’approfondir des notions front-end, cette proposition balaiera les grandes lignes pour nous aider à créer un environnement de travail plus efficace et plus confortable.
Audience ciblée : Designers, Chefs de Projets, Clients
Conception de thèmes WordPress : construire et optimiser son espace de travail
1. 1WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Conception de thèmes : construire
et optimiser son espace de travail
@FrederiqueGame
2. 2
22WORDPRESS CAMP PARIS 2016
@frederiquegame
www.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.
3. 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.Rigo
Projet responsive design
3WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
5. Configurations multiples,
disparité des serveurs et des machines,
offre grandissante de devices
codes, languages, règles…
Dans ce contexte, concevoir un thème graphique
demande de multiples ressources & compétences.
Mais comment fait-on ?
55WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
6. …en remettant
un peu d’ordre dans tout ça
66WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
8. 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
@frederiquegame
www.frederiquegame.fr
9. à partir de :
Un thème from scratch
Un framework
9WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
*from scratch : à partir de rien, depuis le début
18. 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
20. « 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
@frederiquegame
www.frederiquegame.fr
33. 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
@frederiquegame
www.frederiquegame.fr
36. 36363636WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
La possibilité de constuire ses librairies et de les
partager/ stocker en tant que “gist”...
39. 39WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Préprocesseurs...2
Sass 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.
56. 56
Un doute sur la validation
Html ou Css ?
Verifications finales…
The end...8
565656WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
60. 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