Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Les dessous de HTML5/CSS3/JS en deux idées simples :
- Distinguer le fond de la forme
- Expliciter les éléments d’un site Web
Cette présentation est un document du MOOC-ICN
https://www.fun-mooc.fr/courses/inria/41014/session01/about
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.
L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.
Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !
Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)
Présentation des CMS et de leurs fonctionnalités principales : gestion des contenus, des médias, des utilisateurs... Focus sur quelques CMS importants du marché : wordpress, joomla.
Compte-rendu de l'atelier animé par Yan Paquis, consultant en stratégie numérique, ancien Directeur Conseil en agences web
Pour Webassoc.fr, communauté de professionnels du web qui aident bénévolement les associations humanitaires, caritatives et environnementales
Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".
Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.
Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.
Les dessous de HTML5/CSS3/JS en deux idées simples :
- Distinguer le fond de la forme
- Expliciter les éléments d’un site Web
Cette présentation est un document du MOOC-ICN
https://www.fun-mooc.fr/courses/inria/41014/session01/about
Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.
Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.
Encore en 2018 il n'est pas rare de rencontrer des soupes de "div" et "span" pour la création d'éléments visuels en CSS, ou pour créer des séparateurs ou encore casser le rythme d'une grille, etc.
L'utilisation des pseudo-éléments permet de faire passer son code à un niveau supérieur sans pour autant demander un effort surhumain d'appréhension.
Un peu de théorique, beaucoup d'exemples et de la pratique (comme créer des radio buttons custom, des icônes animées, des effets graphiques avancés, etc.) permettront de rendre leur utilisation concrète et abordable. Vous verrez ensuite que vous ne pourrez plus vous en passer !
Cet atelier a été présenté en 2018 au DevFest Nantes (durée 2h à 3h exercices compris)
Présentation des CMS et de leurs fonctionnalités principales : gestion des contenus, des médias, des utilisateurs... Focus sur quelques CMS importants du marché : wordpress, joomla.
Compte-rendu de l'atelier animé par Yan Paquis, consultant en stratégie numérique, ancien Directeur Conseil en agences web
Pour Webassoc.fr, communauté de professionnels du web qui aident bénévolement les associations humanitaires, caritatives et environnementales
Découvrez les pires pratiques du développement Magento autour de 13 règles à ne jamais suivre ! L'objectif est de bien les connaître pour ne pas tomber dans leurs pièges. Cette conférence a été faite lors de la MageConf 2013, le 27 novembre 2013, la première conférence en France dédiée aux développeurs Magento.
La meilleure application est une
page blanche.
Nous couvrons tout ce dont vous avez besoin pour créer votre premier site Web. De la création de votre première page jusqu'au téléchargement de votre site sur Internet.
Présentation sur l'utilisation de SASS/Compass. À la fin de cette présentation vous saurez utiliser un préprocesseur. Le tout est vraiment très simple et tourne autour de quatre concepts.
"De nos jours, faire du développement web nécessite de connaître une quantité incroyable de technologies, frameworks et librairies.
Nous vous proposons de faire un tour d’horizon du web d’aujourd’hui. Nous parlerons backend, frontend et nous évoquerons aussi le futur.
Si vous voulez savoir où en est le web sans des heures de recherche, vous êtes au bon endroit ! "
Conception de thèmes WordPress : construire et optimiser son espace de travailFrédérique Game
-- 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
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Stephane Jambu - Comment booster le référencement de son site avec le content...SEO CAMP
Comment booster le référencement de son site avec le content spinning nouvelle génération - Conférence présentée par Stéphane Jambu lors du Seo Camp Day Pays Basque - 6 septembre 2019
Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…
Aujourd'hui la quasi-totalité des CMS proposent des fonctionnalités d'internationalisation afin de réaliser des sites disponibles en plusieurs langues. Mais qu'en est-il du coté de l’intégrateur ? Celui-ci va aussi devoir internationaliser certaines images utilisées dans ses CSS, voir faire des changements de style suivant la langue qui sera affichée. Les fichiers javascript sont aussi concernés si ils sont amenés à générer du contenu textuel.
Cet atelier vous proposera de découvrir différentes méthodes afin d'organiser au mieux vos fichiers CSS, images et scripts javascript et de faciliter ainsi leur maintenance. Nous verrons aussi quels outils peuvent nous assister dans notre travail et ce que nous propose les frameworks javascript comme jQuery ou encore Mootools.
Découvrez les pires pratiques du développement Magento autour de 13 règles à ne jamais suivre ! L'objectif est de bien les connaître pour ne pas tomber dans leurs pièges. Cette conférence a été faite lors de la MageConf 2013, le 27 novembre 2013, la première conférence en France dédiée aux développeurs Magento.
La meilleure application est une
page blanche.
Nous couvrons tout ce dont vous avez besoin pour créer votre premier site Web. De la création de votre première page jusqu'au téléchargement de votre site sur Internet.
Présentation sur l'utilisation de SASS/Compass. À la fin de cette présentation vous saurez utiliser un préprocesseur. Le tout est vraiment très simple et tourne autour de quatre concepts.
"De nos jours, faire du développement web nécessite de connaître une quantité incroyable de technologies, frameworks et librairies.
Nous vous proposons de faire un tour d’horizon du web d’aujourd’hui. Nous parlerons backend, frontend et nous évoquerons aussi le futur.
Si vous voulez savoir où en est le web sans des heures de recherche, vous êtes au bon endroit ! "
Conception de thèmes WordPress : construire et optimiser son espace de travailFrédérique Game
-- 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
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Stephane Jambu - Comment booster le référencement de son site avec le content...SEO CAMP
Comment booster le référencement de son site avec le content spinning nouvelle génération - Conférence présentée par Stéphane Jambu lors du Seo Camp Day Pays Basque - 6 septembre 2019
Comment garder son code CSS maintenable et organisé ? Dans cette présentation j'ai expliqué ma façon de faire et des outils pour établir une base facilement maintenable avec un code CSS qui devient de plus en plus complexe. Sass, Compass, Modernizr…
Aujourd'hui la quasi-totalité des CMS proposent des fonctionnalités d'internationalisation afin de réaliser des sites disponibles en plusieurs langues. Mais qu'en est-il du coté de l’intégrateur ? Celui-ci va aussi devoir internationaliser certaines images utilisées dans ses CSS, voir faire des changements de style suivant la langue qui sera affichée. Les fichiers javascript sont aussi concernés si ils sont amenés à générer du contenu textuel.
Cet atelier vous proposera de découvrir différentes méthodes afin d'organiser au mieux vos fichiers CSS, images et scripts javascript et de faciliter ainsi leur maintenance. Nous verrons aussi quels outils peuvent nous assister dans notre travail et ce que nous propose les frameworks javascript comme jQuery ou encore Mootools.
2. Tout d’abord, comme tout dans le monde de l’informatique (et pas seulement dans le métier
d’intégrateur/trice), la première règle d’or est :
Vous allez voir que toutes les bonnes pratiques qui suivront vont dans ce sens.
chaque frappe de trop dans votre code
est une frappe de trop dans votre code
(et vice versa)*
* y compris pour nommer vos dossiers.
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
3. On organise correctement nos dossiers
La façon de nommer les fichiers et dossiers est très importante car nous, les intégrateur.trice.s, nous parlons en jargon. Vu que nous
sommes au milieu de la chaîne de création d’un site internet, le jargon nous permet de communiquer correctement avec le.la graphiste,
le.a dév, le.a chef.fe de projet, etc. Donc, voici la structure alpha d’organisation de nos fichiers et dossiers basée dans ce jargon :
Et surtout : PAS DE
MAJUSCULE, pas d’espace (si tu
tiens à séparer les mots : _ ou - ),
pas de caractères spéciaux dans
le nom de tes dossiers et fichiers
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
4. Dans style.css
L’ordre d’écriture est :
1) On fait nos @import et on déclare nos @font-face -> les sources
externes sont les premières à être chargées et affichées
2) On déclare les styles assignés à toutes les balises. Sans que cela
soit une règle gravée dans le marbre, en général on ajoute dans les *
seulement :
* {box-sizing : border-box} // par défaut c’est
content-box. En changeant à border-box, les
paddings seront désormais ajoutés à l’intérieur
de l’élément. Beaucoup plus simple pour calculer
leur taille
On peut également ajouter une transition à ce niveau, mais
attention, selon la complexité et taille du site, ça peut ralentir son
chargement (trop de balises concernées)
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
5. Dans style.css - le /*GLOBAL*/
3) Nous entrons dans le territoire des éléments dits globaux. A partir d’ici, vous pouvez
même commenter *GLOBAL* dans ton code (jargon)
Et on s’occupe de la balise html. Dans cette balise, une seule et unique ligne de code :
/**GLOBAL**/
html {font-size : 62.5 %} // vu qu’on travaillera en priorité avec
des unités rem, c’est beaucoup plus simple de les calculer à
partir de 10px que de 16px (16px est la taille par défaut du
paragraphe dans les principaux navigateurs). Comme vous pouvez
imaginer, 62.5 % de 16px = 10px. Pourquoi on met 62.5 % et pas
directement 10px ici ? Car nous sommes gentil.le.s et nous
respectons les personnes malvoyantes qui augmentent la taille de
la police dans les paramètres de leurs navigateurs.
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
6. Dans style.css - le body
4) Ensuite on déclare le body. Dans cette ligne (qu’on charge le maximum qu’on peut), on
ajoute les mises en formes qui concernent la balise <p>. Pourquoi ? On profite d’un puissant
principe d’héritage (le body est un super-parent) et on règle, déjà à ce niveau, toute la mise
en forme d’une grande majorité du contenu du site.
body {
font-family: 'Open Sans', sans-serif; // font-family du <p>
font-size: 1.8rem; // on redémarre la taille du <p> à 16px (ou la
taille désigné par le graphiste)
line-height: 2; // l’interligne sans unité de valeur (pas de rem, px ou
em) l’idée est de relativiser l’interligne selon la taille de la
police. Ici la balise enfant du body (hs, ps, etc) prendra une
interligne de 2x la taille de son font-size
margin: 0; // au cas où on n’utilise pas normalise ou reset (attention,
bootstrap est normalise). Car le body a toujours 8px de margin par
défaut..
color: #6a5c6b; // basée sur la color du <p> toujours
}
// + background, etc, au cas où
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
7. Dans style.css - les balises correctives
5) Toujours dans le territoire /**GLOBAL**/, on ajoute les balises correctives (au cas, vous n’utilisez pas normalize.css) et les
classes utiles :
img {max-width:100%} // les images ne dépasseront pas la taille de leur parent ni leur propre
taille
.container {
max-width: 1100px; //taille toujours en pixel
margin: 0 auto;
padding : 0 15px
} // et c’est tout (pas de flex, rien d’autre). Attention, container est une class jargon,
donc, ne vous amusez pas à l’appeler contenant, toto, etc
.clearfix, etc
Dans le territoire global, on règle également toutes les balises génériques : tous les a, les hs, etc. Pensez toujours à
fusionner le max vos mises en formes :
h1, h2, h3 {} .. etc
Dès qu’on démarre des balises spécifiques (<header> / les class / etc) on quitte le GLOBAL (et on commente ça dans le
code). Exemple : /*End GLOBAL*/
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
8. CSS & HTML - astuces en vrac
1) On ajoute toujours un id dans nos sections. On utilisera cet id pour mettre en forme les enfants. Exemple :
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
9. Ça que nous revient à connaître la deuxième règle d’or :
Plus haut vous montez l’info (en donnant des ids aux sections, par exemple) plus propre et
malléable sera votre code. On garde les class pour les généralisations (classes utiles), comme
par exemple, la mise en forme d’un bouton (à savoir, une mise en forme très agressive ou
marquée) qu’on utilisera mille fois dans notre code. Autrement dit, on attrape les enfants en
utilisant l’id de leur parent.
L’info, on la monte le plus haut possible.
CSS est une affaire de PARENT (et d’héritage)
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
10. 2) Les labels doivent être branchés à leurs inputs.
Vous ne voulez pas que le label s’affiche dans l’écran (mais pourtant il est un élément
obligatoire), vous faites :
label {position:absolute ; left :-999px} // vous le enlevez de l’
écran visuellement, mais vous gardez sa fonction, qui est
d’indiquer à des personnes non-voyantes qu’est-ce que l’input
attend d’elles (leur prénom, par exemple). Pas de display:none (car
un élément en display:none est muet pour les logiciels lecteurs d’
écran comme NVDA)
2) On intègre en Mobile First.
Pourquoi ? Parce que depuis 2014, l’internet est mobile et pas desktop. Donc, soyons dans
l’air des temps
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
11. 3) On fusionne au max les informations (margins / paddings / backgrounds) et on écrit en
une seule ligne. Un schéma :
Margins ou paddings :
Y X Y X (top / right / bottom / left) - ex : margin : 10px 4px 5px 6px
Y X (top ET bottom / right ET left) - ex : margin : 10px 5px
~ (toutes les valeurs sont égales) - ex : margin : 10px
Y X Y (top / right ET left / bottom) - ex : margin : 10px 5px 6px
Backgrounds :
background : url(../img/chaton.png) repeat-x center bottom #fff;
valeurs repeat : repeat-x / repeat-y / no-repeat / repeat
valeurs X : left / right / center ou (px/rem/em/%)
valeurs Y : top / bottom / middle ou (px/rem/em/%)
valeurs color : #fff, rgb/rgba, white/etc ou transparent
En plus : on centre nos background (pour la responsive) et on soigne nous backgrounds-size
(cover plutôt que contain)
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
12. 4) On privilégie les rem pour les petits éléments (taille maximum d’un élément en pixel :
300px) / on fait des max-width en pixel pour les grands parents (main / section) et
pourcentage pour les enfants
5) Pour les font-faces, on fait comme il faut, à savoir, avec toutes les extensions (ttf / woff,
etc). Pour ça, il y a des générateurs. Perso, j’aime bien « Transfonter » - https://transfonter.org
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
13. 6) SUR INTERNET, ON NE CRIE PAS. Si vous avez besoin d’écrire une phrase en majuscule,
vous écrivez normal, détendu.e... et ensuite vous faites un text-transform dans votre feuille
de style. Pourquoi ?
● Déjà parce que ce n’est pas vous qui allez entrer le contenu et sans text-transform,
vous obligez l’éditeur.trice du site à écrire toujours en criant (bof et en plus il/elle ne le
fera pas et votre jolie mise en forme ne va pas tenir dans la durée)
● Ensuite car Google est case-sensible. Si vous criez, il vous référence en criant et vous
allez attirer que des visiteurs bizarres :-)
7) Vous allez ajouter des classes à vos boutons (classes utiles) ou faux boutons (un <a> qui
ressemble à un bouton, par exemple). Et ces classes s’appelleront soit .cta (call to action) soit
.btn. C’est comme ça, c’est du jargon.
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
14. Un tour sur les balises sémantiques
<article> - c’est une balise plutôt bizarre. La documentation de W3 ne nous avance pas trop
sur sa bonne utilisation. L’unique vraie règle est : tous les articles doivent avoir un enfant H.
Après, c’est l’inconnu... On trouve des blocs météo dans des balises article...
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
15. Donc, officieusement, c’est convenu qu’article est tout ce qui est passible d’entrer dans un
flux RSS. Utilisez cette règle si vous voulez coder proprement…Exemple d’un potentiel
article, récupéré du flux du journal Le Monde
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
16. <section> - il faut un H à l’intérieur, obligatoire. Par définition, une section est un lot
d’information différent d’un autre lot d’information. Exemple : Témoignages client / Nos
services, etc
<aside> - complément d’information de son parent (et pas uniquement sidebar, comme c’est
normalement utilisé). Un sidebar peut être un aside. Mais également ce « Lire aussi »
ci-dessous :
Un sidebar peut être un aside qui
complémente son parent <main> et notre
« Lire aussi » est un aside qui complement
son parent <article> (donc, son contenu
doit être forcément lié au contenu de
l’article)
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
17. Petite astuce finale pour la route vers l’intégration parfaite. Imaginez que vous avez cette
structure
article + article {margin-left:10px} // saute le premier article et
mettez une margin-left dans les suivants
Cela équivaut à :
article {margin-left:10px}
article:first-child {margin-left:0px}
mais en une ligne:)
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr
18. Et la troisième et plus importante des règles d’or :
Et si c’est du contenu (à savoir, si ça ne vous concerne pas), c’est votre boulot faire de façon
que son entrée et édition soit malléable, évolutive et robuste
La force soit avec vous !
Vanessa
Questionnez-vous toujours avant de démarrer votre intégration: Est-ce
que cet élément dans la maquette concerne la mise en forme du site (donc
ça vous concerne) ou son contenu (donc, ça ne vous concerne pas)
Vanessa Sant’André - vanessa@14bis.fr - vanessasantandre.fr