SlideShare une entreprise Scribd logo
1  sur  61
Télécharger pour lire hors ligne
1WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
Conception de thèmes : construire
et optimiser son espace de travail
@FrederiqueGame
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
« 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
C’est quoi Grunt ? Script ?
Bower, Foundation, Skelton...
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
…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 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
à 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
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
style.css
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 pré-stylisée
child_theme
< 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' );
« 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
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
@frederiquegame
.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
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.
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…
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
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 les
partager/ stocker en tant que “gist”...
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 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
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.frederiquegame.fr
43
Redistribution des fichiers
et des @imports - simplification
43WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
44
$couleur-principale : #E64671
body {$couleur-principale;}
et/ou
.box : lighten ($couleur-principale, 10%)
h1 {
font-family:$main-font,
color:$couleur-principale;
}
Et le responsive design ?
Géré également grâce à Susy + Breakpoint (et…)
45WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
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.frederiquegame.fr
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
maquette mobile
:)
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, background…)
53535353WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr
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
@frederiquegame
www.frederiquegame.fr
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
*** Illustrator ***
* Photoshop *
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
Merci !
61WORDPRESS CAMP PARIS 2016
@frederiquegame
www.frederiquegame.fr

Contenu connexe

Tendances

Tendances (20)

Audit de site WordPress
Audit de site WordPressAudit de site WordPress
Audit de site WordPress
 
Livre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPressLivre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPress
 
SEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelSEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturel
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
Le graphisme d'un site internet !
Le graphisme d'un site internet !Le graphisme d'un site internet !
Le graphisme d'un site internet !
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESSTÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
TÉLÉ Z, UN MAGAZINE TÉLÉ MULTI DEVICE SOUS WORDPRESS
 
Une stratégie SEO propre avec WordPress (sans polluer le web)
Une stratégie SEO propre avec WordPress (sans polluer le web)Une stratégie SEO propre avec WordPress (sans polluer le web)
Une stratégie SEO propre avec WordPress (sans polluer le web)
 
Faire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketingFaire de WordPress un atout dans sa sa stratégie webmarketing
Faire de WordPress un atout dans sa sa stratégie webmarketing
 
Dette technique et WordPress
Dette technique et WordPressDette technique et WordPress
Dette technique et WordPress
 
Alphorm.com Formation Viadeo
Alphorm.com Formation ViadeoAlphorm.com Formation Viadeo
Alphorm.com Formation Viadeo
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Wordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 MontréalWordpress et SEO - Campus Made in Blog 2014 Montréal
Wordpress et SEO - Campus Made in Blog 2014 Montréal
 
Référencement international et SEO en Suisse
Référencement international et SEO en SuisseRéférencement international et SEO en Suisse
Référencement international et SEO en Suisse
 
Libérez le potentiel de WordPress
Libérez le potentiel de WordPressLibérez le potentiel de WordPress
Libérez le potentiel de WordPress
 
Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !
Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !
Comment un e-commerçant a multiplié son trafic SEO par 9,8 en 12 mois !
 
Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur Interview Métier : Web Designer / Intégrateur
Interview Métier : Web Designer / Intégrateur
 
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
Référencement local - Seocampus 2013 - Mathieu Gheerbrant (SEO Media)
 
Stratégie SEO avec WordPress
Stratégie SEO avec WordPressStratégie SEO avec WordPress
Stratégie SEO avec WordPress
 

En vedette

En vedette (20)

How to make your WordPress website multilingual - WordCamp Paris 2016
How to make your WordPress website multilingual - WordCamp Paris 2016How to make your WordPress website multilingual - WordCamp Paris 2016
How to make your WordPress website multilingual - WordCamp Paris 2016
 
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
Wordcamp paris-2016 : Comment fonctionnent le projet et la communauté open so...
 
HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?HTTP/2, quels impacts pour mon site WordPress ?
HTTP/2, quels impacts pour mon site WordPress ?
 
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 20164 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
4 sites communautaires faits avec BuddyPress, WordCamp Paris 2016
 
Wordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review techniqueWordcamp paris 2016 - La REST API, une review technique
Wordcamp paris 2016 - La REST API, une review technique
 
Architecture de l'information pour WordPress
Architecture de l'information pour WordPressArchitecture de l'information pour WordPress
Architecture de l'information pour WordPress
 
Tester le niveau d'accessibilité d'un thème WordPress
Tester le niveau d'accessibilité d'un thème WordPressTester le niveau d'accessibilité d'un thème WordPress
Tester le niveau d'accessibilité d'un thème WordPress
 
Un design réussi
Un design réussiUn design réussi
Un design réussi
 
À quel prix vendre un site WordPress ?
À quel prix vendre un site WordPress ?À quel prix vendre un site WordPress ?
À quel prix vendre un site WordPress ?
 
Accelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Accelerating Sales - Marketing Lessons for Commercial WordPress PluginsAccelerating Sales - Marketing Lessons for Commercial WordPress Plugins
Accelerating Sales - Marketing Lessons for Commercial WordPress Plugins
 
Home viva do design da interface até a programação do sistema
Home viva  do design da interface até a programação do sistemaHome viva  do design da interface até a programação do sistema
Home viva do design da interface até a programação do sistema
 
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
Palestra WordCamp RJ 2016 Configure um servidor Nginx de alta performance par...
 
WordPress para Redatores, Jornalistas, Publicitários e Blogueiros
WordPress para Redatores, Jornalistas, Publicitários e BlogueirosWordPress para Redatores, Jornalistas, Publicitários e Blogueiros
WordPress para Redatores, Jornalistas, Publicitários e Blogueiros
 
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp SalvadorDicas para Workflow WordPress + JavaScript - WordCamp Salvador
Dicas para Workflow WordPress + JavaScript - WordCamp Salvador
 
Building an Autonomous Website
Building an Autonomous WebsiteBuilding an Autonomous Website
Building an Autonomous Website
 
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
 
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Building Accessible Websites in WordPress - Birmingham WordCamp 2014
 
Como criar conteúdo de qualidade contínuamente sem burn-out
Como criar conteúdo de qualidade contínuamente sem burn-outComo criar conteúdo de qualidade contínuamente sem burn-out
Como criar conteúdo de qualidade contínuamente sem burn-out
 
Pesquisas com usuários, o que desenvolvedores também precisam saber!
Pesquisas com usuários, o que desenvolvedores também precisam saber! Pesquisas com usuários, o que desenvolvedores também precisam saber!
Pesquisas com usuários, o que desenvolvedores também precisam saber!
 
WordPress em sua estratégia de marketing
WordPress em sua estratégia de marketingWordPress em sua estratégia de marketing
WordPress em sua estratégia de marketing
 

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

présentation-stage2
présentation-stage2présentation-stage2
présentation-stage2
Anita Boom
 
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
SEO CAMP
 
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
SEO CAMP
 

Similaire à Conception de thèmes WordPress : construire et optimiser son espace de travail (20)

Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
Webconférence SEO le 22 Novembre : Comment optimiser un site Demandware pour ...
 
Webinar une journee dans la peau d'un directeur artistique
Webinar   une journee dans la peau d'un directeur artistiqueWebinar   une journee dans la peau d'un directeur artistique
Webinar une journee dans la peau d'un directeur artistique
 
présentation-stage2
présentation-stage2présentation-stage2
présentation-stage2
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Gab2015 Cedric Derue Vincent Thavonekham Approche Devops pour builder une sol...
Gab2015 Cedric Derue Vincent Thavonekham Approche Devops pour builder une sol...Gab2015 Cedric Derue Vincent Thavonekham Approche Devops pour builder une sol...
Gab2015 Cedric Derue Vincent Thavonekham Approche Devops pour builder une sol...
 
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
Synergie entre développeur et consultant SEO - Didier Sampaolo - SEOcamp'us P...
 
Synergies entre DEV et SEO (SeoCampus 2019)
Synergies entre DEV et SEO (SeoCampus 2019)Synergies entre DEV et SEO (SeoCampus 2019)
Synergies entre DEV et SEO (SeoCampus 2019)
 
Software Craftsmanship, le métier de faiseurs de logiciels
Software Craftsmanship, le métier de faiseurs de logicielsSoftware Craftsmanship, le métier de faiseurs de logiciels
Software Craftsmanship, le métier de faiseurs de logiciels
 
ASFA - Organisation et Méthodologie du projet COLSA
ASFA - Organisation et Méthodologie du projet COLSAASFA - Organisation et Méthodologie du projet COLSA
ASFA - Organisation et Méthodologie du projet COLSA
 
Référencement et Web Sémantique SMX Paris 2013
Référencement et Web Sémantique SMX Paris 2013Référencement et Web Sémantique SMX Paris 2013
Référencement et Web Sémantique SMX Paris 2013
 
Referencement semantique-smx-paris-2013 Par David Degrelle
Referencement semantique-smx-paris-2013 Par David Degrelle Referencement semantique-smx-paris-2013 Par David Degrelle
Referencement semantique-smx-paris-2013 Par David Degrelle
 
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdfLes erreurs à éviter pour réussir son projet de création de site web ✅.pdf
Les erreurs à éviter pour réussir son projet de création de site web ✅.pdf
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 
Webinar - Combien coûte un site web en 2023_2024 _.pdf
Webinar - Combien coûte un site web en 2023_2024 _.pdfWebinar - Combien coûte un site web en 2023_2024 _.pdf
Webinar - Combien coûte un site web en 2023_2024 _.pdf
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)
 
Comment les plateformes de Data Science métamorphosent le SEO ?
Comment les plateformes de Data Science métamorphosent le SEO ?Comment les plateformes de Data Science métamorphosent le SEO ?
Comment les plateformes de Data Science métamorphosent le SEO ?
 
Offre UI Designer Legallais
Offre UI Designer LegallaisOffre UI Designer Legallais
Offre UI Designer Legallais
 
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 

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
  • 4. 4 C’est quoi Grunt ? Script ? Bower, Foundation, Skelton...
  • 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
  • 7. 7
  • 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
  • 10. Identifier les éléments importants Organiser son espace de travail Définir de bons outils
  • 13. 13
  • 14. Présentation en quelques lignes... 14WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 15. 15 www.underscores.me C’est surtout : Tous les fichiers de base PHP un fichier CSS (+ SASS) totalement vierge fichier style.css
  • 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. < 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. « 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
  • 22. Identifier les éléments principaux, les récurrences 22WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 23. 23 Constituer une MAP des différentes classes (css) 23WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 24. 2424WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Les zones se distinguent...
  • 25. 252525WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 26. 262626WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 27. ISOLER LES ZONES MAJEURES HEADER CONTENU PRINCIPAL FOOTER WIDGETS ET SIDEBAR Granularité 2 7 27WORDPRESS CAMP PARIS 2016 @frederiquegame
  • 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. 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. Flux et outils... 30WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 31. 31 Versioning...1 31WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 32. 323232WORDPRESS 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
  • 34. 343434WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 35. 35353535WORDPRESS 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”...
  • 37. 373737WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 38. 383838WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 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 http:/sass-lang.com/ 4040WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 41. 41 Compass, Codekit, Koala... 4141WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 42. 42 Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems 4242WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 43. 43 Redistribution des fichiers et des @imports - simplification 43WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 44. 44 $couleur-principale : #E64671 body {$couleur-principale;} et/ou .box : lighten ($couleur-principale, 10%) h1 { font-family:$main-font, color:$couleur-principale; }
  • 45. Et le responsive design ? Géré également grâce à Susy + Breakpoint (et…) 45WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 46. 464646WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr Éditeurs de texte...3
  • 47. 47 Brackets : raccourci traitement des couleurs + gestion HSL 47WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 48. 48 Illustrator...5 484848WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 49. SCRIPT GRILLE DANS ILLUSTATOR 4949494949WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 50. 50 Illustrator Photoshop 505050WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr 45 calques… juste pour la maquette mobile :)
  • 52. 52 Tri séléctif et rangement... Before the end...7 525252WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 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 … et ses propres frameworks 5454545454WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 55. 5555555555WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 56. 56 Un doute sur la validation Html ou Css ? Verifications finales… The end...8 565656WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 57. 57575757WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 58. 585858WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr
  • 59. 59 en résumé… Versionning > Git / Github Desktop Préprocesseur > Sass Compiler > Codekit Éditeur > Brackets *** Illustrator *** * Photoshop *
  • 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. Merci ! 61WORDPRESS CAMP PARIS 2016 @frederiquegame www.frederiquegame.fr