webdesign

reset

Quelques changements modernes à customiser selon vos projets.

*,
*::before,
*::after {
  box-sizing: border-box;
  min-width:0;
}
 
 
html {
  scroll-behavior: smooth;
}
 
/* Rendre les images responsive */
img,
picture {
  max-width: 100%;
  display: block;
}
 
/* Rendre le texte plus lisible */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height:100dvh;
}
 
h1,h2,h3,h4{
  text-wrap: balance; // ton titre
}
 
p{
  text-wrap: pretty; 
}

résolutions

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.

stats écran janvier 2021

Et en France.

stats écran france 2021

distanciel

Même si ça ne remplace pas un cours en classe…

Comment travailler un projet Web à distance

Checklist du matériel

Internet

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.

// serveur qui sera testé :
Server: CCleaner – Paris (id = 16676)
// Mon FAI
ISP: Free SAS
// le ping
Latency: 5.54 ms (0.97 ms jitter)
// on charge un gros fichier
// attention si vous êtes en 4G, c’est compté dans vos datas
Download: 304.23 Mbps (data used: 413.1 MB)
// on envoie un gros fichier
Upload: 143.43 Mbps (data used: 254.0 MB)

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 :

  • un câble ethernet (et un adaptateur si vous avez un MacBook)
  • ou être le plus près possible du WiFi ;
  • éteindre la box TV ;
  • fermer les onglets Facebook et autres.

Le système d’exploitation (OS)

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.

Les logiciels

Bureautique

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.

N’oubliez pas de faire des copies de sauvegardes de vos projets. Votre poste de travail est fragile, les conditions d’usages parfois extrêmes.

Graphisme & code

app figma
Figma

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

vscode
don’t panic

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

effet sur le texte et logique HTML

Pour s’entrainer, voici un exercice pratique.
Comment mettre un fond rectangulaire incliné derrière un titre (droit) ?

Avec les éléments h1 et span

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.

Avec les pseudo-élements

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.

Le faux gras

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.

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 */
}

JavaScript, GSAP, responsive

Petites compilations de ressources pour mi-décembre.

2016 & GSAP

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.

Bonus : Fiche GSAP dans Ressources

Apprendre le JavaScript

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

Site du jour

Dix idées de mise en page et pas envie de trancher, faites dix points de rupture (site à tester en responsive) !
https://lynnandtonic.com/

évaluation

Voici quelques remarques importantes pour la qualité de votre rendu.

Critères d’évaluation

Le site est en ligne !

Sans css

Votre site marche sans CSS, je peux visiter le site et voir toutes les pages. Le HTML fait son rôle, certes le document ressemble à un fichier Word, mais les bases sont là.

Dans ton code HTML

  1. Un seul CSS pour toutes les pages ;
  2. Le respect des bases <html><head></head><body></body></html> ;
  3. Le moins d’ID possible et surtout jamais en double sur une page ;
  4. Des class !
  5. Pas de chemin absolu !
  6. Pas d’image de plus de 700 ko ;
  7. Pas de <br> pour faire de la mise en page ;
  8. La meta viewport !
  9. La meta charset UTF‑8 ;
  10. Le code est propre (beautify !) ;
  11. Pas de code inutile, de balises qui n’existent pas (code valide w3c) ;
  12. La balise <title> est propre et au bon endroit ;
  13. Pas de code en rouge ou ! dans Chrome/Firefox (pomme+U, pomme+alt+I) ;
  14. Un <h1> par page ;
  15. Attribut lang='fr' sur le html et <baliseDuBloc lang="en">insert your english here</baliseDuBloc> pour les passages en anglais ;
  16. Les fichiers n’ont pas des noms exotiques ;
  17. Pas de typo en trop dans le code (genre 4 fontes Google pour une seule utilisée).

Ergonomie

  1. La page actuelle est marquée ;
  2. On peut retourner sur la home à partir de toute les pages (avec un lien sur le logo ou titre) ;
  3. Le site est utilisable sur mobile et tablette (prévoir des boutons/liens assez gros, padding).

Orthographe & typographie

  1. Pas de fautes d’orthographe (accueil, galerie…) ;
  2. Un bon usage des capitales ÀÉÈŒÇ !
  3. La typo est bien graissée (pas de faux-gras).

Forme et identité visuelle

  1. La mise en page n’est pas bizarre à cause d’un mauvais usage de Flex ou autres ;
  2. Le texte n’est pas trop petit, les lignes ne sont pas trop longues ;
  3. Les espaces sont harmonieux ;
  4. L’interlignage n’est pas par défaut ;
  5. Le favicon fonctionne http://www.favicon.cc/ ;
  6. Les images ne sont pas déformées ;
  7. L’univers graphique est cohérent ;
  8. L’aspect visuel est soigné.

Gain de temps et d’énergie

  1. Pas d’upload de fichiers en trop (genre .indd, .psd, .raw) sur le ftp de l’école (rendu)

des clips et des lettres

Quelques liens

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

Quelques clips

C’est toujours un événement quand OK Go sort un clip.

JavaScript + SVG + GSAP + ESAD + portes ouvertes 2016

Dans mes cartons numériques :
https://clip.jenseign.com/

quelques conseils pour réaliser son portfolio web

Cet article s’adresse plus particulièrement à mes étudiants pour réaliser leur premier site, leur portfolio.

Contexte

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.

L’objectif de ce cours est d’apprendre à coder. Néanmoins, il existe des plateformes à forte connotation pour publier vos travaux (Behance, Dribble…) ou des réseaux sociaux appropriés (tumblr, instagram, myspace…). Ces canaux alternatifs sont exploitables, mais sont beaucoup moins personnels.

Le contenu du portfolio

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 :

  • Rassemblez vos projets les plus pertinents ;
  • Réalisez des photos de qualité (calibrages et petites retouches possibles) ;
  • Préparez vos textes sans fautes d’orthographe, grammaire et typographie, faites-vous relire ;
  • Définissez l’objectif du site pour mieux ordonner et hiérarchiser vos projets ;
  • Marquez clairement si vous êtes dans l’illustration, le graphisme ou la photographie.

Qui, quoi, où, comment, pourquoi, combien…

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.

Si votre email est affiché en clair, il sera probablement ajouté dans les bases de données de spammeurs sans éthique. Quelques techniques Javascript existent pour brouiller votre mail pour les robots. Je déconseille les liens avec 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-moi.

Le C.V.

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

Vos relations sont vos atouts, une plateforme comme LinkedIn est fort utile pour afficher son CV.

La photo

Vraiment pas obligatoire, mais si vous souhaitez la mettre, celle-ci doit être pertinente et bien intégrée dans votre maquette.

La simplicité

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.

CSS fear
le CSS langage ingrat (lien vers le tweet)

Pour disculper le CSS, on peut rejeter la faute à la maquette trop complexe pour :

  • se décliner sur mobile ;
  • prendre en charge le tactile ;
  • réussir à s’adapter aux multiples navigateurs.
Pendant longtemps (jusqu’en 2014) 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.

Le mot de la fin

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/