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

1WORDPRESS CAMP PARIS 2016 @frederiquegamewww.frederiquegame.fr

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

@FrederiqueGame

http://www.frederiquegame.fr/



https://paris.wordcamp.org/2016/session/conception-de-themes-construire-et-optimiser-son-espace-de-travail/

http://www.twitter.fr/FrederiqueGame

http://www.twitter.fr/FrederiqueGame

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.




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





4

C’est quoi Grunt ? Script ?Bower, Foundation, Skelton...

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 ?





…en remettantun peu d’ordre dans tout ça





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





à partir de :

Un thème from scratchUn framework


*from scratch : à partir de rien, depuis le début




Identifier les éléments importantsOrganiser son espace de travail

Définir de bons outils

11

SASS !

www.underscores.me

12

www.studiopress.com

13

Présentationen quelques

lignes...





15

www.underscores.me

C’est surtout :Tous les fichiers de base PHP

un fichier CSS (+ SASS) totalement vierge

fichierstyle.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 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' );

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








21

Genesis

Identifierles éléments principaux,

les récurrences





23

Constituer une MAPdes différentes classes (css)






Les zones se distinguent...












ISOLER LES ZONES MAJEURES

HEADERCONTENU PRINCIPALFOOTERWIDGETS ET SIDEBAR

Granularité

27

27WORDPRESS CAMP PARIS 2016 @frederiquegame

www.frederiquegame.fr




.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





HiérarchiserRegrouperStructuer


CONSTATS : les deux solutions bénéficientd’une syntaxe sémantique cohérente,

certaines classes CSS sont communes.




Flux et outils...





31

Versioning...1









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…














La possibilité de constuire ses librairies et de les partager/ stocker en tant que “gist”...













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.




http://sass-lang.com/

40

http:/sass-lang.com/





41

Compass, Codekit, Koala...





42

Vérfiier que tout est bien installé Mac > biblio > Ruby > Gems





43

Redistribution des fichierset des @imports - simplification





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






Éditeurs de texte...3




47

Brackets : raccourci

traitement des couleurs

+ gestion HSL





48

Illustrator...5

484848WORDPRESS CAMP PARIS 2016@frederiquegame





SCRIPT GRILLEDANS

ILLUSTATOR






50

IllustratorPhotoshop



45 calques…juste pour la maquette mobile :)




51

Extensions...6

52

Tri séléctif et rangement...

Before the end...7






53

Constituer ses dossiers

snippetslibrairies couleursdossiers de policces de caractère

snippets thématiques (menu, background…)






54

… et ses propres frameworks











56

Un doute sur la validationHtml ou Css ?

Verifications finales…

The end...8
















59

en résumé…

Versionning > Git / Github DesktopPréprocesseur > SassCompiler > CodekitÉditeur > Brackets

*** Illustrator **** Photoshop *

60

Concevoir pour les autres…

Afin de faciliter leur lecture,leur recherche, leur navigation.

Let’s do Quality

Enjoy :)






Merci !



