[Annulaire d’entreprise] Guide de A à Z pour créer un trombinoscope d’entreprise en ligne gratuitement !

Étape 1 : Recadrer vos photos

La première étape, la plus longue mais aussi la plus importante, pour avoir un rendu uniforme et parfait, est de recadrer l’ensemble de vos photos !

Dans ce tutoriel, il vous faudra recadrer toutes vos images pour qu'elles « mesures » 300 pixels de largeur sur 480 pixels de hauteur.

LOL, comment on fait du coup ?

_Vous pouvez demander à votre graphiste ou intégrateur web de la faire, cela lui prendra quelques minutes.

_Vous pouvez utiliser un logiciel pour recadrer vous-même vos images si vous avez quelque connaissance en la matière (Paint, Photoshop, GIMP...).

_Vous pouvez utiliser un des nombreux sites en ligne gratuit et sans inscription permettant de le faire. Nous vous conseillons iloveimg.com, rapide et efficace

Importer l’image | Mettre les dimensions souhaitées | Recadrez |Télécharger
(recommencer l’opération pour chaque image)

Étape 2 : Renommer vos photos

Vous avez maintenant toutes les photos de vos collaborateur parfaitement recadré. La prochaine étape sera des les renommer.

Donc par exemple si vous avez Jérôme dans vos contacts, vous allez renommer sa photo :  jerome.jpg

Il est très important de ne pas mettre de majuscule, d’accent ou d’espace dans le nommage de vos photos. Seul sont accepté les tirets (ex : jerome-durant.jpg).

Ne sous-estimez pas cette étape, elle peut vous éviter pas mal de problème et vous faire gagner un temps précieux par la suite.

Étape 3 : Héberger les images

Bravo ! Maintenant vous avez toutes vos photos uniformisées et prêtes à être hébergées, c'est-à-dire enregistrées sur le web.

Encore une fois, plusieurs manières de faire, vous pouvez demander au service informatique de le faire pour vous et de vous envoyer les URL de chaque image…

… Ou le faire vous-même en passant par un site en ligne, gratuit et sans inscription. Nous vous conseillons ici zupimages.net

1. Importer votre image en cliquant sur "parcourir"
2. Cliquez sur valider
3. Copiez « le lien direct » de votre image
4. Enregistrez-le quelque part pour vous en souvenir à la prochaine étape

Étape 4 : Modifier notre template HTML (pas de panique c’est easy on vous le garanti)

Attention, après l'étape très rapide qu'on s'apprête à réaliser, vous pourrez vous venter d’avoir modifier du HTML ! Tel un(e) vrai(e) petit(e) développeur(euse) en herbe. Ne vous vantez quand même pas trop, car vous allez juste faire 2-3 copier-coller.

1. Cliquez sur le lien suivant pour afficher votre template

2. Cliquez sur « View in Editor »

3. Agrandissez au maximum la colonne HTML pour mieux voir

4. Scroller dans le HTML jusqu'à trouver le texte « Ma Jolie Entreprise » que vous remplacerez par votre nom de société.

5. Juste en dessous remarquez que chaque ligne commençant par <li> et finissant par </li> correspond à un employé. Vous pouvez donc en dupliquer ou en supprimer à votre guise !

6. Vous n'aurez plus qu’à changer sur chaque ligne : le prénom, le métier (écrit en couleur blanche) et l’url de l’image précédemment enregistrée.

Étape 5 : Récupérer le code HTML et l'héberger

Tel un intégrateur(euse) de talent vous avez fini d’éditer votre code HTML. Il vous faudra maintenant, le récupérer et l’héberger quelque part.

Là encore plusieurs solution:

_ Copiez l’intégralité du code, coller le dans un document texte, et envoyer le à votre service informatique pour l’héberger sur une page de votre site web (un jeu d’enfant). C’est la meilleure solution pour avoir un trombinoscope sans pub avec une url qui aura la nom de votre société.

_ Vous pouvez aussi le faire vous-même, en vous créant un compte sur le site codepen.io, en cliquant sur « New Pen », encollant l’intégralité du code dans la partie HTML, puis en cliquant sur l’icône« Live View » qui vous ouvrira une page que vous pourrez partager par mail ou autre.

‍

Pour aller plus loin 🚀

Nous espérons avoir pu vous aider à créer votre trombinoscope en ligne, si vous voulez allez plus loin, créer une interface plus simple, avoir un site dédié interne ou externe, pouvoir filtrer/rechercher par nom, par métier, ajouter des informations supplémentaire au clic, changer le format des images etc. Nous vous invitons à contacter un professionnel spécialiste du domaine… c'est à dire HAPPY INTRANET !