Les articles de la catégorie « Tutoriel »

Cet après-midi, j’ai rencontré un joli casse-tête en intégration. Après 2 heures de remue-méninges, j’ai fini par trouver une solution qui me convenait. J’ai posté le problème sur Twitter, et à ma grande surprise j’ai eu beaucoup de réponses, dont certaines assez astucieuses, mais ne collant pas tout à fait à ce que je souhaitais faire. Alors avant de donner la solution que j’ai trouvé, j’ai décidé de faire durer le suspens un peu plus longtemps et de poster le problème ici.

Voici le casse-tête en question :

C’est un effet graphique assez classique, en particulier dans la presse papier. Pourtant, il se trouve que ça reste relativement complexe à reproduire de manière simple en CSS.

Voici les règles à respecter :

1. Le texte ne doit contenir aucune balises (donc pas de span pour chaque ligne, pas de br)
2. Vous pouvez utiliser autant de balises que vous voulez autour du texte
3. Pas de JavaScript, que du HTML et CSS
4. Le fond blanc doit suivre le contour du texte
5. Il y a une marge à l’intérieur du fond blanc autour du texte de 20px à gauche et à droite de chaque ligne, et d’environ 10px en haut et en bas
6. Le texte est dynamique, et on doit donc pouvoir le modifier en conservant l’effet
7. La solution doit fonctionner sur les navigateurs modernes (IE9, Firefox 13, Chrome 19, …)

Pour vous aider à démarrer, j’ai mis à votre disposition sur jsFiddle un exemple de code HTML et CSS. Vous êtes libres de modifier le code HTML et CSS, tant que vous respectez les règles ci-dessus.

Je vous invite à partager vos réalisations dans les commentaires. Mercredi soir, je publierais la solution que j’ai trouvé, et je sélectionnerais mes solutions préférées parmi les commentaires. Amusez-vous bien, et bonne chance à tous !

En janvier dernier, je vous racontais comment j’avais rédigé une petite annonce pour recruter un intégrateur dans ma boîte l’année dernière. Voici le deuxième article de cette petite série vous faisant part de mon retour d’expérience.

La deuxième étape d’un recrutement, c’est d’éplucher les candidatures reçues, et de répondre à chaque candidat. L’année dernière, nous avions reçu une vingtaine de candidatures en l’espace de deux semaines (ce qui nous a suffit pour trouver la bonne personne). Mais je reçois également régulièrement des demandes de stage et de contrats professionnels tout au long de l’année. Et croyez moi, en général ce n’est pas très réjouissant.

Voici quelques points presque automatiquement rédhibitoires (et qui sont réellement arrivés) :

• Les lettres papier manuscrites. Je travaille dans le web. La dernière fois que j’ai écrit une lettre manuscrite, c’était quand j’étais en vacances dans les Alpes quand j’avais 11 ans. Et surtout, les seuls courriers papier que je reçois, ce sont les appels à cotisations de l’URSSAF, du RSI ou de la RAM. Autrement dit je n’ai déjà pas un très bon à priori de votre candidature avant même de l’avoir lu. Je me doute que c’est ce qu’on enseigne encore dans certaines universités, mais sérieusement, arrêtez ça si vous postulez pour le web.
• Les pièces jointes. Si vous m’envoyez votre C.V. ou lettre de motivation en pièce jointe, faites le impérativement au format PDF. Les formats doc ou odt ne sont pas universels, et il y a de grandes chances que ça ne s’affiche pas chez moi comme ça s’affichait chez vous. Et surtout, évitez d’envoyer une pièce jointe de 15 Mo, et préférez un lien vers votre site.
• Votre adresse e-mail. Faites attention à l’adresse e-mail avec laquelle vous envoyez votre candidature. Vous n’avez pas idée du nombre de candidat qui utilise leur adresse personnelle type « kikilefada@caramail.com » pour me contacter.
• Les fautes d’orthographe. On est en 2012. La plupart des navigateurs ont un correcteur orthographique intégré. Ce n’est plus acceptable.
• Les candidatures envoyées à la terre entière en copie. Si vous avez trop la flemme d’envoyer un mail unique à chaque entreprise qui vous intéresse, il y a des chances pour que j’ai trop la flemme de vous convoquer en entretien. Mention spéciale pour ceux ou celles qui en plus envoient leurs C.V. à toutes les entreprises en CC (et même pas en CCI).
• Les candidatures, oui mais en fait, non pas trop. Il m’est arrivé plusieurs fois de recevoir des mails du type « Bonjour, est-ce que vous recrutez, comme ça je pourrais vous envoyer mon C.V. ». Qu’est-ce qui vous retient d’envoyer votre C.V. directement ? Vous n’avez pas de timbre à payer. Si on recrute, ça évite déjà un premier échange inutile. Et si on ne recrute pas, ça nous permet de conserver vos coordonnées pour éventuellement vous recontacter lors d’un futur recrutement.

En tant que recruteur, en postant ma petite annonce, j’ai déjà une petite idée en tête des réponses que je souhaiterais obtenir. Le point essentiel, c’est de me donner l’impression que vous répondez à mon annonce, et que votre réponse n’est pas un copié/collé envoyé à l’identique à toutes les agences web de la région. Bien sûr je ne suis pas dupe, il y aura forcément des éléments communs. Mais il est indispensable que votre C.V. et votre lettre de motivation contiennent des éléments personnalisés répondant précisément à l’annonce.

Le critère déterminant pour moi, c’est d’identifier les candidats qui ont répondu aux perches tendues dans la petite annonce. J’avais volontairement glissé quelques perches pour repérer les candidats qui y paieront attention et y répondront (par exemple « Afin de développer notre activité et poursuivre nos plans de domination mondiale« , « Des connaissances en SF4, L4D2 ou WOW sont des plus non négligeables« ). Ce n’est pas forcément dramatique si vous passez à côté, mais par contre si vous y répondez, ça montre bien que vous avez bien compris le type de profil recherché.

Maintenant concernant votre C.V. en lui même, ne misez pas tout dessus. En janvier dernier, Guillaume Potier résumait très bien la situation dans un article intitulé « Développeurs & startup : vos diplômes et vos CV ne servent à rien (ou presque)« . Je passerais au mieux une à deux minutes à lire votre C.V. et votre lettre de motivation, donc n’en faites pas trop.

L’année dernière, nous avions reçu une vingtaine de candidatures en l’espace de deux semaines. C’est un volume qui reste tout à faire gérable humainement, donc j’ai pris le temps de répondre à chaque candidat. Dans quelques rares cas, je me suis permis de remonter au candidat une ou plusieurs erreurs que je considérais comme grave dans sa candidature (dans l’espoir éventuellement qu’il ne la reproduise pas).

Dans un cas en particulier, le candidat m’avait transmis un C.V. et une lettre de motivation datant de 2010 (soit vieux de plus d’un an). Je me suis permis de lui apporter la réponse suivante.

Bonjour Monsieur,

Je vous remercie de nous avoir transféré un e-mail de candidature datant de mai 2010. Mais comme vous aurez pu le remarquer dans notre annonce, nous sommes très attachés aux détails et nous recherchons un candidat rigoureux. Je vous souhaite bon courage dans la suite de vos recherches.

Cordialement.

Bonsoir,

Je n’ai pas changé la date de ma lettre de motivation, il est vrai,une erreur de ma pare, mais désolé que mes motivations n’est pas changé, j’aurais pu vous réécrire la même chose tourné d’une autre manière et cela n’aurais rien changé à mes compétences, ma rigourosité et mon envie de travailler.

Cordialement.

Croyez-moi, quand vous répondez à une annonce, ce n’est pas bien difficile de ne pas être dans les 90% du bas. Par contre, il faudra apporter votre personnalité et votre savoir faire afin de vous démarquer des 10% restants.

J’ai souvent eu à intégrer des pages statiques avec des longues listes de liens. La plupart du temps, les chefs de projets utilisent Excel (ou OpenOffice, LibreOffice ou Google Docs) pour rassembler et partager tous ces liens. Typiquement, on va y trouver une colonne avec l’intitulé du lien, et un autre avec l’URL du lien.

A partir de ces liens, je vais devoir générer le code HTML suivant :

<ul>
<li><a href="http://www.hteumeuleu.fr/chrome-sous-android-ne-supporte-pas-flash/">Chrome sous Android ne supporte pas Flash</a></li>
<li><a href="http://www.hteumeuleu.fr/cout-grandissant-developpement-interactif/">Le coût grandissant du développement interactif</a></li>
<li><a href="http://www.hteumeuleu.fr/produire-c-est-decourager-la-creativite/">« Produire, c’est décourager la créativité. »</a></li>
<li><a href="http://www.hteumeuleu.fr/statistiques-google-janvier-2012/">Les statistiques de Google+ en janvier 2012</a></li>
</ul>


Une façon basique d’arriver à ce résultat serait d’intégrer chaque lien un par un, en copiant l’intitulé du lien, en le collant dans son éditeur de code, puis en copiant l’URL du lien, et en la collant dans son éditeur de code. Mais clairement, c’est long, fastidieux et très pénible. Et ce n’est clairement pas adapté pour des documents de plusieurs centaines de liens.

Voici une façon beaucoup plus simple d’arriver au même résultat en utilisant de simples formules dans un tableur. Ces formules fonctionnent en principe dans n’importe quel tableur (Excel, OpenOffice, LibreOffice, Google Docs), mais selon la langue du logiciel il est possible que vous deviez traduire le nom des fonctions utilisées.

Dans un tableur, pour concaténer deux valeurs de cellules ou deux chaînes de caractères, on va utiliser l’opérateur & (ex : A1 & A2). Une chaîne de caractère doit être délimitée par deux double guillemets anglais (ex : A1 & « toto »). Pour échapper des double guillemets dans une chaîne de caractère, il faut écrire deux double guillemets. Voici alors la formule qu’on utiliserait dans une colonne C pour générer la balise d’un lien dont le contenu se trouve dans la colonne A, et l’URL dans la colonne B.

="<li><a href=""" & B1 & """>" & A1 &"</a></li>"

Si vous avez un document bien formaté, vous pouvez dores et déjà étendre cette formule à tout votre colonne, et vous n’aurez plus qu’à copier/coller le tout dans votre page HTML ! Mais souvent, les documents de ce genre sont remplis d’annotations, avec des lignes vides ou commentées pour structurer un peu le document. On va alors peaufiner un peu notre formule en ajoutant un traitement conditionnel avec la fonction IF (ou SI en français). Cette fonction prends 3 paramètres : IF(test; valeur si vrai; valeur si faux). Afin de s’assurer qu’on doit bien générer du HTML pour la ligne en cours, on va vérifier si la cellule de la colonne URL n’est pas vide. Si c’est le cas, on génère bien le HTML, sinon on n’affiche rien. On obtient alors la formule suivante :

=IF(B1<>""; "<li><a href=""" & B1 & """>" & A1 & "</a></li>" ;"")

Pour finaliser tout ça, je peux également insérer une nouvelle formule dans une cellule vide qui va concaténer toutes mes balises <li>, et les englober dans une balise <ul>. Pour concaténer rapidement toute une plage de cellule, on va utiliser la fonction CONCATENATE(). Ça donne quelque chose comme ça :

=CONCATENATE("<ul>"; C3:C56; "</ul>")

Et voilà ! Vous n’avez plus qu’à copier le contenu de cette cellule dans votre page HTML. J’ai créé sur Google Docs un document d’exemple pour que vous puissiez voir le résultat directement.

Le mois dernier, en regardant une vidéo de Ryan Singer de 37Signals en train de faire des maquettes en HTML et sous Photoshop, j’ai découvert un raccourci Photoshop qui a changé ma vie. Ça nous est tous déjà arrivé au moins une fois de devoir agrandir un onglet, ou une forme avec un dégradé et des bordures particulières. Si vous étirez simplement votre sélection sous Photoshop, les coins seront alors déformés. Voici comment utiliser simplement la fonction « Décalage » (ou Nudge en anglais) de Photoshop sur une sélection, et ainsi facilement ou agrandir un onglet.

Le raccourci est simple : alt + maj + droite (ou gauche) sur une sélection, sous Windows ou Mac, dans Photoshop. Photoshop va alors dupliquer une bande de 10px de large (et de la hauteur de votre sélection). Si besoin, vous pouvez également faire le même raccourci sans la touche maj pour dupliquer uniquement une bande de 1px de large.

Je me suis senti très bête de ne pas avoir connu ce raccourci auparavant.

J’ai créé ma boîte en 2008 avec deux collègues développeurs. Nous sommes une petite agence de la région Lilloise spécialisée dans le développement web. L’année dernière, on a décidé de se lancer dans le recrutement d’un tout premier intégrateur. J’avais déjà eu l’occasion de faire passer des entretiens dans ma précédente boîte, mais c’est la première fois que j’ai eu à m’occuper de toute la chaîne de recrutement, de la rédaction de la petite annonce aux entretiens jusqu’à la décision finale. Voici le premier article d’une petite série vous faisant part de mon retour d’expérience.

La première étape d’un recrutement consiste donc à rédiger une petite annonce. Etant une toute petite entreprise, nous recherchions avant tout quelqu’un qui collerait bien à l’équipe et à notre ambiance de travail. Je tenais alors vraiment à ce que l’esprit recherché soit bien retranscrit dans notre annonce. A ma grande surprise, le ton des annonces de recrutement pour des postes de développeur/intégrateur est souvent ennuyeux, voire maladroit. Je peux comprendre que de très grands groupes et grosses SSII optent pour un ton informel et solennel, mais je trouve ça ridicule lorsqu’il s’agit d’une TPE ou d’une PME. Par contre, il faut veiller à ne pas tomber dans l’excès inverse, à savoir un côté trop personnel et trop direct. Je viens de faire un tour sur RemixJobs, et voici quelques perles parmi les dernières annonces postées. A chaque fois il s’agit de la toute premières phrase de l’annonce.

D’abord, il y a les annonces qui en font des tonnes :

Vous voulez vibrer dans un univers digne de la Silicon Valley en plein Paris, alors cette annonce est faite pour vous !

Vraiment ? Il y a en plein Paris « un univers » de 400 Km² employant plus de 200 000 personnes dans les hautes technologies dans des sociétés mondialement reconnues comme Microsoft, Apple,  Facebook, eBay, etc. ? Et la suite de l’annonce est tout aussi humble (les fautes sont d’origine) :

Composé d’une équipe jeune et passionné par le web , notre ambition est de devenir un acteur majeur du web européen dans les mois à venir.

J’aime beaucoup « dans les mois à venir ». On n’est pas sûr d’être un acteur majeur européen en février, mais en mars ça devrait être bon.

Et puis il y a aussi les annonces qui veulent se la jouer cool en utilisant l’expression « startup » comme dans les années 2000.

[Nom de la boîte], dernière-née des startup françaises, recrute !

Il y a aussi les annonces rédigées par un cinquantenaire qui n’a pas la moindre idée du poste qu’il propose mais qui pense que le tutoiement rends sa boîte beaucoup plus cool.

Tu es qui ? Toi, on compte clairement sur toi pour nous dire ce que tu fais, pour nous, ça relève de la magie (d’HTML, de PHP et javascript aussi il parait).

Et puis, il y a les annonce douteuses :

Cherche developpeur/developpeuse maitrisant Symfony pour supporter une jeune startup innovante, et plus si affinités.

La personne qui a écrit ça est consciente que l’expression « et plus si affinités » sous-entend des pratiques sexuelles ?

Je pourrais continuer longtemps comme ça, mais je vous laisse faire le test par vous même sur des sites de petites annonces. J’avais fait la même pige l’année dernière, et j’étais déjà tombé sur le même genre d’annonces. J’en avais alors tiré les conclusions suivantes sur le ton à donner dans la petite annonce :

• Evitez le ton d’un télégramme (« Entreprise cherche intégrateur »). Je préfère mille fois lire une belle annonce bien rédigée, que des phrases courtes sans saveur et sans humanité.
• De la même manière, évitez les listes à point (oui, je fais une liste à points pour vous dire ça). Dans une annonce de recrutement, une liste à points donne l’impression que vous avez jeté vos idées en vrac dans Word et que vous avez publié le tout tel quel.
• Utilisez le vouvoiement (sauf si vous cherchez à recruter des enfants).
• Soyez modeste. Il y a des chances pour que vos parts de marché, vos récompenses, ou vos ambitions n’intéressent pas vos salariés autant que vous.
• Soyez sérieux, mais pas solennel. Evitez de vouloir être trop original en cherchant des métaphores pour chaque phrase. Soyez précis, soyez concret, mais sans pour autant prendre un ton pompeux et solennel.

En plus de ça, je m’étais dit que ce serait rigolo de glisser quelques détournements des phrases toutes faites habituelles. Maintenant que le ton est donné, il ne reste plus qu’à écrire le contenu. Le contenu d’une annonce doit aborder les 3 sujets suivants :

1. La présentation de l’entreprise : qui vous êtes, ce que vous faites, et pourquoi vous recrutez.
2. Le poste proposé : quelles seront les tâches à réaliser au quotidien et le type de projets sur lesquels le candidat sera susceptible de travailler (maintenance de sites, intégration de newsletters, de back-office, d’opérations commerciales, etc. ?)
3. Le profil recherché : quelles sont les qualités attendues, quelles sont les compétences techniques et le niveau d’expérience requis

Concernant ce dernier point, j’ai remarqué une mauvaise pratique courante dans les annonces que j’ai pu lire : les « plus ». « La maîtrise de [insérez ici un logiciel ou un langage] est un plus ». « Des connaissances en [x] et en [y] sont des plus non négligeables ». Okay, dites moi mesdames et messieurs les responsables du recrutement : vous avez déjà viré un candidat parce qu’il avait des connaissances non désirables ? J’imagine déjà les annonces : « Des connaissances en [z] seront fortement préjudiciables ». Et à quoi correspondent ces plus, au juste ? Est-ce qu’il s’agit d’outils/langages indispensables au sein de votre entreprise ? Ou est-ce que c’est juste une liste de mots-clés à la mode que vous avez repéré pour filtrer un peu les candidats ? Restons sérieux, et évitons ça. Sois vous avez une demande indispensable au poste, soit vous êtes juste en train de polluer votre annonce.

Une dernière bonne pratique dans la rédaction d’une annonce de recrutement est de tendre des perches. Une annonce est une invitation à la réponse d’un candidat. Si vous vous débrouillez bien, vous aurez beaucoup de réponses. Un bon moyen de filtrer ces réponses est de voir comment le candidat répond à ces perches (et ainsi mettre à la poubelle tous ceux qui envoient les mêmes CV en copie cachée par e-mail à toutes les entreprises en même temps). Il ne doit en aucun cas s’agir de pièges, mais plus d’ouvertures à la discussion.

Une fois l’annonce rédigée, je l’ai publiée uniquement sur 2 sites : RemixJobs et Alsacréations. J’ai reçu une petite dizaine de candidatures en provenance de chaque site. Par contre, j’ai eu le sentiment que les candidatures en provenance de RemixJobs étaient plus qualitatives que celles d’Alsacréations. Il y a un an, RemixJobs nécessitait une inscription pour pouvoir répondre à une annonce. Même si cela peut paraître plus contraignant, ça créé une première barrière virtuelle repoussant les plus fainéants. Du coup, les réponses reçues de RemixJobs m’ont semblé mieux ciblées et plus travaillées que celles d’Alsacréations. Sur Alsacréations, n’importe qui peut consulter une annonce, et j’ai donc reçu bien plus de réponses pas adaptées (de freelances, de webdesigners, ou de stagiaires). Aussi, la gestion de son annonce (pour la modifier, supprimer) est bien plus pratique chez RemixJobs que chez Alsacréations.

Voici donc sans plus attendre, et dans son intégralité, l’annonce que j’ai publié en février 2011 :

Tilt Studio est une petite agence web spécialisée dans le développement web créée en 2008. Nous sommes 3 associés (3 développeurs web) et nous mettons notre amour du code bien fait au service de petits entrepreneurs (sites institutionnels, e-commerce) mais aussi au service de grandes marques internationales (e-commerce, newsletters, jeux concours). Afin de développer notre activité et poursuivre nos plans de domination mondiale, nous recherchons un intégrateur web pour (pardonnez-moi pour le jeu de mot) intégrer notre équipe.

Au sein de notre équipe, vous êtes en charge des différentes intégrations pour nos clients. De newsletters à des sites web complets, vous écrivez du joli code et vous assurez la compatibilité entre navigateurs et l’optimisation de vos intégrations. Vous travaillez également sur des projets internes où vous pourrez expérimenter de nouvelles technologies.

Intégrateur débutant ou confirmé, homme ou femme, vous connaissez les langages HTML5, CSS3 et Javascript (Mootools, jQuery). Vous êtes curieux(se), intéressé(e) et surtout passionné(e) du web. Vous avez envie de découvrir, mais aussi nous faire découvrir, de nouvelles pratiques d’intégration. Vous êtes rigoureux(se) et attentif(ve) aux moindres détails, jusqu’au plus petit pixel qui dépasse. Des connaissances en SF4, L4D2 ou WOW sont des plus non négligeables.