Les archives de la catégorie "Tutoriel"

Les smart banners sous iOS 6

Dans iOS6, Safari intègre une nouvelle fonctionnalité assez discrète : les smart banners. Une smart banner (ou "bannière intelligente", en opposition à toutes ces bannières stupides), c'est une bannière qui vient s'ajouter en haut de votre site dans Safari pour mettre en avant votre application iOS.

Pour ce faire, il vous suffit d'ajouter la balise meta suivante avec l'identifiant de votre application, n'importe où dans votre code HTML. Pour obtenir l'identifiant de votre application, vous pouvez utiliser l'iTunes Link Maker d'Apple.
<meta name="apple-itunes-app" content="app-id=562772514" />

La bannière affiche alors l'icône, le nom, le développeur, la note et le prix de l'application, ainsi qu'un lien pour y accéder depuis l'App Store et une croix pour faire disparaître définitivement la bannière. Voici le rendu final sur une page web (avec ici l'excellentissime Devil's Attorney).

Une smart banner iOS6

Si vous faites parti du programme d'affiliation d'Apple, vous pouvez également ajouter votre identifiant d'affilié comme suit :

<meta name="apple-itunes-app" content="app-id=562772514, affiliate-data=partnerId=42&siteID=darkmaul" />

Sur son blog, David Smith détaille également l'existence d'un paramètre supplémentaire permettant de passer une URL à votre application dès son premier lancement, pour afficher par exemple un contenu spécifique.

Je ne suis en général pas friand de ce genre de gadget purement marketing, mais c'est clairement beaucoup moins intrusif que des alertes JavaScript ou des lightbox maison. Et ça vous évite un peu de tomber dans les pratiques mobiles du Mal.

La commande ln -s

L'année dernière, j'ai découvert une ligne de commande Unix bien pratique : ln -s. Cette commande permet de créer un lien symbolique vers un fichier ou un dossier. Un lien symbolique, c'est une référence à un fichier ou dossier qui correspond fonctionnellement au fichier ou dossier original. Grossièrement, ça permet de retrouver un même dossier à plusieurs endroits sur son ordinateur sans avoir à le dupliquer.

Ça peut paraître tordu de vouloir retrouver un même dossier à plusieurs endroits, mais ça correspond pile poile à mon organisation. Je travaille souvent sur des petits projets d'intégration (des newsletters, des pages d'opérations commerciales, etc.) qui ne nécessitent pas de contrôleur de sources. En général, je vais me retrouver avec l'organisation suivante :

  • Un dossier "~/Boulot/Client/Nom_du_projet/" avec à l'intérieur un dossier "Elements" (avec les fichiers envoyés par le client), un dossier "PSD" (avec les maquettes) et un dossier "HTML" (avec mon intégration).
  • Un dossier sur mon serveur local dans "/Applications/MAMP/htdocs/Nom_du_projet", pour pouvoir tester la page dans de bonnes conditions.
  • Eventuellement une sauvegarde dans mon dossier "~/Dropbox", par précaution, et au cas où j'aurais besoin d'accéder à mes fichiers sur une machine différente chez moi.

Grâce à la commande ln -s, je peux retrouver mes fichiers dans ces 3 dossiers sans avoir à les dupliquer. Ainsi, il me suffit de taper dans le Terminal les deux commandes suivantes :

ln -s ~/Boulot/Client/Nom_du_projet/ /Applications/MAMP/htdocs/Nom_du_projet
ln -s ~/Boulot/Client/Nom_du_projet/ ~/Dropbox/Nom_du_projet

Et le tour est joué ! A noter que sous Windows, la commande mklink permet d'obtenir un résultat similaire.

A CSS brain teaser

This week, I encountered a nice brain teaser in front end development. After 2 hours of brainstorming, I finally found a solution that pleased me. I posted the problem on Twitter, then on my blog. To my surprise, I had a lot of answers, and some of them were actually pretty ingenious. So I decided to translate it in english so you english folks can enjoy it too.

So here it is :

A CSS brain teaser

It's a pretty common visual effect, especially in print magazines. However, I found out that it was not that intuitive to reproduce this effect simply in CSS.

Here are the rules :

  1. The text must not be divided by any tags (so no span for each lines, no br)
  2. You can use as many tags as you want around the text
  3. No JavaScript, only HTML and CSS
  4. The white background must follow around the text
  5. There is a margin inside the white background around the text of 20px on the left and right, and about 10px on top and bottom
  6. The text is dynamic, so we must be able to easily change it and still have the visual effect
  7. The solution must work on modern browsers (IE9, Firefox 13, Chrome 19, ...)

To help you get started, I created a sample code on jsFiddle. You're free to edit the HTML and CSS, as long as you respect the rules above.

I invite you to share your realisations on the comments below. I'll publish the solution I came up with later this week. Have fun, and good luck to all !

Un joli casse-tête en intégration

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 :

Un casse-tête en CSS

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 !

Recruter un intégrateur, étape 2 : les C.V.

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.
Je n'attendais pas particulièrement de réponse. Mais en tout cas, je ne m'attendais surtout pas à ça (les fautes et le gras sont d'origine) :
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.