Un peu de statistique sur les écrans en 2020–2021, ici le top 12 d’un site d’école d’art.
1. 1440×900 12,51 %
2. 1920×1080 10,60 %
3. 375×667 8,38 %
4. 1366×768 7,53 %
5. 1536×864 6,26 %
6. 1280×800 4,75 %
7. 1680×1050 4,15 %
8. 360×640 4,01 %
9. 414×896 3,20 %
10. 2560×1440 2,94 %
11. 1600×900 2,62 %
12. 1280×720 2,49 %
En comparaison avec le reste du monde en janvier 2021.
Et en France.
Même si ça ne remplace pas un cours en classe…
Les problèmes en télétravail proviennent souvent de la qualité de la connexion à Internet.
Le site speedtest.net permet de connaitre votre débit.
Celui-ci propose aussi une version en ligne de commande pour les plus aventuriers. Voici mes résultats, si vous passez par le site, vous aurez les mêmes informations en image.
J’ai l’habitude de lire en Mbps, ici ~ 300Mbps, la fibre et le WiFi n’ont aucun problème.
Si vous avez moins de 8 Mbps, les visioconférences, partages d’écran seront difficiles, il faudra couper la caméra.
Pour améliorer votre connexion :
Vérifiez vos versions de logiciels en commençant par MacOS (ou Windows). Sur mac, menu pomme > à propos de ce mac : MacOS Catalina 10.15.6.
Selon votre OS vous ne pourrez pas installer certains logiciels (et extensions) et si vos versions diffèrent avec celles de votre interlocuteur, les échanges seront parfois impossibles.
Pour les échanges, les mails (attentions aux pièces jointes), Discord (chat ou salon), Skype (voir les alternatives comme Google Meet ou Jitsi), pour un usage occasionnel teamViewer est gratuit et permet de prendre la main à distance sur une machine.
Pour le graphisme web, le logiciel le plus adapté est Figma. Il s’installe sans problème sur la plupart des machines, dans le navigateur ou en application (recommandée), celui-ci nécessite une connexion à Internet, mais pas de besoin de gros débits. Figma offre des outils simples avec des fonctions puissantes pour faire des maquettes « écrans ». Partager vos projets avec un accès complet en lecture et écriture (pour que je puisse corriger), le logiciel propose un système de commentaires permettant d’annoter les images (à l’usage, les notifications ne sont pas toujours précisent et j’en ai déjà « oubliée »).
Attention aux polices utilisées libres ou gratuites, éventuellement vectoriser certains éléments avec parcimonie (exemple : logo).
Pour le code, codepen est parfait pour les prototypes. Si votre machine vous le permet (OS récent), VS Code en mode projet (ouverture du dossier) avec LiveShare et LiveServer configurés/activés/lancés permet de travailler, visualiser et corriger en même temps un projet web (façon Google Docs).
Pour s’entrainer, voici un exercice pratique.
Comment mettre un fond rectangulaire incliné derrière un titre (droit) ?
Pour être dans le respect de la sémantique, je dois mettre le texte avec une balise de titrage (ici h1, mais h2 peut convenir si vous êtes dans une sous-partie de la page).
Pour mettre un fond seulement derrière le texte, il faudra ajouter une span, une balise neutre utilisée pour des réglages « visuels ». Enfin pour incliner le fond, il faudra pivoter celui-ci dans un sens et le texte dans l’autre, ce qui ajoute une seconde span.
See the Pen pastille by Benoît Wimart (@benoitwimart) on CodePen.0
Cette variante est assez complexe, elle aborde des notions des prochains cours et des astuces CSS.
See the Pen pastille et pseudo élement by Benoît Wimart (@benoitwimart) on CodePen.0
Ces deux animations qui circulent sur la toile en ce moment, permettent de comprendre les évolutions des navigateurs et des systèmes d’exploitations de 1996 à 2019.
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é.
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
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 */ }
Petites compilations de ressources pour mi-décembre.
Après avoir vu cet exemple utilisant GSAP et drawSVG : https://jenseign.com/2016/ ;
j’ai isolé la partie du code dans un CodePen. Le résultat est moins intéressant que la carte de vœux car c’est le tracé du SVG qui joue le rôle essentiel (il faut cliquer pour lancer la lecteur), mais la base du JavaScript est presque la même.
See the Pen drawSVG – 2016 by Benoît Wimart (@benoitwimart) on CodePen.0
Bonus : Fiche GSAP dans Ressources
Pour vous rafraichir les idées et revoir les bases du JavaScript, Codecademy propose un outil pratique (attention les derniers chapitres ne sont plus pour les débutants).
En alternative française, vous trouverez quelques sites dans les ressources (à compléter).
Dix idées de mise en page et pas envie de trancher, faites dix points de rupture (site à tester en responsive) !
https://lynnandtonic.com/
Voici quelques remarques importantes pour la qualité de votre rendu.
<html><head></head><body></body></html> ;
<br> pour faire de la mise en page ;
<title> est propre et au bon endroit ;
<h1> par page ;
lang='fr' sur le html et <baliseDuBloc lang="en">insert your english here</baliseDuBloc> pour les passages en anglais ;
En cette période de fin d’année, certains sites web proposent des articles façon calendrier de l’Avent.
En voici un en français et un autre en anglais
https://www.24joursdeweb.fr notamment pour l’article sur les tirets : https://www.24joursdeweb.fr/2017/les-tirets/
et https://24ways.org/ pour votre culture (les articles sont assez pointus et en avance sur les pratiques actuelles).
C’est toujours un événement quand OK Go sort un clip.
Dans mes cartons numériques :
https://clip.jenseign.com/
Cet article s’adresse plus particulièrement à mes étudiants pour réaliser leur premier site, leur portfolio.
Nous sommes actuellement au 8e cours de l’année et nous attaquons un sujet difficile, personnel et important. Les bases techniques ont été abordées, vous avez le choix d’approfondir celle-ci ou de faire avec vos moyens. Pour être plus précis, sachez qu’il sera possible de corriger et d’améliorer ce projet sur le reste de l’année ou de votre vie.
Avant de commencer vos maquettes ou prototypes, il faut créer votre contenu. Celui-ci devra avoir exclusivement des ingrédients de qualité, ils refléteront votre travail et l’énergie que vous y accordez.
Voici une liste d’étapes essentielles :
Les personnes qui visitent votre site veulent voir vos travaux, mais aussi mieux vous connaitre. Attention, veuillez à cloisonner vie personnelle et professionnelle !
Présentez-vous en une phrase ou deux (inutile de dire votre âge), ajoutez votre école (et un lien), votre ville (mais pas votre adresse personnelle), votre email « pro », vos réseaux sociaux si « pros », le contexte des projets (année, personnels, scolaires…).
Si vous cherchez un stage, préciser la zone géographique et pour combien de temps.
href='mailto:name@gmail.fr', selon le paramétrage de la machine, il lance une fois sur deux le client mail (Mail.app sur Mac) ; à bannir si le mail n’est pas lisible dans le lien contactez-moiIndispensable pour la recherche d’un stage, idéalement lisible dans une page HTML car certains appareils n’ouvrent pas les pdf correctement et un lien vers sa version pdf à télécharger.
Pour le contenu du curriculum vitæ, ne remontez pas jusqu’au brevet, aucune faute et soignez la maquette.
Vraiment pas obligatoire, mais si vous souhaitez la mettre, celle-ci doit être pertinente et bien intégrée dans votre maquette.
Si le web des années 90 était moins élégant qu’aujourd’hui, il était pour autant assez fonctionnel.
Pour rappel simpliste, Le HTML sert à aller de page en page, le CSS lui ajoute un peu plus d’élégance. Les nouveautés du HTML5 et CSS3 permettent d’aller beaucoup plus loin, mais pour quels objectifs, quel coût et quelle cible ?
L’image ci-dessous illustre la difficulté à dompter le CSS, même chez les développeurs.
Pour disculper le CSS, on peut rejeter la faute à la maquette trop complexe pour :
position:fixed; ne marchait pas sous iOS. Est-ce indispensable ?Chez les graphistes amateurs, je préfère une affiche sans effet, sans caractères excentriques, sans prouesses techniques, mais malheureusement ça n’existe pas.
Pour un portfolio de graphiste, je m’attends à quelque chose de simple qui me montre de bons projets plutôt qu’un site complexe avec des maladresses de débutant et une navigation trop ambiguë. Certains portfolios de graphistes me donnent plus envie de recruter le développeur que le graphiste.
Ce sujet pose beaucoup de questions, sans parler de votre identité visuelle à produire pour le site. Si vous avez un doute sur un choix non technique, pensez à l’efficacité et regardez si la problématique existe sur d’autres portfolios. Vous devez osciller entre les contraintes techniques et le rendu visuel. Dans les prochains cours, nous aborderons le JavaScript, on pourra aborder des choses plus expérimentales ou ludiques et voir les applications possibles.
portfolio bonus : http://andrevv.com/
Petite sélection de liens vu sur Internet et ailleurs !
On commence par un peu de typographie avec le mot du jour, césure coupure :
Le mot césure – qui fait certes très savant – est parfois employé à la place de coupure. Ni le Littré ni le dictionnaire de l’Académie (9e édition) ni le TLFi ni le Petit Robert électronique ne mentionnent d’autre acception du terme césure que celle de pause à l’intérieur d’un vers.
http://j.poitou.free.fr/pro/html/typ/coupure.html
Bonus web : Deux caractères html permettent d’empêcher les coupures pour l’espace insécable et   espace fine insécable (plus d’espaces sur wikipedia).
Sans transition, InDesign est parfois utilisé pour faire des maquettes web. Hélas, celui-ci a une gestion du pixel bien étrange. Selon votre écran, en créant une maquette de 320 px de large et en zoomant à 100%, l’image à l’écran ne fera pas forcement 320 px (oui).
Solution (par un script) : http://thatmichael.com/2014/02/how-to-change-indesigns-default-screen-resolution/
🎁 ✨ kit mobile avec fichiers InDesign cs4 et cc2018, png en 3x (lié dans InDesign) et 1x (pour ceux qui veulent travailler via PhotoShop) + scripts de l’article ci-dessus.
J’aime beaucoup le travail de Graphéine et la générosité de leur site. Même si cette article date de 2011, c’est toujours d’actualité :
https://www.grapheine.com/divers/astuces-cv-stage-graphiste
En bonus : http://cvparade.com/ une collection qui mérite d’exister (chacun y verra les choses à faire ou à éviter).
Un classique.
http://retinart.net/graphic-design/secret-law-of-page-harmony/
Un petit binge watching de tuto Photoshop, Illustrator, InDesign ?
Remerciements : Pour une bonne partie des liens à Éric Bediez.
