blog

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/

erreurs

Aujourd’hui, je poste une correction rapide pour évoquer une technique simple pour trouver les erreurs dans le code. Cet article en complète un autre sur le même thème.

cmd+alt+u ou 🍏+🍳+u

Le raccourci sous Chrome cmd + alt + u ouvre la source HTML de la page (si un JavaScript modifie celle-ci vous n’aurez pas les modifications).
Voici une capture d’écran avec des erreurs fréquentes :

Il y a sans doute des fautes de frappes plus difficile à voir « fianl.css ». Soyez vigliant vigilant !
Voici quelques règles à suivre pour débusquer plus facilement les erreurs :

  1. « Beautify » le code avec Brackets ✌️;
  2. Pas d’espace dans les noms des dossiers et des fichiers, ils se transforment en %20 illisible, utilisez des tirets !
  3. Pas d’accent dans les noms des dossiers et des fichiers ;
  4. C’est tentant d’inventer des balises, mais non <img-portfolio> sera plutôt <img class='img-portfolio'> ;
  5. li aura toujours pour balise parent ol ou ul ;
  6. <img src="Monogramme/Num%C3%A9riser.png" alt=""height="100", width="100", >, src est bien écrit (scr), les couleurs du code sont logiques, mais il manque quelques espaces et les virgules ne devrait pas être dans la balise, alt="le titre de l’image"» est très important, je conseille de faire img + tab dans Brackets + Emmet;
  7. Attention au > et/ou < en trop !
  8. Enfin, vérifiez que les liens en bleu fonctionnent, surveillez les adresses des fichiers et leur correspondance dans le Finder ou Explorer.

Voici le code sans correction :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
      <link rel="stylesheet" href="xxx%20fianl.css">
      <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet">
       <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
   <div class="header">
        <div class="sidebar">
            <nav>
 
                    <li class="current"><a href="xxx%20final.html">Les projets</a></li>
 
                    <img src="Monogramme/Num%C3%A9riser.png" alt=""height="100", width="100", >
 
                    <li><a href="%C3%80%20propos.html">À propos</a></li>
 
            </nav>
        </div>
    </div><!--/header-->
    <h1>Présentation de projets personel, professionel et scolaire</h1>
<div>
<img-portfolio>
<<a href=""><img src="Samedi,%2520diamnche/Image-depart.jpg" alt=""></a>
</img-portfolio>
</div>
</body>
</html>

Corrections

Voici une correction sans savoir le résultat final, j’ai mis l’image dans le li et ajouté une balise main pour mettre le contenu principal de la page (ça évite trop de div).

<!DOCTYPE html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <title>xxx</title>
  <link rel="stylesheet" href="xxx-final.css">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
 
<body>
  <div class="header">
    <div class="sidebar">
      <nav>
        <ul>
          <li class="current">
            <a href="xxx-final.html">Les projets</a>
            <img src="Monogramme/Numeriser.png" alt="monogramme" height="100" width="100">
          </li>
          <li><a href="a-propos.html">À propos</a></li>
        </ul>
      </nav>
    </div>
    <!--sidebar-->
  </div>
  <!--/header-->
 
  <main>
    <h1>Présentation de projets personel, professionel et scolaire</h1>
    <div class="portfolio">
      <a href="#"><img src="Samedi-dimanche/Image-depart.jpg" alt="samedi dimanche départ"></a>
    </div>
  </main>
 
</body>
</html>

Sélection de la semaine

Petite sélection de liens vu sur Internet et ailleurs !

Césure ou coupure

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 &nbsp; pour l’espace insécable et &#x202F; espace fine insécable (plus d’espaces sur wikipedia).

Adopte un logiciel Adobe

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/

indesign pour le web
j’ai remonté mes manches pour remettre ma maquette sous InDesign (à droite)
setup indesign web
réglages des pages

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

C’est Vrai

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

Canon

Un classique.
http://retinart.net/graphic-design/secret-law-of-page-harmony/

100 heures

Un petit binge watching de tuto Photoshop, Illustrator, InDesign ?

Remerciements : Pour une bonne partie des liens à Éric Bediez.

Vu dans l’école

vu sur Instagram et en vrai ;¬) #soireeintegration #galaxie / ésad amiens

à la demande : navigation avec survols et images

Chaque année, un ou plusieurs étudiants me demandent le code pour une navigation avec survols et apparitions d’images de ce type :

See the Pen Nav + survol by Benoît Wimart (@benoitwimart) on CodePen.0

J’ai mis en ligne sur codepen un prototype rapide (sans « class »), car je ne suis pas complètement opposé à ce type de menu, néanmoins plusieurs points négatifs peuvent être observés avec cet exemple :

  1. la mise en page selon le nombre d’éléments ne sera pas toujours simple ;
  2. la dégradation sur écran tactile, à tester soit avec un peu de persévérance avec l’inspecteur de Chrome, soit via votre mobile, tablette… le « touch » fait apparaitre l’image quelques millisecondes avant d’aller sur le lien (il faut trouver une solution) ;
  3. le poids des images (très très léger sur le codepen) pourrait rendre l’effet moins élégant (ex : un ou plusieurs survols ne marchent pas tout de suite).

Il est possible de rendre l’expérience plus fluide en ajoutant une couche de JavaScript, d’Ajax et de « Loading », mais avec un coût plus important et des performances moindres.

propriétés et mauvaises combinaisons

Le CSS est un langage cruel, d’apparence simple, dès la mise en œuvre, ça coince, ça « bug ». Pourtant, il n’y a pas de vrai bug. Pourquoi ? Il est fort possible que votre code soit bon, mais que votre demande soit mal formulée. Au final, le résultat n’est pas celui espéré. Pour comprendre ce problème, il faut savoir que certaines propriétés se combinent entre elles.
Je vous propose une petite liste des erreurs fréquentes de mauvaises formulations et combinaisons douteuses.

Cas facile : le doublon

Votre code semble bon, mais vous avez écrit deux fois la même propriété, elle se retrouve écrasée par la dernière instruction.
On écrase beaucoup de propriétés même en codant proprement, car c’est le principe même du CSS, néanmoins on peut se contredire dans les instructions et créer un résultat contraire.
Si vous ouvrez l’inspecteur de Chrome ou Firefox, la valeur est barrée.

Cas complexes

Plus difficile à comprendre, voir même stupide, certaines choses ne marchent pas comme prévu.

display:inline;widtht:
Il est fréquent de vouloir des liens <a href="">…</a> d’une certaine largeur (pour un menu). Or, les liens sont des éléments avec un display:inline, impossible de leur affecter une taille sans leur ajouter un autre display, le plus simple étant display:block ou display:inline-block.

margin:auto;
Sauf si le conteneur est en display:flex, margin:auto; centrera horizontalement votre élément seulement si celui-ci a une largeur définit avec width.

height:100%;
Par défaut le html et body s’adaptent à la hauteur de leur contenu mais le background remplit la hauteur du navigateur. Le height 100%, veut dire 100% de son ancêtre, mais avec un html et un body à la hauteur « ajustée » les problèmes sont assez fréquents. L’astuce est de passer par des unités viewport units basées sur la hauteur (vh) ou la largeur (vw) du viewport (l’écran ou l’intérieur du navigateur).

z-index:
La propriété z-index permet de jouer avec l’ordre des « calques », elle ne marche que si vous avez une position:absolute;, position:relative; ou position:fixed;

position:
La position absolute se rattache à l’ancêtre le plus proche en non static pour fonctionner avec top, left, bottom et right ou au body si aucun ancêtre n’est plus en static.
De plus, en sortant du flux, votre élément n’hérite plus de la largueur de son conteneur, il est parfois nécéssaire de remettre un width.

maquette et prototype à l’échelle

Avant de commencer à coder un projet, une première étape consiste à faire une maquette avec un logiciel de dessin adapté (Sketch, Adobe XD et leur clone) ou l’outil que vous maitrisez le mieux (Photophop, Illustrator, InDesign et leur clone).
Une fois la maquette finalisée, il est indispensable de faire son export en bitmap. Ce qui donne un certain avantage à travailler avec un logiciel comme Sketch ou Photoshop par rapport à InDesign.
Il est aussi conseillé de commencer par la version mobile et de choisir l’écran adapté à cette déclinaison, par exemple une maquette pour mobile entre 320 et 640 px.
Dans la vidéo ci-dessous, j’ai ciblé un modèle précis, le Nexus 5, j’ai donc créé une image bitmap de 412 pixels de large (mais je garde en tête qu’il existe des smartphones de 320 px).

Si votre image exportée est en résolution « retina », ici 412 × 2 = 824 px de large, l’aperçu sur un écran retina sera plus précis, plus net.

Application

Par étapes :

  1. premièrement, je réalise une image à la bonne taille, avec le bon nombre de pixels (retina ou pas) ;
  2. je la glisse dans Chrome (dans la barre d’url) ;
  3. je passe en mode responsive via l’inspecteur ;
  4. je rafraichis la page (pour les problèmes de zoom) ;
  5. enfin, j’ajuste les options.

nettoyage et optimisation de code

Voici ci-dessous un exemple de code assez disgracieux qui utilise l’attribut style sur une div pour afficher une image (de fond). J’ai sans doute déjà utilisé la même technique pour faire des cascades de codeur, mais il s’agit de contourner le problème avec la mauvaise manière. Nous allons procéder à un petit nettoyage (Action de débarrasser un lieu de ce qui l’encombre) pour rendre le code plus fluide.

Pour rappel : le style se place prioritairement dans la feuille de styles.

Le mauvais code

Attention, ce code n’est pas des plus mauvais, on le voit souvent sur le web. Son plus gros défaut est la suppression de l’image du html et par conséquent du précieux alt.
Autre point négatif, le nom de la classe « textoverimage » devait être lié au data-text, mais l’ajout du texte a été supprimer dans le CSS, le code devient ambigu. Au passage, il manque une ) dans le html.

<div class="textoverimage" style="background-image:url(img/a1.jpg" data-text="Design"> </div>
.textoverimage{
    width: 300px;
    height: 200px;
    margin:4px;
    background-size:100%;
    background-position: center;
    transition: 0.5s;
}
 
.textoverimage:hover{
    background-size: 110%;
}

Nettoyage

Le challenge est d’avoir un html « classique », lisible et facile à maintenir ou modifier. Sauf usage d’une propriété récente comme object-fit, il n’y a pas d’autre solution que d’ajouter un élément autour de l’image pour prévoir son recadrage.

<div class="vignette">
  <img class="vignette-img" 
       src="https://dummyimage.com/640x480/f60/fff" 
       alt="dummy" width="320" height="240">
</div>
.vignette{
  width:320px;     /* à fixer sinon c’est 100% */
  height:240px;    /* idem */
  overflow:hidden; /* rien ne doit dépasser de 320 sur 240 */
}
 
.vignette-img{
  transition:transform .5s; /* pour l'effet */
}
 
.vignette-img:hover{
  transform:scale(1.2); 
  /* zoom × 1.2
  si on veut plus de zoom, il faut une image avec plus de pixel 
  sinon, c'est un peu trop flou sur retina
  */
}

Démo

See the Pen zoom img over by Benoît Wimart (@benoitwimart) on CodePen.0

apprendre avec des pincettes

Cette semaine, voici une sélection d’articles en rapport avec nos outils logiciels ou matériels. La thématique s’éloigne un peu de l’objectif du site (apprendre le code), mais l’outil est au centre de notre activité.

Mise à jour chez Apple & Adobe

On commence chez Daniel Glazman avec un avis sur les nouveaux MacBookPro après un mois d’usage et une aventure avec la dernière mise à jour vers High Sierra.

Rappel, en cas de mise à jour de Mac OS, voir la compatibilité des logiciels indispensables à votre travail (en pensant aussi aux pilotes d’imprimantes, de Wacom…) et faire un TimeMachine complet.
font variable
Les polices variables sont là ! — A responsive lettering example, courtesy of Erik van Blokland. This shows one kind of flexibility that variable fonts will enable.

On continue avec Adobe qui sort sa collection CC 2018. Pour ma part, j’ai effectué la mise à jour sans souci, le poids de la suite ne gonfle pas trop. Au final, on se retrouve avec des applications de 2 Go (ça reste mystérieux pour ceux qui ont connu les logiciels sur des disquettes).

Dans les points positifs, Illustrator gère les polices SVG en couleurs et les nouvelles polices variables openType. Pour le reste, c’est assez décevant, Illustrator devient de plus en plus un outil d’Illustration et XD copie Sketch, avec une campagne de lancement ridicule mélangeant startup, skate et storytelling.

Dernier point agaçant, Apple comme Adobe, produisent des sites web avec de moins en moins de rigueur. J’aime les petits détails et le travail rigoureux.

illustrator cc
« Nom de l’artiste et lien Behance » #wtf

Dépannage rapide

Finissons dans la joie et le savoir, pour apprendre avec les gestes qui sauvent (votre mac) chez Korben. Même si votre métier n’est pas de réparer votre mac, cette liste de raccourcis clavier à faire pendant le démarrage de votre mac est assez complète. Dans le lot, vous trouverez probablement de quoi récupérer votre machine ou vos fichiers en cas de problème.
apple

ouverture du blog 🎉

Dans le but de mieux organiser ce site, voici le blog, une nouvelle section avec des thèmes à part pour compléter les cours et les ressources ! Vous trouverez ici des articles pour apprendre ou comprendre les évolutions du code, des outils et être à jour sur les bonnes pratiques. Je profiterais aussi de cette section pour mettre en ligne des didacticiels moins importants ou des choses en rapport avec les demandes des étudiants.
ouverture du blog