code

Le faux gras

Publié le par benoit

Le faux gras est un problème courant sur le web (attention, je ne parle pas de faux foie-gras) ; il se manifeste quand vous utilisez une police sans « version bold » dans un style gras. Le navigateur ajoute alors un contour sur le caractère et le résultat n’est plus correct, on perd en lisibilité, les « trous » se bouchent et le texte est gonflé.

La faute à ?

Il n’y a pas de coupable, juste une logique d’ordinateur qui va compenser l’absence du fichier correcte par un effet. La bonne graisse n’est pas sur votre ordinateur ou n’est pas chargée en @font-face (via Google Fonts, autres ou à la main), le navigateur prend alors la graisse existante et « se débrouille ».
Le problème n’est pas nouveau, s’applique aussi au print et existe aussi en version faux italique (oblique)

Voici un exemple de faux gras (passez la souris sur le texte pour voir la version corrigée).
Je charge une typo avec Google et cette feuille de styles :

/* latin */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  src: local('Fredoka One'), local('FredokaOne-Regular'), url(https://fonts.gstatic.com/s/fredokaone/v6/k3kUo8kEI-tA1RRcTZGmTlHGCaen8wf-.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

La graisse (font-weight) de 400 correspond à normal (contre 700 pour Bold).


Récapitulation des chiffres :
100 	Thin (Hairline)
200 	Extra Light (Ultra Light)
300 	Light
400 	Normal
500 	Medium
600 	Semi Bold (Demi Bold)
700 	Bold
800 	Extra Bold (Ultra Bold)
900 	Black (Heavy)

J’utilise un h1, qui sera par défaut en gras.

<h1>faux-gras</h1>

See the Pen faux gras by Benoît Wimart (@benoitwimart) on CodePen.0

L’art du bon @font-face

Attention à vos @font-face, voici la bonne manière de définir une famille de graisses :

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  src: … ; /* le ou les fichiers du Fredoka regular */
}
@font-face {
  font-family: 'Fredoka'; /* le même nom */
  font-style: normal;
  font-weight: 700; /* ici c'est 700 */
  src: /* le ou les fichiers du Fredoka Bold */ ;
}

Voici une manière déconseillée :

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400;
  src: … ; /* le ou les fichiers du Fredoka regular */
}
@font-face {
  font-family: 'Fredoka Bold'; /* le nom avec la graisse  */
  font-style: normal;
  font-weight: 700; 
  src: /* le ou les fichiers du Fredoka Bold */ ;
}

Qui donnera ce genre d’écriture :

body{
  font-family: 'Fredoka';
}
h1{
  font-family: 'Fredoka Bold'; /* sinon : faux gras */
}

code, bug et web

Publié le par benoit
dans la ou les catégorie(s) : code

Pratiquer le code apporte de la joie et des problèmes. Réussir une mise en page, finaliser un projet peut être comparable à terminer un puzzle, imbriquer des pièces de Tetris, empiler des cartes ou optimiser le chargement d’un camion de déménagement. Hélas, parfois il manque une pièce au puzzle ou le dernier carton ne rentre pas.

Pour la pièce manquante, avec beaucoup de frustration et si près du but il faudra chercher ou faire avec… et pour le carton, sortir quelques éléments, prendre du recul, recommencer ou prévoir un trajet de plus. Aborder un problème de code est très similaire.

En programmation, les langages évoluent et s’adaptent aux nouveaux besoins. Certains changements solutionnent des problèmes et certaines envies en créent de nouveaux. Vouloir une position « fixe(d) » sur une page peut devenir complexe et résoudre cette mise en page engendre parfois d’autres problèmes.

Je suis graphiste

#Métaphore
Si vous découvrez Illustrator et que votre seule compétence est l’outil rectangle ; vous pouvez déjà faire un logo et peut-être même un excellent logo. Personne ne va vérifier votre niveau d’Illustrator.

Pour les mises en page web, pour commencer il faut savoir s’imposer des limites techniques et toujours opter pour la simplicité.
Je classe les problèmes en deux catégories les bugs mineurs et les autres.
Un bug mineur est un problème d’affichage qui ne perturbe pas le fonctionnement du site et qui ne se voit pas forcement ; un bug présent sur un seul navigateur qui rend la mise en page différente, un peu moins bien, mais « supportable ».
Pour les autres bugs primordiaux…

Ça ne marche pas

L’inspecteur (Chrome ou Firefox) est l’outil le plus efficace, vérifiez l’imbrication du HTML et la bonne écriture du CSS.
Un onglet réseau permet de vérifier le bon chargement des éléments, un rapide coup d’œil peut mieux expliquer le problème.
Un code mal écrit partiellement peut casser le reste de la page, une solution automatique consiste à utiliser le validateur W3C et voir si des balises sont bien ouvertes et fermées.
Si les problèmes persistent, un peu de rangement de code (Beautify, Formater) s’impose.

Ça ne marche toujours pas

Trois voies possibles, résoudre le problème en solo, avec un ami ou avec Internet.
Pour ces trois choix, isoler le problème, refaire une simulation minimum du problème s’impose.

#Métaphore
Si vous écrivez un roman et que vous demandez à des personnes inconnues de corriger vos 300 pages, vous devriez avoir peu de candidats. Par contre, si vous avez un doute sur une règle d’écriture sur une phrase, une expression ou un mot, les amoureux de la langue seront volontaires pour vous éclairer. Les langages de programmation suivent ces mêmes règles, favorisant la pédagogie et sachant différencier une aide, d’un travail.

Bien poser sa question est un exercice difficile et parfois amène la réponse, beaucoup de forums contiennent des « self reply » postés quelques minutes après la question.

Un exemple de code problématique peut être poster sur CodePen ou jsbin en utilsant un service comme DummyImage pour les images.

La Faune et la fonte #cnap

Publié le par benoit

Bien utiliser @font-face n’est pas toujours simple, voici un exemple avec le caractère Faune.
Le Faune est « Un caractère typographique créé par Alice Savoie » pour « Une commande du Centre national des arts plastiques ».
Un excellent site explique le projet à cette adresse : http://www.cnap.graphismeenfrance.fr/faune/.

Néanmoins, à l’heure actuelle le site étant en « http », si votre site est en « https », la méthode de la feuille de style liée (comme sur Google Font), ne marchera pas sur les navigateurs modernes.

<link rel='stylesheet' href='http://www.cnap.graphismeenfrance.fr/faune/styles/faune-fontes.css'><!-- pas en https -->

La solution consiste à télécharger la fonte (en .zip sur le site).

Renommer le dossier Webfonts (en bleu sur l’image) en « fonts ».
Copier ce dossier « fonts » dans le même dossier que votre feuille de styles.
Ajouter ce code au début de votre feuille de styles :

@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Thin.eot);
  src: url(fonts/eot/Faune-Display_Thin.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Thin.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Thin.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Thin.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Thin.svg#Faune-Display_Thin) format("svg");
  font-weight: 100;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Bold.eot);
  src: url(fonts/eot/Faune-Text_Bold.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Bold.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Bold.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Bold.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Bold.svg#Faune-Bold) format("svg");
  font-weight: 700;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Italic.eot);
  src: url(fonts/eot/Faune-Text_Italic.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Italic.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Italic.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Italic.svg#Faune-Text_Italic) format("svg");
  font-weight: 400;
  font-style: italic
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Black.eot);
  src: url(fonts/eot/Faune-Display_Black.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Black.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Black.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Black.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Black.svg#Faune-Display_Black) format("svg");
  font-weight: 900;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Bold_Italic.eot);
  src: url(fonts/eot/Faune-Display_Bold_Italic.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Bold_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Bold_Italic.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Bold_Italic.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Bold_Italic.svg#Faune-Display_Bold_Italic) format("svg");
  font-weight: 700;
  font-style: italic
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Regular.eot);
  src: url(fonts/eot/Faune-Text_Regular.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Regular.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Regular.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Regular.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Regular.svg#Faune-Text_Regular) format("svg");
  font-weight: 400;
  font-style: normal
}

Explications

Chaque @font-face donne le nom « Faune » au caractère, chaque src correspond aux fichiers sources pour les différents navigateurs (internet Explorer, Safari, Chrome, Firefox…). Le font-weight et le font-style définissent la graisse et le style des fichiers sources, cela permet d’avoir le vrai italique et la bonne graisse automatiquement.

Si vous avez réussi ce code, la font-family pourra être appliqué en CSS :

font-family: 'Faune', sans-serif;

Version moderne

Depuis quelques années les fichiers woff2 et woff sont supportés par la plupart des navigateurs, on peut donc réduire le code.

/* DEMO avec 3 styles */
 
@font-face {
  font-family: Faune;
  src: url(fonts/woff2/Faune-Display_Thin.woff2) format("woff2"), /*  <--- une virgule */ 
       url(fonts/woff/Faune-Display_Thin.woff) format("woff"); /* <--- un point virgule */
  font-weight: 100; /* ultra-light */
  font-style: normal
}
 
@font-face {
  font-family: Faune; /* toujours le nom de la famille */
  src: url(fonts/woff2/Faune-Text_Bold.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Bold.woff) format("woff");
  font-weight: 700; /* bold */ 
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/woff2/Faune-Text_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Italic.woff) format("woff");
  font-weight: 400;
  font-style: italic /* Italic */
}
Attention ! Si la fonte est déjà sur votre ordinateur, un test sur celui-ci ne prouve pas un CSS correctement écrit, pensez à désactiver la police temporairement. Vérifiez deux fois que les fichiers sont dans les bons dossiers ! Testez sur une autre machine !

Bap s01e01 et s01e02

Publié le par benoit
dans la ou les catégorie(s) : code

épisode 1

Pour profiter de cette période de vacances, je vous propose de découvrir comment coder en Javascript pour faire de la musique.
Mon choix s’est porté sur la librairie Bap, relativement complète et inspirée du MPC, elle semble moins populaire que P5JS, mais a quelques avantages.

Pour cette première approche, je ne charge pas de son (sample) et n’utilise pas d’effect. Par la suite, nous verrons comment faire avec de vrais sons et interagir avec la boucle ou créer des phrases rythmiques selon des données (variables).

See the Pen BAP JS s01e01 by Benoît Wimart (@benoitwimart) on CodePen.0

épisode 2

See the Pen BAP JS s01e02 by Benoît Wimart (@benoitwimart) on CodePen.0

source image

regex & Brackets

Publié le par benoit
dans la ou les catégorie(s) : code

Les expressions régulières (regex) malgré leur aspect ingrat et rebutant, peuvent rendre de précieux services, même aux graphistes.
Présentes dans la plupart des langages (javascript, php…), on les retrouve aussi dans des logiciels comme Brackets ou InDesign.

Sous Brackets, elles s’activent dans le module « rechercher / remplacer » (qui s’appelle Remplacer) et en activant le bouton « .* » ; elles permettent de rechercher des motifs de chaîne de caractères. Un motif étant une suite de caractères correspondant à une certaine logique comme une date (xx-xx-xxxx), un numéro de téléphone, un mail…

Pour illustrer, supposons que mon texte comporte des années à quatre chiffres et que celle-ci seraient plus valorisées avec un style spécifique.


1999
2020
// devient //
<span class="year">1999</span>
<span class="year">2020</span>

On va utiliser une regex simplifiée.

\d signifie un chiffre (0, 1, 2, 3 à 9) 
\d\d signifie deux chiffres (00, 01, 02… 99) 
\d\d\d\d signifie quatre chiffres (0000 à 9999), c'est la regex pour une année à quatre chiffres.

Pour remplacer, il faut capturer avec des parenthèses, chaque capture s’appellera « $chiffre ». 

(\d\d\d\d) sera stocké dans $1
(\d\d)-(\d\d) seront stockés dans $1 $2

champ 1 : (\d\d\d\d)
champ 2 : <span class="year">$1</span>

En pratique et images

Avant (n’oubliez pas le bouton .*)
brackets regex
Après
brackets regex

Pour aller plus loin :

open source / copyright

Publié le par benoit

En complément des conférences, voici deux documentaires. Le premier raconte l’histoire de Linux et plus, le second parle du copyright.

RiP : remix manifesto (à voir gratuitement sur le site de l’ONF)

Bonus :
Revolution OS (2001)

Quelques liens vus en conférence

Typographie

Visual Data

entrainement JavaScript (partie 1)

Publié le par benoit
dans la ou les catégorie(s) : code

À la demande, voici quelques exercices de JavaScript.

Boucle

Voici une boucle qui va de 0 à 9 (soit dix boucles).
exercice 1 : faire une boucle pour 7 à 77.
exercice 2 : faire une boucle qui affiche 0, 10, 20 … 90.

for(var i = 0; i<10 ; i++){
  console.log(i);
}

Démo

Éléments du document

En stockant un élément dans une variable, on peut manipuler celui-ci.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p id="test"></p>
<script>
  var test = document.querySelector('#test');
  test.textContent = "Helvetica";
  test.style.color = "#f60";
</script>
</body>
</html>

démo
exercice 3 : mettre le texte en gras (il y a un piège).

suite

Voici une requête qui stocke tous les éléments du sélecteur.

var elements = document.querySelectorAll('p');

Hélas, JavaScript ne sait pas faire elements.style.color = "#f60"; pour manipuler plusieurs éléments, il faudra les appeler via des crochets p[0] pour le premier, p[1] pour le deux!ème… et si vous avez une variable avec un chiffre ‘a = 1’ vous pouvez écrire p[a].

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>helvetica</p>
  <p>arial</p>
  <p>lucida</p>
<script>
  var p = document.querySelectorAll('p');
  p[0].style.color = "#f60";
  p[1].style.color = "#f60";
  p[2].style.color = "#f60";
</script>
</body>
</html>

Boucle + sélecteur

On combine les deux !

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>helvetica</p>
  <p>arial</p>
  <p>lucida</p>
<script>
  var p = document.querySelectorAll('p');
  for(i=0;i<3;i++){
    ****.style.color = "#f60"; //**** = exercice 
  }
</script>
</body>
</html>
Ces exercices n’ont aucune application, mais sont des bases pour réaliser des choses plus complexes.

Tableaux, JS et GSAP

Publié le par benoit
dans la ou les catégorie(s) : code

Dans les trucs et astuces de la programmation, une notion est importante, celle des tableaux.
L’écriture passe par des crochets et des virgules et on accède aux différentes entrées par des crochets et un nombre.

var tableau = [10,15,42]; // un tableau
console.log(tableau[0]); // 10
console.log(tableau[1]); // 15
console.log(tableau[2]); // 42

On peut compter le nombre d’éléments dans un tableau avec la propriété length

console.log(tableau.length); // 3

La maitrise des tableaux passe par l’usage des boucles.

var tableau = [10,15,42]; // un tableau
for(i=0;i<tableau.length;i++){
console.log(i+'--->'+tableau[i]);
}
// 0--->10
// 1--->15
// 2--->42

Application avec GSAP

Je créé un tableau par point d’un trajet :

var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];

Je créé un tableau pour un trajet en combinant les deux :

var e32 = [be,ch,uk,es,fr]; // oui c'est possible !
console.log(e32[0][1]); // e[32][0] donne be et be[1] donne -200
À cette étape, il faut ouvrir la console de Chrome et faire des tests ! 
var tl32 = new TimelineMax({repeat:-1});
 
var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];
 
var e32 = [be,ch,uk,es,fr];
 
for(i=0;i<e32.length;i++){
  tl32.to('#e32',.5,{
    x:e32[i][0],
    y:e32[i][1]
  });
}

See the Pen tableau + gsap + tl by Benoît Wimart (@benoitwimart) on CodePen.0