Deux ans après mon arrivée je me suis dit que c’était le moment de vous offrir un petit lexique. Car j’ai sué pour tout comprendre. Je sue encore. Bonne lecture!

PS: manque de deuxième degré s’abstenir.

Analyse

AB Testing
Parfois vous vous demandez ce qui pourrait marcher ou pas sur votre site. Le bouton serait mieux en rouge ou en bleu (exemple de merde, un bouton n’est jamais rouge mon dieu)? Eh ben testons les 2! 50% des utilisateurs verront l’un et les autres 50% verront l’autre couleur. Et ensuite on track ce bouton afin de savoir ce qui a effectivement mieux marché. Cette option est parfaite quand vous êtes pas vraiment d’accord pour vos collaborateurs ou prestataires 😄

Analyse heuristique
Nos logiciels anti-virus recherchent quels sont les nouveaux parasites venus. Ils le font via une analyse heuristique. Pourquoi cela ne s’appelle pas une analyse de nouveaux virus? Aucune idée.

Brainstorming
C’est de l’exploration d’idées. On s’assoit tous autour d’une table (ou d’un verre, ça aide plus) et on essaie de trouver des idées tous ensemble.

Card Sorting
Méthode ludique à réaliser en groupe, avec des utilisateurs potentiels, qui aide à construire ce que pourrait être, par exemple, la future arborescence via des petites cartes.

Eyetracking
Suivre les yeux! Bon ok… Cette méthode est utilisée pour analyser le regard des gens et leur comportement sur une plateforme donnée. C’est notamment utile pour savoir si des éléments sont vus… Et ce bouton là, il est assez gros maintenant ?!

Personas
Il s’agit de personnages fictifs que nous allons créer pour identifier quels sont les utilisateurs potentiels d’un site et quels sont leurs besoins. Cette approche est bien sûr orientée utilisateur.

Sitemap
C’est le site et ses embranchements (ici ses pages, sous pages, etc). Une arborescence quoi. Si quand tu visites un site tu ne trouves pas l’information recherchée et que tu dois aller consulter le sitemap pour voir où elle pourrait être, c’est que quelqu’un a mal bossé derrière.

Storyboards
Ce sont de sympathiques croquis qui ressemblent à une BD nous aidant à comprendre où l’on va quand on va faire un film, une animation, etc.

Tests utilisateurs
Il s’agit de sessions de tests avec des utilisateurs. Facile oui. On fait venir un panel d’utilisateurs, et on leur demande de chercher une information sur le site par exemple. Puis on regarde quel est leur comportement de recherche ou de navigation. Le livrable ? Une liste de recommendations. Si vous voulez refaire votre site et que vous vous demandez ce qui fonctionne et ce qui ne fonctionne pas, ceci sera très utile.

User Flow
Chaque utilisateur sur un site va chercher, lire, se balader de manière diverse et variée. Le but c’est d’analyser leur comportement et de les classer par groupes, histoire de n’oublier personne et aussi de définir quel(s) groupes seront les utilisateurs principaux du site. Souvent ce flow sera celui d’un persona.

User Stories
Une histoire d’utilisateur! Ceci nous aide à penser à toutes les actions de tous les utilisateurs possibles sur le site (« en tant que membre enregistré je souhaite pouvoir changer mon mot de passe »).

Design fonctionnel

Accessibilité
L’accessibilité du web, c’est comment le rendre accessible tant pour les générations plus vieilles moins à l’aise avec le digital que pour les personnes avec un handicap. Mais aussi pour tout ceux qui visitent un site en marchant, dans la rue, avec peu de lumière, sur une tablette ou qui naviguent uniquement avec le clavier. Travailler sur l’accessibilité ça peut être remplir les alternatives textuelles, augmenter les contrastes du site etc.

Content type
En français type de contenu, c’est en fait une sorte de liste regroupant tous les éléments composant le site, par exemple, titre, description, légende, image, vidéo, podcast, etc.). Le content type est important pour la conception et le développement, car cela a un impact sur le choix du CMS, la structure du code, etc.

Patterns
Il s’agit d’éléments ou de modules que l’on peut retrouver de manière répétitive sur une page web. Par exemple le header, ou un champ « inscrivez-vous à la newsletter ». Ces patterns peuvent créer chez les utilisateurs des habitudes (bonnes ou mauvaises 😄)

Prototype
Un prototype c’est une version incomplète mais utile du produit final. On voit déjà plus ou moins à quoi ça va ressembler. Bon ça j’imagine que vous savez déjà. Dans le digital cela représente par exemple des wireframes dynamiques, où l’on peut déjà voir comment le produit pourra être utilisé, où l’on pourra cliquer, etc.

Wireframes
J’adore l’expliquer celui-là. C’est l’architecture du site sans design visuel, mais fonctionnel. Histoire de savoir ou sera tel bouton, telle information AVANT le « joli ». Dans cette étape, on se concentre sur les éléments dont on a besoin pour chaque type de page ainsi que leur hiérarchie entre eux. On doit penser à nos utilisateurs de dieu!

Zoning des pages
Cette étape est une version simplifiée des wireframes. L’objectif est le même, mais les zonings définissent plutôt les grandes lignes de la structure des pages. Cela permet de dégrossir les informations nécessaires. Le zoning peut être fait au préalable des wireframes ou seul, en fonction du besoin de détails nécessaires avant le design visuel.

Design visuel

Affordance
Alors c’est un mot compliqué pour désigner quelque chose de simple. En fait il s’agit de la capacité qu’a quelque chose à suggérer sa propre utilisation. Par exemple si vous ne reconnaissez pas un bouton qui est sensé en être un sur un site, c’est qu’on l’a mal designé, certes, mais surtout c’est qu’il ne remplit pas le principe d’affordance.

Approche de paires
L’approche de paires est en fait un piège (!) car c’est un synonyme de l’inter-lettrage. Mais y’a quand même quelques subtilités. Exemple type: AV, là par exemple, il y a une approche de paires entre le A et le V.

Blanc tournant
C’est la partie « blanche » qui entoure un texte et qui fait office de jolie marge, ceci pour le confort de la lecture.

Césure
C’est le fait de couper un mot, généralement à la fin d’une ligne et généralement à la fin d’une syllabe. Rappelez-vous à l’école, on nous l’enseignait déjà!

Contre-forme
Une contre-forme c’est aussi le papier qui reste une fois que l’on a découpé une forme 😄

dpi
dot per inch. Point par pouce. Sympa la traduction. On utilise ce terme pour désigner la résolution de documents ou plutôt d’images. Ce n’est pas tant du « poids » dont on parle, mais bien de la résolution, du nombre de points (ou pixels dans notre cas) par pouce.

Filet
Un filet est un trait, un tout petit trait, que l’on met volontiers (ou pas) sous un titre, pour séparer des éléments, etc.

Adaptive
Alors c’est sûr qu’un design adapté se rapproche beaucoup d’un design responsive dans leur définition et pour l’utilisateur: pouvoir consulter un site sur son smartphone. Ce qui change c’est la technique derrière pour que cela soit possible. L’un se base sur des tailles d’écrans prédéfinies et il s’adapte (l’adaptive), l’autre sur des grilles fluides.

Gestalt principles
Vois-tu un bougeoir ou deux têtes? Cela vous rappelle quelque chose? Il paraît que les cerveaux traitent les images non pas séparément mais comme des ensembles. Ce principe traite donc de cela, comment notre cerveau interprète les images.

Gouttière
Une gouttière est l’espace que l’on peut avoir en design print ou web entre 2 paragraphes, 2 blocs de texte, 2 photos. C’est en général fin et cela fait bien penser à une gouttière physique.

Graisse
Une lettre a plusieurs graisses. Elle peut être plus fine (« light ») ou alors « bold », ce sont des graisses de cette typo.

Icône
La différence avec le pictogramme est assez fine, il faut dire. Une icône a moins besoin de véhiculer une idée, c’est plus pour faire joli.

Interlignage
C’est la distance qu’il y a entre les lignes de texte.

Inter-lettrage
C’est la même chose que l’interlignage mais entre les lettres d’un mot 😄

Licence d’utilisation
Aaaaah la fameuse licence d’utilisation que l’on achète si rarement. Ne soyez pas fous, payez ce que vous utilisez. Et n’oubliez pas la licence web, ça coûte plus cher, Et ouais.

Maquette
Une maquette c’est le rendu graphique du futur site ou de la future newsletter ou autre avant d’être codé.

Marges
C’est aussi un espace blanc qui entoure un texte, une photo, c’est là que je dois vous expliquer la différence d’avec le blanc tournant? 😔 Synonyme: gouttière.

Métaphore
Mon enfance s’est déroulée sans un nuage.

Moodboards
C’est quand on créé un tableau d’envies, une planche de style! Cela oriente ensuite une agence pour savoir ce qu’un client aime ou aime moins.

Pictogramme
Un picto vous en voyez tout le temps: une bonhomme pour indiquer les toilettes homme sur une porte, une image de flamme pour montrer ou se trouve l’extincteur, une enveloppe pour designer un service mail.

Polices de caractères
Ou font ou typo, appelez cela comme vous le souhaitez. Mais n’utilisez jamais au grand jamais la Comic Sans. Beurk.

Styleguide
C’est comme une charte, soit un super document qui vous explique pour un projet: les couleurs, les typos à utiliser, les dos and don’t du logo, le logo, les patterns si il y en a. Parfois c’est un pavé. Parfois il existe à peine.

Styleguide dynamique
Alors vous voyez la définition d’avant? Et bien vous rajoutez une couche de dynamisme. Ok c’est facile. Non en fait le styleguide dynamique c’est une charte mais pour la partie web, et y a du code dedans en plus. C’est « live » et « dynamique » parce que c’est généré à partir du code même qui construit le site. Eh ouais, comme cela pas besoin de chercher, on sait que notre champ « search » ressemblera à cela et aura ce code. Dingue n’est-ce pas?

Typographie
En gros c’est la composition graphique qui englobe polices, caractères et ou l’on va mettre les illustrations dans le texte.

Vectoriel
Une image vectorielle est une image composée de traits, de formes, et c’est donc l’inverse d’une image faite de pixels. L’avantage de ce type d’images c’est qu’on ne perd pas d’informations en redimensionnant l’image, et on n’a pas d’effets de type « escaliers » en zoomant. C’est net.

Développement

Apache
C’est un serveur web distribué sous une licence open-source…

Open source
Code ouvert à tous, donc tout le monde peut le modifier et y contribuer. L’open source c’est cool parce que tous les développeurs du monde regroupent leurs efforts et leurs expertises dans le même but. Les technologies, outils, CMS Open Source ont souvent une durée de vie longue car ils sont supportés par toute une communauté de passionnés. Drupal et WordPress sont open source. Antistatique en fait d’ailleurs beaucoup.

API
Applications Programming Interface ou en français interface de programmation. Permet d’utiliser du contenu d’une application vers ton site et d’utiliser ces informations pour afficher ou traiter du contenu. Par exemple, un site immobilier peut utiliser une API pour transmettre le détail de ses biens immobiliers à son site ainsi qu’aux portails immobiliers sans devoir dupliquer les contenus sur chaque plateforme.

Asynchrone
Charger les données de manière asynchrone sur un site, c’est les charger en séquence. En opposition à la méthode synchrone, qui consiste à les charger toutes en même. Par exemple, le chargement asynchrone est très utile pour augmenter le temps de chargement d’une page avec beaucoup d’images.

Backend
C’est du code, mais du code à l’état de squelette et du côté serveur, par opposition au Frontend. C’est ce que ne voient pas les internautes et ce qui fait que votre site fonctionne.

Balise
<ceci est une balise> principalement utilisée dans le langage HTML, une balise nous informe que quelque chose doit être effectué. Elle définit le <début> et la </fin> d’un élément en HTML.

Bootstrap
C’est un framework, et ils se disent être le framework HTML, CSS et JS le plus populaire pour développer des projets web responsive.

Branche
Quand tu dis « je crée une nouvelle branche » c’est que tu vas créer de nouvelles fonctionnalités dans cette nouvelle branche. Dans Git par exemple, c’est que tu fais une nouvelle version de travail du projet. De cette manière tu peux revenir à tout moment sur une autre branche et voir le code dans un état inchangé.

Commit
Quand tu fais un commit, c’est que tu valides un pack de changements faits dans les fichiers d’un projet. Cela fait référence à la commande du même nom: commit. Et on utilise cette commande avec l’outil de versionning Git.

Concaténer
Ce terme bizarre désigne juste le fait d’assembler des chaînes (de mots, de code, etc) ou carrément des fichiers.

Continuous Integration
L’intégration continue c’est un ensemble de bonnes pratiques qui consistent à vérifier que quand tu touches au code source, tu casses pas tout et surtout t’empires pas ton produit. Un outil pour ceci s’appelle Codeship!

Déploiement
On peut déployer ses ailes, on peut aussi déployer du code. Tout d’un coup le code que l’on a écrit sur sa machine prend vie sur internet, magique.

Backporter
C’est comme dupliquer mais en ajustant légèrement pour que cela reste compatible avec le nouvel environnement. Cela peut être du code, du design etc. Par exemple Drupal peut backporter un patch de sécurité d’une de ses dernières versions sur une de ses versions antérieures.

Dette Technique
La dette technique résulte du fait de coder des trucs bancals ou en trop ou encore d’utiliser trop d’outils. On crée de futurs problèmes pour les générations futures, un gros bordel quoi. Attention, la dette technique n’est pas forcément liée à de l’incompétence. En effet, le fait de réaliser des itérations sans vision globale ou sans objectif (ou en le changeant) peut rendre caduques les reflexions initiales et de ce fait créer de la dette.

Refactoring
C’est de l’amélioration de code. Après de multiples changements dans le code, celui-ci peut devenir bancal, il faut donc le nettoyer pour le rendre plus stable et lisible. Cela rend le site plus performant et lui permet par exemple de porter de nouvelles mises à jour qui n’étaient plus compatibles avec l’ancien code. Le refactoring ne se voit pas sur l’interface, tout se passe tout dans le code.

DeviceLab
C’est un lab de devices. En gros un lab de devices doit avoir toutes les devices possibles pour tester son site sur un Blackberry, une tablette ou un iPhone 4. Ceci fait appel à la notion de compatibilité et de responsive. En effet, les technologies et les résolutions de vos navigateurs, ordinateurs, smartphones, tablettes (etc.) étant diverses et variées, il est primordial de tester votre site dans le plus grand nombre d’entre elles.

DNS
Domain Name System. Évidemment. Ça sert à quoi? Faire pointer votre nom de domaine bidulo.ch vers le serveur où est hébergé votre site. Vous faites ainsi le lien entre les données qui constituent votre site et un nom de domaine qui permet à un internaute lambda d’accéder à votre site facilement.

DRY principle
Principe du Don’t Repeat Yourself, contraire aux principes WET (“Write Everything Twice” ou “We Enjoy Typing”).

ElasticSearch
C’est un moteur d’indexation. Et un index, c’est la base des moteurs de recherche. Genre si tu me dis que tu veux un champ de recherche sur ton site, on peut te l’installer avec cela.

Embed
C’est du contenu externe embarqué. Par exemple, afficher un player Youtube, un flux instagram etc. sur son site via un embed. On peut aussi afficher le contenu d’un autre site.

Field
Anglicisme anglicisme quand tu nous tiens. Et bien c’est un bête champ (comme ceux d’excel dans lequel vous avez noté plein de choses toute la journée).

Frontend
C’est du code, mais du code qui rend votre site joli. C’est la peau et la belle robe sur un squelette.

FTP
F*** THE POLICE, non pardon c’est pas vrai. C’est « File Transfer Protocol ». Cela concerne un serveur et cela nous permet de transférer des fichiers sur un serveur donc.

Fullstack
Un développeur fullstack est un développeur capable de créer un site internet tout seul, donc de faire du frontend et backend.

Github
C’est le Facebook des développeurs. Ok c’est bien plus, mais c’est pas mal ça. C’est une plateforme multi-fonctions. La première et la plus importante est le versionning des projets. Sinon elle héberge des projets, mais a aussi développé un côté réseau social, et enfin elle sert aussi d’outil de suivi des bugs.

Octocat
It’s God! Non plus sérieusement, c’est la mascotte de Github.

Gulp
« Task runner » en NodeJS. Il nous permet d’automatiser des tâches récurrentes comme compiler les CSS, le JS et rafraîchir le navigateur. Tout ça via des modules gulps. ET! Builder des styleguides aussi!.

Hologram
C’est un outil de génération automatique de Styleguide directement depuis les feuilles de styles. On le remplace gentiment par Fabricator, qui fait plus ou moins la même chose, de manière plus modulaire et pas en Ruby.

HTML
Hyper Text Markup Language. Donc c’est un language de présentation de données. On l’utilise avec des <balises> 😄 Ce code s’en fout du look. Un carré à coder sera un carré à coder, sans aucun style!

CSS
Cascading Style Sheets. C’est aussi du code. Mais celui-ci, il dit au précédent à quoi il doit ressembler. Genre tu seras un carré aux bords arrondis et au fond bleu. Tu ne seras pas collé en haut à gauche, mais centré milieu.

IDE
Integrated development environment. Un IDE c’est une application comme SublimeText mais avec plus de fonctionnalités de développement (correction de la syntaxe, accès aux variables globales, intégration de la documentation avec auto-complétion et autre frivolités…).

IP
Internet protocol, tu vois toi tu as une adresse, et ben ton ordinateur aussi, ou plutôt ton réseau.

Issue
Une issue c’est un problème. C’est bête, mais c’est aussi simple que cela.

JS
JavaScript est lui aussi un language de programmation mais magique, lui n’a pas besoin de converser avec le serveur!

Library
C’est une bibliothèque logicielle, et sa fonction principale est de nous servir.

Merge
Merger c’est combiner, affilier! Tu peux donc merger ton code avec celui de quelqu’un d’autre ou d’une autre période.

Node.js
C’est un environnement de développement en Javascript. Il permet notamment de faire des applications Web.

Overnesting
Vous vous rappelez des balises? Et bien quand on fait de l’overnesting, on utilise trop de balise imbriquées (des balises dans des balises qui sont elles-mêmes dans des balises) et du coup, ça devient du code spaghetti et ça crée cette fameuse dette précédemment citée.

PHP
Hypertext Preprocessor. C’est un langage de programmation. Attention ce n’est pas un langage comparable à l’HTML par exemple. L’HTML se soucie de comment quelque chose va apparaître sur votre ordi. Le PHP lui par contre se concentre sur le code du serveur (là d’où vient la page que vous allez voir). On a du coup besoin des 2 mais pas pour les mêmes raisons. Notre Toni rajoute: « Le PHP va s’occuper d’interpréter les données stockées dans une base de donnée sur le serveur et les envoyer sous forme d’HTML au navigateur, chez l’intrépide internaute. »

Plugin
Alors parfois tu as un produit de base et tu peux y rajouter des options. Ben en informatique c’est pareil. Il y a souvent des « plugins » qui te permettent de rajouter des options pour pimper genre ton CMS, Google docs, etc..Cela s’appelle aussi une extension.

Cache
Les caches permettent aux sites d’être plus performants. Ce sont en fait des sauvegardes de fichiers, qui font en sorte que seuls quelques éléments soient mis à jour. Le site est alors plus rapide que si tous les fichiers se mettaient à jour à chaque fois. Petite astuce : Si l’on modifie le contenu d’un site contenant des caches, il se peut que les changements n’apparaissent pas en rafraîchissant simplement la page. La petite astuce est d’ajouter un point d’interrogation et des lettres à la fin de l’url. Ex : ?abc

CMS
Content management system : Un CMS sert à la gestion du contenu de votre site. Il en existe pleins tels que WordPress, Drupal, Typo 3, Joomla, Magento, etc.

CRM
Customer relationship management, pour ceux qui ne parlent pas anglais : Outil de gestion de relation client. De manière générale, cela permet de traiter, analyser et gérer les informations relatives aux clients et prospects (Nous utilisons Pipedrive).

Production
C’est l’environnement public du site, publié. Un gros ton site est « en production » lorsqu’il est visible par tous. On compare cet environnement « final » à l’environnement de « test » que sont le staging ou la pre-prod.

Pull Request
Faire un pull request c’est faire une demande de soumission de contribution. Tu as fait des modifications, mais comme tu as peur que tu aies tout pété, ce qui serait embêtant, tu soumets donc ton travail pour qu’il soit reviewé avant d’être intégré dans le reste. Cela garantie aussi que personne ne travaille dans son coin et que le code garde une logique d’ensemble.

Puller
Puller des données, c’est les demander 😄

Pusher
Pousser des données c’est mettre à disposition sur le repo du projet ce qu’on vient de commiter. Un bon exemple: les mettre sur Github!

Repository
C’est un dépôt. De quoi? De données. Les dév’ ils disent repo’.

Responsive
Vous vous êtes déjà vu « zoomer » un site pour pouvoir le lire sur votre mobile? Eh bien un site responsive est conçu pour que cela ne soit pas nécessaire. En 2015 tous les sites devraient l’être.

Sass
Syntactically Awesome Style Sheets. C’est un pré-processeur CSS. Ça nous permet d’écrire un code CSS plus lisible et plus maintenable qui sera ensuite compilé en CSS. Et surtout c’est Awesome!

Serveur
On héberge les sites sur un serveur.

SMTP
Simple Mail Transfer Protocol. C’est juste un serveur pour les emails.

IMAP
Internet Message Access Protocole. C’est aussi ça.

Staging
C’est le site avant qu’il ne soit public, durant la phase de développement. Quand il est en « staging » on peut y accéder via une adresse spécifique dédiée et protégée. Ensuite on peut publier en prod.

Sublime Text
Vous voyez Word pour écrire une lettre d’amour? Sublime text c’est pareil mais pour du code d’amour.

Taxonomie
C’est tout ce qui qualifie les données, ce qu’il y a autour du contenu. Tout ce qui sert à organiser et qualifier l’information. Par exemple, date, auteur, nombre de partage, nom d’une catégorie, etc. Ou des fossiles. Mais c’est pas le bon domaine.

Terminal
Ce programme où tout ce que l’on fait sont des commandes écrites et où le résultat s’affiche en texte également. C’est la matrice.

Test unitaire
Ben c’est un test pour vérifier que tout fonctionne non de bleu. Par contre on ne teste qu’une unité, donc qu’une partie. Le « Test Driven Development » a remis ceci au goût du jour. Tu m’étonnes, il faut tester!!

Test fonctionnel
Là c’est pareil, mais disons que c’est la méta-notion 😄

VPN
Virtual Private Network : Cela permet de se connecter à un réseau internet à distance. C’est utile pour avoir accès aux dossiers du boulot lorsqu’on travaille à la maison, mais surtout pour avoir accès au grand choix de films et séries sur Netflix US depuis l’Europe. Cela permet aussi de sécuriser l’accès à des réseaux (accessibles uniquement via VPN).

Méthodologie

Kanban
C’est une méthodologie de travail que nous utilisons justement! Le principe se rapproche de l’Agilité, mais est plus appropriée et plus souple que l’agilité dans notre cas.

Agilité
C’est donc aussi une méthodologie de travail, mais vous résumer ceci en 3 mots c’est un peu compliqué tout de même.

Trello
C’est un outil qui permet de créer des cartes digitales, que l’on peut bouger dans diverses colonnes que l’on aura précédemment créé. On peut s’en servir pour déplacer les user stories d’une colonne à l’autre (in progress, done, validated) ou pour ses vacances. Cela permet de voir tout ce qu’il reste à faire, pour quand, par qui etc.

Agence

Brief client
Document explicitant les besoins/demandes d’un client à l’agence.

Kickoff
Meeting qui marque le lancement d’un projet. Il sert à clarifier les besoins du client, être sûr que tout le monde est sur la même longueur d’onde et permet de détailler ce qu’il va ensuite se passer.

MVP
Minimum viable project : C’est une stratégie de développement pour lancer un projet plus rapidement. Cela consiste à d’abord lancer une version simplifiée du projet, avant de la compléter par la suite avec toutes ces fonctionnalités prévues initialement.

Pitch
Courte présentation de ce que l’on propose aux clients pour répondre à ses besoins/demandes, ce fait en réponse à un appel d’offre.

Post mortem
Et au fait, le projet était trop cool, mais on peut améliorer […] parce que […]. Et toi, t’en as pensé quoi ? Es-tu satisfait du réasultat ? Avons-nous atteint nos objectifs ? À la fin du projet on échange sur ce qui c’est passé et on se fixe des objectifs pour la suite. On fait aussi un post mortem quand tout a roulé, car c’est toujours bien de dire que c’était bien!

Voici donc les quelques 98 mots* qui font partie de mon vocabulaire de tous les jours (et j’en oublie). Et vous, vous utilisez aussi des termes barbares dans votre métier?

*Contenu principal rédigé par Saniha, puis complété par Morgane & Camille

Articles

Awwwards Paris “Love Days” 2014

Susana Rodrigues