Cette année les portfolios de mes étudiants et quelques ressources seront publiés sur GitHub.
Ce choix s’explique en 5 arguments :
« gratuit » (et rien à renouveler) ;
suffisant (html/css) ;
fiable ;
pédagogique ;
facilement remplaçable si les besoins évoluent.
On utilisera les pages github proposées par celui-ci.
Le principe étant assez simple, si votre compte Github est nommé « git-esad » en ajoutant un repository nommé « git-esad.github.io », GitHub vous publie votre site à cette adresse https://git-esad.github.io/ et le code est lisible/visible/téléchargeable sur votre compte, exemple : https://github.com/git-esad/git-esad.github.io (on peut aussi le modifier, si on est propriétaire du compte).
GitHub étant assez complexe (une sorte de Time Machine multi-utilisateur avec historique et fusion), on utilisera les fonctions basiques via l’application GitHub Desktop.
Attention ! Si votre nom sur GitHub est avec des capitales « UserName » il faudra créer le repository « username.github.io » sans capitales.
Si votre repository est « private » votre site ne s’affichera pas (logique, non ?).
Je viens de finir le portfolio de mon agence, activité en freelance ; un exercice que je donne à mes étudiants chaque année.
Le site est codé à la main sans CMS avec les outils et langages étudiés en cours à l’exception du php et .htaccess pour optimiser quelques éléments.
L’interface utilise du JavaScript avec la librairie GSAP pour les interactions animées et SWUP pour les chargements. La page d’accueil propose une variation sans cercle et une version petit smartphone en responsive.
Les pages de présentations sont très simples et se chargent rapidement.
Voici les portfolios réalisés dans le cours de 2e année à l’ésad d’Amiens.
Dix cours d’une demi-journée, mise en page, codage à la main, achat d’un nom de domaine, mise en ligne en partant d’aucune connaissance en HTML/CSS.
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
Un seul CSS pour toutes les pages ;
Le respect des bases <html><head></head><body></body></html> ;
Le moins d’ID possible et surtout jamais en double sur une page ;
Des class !
Pas de chemin absolu !
Pas d’image de plus de 700 ko ;
Pas de <br> pour faire de la mise en page ;
La meta viewport !
La meta charset UTF‑8 ;
Le code est propre (beautify !) ;
Pas de code inutile, de balises qui n’existent pas (code valide w3c) ;
La balise <title> est propre et au bon endroit ;
Pas de code en rouge ou ! dans Chrome/Firefox (pomme+U, pomme+alt+I) ;
Un <h1> par page ;
Attribut lang='fr' sur le html et <baliseDuBloc lang="en">insert your english here</baliseDuBloc> pour les passages en anglais ;
Les fichiers n’ont pas des noms exotiques ;
Pas de typo en trop dans le code (genre 4 fontes Google pour une seule utilisée).
Ergonomie
La page actuelle est marquée ;
On peut retourner sur la home à partir de toute les pages (avec un lien sur le logo ou titre) ;
Le site est utilisable sur mobile et tablette (prévoir des boutons/liens assez gros, padding).
Orthographe & typographie
Pas de fautes d’orthographe (accueil, galerie…) ;
Un bon usage des capitales ÀÉÈŒÇ !
La typo est bien graissée (pas de faux-gras).
Forme et identité visuelle
La mise en page n’est pas bizarre à cause d’un mauvais usage de Flex ou autres ;
Le texte n’est pas trop petit, les lignes ne sont pas trop longues ;
Les espaces sont harmonieux ;
L’interlignage n’est pas par défaut ;
Le favicon fonctionne http://www.favicon.cc/ ;
Les images ne sont pas déformées ;
L’univers graphique est cohérent ;
L’aspect visuel est soigné.
Gain de temps et d’énergie
Pas d’upload de fichiers en trop (genre .indd, .psd, .raw) sur le ftp de l’école (rendu)
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.
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.
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.
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.