1WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Conception de thèmes : construire
et optimiser son espace...
2
22WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Bonjour je suis Frédérique Game,
Consultante en straté...
3
« Le Web est un environnement de développement
particulièrement hostile et il est impossible que
l'intégrateur parvienne...
4
C’est quoi Grunt ? Script ?
Bower, Foundation, Skelton...
Configurations multiples,
disparité des serveurs et des machines,
offre grandissante de devices
codes, languages, règles…
...
…en remettant
un peu d’ordre dans tout ça
66WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
7
L’objectif ?
Savoir nager dans l’océan d’outils, d’astuces et
ressources qui nous sont proposées sur le Web…
Optimiser son...
à partir de :
Un thème from scratch
Un framework
9WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
*from sc...
Identifier les éléments importants
Organiser son espace de travail
Définir de bons outils
11
SASS !
www.underscores.me
12
www.studiopress.com
13
Présentation
en quelques
lignes...
14WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
15
www.underscores.me
C’est surtout :
Tous les fichiers de base PHP
un fichier CSS (+ SASS) totalement vierge
fichier
styl...
16
AUCUN STYLE
www.underscores.me
17
www.underscores.me
18
Genesis
C’est surtout :
la configuration d’un theme enfant,
un cadre de travail et des Hooks (PHP),
une base simple CSS...
< header >LOGO
MENU PRINCIPAL Secondaire, RESEAUX SOCIAUX
< sidebar >
widgets
< content >
CONTENU PRINCIPAL
Le coeur du si...
« Un framework sert à simplifier un cadre de travail (traduction littérale).
Une structure de base qui sert à installer ou...
21
Genesis
Identifier
les éléments principaux,
les récurrences
22WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
23
Constituer une MAP
des différentes classes (css)
23WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
2424WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Les zones se distinguent...
252525WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
262626WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
ISOLER LES ZONES MAJEURES
HEADER
CONTENU PRINCIPAL
FOOTER
WIDGETS ET SIDEBAR
Granularité
2
7
27WORDPRESS CAMP PARIS 2016
@...
.site-container
<header> .site-header
<nav> .nav-primary, .nav-secondary
.site-inner .content-sidebar-wrap <main> .
conten...
Hiérarchiser
Regrouper
Structuer
2929WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
CONSTATS : les deux s...
Flux et outils...
30WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
31
Versioning...1
31WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
323232WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
33
Appliqué au webdesign, le versioning, c’est la
mémoire de tous les changements de style,
couleurs, apports effectués…
Q...
343434WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
35353535WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
36363636WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
La possibilité de constuire ses librairies et de l...
373737WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
383838WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
39WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Préprocesseurs...2
Sass est une extension de CSS3 qui aj...
40
http:/sass-lang.com/
4040WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
41
Compass, Codekit, Koala...
4141WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
42
Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems
4242WORDPRESS CAMP PARIS 2016
@frederiquegame
www.freder...
43
Redistribution des fichiers
et des @imports - simplification
43WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederique...
44
$couleur-principale : #E64671
body {$couleur-principale;}
et/ou
.box : lighten ($couleur-principale, 10%)
h1 {
font-fam...
Et le responsive design ?
Géré également grâce à Susy + Breakpoint (et…)
45WORDPRESS CAMP PARIS 2016
@frederiquegame
www.f...
464646WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Éditeurs de texte...3
47
Brackets :
raccourci
traitement des
couleurs
+ gestion HSL
47WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquega...
48
Illustrator...5
484848WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
SCRIPT GRILLE
DANS
ILLUSTATOR
4949494949WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
50
Illustrator
Photoshop
505050WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
45 calques…
juste pour la
m...
51
Extensions...6
52
Tri séléctif et rangement...
Before the end...7
525252WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
53
Constituer ses dossiers
snippets
librairies couleurs
dossiers de policces de caractère
snippets thématiques (menu, back...
54
… et ses propres frameworks
5454545454WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
5555555555WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
56
Un doute sur la validation
Html ou Css ?
Verifications finales…
The end...8
565656WORDPRESS CAMP PARIS 2016
@frederique...
57575757WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
585858WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
59
en résumé…
Versionning > Git / Github Desktop
Préprocesseur > Sass
Compiler > Codekit
Éditeur > Brackets
*** Illustrato...
60
Concevoir pour les autres…
Afin de faciliter leur lecture,
leur recherche, leur navigation.
Let’s do Quality
Enjoy :)
6...
Merci !
61WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Prochain SlideShare
Chargement dans…5
×

Conception de thèmes WordPress : construire et optimiser son espace de travail

2 605 vues

Publié le

-- 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

Publié dans : Design
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 605
Sur SlideShare
0
Issues des intégrations
0
Intégrations
171
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Conception de thèmes WordPress : construire et optimiser son espace de travail

  1. 1. 1WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Conception de thèmes : construire et optimiser son espace de travail @FrederiqueGame
  2. 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. 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
  4. 4. 4 C’est quoi Grunt ? Script ? Bower, Foundation, Skelton...
  5. 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. 6. …en remettant un peu d’ordre dans tout ça 66WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  7. 7. 7
  8. 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. 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
  10. 10. Identifier les éléments importants Organiser son espace de travail Définir de bons outils
  11. 11. 11 SASS ! www.underscores.me
  12. 12. 12 www.studiopress.com
  13. 13. 13
  14. 14. Présentation en quelques lignes... 14WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  15. 15. 15 www.underscores.me C’est surtout : Tous les fichiers de base PHP un fichier CSS (+ SASS) totalement vierge fichier style.css
  16. 16. 16 AUCUN STYLE www.underscores.me
  17. 17. 17 www.underscores.me
  18. 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
  19. 19. < header >LOGO MENU PRINCIPAL Secondaire, RESEAUX SOCIAUX < sidebar > widgets < content > CONTENU PRINCIPAL Le coeur du site Articles Images Vidé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' );
  20. 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
  21. 21. 21 Genesis
  22. 22. Identifier les éléments principaux, les récurrences 22WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  23. 23. 23 Constituer une MAP des différentes classes (css) 23WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  24. 24. 2424WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Les zones se distinguent...
  25. 25. 252525WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  26. 26. 262626WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  27. 27. ISOLER LES ZONES MAJEURES HEADER CONTENU PRINCIPAL FOOTER WIDGETS ET SIDEBAR Granularité 2 7 27WORDPRESS CAMP PARIS 2016 @frederiquegame
  28. 28. .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 2 8 28WORDPRESS CAMP PARIS 2016 @frederiquegame
  29. 29. Hiérarchiser Regrouper Structuer 2929WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr CONSTATS : les deux solutions bénéficient d’une syntaxe sémantique cohérente, certaines classes CSS sont communes.
  30. 30. Flux et outils... 30WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  31. 31. 31 Versioning...1 31WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  32. 32. 323232WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  33. 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
  34. 34. 343434WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  35. 35. 35353535WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  36. 36. 36363636WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr La possibilité de constuire ses librairies et de les partager/ stocker en tant que “gist”...
  37. 37. 373737WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  38. 38. 383838WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  39. 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.
  40. 40. 40 http:/sass-lang.com/ 4040WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  41. 41. 41 Compass, Codekit, Koala... 4141WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  42. 42. 42 Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems 4242WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  43. 43. 43 Redistribution des fichiers et des @imports - simplification 43WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  44. 44. 44 $couleur-principale : #E64671 body {$couleur-principale;} et/ou .box : lighten ($couleur-principale, 10%) h1 { font-family:$main-font, color:$couleur-principale; }
  45. 45. Et le responsive design ? Géré également grâce à Susy + Breakpoint (et…) 45WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  46. 46. 464646WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Éditeurs de texte...3
  47. 47. 47 Brackets : raccourci traitement des couleurs + gestion HSL 47WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  48. 48. 48 Illustrator...5 484848WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  49. 49. SCRIPT GRILLE DANS ILLUSTATOR 4949494949WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  50. 50. 50 Illustrator Photoshop 505050WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr 45 calques… juste pour la maquette mobile :)
  51. 51. 51 Extensions...6
  52. 52. 52 Tri séléctif et rangement... Before the end...7 525252WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  53. 53. 53 Constituer ses dossiers snippets librairies couleurs dossiers de policces de caractère snippets thématiques (menu, background…) 53535353WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  54. 54. 54 … et ses propres frameworks 5454545454WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  55. 55. 5555555555WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  56. 56. 56 Un doute sur la validation Html ou Css ? Verifications finales… The end...8 565656WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  57. 57. 57575757WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  58. 58. 585858WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  59. 59. 59 en résumé… Versionning > Git / Github Desktop Préprocesseur > Sass Compiler > Codekit Éditeur > Brackets *** Illustrator *** * Photoshop *
  60. 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
  61. 61. Merci ! 61WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr

×